From 933927cda189a6a682b16ea28773536a4d363106 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Mon, 29 Jun 2015 09:48:32 -0700
Subject: [PATCH 001/266] [Common UI] Reduce digest count

Reduce number of digest cycles triggered by mct-resize;
only trigger a new digest cycle when size actually
changes. #19.
---
 .../general/src/directives/MCTResize.js       |  5 +--
 .../general/test/directives/MCTResizeSpec.js  | 36 +++++++++++++++++--
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/general/src/directives/MCTResize.js b/platform/commonUI/general/src/directives/MCTResize.js
index 62ae977271..efe534ffd8 100644
--- a/platform/commonUI/general/src/directives/MCTResize.js
+++ b/platform/commonUI/general/src/directives/MCTResize.js
@@ -73,6 +73,7 @@ define(
                             lastBounds.width !== bounds.width ||
                             lastBounds.height !== bounds.height) {
                         scope.$eval(attrs.mctResize, { bounds: bounds });
+                        scope.$apply(); // Trigger a digest
                         lastBounds = bounds;
                     }
                 }
@@ -85,7 +86,7 @@ define(
                         height: element[0].offsetHeight
                     });
                     if (active) {
-                        $timeout(onInterval, currentInterval());
+                        $timeout(onInterval, currentInterval(), false);
                     }
                 }
 
@@ -111,4 +112,4 @@ define(
 
         return MCTResize;
     }
-);
\ No newline at end of file
+);
diff --git a/platform/commonUI/general/test/directives/MCTResizeSpec.js b/platform/commonUI/general/test/directives/MCTResizeSpec.js
index b0ff7b748a..e5374305c2 100644
--- a/platform/commonUI/general/test/directives/MCTResizeSpec.js
+++ b/platform/commonUI/general/test/directives/MCTResizeSpec.js
@@ -35,7 +35,7 @@ define(
 
             beforeEach(function () {
                 mockTimeout = jasmine.createSpy("$timeout");
-                mockScope = jasmine.createSpyObj("$scope", ["$eval", "$on"]);
+                mockScope = jasmine.createSpyObj("$scope", ["$eval", "$on", "$apply"]);
 
                 testElement = { offsetWidth: 100, offsetHeight: 200 };
                 testAttrs = { mctResize: "some-expr" };
@@ -52,7 +52,8 @@ define(
                 mctResize.link(mockScope, [testElement], testAttrs);
                 expect(mockTimeout).toHaveBeenCalledWith(
                     jasmine.any(Function),
-                    jasmine.any(Number)
+                    jasmine.any(Number),
+                    false
                 );
                 expect(mockScope.$eval).toHaveBeenCalledWith(
                     testAttrs.mctResize,
@@ -110,6 +111,35 @@ define(
                 expect(mockTimeout.calls.length).toEqual(2);
             });
 
+            it("triggers a digest cycle when size changes", function () {
+                var applyCount;
+                mctResize.link(mockScope, [testElement], testAttrs);
+                applyCount = mockScope.$apply.calls.length;
+
+                // Change the element's apparent size
+                testElement.offsetWidth = 300;
+                testElement.offsetHeight = 350;
+
+                // Fire the timeout
+                mockTimeout.mostRecentCall.args[0]();
+
+                // No more apply calls
+                expect(mockScope.$apply.calls.length)
+                    .toBeGreaterThan(applyCount);
+            });
+
+            it("does not trigger a digest cycle when size does not change", function () {
+                var applyCount;
+                mctResize.link(mockScope, [testElement], testAttrs);
+                applyCount = mockScope.$apply.calls.length;
+
+                // Fire the timeout
+                mockTimeout.mostRecentCall.args[0]();
+
+                // No more apply calls
+                expect(mockScope.$apply.calls.length).toEqual(applyCount);
+            });
+
         });
     }
-);
\ No newline at end of file
+);

From 0c6a9ca857fc9730c5973aa4165034744e79842e Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 6 Jul 2015 13:15:38 -0700
Subject: [PATCH 002/266] [Mobile] Styles

Added new style to set the width
of the tree.
---
 .../commonUI/browse/res/templates/browse.html |   4 +-
 .../general/res/css/theme-espresso.css        | 113 ++++++++++--------
 .../res/sass/user-environ/_layout.scss        |   5 +
 3 files changed, 71 insertions(+), 51 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 0a7698e8bd..7d87c5f453 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -23,8 +23,8 @@
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
         <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane'
-                 style="min-width: 150px; max-width: 800px; width: 25%;">
+            <div class='split-pane-component treeview pane browser-manage'>
+<!--                style="min-width: 150px; max-width: 800px; width: 25%;"-->
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 49c5675a07..ca0fba3fe5 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -473,7 +473,11 @@ mct-container {
   -webkit-border-radius: 3px;
   border-radius: 3px; }
 
-/* line 50, ../sass/user-environ/_layout.scss */
+/* line 51, ../sass/user-environ/_layout.scss */
+.browser-manage {
+  width: 100%; }
+
+/* line 55, ../sass/user-environ/_layout.scss */
 .contents {
   box-sizing: border-box;
   position: absolute;
@@ -481,36 +485,36 @@ mct-container {
   right: 0;
   bottom: 0;
   left: 0; }
-  /* line 58, ../sass/user-environ/_layout.scss */
+  /* line 63, ../sass/user-environ/_layout.scss */
   .contents.nomargin {
     right: 0px;
     bottom: 0px;
     left: 0px; }
 
-/* line 67, ../sass/user-environ/_layout.scss */
+/* line 72, ../sass/user-environ/_layout.scss */
 .bar .icon.major {
   margin-right: 5px; }
-/* line 70, ../sass/user-environ/_layout.scss */
+/* line 75, ../sass/user-environ/_layout.scss */
 .bar.abs, .btn-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
-/* line 74, ../sass/user-environ/_layout.scss */
+/* line 79, ../sass/user-environ/_layout.scss */
 .bar.left,
 .bar .left {
   width: 45% !important;
   right: auto !important; }
-/* line 79, ../sass/user-environ/_layout.scss */
+/* line 84, ../sass/user-environ/_layout.scss */
 .bar.right,
 .bar .right {
   width: 45% !important;
   left: auto !important;
   text-align: right; }
-  /* line 84, ../sass/user-environ/_layout.scss */
+  /* line 89, ../sass/user-environ/_layout.scss */
   .bar.right .icon.major,
   .bar .right .icon.major {
     margin-left: 15px; }
 
-/* line 91, ../sass/user-environ/_layout.scss */
+/* line 96, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -518,23 +522,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 102, ../sass/user-environ/_layout.scss */
+/* line 107, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 108, ../sass/user-environ/_layout.scss */
+/* line 113, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 111, ../sass/user-environ/_layout.scss */
+  /* line 116, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 116, ../sass/user-environ/_layout.scss */
+  /* line 121, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 121, ../sass/user-environ/_layout.scss */
+/* line 126, ../sass/user-environ/_layout.scss */
 .user-environ .bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -546,20 +550,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 126, ../sass/user-environ/_layout.scss */
+  /* line 131, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .status-holder {
     z-index: 1; }
-  /* line 130, ../sass/user-environ/_layout.scss */
+  /* line 135, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 138, ../sass/user-environ/_layout.scss */
+/* line 143, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 140, ../sass/user-environ/_layout.scss */
+  /* line 145, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -570,100 +574,100 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 148, ../sass/user-environ/_layout.scss */
+    /* line 153, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 155, ../sass/user-environ/_layout.scss */
+  /* line 160, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 161, ../sass/user-environ/_layout.scss */
+  /* line 166, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 168, ../sass/user-environ/_layout.scss */
+  /* line 173, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 174, ../sass/user-environ/_layout.scss */
+  /* line 179, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 177, ../sass/user-environ/_layout.scss */
+  /* line 182, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 180, ../sass/user-environ/_layout.scss */
+  /* line 185, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 186, ../sass/user-environ/_layout.scss */
+  /* line 191, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 189, ../sass/user-environ/_layout.scss */
+  /* line 194, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 193, ../sass/user-environ/_layout.scss */
+  /* line 198, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 199, ../sass/user-environ/_layout.scss */
+/* line 204, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 202, ../sass/user-environ/_layout.scss */
+  /* line 207, ../sass/user-environ/_layout.scss */
   .pane.treeview .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 205, ../sass/user-environ/_layout.scss */
+    /* line 210, ../sass/user-environ/_layout.scss */
     .pane.treeview .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 210, ../sass/user-environ/_layout.scss */
+  /* line 215, ../sass/user-environ/_layout.scss */
   .pane.treeview .tree-holder {
     overflow: auto;
     top: 34px; }
-  /* line 217, ../sass/user-environ/_layout.scss */
+  /* line 222, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 222, ../sass/user-environ/_layout.scss */
+  /* line 227, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 227, ../sass/user-environ/_layout.scss */
+  /* line 232, ../sass/user-environ/_layout.scss */
   .pane.edit-main .object-holder {
     top: 0; }
-  /* line 233, ../sass/user-environ/_layout.scss */
+  /* line 238, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 241, ../sass/user-environ/_layout.scss */
+/* line 246, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 244, ../sass/user-environ/_layout.scss */
+  /* line 249, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 251, ../sass/user-environ/_layout.scss */
+/* line 256, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 253, ../sass/user-environ/_layout.scss */
+  /* line 258, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 257, ../sass/user-environ/_layout.scss */
+  /* line 262, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 259, ../sass/user-environ/_layout.scss */
+    /* line 264, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 5px; }
 
-/* line 268, ../sass/user-environ/_layout.scss */
+/* line 273, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -1256,26 +1260,37 @@ mct-container {
     .tabular tr td, .tabular tr .td, .tabular .tr td, .tabular .tr .td {
       border-top: 1px solid rgba(255, 255, 255, 0.1);
       min-width: 110px;
+      color: #fff;
       padding: 2px 5px;
       vertical-align: top; }
-      /* line 107, ../sass/lists/_tabular.scss */
+      /* line 108, ../sass/lists/_tabular.scss */
       .tabular tr td.numeric, .tabular tr .td.numeric, .tabular .tr td.numeric, .tabular .tr .td.numeric {
         text-align: right; }
-  /* line 113, ../sass/lists/_tabular.scss */
+      /* line 111, ../sass/lists/_tabular.scss */
+      .tabular tr td.s-cell-type-value, .tabular tr .td.s-cell-type-value, .tabular .tr td.s-cell-type-value, .tabular .tr .td.s-cell-type-value {
+        text-align: right; }
+        /* line 113, ../sass/lists/_tabular.scss */
+        .tabular tr td.s-cell-type-value .l-cell-contents, .tabular tr .td.s-cell-type-value .l-cell-contents, .tabular .tr td.s-cell-type-value .l-cell-contents, .tabular .tr .td.s-cell-type-value .l-cell-contents {
+          -moz-border-radius: 2px;
+          -webkit-border-radius: 2px;
+          border-radius: 2px;
+          padding-left: 5px;
+          padding-right: 5px; }
+  /* line 122, ../sass/lists/_tabular.scss */
   .tabular.filterable tbody, .tabular.filterable .tbody {
     top: 36px; }
-  /* line 118, ../sass/lists/_tabular.scss */
+  /* line 127, ../sass/lists/_tabular.scss */
   .tabular.fixed-header {
     height: 100%; }
-    /* line 120, ../sass/lists/_tabular.scss */
+    /* line 129, ../sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead,
     .tabular.fixed-header tbody tr, .tabular.fixed-header .tbody .tr {
       display: table;
       table-layout: fixed; }
-    /* line 125, ../sass/lists/_tabular.scss */
+    /* line 134, ../sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead {
       width: calc(100% - 10px); }
-    /* line 128, ../sass/lists/_tabular.scss */
+    /* line 137, ../sass/lists/_tabular.scss */
     .tabular.fixed-header tbody, .tabular.fixed-header .tbody {
       overflow: hidden;
       position: absolute;
@@ -1288,7 +1303,7 @@ mct-container {
       top: 18px;
       display: block;
       overflow-y: scroll; }
-  /* line 136, ../sass/lists/_tabular.scss */
+  /* line 145, ../sass/lists/_tabular.scss */
   .tabular.t-event-messages td, .tabular.t-event-messages .td {
     min-width: 150px; }
 
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 639e53af75..d6e6f9b6cb 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -47,6 +47,11 @@
 	@include border-radius($basicCr * 1.5);
 }
 
+// style="min-width: 150px; max-width: 800px; width: 25%;"
+.browser-manage {
+    width: 100%;
+}
+
 .contents {
     $myM: 0; //$interiorMargin;
     box-sizing: border-box;

From d8806f14aab7d3994e0d96dbf1cacacb9a7abb6a Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 7 Jul 2015 09:08:16 -0700
Subject: [PATCH 003/266] [Mobile] Set viewport

Viewport has been set in
index.html. Then what was
implemented prior to this
(rem-display and browser-manage)
was commented out.
---
 index.html                                    |  1 +
 .../commonUI/browse/res/templates/browse.html |  3 +-
 .../general/res/css/theme-espresso.css        | 92 ++++++++++---------
 .../res/sass/user-environ/_layout.scss        | 22 ++++-
 4 files changed, 70 insertions(+), 48 deletions(-)

diff --git a/index.html b/index.html
index cb9e6623a7..a8c258db30 100644
--- a/index.html
+++ b/index.html
@@ -23,6 +23,7 @@
 <html>
 <head lang="en">
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title></title>
     <script type="text/javascript"
             src="platform/framework/lib/require.js"
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 7d87c5f453..d32752be55 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -24,7 +24,6 @@
     <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
         <mct-split-pane class='contents abs' anchor='left'>
             <div class='split-pane-component treeview pane browser-manage'>
-<!--                style="min-width: 150px; max-width: 800px; width: 25%;"-->
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>
@@ -36,7 +35,7 @@
             </div>
             <mct-splitter></mct-splitter>
             <div class='split-pane-component items pane'>
-                <div class='holder abs' id='content-area'>
+                <div class='holder abs rem-display' id='content-area'>
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
                 </div>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index ca0fba3fe5..0cd87ce1fc 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -467,17 +467,19 @@ mct-container {
 .editor {
   position: absolute; }
 
-/* line 46, ../sass/user-environ/_layout.scss */
+/* line 47, ../sass/user-environ/_layout.scss */
 .editor {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px; }
 
-/* line 51, ../sass/user-environ/_layout.scss */
+/* line 57, ../sass/user-environ/_layout.scss */
 .browser-manage {
-  width: 100%; }
+  min-width: 150px;
+  max-width: 800px;
+  width: 25%; }
 
-/* line 55, ../sass/user-environ/_layout.scss */
+/* line 75, ../sass/user-environ/_layout.scss */
 .contents {
   box-sizing: border-box;
   position: absolute;
@@ -485,36 +487,36 @@ mct-container {
   right: 0;
   bottom: 0;
   left: 0; }
-  /* line 63, ../sass/user-environ/_layout.scss */
+  /* line 83, ../sass/user-environ/_layout.scss */
   .contents.nomargin {
     right: 0px;
     bottom: 0px;
     left: 0px; }
 
-/* line 72, ../sass/user-environ/_layout.scss */
+/* line 92, ../sass/user-environ/_layout.scss */
 .bar .icon.major {
   margin-right: 5px; }
-/* line 75, ../sass/user-environ/_layout.scss */
+/* line 95, ../sass/user-environ/_layout.scss */
 .bar.abs, .btn-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
-/* line 79, ../sass/user-environ/_layout.scss */
+/* line 99, ../sass/user-environ/_layout.scss */
 .bar.left,
 .bar .left {
   width: 45% !important;
   right: auto !important; }
-/* line 84, ../sass/user-environ/_layout.scss */
+/* line 104, ../sass/user-environ/_layout.scss */
 .bar.right,
 .bar .right {
   width: 45% !important;
   left: auto !important;
   text-align: right; }
-  /* line 89, ../sass/user-environ/_layout.scss */
+  /* line 109, ../sass/user-environ/_layout.scss */
   .bar.right .icon.major,
   .bar .right .icon.major {
     margin-left: 15px; }
 
-/* line 96, ../sass/user-environ/_layout.scss */
+/* line 116, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -522,23 +524,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 107, ../sass/user-environ/_layout.scss */
+/* line 127, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 113, ../sass/user-environ/_layout.scss */
+/* line 133, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 116, ../sass/user-environ/_layout.scss */
+  /* line 136, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 121, ../sass/user-environ/_layout.scss */
+  /* line 141, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 126, ../sass/user-environ/_layout.scss */
+/* line 146, ../sass/user-environ/_layout.scss */
 .user-environ .bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -550,20 +552,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 131, ../sass/user-environ/_layout.scss */
+  /* line 151, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .status-holder {
     z-index: 1; }
-  /* line 135, ../sass/user-environ/_layout.scss */
+  /* line 155, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 143, ../sass/user-environ/_layout.scss */
+/* line 163, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 145, ../sass/user-environ/_layout.scss */
+  /* line 165, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -574,100 +576,100 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 153, ../sass/user-environ/_layout.scss */
+    /* line 173, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 160, ../sass/user-environ/_layout.scss */
+  /* line 180, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 166, ../sass/user-environ/_layout.scss */
+  /* line 186, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 173, ../sass/user-environ/_layout.scss */
+  /* line 193, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 179, ../sass/user-environ/_layout.scss */
+  /* line 199, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 182, ../sass/user-environ/_layout.scss */
+  /* line 202, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 185, ../sass/user-environ/_layout.scss */
+  /* line 205, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 191, ../sass/user-environ/_layout.scss */
+  /* line 211, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 194, ../sass/user-environ/_layout.scss */
+  /* line 214, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 198, ../sass/user-environ/_layout.scss */
+  /* line 218, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 204, ../sass/user-environ/_layout.scss */
+/* line 224, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 207, ../sass/user-environ/_layout.scss */
+  /* line 227, ../sass/user-environ/_layout.scss */
   .pane.treeview .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 210, ../sass/user-environ/_layout.scss */
+    /* line 230, ../sass/user-environ/_layout.scss */
     .pane.treeview .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 215, ../sass/user-environ/_layout.scss */
+  /* line 235, ../sass/user-environ/_layout.scss */
   .pane.treeview .tree-holder {
     overflow: auto;
     top: 34px; }
-  /* line 222, ../sass/user-environ/_layout.scss */
+  /* line 242, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 227, ../sass/user-environ/_layout.scss */
+  /* line 247, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 232, ../sass/user-environ/_layout.scss */
+  /* line 252, ../sass/user-environ/_layout.scss */
   .pane.edit-main .object-holder {
     top: 0; }
-  /* line 238, ../sass/user-environ/_layout.scss */
+  /* line 258, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 246, ../sass/user-environ/_layout.scss */
+/* line 266, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 249, ../sass/user-environ/_layout.scss */
+  /* line 269, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 256, ../sass/user-environ/_layout.scss */
+/* line 276, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 258, ../sass/user-environ/_layout.scss */
+  /* line 278, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 262, ../sass/user-environ/_layout.scss */
+  /* line 282, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 264, ../sass/user-environ/_layout.scss */
+    /* line 284, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 5px; }
 
-/* line 273, ../sass/user-environ/_layout.scss */
+/* line 293, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index d6e6f9b6cb..9d9a6fa33a 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -43,13 +43,33 @@
 	position: absolute;
 }
 
+
 .editor {
 	@include border-radius($basicCr * 1.5);
 }
 
+$min-name: min-device-width;
+$max-name: max-device-width;
+$max-small: 769px;
+$min-large: 770px;
+
 // style="min-width: 150px; max-width: 800px; width: 25%;"
 .browser-manage {
-    width: 100%;
+//    @media only screen and ($max-name : $max-small) {
+//        width: 100%;
+//    }
+//    
+//    @media only screen and ($min-name : $min-large) {
+        min-width: 150px;
+        max-width: 800px;
+        width: 25%;
+//    }
+}
+
+.rem-display {
+//    @media only screen and ($max-name : $max-small) {
+//        display: none;
+//    }
 }
 
 .contents {

From d828bf59f912c3afa87918595f3600cb77a8c5e1 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 7 Jul 2015 09:58:22 -0700
Subject: [PATCH 004/266] [Mobile] Constants/Etc

Added constants for media queries.
in _constants.scss. Also, now on tablet,
zoom is disabled.
---
 index.html                                           | 2 +-
 platform/commonUI/general/res/css/forms.css          | 1 +
 platform/commonUI/general/res/css/items.css          | 1 +
 platform/commonUI/general/res/css/theme-espresso.css | 1 +
 platform/commonUI/general/res/css/tree.css           | 1 +
 platform/commonUI/general/res/sass/_constants.scss   | 9 +++++++++
 6 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index a8c258db30..8be727ab5a 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
 <html>
 <head lang="en">
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title></title>
     <script type="text/javascript"
             src="platform/framework/lib/require.js"
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index bc7cbac350..e69782df64 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -42,6 +42,7 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index c40b3f7bd9..907de21507 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -42,6 +42,7 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 0cd87ce1fc..99ad0297c7 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -43,6 +43,7 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 75b40aa115..737968c577 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -42,6 +42,7 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 8a8fed19d1..4e6ca6e25d 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -33,6 +33,14 @@ $controlCr: 2px;
 $smallCr: 2px;
 $badgeW: 35px;
 
+/************************** WINDOW DIMENSIONS FOR RWD */
+$phoMaxW: 400px;
+$phoneMaxH: 680px;
+$tabMaxW: 800px;
+$tabMaxH: 1280px;
+$compMinW: 801px; 
+$compMinH: 1281px;
+
 /************************** COLORS AND SHADING */
 $colorBodyBg: #333;
 $colorBodyFg: #999;
@@ -103,6 +111,7 @@ $ovrTopBarH: 60px;
 $ovrFooterH: 40px;
 // Items
 $ueBrowseGridItemLg: 200px;
+$ueBrowseGridItemSm: 100%;
 $ueBrowseGridItemTopBarH: 20px;
 $ueBrowseGridItemBottomBarH: 30px;
 $itemPadLR: 5px;

From 2fc447e16f7ccf3445c69dd3ac5582b082890e5d Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 7 Jul 2015 10:15:25 -0700
Subject: [PATCH 005/266] [Mobile] Comments

Added comments and reverted the
grid back to normal.
---
 platform/commonUI/general/res/css/items.css   | 36 +++++++++----------
 .../commonUI/general/res/sass/_constants.scss |  4 +--
 .../general/res/sass/items/_item.scss         |  1 +
 3 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 907de21507..a43eb82648 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -152,7 +152,7 @@
     /* line 160, ../sass/_mixins.scss */
     .items-holder .item.grid-item.btn-menu .invoke-menu {
       color: #828282; }
-    /* line 42, ../sass/items/_item.scss */
+    /* line 43, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       -moz-transition-property: "color";
       -o-transition-property: "color";
@@ -166,45 +166,45 @@
       -o-transition-timing-function: ease-in-out;
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out; }
-    /* line 46, ../sass/items/_item.scss */
+    /* line 47, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: #0099cc !important; }
-    /* line 49, ../sass/items/_item.scss */
+    /* line 50, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-open {
       opacity: 1; }
-    /* line 54, ../sass/items/_item.scss */
+    /* line 55, ../sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
       top: 5px;
       right: 5px;
       bottom: 5px;
       left: 5px; }
-    /* line 58, ../sass/items/_item.scss */
+    /* line 59, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar.abs {
       bottom: auto;
       height: 20px;
       line-height: 20px;
       z-index: 5; }
-      /* line 63, ../sass/items/_item.scss */
+      /* line 64, ../sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
         width: auto; }
-        /* line 65, ../sass/items/_item.scss */
+        /* line 66, ../sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
           margin-left: 5px; }
-    /* line 70, ../sass/items/_item.scss */
+    /* line 71, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar.abs {
       top: auto;
       height: 30px;
       padding: 5px; }
-    /* line 76, ../sass/items/_item.scss */
+    /* line 77, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 82, ../sass/items/_item.scss */
+      /* line 83, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         color: #737373;
         text-align: center;
         font-size: 6em; }
-      /* line 88, ../sass/items/_item.scss */
+      /* line 89, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -224,17 +224,17 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 100, ../sass/items/_item.scss */
+    /* line 101, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       color: #cccccc;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis; }
-    /* line 108, ../sass/items/_item.scss */
+    /* line 109, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
-    /* line 111, ../sass/items/_item.scss */
+    /* line 112, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -271,15 +271,15 @@
       /* line 160, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 116, ../sass/items/_item.scss */
+      /* line 117, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 117, ../sass/items/_item.scss */
+      /* line 118, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 118, ../sass/items/_item.scss */
+      /* line 119, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 120, ../sass/items/_item.scss */
+      /* line 121, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 4e6ca6e25d..49fa946c97 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -35,8 +35,8 @@ $badgeW: 35px;
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 400px;
-$phoneMaxH: 680px;
-$tabMaxW: 800px;
+$phoMaxH: 700px;
+$tabMaxW: 701px;
 $tabMaxH: 1280px;
 $compMinW: 801px; 
 $compMinH: 1281px;
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 5a5cdaf9a3..745f2fa28b 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -28,6 +28,7 @@
     .item {
         &.grid-item {
             //div { @include test() }
+            // Sets grid item width
             $d: $ueBrowseGridItemLg;
             $transTime: 200ms;
             @include btnSubtle($colorItemBase);

From 8a0b77ec5c6c2197a7cd88bc2cf4e1cb2622bcbf Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Tue, 7 Jul 2015 13:02:40 -0700
Subject: [PATCH 006/266] [Mobile] Folder View

Folder representation now
will be a list.
---
 platform/commonUI/general/res/css/forms.css   |  6 +-
 platform/commonUI/general/res/css/items.css   | 65 ++++++++------
 .../general/res/css/theme-espresso.css        | 86 +++++++++----------
 platform/commonUI/general/res/css/tree.css    |  2 +-
 .../commonUI/general/res/sass/_constants.scss |  5 +-
 .../commonUI/general/res/sass/_mixins.scss    | 22 +++++
 .../general/res/sass/items/_item.scss         | 32 +++++--
 7 files changed, 138 insertions(+), 80 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index e69782df64..30db438d36 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -392,7 +392,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 152, ../sass/_mixins.scss */
+  /* line 174, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -401,10 +401,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 155, ../sass/_mixins.scss */
+    /* line 177, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 160, ../sass/_mixins.scss */
+  /* line 182, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index a43eb82648..24e8e46f74 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -132,12 +132,27 @@
     box-sizing: border-box;
     cursor: pointer;
     float: left;
-    height: 200px;
     width: 200px;
+    height: 200px;
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 152, ../sass/_mixins.scss */
+    @media screen and (max-width: 400px) {
+      /* line 29, ../sass/items/_item.scss */
+      .items-holder .item.grid-item {
+        width: 100%;
+        height: 50px; } }
+    @media screen and (min-width: 401px) and (max-width: 800px) {
+      /* line 29, ../sass/items/_item.scss */
+      .items-holder .item.grid-item {
+        width: 100%;
+        height: 100px; } }
+    @media screen and (min-width: 801px) {
+      /* line 29, ../sass/items/_item.scss */
+      .items-holder .item.grid-item {
+        width: 200px;
+        height: 200px; } }
+    /* line 174, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -146,13 +161,13 @@
       background-image: -webkit-linear-gradient(#707070, #636363);
       background-image: linear-gradient(#707070, #636363);
       color: #bdbdbd; }
-      /* line 155, ../sass/_mixins.scss */
+      /* line 177, ../sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
         color: #949494; }
-    /* line 160, ../sass/_mixins.scss */
+    /* line 182, ../sass/_mixins.scss */
     .items-holder .item.grid-item.btn-menu .invoke-menu {
       color: #828282; }
-    /* line 43, ../sass/items/_item.scss */
+    /* line 65, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       -moz-transition-property: "color";
       -o-transition-property: "color";
@@ -166,45 +181,45 @@
       -o-transition-timing-function: ease-in-out;
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out; }
-    /* line 47, ../sass/items/_item.scss */
+    /* line 69, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: #0099cc !important; }
-    /* line 50, ../sass/items/_item.scss */
+    /* line 72, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-open {
       opacity: 1; }
-    /* line 55, ../sass/items/_item.scss */
+    /* line 77, ../sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
       top: 5px;
       right: 5px;
       bottom: 5px;
       left: 5px; }
-    /* line 59, ../sass/items/_item.scss */
+    /* line 81, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar.abs {
       bottom: auto;
       height: 20px;
       line-height: 20px;
       z-index: 5; }
-      /* line 64, ../sass/items/_item.scss */
+      /* line 86, ../sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
         width: auto; }
-        /* line 66, ../sass/items/_item.scss */
+        /* line 88, ../sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
           margin-left: 5px; }
-    /* line 71, ../sass/items/_item.scss */
+    /* line 93, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar.abs {
       top: auto;
       height: 30px;
       padding: 5px; }
-    /* line 77, ../sass/items/_item.scss */
+    /* line 99, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 83, ../sass/items/_item.scss */
+      /* line 105, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         color: #737373;
         text-align: center;
         font-size: 6em; }
-      /* line 89, ../sass/items/_item.scss */
+      /* line 111, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -224,17 +239,17 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 101, ../sass/items/_item.scss */
+    /* line 123, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       color: #cccccc;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis; }
-    /* line 109, ../sass/items/_item.scss */
+    /* line 131, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
-    /* line 112, ../sass/items/_item.scss */
+    /* line 134, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -256,7 +271,7 @@
       color: #999;
       display: inline-block;
       color: #80dfff; }
-      /* line 152, ../sass/_mixins.scss */
+      /* line 174, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):hover {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
@@ -265,21 +280,21 @@
         background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
         background-image: linear-gradient(#2ecbff, #14c4ff);
         color: #bdbdbd; }
-        /* line 155, ../sass/_mixins.scss */
+        /* line 177, ../sass/_mixins.scss */
         .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
           color: #75ddff; }
-      /* line 160, ../sass/_mixins.scss */
+      /* line 182, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 117, ../sass/items/_item.scss */
+      /* line 139, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 118, ../sass/items/_item.scss */
+      /* line 140, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 119, ../sass/items/_item.scss */
+      /* line 141, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 121, ../sass/items/_item.scss */
+      /* line 143, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 99ad0297c7..f9ab7b359c 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -93,7 +93,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -114,38 +114,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -1441,7 +1441,7 @@ mct-container {
     color: #999;
     display: inline-block;
     color: #ccf2ff; }
-    /* line 152, ../sass/_mixins.scss */
+    /* line 174, ../sass/_mixins.scss */
     .btn.major:not(.disabled):hover,
     .s-btn.major:not(.disabled):hover,
     .major.icon-btn:not(.disabled):hover,
@@ -1453,13 +1453,13 @@ mct-container {
       background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
       background-image: linear-gradient(#2ecbff, #14c4ff);
       color: #bdbdbd; }
-      /* line 155, ../sass/_mixins.scss */
+      /* line 177, ../sass/_mixins.scss */
       .btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .major.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .major.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #75ddff; }
-    /* line 160, ../sass/_mixins.scss */
+    /* line 182, ../sass/_mixins.scss */
     .btn.major.btn-menu .invoke-menu,
     .s-btn.major.btn-menu .invoke-menu,
     .major.btn-menu.icon-btn .invoke-menu,
@@ -1489,7 +1489,7 @@ mct-container {
       border-top: 1px solid #2ecbff;
       color: #ccf2ff;
       display: inline-block; }
-      /* line 152, ../sass/_mixins.scss */
+      /* line 174, ../sass/_mixins.scss */
       .btn.major:hover:not(.disabled):hover,
       .s-btn.major:hover:not(.disabled):hover,
       .major.icon-btn:hover:not(.disabled):hover,
@@ -1501,13 +1501,13 @@ mct-container {
         background-image: -webkit-linear-gradient(#47d1ff, #2ecbff);
         background-image: linear-gradient(#47d1ff, #2ecbff);
         color: white; }
-        /* line 155, ../sass/_mixins.scss */
+        /* line 177, ../sass/_mixins.scss */
         .btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.s-icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu {
           color: #8fe3ff; }
-      /* line 160, ../sass/_mixins.scss */
+      /* line 182, ../sass/_mixins.scss */
       .btn.major:hover.btn-menu .invoke-menu,
       .s-btn.major:hover.btn-menu .invoke-menu,
       .major.icon-btn:hover.btn-menu .invoke-menu,
@@ -1543,7 +1543,7 @@ mct-container {
     border-top: 1px solid #8a8a8a;
     color: #cccccc;
     display: inline-block; }
-    /* line 152, ../sass/_mixins.scss */
+    /* line 174, ../sass/_mixins.scss */
     .btn.subtle:not(.disabled):hover,
     .s-btn.subtle:not(.disabled):hover,
     .subtle.icon-btn:not(.disabled):hover,
@@ -1555,13 +1555,13 @@ mct-container {
       background-image: -webkit-linear-gradient(#969696, #8a8a8a);
       background-image: linear-gradient(#969696, #8a8a8a);
       color: #f0f0f0; }
-      /* line 155, ../sass/_mixins.scss */
+      /* line 177, ../sass/_mixins.scss */
       .btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #bababa; }
-    /* line 160, ../sass/_mixins.scss */
+    /* line 182, ../sass/_mixins.scss */
     .btn.subtle.btn-menu .invoke-menu,
     .s-btn.subtle.btn-menu .invoke-menu,
     .subtle.btn-menu.icon-btn .invoke-menu,
@@ -1594,7 +1594,7 @@ mct-container {
     border-top: 1px solid #575757;
     color: #999;
     display: inline-block; }
-    /* line 152, ../sass/_mixins.scss */
+    /* line 174, ../sass/_mixins.scss */
     .btn.very-subtle:not(.disabled):hover, .btn.s-very-subtle:not(.disabled):hover,
     .s-btn.very-subtle:not(.disabled):hover,
     .very-subtle.icon-btn:not(.disabled):hover,
@@ -1609,7 +1609,7 @@ mct-container {
       background-image: -webkit-linear-gradient(#636363, #575757);
       background-image: linear-gradient(#636363, #575757);
       color: #bdbdbd; }
-      /* line 155, ../sass/_mixins.scss */
+      /* line 177, ../sass/_mixins.scss */
       .btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1618,7 +1618,7 @@ mct-container {
       .s-very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .s-very-subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #878787; }
-    /* line 160, ../sass/_mixins.scss */
+    /* line 182, ../sass/_mixins.scss */
     .btn.very-subtle.btn-menu .invoke-menu, .btn.s-very-subtle.btn-menu .invoke-menu,
     .s-btn.very-subtle.btn-menu .invoke-menu,
     .very-subtle.btn-menu.icon-btn .invoke-menu,
@@ -1654,7 +1654,7 @@ mct-container {
       border-top: 1px solid #fe9510;
       color: #fff;
       display: inline-block; }
-      /* line 152, ../sass/_mixins.scss */
+      /* line 174, ../sass/_mixins.scss */
       .btn.very-subtle.paused:not(.disabled):hover, .btn.s-very-subtle.paused:not(.disabled):hover,
       .s-btn.very-subtle.paused:not(.disabled):hover,
       .very-subtle.paused.icon-btn:not(.disabled):hover,
@@ -1669,7 +1669,7 @@ mct-container {
         background-image: -webkit-linear-gradient(#fea029, #fe9510);
         background-image: linear-gradient(#fea029, #fe9510);
         color: white; }
-        /* line 155, ../sass/_mixins.scss */
+        /* line 177, ../sass/_mixins.scss */
         .btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1678,7 +1678,7 @@ mct-container {
         .s-very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
         .s-very-subtle.paused.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
           color: #fec070; }
-      /* line 160, ../sass/_mixins.scss */
+      /* line 182, ../sass/_mixins.scss */
       .btn.very-subtle.paused.btn-menu .invoke-menu, .btn.s-very-subtle.paused.btn-menu .invoke-menu,
       .s-btn.very-subtle.paused.btn-menu .invoke-menu,
       .very-subtle.paused.btn-menu.icon-btn .invoke-menu,
@@ -2140,7 +2140,7 @@ label.checkbox.custom {
   			color: lighten($c, 10%);
   		}
   	}*/ }
-  /* line 152, ../sass/_mixins.scss */
+  /* line 174, ../sass/_mixins.scss */
   .btn-menu:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2149,10 +2149,10 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 155, ../sass/_mixins.scss */
+    /* line 177, ../sass/_mixins.scss */
     .btn-menu:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 160, ../sass/_mixins.scss */
+  /* line 182, ../sass/_mixins.scss */
   .btn-menu.btn-menu .invoke-menu {
     color: #757575; }
   /* line 285, ../sass/controls/_controls.scss */
@@ -2284,7 +2284,7 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 152, ../sass/_mixins.scss */
+  /* line 174, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2293,13 +2293,13 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 155, ../sass/_mixins.scss */
+    /* line 177, ../sass/_mixins.scss */
     .slider .knob:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 160, ../sass/_mixins.scss */
+  /* line 182, ../sass/_mixins.scss */
   .slider .knob.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 176, ../sass/_mixins.scss */
+  /* line 198, ../sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2323,7 +2323,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 198, ../sass/_mixins.scss */
+  /* line 220, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2495,14 +2495,14 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 160, ../sass/_mixins.scss */
+    /* line 182, ../sass/_mixins.scss */
     .menu-element .menu.btn-menu .invoke-menu {
       color: #828282; }
     /* line 37, ../sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 266, ../sass/_mixins.scss */
+      /* line 288, ../sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2558,7 +2558,7 @@ label.checkbox.custom {
     border-top: 1px solid #919191;
     color: #999;
     display: inline-block; }
-    /* line 160, ../sass/_mixins.scss */
+    /* line 182, ../sass/_mixins.scss */
     .menu-element .context-menu.btn-menu .invoke-menu,
     .menu-element .super-menu.btn-menu .invoke-menu {
       color: #b0b0b0; }
@@ -3421,7 +3421,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 152, ../sass/_mixins.scss */
+  /* line 174, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -3430,10 +3430,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 155, ../sass/_mixins.scss */
+    /* line 177, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 160, ../sass/_mixins.scss */
+  /* line 182, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
@@ -4051,7 +4051,7 @@ input[type="text"] {
   bottom: 15%;
   left: 15%;
   z-index: 101; }
-  /* line 160, ../sass/_mixins.scss */
+  /* line 182, ../sass/_mixins.scss */
   .overlay > .holder.btn-menu .invoke-menu {
     color: #757575; }
   /* line 45, ../sass/overlay/_overlay.scss */
@@ -4559,7 +4559,7 @@ input[type="text"] {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 176, ../sass/_mixins.scss */
+    /* line 198, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4583,7 +4583,7 @@ input[type="text"] {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 198, ../sass/_mixins.scss */
+    /* line 220, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4613,7 +4613,7 @@ input[type="text"] {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 176, ../sass/_mixins.scss */
+  /* line 198, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -4637,7 +4637,7 @@ input[type="text"] {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 198, ../sass/_mixins.scss */
+  /* line 220, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 737968c577..45855efc19 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -104,7 +104,7 @@
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 266, ../sass/_mixins.scss */
+  /* line 288, ../sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 49fa946c97..8f02938bb3 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -35,9 +35,8 @@ $badgeW: 35px;
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 400px;
-$phoMaxH: 700px;
-$tabMaxW: 701px;
-$tabMaxH: 1280px;
+$tabMinW: 401px;
+$tabMaxW: 800px;
 $compMinW: 801px; 
 $compMinH: 1281px;
 
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 2674bc8527..2f5baa7ea5 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -19,6 +19,28 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+// Mixins for devices
+@mixin phone {
+    @media screen and (max-width: $phoMaxW) {
+        @content
+    }
+}
+
+@mixin tablet {
+    @media screen and (min-width: $tabMinW) and (max-width: $tabMaxW) {
+        @content
+    }
+}
+
+@mixin desktop {
+    @media screen and (min-width: $compMinW) {
+        @content
+    }
+}
+
+
+
 @mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
     overflow: $overflowHidden;
     position: absolute;
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 745f2fa28b..cbdcc94b11 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -28,15 +28,37 @@
     .item {
         &.grid-item {
             //div { @include test() }
-            // Sets grid item width
-            $d: $ueBrowseGridItemLg;
+            // NOTE: Sets grid item width
+            $dWid: $ueBrowseGridItemLg;
+            $dHei: $ueBrowseGridItemLg;
+            @include phone {
+                $dWid: 100%;
+                $dHei: $ueBrowseGridItemLg/4;
+                width: $dWid;
+                height: $dHei;
+            }
+            
+            @include tablet {
+                $dWid: 100%;
+                $dHei: $ueBrowseGridItemLg/2;
+                width: $dWid;
+                height: $dHei;
+            }
+            
+            @include desktop {
+                $dWid: $ueBrowseGridItemLg;
+                $dHei: $ueBrowseGridItemLg;
+                width: $dWid;
+                height: $dHei; 
+            }
+            
             $transTime: 200ms;
             @include btnSubtle($colorItemBase);
             box-sizing: border-box;
             cursor: pointer;
-            float: left;
-            height: $d;
-            width: $d;
+            float: left;     
+            width: $dWid;
+            height: $dHei;
             margin-bottom: $interiorMarginSm;
             margin-right: $interiorMarginSm;
             position: relative;

From 1ddb00c8d6ab32502261bf290df4c73bd6893e48 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Tue, 7 Jul 2015 14:01:57 -0700
Subject: [PATCH 007/266] [Mobile] Resize

Resized the height of each
item in grid based on new
tablet/phone widths.
---
 platform/commonUI/general/res/css/items.css   | 30 ++++++++++++-------
 .../commonUI/general/res/sass/_constants.scss |  4 +--
 .../general/res/sass/items/_item.scss         |  7 +++++
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 24e8e46f74..043c01a5e4 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -137,12 +137,12 @@
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    @media screen and (max-width: 400px) {
+    @media screen and (max-width: 514px) {
       /* line 29, ../sass/items/_item.scss */
       .items-holder .item.grid-item {
         width: 100%;
         height: 50px; } }
-    @media screen and (min-width: 401px) and (max-width: 800px) {
+    @media screen and (min-width: 515px) and (max-width: 800px) {
       /* line 29, ../sass/items/_item.scss */
       .items-holder .item.grid-item {
         width: 100%;
@@ -214,12 +214,20 @@
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 105, ../sass/items/_item.scss */
+      @media screen and (max-width: 514px) {
+        /* line 99, ../sass/items/_item.scss */
+        .items-holder .item.grid-item .item-main {
+          display: none; } }
+      @media screen and (min-width: 515px) and (max-width: 800px) {
+        /* line 99, ../sass/items/_item.scss */
+        .items-holder .item.grid-item .item-main {
+          display: none; } }
+      /* line 112, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         color: #737373;
         text-align: center;
         font-size: 6em; }
-      /* line 111, ../sass/items/_item.scss */
+      /* line 118, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -239,17 +247,17 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 123, ../sass/items/_item.scss */
+    /* line 130, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       color: #cccccc;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis; }
-    /* line 131, ../sass/items/_item.scss */
+    /* line 138, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
-    /* line 134, ../sass/items/_item.scss */
+    /* line 141, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -286,15 +294,15 @@
       /* line 182, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 139, ../sass/items/_item.scss */
+      /* line 146, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 140, ../sass/items/_item.scss */
+      /* line 147, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 141, ../sass/items/_item.scss */
+      /* line 148, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 143, ../sass/items/_item.scss */
+      /* line 150, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 8f02938bb3..984d2e8dac 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -34,8 +34,8 @@ $smallCr: 2px;
 $badgeW: 35px;
 
 /************************** WINDOW DIMENSIONS FOR RWD */
-$phoMaxW: 400px;
-$tabMinW: 401px;
+$phoMaxW: 514px;
+$tabMinW: 515px;
 $tabMaxW: 800px;
 $compMinW: 801px; 
 $compMinH: 1281px;
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index cbdcc94b11..88e75bf940 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -97,6 +97,13 @@
                 }
             }
             .item-main {
+                @include phone {
+                    display: none;
+                }
+                @include tablet {
+                    display: none;   
+                }
+                
 	            $h: $ueBrowseGridItemLg;
 	            $lh: $h * 0.8;
                 //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH;

From 79fb6eabd9e9f5358fe18aede8c9cad7379eccd8 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Tue, 7 Jul 2015 16:28:34 -0700
Subject: [PATCH 008/266] [Mobile] Menu Button

Menu button added to the
bundle and as a file modelled
after the action button.
---
 platform/commonUI/general/bundle.json         |  4 +++
 .../res/templates/controls/menu-button.html   | 32 +++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 platform/commonUI/general/res/templates/controls/menu-button.html

diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 2093a988cd..2dd8d5dc4c 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -43,6 +43,10 @@
                 "key": "action-button",
                 "templateUrl": "templates/controls/action-button.html"
             },
+            {
+                "key": "menu-button",
+                "templateUrl": "templates/controls/menu-button.html"
+            },
             {
                 "key": "input-filter",
                 "templateUrl": "templates/controls/input-filter.html"
diff --git a/platform/commonUI/general/res/templates/controls/menu-button.html b/platform/commonUI/general/res/templates/controls/menu-button.html
new file mode 100644
index 0000000000..a0d1adf3a6
--- /dev/null
+++ b/platform/commonUI/general/res/templates/controls/menu-button.html
@@ -0,0 +1,32 @@
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<a class="btn s-btn s-icon-btn s-very-subtle key-{{parameters.action.getMetadata().key}}"
+   ng-class="{ labeled: parameters.labeled }"
+   title="{{parameters.action.getMetadata().description}}"
+   ng-click="parameters.action.perform()">
+    <span class="ui-symbol icon">
+        {{parameters.action.getMetadata().glyph}}
+    </span>
+    <span class="title-label" ng-if="parameters.labeled">
+        {{parameters.action.getMetadata().name}}
+    </span>
+</a>

From 24fae72492691676d1704c35979e39efc12b8084 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Tue, 7 Jul 2015 16:46:32 -0700
Subject: [PATCH 009/266] [Mobile] Left tree

Attempt to resize left
tree menu when changing device.
Currently does not move the splitter
bar.
---
 .../commonUI/browse/res/templates/browse.html |   2 +-
 .../general/res/css/theme-espresso.css        | 105 ++++++++++--------
 .../res/sass/user-environ/_layout.scss        |  22 ++--
 .../res/templates/controls/menu-button.html   |  32 ------
 4 files changed, 68 insertions(+), 93 deletions(-)
 delete mode 100644 platform/commonUI/general/res/templates/controls/menu-button.html

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index d32752be55..91e4d58593 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -35,7 +35,7 @@
             </div>
             <mct-splitter></mct-splitter>
             <div class='split-pane-component items pane'>
-                <div class='holder abs rem-display' id='content-area'>
+                <div class='holder abs' id='content-area'>
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
                 </div>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index f9ab7b359c..1572bba47e 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -474,13 +474,24 @@ mct-container {
   -webkit-border-radius: 3px;
   border-radius: 3px; }
 
-/* line 57, ../sass/user-environ/_layout.scss */
-.browser-manage {
-  min-width: 150px;
-  max-width: 800px;
-  width: 25%; }
+@media screen and (max-width: 514px) {
+  /* line 57, ../sass/user-environ/_layout.scss */
+  .browser-manage {
+    width: 150px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) {
+  /* line 57, ../sass/user-environ/_layout.scss */
+  .browser-manage {
+    min-width: 150px;
+    max-width: 300px;
+    width: 25%; } }
+@media screen and (min-width: 801px) {
+  /* line 57, ../sass/user-environ/_layout.scss */
+  .browser-manage {
+    min-width: 150px;
+    max-width: 800px;
+    width: 25%; } }
 
-/* line 75, ../sass/user-environ/_layout.scss */
+/* line 73, ../sass/user-environ/_layout.scss */
 .contents {
   box-sizing: border-box;
   position: absolute;
@@ -488,36 +499,36 @@ mct-container {
   right: 0;
   bottom: 0;
   left: 0; }
-  /* line 83, ../sass/user-environ/_layout.scss */
+  /* line 81, ../sass/user-environ/_layout.scss */
   .contents.nomargin {
     right: 0px;
     bottom: 0px;
     left: 0px; }
 
-/* line 92, ../sass/user-environ/_layout.scss */
+/* line 90, ../sass/user-environ/_layout.scss */
 .bar .icon.major {
   margin-right: 5px; }
-/* line 95, ../sass/user-environ/_layout.scss */
+/* line 93, ../sass/user-environ/_layout.scss */
 .bar.abs, .btn-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
-/* line 99, ../sass/user-environ/_layout.scss */
+/* line 97, ../sass/user-environ/_layout.scss */
 .bar.left,
 .bar .left {
   width: 45% !important;
   right: auto !important; }
-/* line 104, ../sass/user-environ/_layout.scss */
+/* line 102, ../sass/user-environ/_layout.scss */
 .bar.right,
 .bar .right {
   width: 45% !important;
   left: auto !important;
   text-align: right; }
-  /* line 109, ../sass/user-environ/_layout.scss */
+  /* line 107, ../sass/user-environ/_layout.scss */
   .bar.right .icon.major,
   .bar .right .icon.major {
     margin-left: 15px; }
 
-/* line 116, ../sass/user-environ/_layout.scss */
+/* line 114, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -525,23 +536,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 127, ../sass/user-environ/_layout.scss */
+/* line 125, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 133, ../sass/user-environ/_layout.scss */
+/* line 131, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 136, ../sass/user-environ/_layout.scss */
+  /* line 134, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 141, ../sass/user-environ/_layout.scss */
+  /* line 139, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 146, ../sass/user-environ/_layout.scss */
+/* line 144, ../sass/user-environ/_layout.scss */
 .user-environ .bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -553,20 +564,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 151, ../sass/user-environ/_layout.scss */
+  /* line 149, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .status-holder {
     z-index: 1; }
-  /* line 155, ../sass/user-environ/_layout.scss */
+  /* line 153, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 163, ../sass/user-environ/_layout.scss */
+/* line 161, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 165, ../sass/user-environ/_layout.scss */
+  /* line 163, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -577,100 +588,100 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 173, ../sass/user-environ/_layout.scss */
+    /* line 171, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 180, ../sass/user-environ/_layout.scss */
+  /* line 178, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 186, ../sass/user-environ/_layout.scss */
+  /* line 184, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 193, ../sass/user-environ/_layout.scss */
+  /* line 191, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 199, ../sass/user-environ/_layout.scss */
+  /* line 197, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 202, ../sass/user-environ/_layout.scss */
+  /* line 200, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 205, ../sass/user-environ/_layout.scss */
+  /* line 203, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 211, ../sass/user-environ/_layout.scss */
+  /* line 209, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 214, ../sass/user-environ/_layout.scss */
+  /* line 212, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 218, ../sass/user-environ/_layout.scss */
+  /* line 216, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 224, ../sass/user-environ/_layout.scss */
+/* line 222, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 227, ../sass/user-environ/_layout.scss */
+  /* line 225, ../sass/user-environ/_layout.scss */
   .pane.treeview .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 230, ../sass/user-environ/_layout.scss */
+    /* line 228, ../sass/user-environ/_layout.scss */
     .pane.treeview .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 235, ../sass/user-environ/_layout.scss */
+  /* line 233, ../sass/user-environ/_layout.scss */
   .pane.treeview .tree-holder {
     overflow: auto;
     top: 34px; }
-  /* line 242, ../sass/user-environ/_layout.scss */
+  /* line 240, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 247, ../sass/user-environ/_layout.scss */
+  /* line 245, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 252, ../sass/user-environ/_layout.scss */
+  /* line 250, ../sass/user-environ/_layout.scss */
   .pane.edit-main .object-holder {
     top: 0; }
-  /* line 258, ../sass/user-environ/_layout.scss */
+  /* line 256, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 266, ../sass/user-environ/_layout.scss */
+/* line 264, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 269, ../sass/user-environ/_layout.scss */
+  /* line 267, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 276, ../sass/user-environ/_layout.scss */
+/* line 274, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 278, ../sass/user-environ/_layout.scss */
+  /* line 276, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 282, ../sass/user-environ/_layout.scss */
+  /* line 280, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 284, ../sass/user-environ/_layout.scss */
+    /* line 282, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 5px; }
 
-/* line 293, ../sass/user-environ/_layout.scss */
+/* line 291, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 9d9a6fa33a..e9be867628 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -55,21 +55,17 @@ $min-large: 770px;
 
 // style="min-width: 150px; max-width: 800px; width: 25%;"
 .browser-manage {
-//    @media only screen and ($max-name : $max-small) {
-//        width: 100%;
-//    }
-//    
-//    @media only screen and ($min-name : $min-large) {
+    @include phone {
+        width: 150px;
+    }
+    @include tablet {
+        width: 150px; 
+    }    
+    @include desktop {
         min-width: 150px;
         max-width: 800px;
-        width: 25%;
-//    }
-}
-
-.rem-display {
-//    @media only screen and ($max-name : $max-small) {
-//        display: none;
-//    }
+        width: 25%;   
+    }   
 }
 
 .contents {
diff --git a/platform/commonUI/general/res/templates/controls/menu-button.html b/platform/commonUI/general/res/templates/controls/menu-button.html
deleted file mode 100644
index a0d1adf3a6..0000000000
--- a/platform/commonUI/general/res/templates/controls/menu-button.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
- Open MCT Web, Copyright (c) 2014-2015, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT Web is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT Web includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<a class="btn s-btn s-icon-btn s-very-subtle key-{{parameters.action.getMetadata().key}}"
-   ng-class="{ labeled: parameters.labeled }"
-   title="{{parameters.action.getMetadata().description}}"
-   ng-click="parameters.action.perform()">
-    <span class="ui-symbol icon">
-        {{parameters.action.getMetadata().glyph}}
-    </span>
-    <span class="title-label" ng-if="parameters.labeled">
-        {{parameters.action.getMetadata().name}}
-    </span>
-</a>

From 3704d64560ecd3285a3976e0fe988ea44f1b43c9 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 11:08:31 -0700
Subject: [PATCH 010/266] [Mobile] Push to show current

---
 .../commonUI/browse/res/templates/browse.html |  4 +-
 .../res/templates/create/create-button.html   |  3 +
 platform/commonUI/general/res/css/forms.css   |  6 +-
 platform/commonUI/general/res/css/items.css   | 12 +--
 .../general/res/css/theme-espresso.css        | 86 +++++++++----------
 platform/commonUI/general/res/css/tree.css    |  2 +-
 .../commonUI/general/res/sass/_mixins.scss    |  6 ++
 .../res/sass/user-environ/_layout.scss        | 18 ++--
 .../src/controllers/ClickAwayController.js    |  9 ++
 9 files changed, 82 insertions(+), 64 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 91e4d58593..c955d596eb 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -23,7 +23,7 @@
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
         <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane browser-manage'>
+            <div class='split-pane-component treeview pane browse-manage'>
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>
@@ -35,7 +35,7 @@
             </div>
             <mct-splitter></mct-splitter>
             <div class='split-pane-component items pane'>
-                <div class='holder abs' id='content-area'>
+                <div class='holder abs hider-check' id='content-area'>
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
                 </div>
diff --git a/platform/commonUI/browse/res/templates/create/create-button.html b/platform/commonUI/browse/res/templates/create/create-button.html
index 527afd9882..6f1efc9604 100644
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@@ -27,4 +27,7 @@
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>
+    <div class="btn s-btn s-icon-btn s-very-subtle key-properties" ng-click="createController.showtree()">
+    T
+    </div>
 </div>
\ No newline at end of file
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 30db438d36..bb0416c485 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -392,7 +392,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 174, ../sass/_mixins.scss */
+  /* line 180, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -401,10 +401,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 177, ../sass/_mixins.scss */
+    /* line 183, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 182, ../sass/_mixins.scss */
+  /* line 188, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 043c01a5e4..af53c1c0f4 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -152,7 +152,7 @@
       .items-holder .item.grid-item {
         width: 200px;
         height: 200px; } }
-    /* line 174, ../sass/_mixins.scss */
+    /* line 180, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -161,10 +161,10 @@
       background-image: -webkit-linear-gradient(#707070, #636363);
       background-image: linear-gradient(#707070, #636363);
       color: #bdbdbd; }
-      /* line 177, ../sass/_mixins.scss */
+      /* line 183, ../sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
         color: #949494; }
-    /* line 182, ../sass/_mixins.scss */
+    /* line 188, ../sass/_mixins.scss */
     .items-holder .item.grid-item.btn-menu .invoke-menu {
       color: #828282; }
     /* line 65, ../sass/items/_item.scss */
@@ -279,7 +279,7 @@
       color: #999;
       display: inline-block;
       color: #80dfff; }
-      /* line 174, ../sass/_mixins.scss */
+      /* line 180, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):hover {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
@@ -288,10 +288,10 @@
         background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
         background-image: linear-gradient(#2ecbff, #14c4ff);
         color: #bdbdbd; }
-        /* line 177, ../sass/_mixins.scss */
+        /* line 183, ../sass/_mixins.scss */
         .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
           color: #75ddff; }
-      /* line 182, ../sass/_mixins.scss */
+      /* line 188, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
       /* line 146, ../sass/items/_item.scss */
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1572bba47e..cd9028b9fa 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -475,18 +475,16 @@ mct-container {
   border-radius: 3px; }
 
 @media screen and (max-width: 514px) {
-  /* line 57, ../sass/user-environ/_layout.scss */
-  .browser-manage {
-    width: 150px; } }
+  /* line 59, ../sass/user-environ/_layout.scss */
+  .browse-manage {
+    width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 57, ../sass/user-environ/_layout.scss */
-  .browser-manage {
-    min-width: 150px;
-    max-width: 300px;
-    width: 25%; } }
+  /* line 59, ../sass/user-environ/_layout.scss */
+  .browse-manage {
+    width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 57, ../sass/user-environ/_layout.scss */
-  .browser-manage {
+  /* line 59, ../sass/user-environ/_layout.scss */
+  .browse-manage {
     min-width: 150px;
     max-width: 800px;
     width: 25%; } }
@@ -1452,7 +1450,7 @@ mct-container {
     color: #999;
     display: inline-block;
     color: #ccf2ff; }
-    /* line 174, ../sass/_mixins.scss */
+    /* line 180, ../sass/_mixins.scss */
     .btn.major:not(.disabled):hover,
     .s-btn.major:not(.disabled):hover,
     .major.icon-btn:not(.disabled):hover,
@@ -1464,13 +1462,13 @@ mct-container {
       background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
       background-image: linear-gradient(#2ecbff, #14c4ff);
       color: #bdbdbd; }
-      /* line 177, ../sass/_mixins.scss */
+      /* line 183, ../sass/_mixins.scss */
       .btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .major.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .major.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #75ddff; }
-    /* line 182, ../sass/_mixins.scss */
+    /* line 188, ../sass/_mixins.scss */
     .btn.major.btn-menu .invoke-menu,
     .s-btn.major.btn-menu .invoke-menu,
     .major.btn-menu.icon-btn .invoke-menu,
@@ -1500,7 +1498,7 @@ mct-container {
       border-top: 1px solid #2ecbff;
       color: #ccf2ff;
       display: inline-block; }
-      /* line 174, ../sass/_mixins.scss */
+      /* line 180, ../sass/_mixins.scss */
       .btn.major:hover:not(.disabled):hover,
       .s-btn.major:hover:not(.disabled):hover,
       .major.icon-btn:hover:not(.disabled):hover,
@@ -1512,13 +1510,13 @@ mct-container {
         background-image: -webkit-linear-gradient(#47d1ff, #2ecbff);
         background-image: linear-gradient(#47d1ff, #2ecbff);
         color: white; }
-        /* line 177, ../sass/_mixins.scss */
+        /* line 183, ../sass/_mixins.scss */
         .btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.s-icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu {
           color: #8fe3ff; }
-      /* line 182, ../sass/_mixins.scss */
+      /* line 188, ../sass/_mixins.scss */
       .btn.major:hover.btn-menu .invoke-menu,
       .s-btn.major:hover.btn-menu .invoke-menu,
       .major.icon-btn:hover.btn-menu .invoke-menu,
@@ -1554,7 +1552,7 @@ mct-container {
     border-top: 1px solid #8a8a8a;
     color: #cccccc;
     display: inline-block; }
-    /* line 174, ../sass/_mixins.scss */
+    /* line 180, ../sass/_mixins.scss */
     .btn.subtle:not(.disabled):hover,
     .s-btn.subtle:not(.disabled):hover,
     .subtle.icon-btn:not(.disabled):hover,
@@ -1566,13 +1564,13 @@ mct-container {
       background-image: -webkit-linear-gradient(#969696, #8a8a8a);
       background-image: linear-gradient(#969696, #8a8a8a);
       color: #f0f0f0; }
-      /* line 177, ../sass/_mixins.scss */
+      /* line 183, ../sass/_mixins.scss */
       .btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #bababa; }
-    /* line 182, ../sass/_mixins.scss */
+    /* line 188, ../sass/_mixins.scss */
     .btn.subtle.btn-menu .invoke-menu,
     .s-btn.subtle.btn-menu .invoke-menu,
     .subtle.btn-menu.icon-btn .invoke-menu,
@@ -1605,7 +1603,7 @@ mct-container {
     border-top: 1px solid #575757;
     color: #999;
     display: inline-block; }
-    /* line 174, ../sass/_mixins.scss */
+    /* line 180, ../sass/_mixins.scss */
     .btn.very-subtle:not(.disabled):hover, .btn.s-very-subtle:not(.disabled):hover,
     .s-btn.very-subtle:not(.disabled):hover,
     .very-subtle.icon-btn:not(.disabled):hover,
@@ -1620,7 +1618,7 @@ mct-container {
       background-image: -webkit-linear-gradient(#636363, #575757);
       background-image: linear-gradient(#636363, #575757);
       color: #bdbdbd; }
-      /* line 177, ../sass/_mixins.scss */
+      /* line 183, ../sass/_mixins.scss */
       .btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1629,7 +1627,7 @@ mct-container {
       .s-very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .s-very-subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #878787; }
-    /* line 182, ../sass/_mixins.scss */
+    /* line 188, ../sass/_mixins.scss */
     .btn.very-subtle.btn-menu .invoke-menu, .btn.s-very-subtle.btn-menu .invoke-menu,
     .s-btn.very-subtle.btn-menu .invoke-menu,
     .very-subtle.btn-menu.icon-btn .invoke-menu,
@@ -1665,7 +1663,7 @@ mct-container {
       border-top: 1px solid #fe9510;
       color: #fff;
       display: inline-block; }
-      /* line 174, ../sass/_mixins.scss */
+      /* line 180, ../sass/_mixins.scss */
       .btn.very-subtle.paused:not(.disabled):hover, .btn.s-very-subtle.paused:not(.disabled):hover,
       .s-btn.very-subtle.paused:not(.disabled):hover,
       .very-subtle.paused.icon-btn:not(.disabled):hover,
@@ -1680,7 +1678,7 @@ mct-container {
         background-image: -webkit-linear-gradient(#fea029, #fe9510);
         background-image: linear-gradient(#fea029, #fe9510);
         color: white; }
-        /* line 177, ../sass/_mixins.scss */
+        /* line 183, ../sass/_mixins.scss */
         .btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1689,7 +1687,7 @@ mct-container {
         .s-very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
         .s-very-subtle.paused.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
           color: #fec070; }
-      /* line 182, ../sass/_mixins.scss */
+      /* line 188, ../sass/_mixins.scss */
       .btn.very-subtle.paused.btn-menu .invoke-menu, .btn.s-very-subtle.paused.btn-menu .invoke-menu,
       .s-btn.very-subtle.paused.btn-menu .invoke-menu,
       .very-subtle.paused.btn-menu.icon-btn .invoke-menu,
@@ -2151,7 +2149,7 @@ label.checkbox.custom {
   			color: lighten($c, 10%);
   		}
   	}*/ }
-  /* line 174, ../sass/_mixins.scss */
+  /* line 180, ../sass/_mixins.scss */
   .btn-menu:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2160,10 +2158,10 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 177, ../sass/_mixins.scss */
+    /* line 183, ../sass/_mixins.scss */
     .btn-menu:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 182, ../sass/_mixins.scss */
+  /* line 188, ../sass/_mixins.scss */
   .btn-menu.btn-menu .invoke-menu {
     color: #757575; }
   /* line 285, ../sass/controls/_controls.scss */
@@ -2295,7 +2293,7 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 174, ../sass/_mixins.scss */
+  /* line 180, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2304,13 +2302,13 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 177, ../sass/_mixins.scss */
+    /* line 183, ../sass/_mixins.scss */
     .slider .knob:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 182, ../sass/_mixins.scss */
+  /* line 188, ../sass/_mixins.scss */
   .slider .knob.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 198, ../sass/_mixins.scss */
+  /* line 204, ../sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2334,7 +2332,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 220, ../sass/_mixins.scss */
+  /* line 226, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2506,14 +2504,14 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 182, ../sass/_mixins.scss */
+    /* line 188, ../sass/_mixins.scss */
     .menu-element .menu.btn-menu .invoke-menu {
       color: #828282; }
     /* line 37, ../sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 288, ../sass/_mixins.scss */
+      /* line 294, ../sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2569,7 +2567,7 @@ label.checkbox.custom {
     border-top: 1px solid #919191;
     color: #999;
     display: inline-block; }
-    /* line 182, ../sass/_mixins.scss */
+    /* line 188, ../sass/_mixins.scss */
     .menu-element .context-menu.btn-menu .invoke-menu,
     .menu-element .super-menu.btn-menu .invoke-menu {
       color: #b0b0b0; }
@@ -3432,7 +3430,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 174, ../sass/_mixins.scss */
+  /* line 180, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -3441,10 +3439,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 177, ../sass/_mixins.scss */
+    /* line 183, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 182, ../sass/_mixins.scss */
+  /* line 188, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
@@ -4062,7 +4060,7 @@ input[type="text"] {
   bottom: 15%;
   left: 15%;
   z-index: 101; }
-  /* line 182, ../sass/_mixins.scss */
+  /* line 188, ../sass/_mixins.scss */
   .overlay > .holder.btn-menu .invoke-menu {
     color: #757575; }
   /* line 45, ../sass/overlay/_overlay.scss */
@@ -4570,7 +4568,7 @@ input[type="text"] {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 198, ../sass/_mixins.scss */
+    /* line 204, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4594,7 +4592,7 @@ input[type="text"] {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 220, ../sass/_mixins.scss */
+    /* line 226, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4624,7 +4622,7 @@ input[type="text"] {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 198, ../sass/_mixins.scss */
+  /* line 204, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -4648,7 +4646,7 @@ input[type="text"] {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 220, ../sass/_mixins.scss */
+  /* line 226, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 45855efc19..9c7fd6d0ef 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -104,7 +104,7 @@
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 288, ../sass/_mixins.scss */
+  /* line 294, ../sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 2f5baa7ea5..2ae67b18fd 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -33,6 +33,12 @@
     }
 }
 
+@mixin phoneandtablet {
+    @media screen and (max-width: $tabMaxW) {
+        @content
+    }
+}
+
 @mixin desktop {
     @media screen and (min-width: $compMinW) {
         @content
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index e9be867628..08b5d80726 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -48,18 +48,20 @@
 	@include border-radius($basicCr * 1.5);
 }
 
-$min-name: min-device-width;
-$max-name: max-device-width;
-$max-small: 769px;
-$min-large: 770px;
-
 // style="min-width: 150px; max-width: 800px; width: 25%;"
-.browser-manage {
+// NOTE: Added to adjust the browse folder tree list view
+//.hider-check {
+//    @include phoneandtablet {
+//        
+//    } 
+//}
+
+.browse-manage {
     @include phone {
-        width: 150px;
+        width: 100px;
     }
     @include tablet {
-        width: 150px; 
+        width: 150px;
     }    
     @include desktop {
         min-width: 150px;
diff --git a/platform/commonUI/general/src/controllers/ClickAwayController.js b/platform/commonUI/general/src/controllers/ClickAwayController.js
index 75b1d985da..2b75ffba41 100644
--- a/platform/commonUI/general/src/controllers/ClickAwayController.js
+++ b/platform/commonUI/general/src/controllers/ClickAwayController.js
@@ -58,6 +58,11 @@ define(
                     activate();
                 }
             }
+            function changeTree() {
+                console.log("WWWWW");
+            }
+            
+            
 
             // Callback used by the document listener. Deactivates;
             // note also $scope.$apply is invoked to indicate that
@@ -91,6 +96,10 @@ define(
                  */
                 toggle: function () {
                     changeState();
+                },
+                
+                showtree: function () {
+                    changeTree();
                 }
             };
 

From 2b4162c0be7383c4cfd8cc3eb2eece2e1724cdbe Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 12:11:48 -0700
Subject: [PATCH 011/266] [Mobile] Reorganize

Reorganized the sass files. To incorporate, new
mobile directory, which holds all the mobile
sass code.
---
 platform/commonUI/general/res/css/forms.css   |   7 +-
 platform/commonUI/general/res/css/items.css   | 125 +++++++--
 .../general/res/css/theme-espresso.css        | 247 +++++++++++-------
 platform/commonUI/general/res/css/tree.css    |   3 +-
 .../commonUI/general/res/sass/_constants.scss |   7 -
 platform/commonUI/general/res/sass/_main.scss |   4 +
 .../commonUI/general/res/sass/_mixins.scss    |  27 --
 platform/commonUI/general/res/sass/items.scss |   5 +-
 .../general/res/sass/items/_item.scss         |   1 +
 .../general/res/sass/mobile/_constants.scss   |  28 ++
 .../general/res/sass/mobile/_item.scss        |  62 +++++
 .../general/res/sass/mobile/_layout.scss      |  43 +++
 .../general/res/sass/mobile/_mixins.scss      |  46 ++++
 .../general/res/sass/theme-espresso.scss      |   1 +
 .../res/sass/user-environ/_layout.scss        |  22 --
 15 files changed, 454 insertions(+), 174 deletions(-)
 create mode 100644 platform/commonUI/general/res/sass/mobile/_constants.scss
 create mode 100644 platform/commonUI/general/res/sass/mobile/_item.scss
 create mode 100644 platform/commonUI/general/res/sass/mobile/_layout.scss
 create mode 100644 platform/commonUI/general/res/sass/mobile/_mixins.scss

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index bb0416c485..4400441d9c 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -42,7 +42,6 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
@@ -392,7 +391,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 180, ../sass/_mixins.scss */
+  /* line 153, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -401,10 +400,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 183, ../sass/_mixins.scss */
+    /* line 156, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 188, ../sass/_mixins.scss */
+  /* line 161, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index af53c1c0f4..88c0791919 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -42,13 +42,34 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
 /************************** CONTROLS */
 /************************** PATHS */
 /************************** TIMINGS */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/************************** WINDOW DIMENSIONS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -79,6 +100,27 @@
 	}
 }
 */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -152,7 +194,7 @@
       .items-holder .item.grid-item {
         width: 200px;
         height: 200px; } }
-    /* line 180, ../sass/_mixins.scss */
+    /* line 153, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -161,10 +203,10 @@
       background-image: -webkit-linear-gradient(#707070, #636363);
       background-image: linear-gradient(#707070, #636363);
       color: #bdbdbd; }
-      /* line 183, ../sass/_mixins.scss */
+      /* line 156, ../sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
         color: #949494; }
-    /* line 188, ../sass/_mixins.scss */
+    /* line 161, ../sass/_mixins.scss */
     .items-holder .item.grid-item.btn-menu .invoke-menu {
       color: #828282; }
     /* line 65, ../sass/items/_item.scss */
@@ -210,24 +252,24 @@
       top: auto;
       height: 30px;
       padding: 5px; }
-    /* line 99, ../sass/items/_item.scss */
+    /* line 100, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
       @media screen and (max-width: 514px) {
-        /* line 99, ../sass/items/_item.scss */
+        /* line 100, ../sass/items/_item.scss */
         .items-holder .item.grid-item .item-main {
           display: none; } }
       @media screen and (min-width: 515px) and (max-width: 800px) {
-        /* line 99, ../sass/items/_item.scss */
+        /* line 100, ../sass/items/_item.scss */
         .items-holder .item.grid-item .item-main {
           display: none; } }
-      /* line 112, ../sass/items/_item.scss */
+      /* line 113, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         color: #737373;
         text-align: center;
         font-size: 6em; }
-      /* line 118, ../sass/items/_item.scss */
+      /* line 119, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -247,17 +289,17 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 130, ../sass/items/_item.scss */
+    /* line 131, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       color: #cccccc;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis; }
-    /* line 138, ../sass/items/_item.scss */
+    /* line 139, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
-    /* line 141, ../sass/items/_item.scss */
+    /* line 142, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -279,7 +321,7 @@
       color: #999;
       display: inline-block;
       color: #80dfff; }
-      /* line 180, ../sass/_mixins.scss */
+      /* line 153, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):hover {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
@@ -288,21 +330,66 @@
         background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
         background-image: linear-gradient(#2ecbff, #14c4ff);
         color: #bdbdbd; }
-        /* line 183, ../sass/_mixins.scss */
+        /* line 156, ../sass/_mixins.scss */
         .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
           color: #75ddff; }
-      /* line 188, ../sass/_mixins.scss */
+      /* line 161, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 146, ../sass/items/_item.scss */
+      /* line 147, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 147, ../sass/items/_item.scss */
+      /* line 148, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 148, ../sass/items/_item.scss */
+      /* line 149, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 150, ../sass/items/_item.scss */
+      /* line 151, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (max-width: 514px) {
+  /* line 24, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    width: 100%;
+    height: 50px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) {
+  /* line 24, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    width: 100%;
+    height: 100px; } }
+@media screen and (min-width: 801px) {
+  /* line 24, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    width: 200px;
+    height: 200px; } }
+@media screen and (max-width: 514px) {
+  /* line 51, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .bar .item-main {
+    display: none; } }
+@media screen and (min-width: 515px) and (max-width: 800px) {
+  /* line 51, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .bar .item-main {
+    display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index cd9028b9fa..284072886c 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -43,13 +43,34 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
 /************************** CONTROLS */
 /************************** PATHS */
 /************************** TIMINGS */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/************************** WINDOW DIMENSIONS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -179,6 +200,27 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 	}
 }
 */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -474,22 +516,7 @@ mct-container {
   -webkit-border-radius: 3px;
   border-radius: 3px; }
 
-@media screen and (max-width: 514px) {
-  /* line 59, ../sass/user-environ/_layout.scss */
-  .browse-manage {
-    width: 100px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 59, ../sass/user-environ/_layout.scss */
-  .browse-manage {
-    width: 150px; } }
-@media screen and (min-width: 801px) {
-  /* line 59, ../sass/user-environ/_layout.scss */
-  .browse-manage {
-    min-width: 150px;
-    max-width: 800px;
-    width: 25%; } }
-
-/* line 73, ../sass/user-environ/_layout.scss */
+/* line 51, ../sass/user-environ/_layout.scss */
 .contents {
   box-sizing: border-box;
   position: absolute;
@@ -497,36 +524,36 @@ mct-container {
   right: 0;
   bottom: 0;
   left: 0; }
-  /* line 81, ../sass/user-environ/_layout.scss */
+  /* line 59, ../sass/user-environ/_layout.scss */
   .contents.nomargin {
     right: 0px;
     bottom: 0px;
     left: 0px; }
 
-/* line 90, ../sass/user-environ/_layout.scss */
+/* line 68, ../sass/user-environ/_layout.scss */
 .bar .icon.major {
   margin-right: 5px; }
-/* line 93, ../sass/user-environ/_layout.scss */
+/* line 71, ../sass/user-environ/_layout.scss */
 .bar.abs, .btn-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
-/* line 97, ../sass/user-environ/_layout.scss */
+/* line 75, ../sass/user-environ/_layout.scss */
 .bar.left,
 .bar .left {
   width: 45% !important;
   right: auto !important; }
-/* line 102, ../sass/user-environ/_layout.scss */
+/* line 80, ../sass/user-environ/_layout.scss */
 .bar.right,
 .bar .right {
   width: 45% !important;
   left: auto !important;
   text-align: right; }
-  /* line 107, ../sass/user-environ/_layout.scss */
+  /* line 85, ../sass/user-environ/_layout.scss */
   .bar.right .icon.major,
   .bar .right .icon.major {
     margin-left: 15px; }
 
-/* line 114, ../sass/user-environ/_layout.scss */
+/* line 92, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -534,23 +561,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 125, ../sass/user-environ/_layout.scss */
+/* line 103, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 131, ../sass/user-environ/_layout.scss */
+/* line 109, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 134, ../sass/user-environ/_layout.scss */
+  /* line 112, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 139, ../sass/user-environ/_layout.scss */
+  /* line 117, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 144, ../sass/user-environ/_layout.scss */
+/* line 122, ../sass/user-environ/_layout.scss */
 .user-environ .bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -562,20 +589,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 149, ../sass/user-environ/_layout.scss */
+  /* line 127, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .status-holder {
     z-index: 1; }
-  /* line 153, ../sass/user-environ/_layout.scss */
+  /* line 131, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 161, ../sass/user-environ/_layout.scss */
+/* line 139, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 163, ../sass/user-environ/_layout.scss */
+  /* line 141, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -586,103 +613,139 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 171, ../sass/user-environ/_layout.scss */
+    /* line 149, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 178, ../sass/user-environ/_layout.scss */
+  /* line 156, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 184, ../sass/user-environ/_layout.scss */
+  /* line 162, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 191, ../sass/user-environ/_layout.scss */
+  /* line 169, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 197, ../sass/user-environ/_layout.scss */
+  /* line 175, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 200, ../sass/user-environ/_layout.scss */
+  /* line 178, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 203, ../sass/user-environ/_layout.scss */
+  /* line 181, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 209, ../sass/user-environ/_layout.scss */
+  /* line 187, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 212, ../sass/user-environ/_layout.scss */
+  /* line 190, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 216, ../sass/user-environ/_layout.scss */
+  /* line 194, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 222, ../sass/user-environ/_layout.scss */
+/* line 200, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 225, ../sass/user-environ/_layout.scss */
+  /* line 203, ../sass/user-environ/_layout.scss */
   .pane.treeview .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 228, ../sass/user-environ/_layout.scss */
+    /* line 206, ../sass/user-environ/_layout.scss */
     .pane.treeview .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 233, ../sass/user-environ/_layout.scss */
+  /* line 211, ../sass/user-environ/_layout.scss */
   .pane.treeview .tree-holder {
     overflow: auto;
     top: 34px; }
-  /* line 240, ../sass/user-environ/_layout.scss */
+  /* line 218, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 245, ../sass/user-environ/_layout.scss */
+  /* line 223, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 250, ../sass/user-environ/_layout.scss */
+  /* line 228, ../sass/user-environ/_layout.scss */
   .pane.edit-main .object-holder {
     top: 0; }
-  /* line 256, ../sass/user-environ/_layout.scss */
+  /* line 234, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 264, ../sass/user-environ/_layout.scss */
+/* line 242, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 267, ../sass/user-environ/_layout.scss */
+  /* line 245, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 274, ../sass/user-environ/_layout.scss */
+/* line 252, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 276, ../sass/user-environ/_layout.scss */
+  /* line 254, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 280, ../sass/user-environ/_layout.scss */
+  /* line 258, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 282, ../sass/user-environ/_layout.scss */
+    /* line 260, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 5px; }
 
-/* line 291, ../sass/user-environ/_layout.scss */
+/* line 269, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (max-width: 514px) {
+  /* line 31, ../sass/mobile/_layout.scss */
+  .browse-manage {
+    width: 100px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) {
+  /* line 31, ../sass/mobile/_layout.scss */
+  .browse-manage {
+    width: 150px; } }
+@media screen and (min-width: 801px) {
+  /* line 31, ../sass/mobile/_layout.scss */
+  .browse-manage {
+    min-width: 150px;
+    max-width: 800px;
+    width: 25%; } }
+
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -1450,7 +1513,7 @@ mct-container {
     color: #999;
     display: inline-block;
     color: #ccf2ff; }
-    /* line 180, ../sass/_mixins.scss */
+    /* line 153, ../sass/_mixins.scss */
     .btn.major:not(.disabled):hover,
     .s-btn.major:not(.disabled):hover,
     .major.icon-btn:not(.disabled):hover,
@@ -1462,13 +1525,13 @@ mct-container {
       background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
       background-image: linear-gradient(#2ecbff, #14c4ff);
       color: #bdbdbd; }
-      /* line 183, ../sass/_mixins.scss */
+      /* line 156, ../sass/_mixins.scss */
       .btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .major.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .major.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #75ddff; }
-    /* line 188, ../sass/_mixins.scss */
+    /* line 161, ../sass/_mixins.scss */
     .btn.major.btn-menu .invoke-menu,
     .s-btn.major.btn-menu .invoke-menu,
     .major.btn-menu.icon-btn .invoke-menu,
@@ -1498,7 +1561,7 @@ mct-container {
       border-top: 1px solid #2ecbff;
       color: #ccf2ff;
       display: inline-block; }
-      /* line 180, ../sass/_mixins.scss */
+      /* line 153, ../sass/_mixins.scss */
       .btn.major:hover:not(.disabled):hover,
       .s-btn.major:hover:not(.disabled):hover,
       .major.icon-btn:hover:not(.disabled):hover,
@@ -1510,13 +1573,13 @@ mct-container {
         background-image: -webkit-linear-gradient(#47d1ff, #2ecbff);
         background-image: linear-gradient(#47d1ff, #2ecbff);
         color: white; }
-        /* line 183, ../sass/_mixins.scss */
+        /* line 156, ../sass/_mixins.scss */
         .btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.s-icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu {
           color: #8fe3ff; }
-      /* line 188, ../sass/_mixins.scss */
+      /* line 161, ../sass/_mixins.scss */
       .btn.major:hover.btn-menu .invoke-menu,
       .s-btn.major:hover.btn-menu .invoke-menu,
       .major.icon-btn:hover.btn-menu .invoke-menu,
@@ -1552,7 +1615,7 @@ mct-container {
     border-top: 1px solid #8a8a8a;
     color: #cccccc;
     display: inline-block; }
-    /* line 180, ../sass/_mixins.scss */
+    /* line 153, ../sass/_mixins.scss */
     .btn.subtle:not(.disabled):hover,
     .s-btn.subtle:not(.disabled):hover,
     .subtle.icon-btn:not(.disabled):hover,
@@ -1564,13 +1627,13 @@ mct-container {
       background-image: -webkit-linear-gradient(#969696, #8a8a8a);
       background-image: linear-gradient(#969696, #8a8a8a);
       color: #f0f0f0; }
-      /* line 183, ../sass/_mixins.scss */
+      /* line 156, ../sass/_mixins.scss */
       .btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #bababa; }
-    /* line 188, ../sass/_mixins.scss */
+    /* line 161, ../sass/_mixins.scss */
     .btn.subtle.btn-menu .invoke-menu,
     .s-btn.subtle.btn-menu .invoke-menu,
     .subtle.btn-menu.icon-btn .invoke-menu,
@@ -1603,7 +1666,7 @@ mct-container {
     border-top: 1px solid #575757;
     color: #999;
     display: inline-block; }
-    /* line 180, ../sass/_mixins.scss */
+    /* line 153, ../sass/_mixins.scss */
     .btn.very-subtle:not(.disabled):hover, .btn.s-very-subtle:not(.disabled):hover,
     .s-btn.very-subtle:not(.disabled):hover,
     .very-subtle.icon-btn:not(.disabled):hover,
@@ -1618,7 +1681,7 @@ mct-container {
       background-image: -webkit-linear-gradient(#636363, #575757);
       background-image: linear-gradient(#636363, #575757);
       color: #bdbdbd; }
-      /* line 183, ../sass/_mixins.scss */
+      /* line 156, ../sass/_mixins.scss */
       .btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1627,7 +1690,7 @@ mct-container {
       .s-very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .s-very-subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #878787; }
-    /* line 188, ../sass/_mixins.scss */
+    /* line 161, ../sass/_mixins.scss */
     .btn.very-subtle.btn-menu .invoke-menu, .btn.s-very-subtle.btn-menu .invoke-menu,
     .s-btn.very-subtle.btn-menu .invoke-menu,
     .very-subtle.btn-menu.icon-btn .invoke-menu,
@@ -1663,7 +1726,7 @@ mct-container {
       border-top: 1px solid #fe9510;
       color: #fff;
       display: inline-block; }
-      /* line 180, ../sass/_mixins.scss */
+      /* line 153, ../sass/_mixins.scss */
       .btn.very-subtle.paused:not(.disabled):hover, .btn.s-very-subtle.paused:not(.disabled):hover,
       .s-btn.very-subtle.paused:not(.disabled):hover,
       .very-subtle.paused.icon-btn:not(.disabled):hover,
@@ -1678,7 +1741,7 @@ mct-container {
         background-image: -webkit-linear-gradient(#fea029, #fe9510);
         background-image: linear-gradient(#fea029, #fe9510);
         color: white; }
-        /* line 183, ../sass/_mixins.scss */
+        /* line 156, ../sass/_mixins.scss */
         .btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1687,7 +1750,7 @@ mct-container {
         .s-very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
         .s-very-subtle.paused.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
           color: #fec070; }
-      /* line 188, ../sass/_mixins.scss */
+      /* line 161, ../sass/_mixins.scss */
       .btn.very-subtle.paused.btn-menu .invoke-menu, .btn.s-very-subtle.paused.btn-menu .invoke-menu,
       .s-btn.very-subtle.paused.btn-menu .invoke-menu,
       .very-subtle.paused.btn-menu.icon-btn .invoke-menu,
@@ -2149,7 +2212,7 @@ label.checkbox.custom {
   			color: lighten($c, 10%);
   		}
   	}*/ }
-  /* line 180, ../sass/_mixins.scss */
+  /* line 153, ../sass/_mixins.scss */
   .btn-menu:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2158,10 +2221,10 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 183, ../sass/_mixins.scss */
+    /* line 156, ../sass/_mixins.scss */
     .btn-menu:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 188, ../sass/_mixins.scss */
+  /* line 161, ../sass/_mixins.scss */
   .btn-menu.btn-menu .invoke-menu {
     color: #757575; }
   /* line 285, ../sass/controls/_controls.scss */
@@ -2293,7 +2356,7 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 180, ../sass/_mixins.scss */
+  /* line 153, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2302,13 +2365,13 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 183, ../sass/_mixins.scss */
+    /* line 156, ../sass/_mixins.scss */
     .slider .knob:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 188, ../sass/_mixins.scss */
+  /* line 161, ../sass/_mixins.scss */
   .slider .knob.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 204, ../sass/_mixins.scss */
+  /* line 177, ../sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2332,7 +2395,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 226, ../sass/_mixins.scss */
+  /* line 199, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2504,14 +2567,14 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 188, ../sass/_mixins.scss */
+    /* line 161, ../sass/_mixins.scss */
     .menu-element .menu.btn-menu .invoke-menu {
       color: #828282; }
     /* line 37, ../sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 294, ../sass/_mixins.scss */
+      /* line 267, ../sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2567,7 +2630,7 @@ label.checkbox.custom {
     border-top: 1px solid #919191;
     color: #999;
     display: inline-block; }
-    /* line 188, ../sass/_mixins.scss */
+    /* line 161, ../sass/_mixins.scss */
     .menu-element .context-menu.btn-menu .invoke-menu,
     .menu-element .super-menu.btn-menu .invoke-menu {
       color: #b0b0b0; }
@@ -3430,7 +3493,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 180, ../sass/_mixins.scss */
+  /* line 153, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -3439,10 +3502,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 183, ../sass/_mixins.scss */
+    /* line 156, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 188, ../sass/_mixins.scss */
+  /* line 161, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
@@ -4060,7 +4123,7 @@ input[type="text"] {
   bottom: 15%;
   left: 15%;
   z-index: 101; }
-  /* line 188, ../sass/_mixins.scss */
+  /* line 161, ../sass/_mixins.scss */
   .overlay > .holder.btn-menu .invoke-menu {
     color: #757575; }
   /* line 45, ../sass/overlay/_overlay.scss */
@@ -4568,7 +4631,7 @@ input[type="text"] {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 204, ../sass/_mixins.scss */
+    /* line 177, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4592,7 +4655,7 @@ input[type="text"] {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 226, ../sass/_mixins.scss */
+    /* line 199, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4622,7 +4685,7 @@ input[type="text"] {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 204, ../sass/_mixins.scss */
+  /* line 177, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -4646,7 +4709,7 @@ input[type="text"] {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 226, ../sass/_mixins.scss */
+  /* line 199, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 9c7fd6d0ef..b70dafaf91 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -42,7 +42,6 @@
  *****************************************************************************/
 /************************** FEATURES */
 /************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** WINDOW DIMENSIONS FOR RWD */
 /************************** COLORS AND SHADING */
 /************************** RATIOS */
 /************************** LAYOUT */
@@ -104,7 +103,7 @@
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 294, ../sass/_mixins.scss */
+  /* line 267, ../sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 984d2e8dac..b373982a37 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -33,13 +33,6 @@ $controlCr: 2px;
 $smallCr: 2px;
 $badgeW: 35px;
 
-/************************** WINDOW DIMENSIONS FOR RWD */
-$phoMaxW: 514px;
-$tabMinW: 515px;
-$tabMaxW: 800px;
-$compMinW: 801px; 
-$compMinH: 1281px;
-
 /************************** COLORS AND SHADING */
 $colorBodyBg: #333;
 $colorBodyFg: #999;
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 07fec4ed79..5604ba3cb6 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -27,10 +27,14 @@
 @import "compass/utilities";
 
 @import "mixins";
+@import "mobile/mixins";
+
 @import "effects";
 @import "global";
 @import "fonts";
 @import "user-environ/layout";
+@import "mobile/layout";
+
 @import "fixed-position";
 @import "about";
 @import "text";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 2ae67b18fd..77e7a42d6c 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -20,33 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// Mixins for devices
-@mixin phone {
-    @media screen and (max-width: $phoMaxW) {
-        @content
-    }
-}
-
-@mixin tablet {
-    @media screen and (min-width: $tabMinW) and (max-width: $tabMaxW) {
-        @content
-    }
-}
-
-@mixin phoneandtablet {
-    @media screen and (max-width: $tabMaxW) {
-        @content
-    }
-}
-
-@mixin desktop {
-    @media screen and (min-width: $compMinW) {
-        @content
-    }
-}
-
-
-
 @mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
     overflow: $overflowHidden;
     position: absolute;
diff --git a/platform/commonUI/general/res/sass/items.scss b/platform/commonUI/general/res/sass/items.scss
index 376497c2cf..0feb54cbae 100644
--- a/platform/commonUI/general/res/sass/items.scss
+++ b/platform/commonUI/general/res/sass/items.scss
@@ -26,5 +26,8 @@
 @import "compass/utilities";
 
 @import "constants";
+@import "mobile/constants";
 @import "mixins";
-@import "items/item";
\ No newline at end of file
+@import "mobile/mixins";
+@import "items/item";
+@import "mobile/item";
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 88e75bf940..c1eb2d023f 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -96,6 +96,7 @@
 	                padding: $interiorMargin;
                 }
             }
+//            NOTE: make icon disappear
             .item-main {
                 @include phone {
                     display: none;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
new file mode 100644
index 0000000000..042a45ecc3
--- /dev/null
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/************************** WINDOW DIMENSIONS FOR RWD */
+$phoMaxW: 514px;
+$tabMinW: 515px;
+$tabMaxW: 800px;
+$compMinW: 801px; 
+$compMinH: 1281px;
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
new file mode 100644
index 0000000000..31550c554b
--- /dev/null
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -0,0 +1,62 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+.items-holder {
+    .item {
+        &.grid-item {
+            // NOTE: Sets grid item width
+            $dWid: $ueBrowseGridItemLg;
+            $dHei: $ueBrowseGridItemLg;
+            @include phone {
+                $dWid: 100%;
+                $dHei: $ueBrowseGridItemLg/4;
+                width: $dWid;
+                height: $dHei;
+            }
+            
+            @include tablet {
+                $dWid: 100%;
+                $dHei: $ueBrowseGridItemLg/2;
+                width: $dWid;
+                height: $dHei;
+            }
+            
+            @include desktop {
+                $dWid: $ueBrowseGridItemLg;
+                $dHei: $ueBrowseGridItemLg;
+                width: $dWid;
+                height: $dHei; 
+            }
+            
+            .bar {
+//            NOTE: make icon disappear
+            .item-main {
+                @include phone {
+                    display: none;
+                }
+                @include tablet {
+                    display: none;   
+                }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
new file mode 100644
index 0000000000..7533561b83
--- /dev/null
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -0,0 +1,43 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// style="min-width: 150px; max-width: 800px; width: 25%;"
+// NOTE: Added to adjust the browse folder tree list view
+//.hider-check {
+//    @include phoneandtablet {
+//        
+//    } 
+//}
+
+.browse-manage {
+    @include phone {
+        width: 100px;
+    }
+    @include tablet {
+        width: 150px;
+    }    
+    @include desktop {
+        min-width: 150px;
+        max-width: 800px;
+        width: 25%;   
+    }   
+}
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
new file mode 100644
index 0000000000..0223ef54f2
--- /dev/null
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -0,0 +1,46 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+// NOTE: Mixins for devices
+@mixin phone {
+    @media screen and (max-width: $phoMaxW) {
+        @content
+    }
+}
+
+@mixin tablet {
+    @media screen and (min-width: $tabMinW) and (max-width: $tabMaxW) {
+        @content
+    }
+}
+
+@mixin phoneandtablet {
+    @media screen and (max-width: $tabMaxW) {
+        @content
+    }
+}
+
+@mixin desktop {
+    @media screen and (min-width: $compMinW) {
+        @content
+    }
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/theme-espresso.scss b/platform/commonUI/general/res/sass/theme-espresso.scss
index 711f43881a..68961d8140 100644
--- a/platform/commonUI/general/res/sass/theme-espresso.scss
+++ b/platform/commonUI/general/res/sass/theme-espresso.scss
@@ -20,5 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @import "constants";
+@import "mobile/constants";
 @import "themes/theme-espresso";
 @import "main";
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 08b5d80726..7b63575d85 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -48,28 +48,6 @@
 	@include border-radius($basicCr * 1.5);
 }
 
-// style="min-width: 150px; max-width: 800px; width: 25%;"
-// NOTE: Added to adjust the browse folder tree list view
-//.hider-check {
-//    @include phoneandtablet {
-//        
-//    } 
-//}
-
-.browse-manage {
-    @include phone {
-        width: 100px;
-    }
-    @include tablet {
-        width: 150px;
-    }    
-    @include desktop {
-        min-width: 150px;
-        max-width: 800px;
-        width: 25%;   
-    }   
-}
-
 .contents {
     $myM: 0; //$interiorMargin;
     box-sizing: border-box;

From 5c5648488993f3f6cc956bf78c0544ec8d6cfab1 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 12:14:40 -0700
Subject: [PATCH 012/266] [Mobile] Main scss added

Added the mobile files as imports
to the main scss files that
generate as css files.
---
 platform/commonUI/general/res/sass/forms.scss | 2 ++
 platform/commonUI/general/res/sass/tree.scss  | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/platform/commonUI/general/res/sass/forms.scss b/platform/commonUI/general/res/sass/forms.scss
index 56573c72ae..6929093c04 100644
--- a/platform/commonUI/general/res/sass/forms.scss
+++ b/platform/commonUI/general/res/sass/forms.scss
@@ -26,8 +26,10 @@
 @import "compass/utilities";
 
 @import "constants";
+@import "mobile/constants";
 @import "mixins";
 @import "forms/mixins";
+@import "mobile/mixins";
 @import "forms/elems";
 @import "forms/textarea";
 @import "forms/text-input";
diff --git a/platform/commonUI/general/res/sass/tree.scss b/platform/commonUI/general/res/sass/tree.scss
index b8b2d09124..5cb5d6fe1f 100644
--- a/platform/commonUI/general/res/sass/tree.scss
+++ b/platform/commonUI/general/res/sass/tree.scss
@@ -26,5 +26,7 @@
 @import "compass/utilities";
 
 @import "constants";
+@import "mobile/constants";
 @import "mixins";
+@import "mobile/mixins";
 @import "tree/tree";
\ No newline at end of file

From 342be0822f7cf4308d0a42689bd195f3f060b40e Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 12:17:19 -0700
Subject: [PATCH 013/266] [Mobile] Gen css

---
 platform/commonUI/general/res/css/forms.css   | 43 +++++++++++++++++++
 platform/commonUI/general/res/css/tree.css    | 43 +++++++++++++++++++
 .../general/res/sass/mobile/_constants.scss   |  2 +-
 .../general/res/sass/mobile/_item.scss        |  2 +-
 .../general/res/sass/mobile/_mixins.scss      |  2 +-
 5 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 4400441d9c..7644418de2 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -48,6 +48,28 @@
 /************************** CONTROLS */
 /************************** PATHS */
 /************************** TIMINGS */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/************************** WINDOW DIMENSIONS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -120,6 +142,27 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 /* line 24, ../sass/forms/_elems.scss */
 .form .section-header {
   -moz-border-radius: 3px;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index b70dafaf91..f0aa033ccd 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -48,6 +48,28 @@
 /************************** CONTROLS */
 /************************** PATHS */
 /************************** TIMINGS */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/************************** WINDOW DIMENSIONS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -78,6 +100,27 @@
 	}
 }
 */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 042a45ecc3..d05edc709e 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -25,4 +25,4 @@ $phoMaxW: 514px;
 $tabMinW: 515px;
 $tabMaxW: 800px;
 $compMinW: 801px; 
-$compMinH: 1281px;
\ No newline at end of file
+$compMinH: 1281px;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 31550c554b..83602b97c1 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -22,7 +22,7 @@
 .items-holder {
     .item {
         &.grid-item {
-            // NOTE: Sets grid item width
+//            NOTE: Sets grid item width
             $dWid: $ueBrowseGridItemLg;
             $dHei: $ueBrowseGridItemLg;
             @include phone {
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 0223ef54f2..97de07f14a 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -43,4 +43,4 @@
     @media screen and (min-width: $compMinW) {
         @content
     }
-}
\ No newline at end of file
+}

From 07ef4dfe8adf1ff48d0aa8ff31cb13f859c1e508 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 14:27:59 -0700
Subject: [PATCH 014/266] [Mobile] Menu Slide

Menu slides, but not transition
css slides out on click. Currently
uses document, which needs to be
replaced with angular version using
 and/or  and/or
ng-class and/or ng-click.
---
 .../commonUI/browse/res/templates/browse.html |  4 +-
 .../res/templates/browse/object-header.html   |  5 +-
 .../res/templates/create/create-button.html   |  3 --
 platform/commonUI/general/bundle.json         |  5 ++
 .../general/res/css/theme-espresso.css        | 16 +++++--
 .../general/res/sass/mobile/_layout.scss      | 17 +++++--
 .../src/controllers/ClickAwayController.js    |  7 ---
 .../src/controllers/TreeMenuController.js     | 48 +++++++++++++++++++
 8 files changed, 84 insertions(+), 21 deletions(-)
 create mode 100644 platform/commonUI/general/src/controllers/TreeMenuController.js

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index c955d596eb..a8f25caa7d 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -19,11 +19,11 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div content="jquery-wrapper" class="abs holder-all browse-mode">
+<div id="myElement" content="jquery-wrapper" class="abs holder-all browse-mode holder-hide">
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
         <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane browse-manage'>
+            <div class='split-pane-component treeview pane browse-manage createtreebtns'>
                 <mct-representation key="'create-button'" mct-object="navigatedObject">
                 </mct-representation>
                 <div class='holder tree-holder abs'>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index eb13bb3764..91f6df04d2 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -19,7 +19,10 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='object-header'>
+<div class='object-header' ng-controller="TreeMenuController as treeController">
+    <div class="btn s-btn s-icon-btn s-very-subtle key-properties" ng-click="treeController.toggle()">
+    T
+    </div>
 	<span class="label s-label">
 	    <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
 	    <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
diff --git a/platform/commonUI/browse/res/templates/create/create-button.html b/platform/commonUI/browse/res/templates/create/create-button.html
index 6f1efc9604..527afd9882 100644
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@@ -27,7 +27,4 @@
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>
-    <div class="btn s-btn s-icon-btn s-very-subtle key-properties" ng-click="createController.showtree()">
-    T
-    </div>
 </div>
\ No newline at end of file
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 2dd8d5dc4c..428a1f667d 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -85,6 +85,11 @@
                 "implementation": "controllers/ClickAwayController.js",
                 "depends": [ "$scope", "$document" ]
             },
+            {
+                "key": "TreeMenuController",
+                "implementation": "controllers/TreeMenuController.js",
+                "depends": [ "$element", "$document" ]
+            },            
             {
                 "key": "ViewSwitcherController",
                 "implementation": "controllers/ViewSwitcherController.js",
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 284072886c..0e9d54dbe9 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,16 +731,26 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+@media screen and (max-width: 800px) {
+  /* line 26, ../sass/mobile/_layout.scss */
+  .holder-hide {
+    left: -150px; } }
+
+@media screen and (max-width: 800px) {
+  /* line 32, ../sass/mobile/_layout.scss */
+  .holder-show {
+    left: -150px; } }
+
 @media screen and (max-width: 514px) {
-  /* line 31, ../sass/mobile/_layout.scss */
+  /* line 38, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 31, ../sass/mobile/_layout.scss */
+  /* line 38, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 31, ../sass/mobile/_layout.scss */
+  /* line 38, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 7533561b83..d8ab1b3d02 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -22,11 +22,18 @@
 
 // style="min-width: 150px; max-width: 800px; width: 25%;"
 // NOTE: Added to adjust the browse folder tree list view
-//.hider-check {
-//    @include phoneandtablet {
-//        
-//    } 
-//}
+
+.holder-hide {
+    @include phoneandtablet {
+        left: -150px;
+    }
+}
+
+.holder-show {
+    @include phoneandtablet {
+        left: 0px;
+    } 
+}
 
 .browse-manage {
     @include phone {
diff --git a/platform/commonUI/general/src/controllers/ClickAwayController.js b/platform/commonUI/general/src/controllers/ClickAwayController.js
index 2b75ffba41..88965ca497 100644
--- a/platform/commonUI/general/src/controllers/ClickAwayController.js
+++ b/platform/commonUI/general/src/controllers/ClickAwayController.js
@@ -58,9 +58,6 @@ define(
                     activate();
                 }
             }
-            function changeTree() {
-                console.log("WWWWW");
-            }
             
             
 
@@ -96,10 +93,6 @@ define(
                  */
                 toggle: function () {
                     changeState();
-                },
-                
-                showtree: function () {
-                    changeTree();
                 }
             };
 
diff --git a/platform/commonUI/general/src/controllers/TreeMenuController.js b/platform/commonUI/general/src/controllers/TreeMenuController.js
new file mode 100644
index 0000000000..5d951bb4ad
--- /dev/null
+++ b/platform/commonUI/general/src/controllers/TreeMenuController.js
@@ -0,0 +1,48 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        function TreeMenuController($scope, $document) {
+            return {
+                toggle: function () {
+                    if (document.getElementById("myElement").
+                            className.match(/(?:^|\s)holder-hide(?!\S)/)) {
+                        document.getElementById("myElement").className =
+                            document.getElementById("myElement")
+                            .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
+                    } else {
+                        document.getElementById("myElement").className += " holder-hide";
+                    }
+                    
+                }
+            };
+
+        }
+
+        return TreeMenuController;
+    }
+);
\ No newline at end of file

From cdcaedc8dd36fc09ff583d0295d5e1e4eccec142 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 15:57:08 -0700
Subject: [PATCH 015/266] [Mobile] Added transistions

Transistions added, however still using
document.getElementById.
---
 .../general/res/css/theme-espresso.css         | 18 +++++++++++++-----
 .../general/res/sass/mobile/_layout.scss       |  2 ++
 .../src/controllers/TreeMenuController.js      |  4 ++++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 0e9d54dbe9..a2258128ca 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -734,23 +734,31 @@ mct-container {
 @media screen and (max-width: 800px) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     left: -150px; } }
 
 @media screen and (max-width: 800px) {
-  /* line 32, ../sass/mobile/_layout.scss */
+  /* line 33, ../sass/mobile/_layout.scss */
   .holder-show {
-    left: -150px; } }
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 0px; } }
 
 @media screen and (max-width: 514px) {
-  /* line 38, ../sass/mobile/_layout.scss */
+  /* line 40, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 38, ../sass/mobile/_layout.scss */
+  /* line 40, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 38, ../sass/mobile/_layout.scss */
+  /* line 40, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index d8ab1b3d02..797018c7e0 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -25,12 +25,14 @@
 
 .holder-hide {
     @include phoneandtablet {
+        @include transition-duration(.2s);
         left: -150px;
     }
 }
 
 .holder-show {
     @include phoneandtablet {
+        @include transition-duration(.2s);
         left: 0px;
     } 
 }
diff --git a/platform/commonUI/general/src/controllers/TreeMenuController.js b/platform/commonUI/general/src/controllers/TreeMenuController.js
index 5d951bb4ad..13ec491657 100644
--- a/platform/commonUI/general/src/controllers/TreeMenuController.js
+++ b/platform/commonUI/general/src/controllers/TreeMenuController.js
@@ -34,7 +34,11 @@ define(
                         document.getElementById("myElement").className =
                             document.getElementById("myElement")
                             .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
+                        document.getElementById("myElement").className += " holder-show";
                     } else {
+                        document.getElementById("myElement").className =
+                            document.getElementById("myElement")
+                            .className.replace(/(?:^|\s)holder-show(?!\S)/g, '');
                         document.getElementById("myElement").className += " holder-hide";
                     }
                     

From 7974f33781c166a1b14a91b9581b55685c8545e2 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Wed, 8 Jul 2015 16:28:40 -0700
Subject: [PATCH 016/266] [Mobile] Phone

Adjusted to differentiate
phones and tablets.
---
 .../general/res/css/theme-espresso.css         | 18 +++++++++++++-----
 .../general/res/sass/mobile/_layout.scss       |  8 ++++++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index a2258128ca..a8942f1d28 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,7 +731,15 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 514px) {
+  /* line 26, ../sass/mobile/_layout.scss */
+  .holder-hide {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: -108px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -741,7 +749,7 @@ mct-container {
     left: -150px; } }
 
 @media screen and (max-width: 800px) {
-  /* line 33, ../sass/mobile/_layout.scss */
+  /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -750,15 +758,15 @@ mct-container {
     left: 0px; } }
 
 @media screen and (max-width: 514px) {
-  /* line 40, ../sass/mobile/_layout.scss */
+  /* line 44, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 40, ../sass/mobile/_layout.scss */
+  /* line 44, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 40, ../sass/mobile/_layout.scss */
+  /* line 44, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 797018c7e0..b7bb8e8297 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,10 +24,14 @@
 // NOTE: Added to adjust the browse folder tree list view
 
 .holder-hide {
-    @include phoneandtablet {
+    @include phone {
+        @include transition-duration(.2s);
+        left: -108px;
+    }
+    @include tablet {
         @include transition-duration(.2s);
         left: -150px;
-    }
+    }     
 }
 
 .holder-show {

From b9371ea03dfa7f0826af5ef9a9f16025de8f81dc Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 10:28:45 -0700
Subject: [PATCH 017/266] [Mobile] Moved Button

Button moved to the Browse.html
and BrowseController handles the
tree slide.
---
 .../commonUI/browse/res/templates/browse.html |  2 +
 .../res/templates/browse/object-header.html   |  5 +--
 .../commonUI/browse/src/BrowseController.js   | 16 ++++++++
 .../general/res/css/theme-espresso.css        | 40 +++++++++++++++++--
 .../general/res/sass/mobile/_layout.scss      | 29 +++++++++++++-
 5 files changed, 82 insertions(+), 10 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index a8f25caa7d..081785c491 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -41,6 +41,8 @@
                 </div>
             </div>
         </mct-split-pane>
+        <div class="btn s-btn s-icon-btn s-very-subtle key-properties button-hide" 
+                        ng-click="treeSlide()">T</div>        
     </div>
     <mct-include key="'bottombar'"></mct-include>
 </div>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 91f6df04d2..583940aaab 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -19,10 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='object-header' ng-controller="TreeMenuController as treeController">
-    <div class="btn s-btn s-icon-btn s-very-subtle key-properties" ng-click="treeController.toggle()">
-    T
-    </div>
+<div class='object-header object-header-mobile'>
 	<span class="label s-label">
 	    <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
 	    <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 3ec38057fc..fd18e385ab 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -140,6 +140,22 @@ define(
             $scope.treeModel = {
                 selectedObject: navigationService.getNavigation()
             };
+            
+            $scope.treeSlide = function () {
+                console.log("Clicked");
+                if (document.getElementById("myElement").
+                        className.match(/(?:^|\s)holder-hide(?!\S)/)) {
+                    document.getElementById("myElement").className =
+                        document.getElementById("myElement")
+                        .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
+                    document.getElementById("myElement").className += " holder-show";
+                } else {
+                    document.getElementById("myElement").className =
+                        document.getElementById("myElement")
+                        .className.replace(/(?:^|\s)holder-show(?!\S)/g, '');
+                    document.getElementById("myElement").className += " holder-hide";
+                }
+            };
 
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index a8942f1d28..24bc9d9ad2 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -748,7 +748,15 @@ mct-container {
     transition-duration: 0.2s;
     left: -150px; } }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 514px) {
+  /* line 37, ../sass/mobile/_layout.scss */
+  .holder-show {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 0px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -757,16 +765,40 @@ mct-container {
     transition-duration: 0.2s;
     left: 0px; } }
 
+/* line 48, ../sass/mobile/_layout.scss */
+.button-hide {
+  position: absolute; }
+  @media screen and (max-width: 514px) {
+    /* line 48, ../sass/mobile/_layout.scss */
+    .button-hide {
+      left: 108px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) {
+    /* line 48, ../sass/mobile/_layout.scss */
+    .button-hide {
+      left: 150px; } }
+
+/* line 59, ../sass/mobile/_layout.scss */
+.object-header-mobile {
+  position: relative; }
+  @media screen and (max-width: 514px) {
+    /* line 59, ../sass/mobile/_layout.scss */
+    .object-header-mobile {
+      left: 17px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) {
+    /* line 59, ../sass/mobile/_layout.scss */
+    .object-header-mobile {
+      left: 15px; } }
+
 @media screen and (max-width: 514px) {
-  /* line 44, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 44, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 44, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index b7bb8e8297..80c2807772 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -35,10 +35,35 @@
 }
 
 .holder-show {
-    @include phoneandtablet {
+    @include phone {
         @include transition-duration(.2s);
         left: 0px;
-    } 
+    }
+    @include tablet {
+        @include transition-duration(.2s);
+        left: 0px;
+    }     
+}
+
+.button-hide {
+    position: absolute;
+//    @include transition-duration(.2s);
+    @include phone {
+        left: 108px;
+    }
+    @include tablet {
+        left: 150px;
+    }     
+}
+
+.object-header-mobile {
+    position: relative;
+    @include phone {
+        left: 23px;
+    }
+    @include tablet {
+        left: 15px;
+    }
 }
 
 .browse-manage {

From 30efec00901d6656db66bf17661c107df835564a Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 10:53:03 -0700
Subject: [PATCH 018/266] [Mobile] Angular

Replaced document usage with
angular calls that change the ternary
op to flip the slide.
---
 .../commonUI/browse/res/templates/browse.html | 46 ++++++++++---------
 .../commonUI/browse/src/BrowseController.js   | 16 ++-----
 2 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 081785c491..f20c1a3ce1 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -19,30 +19,32 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div id="myElement" content="jquery-wrapper" class="abs holder-all browse-mode holder-hide">
-    <mct-include key="'topbar-browse'"></mct-include>
-    <div class="holder browse-area s-browse-area abs" ng-controller="BrowseController">
-        <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane browse-manage createtreebtns'>
-                <mct-representation key="'create-button'" mct-object="navigatedObject">
-                </mct-representation>
-                <div class='holder tree-holder abs'>
-                    <mct-representation key="'tree'"
-                                        mct-object="domainObject"
-                                        ng-model="treeModel">
+<div ng-controller="BrowseController">
+    <div content="jquery-wrapper" class="abs holder-all browse-mode holder-hide" ng-class="treeCl ? 'holder-show' : 'holder-hide'">
+        <mct-include key="'topbar-browse'"></mct-include>
+        <div class="holder browse-area s-browse-area abs">
+            <mct-split-pane class='contents abs' anchor='left'>
+                <div class='split-pane-component treeview pane browse-manage createtreebtns'>
+                    <mct-representation key="'create-button'" mct-object="navigatedObject">
                     </mct-representation>
+                    <div class='holder tree-holder abs'>
+                        <mct-representation key="'tree'"
+                                            mct-object="domainObject"
+                                            ng-model="treeModel">
+                        </mct-representation>
+                    </div>
                 </div>
-            </div>
-            <mct-splitter></mct-splitter>
-            <div class='split-pane-component items pane'>
-                <div class='holder abs hider-check' id='content-area'>
-                    <mct-representation mct-object="navigatedObject" key="'browse-object'">
-                    </mct-representation>
+                <mct-splitter></mct-splitter>
+                <div class='split-pane-component items pane'>
+                    <div class='holder abs hider-check' id='content-area'>
+                        <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                        </mct-representation>
+                    </div>
                 </div>
-            </div>
-        </mct-split-pane>
-        <div class="btn s-btn s-icon-btn s-very-subtle key-properties button-hide" 
-                        ng-click="treeSlide()">T</div>        
+            </mct-split-pane>
+            <div class="btn s-btn s-icon-btn s-very-subtle key-properties button-hide" 
+                            ng-click="treeSlide()">T</div>        
+        </div>
+        <mct-include key="'bottombar'"></mct-include>
     </div>
-    <mct-include key="'bottombar'"></mct-include>
 </div>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index fd18e385ab..22330e5671 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -142,18 +142,10 @@ define(
             };
             
             $scope.treeSlide = function () {
-                console.log("Clicked");
-                if (document.getElementById("myElement").
-                        className.match(/(?:^|\s)holder-hide(?!\S)/)) {
-                    document.getElementById("myElement").className =
-                        document.getElementById("myElement")
-                        .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
-                    document.getElementById("myElement").className += " holder-show";
-                } else {
-                    document.getElementById("myElement").className =
-                        document.getElementById("myElement")
-                        .className.replace(/(?:^|\s)holder-show(?!\S)/g, '');
-                    document.getElementById("myElement").className += " holder-hide";
+                if ($scope.treeCl) {
+                    $scope.treeCl = false;
+                } else if (!$scope.treeCl) {
+                    $scope.treeCl = true;
                 }
             };
 

From e47a36e7992d19bf461ecb8b5ed3720f939c8eca Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 10:55:52 -0700
Subject: [PATCH 019/266] [Mobile] Simplified

treeSlide now uses one line that
sets it to true or false simply
like a switch. So not matter what
it will either slide or not.
---
 platform/commonUI/browse/src/BrowseController.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 22330e5671..ea44af889d 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -142,11 +142,7 @@ define(
             };
             
             $scope.treeSlide = function () {
-                if ($scope.treeCl) {
-                    $scope.treeCl = false;
-                } else if (!$scope.treeCl) {
-                    $scope.treeCl = true;
-                }
+                $scope.treeCl = !$scope.treeCl;
             };
 
             // Listen for changes in navigation state.

From bd236e1cb1629d3d2f91e5fe2d986772d1f53da7 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 11:06:25 -0700
Subject: [PATCH 020/266] [Mobile] Icon

Added menu/hamburger icon.
---
 platform/commonUI/browse/res/templates/browse.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index f20c1a3ce1..37d5bf9ddb 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -42,8 +42,8 @@
                     </div>
                 </div>
             </mct-split-pane>
-            <div class="btn s-btn s-icon-btn s-very-subtle key-properties button-hide" 
-                            ng-click="treeSlide()">T</div>        
+            <div class="s-very-subtle key-properties button-hide ui-symbol" 
+                            ng-click="treeSlide()">m</div>        
         </div>
         <mct-include key="'bottombar'"></mct-include>
     </div>

From 82c8d26264eae8b1bae5ae239c0d8a8a9ac7da47 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 11:16:41 -0700
Subject: [PATCH 021/266] [Mobile]

Now does not display
the icon for the slide menu
on desktops.
---
 .../commonUI/browse/res/templates/browse.html |  2 +-
 .../general/res/css/theme-espresso.css        | 44 ++++++++++---------
 .../general/res/sass/mobile/_layout.scss      | 15 ++++---
 3 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 37d5bf9ddb..9e47cc58f8 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -42,7 +42,7 @@
                     </div>
                 </div>
             </mct-split-pane>
-            <div class="s-very-subtle key-properties button-hide ui-symbol" 
+            <div class="s-very-subtle key-properties button-hide ui-symbol mobile-menu-icon" 
                             ng-click="treeSlide()">m</div>        
         </div>
         <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 24bc9d9ad2..4844397666 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -748,15 +748,7 @@ mct-container {
     transition-duration: 0.2s;
     left: -150px; } }
 
-@media screen and (max-width: 514px) {
-  /* line 37, ../sass/mobile/_layout.scss */
-  .holder-show {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: 0px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
+@media screen and (max-width: 800px) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -765,40 +757,52 @@ mct-container {
     transition-duration: 0.2s;
     left: 0px; } }
 
-/* line 48, ../sass/mobile/_layout.scss */
+/* line 44, ../sass/mobile/_layout.scss */
 .button-hide {
-  position: absolute; }
+  position: absolute;
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s; }
   @media screen and (max-width: 514px) {
-    /* line 48, ../sass/mobile/_layout.scss */
+    /* line 44, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 108px; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 48, ../sass/mobile/_layout.scss */
+    /* line 44, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 150px; } }
 
-/* line 59, ../sass/mobile/_layout.scss */
+/* line 55, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
   @media screen and (max-width: 514px) {
-    /* line 59, ../sass/mobile/_layout.scss */
+    /* line 55, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 17px; } }
+      left: 23px; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 59, ../sass/mobile/_layout.scss */
+    /* line 55, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 15px; } }
 
+/* line 65, ../sass/mobile/_layout.scss */
+.mobile-menu-icon {
+  top: 5px; }
+  @media screen and (min-width: 801px) {
+    /* line 65, ../sass/mobile/_layout.scss */
+    .mobile-menu-icon {
+      display: none; } }
+
 @media screen and (max-width: 514px) {
-  /* line 69, ../sass/mobile/_layout.scss */
+  /* line 72, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 69, ../sass/mobile/_layout.scss */
+  /* line 72, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 69, ../sass/mobile/_layout.scss */
+  /* line 72, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 80c2807772..9e5f51a21a 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -35,11 +35,7 @@
 }
 
 .holder-show {
-    @include phone {
-        @include transition-duration(.2s);
-        left: 0px;
-    }
-    @include tablet {
+    @include phoneandtablet {
         @include transition-duration(.2s);
         left: 0px;
     }     
@@ -47,7 +43,7 @@
 
 .button-hide {
     position: absolute;
-//    @include transition-duration(.2s);
+    @include transition-duration(.2s);
     @include phone {
         left: 108px;
     }
@@ -66,6 +62,13 @@
     }
 }
 
+.mobile-menu-icon {
+    top: $interiorMargin;
+    @include desktop {
+        display: none;
+    }       
+}
+
 .browse-manage {
     @include phone {
         width: 100px;

From dfd08000f15da70d50c7ec5db2b310c15df94b94 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 13:42:07 -0700
Subject: [PATCH 022/266] [Mobile] Adjust

Adjusted the tablet amount
that the slide occurs.
---
 .../commonUI/browse/res/templates/browse.html |  2 +-
 .../general/res/css/theme-espresso.css        | 64 ++++++++++++-------
 .../general/res/sass/mobile/_layout.scss      | 34 +++++++---
 3 files changed, 69 insertions(+), 31 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 9e47cc58f8..3597b2cd43 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -42,7 +42,7 @@
                     </div>
                 </div>
             </mct-split-pane>
-            <div class="s-very-subtle key-properties button-hide ui-symbol mobile-menu-icon" 
+            <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-hide" ng-class="treeCl ? 'button-show' : 'button-hide'" 
                             ng-click="treeSlide()">m</div>        
         </div>
         <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 4844397666..963fcf0da7 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -732,24 +732,24 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (max-width: 514px) {
-  /* line 26, ../sass/mobile/_layout.scss */
+  /* line 32, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -108px; } }
+    left: -82.8%; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 26, ../sass/mobile/_layout.scss */
+  /* line 32, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -150px; } }
+    left: -38.64%; } }
 
 @media screen and (max-width: 800px) {
-  /* line 37, ../sass/mobile/_layout.scss */
+  /* line 43, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -757,7 +757,27 @@ mct-container {
     transition-duration: 0.2s;
     left: 0px; } }
 
-/* line 44, ../sass/mobile/_layout.scss */
+/* line 50, ../sass/mobile/_layout.scss */
+.button-show {
+  position: absolute; }
+  @media screen and (max-width: 514px) {
+    /* line 50, ../sass/mobile/_layout.scss */
+    .button-show {
+      -moz-transition-duration: 0.2s;
+      -o-transition-duration: 0.2s;
+      -webkit-transition-duration: 0.2s;
+      transition-duration: 0.2s;
+      left: 82.8%; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) {
+    /* line 50, ../sass/mobile/_layout.scss */
+    .button-show {
+      -moz-transition-duration: 0.2s;
+      -o-transition-duration: 0.2s;
+      -webkit-transition-duration: 0.2s;
+      transition-duration: 0.2s;
+      left: 38.64%; } }
+
+/* line 62, ../sass/mobile/_layout.scss */
 .button-hide {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -765,44 +785,44 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
   @media screen and (max-width: 514px) {
-    /* line 44, ../sass/mobile/_layout.scss */
+    /* line 62, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 108px; } }
+      left: 46%; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 44, ../sass/mobile/_layout.scss */
+    /* line 62, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 150px; } }
+      left: 28%; } }
 
-/* line 55, ../sass/mobile/_layout.scss */
+/* line 73, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
   @media screen and (max-width: 514px) {
-    /* line 55, ../sass/mobile/_layout.scss */
+    /* line 73, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 23px; } }
+      left: 4.6%; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 55, ../sass/mobile/_layout.scss */
+    /* line 73, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 15px; } }
+      left: 2.8%; } }
 
-/* line 65, ../sass/mobile/_layout.scss */
+/* line 83, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (min-width: 801px) {
-    /* line 65, ../sass/mobile/_layout.scss */
+    /* line 83, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (max-width: 514px) {
-  /* line 72, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 100px; } }
+    width: 46%; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 72, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 150px; } }
+    width: 28%; } }
 @media screen and (min-width: 801px) {
-  /* line 72, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 9e5f51a21a..6af0be9d24 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -23,14 +23,20 @@
 // style="min-width: 150px; max-width: 800px; width: 25%;"
 // NOTE: Added to adjust the browse folder tree list view
 
+$leftPhone: 46%;
+$leftTab: 28%;
+
+$hideRatioPhone: 1.8;
+$hideRatioTab: 1.38;
+
 .holder-hide {
     @include phone {
         @include transition-duration(.2s);
-        left: -108px;
+        left: (-1 * $hideRatioPhone) * $leftPhone;
     }
     @include tablet {
         @include transition-duration(.2s);
-        left: -150px;
+        left: (-1 * $hideRatioTab) * $leftTab;
     }     
 }
 
@@ -41,24 +47,36 @@
     }     
 }
 
+.button-show {
+    position: absolute;
+    @include phone {
+        @include transition-duration(.2s);
+        left: ($hideRatioPhone) * $leftPhone;
+    }
+    @include tablet {
+        @include transition-duration(.2s);
+        left: ($hideRatioTab) * $leftTab;
+    }      
+}
+
 .button-hide {
     position: absolute;
     @include transition-duration(.2s);
     @include phone {
-        left: 108px;
+        left: $leftPhone;
     }
     @include tablet {
-        left: 150px;
+        left: $leftTab;
     }     
 }
 
 .object-header-mobile {
     position: relative;
     @include phone {
-        left: 23px;
+        left: $leftPhone/10;
     }
     @include tablet {
-        left: 15px;
+        left: $leftTab/10;
     }
 }
 
@@ -71,10 +89,10 @@
 
 .browse-manage {
     @include phone {
-        width: 100px;
+        width: $leftPhone;
     }
     @include tablet {
-        width: 150px;
+        width: $leftTab;
     }    
     @include desktop {
         min-width: 150px;

From 30a4f15330ea7a0d281ae47f565af009facfff72 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 14:11:51 -0700
Subject: [PATCH 023/266] [Mobile] Adjusted

Adjusted the _layout.scss to
have a function that makes
something disappear on phone
and tablet.
---
 platform/commonUI/general/res/css/theme-espresso.css  | 11 ++++++++---
 .../commonUI/general/res/sass/mobile/_layout.scss     |  7 +++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 963fcf0da7..d72ebb4cea 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -813,16 +813,21 @@ mct-container {
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 514px) {
+@media screen and (max-width: 800px) {
   /* line 90, ../sass/mobile/_layout.scss */
+  .exclude-mobile {
+    display: none; } }
+
+@media screen and (max-width: 514px) {
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 46%; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 90, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 28%; } }
 @media screen and (min-width: 801px) {
-  /* line 90, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 6af0be9d24..589f576bdd 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -87,6 +87,13 @@ $hideRatioTab: 1.38;
     }       
 }
 
+.exclude-mobile {
+    @include phoneandtablet {
+        display: none;
+    }       
+}
+
+
 .browse-manage {
     @include phone {
         width: $leftPhone;

From 684a0e88a244a6fc86ab2462fa99904702f5db74 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 14:26:02 -0700
Subject: [PATCH 024/266] [Mobile] Constants

Added constants to the
mobile one with device
height.
---
 .../commonUI/general/res/sass/mobile/_constants.scss   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index d05edc709e..e12184a149 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -22,7 +22,13 @@
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
+$phoMaxH: 740px;
+    
 $tabMinW: 515px;
+$tabMinH: 741px;
+
 $tabMaxW: 800px;
-$compMinW: 801px; 
-$compMinH: 1281px;
+$tabMaxH: 1280px;
+
+
+$compMinW: 801px;

From 40d53f941ff8839f7856fee82da323f806dbc0a5 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 14:46:36 -0700
Subject: [PATCH 025/266] [Mobile] TreeMenuController

Removed the TreeMenuController.js file
and from the bundle. What this achieves
is already done in BrowseController.js
---
 platform/commonUI/general/bundle.json         |  7 +--
 .../src/controllers/TreeMenuController.js     | 52 -------------------
 2 files changed, 1 insertion(+), 58 deletions(-)
 delete mode 100644 platform/commonUI/general/src/controllers/TreeMenuController.js

diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 428a1f667d..8e49ca7fc1 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -84,12 +84,7 @@
                 "key": "ClickAwayController",
                 "implementation": "controllers/ClickAwayController.js",
                 "depends": [ "$scope", "$document" ]
-            },
-            {
-                "key": "TreeMenuController",
-                "implementation": "controllers/TreeMenuController.js",
-                "depends": [ "$element", "$document" ]
-            },            
+            },          
             {
                 "key": "ViewSwitcherController",
                 "implementation": "controllers/ViewSwitcherController.js",
diff --git a/platform/commonUI/general/src/controllers/TreeMenuController.js b/platform/commonUI/general/src/controllers/TreeMenuController.js
deleted file mode 100644
index 13ec491657..0000000000
--- a/platform/commonUI/general/src/controllers/TreeMenuController.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise*/
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        function TreeMenuController($scope, $document) {
-            return {
-                toggle: function () {
-                    if (document.getElementById("myElement").
-                            className.match(/(?:^|\s)holder-hide(?!\S)/)) {
-                        document.getElementById("myElement").className =
-                            document.getElementById("myElement")
-                            .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
-                        document.getElementById("myElement").className += " holder-show";
-                    } else {
-                        document.getElementById("myElement").className =
-                            document.getElementById("myElement")
-                            .className.replace(/(?:^|\s)holder-show(?!\S)/g, '');
-                        document.getElementById("myElement").className += " holder-hide";
-                    }
-                    
-                }
-            };
-
-        }
-
-        return TreeMenuController;
-    }
-);
\ No newline at end of file

From 635e1eda6971429cba3f36415417ca880f7f6017 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 15:14:36 -0700
Subject: [PATCH 026/266] [Mobile] Clean-Up

Removed unused menu button and
cleaned up treeCl to be treeClass.
---
 platform/commonUI/browse/res/templates/browse.html | 4 ++--
 platform/commonUI/browse/src/BrowseController.js   | 2 +-
 platform/commonUI/general/bundle.json              | 6 +-----
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 3597b2cd43..a0a3d9ff9f 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="BrowseController">
-    <div content="jquery-wrapper" class="abs holder-all browse-mode holder-hide" ng-class="treeCl ? 'holder-show' : 'holder-hide'">
+    <div content="jquery-wrapper" class="abs holder-all browse-mode holder-hide" ng-class="treeClass ? 'holder-show' : 'holder-hide'">
         <mct-include key="'topbar-browse'"></mct-include>
         <div class="holder browse-area s-browse-area abs">
             <mct-split-pane class='contents abs' anchor='left'>
@@ -42,7 +42,7 @@
                     </div>
                 </div>
             </mct-split-pane>
-            <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-hide" ng-class="treeCl ? 'button-show' : 'button-hide'" 
+            <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-hide" ng-class="treeClass ? 'button-show' : 'button-hide'" 
                             ng-click="treeSlide()">m</div>        
         </div>
         <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index ea44af889d..9bf040d3eb 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -142,7 +142,7 @@ define(
             };
             
             $scope.treeSlide = function () {
-                $scope.treeCl = !$scope.treeCl;
+                $scope.treeClass = !$scope.treeClass;
             };
 
             // Listen for changes in navigation state.
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 8e49ca7fc1..2093a988cd 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -43,10 +43,6 @@
                 "key": "action-button",
                 "templateUrl": "templates/controls/action-button.html"
             },
-            {
-                "key": "menu-button",
-                "templateUrl": "templates/controls/menu-button.html"
-            },
             {
                 "key": "input-filter",
                 "templateUrl": "templates/controls/input-filter.html"
@@ -84,7 +80,7 @@
                 "key": "ClickAwayController",
                 "implementation": "controllers/ClickAwayController.js",
                 "depends": [ "$scope", "$document" ]
-            },          
+            },
             {
                 "key": "ViewSwitcherController",
                 "implementation": "controllers/ViewSwitcherController.js",

From 1fb1174c0a33556fc649a7a69ee2b198e548e54d Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 15:19:29 -0700
Subject: [PATCH 027/266] [Mobile] Clean-Up

Removed unused scss constant
.
---
 platform/commonUI/general/res/sass/_constants.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index b373982a37..8a8fed19d1 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -103,7 +103,6 @@ $ovrTopBarH: 60px;
 $ovrFooterH: 40px;
 // Items
 $ueBrowseGridItemLg: 200px;
-$ueBrowseGridItemSm: 100%;
 $ueBrowseGridItemTopBarH: 20px;
 $ueBrowseGridItemBottomBarH: 30px;
 $itemPadLR: 5px;

From f079471a182231a97e49ddad217bb9d1135d0d46 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 15:31:35 -0700
Subject: [PATCH 028/266] [Mobile]

Reverted changes to scss file.
---
 .../general/res/sass/items/_item.scss         | 39 ++-----------------
 1 file changed, 4 insertions(+), 35 deletions(-)

diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index c1eb2d023f..5a5cdaf9a3 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -28,37 +28,14 @@
     .item {
         &.grid-item {
             //div { @include test() }
-            // NOTE: Sets grid item width
-            $dWid: $ueBrowseGridItemLg;
-            $dHei: $ueBrowseGridItemLg;
-            @include phone {
-                $dWid: 100%;
-                $dHei: $ueBrowseGridItemLg/4;
-                width: $dWid;
-                height: $dHei;
-            }
-            
-            @include tablet {
-                $dWid: 100%;
-                $dHei: $ueBrowseGridItemLg/2;
-                width: $dWid;
-                height: $dHei;
-            }
-            
-            @include desktop {
-                $dWid: $ueBrowseGridItemLg;
-                $dHei: $ueBrowseGridItemLg;
-                width: $dWid;
-                height: $dHei; 
-            }
-            
+            $d: $ueBrowseGridItemLg;
             $transTime: 200ms;
             @include btnSubtle($colorItemBase);
             box-sizing: border-box;
             cursor: pointer;
-            float: left;     
-            width: $dWid;
-            height: $dHei;
+            float: left;
+            height: $d;
+            width: $d;
             margin-bottom: $interiorMarginSm;
             margin-right: $interiorMarginSm;
             position: relative;
@@ -96,15 +73,7 @@
 	                padding: $interiorMargin;
                 }
             }
-//            NOTE: make icon disappear
             .item-main {
-                @include phone {
-                    display: none;
-                }
-                @include tablet {
-                    display: none;   
-                }
-                
 	            $h: $ueBrowseGridItemLg;
 	            $lh: $h * 0.8;
                 //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH;

From fcb00338645b5b1a5ad2c8e0cf5f1ab72ae8174f Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 15:32:41 -0700
Subject: [PATCH 029/266] [Mobile]

Reverted changes to css file.
---
 platform/commonUI/general/res/css/items.css | 61 +++++++--------------
 1 file changed, 19 insertions(+), 42 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 88c0791919..5f5a1a5e04 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -174,26 +174,11 @@
     box-sizing: border-box;
     cursor: pointer;
     float: left;
-    width: 200px;
     height: 200px;
+    width: 200px;
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    @media screen and (max-width: 514px) {
-      /* line 29, ../sass/items/_item.scss */
-      .items-holder .item.grid-item {
-        width: 100%;
-        height: 50px; } }
-    @media screen and (min-width: 515px) and (max-width: 800px) {
-      /* line 29, ../sass/items/_item.scss */
-      .items-holder .item.grid-item {
-        width: 100%;
-        height: 100px; } }
-    @media screen and (min-width: 801px) {
-      /* line 29, ../sass/items/_item.scss */
-      .items-holder .item.grid-item {
-        width: 200px;
-        height: 200px; } }
     /* line 153, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
@@ -209,7 +194,7 @@
     /* line 161, ../sass/_mixins.scss */
     .items-holder .item.grid-item.btn-menu .invoke-menu {
       color: #828282; }
-    /* line 65, ../sass/items/_item.scss */
+    /* line 42, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       -moz-transition-property: "color";
       -o-transition-property: "color";
@@ -223,53 +208,45 @@
       -o-transition-timing-function: ease-in-out;
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out; }
-    /* line 69, ../sass/items/_item.scss */
+    /* line 46, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: #0099cc !important; }
-    /* line 72, ../sass/items/_item.scss */
+    /* line 49, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-open {
       opacity: 1; }
-    /* line 77, ../sass/items/_item.scss */
+    /* line 54, ../sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
       top: 5px;
       right: 5px;
       bottom: 5px;
       left: 5px; }
-    /* line 81, ../sass/items/_item.scss */
+    /* line 58, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar.abs {
       bottom: auto;
       height: 20px;
       line-height: 20px;
       z-index: 5; }
-      /* line 86, ../sass/items/_item.scss */
+      /* line 63, ../sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
         width: auto; }
-        /* line 88, ../sass/items/_item.scss */
+        /* line 65, ../sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
           margin-left: 5px; }
-    /* line 93, ../sass/items/_item.scss */
+    /* line 70, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar.abs {
       top: auto;
       height: 30px;
       padding: 5px; }
-    /* line 100, ../sass/items/_item.scss */
+    /* line 76, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      @media screen and (max-width: 514px) {
-        /* line 100, ../sass/items/_item.scss */
-        .items-holder .item.grid-item .item-main {
-          display: none; } }
-      @media screen and (min-width: 515px) and (max-width: 800px) {
-        /* line 100, ../sass/items/_item.scss */
-        .items-holder .item.grid-item .item-main {
-          display: none; } }
-      /* line 113, ../sass/items/_item.scss */
+      /* line 82, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         color: #737373;
         text-align: center;
         font-size: 6em; }
-      /* line 119, ../sass/items/_item.scss */
+      /* line 88, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -289,17 +266,17 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 131, ../sass/items/_item.scss */
+    /* line 100, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       color: #cccccc;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis; }
-    /* line 139, ../sass/items/_item.scss */
+    /* line 108, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
-    /* line 142, ../sass/items/_item.scss */
+    /* line 111, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -336,16 +313,16 @@
       /* line 161, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 147, ../sass/items/_item.scss */
+      /* line 116, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 148, ../sass/items/_item.scss */
+      /* line 117, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 149, ../sass/items/_item.scss */
+      /* line 118, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 151, ../sass/items/_item.scss */
+      /* line 120, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 

From 7414275a85f570ec20ce8038a6b72c131e60a095 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 15:37:03 -0700
Subject: [PATCH 030/266] [Mobile]

Reverted changes to original scss file.
---
 platform/commonUI/general/res/sass/user-environ/_layout.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 7b63575d85..639e53af75 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -43,7 +43,6 @@
 	position: absolute;
 }
 
-
 .editor {
 	@include border-radius($basicCr * 1.5);
 }

From 3e4ae4d38db9a44a9cef92e2199de4122986aaf5 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Thu, 9 Jul 2015 15:38:53 -0700
Subject: [PATCH 031/266] [Mobile]

Reverted changes to original controller file.
---
 .../commonUI/general/src/controllers/ClickAwayController.js     | 2 --
 1 file changed, 2 deletions(-)

diff --git a/platform/commonUI/general/src/controllers/ClickAwayController.js b/platform/commonUI/general/src/controllers/ClickAwayController.js
index 88965ca497..75b1d985da 100644
--- a/platform/commonUI/general/src/controllers/ClickAwayController.js
+++ b/platform/commonUI/general/src/controllers/ClickAwayController.js
@@ -58,8 +58,6 @@ define(
                     activate();
                 }
             }
-            
-            
 
             // Callback used by the document listener. Deactivates;
             // note also $scope.$apply is invoked to indicate that

From 30bed434fe7f95f53dbf1c1b76be8b688899223f Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 09:02:46 -0700
Subject: [PATCH 032/266] [Mobile] Moved variables

Moved variables used for amount of
side bar and slide amount into the
mobile/_constants.scss file.
---
 .../general/res/css/theme-espresso.css        | 122 +++++++++---------
 .../general/res/sass/mobile/_constants.scss   |   8 +-
 .../general/res/sass/mobile/_layout.scss      |   6 -
 3 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index d72ebb4cea..a76e6e9a28 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -510,13 +510,13 @@ mct-container {
 .editor {
   position: absolute; }
 
-/* line 47, ../sass/user-environ/_layout.scss */
+/* line 46, ../sass/user-environ/_layout.scss */
 .editor {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px; }
 
-/* line 51, ../sass/user-environ/_layout.scss */
+/* line 50, ../sass/user-environ/_layout.scss */
 .contents {
   box-sizing: border-box;
   position: absolute;
@@ -524,36 +524,36 @@ mct-container {
   right: 0;
   bottom: 0;
   left: 0; }
-  /* line 59, ../sass/user-environ/_layout.scss */
+  /* line 58, ../sass/user-environ/_layout.scss */
   .contents.nomargin {
     right: 0px;
     bottom: 0px;
     left: 0px; }
 
-/* line 68, ../sass/user-environ/_layout.scss */
+/* line 67, ../sass/user-environ/_layout.scss */
 .bar .icon.major {
   margin-right: 5px; }
-/* line 71, ../sass/user-environ/_layout.scss */
+/* line 70, ../sass/user-environ/_layout.scss */
 .bar.abs, .btn-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
-/* line 75, ../sass/user-environ/_layout.scss */
+/* line 74, ../sass/user-environ/_layout.scss */
 .bar.left,
 .bar .left {
   width: 45% !important;
   right: auto !important; }
-/* line 80, ../sass/user-environ/_layout.scss */
+/* line 79, ../sass/user-environ/_layout.scss */
 .bar.right,
 .bar .right {
   width: 45% !important;
   left: auto !important;
   text-align: right; }
-  /* line 85, ../sass/user-environ/_layout.scss */
+  /* line 84, ../sass/user-environ/_layout.scss */
   .bar.right .icon.major,
   .bar .right .icon.major {
     margin-left: 15px; }
 
-/* line 92, ../sass/user-environ/_layout.scss */
+/* line 91, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -561,23 +561,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 103, ../sass/user-environ/_layout.scss */
+/* line 102, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 109, ../sass/user-environ/_layout.scss */
+/* line 108, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 112, ../sass/user-environ/_layout.scss */
+  /* line 111, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 117, ../sass/user-environ/_layout.scss */
+  /* line 116, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 122, ../sass/user-environ/_layout.scss */
+/* line 121, ../sass/user-environ/_layout.scss */
 .user-environ .bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -589,20 +589,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 127, ../sass/user-environ/_layout.scss */
+  /* line 126, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .status-holder {
     z-index: 1; }
-  /* line 131, ../sass/user-environ/_layout.scss */
+  /* line 130, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 139, ../sass/user-environ/_layout.scss */
+/* line 138, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 141, ../sass/user-environ/_layout.scss */
+  /* line 140, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -613,100 +613,100 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 149, ../sass/user-environ/_layout.scss */
+    /* line 148, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 156, ../sass/user-environ/_layout.scss */
+  /* line 155, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 162, ../sass/user-environ/_layout.scss */
+  /* line 161, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 169, ../sass/user-environ/_layout.scss */
+  /* line 168, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 175, ../sass/user-environ/_layout.scss */
+  /* line 174, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 178, ../sass/user-environ/_layout.scss */
+  /* line 177, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 181, ../sass/user-environ/_layout.scss */
+  /* line 180, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 187, ../sass/user-environ/_layout.scss */
+  /* line 186, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 190, ../sass/user-environ/_layout.scss */
+  /* line 189, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 194, ../sass/user-environ/_layout.scss */
+  /* line 193, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 200, ../sass/user-environ/_layout.scss */
+/* line 199, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 203, ../sass/user-environ/_layout.scss */
+  /* line 202, ../sass/user-environ/_layout.scss */
   .pane.treeview .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 206, ../sass/user-environ/_layout.scss */
+    /* line 205, ../sass/user-environ/_layout.scss */
     .pane.treeview .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 211, ../sass/user-environ/_layout.scss */
+  /* line 210, ../sass/user-environ/_layout.scss */
   .pane.treeview .tree-holder {
     overflow: auto;
     top: 34px; }
-  /* line 218, ../sass/user-environ/_layout.scss */
+  /* line 217, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 223, ../sass/user-environ/_layout.scss */
+  /* line 222, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 228, ../sass/user-environ/_layout.scss */
+  /* line 227, ../sass/user-environ/_layout.scss */
   .pane.edit-main .object-holder {
     top: 0; }
-  /* line 234, ../sass/user-environ/_layout.scss */
+  /* line 233, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 242, ../sass/user-environ/_layout.scss */
+/* line 241, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 245, ../sass/user-environ/_layout.scss */
+  /* line 244, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 252, ../sass/user-environ/_layout.scss */
+/* line 251, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 254, ../sass/user-environ/_layout.scss */
+  /* line 253, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 258, ../sass/user-environ/_layout.scss */
+  /* line 257, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 260, ../sass/user-environ/_layout.scss */
+    /* line 259, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 5px; }
 
-/* line 269, ../sass/user-environ/_layout.scss */
+/* line 268, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -732,7 +732,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (max-width: 514px) {
-  /* line 32, ../sass/mobile/_layout.scss */
+  /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -740,7 +740,7 @@ mct-container {
     transition-duration: 0.2s;
     left: -82.8%; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 32, ../sass/mobile/_layout.scss */
+  /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -749,7 +749,7 @@ mct-container {
     left: -38.64%; } }
 
 @media screen and (max-width: 800px) {
-  /* line 43, ../sass/mobile/_layout.scss */
+  /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -757,11 +757,11 @@ mct-container {
     transition-duration: 0.2s;
     left: 0px; } }
 
-/* line 50, ../sass/mobile/_layout.scss */
+/* line 44, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
   @media screen and (max-width: 514px) {
-    /* line 50, ../sass/mobile/_layout.scss */
+    /* line 44, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
@@ -769,7 +769,7 @@ mct-container {
       transition-duration: 0.2s;
       left: 82.8%; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 50, ../sass/mobile/_layout.scss */
+    /* line 44, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
@@ -777,7 +777,7 @@ mct-container {
       transition-duration: 0.2s;
       left: 38.64%; } }
 
-/* line 62, ../sass/mobile/_layout.scss */
+/* line 56, ../sass/mobile/_layout.scss */
 .button-hide {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -785,49 +785,49 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
   @media screen and (max-width: 514px) {
-    /* line 62, ../sass/mobile/_layout.scss */
+    /* line 56, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 46%; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 62, ../sass/mobile/_layout.scss */
+    /* line 56, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 28%; } }
 
-/* line 73, ../sass/mobile/_layout.scss */
+/* line 67, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
   @media screen and (max-width: 514px) {
-    /* line 73, ../sass/mobile/_layout.scss */
+    /* line 67, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 4.6%; } }
   @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 73, ../sass/mobile/_layout.scss */
+    /* line 67, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 2.8%; } }
 
-/* line 83, ../sass/mobile/_layout.scss */
+/* line 77, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (min-width: 801px) {
-    /* line 83, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (max-width: 800px) {
-  /* line 90, ../sass/mobile/_layout.scss */
+  /* line 84, ../sass/mobile/_layout.scss */
   .exclude-mobile {
     display: none; } }
 
 @media screen and (max-width: 514px) {
-  /* line 97, ../sass/mobile/_layout.scss */
+  /* line 91, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 46%; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 97, ../sass/mobile/_layout.scss */
+  /* line 91, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 28%; } }
 @media screen and (min-width: 801px) {
-  /* line 97, ../sass/mobile/_layout.scss */
+  /* line 91, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index e12184a149..f30a6db9c4 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -30,5 +30,11 @@ $tabMinH: 741px;
 $tabMaxW: 800px;
 $tabMaxH: 1280px;
 
-
 $compMinW: 801px;
+
+$leftPhone: 46%;
+$leftTab: 28%;
+
+$hideRatioPhone: 1.8;
+$hideRatioTab: 1.38;
+
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 589f576bdd..66917440a1 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -23,12 +23,6 @@
 // style="min-width: 150px; max-width: 800px; width: 25%;"
 // NOTE: Added to adjust the browse folder tree list view
 
-$leftPhone: 46%;
-$leftTab: 28%;
-
-$hideRatioPhone: 1.8;
-$hideRatioTab: 1.38;
-
 .holder-hide {
     @include phone {
         @include transition-duration(.2s);

From d3ae4b729f7d9c740b0d0f7bcbdd73a73362d2cc Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 10:56:48 -0700
Subject: [PATCH 033/266] [Mobile] More consistent

More consistent when moving from
landscape to portrait and
vice-versa on devices. However
still encountering issue with
the browser being resized.
---
 platform/commonUI/general/res/css/items.css   | 10 +--
 .../general/res/css/theme-espresso.css        | 87 ++++++++++---------
 .../general/res/sass/mobile/_constants.scss   | 38 ++++++--
 .../general/res/sass/mobile/_layout.scss      | 15 ++--
 .../general/res/sass/mobile/_mixins.scss      | 22 +++--
 5 files changed, 99 insertions(+), 73 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 5f5a1a5e04..27a32a1368 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -347,26 +347,26 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-width: 801px) {
+@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-width: 514px) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 51, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .bar .item-main {
     display: none; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 51, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .bar .item-main {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index a76e6e9a28..1778fb4848 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,24 +731,32 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -82.8%; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
+    left: -257px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -38.64%; } }
+    left: -400px; } }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  /* line 37, ../sass/mobile/_layout.scss */
+  .holder-show {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 0px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -757,77 +765,72 @@ mct-container {
     transition-duration: 0.2s;
     left: 0px; } }
 
-/* line 44, ../sass/mobile/_layout.scss */
+/* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-width: 514px) {
-    /* line 44, ../sass/mobile/_layout.scss */
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+    /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 82.8%; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 44, ../sass/mobile/_layout.scss */
+      left: 257px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+    /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 38.64%; } }
+      left: 400px; } }
 
-/* line 56, ../sass/mobile/_layout.scss */
+/* line 60, ../sass/mobile/_layout.scss */
 .button-hide {
   position: absolute;
   -moz-transition-duration: 0.2s;
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-width: 514px) {
-    /* line 56, ../sass/mobile/_layout.scss */
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+    /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 46%; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 56, ../sass/mobile/_layout.scss */
+      left: 257px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+    /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 28%; } }
+      left: 400px; } }
 
-/* line 67, ../sass/mobile/_layout.scss */
+/* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-width: 514px) {
-    /* line 67, ../sass/mobile/_layout.scss */
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+    /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 4.6%; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) {
-    /* line 67, ../sass/mobile/_layout.scss */
+      left: 25.7px; } }
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+    /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 2.8%; } }
+      left: 40px; } }
 
-/* line 77, ../sass/mobile/_layout.scss */
+/* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-width: 801px) {
-    /* line 77, ../sass/mobile/_layout.scss */
+  @media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+    /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 800px) {
-  /* line 84, ../sass/mobile/_layout.scss */
-  .exclude-mobile {
-    display: none; } }
-
-@media screen and (max-width: 514px) {
-  /* line 91, ../sass/mobile/_layout.scss */
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 46%; } }
-@media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 91, ../sass/mobile/_layout.scss */
+    width: 257px; } }
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 28%; } }
-@media screen and (min-width: 801px) {
-  /* line 91, ../sass/mobile/_layout.scss */
+    width: 400px; } }
+@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+  /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index f30a6db9c4..2f5ddc08e3 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -22,19 +22,39 @@
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
-$phoMaxH: 740px;
-    
-$tabMinW: 515px;
-$tabMinH: 741px;
+$phoWidPorCheck: "(max-width: #{$phoMaxW})";
+$phoWidLanCheck: "(max-height: #{$phoMaxW})";
 
+$phoMaxH: 740px;
+$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
+$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
+
+$tabMinW: 515px;
 $tabMaxW: 800px;
-$tabMaxH: 1280px;
+$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
+$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
+
+$tabMinH: 741px;
+$tabMaxH: 1024px;
+$tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
+$tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
+
+$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
+
+$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
+$phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";
+
+$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
+$tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
 
 $compMinW: 801px;
+$compMinH: 1025px;
 
-$leftPhone: 46%;
-$leftTab: 28%;
+$deskTopDevice: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 
-$hideRatioPhone: 1.8;
-$hideRatioTab: 1.38;
+$leftPhone: $phoMaxW/2;
+$leftTab: $tabMaxW/2;
+
+$hideRatioPhone: 1;
+$hideRatioTab: 1;
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 66917440a1..01f4093fcb 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -35,10 +35,14 @@
 }
 
 .holder-show {
-    @include phoneandtablet {
+    @include phone {
         @include transition-duration(.2s);
         left: 0px;
-    }     
+    }
+    @include tablet {
+        @include transition-duration(.2s);
+        left: 0px;
+    }         
 }
 
 .button-show {
@@ -81,13 +85,6 @@
     }       
 }
 
-.exclude-mobile {
-    @include phoneandtablet {
-        display: none;
-    }       
-}
-
-
 .browse-manage {
     @include phone {
         width: $leftPhone;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 97de07f14a..f23b8bc1d6 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -22,25 +22,31 @@
 
 // NOTE: Mixins for devices
 @mixin phone {
-    @media screen and (max-width: $phoMaxW) {
+    @media #{$phoneWidth},
+           #{$phoneHeight} {
         @content
     }
 }
 
 @mixin tablet {
-    @media screen and (min-width: $tabMinW) and (max-width: $tabMaxW) {
+    @media #{$tabletWidth},
+           #{$tabletHeight} {
         @content
     }
 }
 
-@mixin phoneandtablet {
-    @media screen and (max-width: $tabMaxW) {
-        @content
-    }
-}
+//@mixin phoneandtablet {
+//    @media screen and (max-width: $tabMaxW) and (orientation: portrait),
+//           screen and (max-width: $tabMaxH) and (orientation: landscape) {
+//        @content
+//    }
+//}
 
 @mixin desktop {
-    @media screen and (min-width: $compMinW) {
+    @media screen and (min-width: $compMinW) and (orientation: portrait),
+           screen and (min-device-width: $compMinW) and (orientation: portrait),
+           screen and (min-width: $compMinH) and (orientation: landscape),
+           screen and (min-device-width: $compMinH) and (orientation: landscape) {
         @content
     }
 }

From 4d9dc3624b02acf348d67d8aa812547aa4a2ef4e Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 11:12:09 -0700
Subject: [PATCH 034/266] [Mobile] Items

Item icons disappear now on
tablets and mobile devices.
Adjusted _items.scss to adjust the
icon class display for phones and
tablets.
---
 platform/commonUI/general/res/css/items.css          | 8 ++++----
 platform/commonUI/general/res/sass/mobile/_item.scss | 5 +----
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 27a32a1368..bf0f5094ce 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -363,10 +363,10 @@
     width: 200px;
     height: 200px; } }
 @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
-  /* line 51, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .bar .item-main {
+  /* line 49, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .icon {
     display: none; } }
 @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
-  /* line 51, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .bar .item-main {
+  /* line 49, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 83602b97c1..c6e9deabf5 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -46,16 +46,13 @@
                 height: $dHei; 
             }
             
-            .bar {
-//            NOTE: make icon disappear
-            .item-main {
+            .icon {
                 @include phone {
                     display: none;
                 }
                 @include tablet {
                     display: none;   
                 }
-                }
             }
         }
     }

From 5c99e469d5bba0b4da59550be4719a12fa687fc9 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 11:29:30 -0700
Subject: [PATCH 035/266] [Mobile] Device Change

Now instead of min-width, max-width,
... etc, uses the device-width/height.
This allows the devices to use the slide
menu while the browser on a desktop
consistently stays as desktop mode, no
matter if it is resized. As a result of this
the rwd is clear on phones/tablets, but not if
user resizes browser super small.
---
 platform/commonUI/general/res/css/items.css   |  8 +++----
 .../general/res/css/theme-espresso.css        | 24 +++++++++----------
 .../general/res/sass/mobile/_constants.scss   | 24 ++++++++-----------
 3 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index bf0f5094ce..0c6173a646 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -347,12 +347,12 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
@@ -362,11 +362,11 @@
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1778fb4848..c2e0e022ea 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,7 +731,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -739,7 +739,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -748,7 +748,7 @@ mct-container {
     transition-duration: 0.2s;
     left: -400px; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -768,7 +768,7 @@ mct-container {
 /* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -776,7 +776,7 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -792,11 +792,11 @@ mct-container {
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 400px; } }
@@ -804,11 +804,11 @@ mct-container {
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 40px; } }
@@ -821,11 +821,11 @@ mct-container {
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 400px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 2f5ddc08e3..40a700e590 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -22,36 +22,32 @@
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
-$phoWidPorCheck: "(max-width: #{$phoMaxW})";
-$phoWidLanCheck: "(max-height: #{$phoMaxW})";
+$phoWidPorCheck: "(max-device-width: #{$phoMaxW})";
+$phoWidLanCheck: "(max-device-height: #{$phoMaxW})";
 
 $phoMaxH: 740px;
-$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
-$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
+$phoHeiPorCheck: "(max-device-height: #{$phoMaxH})";
+$phoHeiLanCheck: "(max-device-width: #{$phoMaxH})";
 
 $tabMinW: 515px;
 $tabMaxW: 800px;
-$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
-$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
+$tabWidPorCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
+$tabWidLanCheck: "(min-device-height: #{$tabMinW}) and (max-device-height: #{$tabMaxW})";
 
 $tabMinH: 741px;
 $tabMaxH: 1024px;
-$tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
-$tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
+$tabHeiPorCheck: "(min-device-height: #{$tabMinH}) and (max-device-height: #{$tabMaxH})";
+$tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabMaxH})";
 
-$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
-
-$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
+$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and (orientation: portrait)";
 $phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";
 
-$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
+$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)";
 $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
 
 $compMinW: 801px;
 $compMinH: 1025px;
 
-$deskTopDevice: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
-
 $leftPhone: $phoMaxW/2;
 $leftTab: $tabMaxW/2;
 

From 9caa603a65f5083ab4288861732751066e124be8 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 11:36:45 -0700
Subject: [PATCH 036/266] [Mobile] Device

Removes desktop mixin settings
that do not use device width and
height.
---
 platform/commonUI/general/res/css/items.css            | 2 +-
 platform/commonUI/general/res/css/theme-espresso.css   | 4 ++--
 platform/commonUI/general/res/sass/mobile/_mixins.scss | 4 +---
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 0c6173a646..b8dfaaa49c 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -357,7 +357,7 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c2e0e022ea..1bbefa9d99 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -816,7 +816,7 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+  @media screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-device-width: 1025px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -829,7 +829,7 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 400px; } }
-@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index f23b8bc1d6..3da04ae647 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -43,9 +43,7 @@
 //}
 
 @mixin desktop {
-    @media screen and (min-width: $compMinW) and (orientation: portrait),
-           screen and (min-device-width: $compMinW) and (orientation: portrait),
-           screen and (min-width: $compMinH) and (orientation: landscape),
+    @media screen and (min-device-width: $compMinW) and (orientation: portrait),
            screen and (min-device-width: $compMinH) and (orientation: landscape) {
         @content
     }

From 61e1aeb1d8e9458e05e853beed91ea59fdbd00bb Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 11:40:14 -0700
Subject: [PATCH 037/266] [Mobile] Device

Removes desktop mixin settings
that do not use device width and
height.
---
 platform/commonUI/general/res/sass/mobile/_constants.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 40a700e590..19d4da8436 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -48,6 +48,8 @@ $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orient
 $compMinW: 801px;
 $compMinH: 1025px;
 
+$compBoth: "screen and (min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
+
 $leftPhone: $phoMaxW/2;
 $leftTab: $tabMaxW/2;
 

From 4d4776e0effc7e78799559b6df736f7e65dc90d2 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 11:40:57 -0700
Subject: [PATCH 038/266] [Mobile] Device

Removes desktop mixin settings
that do not use device width and
height.
---
 platform/commonUI/general/res/css/items.css            | 2 +-
 platform/commonUI/general/res/css/theme-espresso.css   | 4 ++--
 platform/commonUI/general/res/sass/mobile/_mixins.scss | 3 +--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index b8dfaaa49c..c8554d2cde 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -357,7 +357,7 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1bbefa9d99..22c31be4de 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -816,7 +816,7 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-device-width: 1025px) and (orientation: landscape) {
+  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -829,7 +829,7 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 400px; } }
-@media screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 3da04ae647..1ca3a43851 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -43,8 +43,7 @@
 //}
 
 @mixin desktop {
-    @media screen and (min-device-width: $compMinW) and (orientation: portrait),
-           screen and (min-device-width: $compMinH) and (orientation: landscape) {
+    @media #{$compBoth} {
         @content
     }
 }

From b0c5d807e72a7c615ca49965927342865da19edb Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 11:51:56 -0700
Subject: [PATCH 039/266] [Mobile] Device

Removes splits desktop
settings into 2, one
for landscape and another
for portrait.
---
 platform/commonUI/general/res/css/items.css    |  2 +-
 .../general/res/css/theme-espresso.css         |  4 ++--
 .../general/res/sass/mobile/_constants.scss    | 18 +++++++++++++++---
 .../general/res/sass/mobile/_mixins.scss       |  3 ++-
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index c8554d2cde..6ad915844f 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -357,7 +357,7 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 22c31be4de..da94f6e1ab 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -816,7 +816,7 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) {
+  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -829,7 +829,7 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 400px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 19d4da8436..cdaa5c1836 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -42,13 +42,25 @@ $tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabM
 $phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and (orientation: portrait)";
 $phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";
 
+//$phoneBoth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck}";
+
 $tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)";
 $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
 
-$compMinW: 801px;
-$compMinH: 1025px;
+//$tabletBoth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)";
 
-$compBoth: "screen and (min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
+$compMinW: 801px;
+$compWidPorCheck: "(min-device-width: #{$compMinW})";
+$compWidLanCheck: "(min-device-height: #{$compMinW})";
+
+$compMinH: 1025px;
+$compHeiPorCheck: "(min-device-height: #{$compMinH})";
+$compHeiLanCheck: "(min-device-width: #{$compMinH})";
+
+$compWidth: "screen and #{$compWidPorCheck} and #{$compHeiPorCheck} and (orientation: portrait)";
+$compHeight: "screen and #{$compWidLanCheck} and #{$compHeiLanCheck} and (orientation: landscape)";
+
+//$compBoth: "screen and (min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 
 $leftPhone: $phoMaxW/2;
 $leftTab: $tabMaxW/2;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 1ca3a43851..58127a0c14 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -43,7 +43,8 @@
 //}
 
 @mixin desktop {
-    @media #{$compBoth} {
+    @media #{$compWidth},
+           #{$compHeight} {
         @content
     }
 }

From b7b5f87002fa5664ce15f88f824e52ecbd624ba4 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 12:16:43 -0700
Subject: [PATCH 040/266] [Mobile] Device

Adjusted Comp Constant.
---
 platform/commonUI/general/res/css/items.css   |  6 ++---
 .../general/res/css/theme-espresso.css        | 26 +++++++++----------
 .../general/res/sass/mobile/_constants.scss   |  4 +--
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 6ad915844f..0951ef0d3c 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -352,12 +352,12 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
@@ -366,7 +366,7 @@
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index da94f6e1ab..3a20d43ec3 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -739,14 +739,14 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -400px; } }
+    left: -399.5px; } }
 
 @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -776,14 +776,14 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 400px; } }
+      left: 399.5px; } }
 
 /* line 60, ../sass/mobile/_layout.scss */
 .button-hide {
@@ -796,10 +796,10 @@ mct-container {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 400px; } }
+      left: 399.5px; } }
 
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
@@ -808,15 +808,15 @@ mct-container {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 40px; } }
+      left: 39.95px; } }
 
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) {
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -825,11 +825,11 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 800px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 800px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 400px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 801px) and (min-device-width: 1025px) and (orientation: landscape) {
+    width: 399.5px; } }
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index cdaa5c1836..bd79c2c5d6 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -30,7 +30,7 @@ $phoHeiPorCheck: "(max-device-height: #{$phoMaxH})";
 $phoHeiLanCheck: "(max-device-width: #{$phoMaxH})";
 
 $tabMinW: 515px;
-$tabMaxW: 800px;
+$tabMaxW: 799px;
 $tabWidPorCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
 $tabWidLanCheck: "(min-device-height: #{$tabMinW}) and (max-device-height: #{$tabMaxW})";
 
@@ -49,7 +49,7 @@ $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orient
 
 //$tabletBoth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)";
 
-$compMinW: 801px;
+$compMinW: 800px;
 $compWidPorCheck: "(min-device-width: #{$compMinW})";
 $compWidLanCheck: "(min-device-height: #{$compMinW})";
 

From 85c6bda5c91dc35358ba8e753a9f5b7a7ebbb016 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 12:21:13 -0700
Subject: [PATCH 041/266] [Mobile] Device

Adjusted Tablet slide Constant.
---
 platform/commonUI/general/res/css/theme-espresso.css   | 10 +++++-----
 .../commonUI/general/res/sass/mobile/_constants.scss   |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 3a20d43ec3..cb399eb04c 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -746,7 +746,7 @@ mct-container {
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -399.5px; } }
+    left: -512px; } }
 
 @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
@@ -783,7 +783,7 @@ mct-container {
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 399.5px; } }
+      left: 512px; } }
 
 /* line 60, ../sass/mobile/_layout.scss */
 .button-hide {
@@ -799,7 +799,7 @@ mct-container {
   @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 399.5px; } }
+      left: 512px; } }
 
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
@@ -811,7 +811,7 @@ mct-container {
   @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 39.95px; } }
+      left: 51.2px; } }
 
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
@@ -828,7 +828,7 @@ mct-container {
 @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 399.5px; } }
+    width: 512px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index bd79c2c5d6..6e3d4f5fd7 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -63,7 +63,7 @@ $compHeight: "screen and #{$compWidLanCheck} and #{$compHeiLanCheck} and (orient
 //$compBoth: "screen and (min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 
 $leftPhone: $phoMaxW/2;
-$leftTab: $tabMaxW/2;
+$leftTab: $tabMaxH/2;
 
 $hideRatioPhone: 1;
 $hideRatioTab: 1;

From dd457f26c6b20577bf7174e6f63c7e54d699e371 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 12:32:34 -0700
Subject: [PATCH 042/266] [Mobile] Device

Added max width to tablet check.
---
 platform/commonUI/general/res/css/items.css          |  4 ++--
 platform/commonUI/general/res/css/theme-espresso.css | 12 ++++++------
 .../commonUI/general/res/sass/mobile/_constants.scss |  2 +-
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 0951ef0d3c..8ca1234189 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -352,7 +352,7 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
@@ -366,7 +366,7 @@
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index cb399eb04c..6a3638f243 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -739,7 +739,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -776,7 +776,7 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -796,7 +796,7 @@ mct-container {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 512px; } }
@@ -808,7 +808,7 @@ mct-container {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 51.2px; } }
@@ -825,7 +825,7 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 512px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 6e3d4f5fd7..f312ac8d91 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -37,7 +37,7 @@ $tabWidLanCheck: "(min-device-height: #{$tabMinW}) and (max-device-height: #{$ta
 $tabMinH: 741px;
 $tabMaxH: 1024px;
 $tabHeiPorCheck: "(min-device-height: #{$tabMinH}) and (max-device-height: #{$tabMaxH})";
-$tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabMaxH})";
+$tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabMaxH}) and (max-width: #{$tabMaxH})";
 
 $phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and (orientation: portrait)";
 $phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";

From 67890a72986655317b0cb3042158a106d3799d5d Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Fri, 10 Jul 2015 12:38:04 -0700
Subject: [PATCH 043/266] [Mobile] Test

---
 platform/commonUI/general/res/css/items.css      |  6 +++---
 .../commonUI/general/res/css/theme-espresso.css  | 16 ++++++++--------
 .../general/res/sass/mobile/_constants.scss      |  8 ++++----
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 8ca1234189..104acc4bd1 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -352,12 +352,12 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-height: 800px) and (min-device-width: 1025px) and (min-width: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
@@ -366,7 +366,7 @@
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6a3638f243..6ec675ea30 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -739,7 +739,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -776,7 +776,7 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -796,7 +796,7 @@ mct-container {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 512px; } }
@@ -808,7 +808,7 @@ mct-container {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 51.2px; } }
@@ -816,7 +816,7 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-height: 800px) and (min-device-width: 1025px) and (min-width: 1025px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -825,11 +825,11 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 512px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-height: 800px) and (min-device-width: 1025px) and (min-width: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index f312ac8d91..cf0482bfdf 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -32,12 +32,12 @@ $phoHeiLanCheck: "(max-device-width: #{$phoMaxH})";
 $tabMinW: 515px;
 $tabMaxW: 799px;
 $tabWidPorCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
-$tabWidLanCheck: "(min-device-height: #{$tabMinW}) and (max-device-height: #{$tabMaxW})";
+$tabWidLanCheck: "(min-device-height: #{$tabMinW}) and (max-device-height: #{$tabMaxW}) and (min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
 
 $tabMinH: 741px;
 $tabMaxH: 1024px;
 $tabHeiPorCheck: "(min-device-height: #{$tabMinH}) and (max-device-height: #{$tabMaxH})";
-$tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabMaxH}) and (max-width: #{$tabMaxH})";
+$tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabMaxH}) and (min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 
 $phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and (orientation: portrait)";
 $phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";
@@ -51,11 +51,11 @@ $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orient
 
 $compMinW: 800px;
 $compWidPorCheck: "(min-device-width: #{$compMinW})";
-$compWidLanCheck: "(min-device-height: #{$compMinW})";
+$compWidLanCheck: "(min-device-height: #{$compMinW}) and (min-height: #{$compMinW})";
 
 $compMinH: 1025px;
 $compHeiPorCheck: "(min-device-height: #{$compMinH})";
-$compHeiLanCheck: "(min-device-width: #{$compMinH})";
+$compHeiLanCheck: "(min-device-width: #{$compMinH}) and (min-width: #{$compMinH})";
 
 $compWidth: "screen and #{$compWidPorCheck} and #{$compHeiPorCheck} and (orientation: portrait)";
 $compHeight: "screen and #{$compWidLanCheck} and #{$compHeiLanCheck} and (orientation: landscape)";

From eec955317a39a4905bcc8c682cca349461a0a1a8 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 10 Jul 2015 12:47:00 -0700
Subject: [PATCH 044/266] revert back to

4d9dc3624b02acf348d67d8aa812547aa4a2ef4e
---
 platform/commonUI/general/res/css/items.css   | 10 ++---
 .../general/res/css/theme-espresso.css        | 38 ++++++++---------
 .../general/res/sass/mobile/_constants.scss   | 42 +++++++------------
 .../general/res/sass/mobile/_mixins.scss      |  6 ++-
 4 files changed, 44 insertions(+), 52 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 104acc4bd1..bf0f5094ce 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -347,26 +347,26 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-height: 800px) and (min-device-width: 1025px) and (min-width: 1025px) and (orientation: landscape) {
+@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6ec675ea30..1778fb4848 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,7 +731,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -739,16 +739,16 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -512px; } }
+    left: -400px; } }
 
-@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -768,7 +768,7 @@ mct-container {
 /* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -776,14 +776,14 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 512px; } }
+      left: 400px; } }
 
 /* line 60, ../sass/mobile/_layout.scss */
 .button-hide {
@@ -792,44 +792,44 @@ mct-container {
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 512px; } }
+      left: 400px; } }
 
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 51.2px; } }
+      left: 40px; } }
 
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-height: 800px) and (min-device-width: 1025px) and (min-width: 1025px) and (orientation: landscape) {
+  @media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-device-width: 514px) and (max-device-height: 740px) and (orientation: portrait), screen and (max-device-height: 514px) and (max-device-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-device-width: 515px) and (max-device-width: 799px) and (min-device-height: 741px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-device-height: 515px) and (max-device-height: 799px) and (min-width: 515px) and (max-width: 799px) and (min-device-width: 741px) and (max-device-width: 1024px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 512px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-height: 800px) and (min-height: 800px) and (min-device-width: 1025px) and (min-width: 1025px) and (orientation: landscape) {
+    width: 400px; } }
+@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index cf0482bfdf..2f5ddc08e3 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -22,48 +22,38 @@
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
-$phoWidPorCheck: "(max-device-width: #{$phoMaxW})";
-$phoWidLanCheck: "(max-device-height: #{$phoMaxW})";
+$phoWidPorCheck: "(max-width: #{$phoMaxW})";
+$phoWidLanCheck: "(max-height: #{$phoMaxW})";
 
 $phoMaxH: 740px;
-$phoHeiPorCheck: "(max-device-height: #{$phoMaxH})";
-$phoHeiLanCheck: "(max-device-width: #{$phoMaxH})";
+$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
+$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
 
 $tabMinW: 515px;
-$tabMaxW: 799px;
-$tabWidPorCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
-$tabWidLanCheck: "(min-device-height: #{$tabMinW}) and (max-device-height: #{$tabMaxW}) and (min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
+$tabMaxW: 800px;
+$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
+$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 
 $tabMinH: 741px;
 $tabMaxH: 1024px;
-$tabHeiPorCheck: "(min-device-height: #{$tabMinH}) and (max-device-height: #{$tabMaxH})";
-$tabHeiLanCheck: "(min-device-width: #{$tabMinH}) and (max-device-width: #{$tabMaxH}) and (min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
+$tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
+$tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 
-$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and (orientation: portrait)";
+$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
+
+$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
 $phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";
 
-//$phoneBoth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck}";
-
-$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)";
+$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
 $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
 
-//$tabletBoth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and (orientation: portrait)";
-
-$compMinW: 800px;
-$compWidPorCheck: "(min-device-width: #{$compMinW})";
-$compWidLanCheck: "(min-device-height: #{$compMinW}) and (min-height: #{$compMinW})";
-
+$compMinW: 801px;
 $compMinH: 1025px;
-$compHeiPorCheck: "(min-device-height: #{$compMinH})";
-$compHeiLanCheck: "(min-device-width: #{$compMinH}) and (min-width: #{$compMinH})";
 
-$compWidth: "screen and #{$compWidPorCheck} and #{$compHeiPorCheck} and (orientation: portrait)";
-$compHeight: "screen and #{$compWidLanCheck} and #{$compHeiLanCheck} and (orientation: landscape)";
-
-//$compBoth: "screen and (min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
+$deskTopDevice: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 
 $leftPhone: $phoMaxW/2;
-$leftTab: $tabMaxH/2;
+$leftTab: $tabMaxW/2;
 
 $hideRatioPhone: 1;
 $hideRatioTab: 1;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 58127a0c14..f23b8bc1d6 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -43,8 +43,10 @@
 //}
 
 @mixin desktop {
-    @media #{$compWidth},
-           #{$compHeight} {
+    @media screen and (min-width: $compMinW) and (orientation: portrait),
+           screen and (min-device-width: $compMinW) and (orientation: portrait),
+           screen and (min-width: $compMinH) and (orientation: landscape),
+           screen and (min-device-width: $compMinH) and (orientation: landscape) {
         @content
     }
 }

From 404d02ec23c788bbd5280d0e6a1c370902c748f6 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Mon, 13 Jul 2015 09:17:59 -0700
Subject: [PATCH 045/266] [Mobile] Added Constants

Re-edited constants to set min
ones for the desktop screen, that
is based on the device size.
---
 platform/commonUI/general/res/css/items.css               | 2 +-
 platform/commonUI/general/res/css/theme-espresso.css      | 4 ++--
 platform/commonUI/general/res/sass/mobile/_constants.scss | 6 +++++-
 platform/commonUI/general/res/sass/mobile/_mixins.scss    | 6 ++----
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index bf0f5094ce..9295201d2b 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -357,7 +357,7 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1778fb4848..702fb0bae7 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -816,7 +816,7 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -829,7 +829,7 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 400px; } }
-@media screen and (min-width: 801px) and (orientation: portrait), screen and (min-device-width: 801px) and (orientation: portrait), screen and (min-width: 1025px) and (orientation: landscape), screen and (min-device-width: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 2f5ddc08e3..2d968b0c82 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -50,7 +50,11 @@ $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orient
 $compMinW: 801px;
 $compMinH: 1025px;
 
-$deskTopDevice: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
+$desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
+$desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
+
+$compWidth: "screen and #{$desktopDevicePortrait} and (orientation: portrait)";
+$compHeight: "screen and #{$desktopDevicePortrait} and (orientation: landscape)";
 
 $leftPhone: $phoMaxW/2;
 $leftTab: $tabMaxW/2;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index f23b8bc1d6..58127a0c14 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -43,10 +43,8 @@
 //}
 
 @mixin desktop {
-    @media screen and (min-width: $compMinW) and (orientation: portrait),
-           screen and (min-device-width: $compMinW) and (orientation: portrait),
-           screen and (min-width: $compMinH) and (orientation: landscape),
-           screen and (min-device-width: $compMinH) and (orientation: landscape) {
+    @media #{$compWidth},
+           #{$compHeight} {
         @content
     }
 }

From 46d5a1431fc92d46378616c20bb6726e7642e5f4 Mon Sep 17 00:00:00 2001
From: Dave <shivamndave>
Date: Mon, 13 Jul 2015 09:24:01 -0700
Subject: [PATCH 046/266] [Mobile] Added Constants

Rixed mis-initialized desktop
constant
---
 platform/commonUI/general/res/css/items.css               | 2 +-
 platform/commonUI/general/res/css/theme-espresso.css      | 4 ++--
 platform/commonUI/general/res/sass/mobile/_constants.scss | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 9295201d2b..3df0f33fc2 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -357,7 +357,7 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 801px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 702fb0bae7..e79fdfb828 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -816,7 +816,7 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: landscape) {
+  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 801px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
@@ -829,7 +829,7 @@ mct-container {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 400px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: landscape) {
+@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 801px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 2d968b0c82..5e8f9a7f35 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -54,7 +54,7 @@ $desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height
 $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
 
 $compWidth: "screen and #{$desktopDevicePortrait} and (orientation: portrait)";
-$compHeight: "screen and #{$desktopDevicePortrait} and (orientation: landscape)";
+$compHeight: "screen and #{$desktopDeviceLandscape} and (orientation: landscape)";
 
 $leftPhone: $phoMaxW/2;
 $leftTab: $tabMaxW/2;

From 137a60f510801d72732e68de7ae5186fab44e0f8 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 10:16:52 -0700
Subject: [PATCH 047/266] [Mobile] Constants

Fixed constants to work for laptop.
---
 platform/commonUI/general/res/css/items.css   | 10 ++--
 .../general/res/css/theme-espresso.css        | 56 +++++++++----------
 .../general/res/sass/mobile/_constants.scss   |  8 +--
 3 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 3df0f33fc2..17d1dc03c4 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -347,26 +347,26 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 801px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1024px) and (orientation: portrait), screen and (min-device-width: 1024px) and (min-device-height: 800px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index e79fdfb828..aafa198c9e 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -114,7 +114,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -135,38 +135,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../.gem/ruby/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -731,7 +731,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -739,16 +739,16 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: -400px; } }
+    left: -399.5px; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -768,7 +768,7 @@ mct-container {
 /* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -776,14 +776,14 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
       -o-transition-duration: 0.2s;
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
-      left: 400px; } }
+      left: 399.5px; } }
 
 /* line 60, ../sass/mobile/_layout.scss */
 .button-hide {
@@ -792,44 +792,44 @@ mct-container {
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
-      left: 400px; } }
+      left: 399.5px; } }
 
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
-      left: 40px; } }
+      left: 39.95px; } }
 
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 801px) and (orientation: landscape) {
+  @media screen and (min-device-width: 800px) and (min-device-height: 1024px) and (orientation: portrait), screen and (min-device-width: 1024px) and (min-device-height: 800px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-width: 515px) and (max-width: 800px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 800px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 800px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
-    width: 400px; } }
-@media screen and (min-device-width: 801px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 801px) and (orientation: landscape) {
+    width: 399.5px; } }
+@media screen and (min-device-width: 800px) and (min-device-height: 1024px) and (orientation: portrait), screen and (min-device-width: 1024px) and (min-device-height: 800px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 5e8f9a7f35..bf19012dda 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -30,12 +30,12 @@ $phoHeiPorCheck: "(max-height: #{$phoMaxH})";
 $phoHeiLanCheck: "(max-width: #{$phoMaxH})";
 
 $tabMinW: 515px;
-$tabMaxW: 800px;
+$tabMaxW: 799px;
 $tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
 $tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 
 $tabMinH: 741px;
-$tabMaxH: 1024px;
+$tabMaxH: 1023px;
 $tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
 $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 
@@ -47,8 +47,8 @@ $phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orienta
 $tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
 $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
 
-$compMinW: 801px;
-$compMinH: 1025px;
+$compMinW: 800px;
+$compMinH: 1024px;
 
 $desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";

From 687f810475650cdb19be1f8351cfbed8ab687002 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 10:23:28 -0700
Subject: [PATCH 048/266] [Mobile] Constants

Fixed width constant to work for laptop.
---
 platform/commonUI/general/res/css/items.css   | 10 +++----
 .../general/res/css/theme-espresso.css        | 28 +++++++++----------
 .../general/res/sass/mobile/_constants.scss   |  4 +--
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 17d1dc03c4..d348a96d9a 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -347,26 +347,26 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1024px) and (orientation: portrait), screen and (min-device-width: 1024px) and (min-device-height: 800px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index aafa198c9e..7f3be73b91 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,7 +731,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -739,7 +739,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -748,7 +748,7 @@ mct-container {
     transition-duration: 0.2s;
     left: -399.5px; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -768,7 +768,7 @@ mct-container {
 /* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -776,7 +776,7 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -792,11 +792,11 @@ mct-container {
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 399.5px; } }
@@ -804,11 +804,11 @@ mct-container {
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 39.95px; } }
@@ -816,20 +816,20 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1024px) and (orientation: portrait), screen and (min-device-width: 1024px) and (min-device-height: 800px) and (orientation: landscape) {
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1023px) and (max-device-width: 799px) and (max-device-height: 1023px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1023px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1024px) and (orientation: portrait), screen and (min-device-width: 1024px) and (min-device-height: 800px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index bf19012dda..7500707a63 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -35,7 +35,7 @@ $tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
 $tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 
 $tabMinH: 741px;
-$tabMaxH: 1023px;
+$tabMaxH: 1024px;
 $tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
 $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 
@@ -48,7 +48,7 @@ $tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobil
 $tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
 
 $compMinW: 800px;
-$compMinH: 1024px;
+$compMinH: 1025px;
 
 $desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";

From 885433390e0778891a724e48a3ad02d5b24bbd27 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 10:32:58 -0700
Subject: [PATCH 049/266] [Mobile] Fix for emu and act

Adds 2 landscape conditions for tablets and
phones to check if they are in landscape, in
the actual tablet, or in an emulate of the tablet,
then it displays.
---
 platform/commonUI/general/res/css/items.css   |  8 +++----
 .../general/res/css/theme-espresso.css        | 24 +++++++++----------
 .../general/res/sass/mobile/_constants.scss   |  7 ++++--
 .../general/res/sass/mobile/_mixins.scss      |  6 +++--
 4 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index d348a96d9a..c0b691e897 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -347,12 +347,12 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
@@ -362,11 +362,11 @@
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 7f3be73b91..4ee5eb2863 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -731,7 +731,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -739,7 +739,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -748,7 +748,7 @@ mct-container {
     transition-duration: 0.2s;
     left: -399.5px; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -756,7 +756,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -768,7 +768,7 @@ mct-container {
 /* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -776,7 +776,7 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -792,11 +792,11 @@ mct-container {
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 399.5px; } }
@@ -804,11 +804,11 @@ mct-container {
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 39.95px; } }
@@ -821,11 +821,11 @@ mct-container {
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (orientation: landscape) {
+@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (orientation: landscape) {
+@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 7500707a63..afee63e8e5 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -40,12 +40,15 @@ $tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
 $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 
 $mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
+$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
 
 $phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
-$phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and (orientation: landscape)";
+$phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice} and (orientation: landscape)";
+$phoneHeightEmu: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu} and (orientation: landscape)";
 
 $tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
-$tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and (orientation: landscape)";
+$tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice} and (orientation: landscape)";
+$tabletHeightEmu: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu} and (orientation: landscape)";
 
 $compMinW: 800px;
 $compMinH: 1025px;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 58127a0c14..f71edf2c8c 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -23,14 +23,16 @@
 // NOTE: Mixins for devices
 @mixin phone {
     @media #{$phoneWidth},
-           #{$phoneHeight} {
+           #{$phoneHeight},
+           #{$phoneHeightEmu}{
         @content
     }
 }
 
 @mixin tablet {
     @media #{$tabletWidth},
-           #{$tabletHeight} {
+           #{$tabletHeight},
+           #{$tabletHeightEmu}{
         @content
     }
 }

From be757066f57f2e5ca76522353058427934077862 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 11:18:51 -0700
Subject: [PATCH 050/266] [Mobile] Desktop adjusted

Adjusted the desktop to accomodate browser
orientation changes. Done so by forgoing
checking the orientation because the
actual device can be in landscape, but it
reads orientation based on the viewport.
---
 platform/commonUI/general/res/css/forms.css   |  1 +
 platform/commonUI/general/res/css/items.css   | 11 ++---
 .../general/res/css/theme-espresso.css        | 29 +++++++------
 platform/commonUI/general/res/css/tree.css    |  1 +
 .../general/res/sass/mobile/_constants.scss   | 43 +++++++++++--------
 5 files changed, 49 insertions(+), 36 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 7644418de2..ea4af06eee 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -70,6 +70,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
+/************************** WINDOW CHECKS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index c0b691e897..ba1c8234c6 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -70,6 +70,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
+/************************** WINDOW CHECKS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -347,26 +348,26 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
   /* line 24, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 4ee5eb2863..4166dc61b5 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -71,6 +71,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
+/************************** WINDOW CHECKS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -731,7 +732,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -739,7 +740,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: -257px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
     -moz-transition-duration: 0.2s;
@@ -748,7 +749,7 @@ mct-container {
     transition-duration: 0.2s;
     left: -399.5px; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -756,7 +757,7 @@ mct-container {
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     left: 0px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 37, ../sass/mobile/_layout.scss */
   .holder-show {
     -moz-transition-duration: 0.2s;
@@ -768,7 +769,7 @@ mct-container {
 /* line 48, ../sass/mobile/_layout.scss */
 .button-show {
   position: absolute; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -776,7 +777,7 @@ mct-container {
       -webkit-transition-duration: 0.2s;
       transition-duration: 0.2s;
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
     /* line 48, ../sass/mobile/_layout.scss */
     .button-show {
       -moz-transition-duration: 0.2s;
@@ -792,11 +793,11 @@ mct-container {
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
-  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
     /* line 60, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 399.5px; } }
@@ -804,11 +805,11 @@ mct-container {
 /* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
-  @media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
     /* line 71, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 39.95px; } }
@@ -816,20 +817,20 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
-@media screen and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: portrait), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) and (orientation: landscape), screen and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) and (orientation: landscape) {
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px) and (orientation: portrait), screen and (min-device-width: 1025px) and (min-device-height: 800px) and (orientation: landscape) {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
   /* line 88, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index f0aa033ccd..6580bf26d8 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -70,6 +70,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
+/************************** WINDOW CHECKS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index afee63e8e5..e71e83f84e 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -22,42 +22,51 @@
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
-$phoWidPorCheck: "(max-width: #{$phoMaxW})";
-$phoWidLanCheck: "(max-height: #{$phoMaxW})";
-
 $phoMaxH: 740px;
-$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
-$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
 
 $tabMinW: 515px;
 $tabMaxW: 799px;
-$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
-$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 
 $tabMinH: 741px;
 $tabMaxH: 1024px;
+
+$compMinW: 800px;
+$compMinH: 1025px;
+/************************** WINDOW CHECKS FOR RWD */
+
+$phoWidPorCheck: "(max-width: #{$phoMaxW})";
+$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
+
+$phoWidLanCheck: "(max-height: #{$phoMaxW})";
+$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
+
+$tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
 $tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
+
+$tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 
 $mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
 $mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
 
-$phoneWidth: "screen and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
-$phoneHeight: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice} and (orientation: landscape)";
-$phoneHeightEmu: "screen and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu} and (orientation: landscape)";
 
-$tabletWidth: "screen and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice} and (orientation: portrait)";
-$tabletHeight: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice} and (orientation: landscape)";
-$tabletHeightEmu: "screen and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu} and (orientation: landscape)";
 
-$compMinW: 800px;
-$compMinH: 1025px;
+
+$phoneWidth: "screen and (orientation: portrait) and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice}";
+$phoneHeight: "screen and (orientation: landscape) and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice}";
+$phoneHeightEmu: "screen and (orientation: landscape) and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu}";
+
+$tabletWidth: "screen and (orientation: portrait) and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice}";
+$tabletHeight: "screen and (orientation: landscape) and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice}";
+$tabletHeightEmu: "screen and (orientation: landscape) and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu}";
+
+
 
 $desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
 
-$compWidth: "screen and #{$desktopDevicePortrait} and (orientation: portrait)";
-$compHeight: "screen and #{$desktopDeviceLandscape} and (orientation: landscape)";
+$compWidth: "screen and #{$desktopDevicePortrait}";
+$compHeight: "screen and #{$desktopDeviceLandscape}";
 
 $leftPhone: $phoMaxW/2;
 $leftTab: $tabMaxW/2;

From c0d83f9395534e6d346e2b27ea3b9173a8a3a96b Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 12:39:09 -0700
Subject: [PATCH 051/266] [Mobile] Format

Reformatted the rwd media
query rules.
---
 platform/commonUI/general/res/css/forms.css   |  1 +
 platform/commonUI/general/res/css/items.css   |  1 +
 .../general/res/css/theme-espresso.css        |  1 +
 platform/commonUI/general/res/css/tree.css    |  1 +
 .../general/res/sass/mobile/_constants.scss   | 21 +++++++++----------
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index ea4af06eee..8278e6322f 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -71,6 +71,7 @@
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** WINDOW CHECKS FOR RWD */
+/************************** WINDOWS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index ba1c8234c6..dc970e3b00 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -71,6 +71,7 @@
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** WINDOW CHECKS FOR RWD */
+/************************** WINDOWS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 4166dc61b5..6af1fbf5da 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -72,6 +72,7 @@
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** WINDOW CHECKS FOR RWD */
+/************************** WINDOWS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 6580bf26d8..525193bbdc 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -71,6 +71,7 @@
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** WINDOW CHECKS FOR RWD */
+/************************** WINDOWS FOR RWD */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index e71e83f84e..84354b4e7d 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -32,7 +32,10 @@ $tabMaxH: 1024px;
 
 $compMinW: 800px;
 $compMinH: 1025px;
+
 /************************** WINDOW CHECKS FOR RWD */
+$screenPortrait: "screen and (orientation: portrait)";
+$screenLandscape: "screen and (orientation: landscape)";
 
 $phoWidPorCheck: "(max-width: #{$phoMaxW})";
 $phoHeiPorCheck: "(max-height: #{$phoMaxH})";
@@ -49,18 +52,14 @@ $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 $mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
 $mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
 
+/************************** WINDOWS FOR RWD */
+$phoneWidth: "#{$screenPortrait} and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice}";
+$phoneHeight: "#{$screenLandscape} and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice}";
+$phoneHeightEmu: "#{$screenLandscape} and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu}";
 
-
-
-$phoneWidth: "screen and (orientation: portrait) and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice}";
-$phoneHeight: "screen and (orientation: landscape) and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice}";
-$phoneHeightEmu: "screen and (orientation: landscape) and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu}";
-
-$tabletWidth: "screen and (orientation: portrait) and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice}";
-$tabletHeight: "screen and (orientation: landscape) and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice}";
-$tabletHeightEmu: "screen and (orientation: landscape) and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu}";
-
-
+$tabletWidth: "#{$screenPortrait} and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice}";
+$tabletHeight: "#{$screenLandscape} and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice}";
+$tabletHeightEmu: "#{$screenLandscape} and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu}";
 
 $desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";

From b00eee00fc5f5bd07b3393fcdda7736fb9ffcfbd Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 13:02:57 -0700
Subject: [PATCH 052/266] [Mobile] Redefine

Renames variables to be clearer.
Breaks up constants into parts to be
cleaners and straightforward. Also
removed the ratio.
---
 platform/commonUI/general/res/css/forms.css   |  5 +--
 platform/commonUI/general/res/css/items.css   |  5 +--
 .../general/res/css/theme-espresso.css        |  5 +--
 platform/commonUI/general/res/css/tree.css    |  5 +--
 .../general/res/sass/mobile/_constants.scss   | 33 +++++++++----------
 .../general/res/sass/mobile/_layout.scss      | 20 +++++------
 .../general/res/sass/mobile/_mixins.scss      | 12 +++----
 7 files changed, 43 insertions(+), 42 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 8278e6322f..d36234d47b 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -70,8 +70,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR RWD */
-/************************** WINDOWS FOR RWD */
+/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index dc970e3b00..c1b31b9e51 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -70,8 +70,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR RWD */
-/************************** WINDOWS FOR RWD */
+/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6af1fbf5da..a5f9d5279e 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -71,8 +71,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR RWD */
-/************************** WINDOWS FOR RWD */
+/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 525193bbdc..08714e39c8 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -70,8 +70,9 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR RWD */
-/************************** WINDOWS FOR RWD */
+/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 84354b4e7d..985cae1854 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -33,33 +33,32 @@ $tabMaxH: 1024px;
 $compMinW: 800px;
 $compMinH: 1025px;
 
-/************************** WINDOW CHECKS FOR RWD */
+/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $screenPortrait: "screen and (orientation: portrait)";
 $screenLandscape: "screen and (orientation: landscape)";
 
-$phoWidPorCheck: "(max-width: #{$phoMaxW})";
-$phoHeiPorCheck: "(max-height: #{$phoMaxH})";
-
-$phoWidLanCheck: "(max-height: #{$phoMaxW})";
-$phoHeiLanCheck: "(max-width: #{$phoMaxH})";
+$phonePortraitCheck: "(max-width: #{$phoMaxW}) and (max-height: #{$phoMaxH})";
+$phoneLandscapeCheck: "(max-height: #{$phoMaxW}) and (max-width: #{$phoMaxH})";
 
 $tabWidPorCheck: "(min-width: #{$tabMinW}) and (max-width: #{$tabMaxW})";
 $tabHeiPorCheck: "(min-height: #{$tabMinH}) and (max-height: #{$tabMaxH})";
+$tabletPortraitCheck: "#{$tabWidPorCheck} and #{$tabHeiPorCheck}";
 
 $tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
+$tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}";
 
 $mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
 $mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
 
-/************************** WINDOWS FOR RWD */
-$phoneWidth: "#{$screenPortrait} and #{$phoWidPorCheck} and #{$phoHeiPorCheck} and #{$mobileDevice}";
-$phoneHeight: "#{$screenLandscape} and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDevice}";
-$phoneHeightEmu: "#{$screenLandscape} and #{$phoWidLanCheck} and #{$phoHeiLanCheck} and #{$mobileDeviceEmu}";
+/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+$phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}";
+$phoneLandscape: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDevice}";
+$phoneLandscapeEmu: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDeviceEmu}";
 
-$tabletWidth: "#{$screenPortrait} and #{$tabWidPorCheck} and #{$tabHeiPorCheck} and #{$mobileDevice}";
-$tabletHeight: "#{$screenLandscape} and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDevice}";
-$tabletHeightEmu: "#{$screenLandscape} and #{$tabWidLanCheck} and #{$tabHeiLanCheck} and #{$mobileDeviceEmu}";
+$tabletPortrait: "#{$screenPortrait} and #{$tabletPortraitCheck} and #{$mobileDevice}";
+$tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDevice}";
+$tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}";
 
 $desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
 $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
@@ -67,9 +66,7 @@ $desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-heigh
 $compWidth: "screen and #{$desktopDevicePortrait}";
 $compHeight: "screen and #{$desktopDeviceLandscape}";
 
-$leftPhone: $phoMaxW/2;
-$leftTab: $tabMaxW/2;
-
-$hideRatioPhone: 1;
-$hideRatioTab: 1;
+/************************** DEVICE PARAMETERS FOR MENUS */
 
+$phoneSlideMenuWidth: $phoMaxW/2;
+$tabletSlideMenuWidth: $tabMaxW/2;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 01f4093fcb..fa8e6ddff1 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -26,11 +26,11 @@
 .holder-hide {
     @include phone {
         @include transition-duration(.2s);
-        left: (-1 * $hideRatioPhone) * $leftPhone;
+        left: (-1) * $phoneSlideMenuWidth;
     }
     @include tablet {
         @include transition-duration(.2s);
-        left: (-1 * $hideRatioTab) * $leftTab;
+        left: (-1) * $tabletSlideMenuWidth;
     }     
 }
 
@@ -49,11 +49,11 @@
     position: absolute;
     @include phone {
         @include transition-duration(.2s);
-        left: ($hideRatioPhone) * $leftPhone;
+        left: $phoneSlideMenuWidth;
     }
     @include tablet {
         @include transition-duration(.2s);
-        left: ($hideRatioTab) * $leftTab;
+        left: $tabletSlideMenuWidth;
     }      
 }
 
@@ -61,20 +61,20 @@
     position: absolute;
     @include transition-duration(.2s);
     @include phone {
-        left: $leftPhone;
+        left: $phoneSlideMenuWidth;
     }
     @include tablet {
-        left: $leftTab;
+        left: $tabletSlideMenuWidth;
     }     
 }
 
 .object-header-mobile {
     position: relative;
     @include phone {
-        left: $leftPhone/10;
+        left: $phoneSlideMenuWidth/10;
     }
     @include tablet {
-        left: $leftTab/10;
+        left: $tabletSlideMenuWidth/10;
     }
 }
 
@@ -87,10 +87,10 @@
 
 .browse-manage {
     @include phone {
-        width: $leftPhone;
+        width: $phoneSlideMenuWidth;
     }
     @include tablet {
-        width: $leftTab;
+        width: $tabletSlideMenuWidth;
     }    
     @include desktop {
         min-width: 150px;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index f71edf2c8c..c92708fe73 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -22,17 +22,17 @@
 
 // NOTE: Mixins for devices
 @mixin phone {
-    @media #{$phoneWidth},
-           #{$phoneHeight},
-           #{$phoneHeightEmu}{
+    @media #{$phonePortrait},
+           #{$phoneLandscape},
+           #{$phoneLandscapeEmu}{
         @content
     }
 }
 
 @mixin tablet {
-    @media #{$tabletWidth},
-           #{$tabletHeight},
-           #{$tabletHeightEmu}{
+    @media #{$tabletPortrait},
+           #{$tabletLandscape},
+           #{$tabletLandscapeEmu}{
         @content
     }
 }

From 7d09df9a852b2631d73ca9fd30ef5bdd4c2df057 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 13:11:27 -0700
Subject: [PATCH 053/266] [Mobile] Constants

Re-edited media query constants
to be cleaner and consistent.
---
 platform/commonUI/general/res/css/forms.css   |  4 ++--
 platform/commonUI/general/res/css/items.css   |  4 ++--
 .../general/res/css/theme-espresso.css        |  4 ++--
 platform/commonUI/general/res/css/tree.css    |  4 ++--
 .../general/res/sass/mobile/_constants.scss   | 19 +++++++++----------
 .../general/res/sass/mobile/_mixins.scss      | 11 ++---------
 6 files changed, 19 insertions(+), 27 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index d36234d47b..2630143bbf 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -70,8 +70,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index c1b31b9e51..0706514394 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -70,8 +70,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index a5f9d5279e..9c73cba594 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -71,8 +71,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 08714e39c8..b9e4f360ba 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -70,8 +70,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /************************** WINDOW DIMENSIONS FOR RWD */
-/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 985cae1854..564e8169f5 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -33,10 +33,13 @@ $tabMaxH: 1024px;
 $compMinW: 800px;
 $compMinH: 1025px;
 
-/************************** WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $screenPortrait: "screen and (orientation: portrait)";
 $screenLandscape: "screen and (orientation: landscape)";
 
+$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
+$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
+
 $phonePortraitCheck: "(max-width: #{$phoMaxW}) and (max-height: #{$phoMaxH})";
 $phoneLandscapeCheck: "(max-height: #{$phoMaxW}) and (max-width: #{$phoMaxH})";
 
@@ -48,10 +51,10 @@ $tabWidLanCheck: "(min-height: #{$tabMinW}) and (max-height: #{$tabMaxW})";
 $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 $tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}";
 
-$mobileDevice: "(max-device-width: #{$tabMaxW}) and (max-device-height: #{$tabMaxH})";
-$mobileDeviceEmu: "(max-device-width: #{$tabMaxH}) and (max-device-height: #{$tabMaxW})";
+$desktopPortraitCheck: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
+$desktopLanscapeCheck: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
 
-/************************** WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}";
 $phoneLandscape: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDevice}";
 $phoneLandscapeEmu: "#{$screenLandscape} and #{$phoneLandscapeCheck} and #{$mobileDeviceEmu}";
@@ -60,13 +63,9 @@ $tabletPortrait: "#{$screenPortrait} and #{$tabletPortraitCheck} and #{$mobileDe
 $tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDevice}";
 $tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}";
 
-$desktopDevicePortrait: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
-$desktopDeviceLandscape: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
-
-$compWidth: "screen and #{$desktopDevicePortrait}";
-$compHeight: "screen and #{$desktopDeviceLandscape}";
+$desktopPortrait: "screen and #{$desktopPortraitCheck}";
+$desktopLandscape: "screen and #{$desktopLanscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS */
-
 $phoneSlideMenuWidth: $phoMaxW/2;
 $tabletSlideMenuWidth: $tabMaxW/2;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index c92708fe73..b1e868add5 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -37,16 +37,9 @@
     }
 }
 
-//@mixin phoneandtablet {
-//    @media screen and (max-width: $tabMaxW) and (orientation: portrait),
-//           screen and (max-width: $tabMaxH) and (orientation: landscape) {
-//        @content
-//    }
-//}
-
 @mixin desktop {
-    @media #{$compWidth},
-           #{$compHeight} {
+    @media #{$desktopPortrait},
+           #{$desktopLandscape} {
         @content
     }
 }

From edcafc5835ef4f47749604ca8f319b5ca942cee9 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 13:56:44 -0700
Subject: [PATCH 054/266] [Mobile] Remove Bar

Remove the splitter bar on mobile
and tablets.
---
 .../commonUI/browse/res/templates/browse.html |  2 +-
 .../general/res/css/theme-espresso.css        | 23 ++++++++++++++++---
 .../general/res/sass/mobile/_layout.scss      | 15 ++++++++++++
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index a0a3d9ff9f..4ea43b7b06 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -34,7 +34,7 @@
                         </mct-representation>
                     </div>
                 </div>
-                <mct-splitter></mct-splitter>
+                <mct-splitter class="mobile-hide"></mct-splitter>
                 <div class='split-pane-component items pane'>
                     <div class='holder abs hider-check' id='content-area'>
                         <mct-representation mct-object="navigatedObject" key="'browse-object'">
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 9c73cba594..7d816ef342 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -819,21 +819,38 @@ mct-container {
 /* line 81, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
+  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 81, ../sass/mobile/_layout.scss */
+    .mobile-menu-icon {
+      font-size: 125%; } }
+  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 81, ../sass/mobile/_layout.scss */
+    .mobile-menu-icon {
+      font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 81, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 88, ../sass/mobile/_layout.scss */
+  /* line 94, ../sass/mobile/_layout.scss */
+  .mobile-hide {
+    display: none; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 94, ../sass/mobile/_layout.scss */
+  .mobile-hide {
+    display: none; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 103, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 88, ../sass/mobile/_layout.scss */
+  /* line 103, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 88, ../sass/mobile/_layout.scss */
+  /* line 103, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index fa8e6ddff1..d30676b84a 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -80,11 +80,26 @@
 
 .mobile-menu-icon {
     top: $interiorMargin;
+    @include phone {
+        font-size: 125%;
+    }
+    @include tablet {
+        font-size: 175%;
+    }      
     @include desktop {
         display: none;
     }       
 }
 
+.mobile-hide {
+    @include phone {
+        display: none;
+    }
+    @include tablet {
+        display: none;
+    }      
+}
+
 .browse-manage {
     @include phone {
         width: $phoneSlideMenuWidth;

From 9a7bbd92bd57fe94954d2c7b73259dd37d629712 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 13 Jul 2015 17:04:14 -0700
Subject: [PATCH 055/266] [Mobile] Cleaned up

Cleaned up the transistion css to
be more DRY.
---
 .../general/res/css/theme-espresso.css        | 84 +++++++++----------
 .../general/res/sass/mobile/_layout.scss      |  8 +-
 2 files changed, 42 insertions(+), 50 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 7d816ef342..b9422ddc62 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -751,44 +751,38 @@ mct-container {
     transition-duration: 0.2s;
     left: -399.5px; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 37, ../sass/mobile/_layout.scss */
-  .holder-show {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: 0px; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 37, ../sass/mobile/_layout.scss */
-  .holder-show {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: 0px; } }
-
-/* line 48, ../sass/mobile/_layout.scss */
-.button-show {
-  position: absolute; }
+/* line 37, ../sass/mobile/_layout.scss */
+.holder-show {
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 48, ../sass/mobile/_layout.scss */
+    /* line 37, ../sass/mobile/_layout.scss */
+    .holder-show {
+      left: 0px; } }
+  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 37, ../sass/mobile/_layout.scss */
+    .holder-show {
+      left: 0px; } }
+
+/* line 47, ../sass/mobile/_layout.scss */
+.button-show {
+  position: absolute;
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s; }
+  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 47, ../sass/mobile/_layout.scss */
     .button-show {
-      -moz-transition-duration: 0.2s;
-      -o-transition-duration: 0.2s;
-      -webkit-transition-duration: 0.2s;
-      transition-duration: 0.2s;
       left: 257px; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 48, ../sass/mobile/_layout.scss */
+    /* line 47, ../sass/mobile/_layout.scss */
     .button-show {
-      -moz-transition-duration: 0.2s;
-      -o-transition-duration: 0.2s;
-      -webkit-transition-duration: 0.2s;
-      transition-duration: 0.2s;
       left: 399.5px; } }
 
-/* line 60, ../sass/mobile/_layout.scss */
+/* line 58, ../sass/mobile/_layout.scss */
 .button-hide {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -796,61 +790,61 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 60, ../sass/mobile/_layout.scss */
+    /* line 58, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 257px; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 60, ../sass/mobile/_layout.scss */
+    /* line 58, ../sass/mobile/_layout.scss */
     .button-hide {
       left: 399.5px; } }
 
-/* line 71, ../sass/mobile/_layout.scss */
+/* line 69, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 71, ../sass/mobile/_layout.scss */
+    /* line 69, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 71, ../sass/mobile/_layout.scss */
+    /* line 69, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 39.95px; } }
 
-/* line 81, ../sass/mobile/_layout.scss */
+/* line 79, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 81, ../sass/mobile/_layout.scss */
+    /* line 79, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 81, ../sass/mobile/_layout.scss */
+    /* line 79, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 81, ../sass/mobile/_layout.scss */
+    /* line 79, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 94, ../sass/mobile/_layout.scss */
+  /* line 92, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 94, ../sass/mobile/_layout.scss */
+  /* line 92, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 103, ../sass/mobile/_layout.scss */
+  /* line 101, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 103, ../sass/mobile/_layout.scss */
+  /* line 101, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 103, ../sass/mobile/_layout.scss */
+  /* line 101, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index d30676b84a..04f8898a72 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -35,24 +35,22 @@
 }
 
 .holder-show {
+    @include transition-duration(.2s);
     @include phone {
-        @include transition-duration(.2s);
         left: 0px;
     }
     @include tablet {
-        @include transition-duration(.2s);
         left: 0px;
     }         
 }
 
 .button-show {
     position: absolute;
-    @include phone {
-        @include transition-duration(.2s);
+    @include transition-duration(.2s);
+    @include phone {        
         left: $phoneSlideMenuWidth;
     }
     @include tablet {
-        @include transition-duration(.2s);
         left: $tabletSlideMenuWidth;
     }      
 }

From 6f07a21bb8c5768f9bf0dfb2a39b51f84ce013fc Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 14 Jul 2015 13:10:28 -0700
Subject: [PATCH 056/266] [Mobile] Clean-up

Cleaned up scss and also, the
edit/new tab/full screen buttons are
hidden in mobile, temporarily.
---
 .../browse/res/templates/browse-object.html   |  4 +-
 .../commonUI/browse/res/templates/browse.html |  2 +-
 .../general/res/css/theme-espresso.css        | 44 ++++++-------------
 .../general/res/sass/mobile/_layout.scss      | 13 +-----
 4 files changed, 18 insertions(+), 45 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 6730d5a186..7a5bd09470 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -25,8 +25,8 @@
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
-
-        <div class="btn-bar right abs">
+        <!-- For now, on mobile the button bar is hidden-->
+        <div class="btn-bar right abs mobile-hide">
             <mct-representation key="'action-group'"
                                 mct-object="domainObject"
                                 parameters="{ category: 'view-control' }">
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 4ea43b7b06..730cffbeef 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -42,7 +42,7 @@
                     </div>
                 </div>
             </mct-split-pane>
-            <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-hide" ng-class="treeClass ? 'button-show' : 'button-hide'" 
+            <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
                             ng-click="treeSlide()">m</div>        
         </div>
         <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index b9422ddc62..1eea14670f 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -767,7 +767,7 @@ mct-container {
       left: 0px; } }
 
 /* line 47, ../sass/mobile/_layout.scss */
-.button-show {
+.button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
   -o-transition-duration: 0.2s;
@@ -775,76 +775,60 @@ mct-container {
   transition-duration: 0.2s; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
     /* line 47, ../sass/mobile/_layout.scss */
-    .button-show {
+    .button-pos {
       left: 257px; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
     /* line 47, ../sass/mobile/_layout.scss */
-    .button-show {
+    .button-pos {
       left: 399.5px; } }
 
 /* line 58, ../sass/mobile/_layout.scss */
-.button-hide {
-  position: absolute;
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s; }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 58, ../sass/mobile/_layout.scss */
-    .button-hide {
-      left: 257px; } }
-  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 58, ../sass/mobile/_layout.scss */
-    .button-hide {
-      left: 399.5px; } }
-
-/* line 69, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 69, ../sass/mobile/_layout.scss */
+    /* line 58, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 25.7px; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 69, ../sass/mobile/_layout.scss */
+    /* line 58, ../sass/mobile/_layout.scss */
     .object-header-mobile {
       left: 39.95px; } }
 
-/* line 79, ../sass/mobile/_layout.scss */
+/* line 68, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 79, ../sass/mobile/_layout.scss */
+    /* line 68, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 79, ../sass/mobile/_layout.scss */
+    /* line 68, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 79, ../sass/mobile/_layout.scss */
+    /* line 68, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 92, ../sass/mobile/_layout.scss */
+  /* line 81, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 92, ../sass/mobile/_layout.scss */
+  /* line 81, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 101, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 101, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 101, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 04f8898a72..26b677688d 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -44,7 +44,7 @@
     }         
 }
 
-.button-show {
+.button-pos {
     position: absolute;
     @include transition-duration(.2s);
     @include phone {        
@@ -55,17 +55,6 @@
     }      
 }
 
-.button-hide {
-    position: absolute;
-    @include transition-duration(.2s);
-    @include phone {
-        left: $phoneSlideMenuWidth;
-    }
-    @include tablet {
-        left: $tabletSlideMenuWidth;
-    }     
-}
-
 .object-header-mobile {
     position: relative;
     @include phone {

From 0f89e98a718f7744bc35f8fb990854b65a1baa64 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 14 Jul 2015 14:14:12 -0700
Subject: [PATCH 057/266] [Mobile] Clean up

Cleaned up layout and added phone only hider.
Also added tree.scss file, where all tree
node classes will be placed.
---
 platform/commonUI/general/res/css/theme-espresso.css   | 9 +++++++--
 platform/commonUI/general/res/sass/mobile/_layout.scss | 8 +++++++-
 platform/commonUI/general/res/sass/mobile/_tree.scss   | 0
 3 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 platform/commonUI/general/res/sass/mobile/_tree.scss

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1eea14670f..05ffc921fc 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -821,14 +821,19 @@ mct-container {
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 90, ../sass/mobile/_layout.scss */
+  .phone-hide {
+    display: none; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 257px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 90, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 399.5px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 90, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 26b677688d..9cc09d22b6 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -84,7 +84,13 @@
     }
     @include tablet {
         display: none;
-    }      
+    }
+}
+
+.phone-hide {
+    @include phone {
+        display: none;
+    }
 }
 
 .browse-manage {
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
new file mode 100644
index 0000000000..e69de29bb2

From 54b6cd110004c2fe43115685a27882c50f790d22 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 15 Jul 2015 13:28:42 -0700
Subject: [PATCH 058/266] [Mobile] Debug

Added debug statement to print
to console.
---
 platform/commonUI/browse/src/BrowseController.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 9bf040d3eb..b05793b15f 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -143,6 +143,8 @@ define(
             
             $scope.treeSlide = function () {
                 $scope.treeClass = !$scope.treeClass;
+                // FUTURE: Remove before merge
+                console.log($scope.treeClass ? "browse-showtree" : "browse-hidetree");
             };
 
             // Listen for changes in navigation state.

From ee35976c9250ceaeab7659ef1b18dc926c8bf0c2 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 15 Jul 2015 13:30:06 -0700
Subject: [PATCH 059/266] [Mobile] Tree Mobile

Added mobile/_tree.scss and edited
normal tree.scss to accomodate for
future sass that adjusts the tree
menu.
---
 platform/commonUI/general/res/css/tree.css    | 22 ++++++++++++++
 .../general/res/sass/mobile/_tree.scss        | 30 +++++++++++++++++++
 platform/commonUI/general/res/sass/tree.scss  |  3 +-
 3 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index b9e4f360ba..aba2210cf6 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -284,3 +284,25 @@ ul.tree {
   /* line 144, ../sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index e69de29bb2..673ff6c066 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -0,0 +1,30 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+//mobile-flat-list {
+//	// For lists of tree-items that are flat. Remove margin, etc. normally needed for the expansion arrow.
+//	.tree-item {
+//        .label {
+//			left: -100px;
+//		}
+//	}
+//}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/tree.scss b/platform/commonUI/general/res/sass/tree.scss
index 5cb5d6fe1f..4af1deb6ac 100644
--- a/platform/commonUI/general/res/sass/tree.scss
+++ b/platform/commonUI/general/res/sass/tree.scss
@@ -29,4 +29,5 @@
 @import "mobile/constants";
 @import "mixins";
 @import "mobile/mixins";
-@import "tree/tree";
\ No newline at end of file
+@import "tree/tree";
+@import "mobile/tree";
\ No newline at end of file

From 4b5540830b4e975fb1b506e02192143435bbefe3 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 15 Jul 2015 16:49:16 -0700
Subject: [PATCH 060/266] [Mobile] Slide menu

Rouch menu using important to
overwrite splitter setting of
amounts. Also has default values
for now for all devices.
---
 .../commonUI/browse/res/templates/browse.html |  27 +++--
 .../general/res/css/theme-espresso.css        | 114 ++++++------------
 .../general/res/sass/mobile/_layout.scss      |  85 ++++++-------
 .../res/sass/user-environ/_layout.scss        |   1 +
 4 files changed, 99 insertions(+), 128 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 730cffbeef..1cecf97b3f 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -19,12 +19,18 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
+
 <div ng-controller="BrowseController">
-    <div content="jquery-wrapper" class="abs holder-all browse-mode holder-hide" ng-class="treeClass ? 'holder-show' : 'holder-hide'">
+    <div content="jquery-wrapper" class="abs holder-all browse-mode">
         <mct-include key="'topbar-browse'"></mct-include>
-        <div class="holder browse-area s-browse-area abs">
-            <mct-split-pane class='contents abs' anchor='left'>
-                <div class='split-pane-component treeview pane browse-manage createtreebtns'>
+        
+        <!-- WRAPPER CLASS IS HERE-->
+        <!-- NG-CLASS HERE TO SWITCH THE PARENT CLASS FOR pane-special's left and right-->
+        <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'"  anchor='left'>
+            <mct-split-pane class='contents abs'>
+            
+                <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
+                <div class='split-pane-component treeview pane pane-special left'>  
                     <mct-representation key="'create-button'" mct-object="navigatedObject">
                     </mct-representation>
                     <div class='holder tree-holder abs'>
@@ -34,16 +40,19 @@
                         </mct-representation>
                     </div>
                 </div>
+                
                 <mct-splitter class="mobile-hide"></mct-splitter>
-                <div class='split-pane-component items pane'>
-                    <div class='holder abs hider-check' id='content-area'>
+                
+                    <!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example-->
+                    <div class='split-pane-component items pane pane-special right'>
+                    <div class='holder abs' id='content-area'>
                         <mct-representation mct-object="navigatedObject" key="'browse-object'">
                         </mct-representation>
                     </div>
-                </div>
+                    <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
+                            ng-click="treeSlide()">m</div>                        
+                </div>                     
             </mct-split-pane>
-            <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
-                            ng-click="treeSlide()">m</div>        
         </div>
         <mct-include key="'bottombar'"></mct-include>
     </div>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 05ffc921fc..e9d9e05a30 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -698,18 +698,18 @@ mct-container {
 /* line 251, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 253, ../sass/user-environ/_layout.scss */
+  /* line 254, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 257, ../sass/user-environ/_layout.scss */
+  /* line 258, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 259, ../sass/user-environ/_layout.scss */
+    /* line 260, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 5px; }
 
-/* line 268, ../sass/user-environ/_layout.scss */
+/* line 269, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -734,111 +734,77 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 26, ../sass/mobile/_layout.scss */
-  .holder-hide {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: -257px; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 26, ../sass/mobile/_layout.scss */
-  .holder-hide {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: -399.5px; } }
+/* line 25, ../sass/mobile/_layout.scss */
+.browse-wrapper,
+.pane-special {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  left: 0;
+  white-space: nowrap;
+  height: 100%; }
 
-/* line 37, ../sass/mobile/_layout.scss */
-.holder-show {
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s; }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 37, ../sass/mobile/_layout.scss */
-    .holder-show {
-      left: 0px; } }
-  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 37, ../sass/mobile/_layout.scss */
-    .holder-show {
-      left: 0px; } }
+/* line 36, ../sass/mobile/_layout.scss */
+.browse-hidetree .pane-special.left {
+  display: none !important; }
+/* line 43, ../sass/mobile/_layout.scss */
+.browse-hidetree .pane-special.right {
+  width: auto !important;
+  left: 0px !important; }
 
-/* line 47, ../sass/mobile/_layout.scss */
+/* line 51, ../sass/mobile/_layout.scss */
+.browse-showtree .pane-special.left {
+  display: block !important;
+  width: 300px !important;
+  right: auto !important; }
+/* line 58, ../sass/mobile/_layout.scss */
+.browse-showtree .pane-special.right {
+  left: 300px !important;
+  width: auto !important; }
+
+/* line 68, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
   -o-transition-duration: 0.2s;
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 47, ../sass/mobile/_layout.scss */
-    .button-pos {
-      left: 257px; } }
-  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 47, ../sass/mobile/_layout.scss */
-    .button-pos {
-      left: 399.5px; } }
 
-/* line 58, ../sass/mobile/_layout.scss */
+/* line 73, ../sass/mobile/_layout.scss */
 .object-header-mobile {
   position: relative; }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 58, ../sass/mobile/_layout.scss */
-    .object-header-mobile {
-      left: 25.7px; } }
-  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 58, ../sass/mobile/_layout.scss */
-    .object-header-mobile {
-      left: 39.95px; } }
 
-/* line 68, ../sass/mobile/_layout.scss */
+/* line 77, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 68, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 68, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 68, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 81, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 81, ../sass/mobile/_layout.scss */
+  /* line 90, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 90, ../sass/mobile/_layout.scss */
+  /* line 99, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 96, ../sass/mobile/_layout.scss */
-  .browse-manage {
-    width: 257px; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 96, ../sass/mobile/_layout.scss */
-  .browse-manage {
-    width: 399.5px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 96, ../sass/mobile/_layout.scss */
-  .browse-manage {
-    min-width: 150px;
-    max-width: 800px;
-    width: 25%; } }
-
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 9cc09d22b6..154b8113a5 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -20,49 +20,58 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// style="min-width: 150px; max-width: 800px; width: 25%;"
-// NOTE: Added to adjust the browse folder tree list view
+// NOTE: Added to adjust the browse folder left list view
 
-.holder-hide {
-    @include phone {
-        @include transition-duration(.2s);
-        left: (-1) * $phoneSlideMenuWidth;
-    }
-    @include tablet {
-        @include transition-duration(.2s);
-        left: (-1) * $tabletSlideMenuWidth;
-    }     
+.browse-wrapper,
+.pane-special {
+    position: absolute;
+    left: 0; top: 0;
+    right: 0; left: 0;
+    white-space: nowrap;
+    height: 100%;
+//    overflow: hidden;
 }
 
-.holder-show {
-    @include transition-duration(.2s);
-    @include phone {
-        left: 0px;
+.browse-hidetree {
+    .pane-special.left {
+//        background-color: #FFF;
+//        right: auto;
+//        width: 50px;
+        display: none !important;
     }
-    @include tablet {
-        left: 0px;
-    }         
+
+    .pane-special.right {
+//        background-color: #325DE6;
+        width: auto !important;
+        left: 0px !important;
+    }    
 }
 
+.browse-showtree {
+    .pane-special.left {
+        display: block !important;
+//        background-color: #FFF;
+        width: 300px !important;
+        right: auto !important;
+    }
+    
+    .pane-special.right {
+//        background-color: #325DE6;
+        left: 300px !important;
+        width: auto !important;
+    }
+}
+
+
+
+
 .button-pos {
     position: absolute;
-    @include transition-duration(.2s);
-    @include phone {        
-        left: $phoneSlideMenuWidth;
-    }
-    @include tablet {
-        left: $tabletSlideMenuWidth;
-    }      
+    @include transition-duration(.2s);   
 }
 
 .object-header-mobile {
     position: relative;
-    @include phone {
-        left: $phoneSlideMenuWidth/10;
-    }
-    @include tablet {
-        left: $tabletSlideMenuWidth/10;
-    }
 }
 
 .mobile-menu-icon {
@@ -92,17 +101,3 @@
         display: none;
     }
 }
-
-.browse-manage {
-    @include phone {
-        width: $phoneSlideMenuWidth;
-    }
-    @include tablet {
-        width: $tabletSlideMenuWidth;
-    }    
-    @include desktop {
-        min-width: 150px;
-        max-width: 800px;
-        width: 25%;   
-    }   
-}
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 639e53af75..da98997d20 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -249,6 +249,7 @@
 	&.vertical {
 		// Slides left and right
 		>.pane {
+//            @include test();
 			margin-left: $interiorMargin;
 			>.holder {
 				left: 0;

From a9dd1f982819ab63adbeb063bd815d48f4839b18 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 15 Jul 2015 16:57:36 -0700
Subject: [PATCH 061/266] [Mobile] Transistions

Cleaned up and added transitions.
---
 .../general/res/css/theme-espresso.css        | 47 ++++++++++++++-----
 .../general/res/sass/mobile/_layout.scss      | 15 +++---
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index e9d9e05a30..368ef6274c 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -737,6 +737,10 @@ mct-container {
 /* line 25, ../sass/mobile/_layout.scss */
 .browse-wrapper,
 .pane-special {
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
   position: absolute;
   left: 0;
   top: 0;
@@ -747,23 +751,39 @@ mct-container {
 
 /* line 36, ../sass/mobile/_layout.scss */
 .browse-hidetree .pane-special.left {
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
   display: none !important; }
-/* line 43, ../sass/mobile/_layout.scss */
+/* line 41, ../sass/mobile/_layout.scss */
 .browse-hidetree .pane-special.right {
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
   width: auto !important;
   left: 0px !important; }
 
-/* line 51, ../sass/mobile/_layout.scss */
+/* line 49, ../sass/mobile/_layout.scss */
 .browse-showtree .pane-special.left {
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
   display: block !important;
   width: 300px !important;
   right: auto !important; }
-/* line 58, ../sass/mobile/_layout.scss */
+/* line 56, ../sass/mobile/_layout.scss */
 .browse-showtree .pane-special.right {
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
   left: 300px !important;
   width: auto !important; }
 
-/* line 68, ../sass/mobile/_layout.scss */
+/* line 66, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -771,37 +791,38 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
 
-/* line 73, ../sass/mobile/_layout.scss */
+/* line 71, ../sass/mobile/_layout.scss */
 .object-header-mobile {
-  position: relative; }
+  position: relative;
+  left: 30px; }
 
-/* line 77, ../sass/mobile/_layout.scss */
+/* line 76, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 77, ../sass/mobile/_layout.scss */
+    /* line 76, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 77, ../sass/mobile/_layout.scss */
+    /* line 76, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 77, ../sass/mobile/_layout.scss */
+    /* line 76, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 90, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 90, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 99, ../sass/mobile/_layout.scss */
+  /* line 98, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 154b8113a5..aa0a012faa 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,24 +24,22 @@
 
 .browse-wrapper,
 .pane-special {
+    @include transition-duration(.2s);
     position: absolute;
     left: 0; top: 0;
     right: 0; left: 0;
     white-space: nowrap;
     height: 100%;
-//    overflow: hidden;
 }
 
 .browse-hidetree {
     .pane-special.left {
-//        background-color: #FFF;
-//        right: auto;
-//        width: 50px;
+        @include transition-duration(.2s);
         display: none !important;
     }
 
     .pane-special.right {
-//        background-color: #325DE6;
+        @include transition-duration(.2s);
         width: auto !important;
         left: 0px !important;
     }    
@@ -49,14 +47,14 @@
 
 .browse-showtree {
     .pane-special.left {
+        @include transition-duration(.2s);
         display: block !important;
-//        background-color: #FFF;
         width: 300px !important;
         right: auto !important;
     }
     
     .pane-special.right {
-//        background-color: #325DE6;
+        @include transition-duration(.2s);
         left: 300px !important;
         width: auto !important;
     }
@@ -67,11 +65,12 @@
 
 .button-pos {
     position: absolute;
-    @include transition-duration(.2s);   
+    @include transition-duration(.2s);
 }
 
 .object-header-mobile {
     position: relative;
+    left: 30px;
 }
 
 .mobile-menu-icon {

From ce75d194805c551936a7caf4c090a367a5b679d5 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 10:44:20 -0700
Subject: [PATCH 062/266] [Mobile] Desktop

Cleans up the _layout by making the different
pane sizes device specific. Also adds a new
sass class just for desktop versions.
---
 .../commonUI/browse/res/templates/browse.html |   8 +-
 .../general/res/css/theme-espresso.css        | 186 ++++++++++++------
 .../general/res/sass/mobile/_layout.scss      | 109 +++++++---
 .../general/res/sass/mobile/_mixins.scss      |  30 ++-
 4 files changed, 247 insertions(+), 86 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 1cecf97b3f..0d6ee32bac 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -26,11 +26,11 @@
         
         <!-- WRAPPER CLASS IS HERE-->
         <!-- NG-CLASS HERE TO SWITCH THE PARENT CLASS FOR pane-special's left and right-->
-        <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'"  anchor='left'>
-            <mct-split-pane class='contents abs'>
+        <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
+            <mct-split-pane class='contents abs' anchor='left'>
             
                 <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
-                <div class='split-pane-component treeview pane pane-special left'>  
+                <div class='split-pane-component treeview pane pane-special left desktop-browse'>  
                     <mct-representation key="'create-button'" mct-object="navigatedObject">
                     </mct-representation>
                     <div class='holder tree-holder abs'>
@@ -41,7 +41,7 @@
                     </div>
                 </div>
                 
-                <mct-splitter class="mobile-hide"></mct-splitter>
+                <mct-splitter class="mobile-splitter"></mct-splitter>
                 
                     <!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example-->
                     <div class='split-pane-component items pane pane-special right'>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 368ef6274c..d503687f0f 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -734,56 +734,120 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 25, ../sass/mobile/_layout.scss */
-.browse-wrapper,
-.pane-special {
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  left: 0;
-  white-space: nowrap;
-  height: 100%; }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 25, ../sass/mobile/_layout.scss */
+  .browse-wrapper,
+  .pane-special {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    left: 0;
+    white-space: nowrap;
+    height: 100%; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 25, ../sass/mobile/_layout.scss */
+  .browse-wrapper,
+  .pane-special {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    left: 0;
+    white-space: nowrap;
+    height: 100%; } }
 
-/* line 36, ../sass/mobile/_layout.scss */
-.browse-hidetree .pane-special.left {
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  display: none !important; }
-/* line 41, ../sass/mobile/_layout.scss */
-.browse-hidetree .pane-special.right {
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  width: auto !important;
-  left: 0px !important; }
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+  /* line 49, ../sass/mobile/_layout.scss */
+  .desktop-browse {
+    min-width: 150px;
+    max-width: 800px;
+    width: 25%; } }
 
-/* line 49, ../sass/mobile/_layout.scss */
-.browse-showtree .pane-special.left {
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  display: block !important;
-  width: 300px !important;
-  right: auto !important; }
-/* line 56, ../sass/mobile/_layout.scss */
-.browse-showtree .pane-special.right {
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  left: 300px !important;
-  width: auto !important; }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 58, ../sass/mobile/_layout.scss */
+  .browse-hidetree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: none !important; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 58, ../sass/mobile/_layout.scss */
+  .browse-hidetree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: none !important; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 69, ../sass/mobile/_layout.scss */
+  .browse-hidetree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    width: auto !important;
+    left: 0px !important; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 69, ../sass/mobile/_layout.scss */
+  .browse-hidetree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    width: auto !important;
+    left: 0px !important; } }
 
-/* line 66, ../sass/mobile/_layout.scss */
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 84, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: block !important;
+    width: 80% !important;
+    right: auto !important; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 84, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: block !important;
+    width: 60% !important;
+    right: auto !important; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 99, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 80% !important;
+    width: auto !important; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 99, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 60% !important;
+    width: auto !important; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 113, ../sass/mobile/_layout.scss */
+  .mobile-splitter {
+    display: none; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 113, ../sass/mobile/_layout.scss */
+  .mobile-splitter {
+    display: none; } }
+
+/* line 124, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -791,38 +855,44 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
 
-/* line 71, ../sass/mobile/_layout.scss */
-.object-header-mobile {
-  position: relative;
-  left: 30px; }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 129, ../sass/mobile/_layout.scss */
+  .object-header-mobile {
+    position: relative;
+    left: 30px; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 129, ../sass/mobile/_layout.scss */
+  .object-header-mobile {
+    position: relative;
+    left: 30px; } }
 
-/* line 76, ../sass/mobile/_layout.scss */
+/* line 140, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 76, ../sass/mobile/_layout.scss */
+    /* line 140, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 76, ../sass/mobile/_layout.scss */
+    /* line 140, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 76, ../sass/mobile/_layout.scss */
+    /* line 140, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 89, ../sass/mobile/_layout.scss */
+  /* line 154, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 89, ../sass/mobile/_layout.scss */
+  /* line 154, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 98, ../sass/mobile/_layout.scss */
+  /* line 163, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index aa0a012faa..e36e825ca0 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,42 +24,100 @@
 
 .browse-wrapper,
 .pane-special {
-    @include transition-duration(.2s);
-    position: absolute;
-    left: 0; top: 0;
-    right: 0; left: 0;
-    white-space: nowrap;
-    height: 100%;
+//    @include transition-duration(.2s);
+    @include phone {
+        position: absolute;
+        left: 0; top: 0;
+        right: 0; left: 0;
+        white-space: nowrap;
+        height: 100%;
+    }
+    @include tablet {
+        position: absolute;
+        left: 0; top: 0;
+        right: 0; left: 0;
+        white-space: nowrap;
+        height: 100%;        
+    }
+}
+
+$phoneMenuSize: 80%;
+$tabletMenuSize: 60%;
+$desktopMenuSize: 25%;
+
+
+.desktop-browse {
+    @include desktop {
+        min-width: 150px;
+        max-width: 800px;
+        width: $desktopMenuSize;   
+    }   
 }
 
 .browse-hidetree {
     .pane-special.left {
-        @include transition-duration(.2s);
-        display: none !important;
+        @include phone {
+            @include transition-duration(.2s);
+            display: none !important;
+        }
+        @include tablet {
+            @include transition-duration(.2s);
+            display: none !important;
+        }
     }
 
-    .pane-special.right {
-        @include transition-duration(.2s);
-        width: auto !important;
-        left: 0px !important;
+    .pane-special.right {       
+        @include phone {
+            @include transition-duration(.2s);
+            width: auto !important;
+            left: 0px !important;
+        }
+        @include tablet {
+            @include transition-duration(.2s);
+            width: auto !important;
+            left: 0px !important;
+        }
     }    
 }
 
 .browse-showtree {
-    .pane-special.left {
-        @include transition-duration(.2s);
-        display: block !important;
-        width: 300px !important;
-        right: auto !important;
+    .pane-special.left {      
+        @include phone {
+            @include transition-duration(.2s);
+            display: block !important;
+            width: $phoneMenuSize !important;
+            right: auto !important;
+        }
+        @include tablet {
+            @include transition-duration(.2s);
+            display: block !important;
+            width: $tabletMenuSize !important;
+            right: auto !important;
+        }
     }
     
     .pane-special.right {
-        @include transition-duration(.2s);
-        left: 300px !important;
-        width: auto !important;
+        @include phone {
+            @include transition-duration(.2s);
+            left: $phoneMenuSize !important;
+            width: auto !important;
+        }
+        @include tablet {
+            @include transition-duration(.2s);
+            left: $tabletMenuSize !important;
+            width: auto !important;
+        }
     }
 }
 
+.mobile-splitter {
+    @include phone {
+        display: none;
+    }
+    @include tablet {
+        display: none;
+    }
+}
 
 
 
@@ -69,8 +127,14 @@
 }
 
 .object-header-mobile {
-    position: relative;
-    left: 30px;
+    @include phone {
+        position: relative;
+        left: 30px;
+    }
+    @include tablet {
+        position: relative;
+        left: 30px;
+    }
 }
 
 .mobile-menu-icon {
@@ -86,6 +150,7 @@
     }       
 }
 
+
 .mobile-hide {
     @include phone {
         display: none;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index b1e868add5..319a3683ca 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -24,7 +24,20 @@
 @mixin phone {
     @media #{$phonePortrait},
            #{$phoneLandscape},
-           #{$phoneLandscapeEmu}{
+           #{$phoneLandscapeEmu} {
+        @content
+    }
+}
+
+@mixin phonePortrait {
+    @media #{$phonePortrait} {
+        @content
+    }
+}
+
+@mixin phoneLandscape {
+    @media #{$phoneLandscape},
+           #{$phoneLandscapeEmu} {
         @content
     }
 }
@@ -32,7 +45,20 @@
 @mixin tablet {
     @media #{$tabletPortrait},
            #{$tabletLandscape},
-           #{$tabletLandscapeEmu}{
+           #{$tabletLandscapeEmu} {
+        @content
+    }
+}
+
+@mixin tabletPortrait {
+    @media #{$tabletPortrait} {
+        @content
+    }
+}
+
+@mixin tabletLandscape {
+    @media #{$tabletLandscape},
+           #{$tabletLandscapeEmu} {
         @content
     }
 }

From e9314898d2316a742db668b3559d7f23cf935c5a Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 11:50:55 -0700
Subject: [PATCH 063/266] [Mobile] Portrait & Landsc.

Specifies amounts based on phone and tablet's
orientation. Not tested for the actual device,
but emulator. Also currently makes the create
button appear/disappear instead of smoothly sliding.
---
 .../commonUI/browse/res/templates/browse.html |   2 +-
 .../general/res/css/theme-espresso.css        | 132 ++++++++++--------
 .../general/res/sass/mobile/_layout.scss      |  82 ++++++-----
 .../general/res/sass/mobile/_mixins.scss      |  11 ++
 4 files changed, 132 insertions(+), 95 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 0d6ee32bac..5428086f20 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -31,7 +31,7 @@
             
                 <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
                 <div class='split-pane-component treeview pane pane-special left desktop-browse'>  
-                    <mct-representation key="'create-button'" mct-object="navigatedObject">
+                    <mct-representation key="'create-button'" mct-object="navigatedObject" class="createBtnPos">
                     </mct-representation>
                     <div class='holder tree-holder abs'>
                         <mct-representation key="'tree'"
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index d503687f0f..9325a2c927 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -749,6 +749,10 @@ mct-container {
   /* line 25, ../sass/mobile/_layout.scss */
   .browse-wrapper,
   .pane-special {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     position: absolute;
     left: 0;
     top: 0;
@@ -758,39 +762,26 @@ mct-container {
     height: 100%; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 49, ../sass/mobile/_layout.scss */
+  /* line 51, ../sass/mobile/_layout.scss */
   .desktop-browse {
     min-width: 150px;
     max-width: 800px;
     width: 25%; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 58, ../sass/mobile/_layout.scss */
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 60, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    display: none !important; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 58, ../sass/mobile/_layout.scss */
-  .browse-hidetree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    display: none !important; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 69, ../sass/mobile/_layout.scss */
-  .browse-hidetree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    width: auto !important;
-    left: 0px !important; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 69, ../sass/mobile/_layout.scss */
+    width: 0px !important;
+    right: auto !important; }
+    /* line 66, ../sass/mobile/_layout.scss */
+    .browse-hidetree .pane-special.left .createBtnPos {
+      display: none; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 72, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -799,8 +790,8 @@ mct-container {
     width: auto !important;
     left: 0px !important; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 84, ../sass/mobile/_layout.scss */
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 82, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -809,18 +800,38 @@ mct-container {
     display: block !important;
     width: 80% !important;
     right: auto !important; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 84, ../sass/mobile/_layout.scss */
+@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 82, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     display: block !important;
-    width: 60% !important;
+    width: 30% !important;
     right: auto !important; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 99, ../sass/mobile/_layout.scss */
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 82, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: block !important;
+    width: 30% !important;
+    right: auto !important; } }
+@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 82, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    display: block !important;
+    width: 25% !important;
+    right: auto !important; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 109, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -828,26 +839,40 @@ mct-container {
     transition-duration: 0.2s;
     left: 80% !important;
     width: auto !important; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 99, ../sass/mobile/_layout.scss */
+@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 109, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: 60% !important;
+    left: 30% !important;
+    width: auto !important; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 109, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 30% !important;
+    width: auto !important; } }
+@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 109, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 25% !important;
     width: auto !important; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 113, ../sass/mobile/_layout.scss */
-  .mobile-splitter {
-    display: none; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 113, ../sass/mobile/_layout.scss */
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 133, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
-/* line 124, ../sass/mobile/_layout.scss */
+/* line 141, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -855,44 +880,35 @@ mct-container {
   -webkit-transition-duration: 0.2s;
   transition-duration: 0.2s; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 129, ../sass/mobile/_layout.scss */
-  .object-header-mobile {
-    position: relative;
-    left: 30px; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 129, ../sass/mobile/_layout.scss */
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 146, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 140, ../sass/mobile/_layout.scss */
+/* line 153, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 140, ../sass/mobile/_layout.scss */
+    /* line 153, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 140, ../sass/mobile/_layout.scss */
+    /* line 153, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 140, ../sass/mobile/_layout.scss */
+    /* line 153, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 154, ../sass/mobile/_layout.scss */
-  .mobile-hide {
-    display: none; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 154, ../sass/mobile/_layout.scss */
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 167, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 163, ../sass/mobile/_layout.scss */
+  /* line 173, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index e36e825ca0..d5364ae6b2 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,7 +24,6 @@
 
 .browse-wrapper,
 .pane-special {
-//    @include transition-duration(.2s);
     @include phone {
         position: absolute;
         left: 0; top: 0;
@@ -33,6 +32,7 @@
         height: 100%;
     }
     @include tablet {
+        @include transition-duration(.2s);
         position: absolute;
         left: 0; top: 0;
         right: 0; left: 0;
@@ -41,8 +41,10 @@
     }
 }
 
-$phoneMenuSize: 80%;
-$tabletMenuSize: 60%;
+$phoneMenuSizePortrait: 80%;
+$phoneMenuSizeLandscape: 30%;
+$tabletMenuSizePortrait: 40%;
+$tabletMenuSizeLandscape: 25%;
 $desktopMenuSize: 25%;
 
 
@@ -56,23 +58,19 @@ $desktopMenuSize: 25%;
 
 .browse-hidetree {
     .pane-special.left {
-        @include phone {
+        @include phoneandtablet {
             @include transition-duration(.2s);
-            display: none !important;
-        }
-        @include tablet {
-            @include transition-duration(.2s);
-            display: none !important;
+            width: 0px !important;
+            right: auto !important;
+            
+            .createBtnPos {
+                display: none;
+            }            
         }
     }
 
     .pane-special.right {       
-        @include phone {
-            @include transition-duration(.2s);
-            width: auto !important;
-            left: 0px !important;
-        }
-        @include tablet {
+        @include phoneandtablet {
             @include transition-duration(.2s);
             width: auto !important;
             left: 0px !important;
@@ -82,39 +80,58 @@ $desktopMenuSize: 25%;
 
 .browse-showtree {
     .pane-special.left {      
-        @include phone {
+        @include phonePortrait {
             @include transition-duration(.2s);
             display: block !important;
-            width: $phoneMenuSize !important;
+            width: $phoneMenuSizePortrait !important;
             right: auto !important;
         }
-        @include tablet {
+        @include phoneLandscape {
             @include transition-duration(.2s);
             display: block !important;
-            width: $tabletMenuSize !important;
+            width: $phoneMenuSizeLandscape !important;
+            right: auto !important;
+        }
+        @include tabletPortrait {
+            @include transition-duration(.2s);
+            display: block !important;
+            width: $tabletMenuSizePortrait !important;
+            right: auto !important;
+        }
+        @include tabletLandscape {
+            @include transition-duration(.2s);
+            display: block !important;
+            width: $tabletMenuSizeLandscape !important;
             right: auto !important;
         }
     }
     
     .pane-special.right {
-        @include phone {
+        @include phonePortrait {
             @include transition-duration(.2s);
-            left: $phoneMenuSize !important;
+            left: $phoneMenuSizePortrait !important;
             width: auto !important;
         }
-        @include tablet {
+        @include phoneLandscape {
             @include transition-duration(.2s);
-            left: $tabletMenuSize !important;
+            left: $phoneMenuSizeLandscape !important;
+            width: auto !important;
+        }
+        @include tabletPortrait {
+            @include transition-duration(.2s);
+            left: $tabletMenuSizePortrait !important;
+            width: auto !important;
+        }
+        @include tabletLandscape {
+            @include transition-duration(.2s);
+            left: $tabletMenuSizeLandscape !important;
             width: auto !important;
         }
     }
 }
 
 .mobile-splitter {
-    @include phone {
-        display: none;
-    }
-    @include tablet {
+    @include phoneandtablet {
         display: none;
     }
 }
@@ -127,11 +144,7 @@ $desktopMenuSize: 25%;
 }
 
 .object-header-mobile {
-    @include phone {
-        position: relative;
-        left: 30px;
-    }
-    @include tablet {
+    @include phoneandtablet {
         position: relative;
         left: 30px;
     }
@@ -152,10 +165,7 @@ $desktopMenuSize: 25%;
 
 
 .mobile-hide {
-    @include phone {
-        display: none;
-    }
-    @include tablet {
+    @include phoneandtablet {
         display: none;
     }
 }
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 319a3683ca..85d4a78b7a 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -63,6 +63,17 @@
     }
 }
 
+@mixin phoneandtablet {
+    @media #{$phonePortrait},
+           #{$phoneLandscape},
+           #{$phoneLandscapeEmu},
+           #{$tabletPortrait},
+           #{$tabletLandscape},
+           #{$tabletLandscapeEmu}{
+        @content
+    }
+}
+
 @mixin desktop {
     @media #{$desktopPortrait},
            #{$desktopLandscape} {

From 180e5f14aeff12015d456abcfa2a8621b3b932c0 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 12:25:06 -0700
Subject: [PATCH 064/266] [Mobile] Cleaned up

Made pane sass code more DRY by
using the phoneandtablet mixin
on repeated conditions.
---
 .../general/res/css/theme-espresso.css        | 134 ++++++------------
 .../general/res/sass/mobile/_layout.scss      |  39 ++---
 2 files changed, 56 insertions(+), 117 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 9325a2c927..c28a7e46a8 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -734,7 +734,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 25, ../sass/mobile/_layout.scss */
   .browse-wrapper,
   .pane-special {
@@ -745,31 +745,16 @@ mct-container {
     left: 0;
     white-space: nowrap;
     height: 100%; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 25, ../sass/mobile/_layout.scss */
-  .browse-wrapper,
-  .pane-special {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    left: 0;
-    white-space: nowrap;
-    height: 100%; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 51, ../sass/mobile/_layout.scss */
+  /* line 43, ../sass/mobile/_layout.scss */
   .desktop-browse {
     min-width: 150px;
     max-width: 800px;
     width: 25%; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 60, ../sass/mobile/_layout.scss */
+  /* line 52, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -777,11 +762,11 @@ mct-container {
     transition-duration: 0.2s;
     width: 0px !important;
     right: auto !important; }
-    /* line 66, ../sass/mobile/_layout.scss */
+    /* line 58, ../sass/mobile/_layout.scss */
     .browse-hidetree .pane-special.left .createBtnPos {
       display: none; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 72, ../sass/mobile/_layout.scss */
+  /* line 64, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -790,89 +775,62 @@ mct-container {
     width: auto !important;
     left: 0px !important; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 82, ../sass/mobile/_layout.scss */
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 74, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     display: block !important;
-    width: 80% !important;
-    right: auto !important; } }
-@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 82, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    display: block !important;
-    width: 30% !important;
-    right: auto !important; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 82, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    display: block !important;
-    width: 30% !important;
-    right: auto !important; } }
-@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 82, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    display: block !important;
-    width: 25% !important;
     right: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 109, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: 80% !important;
-    width: auto !important; } }
+  /* line 74, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    width: 80% !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 109, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: 30% !important;
-    width: auto !important; } }
+  /* line 74, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    width: 30% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 109, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    left: 30% !important;
-    width: auto !important; } }
+  /* line 74, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    width: 40% !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 109, ../sass/mobile/_layout.scss */
+  /* line 74, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    width: 25% !important; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 94, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
-    left: 25% !important;
     width: auto !important; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 94, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    left: 80% !important; } }
+@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 94, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    left: 30% !important; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 94, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    left: 40% !important; } }
+@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 94, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    left: 25% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 133, ../sass/mobile/_layout.scss */
+  /* line 114, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
-/* line 141, ../sass/mobile/_layout.scss */
+/* line 122, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
   -moz-transition-duration: 0.2s;
@@ -881,34 +839,34 @@ mct-container {
   transition-duration: 0.2s; }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 146, ../sass/mobile/_layout.scss */
+  /* line 127, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 153, ../sass/mobile/_layout.scss */
+/* line 134, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 153, ../sass/mobile/_layout.scss */
+    /* line 134, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 153, ../sass/mobile/_layout.scss */
+    /* line 134, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 153, ../sass/mobile/_layout.scss */
+    /* line 134, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 167, ../sass/mobile/_layout.scss */
+  /* line 148, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 173, ../sass/mobile/_layout.scss */
+  /* line 154, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index d5364ae6b2..fcd7b667b5 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,21 +24,13 @@
 
 .browse-wrapper,
 .pane-special {
-    @include phone {
+    @include phoneandtablet {
         position: absolute;
         left: 0; top: 0;
         right: 0; left: 0;
         white-space: nowrap;
         height: 100%;
     }
-    @include tablet {
-        @include transition-duration(.2s);
-        position: absolute;
-        left: 0; top: 0;
-        right: 0; left: 0;
-        white-space: nowrap;
-        height: 100%;        
-    }
 }
 
 $phoneMenuSizePortrait: 80%;
@@ -79,53 +71,42 @@ $desktopMenuSize: 25%;
 }
 
 .browse-showtree {
-    .pane-special.left {      
-        @include phonePortrait {
+    .pane-special.left {
+        @include phoneandtablet {
             @include transition-duration(.2s);
             display: block !important;
-            width: $phoneMenuSizePortrait !important;
             right: auto !important;
         }
+        @include phonePortrait {
+            width: $phoneMenuSizePortrait !important;
+        }
         @include phoneLandscape {
-            @include transition-duration(.2s);
-            display: block !important;
             width: $phoneMenuSizeLandscape !important;
-            right: auto !important;
         }
         @include tabletPortrait {
-            @include transition-duration(.2s);
-            display: block !important;
             width: $tabletMenuSizePortrait !important;
-            right: auto !important;
         }
         @include tabletLandscape {
-            @include transition-duration(.2s);
-            display: block !important;
             width: $tabletMenuSizeLandscape !important;
-            right: auto !important;
         }
     }
     
     .pane-special.right {
-        @include phonePortrait {
+        @include phoneandtablet {
             @include transition-duration(.2s);
+            width: auto !important;   
+        }
+        @include phonePortrait {
             left: $phoneMenuSizePortrait !important;
-            width: auto !important;
         }
         @include phoneLandscape {
-            @include transition-duration(.2s);
             left: $phoneMenuSizeLandscape !important;
-            width: auto !important;
         }
         @include tabletPortrait {
-            @include transition-duration(.2s);
             left: $tabletMenuSizePortrait !important;
-            width: auto !important;
         }
         @include tabletLandscape {
-            @include transition-duration(.2s);
             left: $tabletMenuSizeLandscape !important;
-            width: auto !important;
         }
     }
 }

From 6e6fbe0d65e7b563feb6f39bc440721cb49f9517 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 12:54:10 -0700
Subject: [PATCH 065/266] [Mobile] Transitions

Made transitions properly work for
create button.
---
 .../commonUI/browse/res/templates/browse.html |  6 +++--
 .../general/res/css/theme-espresso.css        | 27 +++++++++++--------
 .../general/res/sass/mobile/_constants.scss   |  7 +++--
 .../general/res/sass/mobile/_layout.scss      | 14 +++++-----
 4 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 5428086f20..12755dd3f1 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -31,8 +31,10 @@
             
                 <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
                 <div class='split-pane-component treeview pane pane-special left desktop-browse'>  
-                    <mct-representation key="'create-button'" mct-object="navigatedObject" class="createBtnPos">
-                    </mct-representation>
+                     <div class='createBtnPos'>
+                        <mct-representation key="'create-button'" mct-object="navigatedObject">
+                        </mct-representation>
+                    </div>
                     <div class='holder tree-holder abs'>
                         <mct-representation key="'tree'"
                                             mct-object="domainObject"
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c28a7e46a8..6fb970f646 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -747,14 +747,14 @@ mct-container {
     height: 100%; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 43, ../sass/mobile/_layout.scss */
+  /* line 37, ../sass/mobile/_layout.scss */
   .desktop-browse {
     min-width: 150px;
     max-width: 800px;
     width: 25%; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 52, ../sass/mobile/_layout.scss */
+  /* line 46, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -762,11 +762,12 @@ mct-container {
     transition-duration: 0.2s;
     width: 0px !important;
     right: auto !important; }
-    /* line 58, ../sass/mobile/_layout.scss */
+    /* line 52, ../sass/mobile/_layout.scss */
     .browse-hidetree .pane-special.left .createBtnPos {
-      display: none; } }
+      overflow-y: hidden;
+      overflow-x: hidden; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 64, ../sass/mobile/_layout.scss */
+  /* line 59, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -776,28 +777,32 @@ mct-container {
     left: 0px !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
     -webkit-transition-duration: 0.2s;
     transition-duration: 0.2s;
     display: block !important;
-    right: auto !important; } }
+    right: auto !important; }
+    /* line 75, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane-special.left .createBtnPos {
+      overflow-y: hidden;
+      overflow-x: hidden; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 80% !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 30% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 40% !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 74, ../sass/mobile/_layout.scss */
+  /* line 69, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 25% !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 564e8169f5..1c10f59395 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -67,5 +67,8 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS */
-$phoneSlideMenuWidth: $phoMaxW/2;
-$tabletSlideMenuWidth: $tabMaxW/2;
+$phoneMenuSizePortrait: 80%;
+$phoneMenuSizeLandscape: 30%;
+$tabletMenuSizePortrait: 40%;
+$tabletMenuSizeLandscape: 25%;
+$desktopMenuSize: 25%;
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index fcd7b667b5..a59713c236 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -33,12 +33,6 @@
     }
 }
 
-$phoneMenuSizePortrait: 80%;
-$phoneMenuSizeLandscape: 30%;
-$tabletMenuSizePortrait: 40%;
-$tabletMenuSizeLandscape: 25%;
-$desktopMenuSize: 25%;
-
 
 .desktop-browse {
     @include desktop {
@@ -56,7 +50,8 @@ $desktopMenuSize: 25%;
             right: auto !important;
             
             .createBtnPos {
-                display: none;
+                overflow-y: hidden;
+                overflow-x: hidden;
             }            
         }
     }
@@ -76,6 +71,11 @@ $desktopMenuSize: 25%;
             @include transition-duration(.2s);
             display: block !important;
             right: auto !important;
+            
+            .createBtnPos {
+                overflow-y: hidden;
+                overflow-x: hidden;
+            }                
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;

From 15a88967d02b97d31df7bc3e80a44d6426ced81b Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 13:22:07 -0700
Subject: [PATCH 066/266] [Mobile] Transition/Create Fix

Fix the create button to work and
also transition well. Added transition mixin
to stay DRY.
---
 .../commonUI/browse/res/templates/browse.html |  8 +-
 .../general/res/css/theme-espresso.css        | 96 ++++++++++---------
 .../general/res/sass/mobile/_constants.scss   |  2 +-
 .../general/res/sass/mobile/_layout.scss      | 17 ++--
 .../general/res/sass/mobile/_mixins.scss      |  5 +
 5 files changed, 71 insertions(+), 57 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 12755dd3f1..b8ab9845cb 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -31,16 +31,16 @@
             
                 <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
                 <div class='split-pane-component treeview pane pane-special left desktop-browse'>  
-                     <div class='createBtnPos'>
-                        <mct-representation key="'create-button'" mct-object="navigatedObject">
-                        </mct-representation>
-                    </div>
                     <div class='holder tree-holder abs'>
                         <mct-representation key="'tree'"
                                             mct-object="domainObject"
                                             ng-model="treeModel">
                         </mct-representation>
                     </div>
+                     <div class='createBtnPos'>
+                        <mct-representation key="'create-button'" mct-object="navigatedObject">
+                        </mct-representation>
+                    </div>                    
                 </div>
                 
                 <mct-splitter class="mobile-splitter"></mct-splitter>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6fb970f646..33838faa7f 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -754,124 +754,130 @@ mct-container {
     width: 25%; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 46, ../sass/mobile/_layout.scss */
+  /* line 48, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.5s;
+    -o-transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
     width: 0px !important;
     right: auto !important; }
-    /* line 52, ../sass/mobile/_layout.scss */
+    /* line 54, ../sass/mobile/_layout.scss */
     .browse-hidetree .pane-special.left .createBtnPos {
       overflow-y: hidden;
       overflow-x: hidden; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 59, ../sass/mobile/_layout.scss */
+  /* line 61, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.5s;
+    -o-transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
     width: auto !important;
     left: 0px !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.5s;
+    -o-transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
     display: block !important;
     right: auto !important; }
-    /* line 75, ../sass/mobile/_layout.scss */
+    /* line 77, ../sass/mobile/_layout.scss */
     .browse-showtree .pane-special.left .createBtnPos {
+      height: inherit;
       overflow-y: hidden;
       overflow-x: hidden; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 80% !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 30% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
-    width: 40% !important; } }
+    width: 35% !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 69, ../sass/mobile/_layout.scss */
+  /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 25% !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.5s;
+    -o-transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
     width: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 80% !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 30% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
-    left: 40% !important; } }
+    left: 35% !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 94, ../sass/mobile/_layout.scss */
+  /* line 97, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 25% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 114, ../sass/mobile/_layout.scss */
+  /* line 117, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
-/* line 122, ../sass/mobile/_layout.scss */
+/* line 125, ../sass/mobile/_layout.scss */
 .button-pos {
   position: absolute;
-  -moz-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s; }
+  -moz-transition-duration: 0.5s;
+  -o-transition-duration: 0.5s;
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+  transition-timing-function: ease; }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 127, ../sass/mobile/_layout.scss */
+  /* line 130, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 134, ../sass/mobile/_layout.scss */
+/* line 137, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 134, ../sass/mobile/_layout.scss */
+    /* line 137, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 134, ../sass/mobile/_layout.scss */
+    /* line 137, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 134, ../sass/mobile/_layout.scss */
+    /* line 137, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 148, ../sass/mobile/_layout.scss */
+  /* line 151, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 154, ../sass/mobile/_layout.scss */
+  /* line 157, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 1c10f59395..2886b8a7e6 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -69,6 +69,6 @@ $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
 /************************** DEVICE PARAMETERS FOR MENUS */
 $phoneMenuSizePortrait: 80%;
 $phoneMenuSizeLandscape: 30%;
-$tabletMenuSizePortrait: 40%;
+$tabletMenuSizePortrait: 35%;
 $tabletMenuSizeLandscape: 25%;
 $desktopMenuSize: 25%;
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index a59713c236..0cb3ac5307 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -42,10 +42,12 @@
     }   
 }
 
+
+
 .browse-hidetree {
     .pane-special.left {
         @include phoneandtablet {
-            @include transition-duration(.2s);
+            @include slMenuTransitions;
             width: 0px !important;
             right: auto !important;
             
@@ -58,7 +60,7 @@
 
     .pane-special.right {       
         @include phoneandtablet {
-            @include transition-duration(.2s);
+            @include slMenuTransitions;
             width: auto !important;
             left: 0px !important;
         }
@@ -68,14 +70,15 @@
 .browse-showtree {
     .pane-special.left {
         @include phoneandtablet {
-            @include transition-duration(.2s);
+            @include slMenuTransitions;
             display: block !important;
             right: auto !important;
             
             .createBtnPos {
+                height: inherit;
                 overflow-y: hidden;
                 overflow-x: hidden;
-            }                
+            }         
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
@@ -93,8 +96,8 @@
     
     .pane-special.right {
         @include phoneandtablet {
-            @include transition-duration(.2s);
-            width: auto !important;   
+            @include slMenuTransitions;
+            width: auto !important;
         }
         @include phonePortrait {
             left: $phoneMenuSizePortrait !important;
@@ -121,7 +124,7 @@
 
 .button-pos {
     position: absolute;
-    @include transition-duration(.2s);
+    @include slMenuTransitions;
 }
 
 .object-header-mobile {
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 85d4a78b7a..764fdfd098 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -80,3 +80,8 @@
         @content
     }
 }
+
+@mixin slMenuTransitions {
+    @include transition-duration(.5s);
+    transition-timing-function: ease;
+}

From d99b4d75d807051ff5fc4ad250d1c29d413acb96 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 14:07:25 -0700
Subject: [PATCH 067/266] [Mobile] Fix

Fixed the desktop version breaking.
CUrrent issue is hte menu is getting cut off.
---
 .../commonUI/browse/res/templates/browse.html | 15 +++----
 .../general/res/css/theme-espresso.css        | 43 ++++++++++---------
 .../general/res/sass/mobile/_layout.scss      |  9 ++--
 3 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index b8ab9845cb..9666fcaafd 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -44,16 +44,15 @@
                 </div>
                 
                 <mct-splitter class="mobile-splitter"></mct-splitter>
-                
                     <!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example-->
-                    <div class='split-pane-component items pane pane-special right'>
-                    <div class='holder abs' id='content-area'>
-                        <mct-representation mct-object="navigatedObject" key="'browse-object'">
-                        </mct-representation>
-                    </div>
-                    <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
+                        <div class='split-pane-component items pane pane-special right'>
+                            <div class='holder abs' id='content-area'>
+                                <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                                </mct-representation>
+                            </div>
+                        <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
                             ng-click="treeSlide()">m</div>                        
-                </div>                     
+                        </div>   
             </mct-split-pane>
         </div>
         <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 33838faa7f..fc95bd48cb 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -810,7 +810,7 @@ mct-container {
   .browse-showtree .pane-special.left {
     width: 25% !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.5s;
     -o-transition-duration: 0.5s;
@@ -819,65 +819,66 @@ mct-container {
     transition-timing-function: ease;
     width: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 80% !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 30% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 35% !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 97, ../sass/mobile/_layout.scss */
+  /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 25% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 117, ../sass/mobile/_layout.scss */
+  /* line 116, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
-/* line 125, ../sass/mobile/_layout.scss */
-.button-pos {
-  position: absolute;
-  -moz-transition-duration: 0.5s;
-  -o-transition-duration: 0.5s;
-  -webkit-transition-duration: 0.5s;
-  transition-duration: 0.5s;
-  transition-timing-function: ease; }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 124, ../sass/mobile/_layout.scss */
+  .button-pos {
+    position: absolute;
+    -moz-transition-duration: 0.5s;
+    -o-transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+    transition-timing-function: ease; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 130, ../sass/mobile/_layout.scss */
+  /* line 131, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 137, ../sass/mobile/_layout.scss */
+/* line 138, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   top: 5px; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 137, ../sass/mobile/_layout.scss */
+    /* line 138, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 137, ../sass/mobile/_layout.scss */
+    /* line 138, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 137, ../sass/mobile/_layout.scss */
+    /* line 138, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 151, ../sass/mobile/_layout.scss */
+  /* line 152, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 157, ../sass/mobile/_layout.scss */
+  /* line 158, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 0cb3ac5307..6bdbb40950 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -59,7 +59,7 @@
     }
 
     .pane-special.right {       
-        @include phoneandtablet {
+        @include phoneandtablet {         
             @include slMenuTransitions;
             width: auto !important;
             left: 0px !important;
@@ -93,7 +93,6 @@
             width: $tabletMenuSizeLandscape !important;
         }
     }
-    
     .pane-special.right {
         @include phoneandtablet {
             @include slMenuTransitions;
@@ -123,8 +122,10 @@
 
 
 .button-pos {
-    position: absolute;
-    @include slMenuTransitions;
+    @include phoneandtablet {
+        position: absolute;
+        @include slMenuTransitions;
+    }
 }
 
 .object-header-mobile {

From 85c7a36e25cf69483d800b8577d8af219731a907 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 15:21:17 -0700
Subject: [PATCH 068/266] [Mobile] Cleaned up

Set the width of the create menu
text/components to fit the menu
however it gets cuttoff sometimes.
Next steps are to Clean up screen,
change the create menu to fit the left side,
and fix bottom space.
---
 .../commonUI/browse/res/templates/browse.html |  2 +-
 .../res/templates/create/create-menu.html     |  2 +-
 .../general/res/css/theme-espresso.css        | 40 +++++++++----------
 .../general/res/sass/mobile/_layout.scss      |  2 +-
 .../general/res/sass/mobile/_mixins.scss      |  2 +-
 5 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 9666fcaafd..d476921eaf 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -40,7 +40,7 @@
                      <div class='createBtnPos'>
                         <mct-representation key="'create-button'" mct-object="navigatedObject">
                         </mct-representation>
-                    </div>                    
+                    </div>                
                 </div>
                 
                 <mct-splitter class="mobile-splitter"></mct-splitter>
diff --git a/platform/commonUI/browse/res/templates/create/create-menu.html b/platform/commonUI/browse/res/templates/create/create-menu.html
index 3386d2d266..1af6c5cd31 100644
--- a/platform/commonUI/browse/res/templates/create/create-menu.html
+++ b/platform/commonUI/browse/res/templates/create/create-menu.html
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="contents" ng-controller="CreateMenuController">
-    <div class="pane left menu-items">
+    <div class="pane left menu-items pane-special left">
         <ul>
 
             <li ng-repeat="createAction in createActions">
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index fc95bd48cb..ebf5cef519 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -756,10 +756,10 @@ mct-container {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 48, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     transition-timing-function: ease;
     width: 0px !important;
     right: auto !important; }
@@ -770,10 +770,10 @@ mct-container {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 61, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     transition-timing-function: ease;
     width: auto !important;
     left: 0px !important; } }
@@ -781,10 +781,10 @@ mct-container {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 71, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     transition-timing-function: ease;
     display: block !important;
     right: auto !important; }
@@ -812,10 +812,10 @@ mct-container {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 96, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     transition-timing-function: ease;
     width: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
@@ -844,10 +844,10 @@ mct-container {
   /* line 124, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
-    -moz-transition-duration: 0.5s;
-    -o-transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    transition-duration: 0.5s;
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     transition-timing-function: ease; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 6bdbb40950..93f35661ba 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -78,7 +78,7 @@
                 height: inherit;
                 overflow-y: hidden;
                 overflow-x: hidden;
-            }         
+            }
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 764fdfd098..b6c1cf93e9 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -82,6 +82,6 @@
 }
 
 @mixin slMenuTransitions {
-    @include transition-duration(.5s);
+    @include transition-duration(.2s);
     transition-timing-function: ease;
 }

From 488829a20c7d4924dccfcd6cceee51cbf93c30c0 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 16 Jul 2015 16:13:58 -0700
Subject: [PATCH 069/266] [Mobile] Header

Removed type from header
along with the right side buttons.
---
 platform/commonUI/browse/res/templates/browse.html     |  2 +-
 .../browse/res/templates/browse/object-header.html     |  2 +-
 platform/commonUI/general/res/css/theme-espresso.css   | 10 ++++++++--
 platform/commonUI/general/res/sass/mobile/_layout.scss |  9 ++++++++-
 4 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index d476921eaf..c86b44e496 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -50,7 +50,7 @@
                                 <mct-representation mct-object="navigatedObject" key="'browse-object'">
                                 </mct-representation>
                             </div>
-                        <div class="s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
+                        <div class="left s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
                             ng-click="treeSlide()">m</div>                        
                         </div>   
             </mct-split-pane>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 583940aaab..f4b17bf79e 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -23,7 +23,7 @@
 	<span class="label s-label">
 	    <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
 	    <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
-	    <span class='type-name'>{{type.getName()}}</span>
+	    <span class='type-name mobile-text-hide'>{{type.getName()}}</span>
 	    <span class='title-label'>{{model.name}}</span>
 		<!--a id='actions-menu' class='ui-symbol context-available' onclick="alert('Not yet functional. This will display a dropdown menu of options for this object.');">v</a-->
 	</span>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index ebf5cef519..70c65c582f 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -858,7 +858,7 @@ mct-container {
 
 /* line 138, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
-  top: 5px; }
+  display: inline-block; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
     /* line 138, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
@@ -877,8 +877,14 @@ mct-container {
   .mobile-hide {
     display: none; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 158, ../sass/mobile/_layout.scss */
+  .mobile-text-hide {
+    width: 0px;
+    overflow: hidden; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 165, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 93f35661ba..2d72aba1ff 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -136,7 +136,7 @@
 }
 
 .mobile-menu-icon {
-    top: $interiorMargin;
+    display: inline-block;
     @include phone {
         font-size: 125%;
     }
@@ -155,6 +155,13 @@
     }
 }
 
+.mobile-text-hide {
+    @include phoneandtablet {
+        width: 0px;
+        overflow:hidden;
+    }
+}
+
 .phone-hide {
     @include phone {
         display: none;

From 1e2e20b1459dd213df34e98ad1abff891549e960 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 17 Jul 2015 09:04:39 -0700
Subject: [PATCH 070/266] [Mobile] Comments

Added comments to the mixins.
---
 platform/commonUI/general/res/sass/mobile/_mixins.scss | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index b6c1cf93e9..a3e06d745b 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// NOTE: Mixins for devices
+// Phones in any orientation
 @mixin phone {
     @media #{$phonePortrait},
            #{$phoneLandscape},
@@ -29,12 +29,14 @@
     }
 }
 
+//Phones in portrait orientation
 @mixin phonePortrait {
     @media #{$phonePortrait} {
         @content
     }
 }
 
+// Phones in landscape orientation
 @mixin phoneLandscape {
     @media #{$phoneLandscape},
            #{$phoneLandscapeEmu} {
@@ -42,6 +44,7 @@
     }
 }
 
+// Tablets in any orientation
 @mixin tablet {
     @media #{$tabletPortrait},
            #{$tabletLandscape},
@@ -50,12 +53,14 @@
     }
 }
 
+// Tablets in portrait orientation
 @mixin tabletPortrait {
     @media #{$tabletPortrait} {
         @content
     }
 }
 
+// Tablets in landscape orientation
 @mixin tabletLandscape {
     @media #{$tabletLandscape},
            #{$tabletLandscapeEmu} {
@@ -63,6 +68,7 @@
     }
 }
 
+// Phones and tablets in any orientation
 @mixin phoneandtablet {
     @media #{$phonePortrait},
            #{$phoneLandscape},
@@ -74,6 +80,7 @@
     }
 }
 
+// Desktop monitors in any orientation
 @mixin desktop {
     @media #{$desktopPortrait},
            #{$desktopLandscape} {

From 0d7387080d0c55f54295f09f16c50eef33d853f0 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 17 Jul 2015 10:28:19 -0700
Subject: [PATCH 071/266] [Mobile] Create Menu

Create menu text has ellipsis
attribute now, so if text is cut off
it will have a '...' appended to it.
Also added comments to mixins.
---
 .../commonUI/browse/res/templates/browse.html |  2 -
 .../res/templates/create/create-button.html   |  2 +-
 .../res/templates/create/create-menu.html     |  6 +-
 .../general/res/css/theme-espresso.css        | 79 ++++++++++---------
 .../general/res/sass/mobile/_layout.scss      | 39 ++++-----
 5 files changed, 67 insertions(+), 61 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index c86b44e496..d126d672cb 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -37,10 +37,8 @@
                                             ng-model="treeModel">
                         </mct-representation>
                     </div>
-                     <div class='createBtnPos'>
                         <mct-representation key="'create-button'" mct-object="navigatedObject">
                         </mct-representation>
-                    </div>                
                 </div>
                 
                 <mct-splitter class="mobile-splitter"></mct-splitter>
diff --git a/platform/commonUI/browse/res/templates/create/create-button.html b/platform/commonUI/browse/res/templates/create/create-button.html
index 527afd9882..4fce8d8f9c 100644
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@@ -23,7 +23,7 @@
     <div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
 	    Create
     </div>
-    <div class="menu dropdown super-menu" ng-show="createController.isActive()">
+    <div class="menu dropdown super-menu mobile-super-menu" ng-show="createController.isActive()">
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>
diff --git a/platform/commonUI/browse/res/templates/create/create-menu.html b/platform/commonUI/browse/res/templates/create/create-menu.html
index 1af6c5cd31..e0de7ecc2d 100644
--- a/platform/commonUI/browse/res/templates/create/create-menu.html
+++ b/platform/commonUI/browse/res/templates/create/create-menu.html
@@ -20,11 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="contents" ng-controller="CreateMenuController">
-    <div class="pane left menu-items pane-special left">
+    <div class="pane left menu-items mobile-super-menu">
         <ul>
 
             <li ng-repeat="createAction in createActions">
-                <a
+                <a class="mobile-super-menu-text"
                    ng-click="createAction.perform()"
                    ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
                    ng-mouseleave="representation.activeMetadata = undefined">
@@ -37,7 +37,7 @@
 
         </ul>
     </div>
-    <div class="pane right menu-item-description">
+    <div class="pane right menu-item-description mobile-right-create">
         <div class="desc-area ui-symbol icon type-icon">
             {{representation.activeMetadata.glyph}}
         </div>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 70c65c582f..7a1b471d44 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -762,13 +762,11 @@ mct-container {
     transition-duration: 0.2s;
     transition-timing-function: ease;
     width: 0px !important;
-    right: auto !important; }
-    /* line 54, ../sass/mobile/_layout.scss */
-    .browse-hidetree .pane-special.left .createBtnPos {
-      overflow-y: hidden;
-      overflow-x: hidden; } }
+    right: auto !important;
+    overflow-y: hidden;
+    overflow-x: hidden; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 61, ../sass/mobile/_layout.scss */
+  /* line 58, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -779,7 +777,7 @@ mct-container {
     left: 0px !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -787,30 +785,27 @@ mct-container {
     transition-duration: 0.2s;
     transition-timing-function: ease;
     display: block !important;
-    right: auto !important; }
-    /* line 77, ../sass/mobile/_layout.scss */
-    .browse-showtree .pane-special.left .createBtnPos {
-      height: inherit;
-      overflow-y: hidden;
-      overflow-x: hidden; } }
+    right: auto !important;
+    overflow-y: hidden;
+    overflow-x: hidden; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 80% !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 30% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 35% !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 71, ../sass/mobile/_layout.scss */
+  /* line 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
     width: 25% !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -819,29 +814,29 @@ mct-container {
     transition-timing-function: ease;
     width: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 80% !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 30% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 35% !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 96, ../sass/mobile/_layout.scss */
+  /* line 89, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 25% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 116, ../sass/mobile/_layout.scss */
+  /* line 109, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 124, ../sass/mobile/_layout.scss */
+  /* line 117, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
     -moz-transition-duration: 0.2s;
@@ -851,40 +846,50 @@ mct-container {
     transition-timing-function: ease; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 131, ../sass/mobile/_layout.scss */
+  /* line 124, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 138, ../sass/mobile/_layout.scss */
+/* line 131, ../sass/mobile/_layout.scss */
 .mobile-menu-icon {
   display: inline-block; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 138, ../sass/mobile/_layout.scss */
+    /* line 131, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 125%; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 138, ../sass/mobile/_layout.scss */
+    /* line 131, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       font-size: 175%; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 138, ../sass/mobile/_layout.scss */
+    /* line 131, ../sass/mobile/_layout.scss */
     .mobile-menu-icon {
       display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 152, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
+  .mobile-super-menu {
+    width: 100% !important; } }
+
+/* line 150, ../sass/mobile/_layout.scss */
+.mobile-super-menu-text {
+  overflow-x: hidden !important;
+  text-overflow: ellipsis !important; }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 155, ../sass/mobile/_layout.scss */
+  .mobile-right-create {
+    width: 0px !important;
+    padding: 0px !important; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 162, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 158, ../sass/mobile/_layout.scss */
-  .mobile-text-hide {
-    width: 0px;
-    overflow: hidden; } }
-
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 165, ../sass/mobile/_layout.scss */
+  /* line 168, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 2d72aba1ff..565c092f20 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -50,11 +50,8 @@
             @include slMenuTransitions;
             width: 0px !important;
             right: auto !important;
-            
-            .createBtnPos {
-                overflow-y: hidden;
-                overflow-x: hidden;
-            }            
+            overflow-y: hidden;
+            overflow-x: hidden;       
         }
     }
 
@@ -73,12 +70,8 @@
             @include slMenuTransitions;
             display: block !important;
             right: auto !important;
-            
-            .createBtnPos {
-                height: inherit;
-                overflow-y: hidden;
-                overflow-x: hidden;
-            }
+            overflow-y: hidden;
+            overflow-x: hidden;
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
@@ -148,6 +141,23 @@
     }       
 }
 
+.mobile-super-menu {
+    @include phoneandtablet {
+        width: 100% !important;
+    }
+}
+
+.mobile-super-menu-text {
+    overflow-x: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
+.mobile-right-create {
+    @include phoneandtablet {
+        width: 0px !important;
+        padding: 0px !important;
+    }
+}
 
 .mobile-hide {
     @include phoneandtablet {
@@ -155,13 +165,6 @@
     }
 }
 
-.mobile-text-hide {
-    @include phoneandtablet {
-        width: 0px;
-        overflow:hidden;
-    }
-}
-
 .phone-hide {
     @include phone {
         display: none;

From 272c6bca97707299c1d36c790bd7ab7f08045874 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 17 Jul 2015 10:50:02 -0700
Subject: [PATCH 072/266] [Mobile] Create Menu

Create menu's is specified/overwritten
with 1000% (change) to fit on mobile).
Also gets rid of the right bar in that view.
---
 .../general/res/css/theme-espresso.css        | 75 ++++++++++---------
 platform/commonUI/general/res/sass/_main.scss |  1 +
 .../general/res/sass/mobile/_layout.scss      | 33 --------
 .../res/sass/mobile/controls/_menus.scss      | 34 +++++++++
 4 files changed, 74 insertions(+), 69 deletions(-)
 create mode 100644 platform/commonUI/general/res/sass/mobile/controls/_menus.scss

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 7a1b471d44..1f0048bb7f 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -836,7 +836,7 @@ mct-container {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 117, ../sass/mobile/_layout.scss */
+  /* line 115, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
     -moz-transition-duration: 0.2s;
@@ -846,50 +846,18 @@ mct-container {
     transition-timing-function: ease; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 124, ../sass/mobile/_layout.scss */
+  /* line 122, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
-/* line 131, ../sass/mobile/_layout.scss */
-.mobile-menu-icon {
-  display: inline-block; }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 131, ../sass/mobile/_layout.scss */
-    .mobile-menu-icon {
-      font-size: 125%; } }
-  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 131, ../sass/mobile/_layout.scss */
-    .mobile-menu-icon {
-      font-size: 175%; } }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 131, ../sass/mobile/_layout.scss */
-    .mobile-menu-icon {
-      display: none; } }
-
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 144, ../sass/mobile/_layout.scss */
-  .mobile-super-menu {
-    width: 100% !important; } }
-
-/* line 150, ../sass/mobile/_layout.scss */
-.mobile-super-menu-text {
-  overflow-x: hidden !important;
-  text-overflow: ellipsis !important; }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 155, ../sass/mobile/_layout.scss */
-  .mobile-right-create {
-    width: 0px !important;
-    padding: 0px !important; } }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 162, ../sass/mobile/_layout.scss */
+  /* line 129, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 168, ../sass/mobile/_layout.scss */
+  /* line 135, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
@@ -2895,6 +2863,41 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
+/* line 2, ../sass/mobile/controls/_menus.scss */
+.mobile-menu-icon {
+  display: inline-block; }
+  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 2, ../sass/mobile/controls/_menus.scss */
+    .mobile-menu-icon {
+      font-size: 125%; } }
+  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 2, ../sass/mobile/controls/_menus.scss */
+    .mobile-menu-icon {
+      font-size: 175%; } }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 2, ../sass/mobile/controls/_menus.scss */
+    .mobile-menu-icon {
+      display: none; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 15, ../sass/mobile/controls/_menus.scss */
+  .mobile-super-menu {
+    width: 100% !important;
+    height: 1000% !important;
+    border-right: 0px !important;
+    padding-right: 0px !important; } }
+
+/* line 24, ../sass/mobile/controls/_menus.scss */
+.mobile-super-menu-text {
+  overflow-x: hidden !important;
+  text-overflow: ellipsis !important; }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 29, ../sass/mobile/controls/_menus.scss */
+  .mobile-right-create {
+    width: 0px !important;
+    padding: 0px !important; } }
+
 /* line 1, ../sass/controls/_time-controller.scss */
 .l-time-controller {
   position: relative;
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 5604ba3cb6..4814cb66c7 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -49,6 +49,7 @@
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
+@import "mobile/controls/menus";
 @import "controls/time-controller";
 @import "edit/editor";
 @import "features/imagery";
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 565c092f20..ff9a89cf55 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -112,8 +112,6 @@
     }
 }
 
-
-
 .button-pos {
     @include phoneandtablet {
         position: absolute;
@@ -128,37 +126,6 @@
     }
 }
 
-.mobile-menu-icon {
-    display: inline-block;
-    @include phone {
-        font-size: 125%;
-    }
-    @include tablet {
-        font-size: 175%;
-    }      
-    @include desktop {
-        display: none;
-    }       
-}
-
-.mobile-super-menu {
-    @include phoneandtablet {
-        width: 100% !important;
-    }
-}
-
-.mobile-super-menu-text {
-    overflow-x: hidden !important;
-    text-overflow: ellipsis !important;
-}
-
-.mobile-right-create {
-    @include phoneandtablet {
-        width: 0px !important;
-        padding: 0px !important;
-    }
-}
-
 .mobile-hide {
     @include phoneandtablet {
         display: none;
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
new file mode 100644
index 0000000000..54c97645eb
--- /dev/null
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -0,0 +1,34 @@
+
+.mobile-menu-icon {
+    display: inline-block;
+    @include phone {
+        font-size: 125%;
+    }
+    @include tablet {
+        font-size: 175%;
+    }      
+    @include desktop {
+        display: none;
+    }       
+}
+
+.mobile-super-menu {
+    @include phoneandtablet {
+        width: 100% !important;
+        height: 1000% !important;
+        border-right: 0px !important;
+        padding-right: 0px !important;
+    }
+}
+
+.mobile-super-menu-text {
+    overflow-x: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
+.mobile-right-create {
+    @include phoneandtablet {
+        width: 0px !important;
+        padding: 0px !important;
+    }
+}
\ No newline at end of file

From 2614427e0ec720cb067bb8ddabd33e5331faaac2 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 17 Jul 2015 14:32:33 -0700
Subject: [PATCH 073/266] [Mobile] Fix

Fixed to open menu fully.
---
 .../general/res/css/theme-espresso.css        | 30 ++++++++-----------
 .../general/res/sass/mobile/_layout.scss      |  2 --
 .../res/sass/mobile/controls/_menus.scss      |  2 --
 3 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1f0048bb7f..3b49a7d862 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -785,9 +785,7 @@ mct-container {
     transition-duration: 0.2s;
     transition-timing-function: ease;
     display: block !important;
-    right: auto !important;
-    overflow-y: hidden;
-    overflow-x: hidden; } }
+    right: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
   /* line 68, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
@@ -805,7 +803,7 @@ mct-container {
   .browse-showtree .pane-special.left {
     width: 25% !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 89, ../sass/mobile/_layout.scss */
+  /* line 87, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     -moz-transition-duration: 0.2s;
     -o-transition-duration: 0.2s;
@@ -814,29 +812,29 @@ mct-container {
     transition-timing-function: ease;
     width: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 89, ../sass/mobile/_layout.scss */
+  /* line 87, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 80% !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 89, ../sass/mobile/_layout.scss */
+  /* line 87, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 30% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 89, ../sass/mobile/_layout.scss */
+  /* line 87, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 35% !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 89, ../sass/mobile/_layout.scss */
+  /* line 87, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
     left: 25% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 109, ../sass/mobile/_layout.scss */
+  /* line 107, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 115, ../sass/mobile/_layout.scss */
+  /* line 113, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
     -moz-transition-duration: 0.2s;
@@ -846,18 +844,18 @@ mct-container {
     transition-timing-function: ease; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 122, ../sass/mobile/_layout.scss */
+  /* line 120, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 129, ../sass/mobile/_layout.scss */
+  /* line 127, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 135, ../sass/mobile/_layout.scss */
+  /* line 133, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
@@ -2882,18 +2880,16 @@ label.checkbox.custom {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 15, ../sass/mobile/controls/_menus.scss */
   .mobile-super-menu {
-    width: 100% !important;
-    height: 1000% !important;
     border-right: 0px !important;
     padding-right: 0px !important; } }
 
-/* line 24, ../sass/mobile/controls/_menus.scss */
+/* line 22, ../sass/mobile/controls/_menus.scss */
 .mobile-super-menu-text {
   overflow-x: hidden !important;
   text-overflow: ellipsis !important; }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 29, ../sass/mobile/controls/_menus.scss */
+  /* line 27, ../sass/mobile/controls/_menus.scss */
   .mobile-right-create {
     width: 0px !important;
     padding: 0px !important; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index ff9a89cf55..c1e42b61bf 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -70,8 +70,6 @@
             @include slMenuTransitions;
             display: block !important;
             right: auto !important;
-            overflow-y: hidden;
-            overflow-x: hidden;
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index 54c97645eb..40b05539d9 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -14,8 +14,6 @@
 
 .mobile-super-menu {
     @include phoneandtablet {
-        width: 100% !important;
-        height: 1000% !important;
         border-right: 0px !important;
         padding-right: 0px !important;
     }

From 6e406fd06050f28136ac47682fd3db014ebb77b6 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 20 Jul 2015 09:16:28 -0700
Subject: [PATCH 074/266] [Mobile] Right Pane sets

Right pane sets the size of itself,
causing the left pane to re-adjust
to fit the screen based on it. Also
transitions work on the slide and the
fade in.
---
 .../general/res/css/theme-espresso.css        | 163 +++++++++++-------
 .../general/res/sass/mobile/_constants.scss   |   8 +-
 .../general/res/sass/mobile/_layout.scss      |  58 ++++---
 .../general/res/sass/mobile/_mixins.scss      |   2 +-
 .../res/sass/mobile/controls/_menus.scss      |   4 +-
 5 files changed, 136 insertions(+), 99 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 3b49a7d862..01221fca13 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -756,106 +756,137 @@ mct-container {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 48, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
     transition-timing-function: ease;
-    width: 0px !important;
-    right: auto !important;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 0;
+    right: 100% !important;
+    width: auto !important;
     overflow-y: hidden;
     overflow-x: hidden; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 58, ../sass/mobile/_layout.scss */
+  /* line 60, ../sass/mobile/_layout.scss */
   .browse-hidetree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
     transition-timing-function: ease;
-    width: auto !important;
-    left: 0px !important; } }
+    left: auto !important;
+    width: 100% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 68, ../sass/mobile/_layout.scss */
+  /* line 70, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.left {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
     transition-timing-function: ease;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 1;
     display: block !important;
-    right: auto !important; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 68, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    width: 80% !important; } }
-@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 68, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    width: 30% !important; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 68, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    width: 35% !important; } }
-@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 68, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    width: 25% !important; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 87, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
-    transition-timing-function: ease;
     width: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 87, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    left: 80% !important; } }
+  /* line 70, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    right: 19px !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 87, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    left: 30% !important; } }
+  /* line 70, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    right: 66% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 87, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    left: 35% !important; } }
+  /* line 70, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    right: 600px !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 87, ../sass/mobile/_layout.scss */
+  /* line 70, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.left {
+    right: 78% !important; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 91, ../sass/mobile/_layout.scss */
   .browse-showtree .pane-special.right {
-    left: 25% !important; } }
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    transition-timing-function: ease;
+    left: auto !important; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 91, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    width: 19px !important; } }
+@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 91, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    width: 66% !important; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 91, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    width: 600px !important; } }
+@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 91, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane-special.right {
+    width: 78% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 107, ../sass/mobile/_layout.scss */
+  /* line 111, ../sass/mobile/_layout.scss */
   .mobile-splitter {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 113, ../sass/mobile/_layout.scss */
+  /* line 117, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
-    -moz-transition-duration: 0.2s;
-    -o-transition-duration: 0.2s;
-    -webkit-transition-duration: 0.2s;
-    transition-duration: 0.2s;
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
     transition-timing-function: ease; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 120, ../sass/mobile/_layout.scss */
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 124, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 124, ../sass/mobile/_layout.scss */
+  .object-header-mobile {
+    position: relative;
+    left: 35px; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 127, ../sass/mobile/_layout.scss */
+  /* line 135, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 133, ../sass/mobile/_layout.scss */
+  /* line 141, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
@@ -2867,11 +2898,11 @@ label.checkbox.custom {
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
     /* line 2, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
-      font-size: 125%; } }
+      font-size: 25px; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
     /* line 2, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
-      font-size: 175%; } }
+      font-size: 29px; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 2, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 2886b8a7e6..448a7fb531 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -67,8 +67,8 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS */
-$phoneMenuSizePortrait: 80%;
-$phoneMenuSizeLandscape: 30%;
-$tabletMenuSizePortrait: 35%;
-$tabletMenuSizeLandscape: 25%;
+$phoneMenuSizePortrait: 19px;
+$phoneMenuSizeLandscape: 66%;
+$tabletMenuSizePortrait: 600px;
+$tabletMenuSizeLandscape: 78%;
 $desktopMenuSize: 25%;
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index c1e42b61bf..09bfa95cba 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -20,8 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// NOTE: Added to adjust the browse folder left list view
-
 .browse-wrapper,
 .pane-special {
     @include phoneandtablet {
@@ -48,8 +46,10 @@
     .pane-special.left {
         @include phoneandtablet {
             @include slMenuTransitions;
-            width: 0px !important;
-            right: auto !important;
+            @include trans-prop-nice(opacity, .35s);
+            opacity: 0;
+            right: 100% !important;
+            width: auto !important;
             overflow-y: hidden;
             overflow-x: hidden;       
         }
@@ -58,8 +58,8 @@
     .pane-special.right {       
         @include phoneandtablet {         
             @include slMenuTransitions;
-            width: auto !important;
-            left: 0px !important;
+            left: auto !important;
+            width: 100% !important;
         }
     }    
 }
@@ -68,8 +68,28 @@
     .pane-special.left {
         @include phoneandtablet {
             @include slMenuTransitions;
+            @include trans-prop-nice(opacity, .4s);
+            opacity: 1;
             display: block !important;
-            right: auto !important;
+            width: auto !important;
+        }
+        @include phonePortrait {
+            right: $phoneMenuSizePortrait !important;
+        }
+        @include phoneLandscape {
+            right: $phoneMenuSizeLandscape !important;
+        }
+        @include tabletPortrait {
+            right: $tabletMenuSizePortrait !important;
+        }
+        @include tabletLandscape {
+            right: $tabletMenuSizeLandscape !important;
+        }
+    }
+    .pane-special.right {
+        @include phoneandtablet {
+            @include slMenuTransitions;
+            left: auto !important;
         }
         @include phonePortrait {
             width: $phoneMenuSizePortrait !important;
@@ -84,24 +104,6 @@
             width: $tabletMenuSizeLandscape !important;
         }
     }
-    .pane-special.right {
-        @include phoneandtablet {
-            @include slMenuTransitions;
-            width: auto !important;
-        }
-        @include phonePortrait {
-            left: $phoneMenuSizePortrait !important;
-        }
-        @include phoneLandscape {
-            left: $phoneMenuSizeLandscape !important;
-        }
-        @include tabletPortrait {
-            left: $tabletMenuSizePortrait !important;
-        }
-        @include tabletLandscape {
-            left: $tabletMenuSizeLandscape !important;
-        }
-    }
 }
 
 .mobile-splitter {
@@ -118,9 +120,13 @@
 }
 
 .object-header-mobile {
-    @include phoneandtablet {
+    @include phone {
         position: relative;
         left: 30px;
+    }    
+    @include tablet {
+        position: relative;
+        left: 35px;
     }
 }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index a3e06d745b..e65963f3f8 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -89,6 +89,6 @@
 }
 
 @mixin slMenuTransitions {
-    @include transition-duration(.2s);
+    @include transition-duration(.35s);
     transition-timing-function: ease;
 }
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index 40b05539d9..3a5b67fa50 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -2,10 +2,10 @@
 .mobile-menu-icon {
     display: inline-block;
     @include phone {
-        font-size: 125%;
+        font-size: 25px;
     }
     @include tablet {
-        font-size: 175%;
+        font-size: 29px;
     }      
     @include desktop {
         display: none;

From ce6d74390e8c1b909159eb50703d90b63011cc5a Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 20 Jul 2015 09:39:06 -0700
Subject: [PATCH 075/266] [Mobile] Clean-Up

Removed unnecessary classes. Also added
comments and adjusted menu sizes.
---
 .../commonUI/browse/res/templates/browse.html |  12 +-
 .../res/templates/create/create-button.html   |   2 +-
 .../res/templates/create/create-menu.html     |   6 +-
 platform/commonUI/general/res/css/forms.css   |   2 +-
 platform/commonUI/general/res/css/items.css   |  16 +--
 .../general/res/css/theme-espresso.css        | 119 +++++++++---------
 platform/commonUI/general/res/css/tree.css    |   2 +-
 .../general/res/sass/mobile/_constants.scss   |  12 +-
 .../general/res/sass/mobile/_item.scss        |  10 +-
 .../general/res/sass/mobile/_layout.scss      |  53 ++++----
 .../res/sass/mobile/controls/_menus.scss      |  42 ++++---
 11 files changed, 139 insertions(+), 137 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index d126d672cb..72d1ab3f1f 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -23,14 +23,9 @@
 <div ng-controller="BrowseController">
     <div content="jquery-wrapper" class="abs holder-all browse-mode">
         <mct-include key="'topbar-browse'"></mct-include>
-        
-        <!-- WRAPPER CLASS IS HERE-->
-        <!-- NG-CLASS HERE TO SWITCH THE PARENT CLASS FOR pane-special's left and right-->
         <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
             <mct-split-pane class='contents abs' anchor='left'>
-            
-                <!-- TREE MENU: ADDED THE PANE LEFT HERE, similar to .pane.left example-->
-                <div class='split-pane-component treeview pane pane-special left desktop-browse'>  
+                <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>  
                     <div class='holder tree-holder abs'>
                         <mct-representation key="'tree'"
                                             mct-object="domainObject"
@@ -41,9 +36,8 @@
                         </mct-representation>
                 </div>
                 
-                <mct-splitter class="mobile-splitter"></mct-splitter>
-                    <!-- ITEMS MENU: ADDED THE PANE RIGHT HERE, similar to .pane.right example-->
-                        <div class='split-pane-component items pane pane-special right'>
+                <mct-splitter class="mobile-hide"></mct-splitter>
+                        <div class='split-pane-component items pane mobile-pane right-repr'>
                             <div class='holder abs' id='content-area'>
                                 <mct-representation mct-object="navigatedObject" key="'browse-object'">
                                 </mct-representation>
diff --git a/platform/commonUI/browse/res/templates/create/create-button.html b/platform/commonUI/browse/res/templates/create/create-button.html
index 4fce8d8f9c..527afd9882 100644
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@@ -23,7 +23,7 @@
     <div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
 	    Create
     </div>
-    <div class="menu dropdown super-menu mobile-super-menu" ng-show="createController.isActive()">
+    <div class="menu dropdown super-menu" ng-show="createController.isActive()">
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>
diff --git a/platform/commonUI/browse/res/templates/create/create-menu.html b/platform/commonUI/browse/res/templates/create/create-menu.html
index e0de7ecc2d..3386d2d266 100644
--- a/platform/commonUI/browse/res/templates/create/create-menu.html
+++ b/platform/commonUI/browse/res/templates/create/create-menu.html
@@ -20,11 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="contents" ng-controller="CreateMenuController">
-    <div class="pane left menu-items mobile-super-menu">
+    <div class="pane left menu-items">
         <ul>
 
             <li ng-repeat="createAction in createActions">
-                <a class="mobile-super-menu-text"
+                <a
                    ng-click="createAction.perform()"
                    ng-mouseover="representation.activeMetadata = createAction.getMetadata()"
                    ng-mouseleave="representation.activeMetadata = undefined">
@@ -37,7 +37,7 @@
 
         </ul>
     </div>
-    <div class="pane right menu-item-description mobile-right-create">
+    <div class="pane right menu-item-description">
         <div class="desc-area ui-symbol icon type-icon">
             {{representation.activeMetadata.glyph}}
         </div>
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 2630143bbf..7d80703443 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -72,7 +72,7 @@
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** DEVICE PARAMETERS FOR MENUS */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 0706514394..b4152de66d 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -72,7 +72,7 @@
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** DEVICE PARAMETERS FOR MENUS */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -351,25 +351,21 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 24, ../sass/mobile/_item.scss */
+  /* line 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 24, ../sass/mobile/_item.scss */
+  /* line 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 100px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 24, ../sass/mobile/_item.scss */
+  /* line 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 49, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .icon {
-    display: none; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 49, ../sass/mobile/_item.scss */
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 52, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .icon {
     display: none; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 01221fca13..6f0704c532 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -73,7 +73,7 @@
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** DEVICE PARAMETERS FOR MENUS */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -737,7 +737,7 @@ mct-container {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 25, ../sass/mobile/_layout.scss */
   .browse-wrapper,
-  .pane-special {
+  .mobile-pane {
     position: absolute;
     left: 0;
     top: 0;
@@ -747,15 +747,15 @@ mct-container {
     height: 100%; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 37, ../sass/mobile/_layout.scss */
+  /* line 38, ../sass/mobile/_layout.scss */
   .desktop-browse {
     min-width: 150px;
     max-width: 800px;
     width: 25%; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 48, ../sass/mobile/_layout.scss */
-  .browse-hidetree .pane-special.left {
+  /* line 50, ../sass/mobile/_layout.scss */
+  .browse-hidetree .mobile-pane.left-menu {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
     -webkit-transition-duration: 0.35s;
@@ -779,8 +779,8 @@ mct-container {
     overflow-y: hidden;
     overflow-x: hidden; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 60, ../sass/mobile/_layout.scss */
-  .browse-hidetree .pane-special.right {
+  /* line 62, ../sass/mobile/_layout.scss */
+  .browse-hidetree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
     -webkit-transition-duration: 0.35s;
@@ -790,8 +790,8 @@ mct-container {
     width: 100% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 70, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
+  /* line 77, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left-menu {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
     -webkit-transition-duration: 0.35s;
@@ -813,24 +813,24 @@ mct-container {
     display: block !important;
     width: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 70, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
+  /* line 77, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left-menu {
     right: 19px !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 70, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
+  /* line 77, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left-menu {
     right: 66% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 70, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
-    right: 600px !important; } }
+  /* line 77, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left-menu {
+    right: 500px !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 70, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.left {
+  /* line 77, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left-menu {
     right: 78% !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 91, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
+  /* line 98, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
     -webkit-transition-duration: 0.35s;
@@ -838,29 +838,24 @@ mct-container {
     transition-timing-function: ease;
     left: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 91, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
+  /* line 98, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
     width: 19px !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 91, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
+  /* line 98, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
     width: 66% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 91, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
-    width: 600px !important; } }
+  /* line 98, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
+    width: 500px !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 91, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane-special.right {
+  /* line 98, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
     width: 78% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 111, ../sass/mobile/_layout.scss */
-  .mobile-splitter {
-    display: none; } }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 117, ../sass/mobile/_layout.scss */
+  /* line 119, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
     -moz-transition-duration: 0.35s;
@@ -870,23 +865,23 @@ mct-container {
     transition-timing-function: ease; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 124, ../sass/mobile/_layout.scss */
+  /* line 129, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 124, ../sass/mobile/_layout.scss */
+  /* line 129, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 35px; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 135, ../sass/mobile/_layout.scss */
+  /* line 141, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 141, ../sass/mobile/_layout.scss */
+  /* line 148, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
@@ -2892,39 +2887,43 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
-/* line 2, ../sass/mobile/controls/_menus.scss */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 25, ../sass/mobile/controls/_menus.scss */
 .mobile-menu-icon {
   display: inline-block; }
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 2, ../sass/mobile/controls/_menus.scss */
+    /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
       font-size: 25px; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 2, ../sass/mobile/controls/_menus.scss */
+    /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
       font-size: 29px; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 2, ../sass/mobile/controls/_menus.scss */
+    /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
       display: none; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 15, ../sass/mobile/controls/_menus.scss */
-  .mobile-super-menu {
-    border-right: 0px !important;
-    padding-right: 0px !important; } }
-
-/* line 22, ../sass/mobile/controls/_menus.scss */
-.mobile-super-menu-text {
-  overflow-x: hidden !important;
-  text-overflow: ellipsis !important; }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 27, ../sass/mobile/controls/_menus.scss */
-  .mobile-right-create {
-    width: 0px !important;
-    padding: 0px !important; } }
-
 /* line 1, ../sass/controls/_time-controller.scss */
 .l-time-controller {
   position: relative;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index aba2210cf6..3fe58b337d 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -72,7 +72,7 @@
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** DEVICE PARAMETERS FOR MENUS */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 448a7fb531..27761e2132 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -66,9 +66,9 @@ $tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mo
 $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLanscapeCheck}";
 
-/************************** DEVICE PARAMETERS FOR MENUS */
-$phoneMenuSizePortrait: 19px;
-$phoneMenuSizeLandscape: 66%;
-$tabletMenuSizePortrait: 600px;
-$tabletMenuSizeLandscape: 78%;
-$desktopMenuSize: 25%;
\ No newline at end of file
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
+$phoneRepSizePortrait: 19px;
+$phoneRepSizeLandscape: 66%;
+$tabletRepSizePortrait: 500px;
+$tabletRepSizeLandscape: 78%;
+$desktopMenuSize: 25%;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index c6e9deabf5..2b74671628 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -19,10 +19,13 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+// Sets the size of the items in the folder
+// representation. Instead of a grid,
+// a list is used.
 .items-holder {
     .item {
         &.grid-item {
-//            NOTE: Sets grid item width
             $dWid: $ueBrowseGridItemLg;
             $dHei: $ueBrowseGridItemLg;
             @include phone {
@@ -47,12 +50,9 @@
             }
             
             .icon {
-                @include phone {
+                @include phoneandtablet {
                     display: none;
                 }
-                @include tablet {
-                    display: none;   
-                }
             }
         }
     }
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 09bfa95cba..014aa8ca3d 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -20,8 +20,10 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+// Wrapper of the entire 2 panes, only enacted on
+// phone and tablet. Also for the panes
 .browse-wrapper,
-.pane-special {
+.mobile-pane {
     @include phoneandtablet {
         position: absolute;
         left: 0; top: 0;
@@ -31,7 +33,8 @@
     }
 }
 
-
+// Default views of the panels
+// if in desktop browser
 .desktop-browse {
     @include desktop {
         min-width: 150px;
@@ -40,10 +43,11 @@
     }   
 }
 
-
-
+// When the tree is hidden, these are the
+// classes used for the left menu and the
+// right representation.
 .browse-hidetree {
-    .pane-special.left {
+    .mobile-pane.left-menu {
         @include phoneandtablet {
             @include slMenuTransitions;
             @include trans-prop-nice(opacity, .35s);
@@ -55,7 +59,7 @@
         }
     }
 
-    .pane-special.right {       
+    .mobile-pane.right-repr {       
         @include phoneandtablet {         
             @include slMenuTransitions;
             left: auto !important;
@@ -64,8 +68,13 @@
     }    
 }
 
+// When the tree is shown, these are
+// the classes used for the left menu
+// and the right menu (for each device &
+// orientation combination, separate 
+// parameters are used)
 .browse-showtree {
-    .pane-special.left {
+    .mobile-pane.left-menu {
         @include phoneandtablet {
             @include slMenuTransitions;
             @include trans-prop-nice(opacity, .4s);
@@ -74,44 +83,39 @@
             width: auto !important;
         }
         @include phonePortrait {
-            right: $phoneMenuSizePortrait !important;
+            right: $phoneRepSizePortrait !important;
         }
         @include phoneLandscape {
-            right: $phoneMenuSizeLandscape !important;
+            right: $phoneRepSizeLandscape !important;
         }
         @include tabletPortrait {
-            right: $tabletMenuSizePortrait !important;
+            right: $tabletRepSizePortrait !important;
         }
         @include tabletLandscape {
-            right: $tabletMenuSizeLandscape !important;
+            right: $tabletRepSizeLandscape !important;
         }
     }
-    .pane-special.right {
+    .mobile-pane.right-repr {
         @include phoneandtablet {
             @include slMenuTransitions;
             left: auto !important;
         }
         @include phonePortrait {
-            width: $phoneMenuSizePortrait !important;
+            width: $phoneRepSizePortrait !important;
         }
         @include phoneLandscape {
-            width: $phoneMenuSizeLandscape !important;
+            width: $phoneRepSizeLandscape !important;
         }
         @include tabletPortrait {
-            width: $tabletMenuSizePortrait !important;
+            width: $tabletRepSizePortrait !important;
         }
         @include tabletLandscape {
-            width: $tabletMenuSizeLandscape !important;
+            width: $tabletRepSizeLandscape !important;
         }
     }
 }
 
-.mobile-splitter {
-    @include phoneandtablet {
-        display: none;
-    }
-}
-
+// Button position is set as absolute with transitions
 .button-pos {
     @include phoneandtablet {
         position: absolute;
@@ -119,6 +123,9 @@
     }
 }
 
+// Object header must be moved
+// over to make space for the 
+// hamburger icon
 .object-header-mobile {
     @include phone {
         position: relative;
@@ -130,12 +137,14 @@
     }
 }
 
+// Hides objects on phone and tablet
 .mobile-hide {
     @include phoneandtablet {
         display: none;
     }
 }
 
+// Hides objects only on the phone
 .phone-hide {
     @include phone {
         display: none;
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index 3a5b67fa50..9b0136b5b3 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -1,4 +1,27 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 
+// Mobile hamburger icon is
+// sized according to the device
 .mobile-menu-icon {
     display: inline-block;
     @include phone {
@@ -11,22 +34,3 @@
         display: none;
     }       
 }
-
-.mobile-super-menu {
-    @include phoneandtablet {
-        border-right: 0px !important;
-        padding-right: 0px !important;
-    }
-}
-
-.mobile-super-menu-text {
-    overflow-x: hidden !important;
-    text-overflow: ellipsis !important;
-}
-
-.mobile-right-create {
-    @include phoneandtablet {
-        width: 0px !important;
-        padding: 0px !important;
-    }
-}
\ No newline at end of file

From 4e6c307684ce57eba6812eff27a095482faea2a1 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 20 Jul 2015 09:48:12 -0700
Subject: [PATCH 076/266] [Mobile] Transition

Adjusts transition time on fade.
---
 platform/commonUI/general/res/css/theme-espresso.css   | 8 ++++----
 platform/commonUI/general/res/sass/mobile/_layout.scss | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6f0704c532..0b65157070 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -765,10 +765,10 @@ mct-container {
     -o-transition-property: opacity;
     -webkit-transition-property: opacity;
     transition-property: opacity;
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
     -moz-transition-timing-function: ease-in-out;
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 014aa8ca3d..667e2949c4 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -50,7 +50,7 @@
     .mobile-pane.left-menu {
         @include phoneandtablet {
             @include slMenuTransitions;
-            @include trans-prop-nice(opacity, .35s);
+            @include trans-prop-nice(opacity, .4s);
             opacity: 0;
             right: 100% !important;
             width: auto !important;

From f98915cdddc232ed1579450642ed15f50461699b Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 20 Jul 2015 09:51:37 -0700
Subject: [PATCH 077/266] [Mobile] Comments

Added comments to the mixin list.
---
 platform/commonUI/general/res/sass/mobile/_mixins.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index e65963f3f8..a867b49834 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -88,6 +88,7 @@
     }
 }
 
+// Transition used for the slide menu
 @mixin slMenuTransitions {
     @include transition-duration(.35s);
     transition-timing-function: ease;

From dcdafbaebf230fe9ee678515502a65f3b38cc9fb Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 20 Jul 2015 10:25:27 -0700
Subject: [PATCH 078/266] [Mobile] Fix Shift

Shifting occurring during transition
fixed by making transition backface-
visibility hidden during the
transition.
---
 platform/commonUI/general/res/css/theme-espresso.css   | 7 ++++++-
 platform/commonUI/general/res/sass/mobile/_mixins.scss | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 0b65157070..6979a0df40 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -761,6 +761,7 @@ mct-container {
     -webkit-transition-duration: 0.35s;
     transition-duration: 0.35s;
     transition-timing-function: ease;
+    backface-visibility: hidden;
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
     -webkit-transition-property: opacity;
@@ -786,6 +787,7 @@ mct-container {
     -webkit-transition-duration: 0.35s;
     transition-duration: 0.35s;
     transition-timing-function: ease;
+    backface-visibility: hidden;
     left: auto !important;
     width: 100% !important; } }
 
@@ -797,6 +799,7 @@ mct-container {
     -webkit-transition-duration: 0.35s;
     transition-duration: 0.35s;
     transition-timing-function: ease;
+    backface-visibility: hidden;
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
     -webkit-transition-property: opacity;
@@ -836,6 +839,7 @@ mct-container {
     -webkit-transition-duration: 0.35s;
     transition-duration: 0.35s;
     transition-timing-function: ease;
+    backface-visibility: hidden;
     left: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
   /* line 98, ../sass/mobile/_layout.scss */
@@ -862,7 +866,8 @@ mct-container {
     -o-transition-duration: 0.35s;
     -webkit-transition-duration: 0.35s;
     transition-duration: 0.35s;
-    transition-timing-function: ease; } }
+    transition-timing-function: ease;
+    backface-visibility: hidden; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 129, ../sass/mobile/_layout.scss */
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index a867b49834..23ce4cff2a 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -92,4 +92,5 @@
 @mixin slMenuTransitions {
     @include transition-duration(.35s);
     transition-timing-function: ease;
+    backface-visibility: hidden;
 }

From 56e51ea32a6155d1875e1bc0b219a3be31448e89 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 21 Jul 2015 13:29:45 -0700
Subject: [PATCH 079/266] [Mobile] Reformat of menu

Reformats menu to move the
arrow to the right and now
that is what selects an object.
Pressing the actual menu item will
enact the dropdown menu. This
only happens on mobile platforms.
---
 .../commonUI/browse/src/BrowseController.js   |  2 -
 platform/commonUI/general/bundle.json         |  7 +-
 platform/commonUI/general/res/css/tree.css    | 39 +++++++++
 .../general/res/sass/mobile/_constants.scss   |  4 +-
 .../general/res/sass/mobile/_item.scss        |  2 +-
 .../general/res/sass/mobile/_tree.scss        | 57 +++++++++++--
 .../general/res/templates/tree-node.html      | 24 +++---
 .../src/controllers/TreeNodeController.js     | 11 ++-
 .../general/src/services/QueryService.js      | 85 +++++++++++++++++++
 9 files changed, 204 insertions(+), 27 deletions(-)
 create mode 100644 platform/commonUI/general/src/services/QueryService.js

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index b05793b15f..9bf040d3eb 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -143,8 +143,6 @@ define(
             
             $scope.treeSlide = function () {
                 $scope.treeClass = !$scope.treeClass;
-                // FUTURE: Remove before merge
-                console.log($scope.treeClass ? "browse-showtree" : "browse-hidetree");
             };
 
             // Listen for changes in navigation state.
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 2093a988cd..25635d6093 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -8,6 +8,11 @@
                 "key": "urlService",
                 "implementation": "/services/UrlService.js",
                 "depends": [ "$location" ]
+            },
+            {
+                "key": "queryService",
+                "implementation": "/services/QueryService.js",
+                "depends": [ "$window" ]
             }
         ],
         "runs": [
@@ -60,7 +65,7 @@
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",
-                "depends": [ "$scope", "$timeout" ]
+                "depends": [ "$scope", "$timeout", "queryService" ]
             },
             {
                 "key": "ActionGroupController",
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 3fe58b337d..fbbd16e929 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -306,3 +306,42 @@ ul.tree {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 22, ../sass/mobile/_tree.scss */
+  .test-tree-words {
+    margin-bottom: 7px;
+    width: 90%;
+    text-overflow: ellipsis; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 30, ../sass/mobile/_tree.scss */
+  ul.tree {
+    margin: 0;
+    padding: 0; }
+    /* line 267, ../sass/_mixins.scss */
+    ul.tree li {
+      list-style-type: none;
+      margin: 0;
+      padding: 0; }
+    /* line 39, ../sass/mobile/_tree.scss */
+    ul.tree li span.tree-item .label {
+      left: 3px; }
+      /* line 43, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .label .type-icon .alert {
+        right: auto;
+        left: 9px; }
+      /* line 48, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .label .title-label {
+        left: 20px; }
+    /* line 53, ../sass/mobile/_tree.scss */
+    ul.tree li span.tree-item .context-trigger {
+      right: 3px; }
+    /* line 57, ../sass/mobile/_tree.scss */
+    ul.tree li span.tree-item .view-control {
+      position: relative;
+      left: 100%;
+      right: 0;
+      font-size: 1.5em; }
+    /* line 67, ../sass/mobile/_tree.scss */
+    ul.tree ul.tree {
+      margin-left: 3px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 27761e2132..198bf6f652 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -52,7 +52,7 @@ $tabHeiLanCheck: "(min-width: #{$tabMinH}) and (max-width: #{$tabMaxH})";
 $tabletLandscapeCheck: "#{$tabWidLanCheck} and #{$tabHeiLanCheck}";
 
 $desktopPortraitCheck: "(min-device-width: #{$compMinW}) and (min-device-height: #{$compMinH})";
-$desktopLanscapeCheck: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
+$desktopLandscapeCheck: "(min-device-width: #{$compMinH}) and (min-device-height: #{$compMinW})";
 
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 $phonePortrait: "#{$screenPortrait} and #{$phonePortraitCheck} and #{$mobileDevice}";
@@ -64,7 +64,7 @@ $tabletLandscape: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobil
 $tabletLandscapeEmu: "#{$screenLandscape} and #{$tabletLandscapeCheck} and #{$mobileDeviceEmu}";
 
 $desktopPortrait: "screen and #{$desktopPortraitCheck}";
-$desktopLandscape: "screen and #{$desktopLanscapeCheck}";
+$desktopLandscape: "screen and #{$desktopLandscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 $phoneRepSizePortrait: 19px;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 2b74671628..9542645136 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -56,4 +56,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 673ff6c066..5d24928a4b 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -19,12 +19,53 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+.test-tree-words {
+    @include phoneandtablet {
+        margin-bottom: 7px;
+        width: 90%;
+        text-overflow: ellipsis;
+    }
+}
 
-//mobile-flat-list {
-//	// For lists of tree-items that are flat. Remove margin, etc. normally needed for the expansion arrow.
-//	.tree-item {
-//        .label {
-//			left: -100px;
-//		}
-//	}
-//}
\ No newline at end of file
+ul.tree {
+    @include phoneandtablet {
+        @include menuUlReset();
+        li {
+            span.tree-item {
+                $runningItemW: 0;
+                $customMargin: auto;
+                $runningItemW: $interiorMargin + $treeVCW;
+
+                .label {
+                    left: 3px;
+
+                    .type-icon {
+                        .alert {
+                            right: auto;
+                            left: 9px;
+                        }
+                    }
+                    .title-label {
+                        left: $runningItemW + ($interiorMargin);
+                    }
+                }
+
+                .context-trigger {
+                    right: $interiorMarginSm;
+                }
+                
+                .view-control {
+                    position: relative;
+                    left: 100%;
+                    right: 0;
+                    font-size: 1.5em;
+                    $runningItemW: $interiorMargin + $treeVCW;
+                }                
+            }
+        }
+
+        ul.tree {
+            margin-left: 3px;
+        }
+    }
+}
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index f584befb1a..2e4c48ec3a 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -22,23 +22,25 @@
 <span ng-controller="ToggleController as toggle">
     <span ng-controller="TreeNodeController as treeNode">
         <span
-	        class="tree-item menus-to-left"
+	        class="tree-item menus-to-left test-tree-words"
 	        ng-class="{selected: treeNode.isSelected()}"
 	        >
-            <span
-	            class='ui-symbol view-control'
-				ng-click="toggle.toggle(); treeNode.trackExpansion()"
-				ng-if="model.composition !== undefined"
-				>
-                {{toggle.isActive() ? "v" : ">"}}
-            </span>
-            <mct-representation
-				key="'label'"
+            <mct-representation                                
+                key="'label'"
 				mct-object="domainObject"
 				ng-model="ngModel"
-				ng-click="ngModel.selectedObject = domainObject"
+				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
 				>
             </mct-representation>
+            <span
+	            class='ui-symbol view-control'
+                mct-object="domainObject"
+                ng-model="ngModel"
+				ng-click="treeNode.checkMobile() ? ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
+				ng-if="model.composition !== undefined || treeNode.checkMobile()"
+				>
+                {{treeNode.checkMobile() ? ">" : toggle.isActive() ? "v" : ">"}}
+            </span>            
         </span>
         <span
 			class="tree-item-subtree"
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index cfb70357bb..2a219fa499 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -50,7 +50,7 @@ define(
          * expand-to-show-navigated-object behavior.)
          * @constructor
          */
-        function TreeNodeController($scope, $timeout) {
+        function TreeNodeController($scope, $timeout, queryService) {
             var selectedObject = ($scope.ngModel || {}).selectedObject,
                 isSelected = false,
                 hasBeenExpanded = false;
@@ -86,7 +86,11 @@ define(
                     $timeout(function () { hasBeenExpanded = true; }, 0);
                 }
             }
-
+            
+            function checkMobile() {
+                return queryService.isMobile();
+            }
+            
             // Consider the currently-navigated object and update
             // parameters which support display.
             function checkSelection() {
@@ -150,6 +154,9 @@ define(
                  * lazy loading of the node's subtree.
                  */
                 trackExpansion: trackExpansion,
+                
+                checkMobile: checkMobile,
+                
                 /**
                  * Check if this not has ever been expanded.
                  * @returns true if it has been expanded
diff --git a/platform/commonUI/general/src/services/QueryService.js b/platform/commonUI/general/src/services/QueryService.js
new file mode 100644
index 0000000000..11b278f7a8
--- /dev/null
+++ b/platform/commonUI/general/src/services/QueryService.js
@@ -0,0 +1,85 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+/**
+ * Module defining QueryService.
+ */
+
+var phoMaxWidth = 514,
+    phoMaxHeight = 740,
+
+    tabMinWidth = 515,
+    tabMaxWidth = 799,
+
+    tabMinHeight = 741,
+    tabMaxHeight = 1024,
+
+    compMinWidth = 800,
+    compMinHeight = 1025;
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * The url service handles calls for url paths
+         * using domain objects.
+         */
+        function QueryService($window) {
+            
+            
+            
+            function getDeviceUA() {
+                var ua = navigator.userAgent;
+                return ua.match(/iPad|iPhone|Android/i) ?
+                        ua.match(/iPad|iPhone|Android/i) : "";
+            }
+            
+            function isMobile() {
+                if (getDeviceUA()) {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
+
+            
+            function getOrientation(screenWidth, screenHeight) {
+                if ($window.screen.width > $window.screen.height) {
+                    return "landscape";
+                } else if ($window.screen.width < $window.screen.height) {
+                    return "portrait";
+                }
+            }
+         
+            return {
+                getOrientation: getOrientation,
+                
+                isMobile: isMobile
+            };
+        }
+
+        return QueryService;
+    }
+);
\ No newline at end of file

From 0842f464db62c584b758ec970f5020e842a6f532 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 21 Jul 2015 14:29:13 -0700
Subject: [PATCH 080/266] [Mobile] Menu Adjustment

Makes highlight go all the way to right.
Also makes the arrow be absolute on the
right side, making it aligned to right.
---
 platform/commonUI/general/res/css/tree.css    | 22 +++++++++----------
 .../general/res/sass/mobile/_tree.scss        | 10 ++++-----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index fbbd16e929..ddffb9899b 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -309,12 +309,13 @@ ul.tree {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 22, ../sass/mobile/_tree.scss */
   .test-tree-words {
-    margin-bottom: 7px;
-    width: 90%;
+    margin-bottom: 4px;
+    margin-bottom: 4px;
+    width: 100%;
     text-overflow: ellipsis; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 30, ../sass/mobile/_tree.scss */
+  /* line 31, ../sass/mobile/_tree.scss */
   ul.tree {
     margin: 0;
     padding: 0; }
@@ -323,24 +324,23 @@ ul.tree {
       list-style-type: none;
       margin: 0;
       padding: 0; }
-    /* line 39, ../sass/mobile/_tree.scss */
+    /* line 40, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .label {
       left: 3px; }
-      /* line 43, ../sass/mobile/_tree.scss */
+      /* line 44, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label .type-icon .alert {
         right: auto;
         left: 9px; }
-      /* line 48, ../sass/mobile/_tree.scss */
+      /* line 49, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label .title-label {
         left: 20px; }
-    /* line 53, ../sass/mobile/_tree.scss */
+    /* line 54, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .context-trigger {
       right: 3px; }
-    /* line 57, ../sass/mobile/_tree.scss */
+    /* line 58, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .view-control {
-      position: relative;
-      left: 100%;
-      right: 0;
+      position: absolute;
+      right: 5px;
       font-size: 1.5em; }
     /* line 67, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 5d24928a4b..a0e428fd1c 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -21,8 +21,9 @@
  *****************************************************************************/
 .test-tree-words {
     @include phoneandtablet {
-        margin-bottom: 7px;
-        width: 90%;
+        margin-bottom: 4px;
+        margin-bottom: 4px;
+        width: 100%;
         text-overflow: ellipsis;
     }
 }
@@ -55,9 +56,8 @@ ul.tree {
                 }
                 
                 .view-control {
-                    position: relative;
-                    left: 100%;
-                    right: 0;
+                    position: absolute;
+                    right: 5px;
                     font-size: 1.5em;
                     $runningItemW: $interiorMargin + $treeVCW;
                 }                

From 827cb27f28d89fbcc9cd8ad6e518eebfcb3d4c87 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 21 Jul 2015 16:19:59 -0700
Subject: [PATCH 081/266] [Mobile] Menu

Added margin to top of tree list items.
Also removed hovering Info coming
up on mobile devices.
---
 platform/commonUI/general/res/css/tree.css    | 45 ++++++++++---------
 .../general/res/sass/mobile/_tree.scss        |  3 +-
 .../general/res/templates/tree-node.html      |  8 ++--
 platform/commonUI/inspect/bundle.json         |  1 +
 .../inspect/src/gestures/InfoGesture.js       | 31 +++++++------
 5 files changed, 48 insertions(+), 40 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index ddffb9899b..2dd23415b9 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -309,13 +309,11 @@ ul.tree {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 22, ../sass/mobile/_tree.scss */
   .test-tree-words {
-    margin-bottom: 4px;
-    margin-bottom: 4px;
     width: 100%;
     text-overflow: ellipsis; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 31, ../sass/mobile/_tree.scss */
+  /* line 29, ../sass/mobile/_tree.scss */
   ul.tree {
     margin: 0;
     padding: 0; }
@@ -324,24 +322,27 @@ ul.tree {
       list-style-type: none;
       margin: 0;
       padding: 0; }
-    /* line 40, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item .label {
-      left: 3px; }
-      /* line 44, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .label .type-icon .alert {
-        right: auto;
-        left: 9px; }
-      /* line 49, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .label .title-label {
-        left: 20px; }
-    /* line 54, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item .context-trigger {
-      right: 3px; }
-    /* line 58, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item .view-control {
-      position: absolute;
-      right: 5px;
-      font-size: 1.5em; }
-    /* line 67, ../sass/mobile/_tree.scss */
+    /* line 33, ../sass/mobile/_tree.scss */
+    ul.tree li span.tree-item {
+      margin-top: 3px; }
+      /* line 39, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .label {
+        left: 3px; }
+        /* line 43, ../sass/mobile/_tree.scss */
+        ul.tree li span.tree-item .label .type-icon .alert {
+          right: auto;
+          left: 9px; }
+        /* line 48, ../sass/mobile/_tree.scss */
+        ul.tree li span.tree-item .label .title-label {
+          left: 20px; }
+      /* line 53, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .context-trigger {
+        right: 3px; }
+      /* line 57, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .view-control {
+        position: absolute;
+        right: 5px;
+        font-size: 1.5em; }
+    /* line 66, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
       margin-left: 3px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index a0e428fd1c..c50d9f71d1 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -21,8 +21,6 @@
  *****************************************************************************/
 .test-tree-words {
     @include phoneandtablet {
-        margin-bottom: 4px;
-        margin-bottom: 4px;
         width: 100%;
         text-overflow: ellipsis;
     }
@@ -36,6 +34,7 @@ ul.tree {
                 $runningItemW: 0;
                 $customMargin: auto;
                 $runningItemW: $interiorMargin + $treeVCW;
+                margin-top: $interiorMarginSm;
 
                 .label {
                     left: 3px;
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 2e4c48ec3a..03b6808dca 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -29,18 +29,20 @@
                 key="'label'"
 				mct-object="domainObject"
 				ng-model="ngModel"
-				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
+				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
+                          toggle.toggle(); treeNode.trackExpansion()"
 				>
             </mct-representation>
             <span
 	            class='ui-symbol view-control'
                 mct-object="domainObject"
                 ng-model="ngModel"
-				ng-click="treeNode.checkMobile() ? ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
+				ng-click="treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
+                          toggle.toggle(); treeNode.trackExpansion()"
 				ng-if="model.composition !== undefined || treeNode.checkMobile()"
 				>
                 {{treeNode.checkMobile() ? ">" : toggle.isActive() ? "v" : ">"}}
-            </span>            
+            </span>
         </span>
         <span
 			class="tree-item-subtree"
diff --git a/platform/commonUI/inspect/bundle.json b/platform/commonUI/inspect/bundle.json
index 51244b2bf2..7a2123486b 100644
--- a/platform/commonUI/inspect/bundle.json
+++ b/platform/commonUI/inspect/bundle.json
@@ -24,6 +24,7 @@
                 "implementation": "gestures/InfoGesture.js",
                 "depends": [
                     "$timeout",
+                    "queryService",
                     "infoService",
                     "INFO_HOVER_DELAY"
                 ]
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 879cc2ac36..c40a2baac2 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -38,7 +38,7 @@ define(
          * @param {DomainObject} domainObject the domain object for which to
          *        show information
          */
-        function InfoGesture($timeout, infoService, DELAY, element, domainObject) {
+        function InfoGesture($timeout, queryService, infoService, DELAY, element, domainObject) {
             var dismissBubble,
                 pendingBubble,
                 mousePosition,
@@ -75,21 +75,26 @@ define(
                 // Also need to track position during hover
                 element.on('mousemove', trackPosition);
 
-                // Show the bubble, after a suitable delay (if mouse has
-                // left before this time is up, this will be canceled.)
-                pendingBubble = $timeout(function () {
-                    dismissBubble = infoService.display(
-                        "info-table",
-                        domainObject.getModel().name,
-                        domainObject.useCapability('metadata'),
-                        mousePosition
-                    );
-                    element.off('mousemove', trackPosition);
-                    pendingBubble = undefined;
-                }, DELAY);
+                // Checks if you are on a mobile device, if the device is
+                // mobile, then hovering is not done.
+                if (!queryService.isMobile()) {
+                    // Show the bubble, after a suitable delay (if mouse has
+                    // left before this time is up, this will be canceled.)
+                    pendingBubble = $timeout(function () {
+                        dismissBubble = infoService.display(
+                            "info-table",
+                            domainObject.getModel().name,
+                            domainObject.useCapability('metadata'),
+                            mousePosition
+                        );
+                        element.off('mousemove', trackPosition);
 
+                        pendingBubble = undefined;
+                    }, DELAY);
+                }
                 element.on('mouseleave', hideBubble);
             }
+            
 
             // Show bubble (on a timeout) on mouse over
             element.on('mouseenter', showBubble);

From 926b3d075ccfbdb07cf94b75939ecfdd7758ded1 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 22 Jul 2015 10:25:21 -0700
Subject: [PATCH 082/266] [Mobile] Clean Up

Cleaned up scss files. Removed
repeated statements and added
comments. Also commented js files
like QueryService and InfoGesture.
---
 .../general/res/css/theme-espresso.css        | 34 +++++++-------
 platform/commonUI/general/res/css/tree.css    | 33 ++++---------
 .../general/res/sass/mobile/_layout.scss      | 12 +++++
 .../general/res/sass/mobile/_tree.scss        | 47 +++++++------------
 .../general/res/templates/tree-node.html      |  2 +-
 .../general/src/services/QueryService.js      | 39 +++++++--------
 .../inspect/src/gestures/InfoGesture.js       |  3 +-
 7 files changed, 79 insertions(+), 91 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6979a0df40..4ea71cfdf8 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -754,7 +754,7 @@ mct-container {
     width: 25%; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 50, ../sass/mobile/_layout.scss */
+  /* line 52, ../sass/mobile/_layout.scss */
   .browse-hidetree .mobile-pane.left-menu {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -780,7 +780,7 @@ mct-container {
     overflow-y: hidden;
     overflow-x: hidden; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 62, ../sass/mobile/_layout.scss */
+  /* line 66, ../sass/mobile/_layout.scss */
   .browse-hidetree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -792,7 +792,7 @@ mct-container {
     width: 100% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 77, ../sass/mobile/_layout.scss */
+  /* line 83, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -816,23 +816,23 @@ mct-container {
     display: block !important;
     width: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 77, ../sass/mobile/_layout.scss */
+  /* line 83, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     right: 19px !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 77, ../sass/mobile/_layout.scss */
+  /* line 83, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     right: 66% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 77, ../sass/mobile/_layout.scss */
+  /* line 83, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     right: 500px !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 77, ../sass/mobile/_layout.scss */
+  /* line 83, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     right: 78% !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 98, ../sass/mobile/_layout.scss */
+  /* line 108, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -842,24 +842,24 @@ mct-container {
     backface-visibility: hidden;
     left: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 98, ../sass/mobile/_layout.scss */
+  /* line 108, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     width: 19px !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 98, ../sass/mobile/_layout.scss */
+  /* line 108, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     width: 66% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 98, ../sass/mobile/_layout.scss */
+  /* line 108, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     width: 500px !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 98, ../sass/mobile/_layout.scss */
+  /* line 108, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     width: 78% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 119, ../sass/mobile/_layout.scss */
+  /* line 131, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
     -moz-transition-duration: 0.35s;
@@ -870,23 +870,23 @@ mct-container {
     backface-visibility: hidden; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 129, ../sass/mobile/_layout.scss */
+  /* line 141, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 129, ../sass/mobile/_layout.scss */
+  /* line 141, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 35px; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 141, ../sass/mobile/_layout.scss */
+  /* line 153, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 148, ../sass/mobile/_layout.scss */
+  /* line 160, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 2dd23415b9..9d2ee8c87d 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -307,13 +307,7 @@ ul.tree {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 22, ../sass/mobile/_tree.scss */
-  .test-tree-words {
-    width: 100%;
-    text-overflow: ellipsis; } }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 29, ../sass/mobile/_tree.scss */
+  /* line 24, ../sass/mobile/_tree.scss */
   ul.tree {
     margin: 0;
     padding: 0; }
@@ -322,27 +316,20 @@ ul.tree {
       list-style-type: none;
       margin: 0;
       padding: 0; }
-    /* line 33, ../sass/mobile/_tree.scss */
+    /* line 29, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item {
       margin-top: 3px; }
-      /* line 39, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .label {
-        left: 3px; }
-        /* line 43, ../sass/mobile/_tree.scss */
-        ul.tree li span.tree-item .label .type-icon .alert {
-          right: auto;
-          left: 9px; }
-        /* line 48, ../sass/mobile/_tree.scss */
-        ul.tree li span.tree-item .label .title-label {
-          left: 20px; }
-      /* line 53, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .context-trigger {
-        right: 3px; }
-      /* line 57, ../sass/mobile/_tree.scss */
+      /* line 32, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .view-control {
         position: absolute;
         right: 5px;
         font-size: 1.5em; }
-    /* line 66, ../sass/mobile/_tree.scss */
+      /* line 38, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .label {
+        left: 3px; }
+        /* line 44, ../sass/mobile/_tree.scss */
+        ul.tree li span.tree-item .label .title-label {
+          right: 5px; }
+    /* line 53, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
       margin-left: 3px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 667e2949c4..e2699b62c6 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -47,6 +47,8 @@
 // classes used for the left menu and the
 // right representation.
 .browse-hidetree {
+    // Sets the left tree menu when the tree
+    // is hidden. 
     .mobile-pane.left-menu {
         @include phoneandtablet {
             @include slMenuTransitions;
@@ -59,6 +61,8 @@
         }
     }
 
+    // Sets the right represenation when
+    // the tree is hidden. 
     .mobile-pane.right-repr {       
         @include phoneandtablet {         
             @include slMenuTransitions;
@@ -74,6 +78,8 @@
 // orientation combination, separate 
 // parameters are used)
 .browse-showtree {
+    // Sets the left tree menu when the tree
+    // is shown.     
     .mobile-pane.left-menu {
         @include phoneandtablet {
             @include slMenuTransitions;
@@ -82,6 +88,8 @@
             display: block !important;
             width: auto !important;
         }
+        // On both phones and tablets, the amount of
+        // space allowed for the right pane is specified
         @include phonePortrait {
             right: $phoneRepSizePortrait !important;
         }
@@ -95,11 +103,15 @@
             right: $tabletRepSizeLandscape !important;
         }
     }
+    // Sets the right represenation when
+    // the tree is shown.     
     .mobile-pane.right-repr {
         @include phoneandtablet {
             @include slMenuTransitions;
             left: auto !important;
         }
+        // On both phones and tablets, the width of
+        // the right pane is specified
         @include phonePortrait {
             width: $phoneRepSizePortrait !important;
         }
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index c50d9f71d1..c0806a806c 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -19,50 +19,37 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-.test-tree-words {
-    @include phoneandtablet {
-        width: 100%;
-        text-overflow: ellipsis;
-    }
-}
+
 
 ul.tree {
+    // Only applies to phones and tablets
     @include phoneandtablet {
         @include menuUlReset();
         li {
             span.tree-item {
-                $runningItemW: 0;
-                $customMargin: auto;
-                $runningItemW: $interiorMargin + $treeVCW;
+                // Adds some space to the top of each tree item
                 margin-top: $interiorMarginSm;
-
-                .label {
-                    left: 3px;
-
-                    .type-icon {
-                        .alert {
-                            right: auto;
-                            left: 9px;
-                        }
-                    }
-                    .title-label {
-                        left: $runningItemW + ($interiorMargin);
-                    }
-                }
-
-                .context-trigger {
-                    right: $interiorMarginSm;
-                }
-                
                 .view-control {
                     position: absolute;
                     right: 5px;
                     font-size: 1.5em;
-                    $runningItemW: $interiorMargin + $treeVCW;
-                }                
+                }                   
+
+                .label {
+                    // Designates the starting left margin
+                    // (indentation) of 'My Items'
+                    left: 3px;
+                    // Allows tree item name to stop prior
+                    // to the arrow
+                    .title-label {
+                        right: 5px;
+                    }                    
+                }             
             }
         }
 
+        // Sets the margin on the left, which causes the
+        // running indentation after each folder is made
         ul.tree {
             margin-left: 3px;
         }
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 03b6808dca..6f791cfa75 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -22,7 +22,7 @@
 <span ng-controller="ToggleController as toggle">
     <span ng-controller="TreeNodeController as treeNode">
         <span
-	        class="tree-item menus-to-left test-tree-words"
+	        class="tree-item menus-to-left"
 	        ng-class="{selected: treeNode.isSelected()}"
 	        >
             <mct-representation                                
diff --git a/platform/commonUI/general/src/services/QueryService.js b/platform/commonUI/general/src/services/QueryService.js
index 11b278f7a8..90c8aed53a 100644
--- a/platform/commonUI/general/src/services/QueryService.js
+++ b/platform/commonUI/general/src/services/QueryService.js
@@ -25,37 +25,29 @@
  * Module defining QueryService.
  */
 
-var phoMaxWidth = 514,
-    phoMaxHeight = 740,
-
-    tabMinWidth = 515,
-    tabMaxWidth = 799,
-
-    tabMinHeight = 741,
-    tabMaxHeight = 1024,
-
-    compMinWidth = 800,
-    compMinHeight = 1025;
-
 define(
     [],
     function () {
         "use strict";
 
         /**
-         * The url service handles calls for url paths
-         * using domain objects.
+         * The query service handles calls for browser and userAgent
+         * info using a comparison between the userAgent and key
+         * device names
          */
         function QueryService($window) {
             
-            
-            
+            // Gets the UA name if it is one of the following.
+            // If it is not (a desktop for example) nothing is
+            // returned instead
             function getDeviceUA() {
                 var ua = navigator.userAgent;
                 return ua.match(/iPad|iPhone|Android/i) ?
                         ua.match(/iPad|iPhone|Android/i) : "";
             }
             
+            // Checks if gotten device is mobile,
+            // Mobile is defined as a phone or tablet
             function isMobile() {
                 if (getDeviceUA()) {
                     return true;
@@ -64,18 +56,27 @@ define(
                 }
             }
 
-            
+            // Returns the orientation of the device based on the
+            // device's window dimensions
             function getOrientation(screenWidth, screenHeight) {
-                if ($window.screen.width > $window.screen.height) {
+                if ($window.outerWidth > $window.outerHeight) {
                     return "landscape";
-                } else if ($window.screen.width < $window.screen.height) {
+                } else if ($window.outerWidth < $window.outerHeight) {
                     return "portrait";
                 }
             }
          
             return {
+                /**
+                 * Returns the orientation for the user's device
+                 */
                 getOrientation: getOrientation,
                 
+                /**
+                 * Returns the a boolean checking if the user is
+                 * on a mobile or non-mobile device. (mobile: true,
+                 * non-mobile: false)
+                 */
                 isMobile: isMobile
             };
         }
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index c40a2baac2..67ff6cd4a5 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -76,7 +76,8 @@ define(
                 element.on('mousemove', trackPosition);
 
                 // Checks if you are on a mobile device, if the device is
-                // mobile, then hovering is not done.
+                // not mobile (queryService.isMobile() = false), then
+                // the pendingBubble and therefore hovering is allowed
                 if (!queryService.isMobile()) {
                     // Show the bubble, after a suitable delay (if mouse has
                     // left before this time is up, this will be canceled.)

From 7aba3b6672e6d2b41d9d3040f1132510bbae910f Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 22 Jul 2015 12:53:49 -0700
Subject: [PATCH 083/266] [Mobile] Clean Up

Removed gap below bottom bar. Moved
around constants for the resizing
of the tree. Also added comments in
layout and reformatted that slightly.
---
 .../commonUI/browse/res/templates/browse.html | 53 +++++++++----------
 platform/commonUI/general/res/css/forms.css   |  1 +
 platform/commonUI/general/res/css/items.css   |  1 +
 .../general/res/css/theme-espresso.css        | 41 +++++++-------
 platform/commonUI/general/res/css/tree.css    | 20 ++++---
 .../general/res/sass/mobile/_constants.scss   |  5 ++
 .../general/res/sass/mobile/_layout.scss      |  3 +-
 .../general/res/sass/mobile/_tree.scss        | 13 +++--
 8 files changed, 74 insertions(+), 63 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 72d1ab3f1f..8cb1a642f9 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -20,33 +20,32 @@
  at runtime from the About dialog for additional information.
 -->
 
-<div ng-controller="BrowseController">
-    <div content="jquery-wrapper" class="abs holder-all browse-mode">
-        <mct-include key="'topbar-browse'"></mct-include>
-        <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
-            <mct-split-pane class='contents abs' anchor='left'>
-                <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>  
-                    <div class='holder tree-holder abs'>
-                        <mct-representation key="'tree'"
-                                            mct-object="domainObject"
-                                            ng-model="treeModel">
-                        </mct-representation>
-                    </div>
-                        <mct-representation key="'create-button'" mct-object="navigatedObject">
-                        </mct-representation>
+<div content="jquery-wrapper" class="abs holder-all browse-mode" ng-controller="BrowseController">
+    <mct-include key="'topbar-browse'"></mct-include>
+    <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
+        <mct-split-pane class='contents abs' anchor='left'>
+            <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>  
+                <div class='holder tree-holder abs'>
+                    <mct-representation key="'tree'"
+                                        mct-object="domainObject"
+                                        ng-model="treeModel">
+                    </mct-representation>
                 </div>
-                
-                <mct-splitter class="mobile-hide"></mct-splitter>
-                        <div class='split-pane-component items pane mobile-pane right-repr'>
-                            <div class='holder abs' id='content-area'>
-                                <mct-representation mct-object="navigatedObject" key="'browse-object'">
-                                </mct-representation>
-                            </div>
-                        <div class="left s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
-                            ng-click="treeSlide()">m</div>                        
-                        </div>   
-            </mct-split-pane>
-        </div>
-        <mct-include key="'bottombar'"></mct-include>
+                    <mct-representation key="'create-button'" mct-object="navigatedObject">
+                    </mct-representation>
+            </div>
+
+            <mct-splitter class="mobile-hide"></mct-splitter>
+                    <div class='split-pane-component items pane mobile-pane right-repr'>
+                        <div class='holder abs' id='content-area'>
+                            <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                            </mct-representation>
+                        </div>
+                    <div class="left s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
+                        ng-click="treeSlide()">m</div>                        
+                    </div>   
+        </mct-split-pane>
     </div>
+    <mct-include key="'bottombar'"></mct-include>
 </div>
+
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 7d80703443..bed72af25f 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index b4152de66d..be1da9dd3d 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 4ea71cfdf8..d0eb24d149 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -70,6 +70,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
@@ -742,19 +743,17 @@ mct-container {
     left: 0;
     top: 0;
     right: 0;
-    left: 0;
-    white-space: nowrap;
-    height: 100%; } }
+    white-space: nowrap; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 38, ../sass/mobile/_layout.scss */
+  /* line 37, ../sass/mobile/_layout.scss */
   .desktop-browse {
     min-width: 150px;
     max-width: 800px;
     width: 25%; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 52, ../sass/mobile/_layout.scss */
+  /* line 51, ../sass/mobile/_layout.scss */
   .browse-hidetree .mobile-pane.left-menu {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -780,7 +779,7 @@ mct-container {
     overflow-y: hidden;
     overflow-x: hidden; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 66, ../sass/mobile/_layout.scss */
+  /* line 65, ../sass/mobile/_layout.scss */
   .browse-hidetree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -792,7 +791,7 @@ mct-container {
     width: 100% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 83, ../sass/mobile/_layout.scss */
+  /* line 82, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -816,23 +815,23 @@ mct-container {
     display: block !important;
     width: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 83, ../sass/mobile/_layout.scss */
+  /* line 82, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     right: 19px !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 83, ../sass/mobile/_layout.scss */
+  /* line 82, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     right: 66% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 83, ../sass/mobile/_layout.scss */
+  /* line 82, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     right: 500px !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 83, ../sass/mobile/_layout.scss */
+  /* line 82, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     right: 78% !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 108, ../sass/mobile/_layout.scss */
+  /* line 107, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -842,24 +841,24 @@ mct-container {
     backface-visibility: hidden;
     left: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 108, ../sass/mobile/_layout.scss */
+  /* line 107, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     width: 19px !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 108, ../sass/mobile/_layout.scss */
+  /* line 107, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     width: 66% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 108, ../sass/mobile/_layout.scss */
+  /* line 107, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     width: 500px !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 108, ../sass/mobile/_layout.scss */
+  /* line 107, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     width: 78% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 131, ../sass/mobile/_layout.scss */
+  /* line 130, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute;
     -moz-transition-duration: 0.35s;
@@ -870,23 +869,23 @@ mct-container {
     backface-visibility: hidden; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 141, ../sass/mobile/_layout.scss */
+  /* line 140, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 141, ../sass/mobile/_layout.scss */
+  /* line 140, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 35px; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 153, ../sass/mobile/_layout.scss */
+  /* line 152, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 160, ../sass/mobile/_layout.scss */
+  /* line 159, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 9d2ee8c87d..fb80f74fd0 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
@@ -318,18 +319,21 @@ ul.tree {
       padding: 0; }
     /* line 29, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item {
+      height: 38px;
+      line-height: 38px;
       margin-top: 3px; }
-      /* line 32, ../sass/mobile/_tree.scss */
+      /* line 34, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .view-control {
         position: absolute;
-        right: 5px;
-        font-size: 1.5em; }
-      /* line 38, ../sass/mobile/_tree.scss */
+        right: 13px;
+        font-size: 1.8em; }
+      /* line 40, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label {
-        left: 3px; }
-        /* line 44, ../sass/mobile/_tree.scss */
+        left: 3px;
+        font-size: 1.2em; }
+        /* line 47, ../sass/mobile/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
-          right: 5px; }
-    /* line 53, ../sass/mobile/_tree.scss */
+          right: 16.9px; }
+    /* line 56, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
       margin-left: 3px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 198bf6f652..ee90144c55 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -20,6 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/************************** MOBILE TREE MENU DIMENSIONS */
+$mobile-treeHeight: 38px;
+$mobile-treeLeft: 3px;
+$mobile-treeRight: 13px;
+
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
 $phoMaxH: 740px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index e2699b62c6..c727c63ef6 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -27,9 +27,8 @@
     @include phoneandtablet {
         position: absolute;
         left: 0; top: 0;
-        right: 0; left: 0;
+        right: 0;
         white-space: nowrap;
-        height: 100%;
     }
 }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index c0806a806c..2137429ca7 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -28,21 +28,24 @@ ul.tree {
         li {
             span.tree-item {
                 // Adds some space to the top of each tree item
+                height: $mobile-treeHeight;
+                line-height: $mobile-treeHeight;
                 margin-top: $interiorMarginSm;
                 .view-control {
                     position: absolute;
-                    right: 5px;
-                    font-size: 1.5em;
+                    right: $mobile-treeRight;
+                    font-size: 1.8em;
                 }                   
 
                 .label {
                     // Designates the starting left margin
                     // (indentation) of 'My Items'
-                    left: 3px;
+                    left: $mobile-treeLeft;
+                    font-size: 1.2em;
                     // Allows tree item name to stop prior
                     // to the arrow
                     .title-label {
-                        right: 5px;
+                        right: $mobile-treeRight * 1.3;
                     }                    
                 }             
             }
@@ -51,7 +54,7 @@ ul.tree {
         // Sets the margin on the left, which causes the
         // running indentation after each folder is made
         ul.tree {
-            margin-left: 3px;
+            margin-left: $mobile-treeLeft;
         }
     }
 }

From 1f7ba70ad78c8063a4d32a0e5640cd92c8865c4c Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 22 Jul 2015 15:21:34 -0700
Subject: [PATCH 084/266] [Mobile] Scroll Bug

Removed scrollbar that appears in landscape
mode in tree menu.
---
 platform/commonUI/general/res/css/theme-espresso.css   | 5 +++++
 platform/commonUI/general/res/sass/mobile/_layout.scss | 6 ++++++
 2 files changed, 11 insertions(+)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index d0eb24d149..07e5d6e54d 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -889,6 +889,11 @@ mct-container {
   .phone-hide {
     display: none; } }
 
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 165, ../sass/mobile/_layout.scss */
+  .tree-holder {
+    overflow-x: hidden !important; } }
+
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index c727c63ef6..56d0191035 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -161,3 +161,9 @@
         display: none;
     }
 }
+
+.tree-holder {
+    @include phoneandtablet {
+        overflow-x: hidden !important;
+    }
+}

From b3bc8b6876339e091e1f4575e6277d22602e4664 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 09:28:36 -0700
Subject: [PATCH 085/266] [Mobile[ Tests

Added jasmine test for

QUerySerivce and adjusted
the InfoGestureSpec to
account for use of
QueryService.
---
 .../general/src/services/QueryService.js      |  2 +-
 .../general/test/services/QueryServiceSpec.js | 69 +++++++++++++++++++
 .../general/test/services/UrlServiceSpec.js   |  2 +-
 platform/commonUI/general/test/suite.json     |  1 +
 .../inspect/test/gestures/InfoGestureSpec.js  |  3 +
 5 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 platform/commonUI/general/test/services/QueryServiceSpec.js

diff --git a/platform/commonUI/general/src/services/QueryService.js b/platform/commonUI/general/src/services/QueryService.js
index 90c8aed53a..f5352c9e69 100644
--- a/platform/commonUI/general/src/services/QueryService.js
+++ b/platform/commonUI/general/src/services/QueryService.js
@@ -58,7 +58,7 @@ define(
 
             // Returns the orientation of the device based on the
             // device's window dimensions
-            function getOrientation(screenWidth, screenHeight) {
+            function getOrientation() {
                 if ($window.outerWidth > $window.outerHeight) {
                     return "landscape";
                 } else if ($window.outerWidth < $window.outerHeight) {
diff --git a/platform/commonUI/general/test/services/QueryServiceSpec.js b/platform/commonUI/general/test/services/QueryServiceSpec.js
new file mode 100644
index 0000000000..8469d21fe1
--- /dev/null
+++ b/platform/commonUI/general/test/services/QueryServiceSpec.js
@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+/**
+ * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
+ */
+define(
+    ["../../src/services/QueryService"],
+    function (QueryService) {
+        "use strict";
+
+        describe("The url service", function () {
+            var queryService,
+                mockWindow,
+                mockNavigator;
+
+            beforeEach(function () {
+                // Creates a mockLocation, used to 
+                // do the view search
+                mockWindow = jasmine.createSpyObj(
+                    "$window",
+                    [ "outerWidth", "outerHeight" ]
+                );
+                
+                mockNavigator = jasmine.createSpyObj(
+                    "navigator",
+                    [ "userAgent" ]
+                );
+                
+                queryService = new QueryService(mockWindow);
+            });
+            
+            it("get current device user agent", function () {
+                queryService.isMobile();
+                mockNavigator.userAgent = "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
+                queryService.isMobile();
+            });
+            
+            it("get orientation of the current device", function () {
+                mockWindow.outerWidth = 768;
+                mockWindow.outerHeight = 1024;
+                queryService.getOrientation();
+                mockWindow.outerWidth = 1024;
+                mockWindow.outerHeight = 768;
+                queryService.getOrientation();
+            });
+        });
+    }
+);
\ No newline at end of file
diff --git a/platform/commonUI/general/test/services/UrlServiceSpec.js b/platform/commonUI/general/test/services/UrlServiceSpec.js
index daff0c5448..f8526c4b5b 100644
--- a/platform/commonUI/general/test/services/UrlServiceSpec.js
+++ b/platform/commonUI/general/test/services/UrlServiceSpec.js
@@ -91,7 +91,7 @@ define(
             
             it("get url for a new tab using domainObject and mode", function () {
                 urlService.urlForNewTab(mockMode, mockDomainObject);
-            });            
+            });
         });
     }
 );
\ No newline at end of file
diff --git a/platform/commonUI/general/test/suite.json b/platform/commonUI/general/test/suite.json
index 37fc4c4b78..08240b6044 100644
--- a/platform/commonUI/general/test/suite.json
+++ b/platform/commonUI/general/test/suite.json
@@ -13,6 +13,7 @@
     "directives/MCTDrag",
     "directives/MCTResize",
     "directives/MCTScroll",
+    "services/QueryService",
     "services/UrlService",
     "StyleSheetLoader"
 ]
\ No newline at end of file
diff --git a/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
index 44f2b1e54b..a9a83eeb5a 100644
--- a/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
+++ b/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
@@ -28,6 +28,7 @@ define(
 
         describe("The info gesture", function () {
             var mockTimeout,
+                mockQueryService,
                 mockInfoService,
                 testDelay = 12321,
                 mockElement,
@@ -50,6 +51,7 @@ define(
             beforeEach(function () {
                 mockTimeout = jasmine.createSpy('$timeout');
                 mockTimeout.cancel = jasmine.createSpy('cancel');
+                mockQueryService = jasmine.createSpyObj('queryService', ['isMobile']);
                 mockInfoService = jasmine.createSpyObj(
                     'infoService',
                     [ 'display' ]
@@ -79,6 +81,7 @@ define(
 
                 gesture = new InfoGesture(
                     mockTimeout,
+                    mockQueryService,
                     mockInfoService,
                     testDelay,
                     mockElement,

From 143e3eeb6c8098cad5dd650b38ff14d62d926b83 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 13:19:58 -0700
Subject: [PATCH 086/266] [Mobile] CleanUp/Tests

Added tests inside spec files
for the QueryService, TreeNodeController,
and InfoGesture. Also cleaned up the
tree so that padding is used between
buttons instead of margins.
---
 platform/commonUI/general/res/css/tree.css        | 15 +++++++++------
 .../commonUI/general/res/sass/mobile/_layout.scss |  2 +-
 .../commonUI/general/res/sass/mobile/_tree.scss   |  7 +++++--
 .../general/src/controllers/TreeNodeController.js |  2 +-
 .../commonUI/general/src/services/QueryService.js |  7 +++----
 .../test/controllers/TreeNodeControllerSpec.js    |  8 +++++++-
 .../general/test/services/QueryServiceSpec.js     |  6 ++++--
 .../commonUI/inspect/src/gestures/InfoGesture.js  |  2 +-
 8 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index fb80f74fd0..1c8523eb62 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -321,19 +321,22 @@ ul.tree {
     ul.tree li span.tree-item {
       height: 38px;
       line-height: 38px;
-      margin-top: 3px; }
-      /* line 34, ../sass/mobile/_tree.scss */
+      padding-top: 3px;
+      padding-bottom: 3px;
+      margin-bottom: 0px; }
+      /* line 36, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .view-control {
         position: absolute;
         right: 13px;
         font-size: 1.8em; }
-      /* line 40, ../sass/mobile/_tree.scss */
+      /* line 42, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label {
         left: 3px;
         font-size: 1.2em; }
-        /* line 47, ../sass/mobile/_tree.scss */
+        /* line 49, ../sass/mobile/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           right: 16.9px; }
-    /* line 56, ../sass/mobile/_tree.scss */
+    /* line 58, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
-      margin-left: 3px; } }
+      margin-left: 0px;
+      padding-left: 3px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 56d0191035..7d69b98460 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -21,7 +21,7 @@
  *****************************************************************************/
 
 // Wrapper of the entire 2 panes, only enacted on
-// phone and tablet. Also for the panes
+// phone and tablet.
 .browse-wrapper,
 .mobile-pane {
     @include phoneandtablet {
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 2137429ca7..6d5273f56f 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -30,7 +30,9 @@ ul.tree {
                 // Adds some space to the top of each tree item
                 height: $mobile-treeHeight;
                 line-height: $mobile-treeHeight;
-                margin-top: $interiorMarginSm;
+                padding-top: $interiorMarginSm;
+                padding-bottom: $interiorMarginSm;
+                margin-bottom: 0px;
                 .view-control {
                     position: absolute;
                     right: $mobile-treeRight;
@@ -54,7 +56,8 @@ ul.tree {
         // Sets the margin on the left, which causes the
         // running indentation after each folder is made
         ul.tree {
-            margin-left: $mobile-treeLeft;
+            margin-left: 0px;
+            padding-left: $mobile-treeLeft;
         }
     }
 }
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 2a219fa499..43cc671a20 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -88,7 +88,7 @@ define(
             }
             
             function checkMobile() {
-                return queryService.isMobile();
+                return queryService.isMobile(navigator.userAgent);
             }
             
             // Consider the currently-navigated object and update
diff --git a/platform/commonUI/general/src/services/QueryService.js b/platform/commonUI/general/src/services/QueryService.js
index f5352c9e69..9d9b13989b 100644
--- a/platform/commonUI/general/src/services/QueryService.js
+++ b/platform/commonUI/general/src/services/QueryService.js
@@ -40,16 +40,15 @@ define(
             // Gets the UA name if it is one of the following.
             // If it is not (a desktop for example) nothing is
             // returned instead
-            function getDeviceUA() {
-                var ua = navigator.userAgent;
+            function getDeviceUA(ua) {
                 return ua.match(/iPad|iPhone|Android/i) ?
                         ua.match(/iPad|iPhone|Android/i) : "";
             }
             
             // Checks if gotten device is mobile,
             // Mobile is defined as a phone or tablet
-            function isMobile() {
-                if (getDeviceUA()) {
+            function isMobile(ua) {
+                if (getDeviceUA(ua)) {
                     return true;
                 } else {
                     return false;
diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
index ab468ad7a7..394d71b88a 100644
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -29,6 +29,7 @@ define(
         describe("The tree node controller", function () {
             var mockScope,
                 mockTimeout,
+                mockQueryService,
                 controller;
 
             function TestObject(id, context) {
@@ -43,7 +44,8 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on"]);
                 mockTimeout = jasmine.createSpy("$timeout");
-                controller = new TreeNodeController(mockScope, mockTimeout);
+                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
+                controller = new TreeNodeController(mockScope, mockTimeout, mockQueryService);
             });
 
             it("allows tracking of expansion state", function () {
@@ -183,6 +185,10 @@ define(
                 expect(controller.isSelected()).toBeFalsy();
 
             });
+            
+            it("check if tree node is in a mobile device", function () {
+                controller.checkMobile();
+            });
         });
     }
 );
\ No newline at end of file
diff --git a/platform/commonUI/general/test/services/QueryServiceSpec.js b/platform/commonUI/general/test/services/QueryServiceSpec.js
index 8469d21fe1..7caf551029 100644
--- a/platform/commonUI/general/test/services/QueryServiceSpec.js
+++ b/platform/commonUI/general/test/services/QueryServiceSpec.js
@@ -51,15 +51,17 @@ define(
             });
             
             it("get current device user agent", function () {
-                queryService.isMobile();
+                mockNavigator.userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36";
+                queryService.isMobile(mockNavigator.userAgent);
                 mockNavigator.userAgent = "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
-                queryService.isMobile();
+                queryService.isMobile(mockNavigator.userAgent);
             });
             
             it("get orientation of the current device", function () {
                 mockWindow.outerWidth = 768;
                 mockWindow.outerHeight = 1024;
                 queryService.getOrientation();
+                
                 mockWindow.outerWidth = 1024;
                 mockWindow.outerHeight = 768;
                 queryService.getOrientation();
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 67ff6cd4a5..483216d838 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -78,7 +78,7 @@ define(
                 // Checks if you are on a mobile device, if the device is
                 // not mobile (queryService.isMobile() = false), then
                 // the pendingBubble and therefore hovering is allowed
-                if (!queryService.isMobile()) {
+                if (!queryService.isMobile(navigator.userAgent)) {
                     // Show the bubble, after a suitable delay (if mouse has
                     // left before this time is up, this will be canceled.)
                     pendingBubble = $timeout(function () {

From d176f9f8110898eb749a9318da2be5a28494c0c1 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 13:46:46 -0700
Subject: [PATCH 087/266] [Mobile] Test

Fixed BrowseControllerSpec.js to
account for the .treeslide
call and added a new test for thatasds
---
 platform/commonUI/browse/test/BrowseControllerSpec.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index ce9296c239..ac695f5ded 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -52,7 +52,7 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj(
                     "$scope",
-                    [ "$on", "$watch" ]
+                    [ "$on", "$watch", "treeSlide" ]
                 );
                 mockRoute = { current: { params: {} } };
                 mockLocation = jasmine.createSpyObj(
@@ -145,6 +145,11 @@ define(
                 );
                 expect(mockScope.navigatedObject).toEqual(mockDomainObject);
             });
+            
+            it("updates boolean", function () {
+//                spyOn(mockScope, 'treeSlide').andCallThrough();
+                mockScope.treeSlide();
+            });
 
             it("releases its navigation listener when its scope is destroyed", function () {
                 expect(mockScope.$on).toHaveBeenCalledWith(

From d115166dde7ab03706f8f8dd8f1caf186b02d25e Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 13:48:21 -0700
Subject: [PATCH 088/266] [Mobile] Comments

Added comments and removed
unwanted spec test code for
BrowseController.
---
 platform/commonUI/browse/test/BrowseControllerSpec.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index ac695f5ded..b61a856d41 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -146,8 +146,10 @@ define(
                 expect(mockScope.navigatedObject).toEqual(mockDomainObject);
             });
             
-            it("updates boolean", function () {
-//                spyOn(mockScope, 'treeSlide').andCallThrough();
+            // Mocks the tree slide call that
+            // lets the html code know if the
+            // tree menu is open.
+            it("calls the treeSlide function", function () {
                 mockScope.treeSlide();
             });
 

From b592b89dc87d1821920b8982356b155f5e453591 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 14:15:01 -0700
Subject: [PATCH 089/266] [Mobile] Clean Up

Removed unnecessary transitions.:
---
 .../general/res/css/theme-espresso.css        | 48 ++++++-------------
 .../general/res/sass/mobile/_layout.scss      |  6 +--
 2 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 07e5d6e54d..6e44bf8f39 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -736,7 +736,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 25, ../sass/mobile/_layout.scss */
+  /* line 26, ../sass/mobile/_layout.scss */
   .browse-wrapper,
   .mobile-pane {
     position: absolute;
@@ -746,21 +746,15 @@ mct-container {
     white-space: nowrap; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 37, ../sass/mobile/_layout.scss */
+  /* line 38, ../sass/mobile/_layout.scss */
   .desktop-browse {
     min-width: 150px;
     max-width: 800px;
     width: 25%; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 51, ../sass/mobile/_layout.scss */
+  /* line 52, ../sass/mobile/_layout.scss */
   .browse-hidetree .mobile-pane.left-menu {
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden;
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
     -webkit-transition-property: opacity;
@@ -793,12 +787,6 @@ mct-container {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 82, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden;
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
     -webkit-transition-property: opacity;
@@ -831,7 +819,7 @@ mct-container {
   .browse-showtree .mobile-pane.left-menu {
     right: 78% !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 107, ../sass/mobile/_layout.scss */
+  /* line 106, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -841,56 +829,50 @@ mct-container {
     backface-visibility: hidden;
     left: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 107, ../sass/mobile/_layout.scss */
+  /* line 106, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     width: 19px !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 107, ../sass/mobile/_layout.scss */
+  /* line 106, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     width: 66% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 107, ../sass/mobile/_layout.scss */
+  /* line 106, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     width: 500px !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 107, ../sass/mobile/_layout.scss */
+  /* line 106, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     width: 78% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 130, ../sass/mobile/_layout.scss */
+  /* line 129, ../sass/mobile/_layout.scss */
   .button-pos {
-    position: absolute;
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden; } }
+    position: absolute; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 140, ../sass/mobile/_layout.scss */
+  /* line 138, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 30px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 140, ../sass/mobile/_layout.scss */
+  /* line 138, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 35px; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 152, ../sass/mobile/_layout.scss */
+  /* line 150, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 159, ../sass/mobile/_layout.scss */
+  /* line 157, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 165, ../sass/mobile/_layout.scss */
+  /* line 163, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 7d69b98460..a70944f038 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -21,7 +21,8 @@
  *****************************************************************************/
 
 // Wrapper of the entire 2 panes, only enacted on
-// phone and tablet.
+// phone and tablet. Also for the panes
+
 .browse-wrapper,
 .mobile-pane {
     @include phoneandtablet {
@@ -50,7 +51,6 @@
     // is hidden. 
     .mobile-pane.left-menu {
         @include phoneandtablet {
-            @include slMenuTransitions;
             @include trans-prop-nice(opacity, .4s);
             opacity: 0;
             right: 100% !important;
@@ -81,7 +81,6 @@
     // is shown.     
     .mobile-pane.left-menu {
         @include phoneandtablet {
-            @include slMenuTransitions;
             @include trans-prop-nice(opacity, .4s);
             opacity: 1;
             display: block !important;
@@ -130,7 +129,6 @@
 .button-pos {
     @include phoneandtablet {
         position: absolute;
-        @include slMenuTransitions;
     }
 }
 

From 7993e4c03f3e57c4a9ea3527293fea53431ac6d1 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 15:01:14 -0700
Subject: [PATCH 090/266] [Mobile] Gestures

Removed the hover coloring on
the tree menu on mobile by changing
original** scss code. Also added
check in ContextMenuGesture that
will only allow context menu to appear
in non-mobile browser.
---
 platform/commonUI/general/res/css/tree.css    | 58 ++++++++++---------
 .../commonUI/general/res/sass/tree/_tree.scss | 32 +++++-----
 2 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 1c8523eb62..8b3b6125dd 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -180,10 +180,11 @@ ul.tree {
         margin-left: 5px;
         font-size: 0.75em;
         width: 10px; }
-        /* line 44, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .view-control:hover {
-          color: #ffc700; }
-      /* line 49, ../sass/tree/_tree.scss */
+        @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+          /* line 46, ../sass/tree/_tree.scss */
+          ul.tree li span.tree-item .view-control:hover {
+            color: #ffc700; } }
+      /* line 52, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .label {
         display: block;
         overflow: hidden;
@@ -195,7 +196,7 @@ ul.tree {
         width: auto;
         height: auto;
         left: 20px; }
-        /* line 55, ../sass/tree/_tree.scss */
+        /* line 58, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .type-icon {
           overflow: hidden;
           position: absolute;
@@ -207,7 +208,7 @@ ul.tree {
           height: auto;
           text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
           color: #0099cc; }
-          /* line 59, ../sass/tree/_tree.scss */
+          /* line 62, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .alert {
             text-shadow: rgba(0, 0, 0, 0.3) 0 1px 2px;
             background: #333;
@@ -222,7 +223,7 @@ ul.tree {
             width: auto;
             position: absolute;
             z-index: 2; }
-        /* line 75, ../sass/tree/_tree.scss */
+        /* line 78, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           overflow: hidden;
           position: absolute;
@@ -237,52 +238,53 @@ ul.tree {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap; }
-      /* line 87, ../sass/tree/_tree.scss */
+      /* line 90, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.loading {
         pointer-events: none; }
-        /* line 89, ../sass/tree/_tree.scss */
+        /* line 92, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .label {
           opacity: 0.5; }
-          /* line 91, ../sass/tree/_tree.scss */
+          /* line 94, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item.loading .label .title-label {
             font-style: italic; }
-        /* line 95, ../sass/tree/_tree.scss */
+        /* line 98, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .wait-spinner {
           margin-left: 14px; }
-      /* line 100, ../sass/tree/_tree.scss */
+      /* line 103, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.selected {
         background: #005177;
         color: #fff; }
-        /* line 104, ../sass/tree/_tree.scss */
+        /* line 107, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .view-control {
           color: #0099cc; }
-        /* line 107, ../sass/tree/_tree.scss */
+        /* line 110, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .label .type-icon {
           color: #fff; }
-      /* line 113, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item:not(.selected):hover {
-        background: #404040;
-        color: #cccccc; }
-        /* line 116, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item:not(.selected):hover .context-trigger {
-          display: block; }
-        /* line 119, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item:not(.selected):hover .icon {
-          color: #33ccff; }
-      /* line 125, ../sass/tree/_tree.scss */
+      @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+        /* line 118, ../sass/tree/_tree.scss */
+        ul.tree li span.tree-item:not(.selected):hover {
+          background: #404040;
+          color: #cccccc; }
+          /* line 121, ../sass/tree/_tree.scss */
+          ul.tree li span.tree-item:not(.selected):hover .context-trigger {
+            display: block; }
+          /* line 124, ../sass/tree/_tree.scss */
+          ul.tree li span.tree-item:not(.selected):hover .icon {
+            color: #33ccff; } }
+      /* line 131, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item:not(.loading) {
         cursor: pointer; }
-      /* line 129, ../sass/tree/_tree.scss */
+      /* line 135, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .context-trigger {
         top: -1px;
         position: absolute;
         right: 3px; }
-        /* line 135, ../sass/tree/_tree.scss */
+        /* line 141, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .context-trigger .invoke-menu {
           font-size: 0.75em;
           height: 0.9rem;
           line-height: 0.9rem; }
-  /* line 144, ../sass/tree/_tree.scss */
+  /* line 150, ../sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index 356bb8a527..4e272960f1 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -41,9 +41,12 @@ ul.tree {
 				font-size: 0.75em;
 				width: $treeVCW;
 				$runningItemW: $interiorMargin + $treeVCW;
-				&:hover {
-					color: $colorItemTreeVCHover;
-				}
+                // NOTE: [Mobile] Removed Hover on Mobile
+                @include desktop {
+                    &:hover {
+                        color: $colorItemTreeVCHover;
+                    }
+                }
 			}
 
 			.label {
@@ -110,16 +113,19 @@ ul.tree {
 			}
 
 			&:not(.selected) {
-				&:hover {
-					background: lighten($colorBodyBg, 5%);
-					color: lighten($colorBodyFg, 20%);
-					.context-trigger {
-						display: block;
-					}
-					.icon {
-						color: $colorItemTreeIconHover;
-					}
-				}
+                // NOTE: [Mobile] Removed Hover on Mobile
+                @include desktop {
+                    &:hover {
+                        background: lighten($colorBodyBg, 5%);
+                        color: lighten($colorBodyFg, 20%);
+                        .context-trigger {
+                            display: block;
+                        }
+                        .icon {
+                            color: $colorItemTreeIconHover;
+                        }
+                    }
+                }
 			}
 
 			&:not(.loading) {

From a89f9eed42cabd3769de3e74052da102f83e01c9 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 16:47:57 -0700
Subject: [PATCH 091/266] [Mobile] Grid List/Gestures

Context menu only shown with contextmenu
click on desktops (non-mobile devices). Also
edited items list in a folder's representation
to show the icon on the left side, with text
centered horizontally (only mobile).
---
 platform/commonUI/general/res/css/items.css   | 36 ++++++++++--
 .../general/res/sass/mobile/_item.scss        | 56 ++++++++++++++++---
 platform/representation/bundle.json           |  2 +-
 .../src/gestures/ContextMenuGesture.js        |  9 ++-
 4 files changed, 86 insertions(+), 17 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index be1da9dd3d..8c25e81c41 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -355,18 +355,42 @@
   /* line 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
-    height: 50px; } }
+    height: 50px; }
+    /* line 38, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      font-size: 30px;
+      line-height: 40px;
+      text-align: left; }
+    /* line 46, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      display: none; }
+    /* line 53, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .title {
+      text-align: center; }
+    /* line 57, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .details {
+      text-align: center; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
-    height: 100px; } }
+    height: 66.66667px; }
+    /* line 69, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      font-size: 30px;
+      line-height: 50px;
+      text-align: left; }
+    /* line 77, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      display: none; }
+    /* line 84, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .title {
+      text-align: center; }
+    /* line 88, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .details {
+      text-align: center; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
   /* line 28, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 52, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .icon {
-    display: none; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 9542645136..c7bbc68d41 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -33,13 +33,61 @@
                 $dHei: $ueBrowseGridItemLg/4;
                 width: $dWid;
                 height: $dHei;
+                
+                .item-main {
+                    .item-type {
+    //                     NOTE: [Mobile] Icon for the list/grid item inside folder
+    //                    display: none;
+                        font-size: 30px;
+                        line-height: $ueBrowseGridItemLg/5;
+                        text-align: left;
+
+                    }
+                    .item-open {
+    //                     NOTE: [Mobile] Icon for the open item inside folder
+                       display: none;
+
+                    }
+                }
+
+                .title {
+                    text-align: center;
+                }
+
+                .details {
+                    text-align: center;
+                }                
             }
             
             @include tablet {
                 $dWid: 100%;
-                $dHei: $ueBrowseGridItemLg/2;
+                $dHei: $ueBrowseGridItemLg/3;
                 width: $dWid;
                 height: $dHei;
+                
+                .item-main {
+                    .item-type {
+    //                     NOTE: [Mobile] Icon for the list/grid item inside folder
+    //                    display: none;
+                        font-size: 30px;
+                        line-height: $ueBrowseGridItemLg/4;
+                        text-align: left;
+
+                    }
+                    .item-open {
+    //                     NOTE: [Mobile] Icon for the open item inside folder
+                        display: none;
+
+                    }
+                }
+
+                .title {
+                    text-align: center;
+                }
+
+                .details {
+                    text-align: center;
+                }
             }
             
             @include desktop {
@@ -48,12 +96,6 @@
                 width: $dWid;
                 height: $dHei; 
             }
-            
-            .icon {
-                @include phoneandtablet {
-                    display: none;
-                }
-            }
         }
     }
 }
diff --git a/platform/representation/bundle.json b/platform/representation/bundle.json
index c9872367aa..64fc1b0f27 100644
--- a/platform/representation/bundle.json
+++ b/platform/representation/bundle.json
@@ -26,7 +26,7 @@
             {
                 "key": "menu",
                 "implementation": "gestures/ContextMenuGesture.js",
-                "depends": [ "$compile", "$document", "$window", "$rootScope" ]
+                "depends": [ "$compile", "$document", "$window", "$rootScope", "queryService" ]
             }
         ],
         "components": [
diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index 83ea1ddc23..298d34face 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -50,7 +50,7 @@ define(
          * @param {DomainObject} domainObject the object on which actions
          *                       in the context menu will be performed
          */
-        function ContextMenuGesture($compile, $document, $window, $rootScope, element, domainObject) {
+        function ContextMenuGesture($compile, $document, $window, $rootScope, queryService, element, domainObject) {
             function showMenu(event) {
                 var winDim = [$window.innerWidth, $window.innerHeight],
                     eventCoors = [event.pageX, event.pageY],
@@ -102,8 +102,11 @@ define(
                 event.preventDefault();
             }
 
-            // When context menu event occurs, show object actions instead
-            element.on('contextmenu', showMenu);
+            // Iff the user is not on a mobile device, then when 
+            // the context menu event occurs, show object actions instead
+            if (!queryService.isMobile(navigator.userAgent)) {
+                element.on('contextmenu', showMenu);
+            }
 
             return {
                 /**

From 200c6e49fcc7fa800ed2125ee5f9d7fe5dddd038 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 23 Jul 2015 16:55:45 -0700
Subject: [PATCH 092/266] [Mobile] Test

QueryService (mock) added to the
ContextMenuGestureSpec to account
for isMobile call that allows/
disallows use of contextmenu
gesture.
---
 .../representation/test/gestures/ContextMenuGestureSpec.js  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index 8b91a969d4..f1a6b3419d 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -43,6 +43,7 @@ define(
                 mockBody,
                 mockWindow,
                 mockRootScope,
+                mockQueryService,
                 mockScope,
                 mockElement,
                 mockDomainObject,
@@ -59,12 +60,14 @@ define(
                 mockWindow = { innerWidth: MENU_DIMENSIONS[0] * 4, innerHeight: MENU_DIMENSIONS[1] * 4 };
                 mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
                 mockScope = {};
+                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
                 mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
                 mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
                 mockEvent.pageX = 0;
                 mockEvent.pageY = 0;
-
+                
+                
                 mockCompile.andReturn(mockCompiledTemplate);
                 mockCompiledTemplate.andReturn(mockMenu);
                 mockDocument.find.andReturn(mockBody);
@@ -75,6 +78,7 @@ define(
                     mockDocument,
                     mockWindow,
                     mockRootScope,
+                    mockQueryService,
                     mockElement,
                     mockDomainObject
                 );

From 2355d354b3ccd0060714c53e5ddd9401b828ead9 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 11:46:58 -0700
Subject: [PATCH 093/266] [Mobile] Items List

Flushes items left and
vertically centers the
title/details. Also cleaned
up the items classes in sass
files.
---
 platform/commonUI/general/res/css/forms.css   |  1 +
 platform/commonUI/general/res/css/items.css   | 59 +++++++++++-------
 .../general/res/css/theme-espresso.css        |  1 +
 platform/commonUI/general/res/css/tree.css    |  1 +
 .../general/res/sass/mobile/_constants.scss   |  7 +++
 .../general/res/sass/mobile/_item.scss        | 62 +++++++++++--------
 6 files changed, 82 insertions(+), 49 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index bed72af25f..a63582b84b 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 8c25e81c41..0786a7cef7 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
@@ -351,46 +352,56 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 36, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .bar.bottom-bar.abs {
+    top: 0px;
+    height: auto; }
+  /* line 43, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .item-main .item-type {
+    font-size: 30px;
+    text-align: left; }
+  /* line 48, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .item-main .item-open {
+    display: none; }
+  /* line 53, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
+    margin-left: 30px; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 28, ../sass/mobile/_item.scss */
+  /* line 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; }
-    /* line 38, ../sass/mobile/_item.scss */
+    /* line 63, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      font-size: 30px;
-      line-height: 40px;
-      text-align: left; }
-    /* line 46, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .item-main .item-open {
-      display: none; }
-    /* line 53, ../sass/mobile/_item.scss */
+      line-height: 40px; }
+    /* line 68, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
-      text-align: center; }
-    /* line 57, ../sass/mobile/_item.scss */
+      margin-right: 10px;
+      line-height: 25px; }
+    /* line 74, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
-      text-align: center; } }
+      margin-right: 10px;
+      line-height: 0px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 28, ../sass/mobile/_item.scss */
+  /* line 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%;
     height: 66.66667px; }
-    /* line 69, ../sass/mobile/_item.scss */
+    /* line 86, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       font-size: 30px;
-      line-height: 50px;
-      text-align: left; }
-    /* line 77, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .item-main .item-open {
-      display: none; }
-    /* line 84, ../sass/mobile/_item.scss */
+      line-height: 50px; }
+    /* line 93, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
-      text-align: center; }
-    /* line 88, ../sass/mobile/_item.scss */
+      margin-right: 10px;
+      line-height: 38px; }
+    /* line 99, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
-      text-align: center; } }
+      margin-right: 10px;
+      line-height: 0px; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 28, ../sass/mobile/_item.scss */
+  /* line 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 200px;
     height: 200px; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6e44bf8f39..78e042f07a 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -70,6 +70,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 8b3b6125dd..fa97baaa9a 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index ee90144c55..6ebfd519e1 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -20,6 +20,13 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
+$mobile-listIcon: 30px;
+$mobile-listRight: 10px;
+
+$phone-itemHeight: $ueBrowseGridItemLg/4;
+$tablet-itemHeight: $ueBrowseGridItemLg/3;
+
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobile-treeHeight: 38px;
 $mobile-treeLeft: 3px;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index c7bbc68d41..eb44048dc8 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -23,70 +23,82 @@
 // Sets the size of the items in the folder
 // representation. Instead of a grid,
 // a list is used.
+
 .items-holder {
     .item {
         &.grid-item {
             $dWid: $ueBrowseGridItemLg;
             $dHei: $ueBrowseGridItemLg;
-            @include phone {
+            @include phoneandtablet {
                 $dWid: 100%;
-                $dHei: $ueBrowseGridItemLg/4;
-                width: $dWid;
-                height: $dHei;
+                
+                .bar {
+                    &.bottom-bar.abs {
+                        top: 0px;
+                        height: auto;
+                    }
+                }                                
                 
                 .item-main {
                     .item-type {
-    //                     NOTE: [Mobile] Icon for the list/grid item inside folder
-    //                    display: none;
-                        font-size: 30px;
-                        line-height: $ueBrowseGridItemLg/5;
+                        font-size: $mobile-listIcon;
                         text-align: left;
 
                     }
                     .item-open {
-    //                     NOTE: [Mobile] Icon for the open item inside folder
                        display: none;
+                    }
+                }
 
+                .title, .details {
+                    margin-left: $mobile-listIcon;
+                }             
+            }
+
+            @include phone {
+                $dHei: $phone-itemHeight;
+                width: $dWid;
+                height: $dHei;
+                .item-main {
+                    .item-type {
+                        line-height: $phone-itemHeight * .8;
                     }
                 }
 
                 .title {
-                    text-align: center;
+                    margin-right: $mobile-listRight;
+                    line-height: $phone-itemHeight * .5;
+    
                 }
 
                 .details {
-                    text-align: center;
+                    margin-right: $mobile-listRight;
+                    line-height: 0px;
                 }                
             }
             
             @include tablet {
-                $dWid: 100%;
-                $dHei: $ueBrowseGridItemLg/3;
+                $dHei: $tablet-itemHeight;
                 width: $dWid;
                 height: $dHei;
                 
                 .item-main {
                     .item-type {
-    //                     NOTE: [Mobile] Icon for the list/grid item inside folder
-    //                    display: none;
-                        font-size: 30px;
-                        line-height: $ueBrowseGridItemLg/4;
-                        text-align: left;
-
-                    }
-                    .item-open {
-    //                     NOTE: [Mobile] Icon for the open item inside folder
-                        display: none;
+                        font-size: $mobile-listIcon;
+                        line-height: $tablet-itemHeight * .75;
 
                     }
                 }
 
                 .title {
-                    text-align: center;
+                    margin-right: $mobile-listRight;
+                    line-height: $tablet-itemHeight * .57;
+    
                 }
 
                 .details {
-                    text-align: center;
+                    margin-right: $mobile-listRight;
+                    line-height: 0px;
                 }
             }
             

From b37ee19fbc5283e152a9c513ff9aa5f06b1d7c3b Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 12:35:19 -0700
Subject: [PATCH 094/266] [Mobile] Size Adjustment

Adjusted indentation size
on the tree. Also change size of the
hamburger icon to match the
object icon and moved it slightly
down.
---
 platform/commonUI/general/res/css/items.css   | 20 ++++++++--------
 .../general/res/css/theme-espresso.css        | 24 +++++++------------
 platform/commonUI/general/res/css/tree.css    |  3 +--
 .../general/res/sass/mobile/_constants.scss   |  3 ++-
 .../general/res/sass/mobile/_item.scss        | 14 +----------
 .../general/res/sass/mobile/_layout.scss      |  8 ++-----
 .../general/res/sass/mobile/_tree.scss        |  5 ++--
 .../res/sass/mobile/controls/_menus.scss      |  8 +++----
 8 files changed, 29 insertions(+), 56 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 0786a7cef7..4576077bdc 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -353,18 +353,18 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 36, ../sass/mobile/_item.scss */
+  /* line 35, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .bar.bottom-bar.abs {
     top: 0px;
     height: auto; }
-  /* line 43, ../sass/mobile/_item.scss */
+  /* line 41, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .item-main .item-type {
     font-size: 30px;
     text-align: left; }
-  /* line 48, ../sass/mobile/_item.scss */
+  /* line 45, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .item-main .item-open {
     display: none; }
-  /* line 53, ../sass/mobile/_item.scss */
+  /* line 49, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
     margin-left: 30px; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
@@ -372,14 +372,14 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; }
-    /* line 63, ../sass/mobile/_item.scss */
+    /* line 59, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       line-height: 40px; }
-    /* line 68, ../sass/mobile/_item.scss */
+    /* line 63, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 25px; }
-    /* line 74, ../sass/mobile/_item.scss */
+    /* line 67, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
@@ -388,15 +388,15 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 66.66667px; }
-    /* line 86, ../sass/mobile/_item.scss */
+    /* line 78, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       font-size: 30px;
       line-height: 50px; }
-    /* line 93, ../sass/mobile/_item.scss */
+    /* line 83, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 38px; }
-    /* line 99, ../sass/mobile/_item.scss */
+    /* line 87, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 78e042f07a..12cb464c59 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -851,29 +851,24 @@ mct-container {
   .button-pos {
     position: absolute; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 138, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
-    left: 30px; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 138, ../sass/mobile/_layout.scss */
-  .object-header-mobile {
-    position: relative;
-    left: 35px; } }
+    left: 44px; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 150, ../sass/mobile/_layout.scss */
+  /* line 146, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 157, ../sass/mobile/_layout.scss */
+  /* line 153, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 163, ../sass/mobile/_layout.scss */
+  /* line 159, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
@@ -2903,14 +2898,11 @@ label.checkbox.custom {
 /* line 25, ../sass/mobile/controls/_menus.scss */
 .mobile-menu-icon {
   display: inline-block; }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
     /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
-      font-size: 25px; } }
-  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 25, ../sass/mobile/controls/_menus.scss */
-    .mobile-menu-icon {
-      font-size: 29px; } }
+      font-size: 21px;
+      margin-top: 1px; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index fa97baaa9a..625907bcb1 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -341,5 +341,4 @@ ul.tree {
           right: 16.9px; }
     /* line 58, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
-      margin-left: 0px;
-      padding-left: 3px; } }
+      margin-left: 7px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 6ebfd519e1..6a3a32c0db 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -29,7 +29,8 @@ $tablet-itemHeight: $ueBrowseGridItemLg/3;
 
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobile-treeHeight: 38px;
-$mobile-treeLeft: 3px;
+$mobile-startingTreeLeft: 3px;
+$mobile-runningTreeLeft: 7px;
 $mobile-treeRight: 13px;
 
 /************************** WINDOW DIMENSIONS FOR RWD */
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index eb44048dc8..360acf3925 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -31,25 +31,21 @@
             $dHei: $ueBrowseGridItemLg;
             @include phoneandtablet {
                 $dWid: 100%;
-                
                 .bar {
                     &.bottom-bar.abs {
                         top: 0px;
                         height: auto;
                     }
-                }                                
-                
+                }
                 .item-main {
                     .item-type {
                         font-size: $mobile-listIcon;
                         text-align: left;
-
                     }
                     .item-open {
                        display: none;
                     }
                 }
-
                 .title, .details {
                     margin-left: $mobile-listIcon;
                 }             
@@ -64,13 +60,10 @@
                         line-height: $phone-itemHeight * .8;
                     }
                 }
-
                 .title {
                     margin-right: $mobile-listRight;
                     line-height: $phone-itemHeight * .5;
-    
                 }
-
                 .details {
                     margin-right: $mobile-listRight;
                     line-height: 0px;
@@ -81,21 +74,16 @@
                 $dHei: $tablet-itemHeight;
                 width: $dWid;
                 height: $dHei;
-                
                 .item-main {
                     .item-type {
                         font-size: $mobile-listIcon;
                         line-height: $tablet-itemHeight * .75;
-
                     }
                 }
-
                 .title {
                     margin-right: $mobile-listRight;
                     line-height: $tablet-itemHeight * .57;
-    
                 }
-
                 .details {
                     margin-right: $mobile-listRight;
                     line-height: 0px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index a70944f038..4200916739 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -136,13 +136,9 @@
 // over to make space for the 
 // hamburger icon
 .object-header-mobile {
-    @include phone {
+    @include phoneandtablet {
         position: relative;
-        left: 30px;
-    }    
-    @include tablet {
-        position: relative;
-        left: 35px;
+        left: 44px;
     }
 }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 6d5273f56f..37c7ad6a70 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -42,7 +42,7 @@ ul.tree {
                 .label {
                     // Designates the starting left margin
                     // (indentation) of 'My Items'
-                    left: $mobile-treeLeft;
+                    left: $mobile-startingTreeLeft;
                     font-size: 1.2em;
                     // Allows tree item name to stop prior
                     // to the arrow
@@ -56,8 +56,7 @@ ul.tree {
         // Sets the margin on the left, which causes the
         // running indentation after each folder is made
         ul.tree {
-            margin-left: 0px;
-            padding-left: $mobile-treeLeft;
+            margin-left: $mobile-runningTreeLeft;
         }
     }
 }
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index 9b0136b5b3..e2e360b204 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -24,12 +24,10 @@
 // sized according to the device
 .mobile-menu-icon {
     display: inline-block;
-    @include phone {
-        font-size: 25px;
+    @include phoneandtablet {
+        font-size: 21px;
+        margin-top: 1px;
     }
-    @include tablet {
-        font-size: 29px;
-    }      
     @include desktop {
         display: none;
     }       

From 91bd58215ae38fe589dd413dba0b0bc193cb1096 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 12:38:01 -0700
Subject: [PATCH 095/266] [Mobile] Size Adjustment

Moved hamburger icon slightly up
using the padding instead of
margin.
---
 platform/commonUI/general/res/css/theme-espresso.css           | 2 +-
 platform/commonUI/general/res/sass/mobile/controls/_menus.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 12cb464c59..15394500e9 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -2902,7 +2902,7 @@ label.checkbox.custom {
     /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
       font-size: 21px;
-      margin-top: 1px; } }
+      padding-top: 1px; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index e2e360b204..40aef796ee 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -26,7 +26,7 @@
     display: inline-block;
     @include phoneandtablet {
         font-size: 21px;
-        margin-top: 1px;
+        padding-top: $imageThumbPad;
     }
     @include desktop {
         display: none;

From 011e6fc512746ee6e07d42b8cd7728d29d382c13 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 15:27:33 -0700
Subject: [PATCH 096/266] [Mobile] Clean Up

Moved Mobile check in InfoGesture to
call on mouseEnter.
---
 .../inspect/src/gestures/InfoGesture.js       | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 483216d838..4792445f6b 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -71,34 +71,34 @@ define(
 
             function showBubble(event) {
                 trackPosition(event);
-
+                
                 // Also need to track position during hover
                 element.on('mousemove', trackPosition);
 
-                // Checks if you are on a mobile device, if the device is
-                // not mobile (queryService.isMobile() = false), then
-                // the pendingBubble and therefore hovering is allowed
-                if (!queryService.isMobile(navigator.userAgent)) {
-                    // Show the bubble, after a suitable delay (if mouse has
-                    // left before this time is up, this will be canceled.)
-                    pendingBubble = $timeout(function () {
-                        dismissBubble = infoService.display(
-                            "info-table",
-                            domainObject.getModel().name,
-                            domainObject.useCapability('metadata'),
-                            mousePosition
-                        );
-                        element.off('mousemove', trackPosition);
+                // Show the bubble, after a suitable delay (if mouse has
+                // left before this time is up, this will be canceled.)
+                pendingBubble = $timeout(function () {
+                    dismissBubble = infoService.display(
+                        "info-table",
+                        domainObject.getModel().name,
+                        domainObject.useCapability('metadata'),
+                        mousePosition
+                    );
+                    element.off('mousemove', trackPosition);
+
+                    pendingBubble = undefined;
+                }, DELAY);
 
-                        pendingBubble = undefined;
-                    }, DELAY);
-                }
                 element.on('mouseleave', hideBubble);
             }
             
-
-            // Show bubble (on a timeout) on mouse over
-            element.on('mouseenter', showBubble);
+            // Checks if you are on a mobile device, if the device is
+            // not mobile (queryService.isMobile() = false), then
+            // the pendingBubble and therefore hovering is allowed
+            if (!queryService.isMobile(navigator.userAgent)) {
+                // Show bubble (on a timeout) on mouse over
+                element.on('mouseenter', showBubble);
+            }
 
             // Also make sure we dismiss bubble if representation is destroyed
             // before the mouse actually leaves it

From ddc2295ec30d5545005b790a69ef226f66fd1d15 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 16:02:06 -0700
Subject: [PATCH 097/266] [Mobile] Touch Hold Gesture

Rough touch hold gesture added
to the info gesture. Currently
if you hold on an item (that you
would normally hover over) for
500ms, you get the info gesture pop
up.
---
 .../inspect/src/gestures/InfoGesture.js       | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 4792445f6b..b01902d78f 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -42,13 +42,22 @@ define(
             var dismissBubble,
                 pendingBubble,
                 mousePosition,
-                scopeOff;
+                touchPosition,
+                scopeOff,
+                touchDELAY = 500;
 
             function trackPosition(event) {
                 // Record mouse position, so bubble can be shown at latest
                 // mouse position (not just where the mouse entered)
                 mousePosition = [ event.clientX, event.clientY ];
             }
+            
+            function trackTouchPosition(event) {
+                var tEvent = event.changedTouches[0];
+                // Record mouse position, so bubble can be shown at latest
+                // mouse position (not just where the mouse entered)
+                touchPosition = [ tEvent.clientX + 44, tEvent.clientY ];
+            }
 
             function hideBubble() {
                 // If a bubble is showing, dismiss it
@@ -67,6 +76,7 @@ define(
                 // Also clear mouse position so we don't have a ton of tiny
                 // arrays allocated while user mouses over things
                 mousePosition = undefined;
+                touchPosition = undefined;
             }
 
             function showBubble(event) {
@@ -92,12 +102,28 @@ define(
                 element.on('mouseleave', hideBubble);
             }
             
+            function showTouchBubble(event) {
+                trackTouchPosition(event);
+                pendingBubble = $timeout(function () {
+                    dismissBubble = infoService.display(
+                        "info-table",
+                        domainObject.getModel().name,
+                        domainObject.useCapability('metadata'),
+                        touchPosition
+                    );
+                }, touchDELAY);
+
+                element.on('touchend', hideBubble);
+            }
+            
             // Checks if you are on a mobile device, if the device is
             // not mobile (queryService.isMobile() = false), then
             // the pendingBubble and therefore hovering is allowed
             if (!queryService.isMobile(navigator.userAgent)) {
                 // Show bubble (on a timeout) on mouse over
                 element.on('mouseenter', showBubble);
+            } else if (queryService.isMobile(navigator.userAgent)) {
+                element.on('touchstart', showTouchBubble);
             }
 
             // Also make sure we dismiss bubble if representation is destroyed

From 066258ab8322d67f4221003f5a2f349dfe1b6f98 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 16:19:15 -0700
Subject: [PATCH 098/266] [Mobile] User-Select

Removes the copy/define
mobile safari menu that
appears during some touch events.
Only apply to left and right panes.
---
 .../general/res/css/theme-espresso.css        | 206 +++++++++---------
 .../general/res/sass/mobile/_layout.scss      |   2 +
 2 files changed, 111 insertions(+), 97 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 15394500e9..971482f019 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -753,122 +753,134 @@ mct-container {
     max-width: 800px;
     width: 25%; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 52, ../sass/mobile/_layout.scss */
-  .browse-hidetree .mobile-pane.left-menu {
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-property: opacity;
-    -moz-transition-duration: 0.4s;
-    -o-transition-duration: 0.4s;
-    -webkit-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    opacity: 0;
-    right: 100% !important;
-    width: auto !important;
-    overflow-y: hidden;
-    overflow-x: hidden; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 65, ../sass/mobile/_layout.scss */
-  .browse-hidetree .mobile-pane.right-repr {
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden;
-    left: auto !important;
-    width: 100% !important; } }
+/* line 49, ../sass/mobile/_layout.scss */
+.browse-hidetree {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none; }
+  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 53, ../sass/mobile/_layout.scss */
+    .browse-hidetree .mobile-pane.left-menu {
+      -moz-transition-property: opacity;
+      -o-transition-property: opacity;
+      -webkit-transition-property: opacity;
+      transition-property: opacity;
+      -moz-transition-duration: 0.4s;
+      -o-transition-duration: 0.4s;
+      -webkit-transition-duration: 0.4s;
+      transition-duration: 0.4s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      opacity: 0;
+      right: 100% !important;
+      width: auto !important;
+      overflow-y: hidden;
+      overflow-x: hidden; } }
+  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 66, ../sass/mobile/_layout.scss */
+    .browse-hidetree .mobile-pane.right-repr {
+      -moz-transition-duration: 0.35s;
+      -o-transition-duration: 0.35s;
+      -webkit-transition-duration: 0.35s;
+      transition-duration: 0.35s;
+      transition-timing-function: ease;
+      backface-visibility: hidden;
+      left: auto !important;
+      width: 100% !important; } }
+
+/* line 80, ../sass/mobile/_layout.scss */
+.browse-showtree {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none; }
+  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 84, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.left-menu {
+      -moz-transition-property: opacity;
+      -o-transition-property: opacity;
+      -webkit-transition-property: opacity;
+      transition-property: opacity;
+      -moz-transition-duration: 0.4s;
+      -o-transition-duration: 0.4s;
+      -webkit-transition-duration: 0.4s;
+      transition-duration: 0.4s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      opacity: 1;
+      display: block !important;
+      width: auto !important; } }
+  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+    /* line 84, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.left-menu {
+      right: 19px !important; } }
+  @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 84, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.left-menu {
+      right: 66% !important; } }
+  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+    /* line 84, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.left-menu {
+      right: 500px !important; } }
+  @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 84, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.left-menu {
+      right: 78% !important; } }
+  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 108, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.right-repr {
+      -moz-transition-duration: 0.35s;
+      -o-transition-duration: 0.35s;
+      -webkit-transition-duration: 0.35s;
+      transition-duration: 0.35s;
+      transition-timing-function: ease;
+      backface-visibility: hidden;
+      left: auto !important; } }
+  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+    /* line 108, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.right-repr {
+      width: 19px !important; } }
+  @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 108, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.right-repr {
+      width: 66% !important; } }
+  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+    /* line 108, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.right-repr {
+      width: 500px !important; } }
+  @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+    /* line 108, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.right-repr {
+      width: 78% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 82, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-property: opacity;
-    -moz-transition-duration: 0.4s;
-    -o-transition-duration: 0.4s;
-    -webkit-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    opacity: 1;
-    display: block !important;
-    width: auto !important; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 82, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 19px !important; } }
-@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 82, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 66% !important; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 82, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 500px !important; } }
-@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 82, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 78% !important; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 106, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden;
-    left: auto !important; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 106, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    width: 19px !important; } }
-@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 106, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    width: 66% !important; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 106, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    width: 500px !important; } }
-@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 106, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    width: 78% !important; } }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 129, ../sass/mobile/_layout.scss */
+  /* line 131, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 138, ../sass/mobile/_layout.scss */
+  /* line 140, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 44px; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 146, ../sass/mobile/_layout.scss */
+  /* line 148, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 153, ../sass/mobile/_layout.scss */
+  /* line 155, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 159, ../sass/mobile/_layout.scss */
+  /* line 161, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 4200916739..ff3ec5cd64 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -47,6 +47,7 @@
 // classes used for the left menu and the
 // right representation.
 .browse-hidetree {
+    @include user-select(none);
     // Sets the left tree menu when the tree
     // is hidden. 
     .mobile-pane.left-menu {
@@ -77,6 +78,7 @@
 // orientation combination, separate 
 // parameters are used)
 .browse-showtree {
+    @include user-select(none);
     // Sets the left tree menu when the tree
     // is shown.     
     .mobile-pane.left-menu {

From c85a3787c0ad3daa9fdcc4223db449e632ec7e72 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 24 Jul 2015 16:46:45 -0700
Subject: [PATCH 099/266] [Mobile] User-Select

Edited user-select used in
panes' layout to only
happen on phones and tablets
(just to be safe).
---
 .../general/res/css/theme-espresso.css        | 220 +++++++++---------
 .../general/res/sass/mobile/_layout.scss      |  18 +-
 2 files changed, 127 insertions(+), 111 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 971482f019..e2bda6e949 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -753,134 +753,136 @@ mct-container {
     max-width: 800px;
     width: 25%; } }
 
-/* line 49, ../sass/mobile/_layout.scss */
-.browse-hidetree {
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none; }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 53, ../sass/mobile/_layout.scss */
-    .browse-hidetree .mobile-pane.left-menu {
-      -moz-transition-property: opacity;
-      -o-transition-property: opacity;
-      -webkit-transition-property: opacity;
-      transition-property: opacity;
-      -moz-transition-duration: 0.4s;
-      -o-transition-duration: 0.4s;
-      -webkit-transition-duration: 0.4s;
-      transition-duration: 0.4s;
-      -moz-transition-timing-function: ease-in-out;
-      -o-transition-timing-function: ease-in-out;
-      -webkit-transition-timing-function: ease-in-out;
-      transition-timing-function: ease-in-out;
-      opacity: 0;
-      right: 100% !important;
-      width: auto !important;
-      overflow-y: hidden;
-      overflow-x: hidden; } }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 66, ../sass/mobile/_layout.scss */
-    .browse-hidetree .mobile-pane.right-repr {
-      -moz-transition-duration: 0.35s;
-      -o-transition-duration: 0.35s;
-      -webkit-transition-duration: 0.35s;
-      transition-duration: 0.35s;
-      transition-timing-function: ease;
-      backface-visibility: hidden;
-      left: auto !important;
-      width: 100% !important; } }
-
-/* line 80, ../sass/mobile/_layout.scss */
-.browse-showtree {
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none; }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 84, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.left-menu {
-      -moz-transition-property: opacity;
-      -o-transition-property: opacity;
-      -webkit-transition-property: opacity;
-      transition-property: opacity;
-      -moz-transition-duration: 0.4s;
-      -o-transition-duration: 0.4s;
-      -webkit-transition-duration: 0.4s;
-      transition-duration: 0.4s;
-      -moz-transition-timing-function: ease-in-out;
-      -o-transition-timing-function: ease-in-out;
-      -webkit-transition-timing-function: ease-in-out;
-      transition-timing-function: ease-in-out;
-      opacity: 1;
-      display: block !important;
-      width: auto !important; } }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-    /* line 84, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.left-menu {
-      right: 19px !important; } }
-  @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 84, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.left-menu {
-      right: 66% !important; } }
-  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-    /* line 84, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.left-menu {
-      right: 500px !important; } }
-  @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 84, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.left-menu {
-      right: 78% !important; } }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 108, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.right-repr {
-      -moz-transition-duration: 0.35s;
-      -o-transition-duration: 0.35s;
-      -webkit-transition-duration: 0.35s;
-      transition-duration: 0.35s;
-      transition-timing-function: ease;
-      backface-visibility: hidden;
-      left: auto !important; } }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-    /* line 108, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.right-repr {
-      width: 19px !important; } }
-  @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 108, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.right-repr {
-      width: 66% !important; } }
-  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-    /* line 108, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.right-repr {
-      width: 500px !important; } }
-  @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 108, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.right-repr {
-      width: 78% !important; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 49, ../sass/mobile/_layout.scss */
+  .browse-hidetree {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 60, ../sass/mobile/_layout.scss */
+  .browse-hidetree .mobile-pane.left-menu {
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 0;
+    right: 100% !important;
+    width: auto !important;
+    overflow-y: hidden;
+    overflow-x: hidden; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 73, ../sass/mobile/_layout.scss */
+  .browse-hidetree .mobile-pane.right-repr {
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    transition-timing-function: ease;
+    backface-visibility: hidden;
+    left: auto !important;
+    width: 100% !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 131, ../sass/mobile/_layout.scss */
+  /* line 87, ../sass/mobile/_layout.scss */
+  .browse-showtree {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 98, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left-menu {
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 1;
+    display: block !important;
+    width: auto !important; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 98, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left-menu {
+    right: 19px !important; } }
+@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 98, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left-menu {
+    right: 66% !important; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 98, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left-menu {
+    right: 500px !important; } }
+@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 98, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left-menu {
+    right: 78% !important; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 122, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    transition-timing-function: ease;
+    backface-visibility: hidden;
+    left: auto !important; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 122, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
+    width: 19px !important; } }
+@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 122, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
+    width: 66% !important; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 122, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
+    width: 500px !important; } }
+@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 122, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
+    width: 78% !important; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 145, ../sass/mobile/_layout.scss */
   .button-pos {
     position: absolute; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 140, ../sass/mobile/_layout.scss */
+  /* line 154, ../sass/mobile/_layout.scss */
   .object-header-mobile {
     position: relative;
     left: 44px; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 148, ../sass/mobile/_layout.scss */
+  /* line 162, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 155, ../sass/mobile/_layout.scss */
+  /* line 169, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 161, ../sass/mobile/_layout.scss */
+  /* line 175, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index ff3ec5cd64..e4139483f0 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -47,7 +47,14 @@
 // classes used for the left menu and the
 // right representation.
 .browse-hidetree {
-    @include user-select(none);
+    // NOTE: DISABLED SELECTION
+    // Selection disabled in both panes
+    // causing cut/copy/paste menu to
+    // not appear. Should me moved in
+    // future to properly work
+    @include phoneandtablet {
+        @include user-select(none);
+    }
     // Sets the left tree menu when the tree
     // is hidden. 
     .mobile-pane.left-menu {
@@ -78,7 +85,14 @@
 // orientation combination, separate 
 // parameters are used)
 .browse-showtree {
-    @include user-select(none);
+    // NOTE: DISABLED SELECTION
+    // Selection disabled in both panes
+    // causing cut/copy/paste menu to
+    // not appear. Should me moved in
+    // future to properly work
+    @include phoneandtablet {
+        @include user-select(none);
+    }
     // Sets the left tree menu when the tree
     // is shown.     
     .mobile-pane.left-menu {

From 3d0795cde31e610a3da44d0227bb76567fea0ec6 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 27 Jul 2015 10:20:08 -0700
Subject: [PATCH 100/266] [Mobile] Starting Context

Added check to make sure
user is touching only one object.
Started contextmenugesture to be
long touch, however currently long
touch is still infogesture.
---
 .../inspect/src/gestures/InfoGesture.js       | 23 ++++----
 platform/representation/bundle.json           |  2 +-
 .../src/gestures/ContextMenuGesture.js        | 55 ++++++++++++++++++-
 3 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index b01902d78f..67107773f5 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -103,17 +103,20 @@ define(
             }
             
             function showTouchBubble(event) {
-                trackTouchPosition(event);
-                pendingBubble = $timeout(function () {
-                    dismissBubble = infoService.display(
-                        "info-table",
-                        domainObject.getModel().name,
-                        domainObject.useCapability('metadata'),
-                        touchPosition
-                    );
-                }, touchDELAY);
+                // Makes sure user is only touching one place
+                if (event.touches.length < 2) {
+                    trackTouchPosition(event);
+                    pendingBubble = $timeout(function () {
+                        dismissBubble = infoService.display(
+                            "info-table",
+                            domainObject.getModel().name,
+                            domainObject.useCapability('metadata'),
+                            touchPosition
+                        );
+                    }, touchDELAY);
 
-                element.on('touchend', hideBubble);
+                    element.on('touchend', hideBubble);
+                }
             }
             
             // Checks if you are on a mobile device, if the device is
diff --git a/platform/representation/bundle.json b/platform/representation/bundle.json
index 64fc1b0f27..cbbe058701 100644
--- a/platform/representation/bundle.json
+++ b/platform/representation/bundle.json
@@ -26,7 +26,7 @@
             {
                 "key": "menu",
                 "implementation": "gestures/ContextMenuGesture.js",
-                "depends": [ "$compile", "$document", "$window", "$rootScope", "queryService" ]
+                "depends": [ "$timeout", "$compile", "$document", "$window", "$rootScope", "queryService" ]
             }
         ],
         "components": [
diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index 298d34face..e7a9fe27f3 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -50,7 +50,7 @@ define(
          * @param {DomainObject} domainObject the object on which actions
          *                       in the context menu will be performed
          */
-        function ContextMenuGesture($compile, $document, $window, $rootScope, queryService, element, domainObject) {
+        function ContextMenuGesture($timeout, $compile, $document, $window, $rootScope, queryService, element, domainObject) {
             function showMenu(event) {
                 var winDim = [$window.innerWidth, $window.innerHeight],
                     eventCoors = [event.pageX, event.pageY],
@@ -101,6 +101,59 @@ define(
                 // Don't launch browser's context menu
                 event.preventDefault();
             }
+            
+//            function showTouchMenu(event) {
+//                var winDim = [$window.innerWidth, $window.innerHeight],
+//                    eventCoors = [event.pageX, event.pageY],
+//                    menuDim = GestureConstants.MCT_MENU_DIMENSIONS,
+//                    body = $document.find('body'),
+//                    scope = $rootScope.$new(),
+//                    goLeft = eventCoors[0] + menuDim[0] > winDim[0],
+//                    goUp = eventCoors[1] + menuDim[1] > winDim[1],
+//                    menu;
+//
+//                // Remove the context menu
+//                function dismiss() {
+//                    menu.remove();
+//                    body.off("click", dismiss);
+//                    dismissExistingMenu = undefined;
+//                }
+//
+//                if (event.touches.length < 2) {
+//                    // Dismiss any menu which was already showing
+//                    if (dismissExistingMenu) {
+//                        dismissExistingMenu();
+//                    }
+//
+//                    // ...and record the presence of this menu.
+//                    dismissExistingMenu = dismiss;
+//
+//                    // Set up the scope, including menu positioning
+//                    scope.domainObject = domainObject;
+//                    scope.menuStyle = {};
+//                    scope.menuStyle[goLeft ? "right" : "left"] =
+//                        (goLeft ? (winDim[0] - eventCoors[0]) : eventCoors[0]) + 'px';
+//                    scope.menuStyle[goUp ? "bottom" : "top"] =
+//                        (goUp ? (winDim[1] - eventCoors[1]) : eventCoors[1]) + 'px';
+//                    scope.menuClass = {
+//                        "go-left": goLeft,
+//                        "go-up": goUp,
+//                        "context-menu-holder": true
+//                    };
+//
+//                    // Create the context menu
+//                    menu = $compile(MENU_TEMPLATE)(scope);
+//
+//                    // Add the menu to the body
+//                    body.append(menu);
+//
+//                    // Dismiss the menu when body is clicked elsewhere
+//                    body.on('click', dismiss);
+//
+//                    // Don't launch browser's context menu
+//                    event.preventDefault();
+//                }
+//            }
 
             // Iff the user is not on a mobile device, then when 
             // the context menu event occurs, show object actions instead

From 30c530178ad2d09cfbfa720e883a026db19d3d55 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 27 Jul 2015 11:01:03 -0700
Subject: [PATCH 101/266] [Mobile] No ContextMenu

Removed context menu code
started to be used for the
long hold gesture.
---
 .../src/gestures/ContextMenuGesture.js        | 53 -------------------
 1 file changed, 53 deletions(-)

diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index e7a9fe27f3..10f657f529 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -101,59 +101,6 @@ define(
                 // Don't launch browser's context menu
                 event.preventDefault();
             }
-            
-//            function showTouchMenu(event) {
-//                var winDim = [$window.innerWidth, $window.innerHeight],
-//                    eventCoors = [event.pageX, event.pageY],
-//                    menuDim = GestureConstants.MCT_MENU_DIMENSIONS,
-//                    body = $document.find('body'),
-//                    scope = $rootScope.$new(),
-//                    goLeft = eventCoors[0] + menuDim[0] > winDim[0],
-//                    goUp = eventCoors[1] + menuDim[1] > winDim[1],
-//                    menu;
-//
-//                // Remove the context menu
-//                function dismiss() {
-//                    menu.remove();
-//                    body.off("click", dismiss);
-//                    dismissExistingMenu = undefined;
-//                }
-//
-//                if (event.touches.length < 2) {
-//                    // Dismiss any menu which was already showing
-//                    if (dismissExistingMenu) {
-//                        dismissExistingMenu();
-//                    }
-//
-//                    // ...and record the presence of this menu.
-//                    dismissExistingMenu = dismiss;
-//
-//                    // Set up the scope, including menu positioning
-//                    scope.domainObject = domainObject;
-//                    scope.menuStyle = {};
-//                    scope.menuStyle[goLeft ? "right" : "left"] =
-//                        (goLeft ? (winDim[0] - eventCoors[0]) : eventCoors[0]) + 'px';
-//                    scope.menuStyle[goUp ? "bottom" : "top"] =
-//                        (goUp ? (winDim[1] - eventCoors[1]) : eventCoors[1]) + 'px';
-//                    scope.menuClass = {
-//                        "go-left": goLeft,
-//                        "go-up": goUp,
-//                        "context-menu-holder": true
-//                    };
-//
-//                    // Create the context menu
-//                    menu = $compile(MENU_TEMPLATE)(scope);
-//
-//                    // Add the menu to the body
-//                    body.append(menu);
-//
-//                    // Dismiss the menu when body is clicked elsewhere
-//                    body.on('click', dismiss);
-//
-//                    // Don't launch browser's context menu
-//                    event.preventDefault();
-//                }
-//            }
 
             // Iff the user is not on a mobile device, then when 
             // the context menu event occurs, show object actions instead

From 1d7a0fa48d3ea476657e454a60c11a4539d3ce4d Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 27 Jul 2015 11:30:29 -0700
Subject: [PATCH 102/266] [Mobile] Removed InfoGesture

Commented out infogesture.
---
 platform/commonUI/inspect/src/gestures/InfoGesture.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 67107773f5..4cac0ff98a 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -125,9 +125,10 @@ define(
             if (!queryService.isMobile(navigator.userAgent)) {
                 // Show bubble (on a timeout) on mouse over
                 element.on('mouseenter', showBubble);
-            } else if (queryService.isMobile(navigator.userAgent)) {
-                element.on('touchstart', showTouchBubble);
             }
+//            else if (queryService.isMobile(navigator.userAgent)) {
+//                element.on('touchstart', showTouchBubble);
+//            }
 
             // Also make sure we dismiss bubble if representation is destroyed
             // before the mouse actually leaves it

From 617df739ee5f3ea02598b0078f1187b790d582b8 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 27 Jul 2015 15:26:09 -0700
Subject: [PATCH 103/266] [Mobile] persistence

Removed elasticsearch.
---
 platform/persistence/elastic/bundle.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/persistence/elastic/bundle.json b/platform/persistence/elastic/bundle.json
index e7dfa1ab9d..2e3be8e1df 100644
--- a/platform/persistence/elastic/bundle.json
+++ b/platform/persistence/elastic/bundle.json
@@ -17,7 +17,7 @@
             },
             {
                 "key": "ELASTIC_ROOT",
-                "value": "http://localhost:9200",
+                "value": "/elastic",
                 "priority": "fallback"
             },
             {

From 621ccc25ec781718170371622d551be22997e5de Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 27 Jul 2015 15:31:47 -0700
Subject: [PATCH 104/266] [Mobile] Back Arrow HTML

Created HTMl for back arrow,
next neew to hook up a click.
---
 platform/commonUI/browse/bundle.json          |  5 ----
 .../browse/res/templates/back-arrow.html      | 25 +++++++++++++++++++
 2 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 platform/commonUI/browse/res/templates/back-arrow.html

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index 52f9c95075..1e41b57c7a 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -37,11 +37,6 @@
                 "key": "MenuArrowController",
                 "implementation": "MenuArrowController",
                 "depends": [ "$scope" ]
-            },
-            {
-                "key": "BackArrowController",
-                "implementation": "BackArrowController",
-                "depends": ["$location", "$route", "$location", "urlService" ]
             }
         ],
         "controls": [
diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
new file mode 100644
index 0000000000..525398f96a
--- /dev/null
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -0,0 +1,25 @@
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<span ng-controller="BrowseController">
+    <a class='icon ui-symbol mobile-back-arrow'>&lt;</a>
+</span>
\ No newline at end of file

From b0c42c12b76dd41b67a1a12cd8a354dccf46755b Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 27 Jul 2015 17:01:30 -0700
Subject: [PATCH 105/266] [Mobile] Back Arrow

Changes URL correctly that
is printed to the console. Is the
url to up one level of objects.
However not navigating to that
object.
---
 .../browse/res/templates/back-arrow.html      |  5 ++--
 .../commonUI/browse/src/BrowseController.js   | 12 +++------
 .../general/res/css/theme-espresso.css        |  4 ---
 .../general/res/sass/mobile/_layout.scss      |  2 +-
 .../general/src/services/UrlService.js        | 27 ++++++++++++++++++-
 .../inspect/src/gestures/InfoGesture.js       |  5 ++--
 6 files changed, 36 insertions(+), 19 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 525398f96a..69b8320734 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -20,6 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 
-<span ng-controller="BrowseController">
+<span ng-controller="BrowseController"
+      ng-click="backArrow()">
     <a class='icon ui-symbol mobile-back-arrow'>&lt;</a>
-</span>
\ No newline at end of file
+</span>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 9b5ffc4d71..eb8d5cceb2 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -63,10 +63,9 @@ define(
                 // path to new, addressed, path based on
                 // domainObject
                 $location.path(urlService.urlForLocation("browse", domainObject));
-                
             }
             
-            function backArr(domainObject) {
+            function backArr() {
                 var priorRoute = $route.current,
                     // Act as if params HADN'T changed to avoid page reload
                     unlisten;
@@ -79,13 +78,8 @@ define(
                     }
                     unlisten();
                 });
-                // urlService.urlForLocation used to adjust current
-                // path to new, addressed, path based on
-                // domainObject
-                                
-                
-                var thing = urlService.urlForLocation("browse", domainObject);
-                $location.path(thing);
+                console.log(urlService.urlForBack("browse", $scope.navigatedObject));
+                $location.path(urlService.urlForBack("browse", $scope.navigatedObject));
             }
 
             // Callback for updating the in-scope reference to the object
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 405b371e1a..f9a59ef071 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -890,10 +890,6 @@ mct-container {
     .object-header .label .context-available {
       opacity: 1 !important; } }
 
-/* line 170, ../sass/mobile/_layout.scss */
-.mobile-back-arrow {
-  font-size: 0.8em; }
-
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
   /* line 175, ../sass/mobile/_layout.scss */
   .desktop-hide {
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 0a634b4235..f1d7c306b3 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -168,7 +168,7 @@
 }
 
 .mobile-back-arrow {
-    font-size: 0.8em;
+//    font-size: 0.8em;
 }
 
 
diff --git a/platform/commonUI/general/src/services/UrlService.js b/platform/commonUI/general/src/services/UrlService.js
index 4562059d0c..a700f288d4 100644
--- a/platform/commonUI/general/src/services/UrlService.js
+++ b/platform/commonUI/general/src/services/UrlService.js
@@ -55,6 +55,23 @@ define(
                 return path;
             }
             
+            function urlForLastLocation(mode, domainObject) {
+                var context = domainObject &&
+                        domainObject.getCapability('context'),
+                    objectPath = context ? context.getPath() : [],
+                    editedPath = (objectPath.length > 1) ? objectPath.slice(0, -1) : objectPath,
+                    ids = editedPath.map(function (domainObject) {
+                        return domainObject.getId();
+                    }),
+                    // Parses the path together. Starts with the 
+                    // default index.html file, then the mode passed
+                    // into the service, followed by ids in the url
+                    // joined by '/', and lastly the view path from
+                    // the current location
+                    path = mode + "/" + ids.slice(1).join("/");
+                return path;
+            }
+            
             // Uses the Url for the current location
             // from the urlForLocation function and
             // includes the view and the index path
@@ -65,6 +82,12 @@ define(
                 return newTabPath;
             }
             
+            function urlForBack(mode, domainObject) {
+                var newTabPath =
+                        "index.html#/" + urlForLastLocation(mode, domainObject);
+                return newTabPath;
+            }
+                        
             return {
                /**
                  * Returns the Url path for a specific domain object
@@ -84,7 +107,9 @@ define(
                  * @param {DomainObject} value of the domain object 
                  *        to get the path of
                  */
-                urlForLocation: urlForLocation
+                urlForLocation: urlForLocation,
+                
+                urlForBack: urlForBack
             };
         }
 
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 67107773f5..4cac0ff98a 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -125,9 +125,10 @@ define(
             if (!queryService.isMobile(navigator.userAgent)) {
                 // Show bubble (on a timeout) on mouse over
                 element.on('mouseenter', showBubble);
-            } else if (queryService.isMobile(navigator.userAgent)) {
-                element.on('touchstart', showTouchBubble);
             }
+//            else if (queryService.isMobile(navigator.userAgent)) {
+//                element.on('touchstart', showTouchBubble);
+//            }
 
             // Also make sure we dismiss bubble if representation is destroyed
             // before the mouse actually leaves it

From e32403a75f55564088c2a70663eed01f8affbbd7 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 10:56:29 -0700
Subject: [PATCH 106/266] [Mobile] Clean-Up

Cleaned the unused code for the
backArrow and long touch gestures.
Commented out functions for later use
Currently shows the back arrow, however,
only will print to console on press.
Edited tests where mobile checks were breaking
and fixed.
---
 .../browse/res/templates/back-arrow.html      |  1 +
 .../browse/res/templates/browse-object.html   |  2 +-
 .../commonUI/browse/src/BrowseController.js   | 23 ++-------
 .../browse/test/BrowseControllerSpec.js       | 10 +++-
 platform/commonUI/general/bundle.json         |  2 +-
 .../general/res/css/theme-espresso.css        |  8 ++--
 .../general/res/sass/mobile/_layout.scss      |  1 +
 .../src/controllers/TreeNodeController.js     |  2 +-
 .../general/src/services/UrlService.js        | 35 ++++----------
 .../controllers/TreeNodeControllerSpec.js     |  4 +-
 .../inspect/src/gestures/InfoGesture.js       | 47 +++++++++----------
 11 files changed, 57 insertions(+), 78 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 69b8320734..5e54b06185 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -20,6 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 
+<!-- Back Arrow Icon used on mobile-->
 <span ng-controller="BrowseController"
       ng-click="backArrow()">
     <a class='icon ui-symbol mobile-back-arrow'>&lt;</a>
diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 7a5bd09470..1f69f45b0a 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -25,7 +25,7 @@
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
-        <!-- For now, on mobile the button bar is hidden-->
+        <!-- Temporarily, on mobile, the button bar is hidden-->
         <div class="btn-bar right abs mobile-hide">
             <mct-representation key="'action-group'"
                                 mct-object="domainObject"
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index eb8d5cceb2..21dad21744 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -64,23 +64,6 @@ define(
                 // domainObject
                 $location.path(urlService.urlForLocation("browse", domainObject));
             }
-            
-            function backArr() {
-                var priorRoute = $route.current,
-                    // Act as if params HADN'T changed to avoid page reload
-                    unlisten;
-
-                unlisten = $scope.$on('$locationChangeSuccess', function () {
-                    // Checks path to make sure /browse/ is at front
-                    // if so, change $route.current                    
-                    if ($location.path().indexOf("/browse/") === 0) {
-                        $route.current = priorRoute;
-                    }
-                    unlisten();
-                });
-                console.log(urlService.urlForBack("browse", $scope.navigatedObject));
-                $location.path(urlService.urlForBack("browse", $scope.navigatedObject));
-            }
 
             // Callback for updating the in-scope reference to the object
             // that is currently navigated-to.
@@ -142,6 +125,10 @@ define(
                     navigateTo(domainObject);
                 }
             }
+            
+            function updateRouteBackArrow() {
+                console.log("Back Arrow");
+            }
 
             // Load the root object, put it in the scope.
             // Also, load its immediate children, and (possibly)
@@ -172,7 +159,7 @@ define(
                 navigationService.removeListener(setNavigation);
             });
             
-            $scope.backArrow = backArr;
+            $scope.backArrow = updateRouteBackArrow;
 
         }
 
diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index b61a856d41..339eb7febd 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -52,7 +52,7 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj(
                     "$scope",
-                    [ "$on", "$watch", "treeSlide" ]
+                    [ "$on", "$watch", "treeSlide", "backArrow" ]
                 );
                 mockRoute = { current: { params: {} } };
                 mockLocation = jasmine.createSpyObj(
@@ -244,7 +244,13 @@ define(
                     mockUrlService.urlForLocation(mockMode, mockNextObject)
                 );
             });
-
+            
+            // Mocks the back arrow call that
+            // lets the html code know the back
+            // arrow navigation needs to be done
+            it("calls the backArrow function", function () {
+                mockScope.backArrow();
+            });
         });
     }
 );
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 157c8c834b..53486c3f0e 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -65,7 +65,7 @@
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",
-                "depends": [ "$scope", "$timeout", "$rootScope", "queryService" ]
+                "depends": [ "$scope", "$timeout", "queryService" ]
             },
             {
                 "key": "ActionGroupController",
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index f9a59ef071..4cb2a1336b 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -891,22 +891,22 @@ mct-container {
       opacity: 1 !important; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 175, ../sass/mobile/_layout.scss */
+  /* line 176, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 182, ../sass/mobile/_layout.scss */
+  /* line 183, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 189, ../sass/mobile/_layout.scss */
+  /* line 190, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 195, ../sass/mobile/_layout.scss */
+  /* line 196, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index f1d7c306b3..b7704681e7 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -168,6 +168,7 @@
 }
 
 .mobile-back-arrow {
+//    display: none !important;
 //    font-size: 0.8em;
 }
 
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 70d38d9b77..27ef3bfd49 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -50,7 +50,7 @@ define(
          * expand-to-show-navigated-object behavior.)
          * @constructor
          */
-        function TreeNodeController($scope, $timeout, $rootScope, queryService) {
+        function TreeNodeController($scope, $timeout, queryService) {
             var selectedObject = ($scope.ngModel || {}).selectedObject,
                 isSelected = false,
                 hasBeenExpanded = false;
diff --git a/platform/commonUI/general/src/services/UrlService.js b/platform/commonUI/general/src/services/UrlService.js
index a700f288d4..3363dc1d49 100644
--- a/platform/commonUI/general/src/services/UrlService.js
+++ b/platform/commonUI/general/src/services/UrlService.js
@@ -55,22 +55,13 @@ define(
                 return path;
             }
             
-            function urlForLastLocation(mode, domainObject) {
-                var context = domainObject &&
-                        domainObject.getCapability('context'),
-                    objectPath = context ? context.getPath() : [],
-                    editedPath = (objectPath.length > 1) ? objectPath.slice(0, -1) : objectPath,
-                    ids = editedPath.map(function (domainObject) {
-                        return domainObject.getId();
-                    }),
-                    // Parses the path together. Starts with the 
-                    // default index.html file, then the mode passed
-                    // into the service, followed by ids in the url
-                    // joined by '/', and lastly the view path from
-                    // the current location
-                    path = mode + "/" + ids.slice(1).join("/");
-                return path;
-            }
+//            function idForLevelArrow(domainObject) {
+//                var context = domainObject &&
+//                        domainObject.getCapability('context'),
+//                    objectPath = context ? context.getPath() : [],
+//                    id = objectPath[objectPath.length - 2];
+//                return id;
+//            }
             
             // Uses the Url for the current location
             // from the urlForLocation function and
@@ -81,13 +72,7 @@ define(
                         "index.html#" + urlForLocation(mode, domainObject) + viewPath;
                 return newTabPath;
             }
-            
-            function urlForBack(mode, domainObject) {
-                var newTabPath =
-                        "index.html#/" + urlForLastLocation(mode, domainObject);
-                return newTabPath;
-            }
-                        
+             
             return {
                /**
                  * Returns the Url path for a specific domain object
@@ -107,9 +92,9 @@ define(
                  * @param {DomainObject} value of the domain object 
                  *        to get the path of
                  */
-                urlForLocation: urlForLocation,
+                urlForLocation: urlForLocation
                 
-                urlForBack: urlForBack
+//                idForLevelArrow: idForLevelArrow
             };
         }
 
diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
index 394d71b88a..2ce5c9f9fc 100644
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -187,7 +187,9 @@ define(
             });
             
             it("check if tree node is in a mobile device", function () {
-                controller.checkMobile();
+                if (controller) {
+                    controller.checkMobile();
+                }
             });
         });
     }
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 4cac0ff98a..3634042212 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -52,12 +52,12 @@ define(
                 mousePosition = [ event.clientX, event.clientY ];
             }
             
-            function trackTouchPosition(event) {
-                var tEvent = event.changedTouches[0];
-                // Record mouse position, so bubble can be shown at latest
-                // mouse position (not just where the mouse entered)
-                touchPosition = [ tEvent.clientX + 44, tEvent.clientY ];
-            }
+//            function trackTouchPosition(event) {
+//                var tEvent = event.changedTouches[0];
+//                // Record mouse position, so bubble can be shown at latest
+//                // mouse position (not just where the mouse entered)
+//                touchPosition = [ tEvent.clientX + 44, tEvent.clientY ];
+//            }
 
             function hideBubble() {
                 // If a bubble is showing, dismiss it
@@ -102,22 +102,22 @@ define(
                 element.on('mouseleave', hideBubble);
             }
             
-            function showTouchBubble(event) {
-                // Makes sure user is only touching one place
-                if (event.touches.length < 2) {
-                    trackTouchPosition(event);
-                    pendingBubble = $timeout(function () {
-                        dismissBubble = infoService.display(
-                            "info-table",
-                            domainObject.getModel().name,
-                            domainObject.useCapability('metadata'),
-                            touchPosition
-                        );
-                    }, touchDELAY);
-
-                    element.on('touchend', hideBubble);
-                }
-            }
+//            function showTouchBubble(event) {
+//                // Makes sure user is only touching one place
+//                if (event.touches.length < 2) {
+//                    trackTouchPosition(event);
+//                    pendingBubble = $timeout(function () {
+//                        dismissBubble = infoService.display(
+//                            "info-table",
+//                            domainObject.getModel().name,
+//                            domainObject.useCapability('metadata'),
+//                            touchPosition
+//                        );
+//                    }, touchDELAY);
+//
+//                    element.on('touchend', hideBubble);
+//                }
+//            }
             
             // Checks if you are on a mobile device, if the device is
             // not mobile (queryService.isMobile() = false), then
@@ -126,9 +126,6 @@ define(
                 // Show bubble (on a timeout) on mouse over
                 element.on('mouseenter', showBubble);
             }
-//            else if (queryService.isMobile(navigator.userAgent)) {
-//                element.on('touchstart', showTouchBubble);
-//            }
 
             // Also make sure we dismiss bubble if representation is destroyed
             // before the mouse actually leaves it

From 2a4943f58480c6a00d4d614c2bc90a09930e0f07 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 10:58:22 -0700
Subject: [PATCH 107/266] [Mobile] Console

Removed call to console so
mvn clean install would compile.
---
 platform/commonUI/browse/src/BrowseController.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 21dad21744..b7e8e796ff 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -127,7 +127,7 @@ define(
             }
             
             function updateRouteBackArrow() {
-                console.log("Back Arrow");
+//                console.log("Back Arrow");
             }
 
             // Load the root object, put it in the scope.

From 62714bb97ce4354699c40c9bfcc06b7b41f2d018 Mon Sep 17 00:00:00 2001
From: Pete Richards <peter.l.richards@nasa.gov>
Date: Tue, 28 Jul 2015 09:40:16 -0700
Subject: [PATCH 108/266] [Continuous] Deploy to staging-un

---
 circle.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/circle.yml b/circle.yml
index b8f367a604..2a79a5ed93 100644
--- a/circle.yml
+++ b/circle.yml
@@ -4,3 +4,7 @@ deployment:
     commands:
       - ./build-docs.sh
       - git push git@heroku.com:openmctweb-demo.git $CIRCLE_SHA1:refs/heads/master
+  openmctweb-staging-un:
+    branch: search
+    heroku:
+      appname: openmctweb-staging-un

From 21964fe68e8956c18f60912a348ee7052504cec5 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 11:08:10 -0700
Subject: [PATCH 109/266] [Mobile] Demo Setup

Added lines to circle.yml
for mobile demo branch.
---
 circle.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/circle.yml b/circle.yml
index 2a79a5ed93..3ee4c7f1c3 100644
--- a/circle.yml
+++ b/circle.yml
@@ -8,3 +8,7 @@ deployment:
     branch: search
     heroku:
       appname: openmctweb-staging-un
+  openmctweb-staging-deux:
+    branch: mobile
+    heroku:
+      appname: openmctweb-staging-deux
\ No newline at end of file

From 3c6c420023c43a87309d17630b7b2d45c31c18b0 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 15:08:14 -0700
Subject: [PATCH 110/266] [Mobile] Back Arrow

Back Arrow implemented
by getting parent and then
navigating to it.
---
 platform/commonUI/browse/bundle.json           |  1 +
 .../browse/res/templates/back-arrow.html       |  2 +-
 .../res/templates/browse/object-header.html    |  2 +-
 .../commonUI/browse/src/BrowseController.js    | 18 ++++++++++++++----
 .../general/res/css/theme-espresso.css         |  9 +++++++--
 .../general/res/sass/mobile/_layout.scss       |  7 +++++++
 .../general/src/services/UrlService.js         | 10 ----------
 7 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index 1e41b57c7a..6852c3e8e6 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -85,6 +85,7 @@
             },
             {
                 "key": "back-arrow",
+                "uses": [ "type", "action" ],
                 "templateUrl": "templates/back-arrow.html"
             }
         ],
diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 5e54b06185..ceb3df0ef2 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -22,6 +22,6 @@
 
 <!-- Back Arrow Icon used on mobile-->
 <span ng-controller="BrowseController"
-      ng-click="backArrow()">
+      ng-click='backArrow()'>
     <a class='icon ui-symbol mobile-back-arrow'>&lt;</a>
 </span>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 8687646271..884f4fa888 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -21,7 +21,7 @@
 -->
 <div class='object-header object-header-mobile'>
     <span class="label s-label">
-        <mct-representation key="'back-arrow'" mct-object='domainObject'></mct-representation>
+        <mct-representation key="'back-arrow'"></mct-representation>
         <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
         <span class='type-name'>{{type.getName()}}</span>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index b7e8e796ff..cc4f06b243 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -126,8 +126,16 @@ define(
                 }
             }
             
-            function updateRouteBackArrow() {
-//                console.log("Back Arrow");
+            // Uses the current navigation to get the 
+            // current ContextCapability, then the
+            // parent is gotten from that. If the parent
+            // is not the root, then user is navigated to
+            // parent
+            function navigateToParent() {
+                var parent = navigationService.getNavigation().getCapability('context').getParent();
+                if (parent.getId() !== ROOT_ID) {
+                    navigateTo(parent);
+                }
             }
 
             // Load the root object, put it in the scope.
@@ -144,10 +152,12 @@ define(
                 selectedObject: navigationService.getNavigation()
             };
             
+            // SlideMenu boolean used to hide and show
+            // tree menu
             $scope.treeSlide = function () {
                 $scope.treeClass = !$scope.treeClass;
             };
-
+            
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
 
@@ -159,7 +169,7 @@ define(
                 navigationService.removeListener(setNavigation);
             });
             
-            $scope.backArrow = updateRouteBackArrow;
+            $scope.backArrow = navigateToParent;
 
         }
 
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 4cb2a1336b..f0109afbbf 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -900,13 +900,18 @@ mct-container {
   .mobile-hide {
     display: none; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 190, ../sass/mobile/_layout.scss */
+  .mobile-unhide {
+    display: inline-block; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 197, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 196, ../sass/mobile/_layout.scss */
+  /* line 203, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index b7704681e7..c36d513671 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -186,6 +186,13 @@
     }
 }
 
+// Hides objects on phone and tablet
+.mobile-unhide {
+    @include phoneandtablet {
+        display: inline-block;
+    }
+}
+
 // Hides objects only on the phone
 .phone-hide {
     @include phone {
diff --git a/platform/commonUI/general/src/services/UrlService.js b/platform/commonUI/general/src/services/UrlService.js
index 3363dc1d49..edb5f6235b 100644
--- a/platform/commonUI/general/src/services/UrlService.js
+++ b/platform/commonUI/general/src/services/UrlService.js
@@ -55,14 +55,6 @@ define(
                 return path;
             }
             
-//            function idForLevelArrow(domainObject) {
-//                var context = domainObject &&
-//                        domainObject.getCapability('context'),
-//                    objectPath = context ? context.getPath() : [],
-//                    id = objectPath[objectPath.length - 2];
-//                return id;
-//            }
-            
             // Uses the Url for the current location
             // from the urlForLocation function and
             // includes the view and the index path
@@ -93,8 +85,6 @@ define(
                  *        to get the path of
                  */
                 urlForLocation: urlForLocation
-                
-//                idForLevelArrow: idForLevelArrow
             };
         }
 

From a073ef69ac7d436070bfd90b5c1d94a57ddf40b6 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 15:15:42 -0700
Subject: [PATCH 111/266] [Mobile] Back Arrow

Shifted Back Arrow down to
align with header.
---
 platform/commonUI/browse/res/templates/back-arrow.html |  2 +-
 platform/commonUI/general/res/css/theme-espresso.css   | 10 +++++-----
 platform/commonUI/general/res/sass/mobile/_layout.scss |  6 ------
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index ceb3df0ef2..b4003a8a9b 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -23,5 +23,5 @@
 <!-- Back Arrow Icon used on mobile-->
 <span ng-controller="BrowseController"
       ng-click='backArrow()'>
-    <a class='icon ui-symbol mobile-back-arrow'>&lt;</a>
+    <a class='type-icon icon ui-symbol'>&lt;</a>
 </span>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index f0109afbbf..394e6ac721 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -891,27 +891,27 @@ mct-container {
       opacity: 1 !important; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 176, ../sass/mobile/_layout.scss */
+  /* line 170, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 183, ../sass/mobile/_layout.scss */
+  /* line 177, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 190, ../sass/mobile/_layout.scss */
+  /* line 184, ../sass/mobile/_layout.scss */
   .mobile-unhide {
     display: inline-block; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 197, ../sass/mobile/_layout.scss */
+  /* line 191, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 203, ../sass/mobile/_layout.scss */
+  /* line 197, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index c36d513671..806c7547f3 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -167,12 +167,6 @@
     }
 }
 
-.mobile-back-arrow {
-//    display: none !important;
-//    font-size: 0.8em;
-}
-
-
 .desktop-hide {
     @include desktop {
         display: none;

From 356fa73c919360b3e513ddc044f32bd720a56deb Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 15:55:22 -0700
Subject: [PATCH 112/266] [Mobile] Tests

Test created for backArrow
that spies on all objects
used to find parent.
---
 .../browse/test/BrowseControllerSpec.js       | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index 339eb7febd..181121574a 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -249,6 +249,39 @@ define(
             // lets the html code know the back
             // arrow navigation needs to be done
             it("calls the backArrow function", function () {
+                var mockContext = jasmine.createSpyObj('context', ['getParent']),
+                    mockParent  = jasmine.createSpyObj(
+                        "domainObject",
+                        [ "getId", "getCapability", "getModel", "useCapability" ]
+                    );
+                mockNavigationService = jasmine.createSpyObj(
+                    "navigationService",
+                    [
+                        "getNavigation",
+                        "setNavigation",
+                        "addListener",
+                        "removeListener"
+                    ]
+                );
+                
+                mockRoute.current.params.ids = "mine/junk";
+                mockParent.getId.andReturn("mine");
+                
+                mockDomainObject.getCapability.andCallFake(function (c) {
+                    return c === 'context' && mockContext;
+                });
+                
+                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                mockContext.getParent.andReturn(mockParent);
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
                 mockScope.backArrow();
             });
         });

From 84b9e4d781a8d7a6c89ede45bd9a57ebd33b390f Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 28 Jul 2015 17:09:15 -0700
Subject: [PATCH 113/266] [Mobile] Context Menu

Context menu next to object header
now dismisses when touching away
from it. Also, when long touching
an object, the context menu appears.
Set on 500ms timeout.
---
 .../inspect/src/gestures/InfoGesture.js       | 29 +------------------
 platform/representation/bundle.json           |  4 +--
 .../src/actions/ContextMenuAction.js          | 25 ++++++++++++----
 .../src/gestures/ContextMenuGesture.js        | 26 +++++++++++++++--
 4 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 3634042212..4792445f6b 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -42,22 +42,13 @@ define(
             var dismissBubble,
                 pendingBubble,
                 mousePosition,
-                touchPosition,
-                scopeOff,
-                touchDELAY = 500;
+                scopeOff;
 
             function trackPosition(event) {
                 // Record mouse position, so bubble can be shown at latest
                 // mouse position (not just where the mouse entered)
                 mousePosition = [ event.clientX, event.clientY ];
             }
-            
-//            function trackTouchPosition(event) {
-//                var tEvent = event.changedTouches[0];
-//                // Record mouse position, so bubble can be shown at latest
-//                // mouse position (not just where the mouse entered)
-//                touchPosition = [ tEvent.clientX + 44, tEvent.clientY ];
-//            }
 
             function hideBubble() {
                 // If a bubble is showing, dismiss it
@@ -76,7 +67,6 @@ define(
                 // Also clear mouse position so we don't have a ton of tiny
                 // arrays allocated while user mouses over things
                 mousePosition = undefined;
-                touchPosition = undefined;
             }
 
             function showBubble(event) {
@@ -102,23 +92,6 @@ define(
                 element.on('mouseleave', hideBubble);
             }
             
-//            function showTouchBubble(event) {
-//                // Makes sure user is only touching one place
-//                if (event.touches.length < 2) {
-//                    trackTouchPosition(event);
-//                    pendingBubble = $timeout(function () {
-//                        dismissBubble = infoService.display(
-//                            "info-table",
-//                            domainObject.getModel().name,
-//                            domainObject.useCapability('metadata'),
-//                            touchPosition
-//                        );
-//                    }, touchDELAY);
-//
-//                    element.on('touchend', hideBubble);
-//                }
-//            }
-            
             // Checks if you are on a mobile device, if the device is
             // not mobile (queryService.isMobile() = false), then
             // the pendingBubble and therefore hovering is allowed
diff --git a/platform/representation/bundle.json b/platform/representation/bundle.json
index b8370f1682..3eeaf2d258 100644
--- a/platform/representation/bundle.json
+++ b/platform/representation/bundle.json
@@ -26,7 +26,7 @@
             {
                 "key": "menu",
                 "implementation": "gestures/ContextMenuGesture.js",
-                "depends": ["queryService"]
+                "depends": ["$timeout", "queryService"]
             }
         ],
         "components": [
@@ -54,7 +54,7 @@
             {
                 "key": "menu",
                 "implementation": "actions/ContextMenuAction.js",
-                "depends": [ "$compile", "$document", "$window", "$rootScope" ]
+                "depends": [ "$compile", "$document", "$window", "$rootScope", "queryService" ]
             }
         ]
     }
diff --git a/platform/representation/src/actions/ContextMenuAction.js b/platform/representation/src/actions/ContextMenuAction.js
index 390531053e..244d6a0b0d 100644
--- a/platform/representation/src/actions/ContextMenuAction.js
+++ b/platform/representation/src/actions/ContextMenuAction.js
@@ -47,7 +47,7 @@ define(
          * @param actionContexr the context in which the action
          *                      should be performed
          */
-        function ContextMenuAction($compile, $document, $window, $rootScope, actionContext) {
+        function ContextMenuAction($compile, $document, $window, $rootScope, queryService, actionContext) {
             
             function perform() {
                 var winDim = [$window.innerWidth, $window.innerHeight],
@@ -94,13 +94,26 @@ define(
                 body.append(menu);
                 
                 // Stop propagation so that clicks on the menu do not close the menu
-                menu.on('mousedown', function (event) {
-                    event.stopPropagation();
-                });
+                // Stop propagation so that touches on the menu do not close the menu
+                if (!queryService.isMobile(navigator.userAgent)) {
+                    menu.on('mousedown', function (event) {
+                        event.stopPropagation();
+                    });
+                } else if (queryService.isMobile(navigator.userAgent)) {
+                    menu.on('touchstart', function (event) {
+                        event.stopPropagation();
+                    });
+                }
                 
-                // Dismiss the menu when body is clicked elsewhere
+                // Dismiss the menu when body is clicked/touched elsewhere
                 // ('mousedown' because 'click' breaks left-click context menus)
-                body.on('mousedown', dismiss);
+                // ('touchstart' because 'touch' breaks context menus up)
+                if (!queryService.isMobile(navigator.userAgent)) {
+                    body.on('mousedown', dismiss);
+                } else if (queryService.isMobile(navigator.userAgent)) {
+                    body.on('touchstart', dismiss);
+                }
+                
 
                 // Don't launch browser's context menu
                 actionContext.event.preventDefault();
diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index 34e11e039c..576c5eb66f 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -39,9 +39,11 @@ define(
          * @param {DomainObject} domainObject the object on which actions
          *                       in the context menu will be performed
          */
-        function ContextMenuGesture(queryService, element, domainObject) {
+        function ContextMenuGesture($timeout, queryService, element, domainObject) {
             var actionContext,
-                stop;
+                stop,
+                isPressing,
+                longTouchTime = 500;
             
             // When context menu event occurs, show object actions instead
             if (!queryService.isMobile(navigator.userAgent)) {
@@ -49,6 +51,26 @@ define(
                     actionContext = {key: 'menu', domainObject: domainObject, event: event};
                     stop = domainObject.getCapability('action').perform(actionContext);
                 });
+            } else if (queryService.isMobile(navigator.userAgent)) {
+                // If on mobile device, then start timeout for the single touch event
+                // during the timeout 'isPressing' is true.
+                element.on('touchstart', function (event) {
+                    if (event.touches.length < 2) {
+                        isPressing = true;
+                        // After the timeout, if 'isPressing' is
+                        // true, display context menu for object
+                        $timeout(function () {
+                            if (isPressing) {
+                                actionContext = {key: 'menu', domainObject: domainObject, event: event};
+                                stop = domainObject.getCapability('action').perform(actionContext);
+                            }
+                        }, longTouchTime);
+                    }
+                });
+                // Whenever the touch event ends, 'isPressing' is false.
+                element.on('touchend', function (event) {
+                    isPressing = false;
+                });
             }
 
             return {

From 7cc14a195b968ad337278d35b6e4ccdccee18fc9 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 10:00:03 -0700
Subject: [PATCH 114/266] [Mobile] Tests/Header

Removes back arrow on desktops.
Also added queryService to tests
for the context menu action and
gesture.
---
 .../browse/res/templates/browse/object-header.html         | 2 +-
 .../representation/test/actions/ContextMenuActionSpec.js   | 3 +++
 .../representation/test/gestures/ContextMenuGestureSpec.js | 7 +++++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 884f4fa888..a7bb8029fc 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -21,7 +21,7 @@
 -->
 <div class='object-header object-header-mobile'>
     <span class="label s-label">
-        <mct-representation key="'back-arrow'"></mct-representation>
+        <mct-representation class="desktop-hide" key="'back-arrow'"></mct-representation>
         <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
         <span class='type-name'>{{type.getName()}}</span>
diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index 73b877ddc3..8d94a30766 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -43,6 +43,7 @@ define(
                 mockBody,
                 mockWindow,
                 mockRootScope,
+                mockQueryService,
                 mockScope,
                 mockElement,
                 mockDomainObject,
@@ -58,6 +59,7 @@ define(
                 mockBody = jasmine.createSpyObj("body", JQLITE_FUNCTIONS);
                 mockWindow = { innerWidth: MENU_DIMENSIONS[0] * 4, innerHeight: MENU_DIMENSIONS[1] * 4 };
                 mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
+                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
                 mockScope = {};
                 mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
@@ -77,6 +79,7 @@ define(
                     mockDocument,
                     mockWindow,
                     mockRootScope,
+                    mockQueryService,
                     mockActionContext
                 );
             });
diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index 655e68ff2e..ec687e3983 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -35,7 +35,8 @@ define(
 
 
         describe("The 'context menu' gesture", function () {
-            var mockElement,
+            var mockTimeout,
+                mockElement,
                 mockQueryService,
                 mockDomainObject,
                 mockEvent,
@@ -44,11 +45,13 @@ define(
 
             beforeEach(function () {
                 mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
+                mockTimeout = jasmine.createSpy("$timeout");
+                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
                 mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
                 mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
                 
-                gesture = new ContextMenuGesture(mockQueryService, mockElement, mockDomainObject);
+                gesture = new ContextMenuGesture(mockTimeout, mockQueryService, mockElement, mockDomainObject);
 
                 // Capture the contextmenu callback
                 fireGesture =  mockElement.on.mostRecentCall.args[1];

From d2625205942043007cae2fbc51ce0bde0625bdb3 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 10:25:09 -0700
Subject: [PATCH 115/266] [Mobile] Tree menu Open

Tree menu select arrow button's width
is now size of full button. Prior to this
the pressable area was less and therefore
less responsive.
---
 platform/commonUI/general/res/css/tree.css           | 10 ++++++----
 platform/commonUI/general/res/sass/mobile/_tree.scss |  2 ++
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 01c5a20921..a0b8f7286d 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -342,14 +342,16 @@ ul.tree {
       ul.tree li span.tree-item .view-control {
         position: absolute;
         right: 13px;
-        font-size: 1.8em; }
-      /* line 42, ../sass/mobile/_tree.scss */
+        font-size: 1.8em;
+        right: 0px;
+        width: auto; }
+      /* line 44, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label {
         left: 3px;
         font-size: 1.2em; }
-        /* line 49, ../sass/mobile/_tree.scss */
+        /* line 51, ../sass/mobile/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           right: 16.9px; }
-    /* line 58, ../sass/mobile/_tree.scss */
+    /* line 60, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
       margin-left: 7px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 37c7ad6a70..fcdc70666e 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -37,6 +37,8 @@ ul.tree {
                     position: absolute;
                     right: $mobile-treeRight;
                     font-size: 1.8em;
+                    right: 0px;
+                    width: auto;
                 }                   
 
                 .label {

From 28a2a5b92ae500c97d38ecffd7558b849a4c6837 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 10:39:17 -0700
Subject: [PATCH 116/266] [Mobile] Tweaks to layout

Removed the user-select option
for the context menu and bottom bar
on mobile. Also edited the folder
grid item so that its icon rep
size is not overly large.
---
 platform/commonUI/general/res/css/items.css         | 13 +++++++------
 .../commonUI/general/res/css/theme-espresso.css     |  8 ++++++++
 .../commonUI/general/res/sass/mobile/_item.scss     |  1 +
 .../commonUI/general/res/sass/mobile/_layout.scss   |  5 +++++
 .../commonUI/general/res/templates/bottombar.html   |  2 +-
 .../general/res/templates/menu/context-menu.html    |  2 +-
 6 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 4d69e7e790..ce8878b4c3 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -390,12 +390,13 @@
     height: 50px; }
     /* line 61, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      line-height: 40px; }
-    /* line 65, ../sass/mobile/_item.scss */
+      line-height: 40px;
+      height: auto; }
+    /* line 66, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 25px; }
-    /* line 69, ../sass/mobile/_item.scss */
+    /* line 70, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
@@ -404,15 +405,15 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 66.66667px; }
-    /* line 80, ../sass/mobile/_item.scss */
+    /* line 81, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       font-size: 30px;
       line-height: 50px; }
-    /* line 85, ../sass/mobile/_item.scss */
+    /* line 86, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 38px; }
-    /* line 89, ../sass/mobile/_item.scss */
+    /* line 90, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 394e6ac721..638a08c9b6 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -915,6 +915,14 @@ mct-container {
   .tree-holder {
     overflow-x: hidden !important; } }
 
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 202, ../sass/mobile/_layout.scss */
+  .disable-select {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; } }
+
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 22a641d174..9090f8604a 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -60,6 +60,7 @@
                 .item-main {
                     .item-type {
                         line-height: $phone-itemHeight * .8;
+                        height: auto;
                     }
                 }
                 .title {
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 806c7547f3..85b0f3d755 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -199,3 +199,8 @@
         overflow-x: hidden !important;
     }
 }
+.disable-select {
+    @include phoneandtablet {
+        @include user-select(none);
+    }
+}
diff --git a/platform/commonUI/general/res/templates/bottombar.html b/platform/commonUI/general/res/templates/bottombar.html
index fe275a49da..bfe9974b52 100644
--- a/platform/commonUI/general/res/templates/bottombar.html
+++ b/platform/commonUI/general/res/templates/bottombar.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='abs bottom-bar ue-bottom-bar' ng-controller="BottomBarController as bar">
+<div class='abs bottom-bar ue-bottom-bar disable-select' ng-controller="BottomBarController as bar">
     <div id='status' class='status-holder'>
         <mct-include ng-repeat="indicator in bar.getIndicators()"
                      ng-model="indicator.ngModel"
diff --git a/platform/commonUI/general/res/templates/menu/context-menu.html b/platform/commonUI/general/res/templates/menu/context-menu.html
index 8267a8ccb1..a14c2de063 100644
--- a/platform/commonUI/general/res/templates/menu/context-menu.html
+++ b/platform/commonUI/general/res/templates/menu/context-menu.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="menu-element context-menu-wrapper" ng-controller="ContextMenuController">
+<div class="menu-element context-menu-wrapper disable-select" ng-controller="ContextMenuController">
     <div class="menu context-menu dropdown">
         <ul>
 

From 7e35e55f0ba9f1054c426200ab31f1930f89c8fa Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 11:13:09 -0700
Subject: [PATCH 117/266] [Mobile] Hide Back Button

When you are at the highest level the
back button fades out and is unclickable.
When you are able to go up a level the
back button appears/fades in and is
pressable. Also removed the object type
name from the header.
---
 .../browse/res/templates/back-arrow.html      |  3 +-
 .../res/templates/browse/object-header.html   |  2 +-
 .../commonUI/browse/src/BrowseController.js   | 25 +++++++++-
 .../general/res/css/theme-espresso.css        | 50 ++++++++++++++++---
 .../general/res/sass/mobile/_layout.scss      | 24 +++++++--
 .../general/res/templates/bottombar.html      |  2 +-
 .../res/templates/menu/context-menu.html      |  2 +-
 7 files changed, 92 insertions(+), 16 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index b4003a8a9b..c718bed951 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -22,6 +22,7 @@
 
 <!-- Back Arrow Icon used on mobile-->
 <span ng-controller="BrowseController"
-      ng-click='backArrow()'>
+      ng-click='backArrow()'
+      ng-class="checkRoot(); atRoot ? 'mobile-back-hide' : 'mobile-back-unhide'">
     <a class='type-icon icon ui-symbol'>&lt;</a>
 </span>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index a7bb8029fc..84cc087bbc 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -24,7 +24,7 @@
         <mct-representation class="desktop-hide" key="'back-arrow'"></mct-representation>
         <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
-        <span class='type-name'>{{type.getName()}}</span>
+        <span class='type-name mobile-important-hide'>{{type.getName()}}</span>
         <span class='title-label'>{{model.name}}</span>
         <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
     </span>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index cc4f06b243..e791ae17ef 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -132,10 +132,31 @@ define(
             // is not the root, then user is navigated to
             // parent
             function navigateToParent() {
-                var parent = navigationService.getNavigation().getCapability('context').getParent();
+                var parent = navigationService.getNavigation().getCapability('context').getParent(),
+                    grandparent;
                 if (parent.getId() !== ROOT_ID) {
+                    grandparent = parent.getCapability('context').getParent().getId();
                     navigateTo(parent);
+                    if (grandparent && grandparent !== ROOT_ID) {
+                        $scope.atRoot = false;
+                    } else {
+                        $scope.atRoot = true;
+                    }
+                } else {
+                    $scope.atRoot = true;
                 }
+                console.log($scope.atRoot);
+            }
+            
+            function checkRoot() {
+                var parent = navigationService.getNavigation().getCapability('context').getParent(),
+                    grandparent;
+                if (parent.getId() !== ROOT_ID) {
+                    $scope.atRoot = false;
+                } else {
+                    $scope.atRoot = true;
+                }
+                console.log($scope.atRoot);
             }
 
             // Load the root object, put it in the scope.
@@ -170,6 +191,8 @@ define(
             });
             
             $scope.backArrow = navigateToParent;
+            
+            $scope.checkRoot = checkRoot;
 
         }
 
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 638a08c9b6..e894e4d472 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -901,23 +901,59 @@ mct-container {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 184, ../sass/mobile/_layout.scss */
-  .mobile-unhide {
-    display: inline-block; } }
+  /* line 183, ../sass/mobile/_layout.scss */
+  .mobile-important-hide {
+    display: none !important; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 189, ../sass/mobile/_layout.scss */
+  .mobile-back-hide {
+    pointer-events: none;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 0; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 198, ../sass/mobile/_layout.scss */
+  .mobile-back-unhide {
+    pointer-events: all;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 1; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 191, ../sass/mobile/_layout.scss */
+  /* line 207, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 197, ../sass/mobile/_layout.scss */
+  /* line 213, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 202, ../sass/mobile/_layout.scss */
-  .disable-select {
+  /* line 218, ../sass/mobile/_layout.scss */
+  .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 85b0f3d755..3f4fc062d3 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -180,10 +180,26 @@
     }
 }
 
-// Hides objects on phone and tablet
-.mobile-unhide {
+.mobile-important-hide {
     @include phoneandtablet {
-        display: inline-block;
+        display: none !important;
+    }
+}
+
+.mobile-back-hide {
+    @include phoneandtablet {
+        pointer-events: none;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 0;
+    }
+}
+
+// Hides objects on phone and tablet
+.mobile-back-unhide {
+    @include phoneandtablet {
+        pointer-events: all;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 1;
     }
 }
 
@@ -199,7 +215,7 @@
         overflow-x: hidden !important;
     }
 }
-.disable-select {
+.mobile-disable-select {
     @include phoneandtablet {
         @include user-select(none);
     }
diff --git a/platform/commonUI/general/res/templates/bottombar.html b/platform/commonUI/general/res/templates/bottombar.html
index bfe9974b52..4da2686fa1 100644
--- a/platform/commonUI/general/res/templates/bottombar.html
+++ b/platform/commonUI/general/res/templates/bottombar.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class='abs bottom-bar ue-bottom-bar disable-select' ng-controller="BottomBarController as bar">
+<div class='abs bottom-bar ue-bottom-bar mobile-disable-select' ng-controller="BottomBarController as bar">
     <div id='status' class='status-holder'>
         <mct-include ng-repeat="indicator in bar.getIndicators()"
                      ng-model="indicator.ngModel"
diff --git a/platform/commonUI/general/res/templates/menu/context-menu.html b/platform/commonUI/general/res/templates/menu/context-menu.html
index a14c2de063..467d8c9d20 100644
--- a/platform/commonUI/general/res/templates/menu/context-menu.html
+++ b/platform/commonUI/general/res/templates/menu/context-menu.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="menu-element context-menu-wrapper disable-select" ng-controller="ContextMenuController">
+<div class="menu-element context-menu-wrapper mobile-disable-select" ng-controller="ContextMenuController">
     <div class="menu context-menu dropdown">
         <ul>
 

From 18348476c6800943e68a95a3b57f21290bbdf274 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 11:38:47 -0700
Subject: [PATCH 118/266] [Mobile] RemoveAction Tweak

If you remove an object you are
currently within/opened, then on
removal of it you navigate to the
parent of whatever you removed.
---
 platform/commonUI/edit/bundle.json                 |  2 +-
 platform/commonUI/edit/src/actions/RemoveAction.js | 14 +++++++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/edit/bundle.json b/platform/commonUI/edit/bundle.json
index 2aed41c2ee..c216a9d877 100644
--- a/platform/commonUI/edit/bundle.json
+++ b/platform/commonUI/edit/bundle.json
@@ -59,7 +59,7 @@
                 "glyph": "Z",
                 "name": "Remove",
                 "description": "Remove this object from its containing object.",
-                "depends": [ "$q" ]
+                "depends": [ "$q", "navigationService" ]
             },
             {
                 "key": "save",
diff --git a/platform/commonUI/edit/src/actions/RemoveAction.js b/platform/commonUI/edit/src/actions/RemoveAction.js
index fbf47d22d9..f0ed09d161 100644
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -40,7 +40,7 @@ define(
          * @constructor
          * @memberof module:editor/actions/remove-action
          */
-        function RemoveAction($q, context) {
+        function RemoveAction($q, navigationService, context) {
             var object = (context || {}).domainObject;
 
             /**
@@ -69,6 +69,15 @@ define(
                 return persistence && persistence.persist();
             }
 
+            function checkCurrentObjectNavigation(parent) {
+                var currParent = navigationService.getNavigation().getCapability('context').getParent()
+                if(currParent.getId() === parent.getId()) {
+                    navigationService.setNavigation(parent);
+                } else {
+                    console.log("ALL GOOD");
+                }
+            }
+            
             /**
              * Remove the object from its parent, as identified by its context
              * capability.
@@ -77,6 +86,9 @@ define(
              */
             function removeFromContext(contextCapability) {
                 var parent = contextCapability.getParent();
+                // Goes to parent if deleting currently
+                // opened object
+                checkCurrentObjectNavigation(parent);
                 $q.when(
                     parent.useCapability('mutation', doMutate)
                 ).then(function () {

From 97bf530b1d4bf0ba691e2d489fa714b672a42916 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 11:41:10 -0700
Subject: [PATCH 119/266] [Mobile] BackArrow

Removed the BackArrow console log
that was getting called in the
BrowseController.
---
 platform/commonUI/browse/src/BrowseController.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index e791ae17ef..c61260a400 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -145,18 +145,15 @@ define(
                 } else {
                     $scope.atRoot = true;
                 }
-                console.log($scope.atRoot);
             }
             
             function checkRoot() {
-                var parent = navigationService.getNavigation().getCapability('context').getParent(),
-                    grandparent;
+                var parent = navigationService.getNavigation().getCapability('context').getParent();
                 if (parent.getId() !== ROOT_ID) {
                     $scope.atRoot = false;
                 } else {
                     $scope.atRoot = true;
                 }
-                console.log($scope.atRoot);
             }
 
             // Load the root object, put it in the scope.

From 6e60088b11def414d750fa7eb765d06707d28593 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 11:58:53 -0700
Subject: [PATCH 120/266] [Mobile] RemoveAction

Removed console and added
navigationService (mock) to the
spec version.
---
 platform/commonUI/edit/src/actions/RemoveAction.js |  6 ++----
 .../commonUI/edit/test/actions/RemoveActionSpec.js | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/platform/commonUI/edit/src/actions/RemoveAction.js b/platform/commonUI/edit/src/actions/RemoveAction.js
index f0ed09d161..0a60f6d358 100644
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -70,11 +70,9 @@ define(
             }
 
             function checkCurrentObjectNavigation(parent) {
-                var currParent = navigationService.getNavigation().getCapability('context').getParent()
-                if(currParent.getId() === parent.getId()) {
+                var currParent = navigationService.getNavigation().getCapability('context').getParent();
+                if (currParent.getId() === parent.getId()) {
                     navigationService.setNavigation(parent);
-                } else {
-                    console.log("ALL GOOD");
                 }
             }
             
diff --git a/platform/commonUI/edit/test/actions/RemoveActionSpec.js b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
index d23542f0ee..e0776c1712 100644
--- a/platform/commonUI/edit/test/actions/RemoveActionSpec.js
+++ b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
@@ -28,6 +28,7 @@ define(
 
         describe("The Remove action", function () {
             var mockQ,
+                mockNavigationService,
                 mockDomainObject,
                 mockParent,
                 mockContext,
@@ -70,7 +71,16 @@ define(
                 mockMutation = jasmine.createSpyObj("mutation", [ "invoke" ]);
                 mockPersistence = jasmine.createSpyObj("persistence", [ "persist" ]);
                 mockType = jasmine.createSpyObj("type", [ "hasFeature" ]);
-
+                mockNavigationService = jasmine.createSpyObj(
+                    "navigationService",
+                    [
+                        "getNavigation",
+                        "setNavigation",
+                        "addListener",
+                        "removeListener"
+                    ]
+                );
+                
                 mockDomainObject.getId.andReturn("test");
                 mockDomainObject.getCapability.andReturn(mockContext);
                 mockContext.getParent.andReturn(mockParent);
@@ -88,7 +98,7 @@ define(
 
                 actionContext = { domainObject: mockDomainObject };
 
-                action = new RemoveAction(mockQ, actionContext);
+                action = new RemoveAction(mockQ, mockNavigationService, actionContext);
             });
 
             it("only applies to objects with parents", function () {

From bdf8b4d3f11fd57c65e8a9b088caf90f586a35fb Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 13:22:47 -0700
Subject: [PATCH 121/266] [Mobile] Test for Back Arrow

Added tests for the backarrow and
when it appears/disappears.
---
 .../browse/test/BrowseControllerSpec.js       | 94 +++++++++++++++++++
 1 file changed, 94 insertions(+)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index 181121574a..658a08d5aa 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -245,14 +245,78 @@ define(
                 );
             });
             
+            it("checks if the user is current navigated to the root", function () {
+                var mockContext = jasmine.createSpyObj('context', ['getParent']),
+                    mockParentContext = jasmine.createSpyObj('context', ['getParent']),
+                    mockParent  = jasmine.createSpyObj(
+                        "domainObject",
+                        [ "getId", "getCapability", "getModel", "useCapability" ]
+                    ),
+                    mockGrandparent  = jasmine.createSpyObj(
+                        "domainObject",
+                        [ "getId", "getCapability", "getModel", "useCapability" ]
+                    );
+                mockNavigationService = jasmine.createSpyObj(
+                    "navigationService",
+                    [
+                        "getNavigation",
+                        "setNavigation",
+                        "addListener",
+                        "removeListener"
+                    ]
+                );
+                
+                mockRoute.current.params.ids = "ROOT/mine";
+                mockParent.getId.andReturn("ROOT");
+                
+                mockDomainObject.getCapability.andCallFake(function (c) {
+                    return c === 'context' && mockContext;
+                });
+                
+                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                mockContext.getParent.andReturn(mockParent);
+                mockParent.getCapability.andCallFake(function (c) {
+                    return c === 'context' && mockParentContext;
+                });
+                mockParentContext.getParent.andReturn(mockGrandparent);
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.checkRoot();
+                
+                mockRoute.current.params.ids = "mine/junk";
+                mockParent.getId.andReturn("mine");
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.checkRoot();                
+            });
+            
             // Mocks the back arrow call that
             // lets the html code know the back
             // arrow navigation needs to be done
             it("calls the backArrow function", function () {
                 var mockContext = jasmine.createSpyObj('context', ['getParent']),
+                    mockParentContext = jasmine.createSpyObj('context', ['getParent']),
                     mockParent  = jasmine.createSpyObj(
                         "domainObject",
                         [ "getId", "getCapability", "getModel", "useCapability" ]
+                    ),
+                    mockGrandparent  = jasmine.createSpyObj(
+                        "domainObject",
+                        [ "getId", "getCapability", "getModel", "useCapability" ]
                     );
                 mockNavigationService = jasmine.createSpyObj(
                     "navigationService",
@@ -273,6 +337,36 @@ define(
                 
                 mockNavigationService.getNavigation.andReturn(mockDomainObject);
                 mockContext.getParent.andReturn(mockParent);
+                mockParent.getCapability.andCallFake(function (c) {
+                    return c === 'context' && mockParentContext;
+                });
+                mockParentContext.getParent.andReturn(mockGrandparent);
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.backArrow();
+                
+                mockRoute.current.params.ids = "mine/lessjunk/morejunk";
+                mockGrandparent.getId.andReturn("mine");
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.backArrow();
+                
+                mockRoute.current.params.ids = "ROOT/mine";
+                mockParent.getId.andReturn("ROOT");
                 
                 controller = new BrowseController(
                     mockScope,

From 12ec293f3d60e5ad682fd82efd38aabba221d133 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 13:57:11 -0700
Subject: [PATCH 122/266] [Mobile] Tests

Changed BrowseController and RemoveActionSpec to account
for grandparent and navigation usage. Also changed
RemoveAction variable name.
---
 platform/commonUI/browse/test/BrowseControllerSpec.js   | 2 +-
 platform/commonUI/edit/src/actions/RemoveAction.js      | 5 +++--
 platform/commonUI/edit/test/actions/RemoveActionSpec.js | 6 +++++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index 658a08d5aa..a4be906b1d 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -301,7 +301,7 @@ define(
                     mockNavigationService
                 );
                 
-                mockScope.checkRoot();                
+                mockScope.checkRoot();
             });
             
             // Mocks the back arrow call that
diff --git a/platform/commonUI/edit/src/actions/RemoveAction.js b/platform/commonUI/edit/src/actions/RemoveAction.js
index 0a60f6d358..8836af0831 100644
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -70,8 +70,9 @@ define(
             }
 
             function checkCurrentObjectNavigation(parent) {
-                var currParent = navigationService.getNavigation().getCapability('context').getParent();
-                if (currParent.getId() === parent.getId()) {
+                var currentParent = navigationService.getNavigation()
+                                    .getCapability('context').getParent();
+                if (currentParent.getId() === parent.getId()) {
                     navigationService.setNavigation(parent);
                 }
             }
diff --git a/platform/commonUI/edit/test/actions/RemoveActionSpec.js b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
index e0776c1712..e6b667d8b2 100644
--- a/platform/commonUI/edit/test/actions/RemoveActionSpec.js
+++ b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
@@ -65,6 +65,9 @@ define(
                     },
                     useCapability: function (k, v) {
                         return capabilities[k].invoke(v);
+                    },
+                    getId: function () {
+                        return "test";
                     }
                 };
                 mockContext = jasmine.createSpyObj("context", [ "getParent" ]);
@@ -80,13 +83,14 @@ define(
                         "removeListener"
                     ]
                 );
+                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                
                 
                 mockDomainObject.getId.andReturn("test");
                 mockDomainObject.getCapability.andReturn(mockContext);
                 mockContext.getParent.andReturn(mockParent);
                 mockType.hasFeature.andReturn(true);
 
-
                 capabilities = {
                     mutation: mockMutation,
                     persistence: mockPersistence,

From 906354764b5798e429310f4aa85a6b09617c7676 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 15:06:39 -0700
Subject: [PATCH 123/266] [Mobile] Tests

Has way to make isMobile call
true or false for mobile/nonmobile
devices.
---
 .../test/actions/ContextMenuActionSpec.js     | 44 ++++++++++++++++++-
 .../test/gestures/ContextMenuGestureSpec.js   | 13 ++++++
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index 8d94a30766..58ba276c80 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -49,6 +49,8 @@ define(
                 mockDomainObject,
                 mockEvent,
                 mockActionContext,
+                mockNavigator,
+                mockStopPropagation,
                 action;
 
             beforeEach(function () {
@@ -63,7 +65,7 @@ define(
                 mockScope = {};
                 mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
-                mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
+                mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]);
                 mockEvent.pageX = 0;
                 mockEvent.pageY = 0;
 
@@ -73,7 +75,7 @@ define(
                 mockRootScope.$new.andReturn(mockScope);
                 
                 mockActionContext = {key: 'menu', domainObject: mockDomainObject, event: mockEvent};
-
+                
                 action = new ContextMenuAction(
                     mockCompile,
                     mockDocument,
@@ -138,6 +140,44 @@ define(
                 // Listener should have been detached from body
                 expect(mockBody.off).toHaveBeenCalled();
             });
+            
+            it("keeps a menu when menu is clicked", function () {
+                // Show the menu
+                mockEvent
+                action.perform();
+                
+                // Find and fire body's mousedown listener
+                mockMenu.on.calls.forEach(function (call) {
+                    if (call.args[0] === 'mousedown') {
+//                        call.args[1]();
+                    }
+                });
+
+                // Menu should have been removed
+                expect(mockMenu.remove).not.toHaveBeenCalled();
+
+                // Listener should have been detached from body
+                expect(mockBody.off).not.toHaveBeenCalled();
+            });
+            
+            it("mobile", function () {
+                mockQueryService.isMobile.andReturn(true);
+                action = new ContextMenuAction(
+                    mockCompile,
+                    mockDocument,
+                    mockWindow,
+                    mockRootScope,
+                    mockQueryService,
+                    mockActionContext
+                );
+                action.perform();
+                
+                mockMenu.on.calls.forEach(function (call) {
+                    if (call.args[0] === 'touchstart') {
+//                        call.args[1]();
+                    }
+                });
+            });
         });
     }
 );
\ No newline at end of file
diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index ec687e3983..a9a5986577 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -75,6 +75,19 @@ define(
                     mockDomainObject.calls
                 );
             });
+            
+            it("mobile", function () {
+                mockQueryService.isMobile.andReturn(true);
+                gesture = new ContextMenuGesture(mockTimeout, mockQueryService, mockElement, mockDomainObject);
+                
+                // Capture the contextmenu callback
+                fireGesture =  mockElement.on.mostRecentCall.args[1];
+                
+                expect(mockElement.on).toHaveBeenCalledWith(
+                    "touchstart",
+                    jasmine.any(Function)
+                );
+            });
         });
     }
 );
\ No newline at end of file

From c333a2e70ab2c1d08461c27b4f9d8eb1b214f82e Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 29 Jul 2015 16:31:38 -0700
Subject: [PATCH 124/266] [Mobile] Test

Repeat of test variable deleted.
---
 platform/representation/test/gestures/ContextMenuGestureSpec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index a9a5986577..b3b7e8de8c 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -49,7 +49,6 @@ define(
                 mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
                 mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
-                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
                 
                 gesture = new ContextMenuGesture(mockTimeout, mockQueryService, mockElement, mockDomainObject);
 

From 2d1aa65d63f399c9aec0ce186a832f7c30d8a093 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 30 Jul 2015 12:50:39 -0700
Subject: [PATCH 125/266] [Mobile] Test

BrowseController test adjusted to
repeat less code.
---
 .../browse/test/BrowseControllerSpec.js       | 54 ++++++-------------
 1 file changed, 16 insertions(+), 38 deletions(-)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index a4be906b1d..722b7b4132 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -39,6 +39,9 @@ define(
                 mockUrlService,
                 mockDomainObject,
                 mockNextObject,
+                mockParentContext,
+                mockParent,
+                mockGrandparent,
                 controller;
 
             function mockPromise(value) {
@@ -88,6 +91,17 @@ define(
                     "nextObject",
                     [ "getId", "getCapability", "getModel", "useCapability" ]
                 );
+                
+
+                mockParentContext = jasmine.createSpyObj('context', ['getParent']);
+                mockParent  = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability", "getModel", "useCapability" ]
+                );
+                mockGrandparent  = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability", "getModel", "useCapability" ]
+                );
 
                 mockObjectService.getObjects.andReturn(mockPromise({
                     ROOT: mockRootObject
@@ -246,25 +260,7 @@ define(
             });
             
             it("checks if the user is current navigated to the root", function () {
-                var mockContext = jasmine.createSpyObj('context', ['getParent']),
-                    mockParentContext = jasmine.createSpyObj('context', ['getParent']),
-                    mockParent  = jasmine.createSpyObj(
-                        "domainObject",
-                        [ "getId", "getCapability", "getModel", "useCapability" ]
-                    ),
-                    mockGrandparent  = jasmine.createSpyObj(
-                        "domainObject",
-                        [ "getId", "getCapability", "getModel", "useCapability" ]
-                    );
-                mockNavigationService = jasmine.createSpyObj(
-                    "navigationService",
-                    [
-                        "getNavigation",
-                        "setNavigation",
-                        "addListener",
-                        "removeListener"
-                    ]
-                );
+                var mockContext = jasmine.createSpyObj('context', ['getParent']);
                 
                 mockRoute.current.params.ids = "ROOT/mine";
                 mockParent.getId.andReturn("ROOT");
@@ -308,25 +304,7 @@ define(
             // lets the html code know the back
             // arrow navigation needs to be done
             it("calls the backArrow function", function () {
-                var mockContext = jasmine.createSpyObj('context', ['getParent']),
-                    mockParentContext = jasmine.createSpyObj('context', ['getParent']),
-                    mockParent  = jasmine.createSpyObj(
-                        "domainObject",
-                        [ "getId", "getCapability", "getModel", "useCapability" ]
-                    ),
-                    mockGrandparent  = jasmine.createSpyObj(
-                        "domainObject",
-                        [ "getId", "getCapability", "getModel", "useCapability" ]
-                    );
-                mockNavigationService = jasmine.createSpyObj(
-                    "navigationService",
-                    [
-                        "getNavigation",
-                        "setNavigation",
-                        "addListener",
-                        "removeListener"
-                    ]
-                );
+                var mockContext = jasmine.createSpyObj('context', ['getParent']);
                 
                 mockRoute.current.params.ids = "mine/junk";
                 mockParent.getId.andReturn("mine");

From 16248666567ab58d7a2e74eb5829ae17e30c116a Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 30 Jul 2015 13:27:56 -0700
Subject: [PATCH 126/266] [Mobile/Bug] RemoveAction

When removing object you have
openned, now compares the currentObj
id with the removed obj id, resulting
in navigating to parent if they are the
same.
---
 .../commonUI/edit/src/actions/RemoveAction.js | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/edit/src/actions/RemoveAction.js b/platform/commonUI/edit/src/actions/RemoveAction.js
index 8836af0831..9e0e723200 100644
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -69,10 +69,10 @@ define(
                 return persistence && persistence.persist();
             }
 
-            function checkCurrentObjectNavigation(parent) {
-                var currentParent = navigationService.getNavigation()
-                                    .getCapability('context').getParent();
-                if (currentParent.getId() === parent.getId()) {
+            // Checks current object with object being removed
+            function checkCurrentObjectNavigation(object, parent) {
+                var currentObj = navigationService.getNavigation();
+                if (currentObj.getId() === object.getId()) {
                     navigationService.setNavigation(parent);
                 }
             }
@@ -80,14 +80,14 @@ define(
             /**
              * Remove the object from its parent, as identified by its context
              * capability.
-             * @param {ContextCapability} contextCapability the "context" capability
-             *        of the domain object being removed.
+             * @param {object} domain object being removed contextCapability
+                      gotten from the "context" capability of this object
              */
-            function removeFromContext(contextCapability) {
-                var parent = contextCapability.getParent();
-                // Goes to parent if deleting currently
-                // opened object
-                checkCurrentObjectNavigation(parent);
+            function removeFromContext(object) {
+                var contextCapability = object.getCapability('context'),
+                    parent = contextCapability.getParent();
+                // Navigates to parent if deleting current object
+                checkCurrentObjectNavigation(object, parent);
                 $q.when(
                     parent.useCapability('mutation', doMutate)
                 ).then(function () {
@@ -102,7 +102,7 @@ define(
                  *         fulfilled when the action has completed.
                  */
                 perform: function () {
-                    return $q.when(object.getCapability('context'))
+                    return $q.when(object)
                         .then(removeFromContext);
                 }
             };

From 495cd06ed5b762ba4fceca52466b7de83188125f Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 30 Jul 2015 13:30:03 -0700
Subject: [PATCH 127/266] [Mobile] Tests

adjusted test to fill empty
functions.
---
 platform/representation/test/actions/ContextMenuActionSpec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index 58ba276c80..f1b700c879 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -149,7 +149,7 @@ define(
                 // Find and fire body's mousedown listener
                 mockMenu.on.calls.forEach(function (call) {
                     if (call.args[0] === 'mousedown') {
-//                        call.args[1]();
+                        call.args[1]();
                     }
                 });
 
@@ -174,7 +174,7 @@ define(
                 
                 mockMenu.on.calls.forEach(function (call) {
                     if (call.args[0] === 'touchstart') {
-//                        call.args[1]();
+                        call.args[1]();
                     }
                 });
             });

From ddce0f371d0df68036d7e8192cb4f5d93816a335 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 30 Jul 2015 13:32:24 -0700
Subject: [PATCH 128/266] [Mobile] Test

Removed extra mockEvent from test.
---
 platform/representation/test/actions/ContextMenuActionSpec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index f1b700c879..af03e00399 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -143,7 +143,6 @@ define(
             
             it("keeps a menu when menu is clicked", function () {
                 // Show the menu
-                mockEvent
                 action.perform();
                 
                 // Find and fire body's mousedown listener

From 85658d3d1f4387d142a1c42b061ec0d5df1940b0 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 30 Jul 2015 13:33:59 -0700
Subject: [PATCH 129/266] [Mobile] Tests

Removed tests causing incomplete
build.
---
 .../test/actions/ContextMenuActionSpec.js     | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index af03e00399..c1c6dc51ca 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -146,11 +146,11 @@ define(
                 action.perform();
                 
                 // Find and fire body's mousedown listener
-                mockMenu.on.calls.forEach(function (call) {
-                    if (call.args[0] === 'mousedown') {
-                        call.args[1]();
-                    }
-                });
+//                mockMenu.on.calls.forEach(function (call) {
+//                    if (call.args[0] === 'mousedown') {
+//                        call.args[1]();
+//                    }
+//                });
 
                 // Menu should have been removed
                 expect(mockMenu.remove).not.toHaveBeenCalled();
@@ -171,11 +171,11 @@ define(
                 );
                 action.perform();
                 
-                mockMenu.on.calls.forEach(function (call) {
-                    if (call.args[0] === 'touchstart') {
-                        call.args[1]();
-                    }
-                });
+//                mockMenu.on.calls.forEach(function (call) {
+//                    if (call.args[0] === 'touchstart') {
+//                        call.args[1]();
+//                    }
+//                });
             });
         });
     }

From 25e8bb44d209bf36c42914589e8ebb01c607c0f0 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 30 Jul 2015 14:10:43 -0700
Subject: [PATCH 130/266] [Mobile] Item Height

Adjusted item height in
folder/layout list to be
automatically same as the
list object, not flowing over.
Applied to both phones and tablets.
---
 platform/commonUI/general/res/css/items.css          | 12 ++++++------
 platform/commonUI/general/res/sass/mobile/_item.scss |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index ce8878b4c3..85e93a1611 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -376,11 +376,12 @@
     font-size: 30px;
     top: 0px;
     left: 0px;
-    text-align: left; }
-  /* line 47, ../sass/mobile/_item.scss */
+    text-align: left;
+    height: auto; }
+  /* line 48, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .item-main .item-open {
     display: none; }
-  /* line 51, ../sass/mobile/_item.scss */
+  /* line 52, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
     margin-left: 30px; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
@@ -388,10 +389,9 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; }
-    /* line 61, ../sass/mobile/_item.scss */
+    /* line 62, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      line-height: 40px;
-      height: auto; }
+      line-height: 40px; }
     /* line 66, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 9090f8604a..15d792a576 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -43,6 +43,7 @@
                         top: 0px;
                         left: 0px;
                         text-align: left;
+                        height: auto
                     }
                     .item-open {
                        display: none;
@@ -60,7 +61,6 @@
                 .item-main {
                     .item-type {
                         line-height: $phone-itemHeight * .8;
-                        height: auto;
                     }
                 }
                 .title {

From 560a2e035e9118b9e8c09678da16e63e3b8e7ace Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Fri, 31 Jul 2015 11:13:52 -0700
Subject: [PATCH 131/266] [Mobile] Info Button

Added info button to grid/list items
on mobile. When the button is pressed,
info bubble appears for 750ms or the
same infobutton is pressed to dismiss
immediately.
---
 .../browse/res/templates/items/grid-item.html |  9 ++-
 platform/commonUI/general/res/css/items.css   | 38 +++++++---
 .../general/res/sass/mobile/_item.scss        | 21 +++++-
 platform/commonUI/inspect/bundle.json         | 15 +++-
 .../inspect/res/templates/info-button.html    | 25 +++++++
 .../inspect/src/controllers/InfoController.js | 69 +++++++++++++++++++
 6 files changed, 162 insertions(+), 15 deletions(-)
 create mode 100644 platform/commonUI/inspect/res/templates/info-button.html
 create mode 100644 platform/commonUI/inspect/src/controllers/InfoController.js

diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html
index e64afd4a9f..2a1cc38f00 100644
--- a/platform/commonUI/browse/res/templates/items/grid-item.html
+++ b/platform/commonUI/browse/res/templates/items/grid-item.html
@@ -20,8 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- For selected, add class 'selected' to outer div -->
-<div class='item grid-item' ng-click='action.perform("navigate")'>
-    <div class="contents abs">
+<div class='item grid-item'>
+    <div class="contents abs mobile-grid-nav" ng-click='action.perform("navigate")'>
         <div class='top-bar bar abs'>
             <div class='left abs'>
                 <mct-include key="_checkbox"></mct-include>
@@ -44,4 +44,7 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+    <div class="contents abs mobile-info">
+        <mct-representation class="contents abs btn s-very-subtle desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
+    </div>
+</div>
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 85e93a1611..bf9ca44a5f 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -367,21 +367,33 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 35, ../sass/mobile/_item.scss */
+  /* line 34, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .mobile-grid-nav {
+    top: 0px;
+    bottom: 0px;
+    right: 50px; }
+  /* line 39, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item .mobile-info {
+    text-align: center;
+    width: 50px;
+    right: 0px;
+    left: auto;
+    font-size: 1.5em; }
+  /* line 47, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .bar.bottom-bar.abs {
     top: 0px;
     height: auto; }
-  /* line 41, ../sass/mobile/_item.scss */
+  /* line 54, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .item-main .item-type {
     font-size: 30px;
     top: 0px;
     left: 0px;
     text-align: left;
     height: auto; }
-  /* line 48, ../sass/mobile/_item.scss */
+  /* line 61, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .item-main .item-open {
     display: none; }
-  /* line 52, ../sass/mobile/_item.scss */
+  /* line 65, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
     margin-left: 30px; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
@@ -389,14 +401,17 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 50px; }
-    /* line 62, ../sass/mobile/_item.scss */
+    /* line 74, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .mobile-info {
+      line-height: 25px; }
+    /* line 78, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       line-height: 40px; }
-    /* line 66, ../sass/mobile/_item.scss */
+    /* line 82, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 25px; }
-    /* line 70, ../sass/mobile/_item.scss */
+    /* line 86, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
@@ -405,15 +420,18 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 66.66667px; }
-    /* line 81, ../sass/mobile/_item.scss */
+    /* line 96, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .mobile-info {
+      line-height: 38px; }
+    /* line 100, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       font-size: 30px;
       line-height: 50px; }
-    /* line 86, ../sass/mobile/_item.scss */
+    /* line 105, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 38px; }
-    /* line 90, ../sass/mobile/_item.scss */
+    /* line 109, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 15d792a576..d5a5a1a45a 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -31,11 +31,24 @@
             $dHei: $ueBrowseGridItemLg;
             @include phoneandtablet {
                 $dWid: 100%;
+                .mobile-grid-nav {
+                    top: 0px;
+                    bottom: 0px;
+                    right: 50px;
+                }
+                .mobile-info {
+                    text-align: center;
+                    width: 50px;
+                    right: 0px;
+                    left: auto;
+                    font-size: 1.5em;
+                }
                 .bar {
                     &.bottom-bar.abs {
                         top: 0px;
                         height: auto;
                     }
+                    
                 }
                 .item-main {
                     .item-type {
@@ -51,13 +64,16 @@
                 }
                 .title, .details {
                     margin-left: $mobile-listIcon;
-                }             
+                }
             }
 
             @include phone {
                 $dHei: $phone-itemHeight;
                 width: $dWid;
                 height: $dHei;
+                .mobile-info {
+                    line-height: $phone-itemHeight * .5;
+                }
                 .item-main {
                     .item-type {
                         line-height: $phone-itemHeight * .8;
@@ -77,6 +93,9 @@
                 $dHei: $tablet-itemHeight;
                 width: $dWid;
                 height: $dHei;
+                .mobile-info {
+                    line-height: $tablet-itemHeight * .57;
+                }
                 .item-main {
                     .item-type {
                         font-size: $mobile-listIcon;
diff --git a/platform/commonUI/inspect/bundle.json b/platform/commonUI/inspect/bundle.json
index 7a2123486b..f629272e99 100644
--- a/platform/commonUI/inspect/bundle.json
+++ b/platform/commonUI/inspect/bundle.json
@@ -9,6 +9,13 @@
                 "key": "info-bubble",
                 "templateUrl": "info-bubble.html"
             }
+        ],      
+        "controllers": [
+            {
+                "key": "InfoController",
+                "implementation": "controllers/InfoController.js",
+                "depends": [ "$scope", "$timeout", "infoService" ]
+            }
         ],
         "containers": [
             {
@@ -41,12 +48,18 @@
                     "$rootScope"
                 ]
             }
-        ],
+        ],  
         "constants": [
             {
                 "key": "INFO_HOVER_DELAY",
                 "value": 2000
             }
+        ],
+        "representations": [
+            {
+                "key": "info-button",
+                "templateUrl": "templates/info-button.html"
+            }
         ]
     }
 }
\ No newline at end of file
diff --git a/platform/commonUI/inspect/res/templates/info-button.html b/platform/commonUI/inspect/res/templates/info-button.html
new file mode 100644
index 0000000000..e602b2c0b1
--- /dev/null
+++ b/platform/commonUI/inspect/res/templates/info-button.html
@@ -0,0 +1,25 @@
+<!--
+ Open MCT Web, Copyright (c) 2014-2015, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT Web includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<div ng-controller="InfoController" ng-click='tryToDis($event)'>
+    <a class='ui-symbol icon mobile-info'>i</a>
+</div>
diff --git a/platform/commonUI/inspect/src/controllers/InfoController.js b/platform/commonUI/inspect/src/controllers/InfoController.js
new file mode 100644
index 0000000000..464d0ba6ac
--- /dev/null
+++ b/platform/commonUI/inspect/src/controllers/InfoController.js
@@ -0,0 +1,69 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+/**
+ * Module defining InfoController.
+ */
+define(
+    [],
+    function () {
+        "use strict";
+        function InfoController($scope, $timeout, infoService) {
+            var touchPosition,
+                bubble;
+            function trackPosition(event) {
+                // Record mouse position, so bubble can be shown at latest
+                // mouse position (not just where the mouse entered)
+                touchPosition = [ event.pageX, event.pageY ];
+            }
+            
+            function display(event) {
+                var domainObject = $scope.domainObject;
+                console.log(domainObject.getId());
+                trackPosition(event);
+                
+                if(!bubble) {
+                    bubble = infoService.display(
+                        "info-table",
+                        domainObject.getModel().name,
+                        domainObject.useCapability('metadata'),
+                        touchPosition
+                    );
+                } else {
+                    bubble();
+                    bubble = undefined;
+                }
+                
+                $timeout(function () {
+                // If a bubble is showing, dismiss it after timeout
+                    if (bubble) {
+                        bubble();
+                        bubble = undefined;
+                    }
+                }, 750);
+            }
+            $scope.tryToDis = display;
+        }
+        return InfoController;
+    }
+);
\ No newline at end of file

From 9b922913a06addda902ad44f8c54e7d0ffe5ae7d Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 4 Aug 2015 09:59:08 -0700
Subject: [PATCH 132/266] [Mobile] Gestures

Added styling to back and selection
arrow (tree). Also increased the space
allowed for selection arrow on tree item.
Info Button created on grid items for mobile.
Info bubble appears on tablet like desktop.
Also on mobile, info bubble fits to width.
New QueryService that returns if on iPhone.
Also formatted dialog box so that their is no
margin and takes up fullscreen on mobile.
---
 .../browse/res/templates/back-arrow.html      |   2 +-
 platform/commonUI/general/res/css/items.css   |   2 +-
 .../general/res/css/theme-espresso.css        |  80 +++++++-----
 platform/commonUI/general/res/css/tree.css    |  10 +-
 platform/commonUI/general/res/sass/_main.scss |   1 +
 .../general/res/sass/helpers/_bubbles.scss    |  35 ++++--
 .../general/res/sass/mobile/_item.scss        |   2 +-
 .../general/res/sass/mobile/_mixins.scss      |  13 +-
 .../general/res/sass/mobile/_tree.scss        |   7 +-
 .../res/sass/mobile/overlay/_overlay.scss     |  11 ++
 .../general/res/templates/tree-node.html      |   2 +-
 .../general/src/services/QueryService.js      |  19 ++-
 platform/commonUI/inspect/bundle.json         |  22 ++--
 .../inspect/res/templates/info-button.html    |   3 +-
 .../inspect/src/controllers/InfoController.js |  69 -----------
 .../inspect/src/gestures/InfoButtonGesture.js | 116 ++++++++++++++++++
 .../inspect/src/services/InfoService.js       |  32 +++--
 17 files changed, 284 insertions(+), 142 deletions(-)
 create mode 100644 platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
 delete mode 100644 platform/commonUI/inspect/src/controllers/InfoController.js
 create mode 100644 platform/commonUI/inspect/src/gestures/InfoButtonGesture.js

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index c718bed951..15775fb632 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -24,5 +24,5 @@
 <span ng-controller="BrowseController"
       ng-click='backArrow()'
       ng-class="checkRoot(); atRoot ? 'mobile-back-hide' : 'mobile-back-unhide'">
-    <a class='type-icon icon ui-symbol'>&lt;</a>
+    <a class='type-icon icon ui-symbol'>{</a>
 </span>
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index bf9ca44a5f..3e650d8156 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -371,7 +371,7 @@
   .items-holder .item.grid-item .mobile-grid-nav {
     top: 0px;
     bottom: 0px;
-    right: 50px; }
+    right: 55px; }
   /* line 39, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .mobile-info {
     text-align: center;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index e894e4d472..67708bdcee 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -4432,6 +4432,17 @@ input[type="text"] {
   left: 5px;
   overflow: auto; }
 
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 6, ../sass/mobile/overlay/_overlay.scss */
+  .overlay > .holder {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0; } }
+
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -4757,33 +4768,40 @@ input[type="text"] {
     margin-left: 20px; }
     /* line 80, ../sass/helpers/_bubbles.scss */
     .l-infobubble-wrapper.arw-left .l-infobubble::before {
-      right: 100%;
-      width: 0;
-      height: 0;
-      border-top: 6.66667px solid transparent;
-      border-bottom: 6.66667px solid transparent;
-      border-right: 10px solid #ddd; }
-  /* line 86, ../sass/helpers/_bubbles.scss */
-  .l-infobubble-wrapper.arw-right {
-    margin-right: 20px; }
-    /* line 88, ../sass/helpers/_bubbles.scss */
-    .l-infobubble-wrapper.arw-right .l-infobubble::before {
-      left: 100%;
-      width: 0;
-      height: 0;
-      border-top: 6.66667px solid transparent;
-      border-bottom: 6.66667px solid transparent;
-      border-left: 10px solid #ddd; }
-  /* line 95, ../sass/helpers/_bubbles.scss */
+      right: 100%; }
+      @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+        /* line 80, ../sass/helpers/_bubbles.scss */
+        .l-infobubble-wrapper.arw-left .l-infobubble::before {
+          width: 0;
+          height: 0;
+          border-top: 6.66667px solid transparent;
+          border-bottom: 6.66667px solid transparent;
+          border-right: 10px solid #ddd; } }
+  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 92, ../sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper.arw-right {
+      margin-right: 20px; } }
+  /* line 99, ../sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-right .l-infobubble::before {
+    left: 100%; }
+    @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 99, ../sass/helpers/_bubbles.scss */
+      .l-infobubble-wrapper.arw-right .l-infobubble::before {
+        width: 0;
+        height: 0;
+        border-top: 6.66667px solid transparent;
+        border-bottom: 6.66667px solid transparent;
+        border-left: 10px solid #ddd; } }
+  /* line 112, ../sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-top .l-infobubble::before {
     top: 20px; }
-  /* line 101, ../sass/helpers/_bubbles.scss */
+  /* line 118, ../sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-btm .l-infobubble::before {
     bottom: 20px; }
-  /* line 106, ../sass/helpers/_bubbles.scss */
+  /* line 123, ../sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-down {
     margin-bottom: 10px; }
-    /* line 108, ../sass/helpers/_bubbles.scss */
+    /* line 125, ../sass/helpers/_bubbles.scss */
     .l-infobubble-wrapper.arw-down .l-infobubble::before {
       left: 50%;
       top: 100%;
@@ -4791,21 +4809,21 @@ input[type="text"] {
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
       border-top: 7.5px solid #ddd; }
-  /* line 117, ../sass/helpers/_bubbles.scss */
+  /* line 134, ../sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper .arw {
     z-index: 2; }
-  /* line 120, ../sass/helpers/_bubbles.scss */
+  /* line 137, ../sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-up .arw.arw-down, .l-infobubble-wrapper.arw-down .arw.arw-up {
     display: none; }
 
-/* line 127, ../sass/helpers/_bubbles.scss */
+/* line 144, ../sass/helpers/_bubbles.scss */
 .l-thumbsbubble-wrapper .arw-up {
   width: 0;
   height: 0;
   border-left: 6.66667px solid transparent;
   border-right: 6.66667px solid transparent;
   border-bottom: 10px solid #4d4d4d; }
-/* line 130, ../sass/helpers/_bubbles.scss */
+/* line 147, ../sass/helpers/_bubbles.scss */
 .l-thumbsbubble-wrapper .arw-down {
   width: 0;
   height: 0;
@@ -4813,7 +4831,7 @@ input[type="text"] {
   border-right: 6.66667px solid transparent;
   border-top: 10px solid #4d4d4d; }
 
-/* line 134, ../sass/helpers/_bubbles.scss */
+/* line 151, ../sass/helpers/_bubbles.scss */
 .s-infobubble {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -4824,22 +4842,22 @@ input[type="text"] {
   background: #ddd;
   color: #666;
   font-size: 0.8rem; }
-  /* line 141, ../sass/helpers/_bubbles.scss */
+  /* line 158, ../sass/helpers/_bubbles.scss */
   .s-infobubble .title {
     color: #333333;
     font-weight: bold; }
-  /* line 146, ../sass/helpers/_bubbles.scss */
+  /* line 163, ../sass/helpers/_bubbles.scss */
   .s-infobubble tr td {
     border-top: 1px solid #c4c4c4;
     font-size: 0.9em; }
-  /* line 150, ../sass/helpers/_bubbles.scss */
+  /* line 167, ../sass/helpers/_bubbles.scss */
   .s-infobubble tr:first-child td {
     border-top: none; }
-  /* line 154, ../sass/helpers/_bubbles.scss */
+  /* line 171, ../sass/helpers/_bubbles.scss */
   .s-infobubble .value {
     color: #333333; }
 
-/* line 159, ../sass/helpers/_bubbles.scss */
+/* line 176, ../sass/helpers/_bubbles.scss */
 .s-thumbsbubble {
   background: #4d4d4d;
   color: #b3b3b3; }
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index a0b8f7286d..dec304455c 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -344,14 +344,16 @@ ul.tree {
         right: 13px;
         font-size: 1.8em;
         right: 0px;
-        width: auto; }
-      /* line 44, ../sass/mobile/_tree.scss */
+        width: 35px;
+        text-align: center; }
+      /* line 45, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label {
         left: 3px;
+        right: 45px;
         font-size: 1.2em; }
-        /* line 51, ../sass/mobile/_tree.scss */
+        /* line 54, ../sass/mobile/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           right: 16.9px; }
-    /* line 60, ../sass/mobile/_tree.scss */
+    /* line 63, ../sass/mobile/_tree.scss */
     ul.tree ul.tree {
       margin-left: 7px; } }
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 6d5c8a5b7d..fd641fac09 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -64,6 +64,7 @@
 @import "forms/filter";
 @import "plots/plots-main";
 @import "overlay/overlay";
+@import "mobile/overlay/overlay";
 @import "user-environ/frame";
 @import "user-environ/top-bar";
 @import "user-environ/bottom-bar";
diff --git a/platform/commonUI/general/res/sass/helpers/_bubbles.scss b/platform/commonUI/general/res/sass/helpers/_bubbles.scss
index 5b174ba6da..ef580f853a 100644
--- a/platform/commonUI/general/res/sass/helpers/_bubbles.scss
+++ b/platform/commonUI/general/res/sass/helpers/_bubbles.scss
@@ -79,15 +79,32 @@
 		margin-left: $bubbleArwSize*2;
 		.l-infobubble::before {
 			right: 100%;
-			@include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            // NOTE: [MOBILE] REMOVES TRIANGLE
+            // Removes the triangle located on the info
+            // bubble for phones only, for tablets and
+            // desktops, triangle remains.
+            @include desktopandtablet {
+                @include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            }
 		}
 	}
 
 	&.arw-right {
-		margin-right: $bubbleArwSize*2;
+        // NOTE: [MOBILE] REMOVES RIGHT MARGIN
+        // Removes right margin made for the 
+        // triangle on mobile
+        @include desktopandtablet {
+		  margin-right: $bubbleArwSize*2;
+        }
 		.l-infobubble::before {
 			left: 100%;
-			@include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            // NOTE: [MOBILE] REMOVES TRIANGLE
+            // Removes the triangle located on the info
+            // bubble for phones only, for tablets and
+            // desktops, triangle remains.
+            @include desktopandtablet {
+                @include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+            }
 		}
 	}
 
@@ -124,12 +141,12 @@
 //************************************************* LOOK AND FEEL
 
 .l-thumbsbubble-wrapper {
-	.arw-up {
-		@include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-	}
-	.arw-down {
-		@include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-	}
+    .arw-up {
+        @include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+    }
+    .arw-down {
+        @include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+    }
 }
 .s-infobubble {
 	$emFg: darken($colorInfoBubbleFg, 20%);
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index d5a5a1a45a..8ce7576f1e 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -34,7 +34,7 @@
                 .mobile-grid-nav {
                     top: 0px;
                     bottom: 0px;
-                    right: 50px;
+                    right: 55px;
                 }
                 .mobile-info {
                     text-align: center;
diff --git a/platform/commonUI/general/res/sass/mobile/_mixins.scss b/platform/commonUI/general/res/sass/mobile/_mixins.scss
index 23ce4cff2a..b4b0bd2c71 100644
--- a/platform/commonUI/general/res/sass/mobile/_mixins.scss
+++ b/platform/commonUI/general/res/sass/mobile/_mixins.scss
@@ -75,7 +75,18 @@
            #{$phoneLandscapeEmu},
            #{$tabletPortrait},
            #{$tabletLandscape},
-           #{$tabletLandscapeEmu}{
+           #{$tabletLandscapeEmu} {
+        @content
+    }
+}
+
+// Desktop monitors in any orientation
+@mixin desktopandtablet {
+    @media #{$tabletPortrait},
+           #{$tabletLandscape},
+           #{$tabletLandscapeEmu},
+           #{$desktopPortrait},
+           #{$desktopLandscape} {
         @content
     }
 }
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index fcdc70666e..d7f62f16b0 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -38,19 +38,22 @@ ul.tree {
                     right: $mobile-treeRight;
                     font-size: 1.8em;
                     right: 0px;
-                    width: auto;
+                    width: 35px;
+                    text-align: center;
                 }                   
 
                 .label {
                     // Designates the starting left margin
                     // (indentation) of 'My Items'
+                    // Also adds right space for selection button
                     left: $mobile-startingTreeLeft;
+                    right: 45px;
                     font-size: 1.2em;
                     // Allows tree item name to stop prior
                     // to the arrow
                     .title-label {
                         right: $mobile-treeRight * 1.3;
-                    }                    
+                    }
                 }             
             }
         }
diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
new file mode 100644
index 0000000000..ac99a36d17
--- /dev/null
+++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
@@ -0,0 +1,11 @@
+.overlay {
+    @include phoneandtablet {
+        $m: 0;
+        // Removes curved edges on the dialog box
+        // and makes it take up fullscreen
+        >.holder {
+          @include border-radius($m);
+          top: $m; right: $m; bottom: $m; left: $m;
+        }
+    }
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 6f791cfa75..7f54b97180 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -41,7 +41,7 @@
                           toggle.toggle(); treeNode.trackExpansion()"
 				ng-if="model.composition !== undefined || treeNode.checkMobile()"
 				>
-                {{treeNode.checkMobile() ? ">" : toggle.isActive() ? "v" : ">"}}
+                {{treeNode.checkMobile() ? "}" : toggle.isActive() ? "v" : ">"}}
             </span>
         </span>
         <span
diff --git a/platform/commonUI/general/src/services/QueryService.js b/platform/commonUI/general/src/services/QueryService.js
index 9d9b13989b..18ecea79c4 100644
--- a/platform/commonUI/general/src/services/QueryService.js
+++ b/platform/commonUI/general/src/services/QueryService.js
@@ -54,6 +54,17 @@ define(
                     return false;
                 }
             }
+            
+            // Checks if device is phone,
+            // phone is designated as only an
+            // iPhone device
+            function isPhone(ua) {
+                if (getDeviceUA(ua) == "iPhone") {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
 
             // Returns the orientation of the device based on the
             // device's window dimensions
@@ -76,7 +87,13 @@ define(
                  * on a mobile or non-mobile device. (mobile: true,
                  * non-mobile: false)
                  */
-                isMobile: isMobile
+                isMobile: isMobile,
+                
+                /**
+                 * Returns the a boolean checking if the user is on
+                 * a phone device. (phone: true, non-phone: false)
+                 */
+                isPhone: isPhone
             };
         }
 
diff --git a/platform/commonUI/inspect/bundle.json b/platform/commonUI/inspect/bundle.json
index f629272e99..7168b638e0 100644
--- a/platform/commonUI/inspect/bundle.json
+++ b/platform/commonUI/inspect/bundle.json
@@ -9,13 +9,6 @@
                 "key": "info-bubble",
                 "templateUrl": "info-bubble.html"
             }
-        ],      
-        "controllers": [
-            {
-                "key": "InfoController",
-                "implementation": "controllers/InfoController.js",
-                "depends": [ "$scope", "$timeout", "infoService" ]
-            }
         ],
         "containers": [
             {
@@ -35,6 +28,15 @@
                     "infoService",
                     "INFO_HOVER_DELAY"
                 ]
+            },
+            {
+                "key": "infobutton",
+                "implementation": "gestures/InfoButtonGesture.js",
+                "depends": [
+                    "$document",
+                    "queryService",
+                    "infoService"
+                ]
             }
         ],
         "services": [
@@ -45,7 +47,8 @@
                     "$compile",
                     "$document",
                     "$window",
-                    "$rootScope"
+                    "$rootScope",
+                    "queryService"
                 ]
             }
         ],  
@@ -58,7 +61,8 @@
         "representations": [
             {
                 "key": "info-button",
-                "templateUrl": "templates/info-button.html"
+                "templateUrl": "templates/info-button.html",
+                "gestures": [ "infobutton" ]
             }
         ]
     }
diff --git a/platform/commonUI/inspect/res/templates/info-button.html b/platform/commonUI/inspect/res/templates/info-button.html
index e602b2c0b1..bfc43a8fa4 100644
--- a/platform/commonUI/inspect/res/templates/info-button.html
+++ b/platform/commonUI/inspect/res/templates/info-button.html
@@ -20,6 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 
-<div ng-controller="InfoController" ng-click='tryToDis($event)'>
+<!--The icon for the info button appearing in a grid item (list in folder)-->
+<div>
     <a class='ui-symbol icon mobile-info'>i</a>
 </div>
diff --git a/platform/commonUI/inspect/src/controllers/InfoController.js b/platform/commonUI/inspect/src/controllers/InfoController.js
deleted file mode 100644
index 464d0ba6ac..0000000000
--- a/platform/commonUI/inspect/src/controllers/InfoController.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise*/
-
-/**
- * Module defining InfoController.
- */
-define(
-    [],
-    function () {
-        "use strict";
-        function InfoController($scope, $timeout, infoService) {
-            var touchPosition,
-                bubble;
-            function trackPosition(event) {
-                // Record mouse position, so bubble can be shown at latest
-                // mouse position (not just where the mouse entered)
-                touchPosition = [ event.pageX, event.pageY ];
-            }
-            
-            function display(event) {
-                var domainObject = $scope.domainObject;
-                console.log(domainObject.getId());
-                trackPosition(event);
-                
-                if(!bubble) {
-                    bubble = infoService.display(
-                        "info-table",
-                        domainObject.getModel().name,
-                        domainObject.useCapability('metadata'),
-                        touchPosition
-                    );
-                } else {
-                    bubble();
-                    bubble = undefined;
-                }
-                
-                $timeout(function () {
-                // If a bubble is showing, dismiss it after timeout
-                    if (bubble) {
-                        bubble();
-                        bubble = undefined;
-                    }
-                }, 750);
-            }
-            $scope.tryToDis = display;
-        }
-        return InfoController;
-    }
-);
\ No newline at end of file
diff --git a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
new file mode 100644
index 0000000000..04ab14ebe4
--- /dev/null
+++ b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
@@ -0,0 +1,116 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * The `info` gesture displays domain object metadata in a
+         * bubble on hover.
+         *
+         * @constructor
+         * @param $document Angular's `$document`
+         * @param {InfoService} infoService a service which shows info bubbles
+         * @param element jqLite-wrapped DOM element
+         * @param {DomainObject} domainObject the domain object for which to
+         *        show information
+         */
+        function InfoGestureButton($document, queryService, infoService, element, domainObject) {
+            var dismissBubble,
+                pendingBubble,
+                touchPosition,
+                scopeOff,
+                body = $document.find('body');
+
+            function trackPosition(event) {
+                // Record touch position, so bubble can be shown at latest
+                // touch position, also offset by 22px to left (accounts for
+                // a finger-sized touch on the info button)
+                touchPosition = [ event.clientX - 22, event.clientY ];
+            }
+
+            // Hides the bubble and detaches the
+            // body hidebubble listener
+            function hideBubble() {
+                // If a bubble is showing, dismiss it
+                if (dismissBubble) {
+                    dismissBubble();
+                    dismissBubble = undefined;
+                }
+                // Detaches body touch listener
+                body.off('touchstart', hideBubble);
+            }
+            
+            // Displays the bubble by tracking position of
+            // touch, using infoService to display the bubble,
+            // and then on any body touch the bubble is dismissed
+            function showBubble(event) {
+                trackPosition(event);
+
+                // Show the bubble, but on any touchstart on the
+                // body (anywhere) call hidebubble
+                pendingBubble =
+                    dismissBubble = infoService.display(
+                        "info-table",
+                        domainObject.getModel().name,
+                        domainObject.useCapability('metadata'),
+                        touchPosition
+                    );
+                body.on('touchstart', hideBubble);
+            }
+            
+            // Checks if you are on a mobile device, if the device is
+            // mobile (queryService.isMobile() = true), then
+            // the a click on something (info button) brings up 
+            // the bubble
+            if (queryService.isMobile(navigator.userAgent)) {
+                element.on('click', showBubble);
+            }
+
+            // Also make sure we dismiss bubble if representation is destroyed
+            // before the mouse actually leaves it
+            scopeOff = element.scope().$on('$destroy', hideBubble);
+
+            return {
+                /**
+                 * Detach any event handlers associated with this gesture.
+                 * @memberof InfoGesture
+                 * @method
+                 */
+                destroy: function () {
+                    // Dismiss any active bubble...
+                    hideBubble();
+                    // ...and detach listeners
+                    element.off('click', showBubble);
+                    scopeOff();
+                }
+            };
+        }
+
+        return InfoGestureButton;
+
+    }
+
+);
diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js
index b67192ba30..4804137544 100644
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ b/platform/commonUI/inspect/src/services/InfoService.js
@@ -33,7 +33,7 @@ define(
          * Displays informative content ("info bubbles") for the user.
          * @constructor
          */
-        function InfoService($compile, $document, $window, $rootScope) {
+        function InfoService($compile, $document, $window, $rootScope, queryService) {
 
             function display(templateKey, title, content, position) {
                 var body = $document.find('body'),
@@ -54,19 +54,29 @@ define(
                 // Create the context menu
                 bubble = $compile(BUBBLE_TEMPLATE)(scope);
 
-                // Position the bubble
+                // Position the bubble:
+                // Phone: On a phone the bubble is specifically positioned
+                //  so that it takes up the width of the screen.
+                // Tablet/Desktop: On other devices with larger screens, the
+                //  info bubble positioned as normal (with triangle pointing 
+                //  to where clicked or pressed)
                 bubble.css('position', 'absolute');
-                if (goLeft) {
-                    bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
+                if(queryService.isPhone(navigator.userAgent)) {                    
+                    bubble.css('right', 5 + 'px');
+                    bubble.css('left', 5 + 'px');
+                    bubble.css('top', 40 + 'px');
                 } else {
-                    bubble.css('left', position[0] + OFFSET[0] + 'px');
+                    if (goLeft) {
+                        bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
+                    } else {
+                        bubble.css('left', position[0] + OFFSET[0] + 'px');
+                    }
+                    if (goUp) {
+                        bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
+                    } else {
+                        bubble.css('top', position[1] + OFFSET[1] + 'px');
+                    }
                 }
-                if (goUp) {
-                    bubble.css('bottom', (winDim[1] - position[1] + OFFSET[1]) + 'px');
-                } else {
-                    bubble.css('top', position[1] + OFFSET[1] + 'px');
-                }
-
                 // Add the menu to the body
                 body.append(bubble);
 

From 3d524d7572455fb48d2fd7df5d0d846a743285ca Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 4 Aug 2015 10:11:25 -0700
Subject: [PATCH 133/266] [Mobile] AgentService

Replaced name queryService with agentService.
---
 platform/commonUI/general/bundle.json            |  6 +++---
 .../src/controllers/TreeNodeController.js        |  4 ++--
 .../{QueryService.js => AgentService.js}         |  6 +++---
 .../test/controllers/TreeNodeControllerSpec.js   |  6 +++---
 .../{QueryServiceSpec.js => AgentServiceSpec.js} | 16 ++++++++--------
 platform/commonUI/general/test/suite.json        |  2 +-
 platform/commonUI/inspect/bundle.json            |  6 +++---
 .../inspect/src/gestures/InfoButtonGesture.js    |  6 +++---
 .../commonUI/inspect/src/gestures/InfoGesture.js |  6 +++---
 .../commonUI/inspect/src/services/InfoService.js |  4 ++--
 .../inspect/test/gestures/InfoGestureSpec.js     |  6 +++---
 platform/representation/bundle.json              |  4 ++--
 .../src/actions/ContextMenuAction.js             | 10 +++++-----
 .../src/gestures/ContextMenuGesture.js           |  6 +++---
 .../test/actions/ContextMenuActionSpec.js        | 10 +++++-----
 .../test/gestures/ContextMenuGestureSpec.js      | 10 +++++-----
 16 files changed, 54 insertions(+), 54 deletions(-)
 rename platform/commonUI/general/src/services/{QueryService.js => AgentService.js} (97%)
 rename platform/commonUI/general/test/services/{QueryServiceSpec.js => AgentServiceSpec.js} (87%)

diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 53486c3f0e..f4ceed6ba1 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -10,8 +10,8 @@
                 "depends": [ "$location" ]
             },
             {
-                "key": "queryService",
-                "implementation": "/services/QueryService.js",
+                "key": "agentService",
+                "implementation": "/services/AgentService.js",
                 "depends": [ "$window" ]
             }
         ],
@@ -65,7 +65,7 @@
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",
-                "depends": [ "$scope", "$timeout", "queryService" ]
+                "depends": [ "$scope", "$timeout", "agentService" ]
             },
             {
                 "key": "ActionGroupController",
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 27ef3bfd49..c55c3e2b6b 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -50,7 +50,7 @@ define(
          * expand-to-show-navigated-object behavior.)
          * @constructor
          */
-        function TreeNodeController($scope, $timeout, queryService) {
+        function TreeNodeController($scope, $timeout, agentService) {
             var selectedObject = ($scope.ngModel || {}).selectedObject,
                 isSelected = false,
                 hasBeenExpanded = false;
@@ -88,7 +88,7 @@ define(
             }
             
             function checkMobile() {
-                return queryService.isMobile(navigator.userAgent);
+                return agentService.isMobile(navigator.userAgent);
             }
             
             // Consider the currently-navigated object and update
diff --git a/platform/commonUI/general/src/services/QueryService.js b/platform/commonUI/general/src/services/AgentService.js
similarity index 97%
rename from platform/commonUI/general/src/services/QueryService.js
rename to platform/commonUI/general/src/services/AgentService.js
index 18ecea79c4..307446c1dc 100644
--- a/platform/commonUI/general/src/services/QueryService.js
+++ b/platform/commonUI/general/src/services/AgentService.js
@@ -22,7 +22,7 @@
 /*global define,Promise*/
 
 /**
- * Module defining QueryService.
+ * Module defining AgentService.
  */
 
 define(
@@ -35,7 +35,7 @@ define(
          * info using a comparison between the userAgent and key
          * device names
          */
-        function QueryService($window) {
+        function AgentService($window) {
             
             // Gets the UA name if it is one of the following.
             // If it is not (a desktop for example) nothing is
@@ -97,6 +97,6 @@ define(
             };
         }
 
-        return QueryService;
+        return AgentService;
     }
 );
\ No newline at end of file
diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
index 2ce5c9f9fc..67e6cf7142 100644
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -29,7 +29,7 @@ define(
         describe("The tree node controller", function () {
             var mockScope,
                 mockTimeout,
-                mockQueryService,
+                mockAgentService,
                 controller;
 
             function TestObject(id, context) {
@@ -44,8 +44,8 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on"]);
                 mockTimeout = jasmine.createSpy("$timeout");
-                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
-                controller = new TreeNodeController(mockScope, mockTimeout, mockQueryService);
+                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
+                controller = new TreeNodeController(mockScope, mockTimeout, mockAgentService);
             });
 
             it("allows tracking of expansion state", function () {
diff --git a/platform/commonUI/general/test/services/QueryServiceSpec.js b/platform/commonUI/general/test/services/AgentServiceSpec.js
similarity index 87%
rename from platform/commonUI/general/test/services/QueryServiceSpec.js
rename to platform/commonUI/general/test/services/AgentServiceSpec.js
index 7caf551029..6207267da2 100644
--- a/platform/commonUI/general/test/services/QueryServiceSpec.js
+++ b/platform/commonUI/general/test/services/AgentServiceSpec.js
@@ -25,12 +25,12 @@
  * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
  */
 define(
-    ["../../src/services/QueryService"],
-    function (QueryService) {
+    ["../../src/services/AgentService"],
+    function (AgentService) {
         "use strict";
 
         describe("The url service", function () {
-            var queryService,
+            var agentService,
                 mockWindow,
                 mockNavigator;
 
@@ -47,24 +47,24 @@ define(
                     [ "userAgent" ]
                 );
                 
-                queryService = new QueryService(mockWindow);
+                agentService = new AgentService(mockWindow);
             });
             
             it("get current device user agent", function () {
                 mockNavigator.userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36";
-                queryService.isMobile(mockNavigator.userAgent);
+                agentService.isMobile(mockNavigator.userAgent);
                 mockNavigator.userAgent = "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
-                queryService.isMobile(mockNavigator.userAgent);
+                agentService.isMobile(mockNavigator.userAgent);
             });
             
             it("get orientation of the current device", function () {
                 mockWindow.outerWidth = 768;
                 mockWindow.outerHeight = 1024;
-                queryService.getOrientation();
+                agentService.getOrientation();
                 
                 mockWindow.outerWidth = 1024;
                 mockWindow.outerHeight = 768;
-                queryService.getOrientation();
+                agentService.getOrientation();
             });
         });
     }
diff --git a/platform/commonUI/general/test/suite.json b/platform/commonUI/general/test/suite.json
index 08240b6044..085c1795ba 100644
--- a/platform/commonUI/general/test/suite.json
+++ b/platform/commonUI/general/test/suite.json
@@ -13,7 +13,7 @@
     "directives/MCTDrag",
     "directives/MCTResize",
     "directives/MCTScroll",
-    "services/QueryService",
+    "services/AgentService",
     "services/UrlService",
     "StyleSheetLoader"
 ]
\ No newline at end of file
diff --git a/platform/commonUI/inspect/bundle.json b/platform/commonUI/inspect/bundle.json
index 7168b638e0..bafeb851ef 100644
--- a/platform/commonUI/inspect/bundle.json
+++ b/platform/commonUI/inspect/bundle.json
@@ -24,7 +24,7 @@
                 "implementation": "gestures/InfoGesture.js",
                 "depends": [
                     "$timeout",
-                    "queryService",
+                    "agentService",
                     "infoService",
                     "INFO_HOVER_DELAY"
                 ]
@@ -34,7 +34,7 @@
                 "implementation": "gestures/InfoButtonGesture.js",
                 "depends": [
                     "$document",
-                    "queryService",
+                    "agentService",
                     "infoService"
                 ]
             }
@@ -48,7 +48,7 @@
                     "$document",
                     "$window",
                     "$rootScope",
-                    "queryService"
+                    "agentService"
                 ]
             }
         ],  
diff --git a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
index 04ab14ebe4..679daabd51 100644
--- a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
@@ -37,7 +37,7 @@ define(
          * @param {DomainObject} domainObject the domain object for which to
          *        show information
          */
-        function InfoGestureButton($document, queryService, infoService, element, domainObject) {
+        function InfoGestureButton($document, agentService, infoService, element, domainObject) {
             var dismissBubble,
                 pendingBubble,
                 touchPosition,
@@ -82,10 +82,10 @@ define(
             }
             
             // Checks if you are on a mobile device, if the device is
-            // mobile (queryService.isMobile() = true), then
+            // mobile (agentService.isMobile() = true), then
             // the a click on something (info button) brings up 
             // the bubble
-            if (queryService.isMobile(navigator.userAgent)) {
+            if (agentService.isMobile(navigator.userAgent)) {
                 element.on('click', showBubble);
             }
 
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 4792445f6b..6b6d77a3ed 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -38,7 +38,7 @@ define(
          * @param {DomainObject} domainObject the domain object for which to
          *        show information
          */
-        function InfoGesture($timeout, queryService, infoService, DELAY, element, domainObject) {
+        function InfoGesture($timeout, agentService, infoService, DELAY, element, domainObject) {
             var dismissBubble,
                 pendingBubble,
                 mousePosition,
@@ -93,9 +93,9 @@ define(
             }
             
             // Checks if you are on a mobile device, if the device is
-            // not mobile (queryService.isMobile() = false), then
+            // not mobile (agentService.isMobile() = false), then
             // the pendingBubble and therefore hovering is allowed
-            if (!queryService.isMobile(navigator.userAgent)) {
+            if (!agentService.isMobile(navigator.userAgent)) {
                 // Show bubble (on a timeout) on mouse over
                 element.on('mouseenter', showBubble);
             }
diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js
index 4804137544..50d03cb38c 100644
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ b/platform/commonUI/inspect/src/services/InfoService.js
@@ -33,7 +33,7 @@ define(
          * Displays informative content ("info bubbles") for the user.
          * @constructor
          */
-        function InfoService($compile, $document, $window, $rootScope, queryService) {
+        function InfoService($compile, $document, $window, $rootScope, agentService) {
 
             function display(templateKey, title, content, position) {
                 var body = $document.find('body'),
@@ -61,7 +61,7 @@ define(
                 //  info bubble positioned as normal (with triangle pointing 
                 //  to where clicked or pressed)
                 bubble.css('position', 'absolute');
-                if(queryService.isPhone(navigator.userAgent)) {                    
+                if(agentService.isPhone(navigator.userAgent)) {                    
                     bubble.css('right', 5 + 'px');
                     bubble.css('left', 5 + 'px');
                     bubble.css('top', 40 + 'px');
diff --git a/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
index a9a83eeb5a..28408a2a7c 100644
--- a/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
+++ b/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
@@ -28,7 +28,7 @@ define(
 
         describe("The info gesture", function () {
             var mockTimeout,
-                mockQueryService,
+                mockAgentService,
                 mockInfoService,
                 testDelay = 12321,
                 mockElement,
@@ -51,7 +51,7 @@ define(
             beforeEach(function () {
                 mockTimeout = jasmine.createSpy('$timeout');
                 mockTimeout.cancel = jasmine.createSpy('cancel');
-                mockQueryService = jasmine.createSpyObj('queryService', ['isMobile']);
+                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile']);
                 mockInfoService = jasmine.createSpyObj(
                     'infoService',
                     [ 'display' ]
@@ -81,7 +81,7 @@ define(
 
                 gesture = new InfoGesture(
                     mockTimeout,
-                    mockQueryService,
+                    mockAgentService,
                     mockInfoService,
                     testDelay,
                     mockElement,
diff --git a/platform/representation/bundle.json b/platform/representation/bundle.json
index 3eeaf2d258..44656b0f4c 100644
--- a/platform/representation/bundle.json
+++ b/platform/representation/bundle.json
@@ -26,7 +26,7 @@
             {
                 "key": "menu",
                 "implementation": "gestures/ContextMenuGesture.js",
-                "depends": ["$timeout", "queryService"]
+                "depends": ["$timeout", "agentService"]
             }
         ],
         "components": [
@@ -54,7 +54,7 @@
             {
                 "key": "menu",
                 "implementation": "actions/ContextMenuAction.js",
-                "depends": [ "$compile", "$document", "$window", "$rootScope", "queryService" ]
+                "depends": [ "$compile", "$document", "$window", "$rootScope", "agentService" ]
             }
         ]
     }
diff --git a/platform/representation/src/actions/ContextMenuAction.js b/platform/representation/src/actions/ContextMenuAction.js
index 244d6a0b0d..65ee0b0d50 100644
--- a/platform/representation/src/actions/ContextMenuAction.js
+++ b/platform/representation/src/actions/ContextMenuAction.js
@@ -47,7 +47,7 @@ define(
          * @param actionContexr the context in which the action
          *                      should be performed
          */
-        function ContextMenuAction($compile, $document, $window, $rootScope, queryService, actionContext) {
+        function ContextMenuAction($compile, $document, $window, $rootScope, agentService, actionContext) {
             
             function perform() {
                 var winDim = [$window.innerWidth, $window.innerHeight],
@@ -95,11 +95,11 @@ define(
                 
                 // Stop propagation so that clicks on the menu do not close the menu
                 // Stop propagation so that touches on the menu do not close the menu
-                if (!queryService.isMobile(navigator.userAgent)) {
+                if (!agentService.isMobile(navigator.userAgent)) {
                     menu.on('mousedown', function (event) {
                         event.stopPropagation();
                     });
-                } else if (queryService.isMobile(navigator.userAgent)) {
+                } else if (agentService.isMobile(navigator.userAgent)) {
                     menu.on('touchstart', function (event) {
                         event.stopPropagation();
                     });
@@ -108,9 +108,9 @@ define(
                 // Dismiss the menu when body is clicked/touched elsewhere
                 // ('mousedown' because 'click' breaks left-click context menus)
                 // ('touchstart' because 'touch' breaks context menus up)
-                if (!queryService.isMobile(navigator.userAgent)) {
+                if (!agentService.isMobile(navigator.userAgent)) {
                     body.on('mousedown', dismiss);
-                } else if (queryService.isMobile(navigator.userAgent)) {
+                } else if (agentService.isMobile(navigator.userAgent)) {
                     body.on('touchstart', dismiss);
                 }
                 
diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index 576c5eb66f..64449914c4 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -39,19 +39,19 @@ define(
          * @param {DomainObject} domainObject the object on which actions
          *                       in the context menu will be performed
          */
-        function ContextMenuGesture($timeout, queryService, element, domainObject) {
+        function ContextMenuGesture($timeout, agentService, element, domainObject) {
             var actionContext,
                 stop,
                 isPressing,
                 longTouchTime = 500;
             
             // When context menu event occurs, show object actions instead
-            if (!queryService.isMobile(navigator.userAgent)) {
+            if (!agentService.isMobile(navigator.userAgent)) {
                 element.on('contextmenu', function (event) {
                     actionContext = {key: 'menu', domainObject: domainObject, event: event};
                     stop = domainObject.getCapability('action').perform(actionContext);
                 });
-            } else if (queryService.isMobile(navigator.userAgent)) {
+            } else if (agentService.isMobile(navigator.userAgent)) {
                 // If on mobile device, then start timeout for the single touch event
                 // during the timeout 'isPressing' is true.
                 element.on('touchstart', function (event) {
diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index c1c6dc51ca..01ea265f02 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -43,7 +43,7 @@ define(
                 mockBody,
                 mockWindow,
                 mockRootScope,
-                mockQueryService,
+                mockAgentService,
                 mockScope,
                 mockElement,
                 mockDomainObject,
@@ -61,7 +61,7 @@ define(
                 mockBody = jasmine.createSpyObj("body", JQLITE_FUNCTIONS);
                 mockWindow = { innerWidth: MENU_DIMENSIONS[0] * 4, innerHeight: MENU_DIMENSIONS[1] * 4 };
                 mockRootScope = jasmine.createSpyObj("$rootScope", ["$new"]);
-                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
+                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
                 mockScope = {};
                 mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
@@ -81,7 +81,7 @@ define(
                     mockDocument,
                     mockWindow,
                     mockRootScope,
-                    mockQueryService,
+                    mockAgentService,
                     mockActionContext
                 );
             });
@@ -160,13 +160,13 @@ define(
             });
             
             it("mobile", function () {
-                mockQueryService.isMobile.andReturn(true);
+                mockAgentService.isMobile.andReturn(true);
                 action = new ContextMenuAction(
                     mockCompile,
                     mockDocument,
                     mockWindow,
                     mockRootScope,
-                    mockQueryService,
+                    mockAgentService,
                     mockActionContext
                 );
                 action.perform();
diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index b3b7e8de8c..031fdfc9e2 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -37,7 +37,7 @@ define(
         describe("The 'context menu' gesture", function () {
             var mockTimeout,
                 mockElement,
-                mockQueryService,
+                mockAgentService,
                 mockDomainObject,
                 mockEvent,
                 gesture,
@@ -46,11 +46,11 @@ define(
             beforeEach(function () {
                 mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockTimeout = jasmine.createSpy("$timeout");
-                mockQueryService = jasmine.createSpyObj("queryService", ["isMobile"]);
+                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
                 mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
                 
-                gesture = new ContextMenuGesture(mockTimeout, mockQueryService, mockElement, mockDomainObject);
+                gesture = new ContextMenuGesture(mockTimeout, mockAgentService, mockElement, mockDomainObject);
 
                 // Capture the contextmenu callback
                 fireGesture =  mockElement.on.mostRecentCall.args[1];
@@ -76,8 +76,8 @@ define(
             });
             
             it("mobile", function () {
-                mockQueryService.isMobile.andReturn(true);
-                gesture = new ContextMenuGesture(mockTimeout, mockQueryService, mockElement, mockDomainObject);
+                mockAgentService.isMobile.andReturn(true);
+                gesture = new ContextMenuGesture(mockTimeout, mockAgentService, mockElement, mockDomainObject);
                 
                 // Capture the contextmenu callback
                 fireGesture =  mockElement.on.mostRecentCall.args[1];

From 66408eeec84e7139416592dea08b26386be24531 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 4 Aug 2015 13:41:48 -0700
Subject: [PATCH 134/266] [Mobile] Gestures

Now to dismiss bubble, touch anywhere
the touch will not fire other gestures
(such as the pressing of another object).
---
 .../inspect/src/gestures/InfoButtonGesture.js | 27 ++++++++++++-------
 .../inspect/src/services/InfoService.js       | 11 ++++----
 2 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
index 679daabd51..d128392534 100644
--- a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
@@ -39,7 +39,6 @@ define(
          */
         function InfoGestureButton($document, agentService, infoService, element, domainObject) {
             var dismissBubble,
-                pendingBubble,
                 touchPosition,
                 scopeOff,
                 body = $document.find('body');
@@ -59,6 +58,7 @@ define(
                     dismissBubble();
                     dismissBubble = undefined;
                 }
+                
                 // Detaches body touch listener
                 body.off('touchstart', hideBubble);
             }
@@ -68,17 +68,24 @@ define(
             // and then on any body touch the bubble is dismissed
             function showBubble(event) {
                 trackPosition(event);
-
+                
                 // Show the bubble, but on any touchstart on the
                 // body (anywhere) call hidebubble
-                pendingBubble =
-                    dismissBubble = infoService.display(
-                        "info-table",
-                        domainObject.getModel().name,
-                        domainObject.useCapability('metadata'),
-                        touchPosition
-                    );
-                body.on('touchstart', hideBubble);
+                dismissBubble = infoService.display(
+                    "info-table",
+                    domainObject.getModel().name,
+                    domainObject.useCapability('metadata'),
+                    touchPosition
+                );
+                
+                // On any touch on the body, default body touches/events
+                // are prevented, the bubble is dismissed, and the touchstart
+                // body event is unbound, reallowing gestures
+                body.on('touchstart', function (event) {
+                    event.preventDefault();
+                    hideBubble();
+                    body.unbind('touchstart');
+                });
             }
             
             // Checks if you are on a mobile device, if the device is
diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js
index 50d03cb38c..ab1a6a5d15 100644
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ b/platform/commonUI/inspect/src/services/InfoService.js
@@ -61,10 +61,11 @@ define(
                 //  info bubble positioned as normal (with triangle pointing 
                 //  to where clicked or pressed)
                 bubble.css('position', 'absolute');
-                if(agentService.isPhone(navigator.userAgent)) {                    
-                    bubble.css('right', 5 + 'px');
-                    bubble.css('left', 5 + 'px');
-                    bubble.css('top', 40 + 'px');
+                if (agentService.isPhone(navigator.userAgent)) {
+                    bubble.css('right', 0 + 'px');
+                    bubble.css('left', 0 + 'px');
+                    bubble.css('top', 'auto');
+                    bubble.css('bottom', 25 + 'px');
                 } else {
                     if (goLeft) {
                         bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');
@@ -79,7 +80,7 @@ define(
                 }
                 // Add the menu to the body
                 body.append(bubble);
-
+                
                 // Return a function to dismiss the bubble
                 return function () { bubble.remove(); };
             }

From 6b65ae77e7d1e980977d2ad110ca55f197234c6f Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 4 Aug 2015 16:48:41 -0700
Subject: [PATCH 135/266] [Mobile] Tests

Completed tests for AgentService,
InfoService, and ContextMenuAction.
ContextMenu and InfoButton Gesture
tests remain. Also resized info button
icon.
---
 platform/commonUI/general/res/css/items.css   |   2 +-
 .../general/res/sass/mobile/_item.scss        |   2 +-
 .../general/test/services/AgentServiceSpec.js |   3 +
 .../test/gestures/InfoButtonGestureSpec.js    | 102 ++++++++++++++++++
 .../inspect/test/services/InfoServiceSpec.js  |  17 ++-
 platform/commonUI/inspect/test/suite.json     |   1 +
 .../test/actions/ContextMenuActionSpec.js     |  29 +++--
 .../test/gestures/ContextMenuGestureSpec.js   |   9 +-
 8 files changed, 147 insertions(+), 18 deletions(-)
 create mode 100644 platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 3e650d8156..d669127598 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -378,7 +378,7 @@
     width: 50px;
     right: 0px;
     left: auto;
-    font-size: 1.5em; }
+    font-size: 1.3em; }
   /* line 47, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item .bar.bottom-bar.abs {
     top: 0px;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 8ce7576f1e..4db43b885b 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -41,7 +41,7 @@
                     width: 50px;
                     right: 0px;
                     left: auto;
-                    font-size: 1.5em;
+                    font-size: 1.3em;
                 }
                 .bar {
                     &.bottom-bar.abs {
diff --git a/platform/commonUI/general/test/services/AgentServiceSpec.js b/platform/commonUI/general/test/services/AgentServiceSpec.js
index 6207267da2..e0f689ddfc 100644
--- a/platform/commonUI/general/test/services/AgentServiceSpec.js
+++ b/platform/commonUI/general/test/services/AgentServiceSpec.js
@@ -53,8 +53,11 @@ define(
             it("get current device user agent", function () {
                 mockNavigator.userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36";
                 agentService.isMobile(mockNavigator.userAgent);
+                agentService.isPhone(mockNavigator.userAgent);
                 mockNavigator.userAgent = "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
                 agentService.isMobile(mockNavigator.userAgent);
+                mockNavigator.userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
+                agentService.isPhone(mockNavigator.userAgent);
             });
             
             it("get orientation of the current device", function () {
diff --git a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
new file mode 100644
index 0000000000..7ccff88343
--- /dev/null
+++ b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
@@ -0,0 +1,102 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ['../../src/gestures/InfoButtonGesture'],
+    function (InfoButtonGesture) {
+        "use strict";
+
+        describe("The info button gesture", function () {
+            var mockDocument,
+                mockAgentService,
+                mockInfoService,
+                testDelay = 12321,
+                mockElement,
+                mockDomainObject,
+                mockScope,
+                mockOff,
+                testMetadata,
+                mockPromise,
+                mockHide,
+                gesture;
+
+            beforeEach(function () {
+                mockDocument = jasmine.createSpyObj('$document', ['find']);
+                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
+                mockInfoService = jasmine.createSpyObj(
+                    'infoService',
+                    [ 'display' ]
+                );
+                mockElement = jasmine.createSpyObj(
+                    'element',
+                    [ 'on', 'off', 'scope', 'css' ]
+                );
+                mockDomainObject = jasmine.createSpyObj(
+                    'domainObject',
+                    [ 'getId', 'getCapability', 'useCapability', 'getModel' ]
+                );
+                mockDocument = jasmine.createSpyObj('$document', ['find']);
+                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile']);
+                mockInfoService = jasmine.createSpyObj(
+                    'infoService',
+                    [ 'display' ]
+                );
+                mockElement = jasmine.createSpyObj(
+                    'element',
+                    [ 'on', 'off', 'scope', 'css' ]
+                );
+                mockDomainObject = jasmine.createSpyObj(
+                    'domainObject',
+                    [ 'getId', 'getCapability', 'useCapability', 'getModel' ]
+                );
+                
+                mockScope = jasmine.createSpyObj('$scope', [ '$on' ]);
+                mockOff = jasmine.createSpy('$off');
+                testMetadata = [ { name: "Test name", value: "Test value" } ];
+                mockHide = jasmine.createSpy('hide');
+
+                mockDomainObject.getModel.andReturn({ name: "Test Object" });
+                mockDomainObject.useCapability.andCallFake(function (c) {
+                    return (c === 'metadata') ? testMetadata : undefined;
+                });
+                mockElement.scope.andReturn(mockScope);
+                mockScope.$on.andReturn(mockOff);
+                mockInfoService.display.andReturn(mockHide);
+                mockAgentService.isMobile.andReturn(true);
+                gesture = new InfoButtonGesture(
+                    mockDocument,
+                    mockAgentService,
+                    mockInfoService,
+                    mockElement,
+                    mockDomainObject
+                );
+            });
+            
+            it("listens for click on the representation", function () {
+                expect(mockElement.on)
+                    .toHaveBeenCalledWith('click', jasmine.any(Function));
+            });
+
+        });
+    }
+);
diff --git a/platform/commonUI/inspect/test/services/InfoServiceSpec.js b/platform/commonUI/inspect/test/services/InfoServiceSpec.js
index 858427fe84..58adbbec51 100644
--- a/platform/commonUI/inspect/test/services/InfoServiceSpec.js
+++ b/platform/commonUI/inspect/test/services/InfoServiceSpec.js
@@ -31,6 +31,7 @@ define(
                 mockDocument,
                 testWindow,
                 mockRootScope,
+                mockAgentService,
                 mockCompiledTemplate,
                 testScope,
                 mockBody,
@@ -42,6 +43,7 @@ define(
                 mockDocument = jasmine.createSpyObj('$document', ['find']);
                 testWindow = { innerWidth: 1000, innerHeight: 100 };
                 mockRootScope = jasmine.createSpyObj('$rootScope', ['$new']);
+                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
                 mockCompiledTemplate = jasmine.createSpy('template');
                 testScope = {};
                 mockBody = jasmine.createSpyObj('body', ['append']);
@@ -58,7 +60,8 @@ define(
                     mockCompile,
                     mockDocument,
                     testWindow,
-                    mockRootScope
+                    mockRootScope,
+                    mockAgentService
                 );
             });
 
@@ -124,6 +127,18 @@ define(
                         (40 + InfoConstants.BUBBLE_OFFSET[1]) + 'px'
                     );
                 });
+                
+                it("when on phone device, positioning is always on bottom", function () {
+                    mockAgentService.isPhone.andReturn(true);
+                    service = new InfoService(
+                        mockCompile,
+                        mockDocument,
+                        testWindow,
+                        mockRootScope,
+                        mockAgentService
+                    );
+                    service.display('', '', {}, [0, 0]);
+                });                
             });
 
         });
diff --git a/platform/commonUI/inspect/test/suite.json b/platform/commonUI/inspect/test/suite.json
index 82650e2dff..ca006fdaa7 100644
--- a/platform/commonUI/inspect/test/suite.json
+++ b/platform/commonUI/inspect/test/suite.json
@@ -1,4 +1,5 @@
 [
     "gestures/InfoGesture",
+    "gestures/InfoButtonGesture",
     "services/InfoService"
 ]
diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index 01ea265f02..9f6c94b910 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -53,6 +53,14 @@ define(
                 mockStopPropagation,
                 action;
 
+            function fireEvent(evt, value) {
+                mockElement.on.calls.forEach(function (call) {
+                    if (call.args[0] === evt) {
+                        call.args[1](value);
+                    }
+                });
+            }
+            
             beforeEach(function () {
                 mockCompile = jasmine.createSpy("$compile");
                 mockCompiledTemplate = jasmine.createSpy("template");
@@ -144,13 +152,12 @@ define(
             it("keeps a menu when menu is clicked", function () {
                 // Show the menu
                 action.perform();
-                
                 // Find and fire body's mousedown listener
-//                mockMenu.on.calls.forEach(function (call) {
-//                    if (call.args[0] === 'mousedown') {
-//                        call.args[1]();
-//                    }
-//                });
+                mockMenu.on.calls.forEach(function (call) {
+                    if (call.args[0] === 'mousedown') {
+                        call.args[1](mockEvent);
+                    }
+                });
 
                 // Menu should have been removed
                 expect(mockMenu.remove).not.toHaveBeenCalled();
@@ -171,11 +178,11 @@ define(
                 );
                 action.perform();
                 
-//                mockMenu.on.calls.forEach(function (call) {
-//                    if (call.args[0] === 'touchstart') {
-//                        call.args[1]();
-//                    }
-//                });
+                mockMenu.on.calls.forEach(function (call) {
+                    if (call.args[0] === 'touchstart') {
+                        call.args[1](mockEvent);
+                    }
+                });
             });
         });
     }
diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index 031fdfc9e2..8d6b685762 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -82,10 +82,11 @@ define(
                 // Capture the contextmenu callback
                 fireGesture =  mockElement.on.mostRecentCall.args[1];
                 
-                expect(mockElement.on).toHaveBeenCalledWith(
-                    "touchstart",
-                    jasmine.any(Function)
-                );
+                mockMenu.on.calls.forEach(function (call) {
+                    if (call.args[0] === 'touchstart') {
+                        call.args[1](mockEvent);
+                    }
+                });
             });
         });
     }

From f46a0853b97f9c8a3b05939dcbf76ccada73edaa Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 4 Aug 2015 16:58:37 -0700
Subject: [PATCH 136/266] [Mobile] Tests

Removed mockMenu from ContextMenuGestureSpec.
---
 .../representation/test/gestures/ContextMenuGestureSpec.js  | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index 8d6b685762..d3e5243b3b 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -81,12 +81,6 @@ define(
                 
                 // Capture the contextmenu callback
                 fireGesture =  mockElement.on.mostRecentCall.args[1];
-                
-                mockMenu.on.calls.forEach(function (call) {
-                    if (call.args[0] === 'touchstart') {
-                        call.args[1](mockEvent);
-                    }
-                });
             });
         });
     }

From 0b635afcf7a71eec660919fc1a6e996241b8f8e6 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 5 Aug 2015 12:14:16 -0700
Subject: [PATCH 137/266] [Mobile] Tests

ContextMenu and InfoButton Gesture
tests remain.
---
 .../test/gestures/InfoButtonGestureSpec.js    | 24 +++++++++++++++----
 .../inspect/test/services/InfoServiceSpec.js  |  2 +-
 .../test/actions/ContextMenuActionSpec.js     |  2 +-
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
index 7ccff88343..a388ef3d6c 100644
--- a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
+++ b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
@@ -27,12 +27,14 @@ define(
         "use strict";
 
         describe("The info button gesture", function () {
-            var mockDocument,
+            var mockTimeout,
+                mockDocument,
                 mockAgentService,
                 mockInfoService,
                 testDelay = 12321,
                 mockElement,
                 mockDomainObject,
+                mockEvent,
                 mockScope,
                 mockOff,
                 testMetadata,
@@ -40,7 +42,16 @@ define(
                 mockHide,
                 gesture;
 
+            function fireEvent(evt, value) {
+                mockElement.on.calls.forEach(function (call) {
+                    if (call.args[0] === evt) {
+                        call.args[1](value);
+                    }
+                });
+            }
+            
             beforeEach(function () {
+                mockTimeout = jasmine.createSpy('$timeout');
                 mockDocument = jasmine.createSpyObj('$document', ['find']);
                 mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
                 mockInfoService = jasmine.createSpyObj(
@@ -63,13 +74,15 @@ define(
                 );
                 mockElement = jasmine.createSpyObj(
                     'element',
-                    [ 'on', 'off', 'scope', 'css' ]
+                    [ 'on', 'off', 'scope', 'css', 'click' ]
                 );
                 mockDomainObject = jasmine.createSpyObj(
                     'domainObject',
                     [ 'getId', 'getCapability', 'useCapability', 'getModel' ]
                 );
-                
+                mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]);
+                mockEvent.pageX = 0;
+                mockEvent.pageY = 0;
                 mockScope = jasmine.createSpyObj('$scope', [ '$on' ]);
                 mockOff = jasmine.createSpy('$off');
                 testMetadata = [ { name: "Test name", value: "Test value" } ];
@@ -92,11 +105,12 @@ define(
                 );
             });
             
-            it("listens for click on the representation", function () {
+            it("expect click on the representation", function () {
                 expect(mockElement.on)
                     .toHaveBeenCalledWith('click', jasmine.any(Function));
+                
             });
-
+            
         });
     }
 );
diff --git a/platform/commonUI/inspect/test/services/InfoServiceSpec.js b/platform/commonUI/inspect/test/services/InfoServiceSpec.js
index 58adbbec51..e878afb268 100644
--- a/platform/commonUI/inspect/test/services/InfoServiceSpec.js
+++ b/platform/commonUI/inspect/test/services/InfoServiceSpec.js
@@ -138,7 +138,7 @@ define(
                         mockAgentService
                     );
                     service.display('', '', {}, [0, 0]);
-                });                
+                });
             });
 
         });
diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index 9f6c94b910..8e1ac5768a 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -166,7 +166,7 @@ define(
                 expect(mockBody.off).not.toHaveBeenCalled();
             });
             
-            it("mobile", function () {
+            it("keeps a menu when menu is clicked on mobile", function () {
                 mockAgentService.isMobile.andReturn(true);
                 action = new ContextMenuAction(
                     mockCompile,

From 0a39984c4fbec0807b77663fe44901c536acd691 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 5 Aug 2015 12:26:09 -0700
Subject: [PATCH 138/266] [Mobile] Clean Up

Fixed InfoService having 0 in
wrong spot. Also correctly compared
the UserAgent device to iPhone for
isMobile function in AgentService.
---
 platform/commonUI/general/src/services/AgentService.js | 2 +-
 platform/commonUI/inspect/src/services/InfoService.js  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/platform/commonUI/general/src/services/AgentService.js b/platform/commonUI/general/src/services/AgentService.js
index 307446c1dc..0d43cfdfa6 100644
--- a/platform/commonUI/general/src/services/AgentService.js
+++ b/platform/commonUI/general/src/services/AgentService.js
@@ -59,7 +59,7 @@ define(
             // phone is designated as only an
             // iPhone device
             function isPhone(ua) {
-                if (getDeviceUA(ua) == "iPhone") {
+                if (getDeviceUA(ua)[0] === "iPhone") {
                     return true;
                 } else {
                     return false;
diff --git a/platform/commonUI/inspect/src/services/InfoService.js b/platform/commonUI/inspect/src/services/InfoService.js
index ab1a6a5d15..a7c1c19a1e 100644
--- a/platform/commonUI/inspect/src/services/InfoService.js
+++ b/platform/commonUI/inspect/src/services/InfoService.js
@@ -62,10 +62,10 @@ define(
                 //  to where clicked or pressed)
                 bubble.css('position', 'absolute');
                 if (agentService.isPhone(navigator.userAgent)) {
-                    bubble.css('right', 0 + 'px');
-                    bubble.css('left', 0 + 'px');
+                    bubble.css('right', '0px');
+                    bubble.css('left', '0px');
                     bubble.css('top', 'auto');
-                    bubble.css('bottom', 25 + 'px');
+                    bubble.css('bottom', '25px');
                 } else {
                     if (goLeft) {
                         bubble.css('right', (winDim[0] - position[0] + OFFSET[0]) + 'px');

From dcd7d61c9aa907857fe594351d126bc0215f2928 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 6 Aug 2015 13:43:56 -0700
Subject: [PATCH 139/266] [Mobile] Tests

Completed ContextMenu and InfoButton
Gesture tests where elements/body
touch events occur.
---
 .../test/gestures/InfoButtonGestureSpec.js    | 81 +++++++++++++------
 .../test/gestures/ContextMenuGestureSpec.js   | 54 +++++++++++--
 2 files changed, 103 insertions(+), 32 deletions(-)

diff --git a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
index a388ef3d6c..036a77685b 100644
--- a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
+++ b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
@@ -29,9 +29,9 @@ define(
         describe("The info button gesture", function () {
             var mockTimeout,
                 mockDocument,
+                mockBody,
                 mockAgentService,
                 mockInfoService,
-                testDelay = 12321,
                 mockElement,
                 mockDomainObject,
                 mockEvent,
@@ -40,19 +40,15 @@ define(
                 testMetadata,
                 mockPromise,
                 mockHide,
-                gesture;
-
-            function fireEvent(evt, value) {
-                mockElement.on.calls.forEach(function (call) {
-                    if (call.args[0] === evt) {
-                        call.args[1](value);
-                    }
-                });
-            }
+                gesture,
+                fireGesture,
+                fireDismissGesture;
             
             beforeEach(function () {
                 mockTimeout = jasmine.createSpy('$timeout');
                 mockDocument = jasmine.createSpyObj('$document', ['find']);
+                mockBody = jasmine.createSpyObj('body', [ 'on', 'off', 'scope', 'css', 'unbind' ]);
+                mockDocument.find.andReturn(mockBody);
                 mockAgentService = jasmine.createSpyObj('agentService', ['isMobile', 'isPhone']);
                 mockInfoService = jasmine.createSpyObj(
                     'infoService',
@@ -66,20 +62,7 @@ define(
                     'domainObject',
                     [ 'getId', 'getCapability', 'useCapability', 'getModel' ]
                 );
-                mockDocument = jasmine.createSpyObj('$document', ['find']);
-                mockAgentService = jasmine.createSpyObj('agentService', ['isMobile']);
-                mockInfoService = jasmine.createSpyObj(
-                    'infoService',
-                    [ 'display' ]
-                );
-                mockElement = jasmine.createSpyObj(
-                    'element',
-                    [ 'on', 'off', 'scope', 'css', 'click' ]
-                );
-                mockDomainObject = jasmine.createSpyObj(
-                    'domainObject',
-                    [ 'getId', 'getCapability', 'useCapability', 'getModel' ]
-                );
+                
                 mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]);
                 mockEvent.pageX = 0;
                 mockEvent.pageY = 0;
@@ -103,12 +86,58 @@ define(
                     mockElement,
                     mockDomainObject
                 );
+                fireGesture =  mockElement.on.mostRecentCall.args[1];
             });
             
             it("expect click on the representation", function () {
-                expect(mockElement.on)
-                    .toHaveBeenCalledWith('click', jasmine.any(Function));
+                // Fires a click call on element and then
+                // expects the click to have happened
+                fireGesture(mockEvent);
+                expect(mockElement.on).toHaveBeenCalledWith(
+                    "click",
+                    jasmine.any(Function)
+                );
+            });
+            
+            it("expect click then dismiss on the representation", function () {
+                // Fire the click and then expect the click
+                fireGesture(mockEvent);
+                expect(mockElement.on).toHaveBeenCalledWith(
+                    "click",
+                    jasmine.any(Function)
+                );
                 
+                // Get the touch start on the body
+                // and fire the dismiss gesture
+                fireDismissGesture =  mockBody.on.mostRecentCall.args[1];
+                fireDismissGesture(mockEvent);
+                // Expect Body to have been touched, event.preventDefault()
+                // to be called, then the mockBody listener to be detached
+                // lastly unbind the touchstart used to dismiss so other 
+                // events can be called
+                expect(mockBody.on).toHaveBeenCalledWith(
+                    "touchstart",
+                    jasmine.any(Function)
+                );
+                expect(mockEvent.preventDefault).toHaveBeenCalled();
+                expect(mockBody.off).toHaveBeenCalledWith(
+                    "touchstart",
+                    jasmine.any(Function)
+                );
+                expect(mockBody.unbind).toHaveBeenCalledWith(
+                    'touchstart'
+                );
+            });
+            
+            it("detaches a callback for info bubble events when destroyed", function () {
+                expect(mockElement.off).not.toHaveBeenCalled();
+
+                gesture.destroy();
+
+                expect(mockElement.off).toHaveBeenCalledWith(
+                    "click",
+                    jasmine.any(Function)
+                );
             });
             
         });
diff --git a/platform/representation/test/gestures/ContextMenuGestureSpec.js b/platform/representation/test/gestures/ContextMenuGestureSpec.js
index d3e5243b3b..6938dee33d 100644
--- a/platform/representation/test/gestures/ContextMenuGestureSpec.js
+++ b/platform/representation/test/gestures/ContextMenuGestureSpec.js
@@ -31,7 +31,7 @@ define(
         "use strict";
 
         var JQLITE_FUNCTIONS = [ "on", "off", "find", "append", "remove" ],
-            DOMAIN_OBJECT_METHODS = [ "getId", "getModel", "getCapability", "hasCapability", "useCapability" ];
+            DOMAIN_OBJECT_METHODS = [ "getId", "getModel", "getCapability", "hasCapability", "useCapability"];
 
 
         describe("The 'context menu' gesture", function () {
@@ -40,15 +40,35 @@ define(
                 mockAgentService,
                 mockDomainObject,
                 mockEvent,
+                mockTouchEvent,
+                mockContextMenuAction,
+                mockActionContext,
+                mockTouch,
                 gesture,
-                fireGesture;
+                fireGesture,
+                fireTouchStartGesture,
+                fireTouchEndGesture;
 
             beforeEach(function () {
-                mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockTimeout = jasmine.createSpy("$timeout");
+                mockElement = jasmine.createSpyObj("element", JQLITE_FUNCTIONS);
                 mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
                 mockDomainObject = jasmine.createSpyObj("domainObject", DOMAIN_OBJECT_METHODS);
                 mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
+                mockContextMenuAction = jasmine.createSpyObj(
+                    "action",
+                    [ "perform", "getActions" ]
+                );
+                mockActionContext = jasmine.createSpyObj(
+                    "actionContext",
+                    [ "" ]
+                );
+                
+                mockActionContext = {domainObject: mockDomainObject, event: mockEvent};
+                mockDomainObject.getCapability.andReturn(mockContextMenuAction);
+                mockContextMenuAction.perform.andReturn(jasmine.any(Function));
+                mockAgentService.isMobile.andReturn(false);
+                
                 
                 gesture = new ContextMenuGesture(mockTimeout, mockAgentService, mockElement, mockDomainObject);
 
@@ -57,6 +77,8 @@ define(
             });
 
             it("attaches a callback for context menu events", function () {
+                // Fire a click and expect it to happen
+                fireGesture();
                 expect(mockElement.on).toHaveBeenCalledWith(
                     "contextmenu",
                     jasmine.any(Function)
@@ -75,12 +97,32 @@ define(
                 );
             });
             
-            it("mobile", function () {
+            it("attaches a callback for context menu events on mobile", function () {
+                // Mock touch event and set to mobile device
+                mockTouchEvent = jasmine.createSpyObj("event", ["preventDefault", "touches"]);
+                mockTouch = jasmine.createSpyObj("touch", ["length"]);
+                mockTouch.length = 1;
+                mockTouchEvent.touches.andReturn(mockTouch);
                 mockAgentService.isMobile.andReturn(true);
+                
+                // Then create new (mobile) gesture
                 gesture = new ContextMenuGesture(mockTimeout, mockAgentService, mockElement, mockDomainObject);
                 
-                // Capture the contextmenu callback
-                fireGesture =  mockElement.on.mostRecentCall.args[1];
+                // Set calls for the touchstart and touchend gestures
+                fireTouchStartGesture = mockElement.on.calls[1].args[1];
+                fireTouchEndGesture =  mockElement.on.mostRecentCall.args[1];
+                
+                // Fire touchstart and expect touch start to begin
+                fireTouchStartGesture(mockTouchEvent);
+                expect(mockElement.on).toHaveBeenCalledWith(
+                    "touchstart",
+                    jasmine.any(Function)
+                );
+                
+                // Expect timeout to begin and then fireTouchEnd
+                expect(mockTimeout).toHaveBeenCalled();
+                mockTimeout.mostRecentCall.args[0]();
+                fireTouchEndGesture(mockTouchEvent);
             });
         });
     }

From 7ca15a9de2343463bef6b3870da3d3997d1eeaee Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 6 Aug 2015 14:11:59 -0700
Subject: [PATCH 140/266] [Mobile] Representation

Edited grid item to center
shared button.
---
 .../browse/res/templates/items/grid-item.html |  4 ++--
 platform/commonUI/general/res/css/items.css   | 20 ++++++++++++-------
 .../general/res/sass/mobile/_item.scss        |  7 +++++++
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html
index 2a1cc38f00..175a47e055 100644
--- a/platform/commonUI/browse/res/templates/items/grid-item.html
+++ b/platform/commonUI/browse/res/templates/items/grid-item.html
@@ -26,7 +26,7 @@
             <div class='left abs'>
                 <mct-include key="_checkbox"></mct-include>
             </div>
-            <div class='right abs'>
+            <div class='right abs mobile-right'>
                 <div class='ui-symbol icon alert hidden' onclick="alert('Not yet functional. When this is visible, it means that this object needs to be updated. Clicking will allow that action via a dialog.');">!</div>
                 <div class='ui-symbol icon profile' title="Shared">P</div>
             </div>
@@ -44,7 +44,7 @@
             </div>
         </div>
     </div>
-    <div class="contents abs mobile-info">
+    <div class="contents abs mobile-info desktop-hide">
         <mct-representation class="contents abs btn s-very-subtle desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
     </div>
 </div>
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index d669127598..3457e4f0b3 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -402,16 +402,19 @@
     width: 100%;
     height: 50px; }
     /* line 74, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .mobile-right {
+      top: 100%; }
+    /* line 77, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .mobile-info {
       line-height: 25px; }
-    /* line 78, ../sass/mobile/_item.scss */
+    /* line 81, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       line-height: 40px; }
-    /* line 82, ../sass/mobile/_item.scss */
+    /* line 85, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 25px; }
-    /* line 86, ../sass/mobile/_item.scss */
+    /* line 89, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
@@ -420,18 +423,21 @@
   .items-holder .item.grid-item {
     width: 100%;
     height: 66.66667px; }
-    /* line 96, ../sass/mobile/_item.scss */
+    /* line 99, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .mobile-right {
+      top: 100%; }
+    /* line 103, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .mobile-info {
       line-height: 38px; }
-    /* line 100, ../sass/mobile/_item.scss */
+    /* line 107, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       font-size: 30px;
       line-height: 50px; }
-    /* line 105, ../sass/mobile/_item.scss */
+    /* line 112, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .title {
       margin-right: 10px;
       line-height: 38px; }
-    /* line 109, ../sass/mobile/_item.scss */
+    /* line 116, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .details {
       margin-right: 10px;
       line-height: 0px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 4db43b885b..88f08cb343 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -71,6 +71,9 @@
                 $dHei: $phone-itemHeight;
                 width: $dWid;
                 height: $dHei;
+                .mobile-right {
+                    top: 100%;
+                }
                 .mobile-info {
                     line-height: $phone-itemHeight * .5;
                 }
@@ -93,6 +96,10 @@
                 $dHei: $tablet-itemHeight;
                 width: $dWid;
                 height: $dHei;
+                .mobile-right {
+                    top: 100%;
+                }
+                
                 .mobile-info {
                     line-height: $tablet-itemHeight * .57;
                 }

From 3484b315cf09d1eeed586080772efbbb0d5363e2 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 20 Aug 2015 16:09:35 -0700
Subject: [PATCH 141/266] [Mobile] Sanding of mobile styles, cherry-pick to
 master

open #74
CSS and markup changes for mobile
that are good for master now;
---
 .../browse/res/templates/items/grid-item.html |  23 +-
 platform/commonUI/general/res/css/forms.css   |   6 +-
 platform/commonUI/general/res/css/items.css   | 197 +++++----
 .../general/res/css/theme-espresso.css        | 158 ++++---
 platform/commonUI/general/res/css/tree.css    |  58 ++-
 .../general/res/fonts/symbols/wtdsymbols.eot  | Bin 11016 -> 11268 bytes
 .../general/res/fonts/symbols/wtdsymbols.svg  |   2 +
 .../general/res/fonts/symbols/wtdsymbols.ttf  | Bin 10840 -> 11092 bytes
 .../general/res/fonts/symbols/wtdsymbols.woff | Bin 10916 -> 11168 bytes
 .../commonUI/general/res/sass/_constants.scss |   1 +
 .../commonUI/general/res/sass/_icons.scss     |   8 +-
 .../commonUI/general/res/sass/_mixins.scss    | 401 +++++++++---------
 .../general/res/sass/controls/_controls.scss  |   1 -
 .../general/res/sass/items/_item.scss         |  24 +-
 .../commonUI/general/res/sass/tree/_tree.scss |  12 +-
 15 files changed, 448 insertions(+), 443 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html
index d27d088ee1..246a7b54b4 100644
--- a/platform/commonUI/browse/res/templates/items/grid-item.html
+++ b/platform/commonUI/browse/res/templates/items/grid-item.html
@@ -20,26 +20,21 @@
  at runtime from the About dialog for additional information.
 -->
 <!-- For selected, add class 'selected' to outer div -->
-<div class='item grid-item'>
-    <div class="contents abs mobile-grid-nav" ng-click='action.perform("navigate")'>
+<div class='item grid-item' ng-click='action.perform("navigate")'>
+    <div class='contents abs'>
         <div class='top-bar bar abs'>
-            <div class='left abs'>
-                <mct-include key="_checkbox"></mct-include>
-            </div>
-            <div class='right abs mobile-right'>
-                <div class='ui-symbol icon alert hidden' onclick="alert('Not yet functional. When this is visible, it means that this object needs to be updated. Clicking will allow that action via a dialog.');">!</div>
-                <div class='ui-symbol icon profile' title="Shared">P</div>
-            </div>
+            <div class='ui-symbol profile' title='Shared'>&#x4f;</div>
+            <!--mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation-->
         </div>
         <div class='item-main abs'>
             <div class='ui-symbol icon lg item-type'>
                 {{type.getGlyph()}}
                 <span
-                    class="ui-symbol icon l-icon-link" title="This object is a link"
+                    class="ui-symbol l-icon-link" title="This object is a link"
                     ng-show="location.isLink()"
                     ></span>
             </div>
-            <div class='ui-symbol icon abs item-open'>}</div>
+            <div class='ui-symbol abs item-open'>}</div>
         </div>
         <div class='bottom-bar bar abs'>
             <div class='title'>{{model.name}}</div>
@@ -47,10 +42,10 @@
                 <span ng-show="model.composition !== undefined">
                     {{model.composition.length}} Items
                 </span>
+                <span ng-show="model.composition == undefined">
+                    {{model.name}}
+                </span>
             </div>
         </div>
     </div>
-    <div class="contents abs mobile-info desktop-hide">
-        <mct-representation class="contents abs btn s-very-subtle desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
-    </div>
 </div>
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 7b9fa40b87..34a14c0107 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -433,7 +433,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 163, ../sass/_mixins.scss */
+  /* line 167, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -442,10 +442,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 166, ../sass/_mixins.scss */
+    /* line 170, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 171, ../sass/_mixins.scss */
+  /* line 175, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 620ed931bc..af2c481a59 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -185,7 +185,7 @@
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 163, ../sass/_mixins.scss */
+    /* line 167, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -194,15 +194,15 @@
       background-image: -webkit-linear-gradient(#707070, #636363);
       background-image: linear-gradient(#707070, #636363);
       color: #bdbdbd; }
-      /* line 166, ../sass/_mixins.scss */
+      /* line 170, ../sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
         color: #949494; }
-    /* line 171, ../sass/_mixins.scss */
+    /* line 175, ../sass/_mixins.scss */
     .items-holder .item.grid-item.btn-menu .invoke-menu {
       color: #828282; }
     /* line 46, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
-      color: #0099cc !important; }
+      color: deepskyblue !important; }
       /* line 48, ../sass/items/_item.scss */
       .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
         color: #49dedb; }
@@ -211,35 +211,35 @@
       opacity: 1; }
     /* line 57, ../sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
-      top: 5px;
-      right: 5px;
-      bottom: 5px;
-      left: 5px; }
-    /* line 61, ../sass/items/_item.scss */
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      left: 10px; }
+    /* line 63, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar.abs {
       bottom: auto;
       height: 20px;
       line-height: 20px;
+      text-align: right;
       z-index: 5; }
-      /* line 66, ../sass/items/_item.scss */
+      /* line 69, ../sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
         width: auto; }
-        /* line 68, ../sass/items/_item.scss */
+        /* line 71, ../sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
           margin-left: 3px; }
-          /* line 70, ../sass/items/_item.scss */
+          /* line 73, ../sass/items/_item.scss */
           .items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-icon-link {
             color: #49dedb; }
-    /* line 76, ../sass/items/_item.scss */
+    /* line 79, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar.abs {
       top: auto;
-      height: 30px;
-      padding: 5px; }
-    /* line 82, ../sass/items/_item.scss */
+      height: 30px; }
+    /* line 84, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 88, ../sass/items/_item.scss */
+      /* line 90, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         overflow: false;
         position: absolute;
@@ -249,24 +249,23 @@
         left: 40px;
         width: auto;
         height: auto;
-        color: #737373;
         text-align: center;
         font-size: 96.9px;
         line-height: 102px;
         bottom: auto;
         height: 102px;
         top: 30px; }
-        /* line 100, ../sass/items/_item.scss */
+        /* line 102, ../sass/items/_item.scss */
         .items-holder .item.grid-item .item-main .item-type .l-icon-link {
-          color: #1a8e8b;
-          height: 36px;
-          line-height: 36px;
+          color: #49dedb;
+          height: auto;
+          line-height: 100%;
           position: absolute;
-          font-size: 32px;
+          font-size: 0.3em;
           left: 0px;
           bottom: 10px;
           z-index: 2; }
-      /* line 112, ../sass/items/_item.scss */
+      /* line 115, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -286,13 +285,13 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 124, ../sass/items/_item.scss */
+    /* line 127, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
-      color: #cccccc;
       overflow: hidden;
+      text-overflow: ellipsis;
       white-space: nowrap;
-      text-overflow: ellipsis; }
+      color: #cccccc; }
     /* line 132, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
@@ -318,7 +317,7 @@
       color: #999;
       display: inline-block;
       color: #80dfff; }
-      /* line 163, ../sass/_mixins.scss */
+      /* line 167, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):hover {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
@@ -327,10 +326,10 @@
         background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
         background-image: linear-gradient(#2ecbff, #14c4ff);
         color: #bdbdbd; }
-        /* line 166, ../sass/_mixins.scss */
+        /* line 170, ../sass/_mixins.scss */
         .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
           color: #75ddff; }
-      /* line 171, ../sass/_mixins.scss */
+      /* line 175, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
       /* line 140, ../sass/items/_item.scss */
@@ -368,82 +367,82 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 34, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .mobile-grid-nav {
-    top: 0px;
-    bottom: 0px;
-    right: 55px; }
-  /* line 39, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .mobile-info {
-    text-align: center;
-    width: 50px;
-    right: 0px;
-    left: auto;
-    font-size: 1.3em; }
-  /* line 47, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .bar.bottom-bar.abs {
-    top: 0px;
-    height: auto; }
-  /* line 54, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .item-main .item-type {
-    font-size: 30px;
-    top: 0px;
-    left: 0px;
-    text-align: left;
-    height: auto; }
-  /* line 61, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .item-main .item-open {
-    display: none; }
-  /* line 65, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item .title, .items-holder .item.grid-item .details {
-    margin-left: 30px; } }
+  /* line 29, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    width: 100%; }
+    /* line 33, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item > .contents {
+      top: 0px;
+      right: 10px;
+      bottom: 0px;
+      left: 10px; }
+    /* line 37, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      bottom: 0 !important;
+      left: auto !important;
+      right: 20px !important;
+      width: 40px !important;
+      height: auto !important;
+      text-align: right; }
+    /* line 44, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      left: 40px;
+      right: 60px; }
+    /* line 52, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      font-size: 30px;
+      right: auto;
+      bottom: auto;
+      left: 0;
+      line-height: 100%;
+      text-align: left;
+      width: 30px; }
+      /* line 61, ../sass/mobile/_item.scss */
+      .items-holder .item.grid-item .item-main .item-type .l-icon-link {
+        bottom: 0; }
+    /* line 65, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      display: block;
+      opacity: 1;
+      font-size: 1em;
+      width: auto; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
-    width: 100%;
     height: 50px; }
-    /* line 74, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .mobile-right {
-      top: 100%; }
-    /* line 77, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .mobile-info {
-      line-height: 25px; }
-    /* line 81, ../sass/mobile/_item.scss */
+    /* line 78, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      line-height: 50px !important; }
+    /* line 82, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: 7px !important;
+      bottom: auto;
+      height: 35px; }
+    /* line 87, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      line-height: 40px; }
-    /* line 85, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .title {
-      margin-right: 10px;
-      line-height: 25px; }
-    /* line 89, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .details {
-      margin-right: 10px;
-      line-height: 0px; } }
+      top: 10px !important;
+      bottom: auto;
+      height: 30px; }
+    /* line 90, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      line-height: 50px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 29, ../sass/mobile/_item.scss */
   .items-holder .item.grid-item {
-    width: 100%;
-    height: 66.66667px; }
-    /* line 99, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .mobile-right {
-      top: 100%; }
-    /* line 103, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .mobile-info {
-      line-height: 38px; }
-    /* line 107, ../sass/mobile/_item.scss */
+    height: 66px; }
+    /* line 100, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      line-height: 66px !important; }
+    /* line 104, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: 15px !important;
+      bottom: auto;
+      height: 35px; }
+    /* line 109, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      font-size: 30px;
-      line-height: 50px; }
+      top: 18px !important;
+      bottom: auto;
+      height: 30px; }
     /* line 112, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .title {
-      margin-right: 10px;
-      line-height: 38px; }
-    /* line 116, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .details {
-      margin-right: 10px;
-      line-height: 0px; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 29, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item {
-    width: 200px;
-    height: 200px; } }
+    .items-holder .item.grid-item .item-main .item-open {
+      line-height: 66px; } }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c38a68b58f..c0444d9990 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -1292,7 +1292,7 @@ mct-container {
     font-size: 1.65em; }
 
 /* line 48, ../sass/_icons.scss */
-.bar .icon {
+.bar .ui-symbol {
   display: inline-block; }
 
 /* line 52, ../sass/_icons.scss */
@@ -1311,10 +1311,6 @@ mct-container {
 .super-menu.menu .type-icon {
   position: absolute; }
 
-/* line 68, ../sass/_icons.scss */
-.tree-item .type-icon {
-  font-size: 16px; }
-
 /* line 72, ../sass/_icons.scss */
 .l-icon-link:before {
   content: "\f4"; }
@@ -1769,7 +1765,7 @@ table {
     color: #999;
     display: inline-block;
     color: #ccf2ff; }
-    /* line 163, ../sass/_mixins.scss */
+    /* line 167, ../sass/_mixins.scss */
     .btn.major:not(.disabled):hover,
     .s-btn.major:not(.disabled):hover,
     .major.icon-btn:not(.disabled):hover,
@@ -1781,13 +1777,13 @@ table {
       background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
       background-image: linear-gradient(#2ecbff, #14c4ff);
       color: #bdbdbd; }
-      /* line 166, ../sass/_mixins.scss */
+      /* line 170, ../sass/_mixins.scss */
       .btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.major:not(.disabled):hover.btn-menu .invoke-menu,
       .major.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .major.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #75ddff; }
-    /* line 171, ../sass/_mixins.scss */
+    /* line 175, ../sass/_mixins.scss */
     .btn.major.btn-menu .invoke-menu,
     .s-btn.major.btn-menu .invoke-menu,
     .major.btn-menu.icon-btn .invoke-menu,
@@ -1817,7 +1813,7 @@ table {
       border-top: 1px solid #2ecbff;
       color: #ccf2ff;
       display: inline-block; }
-      /* line 163, ../sass/_mixins.scss */
+      /* line 167, ../sass/_mixins.scss */
       .btn.major:hover:not(.disabled):hover,
       .s-btn.major:hover:not(.disabled):hover,
       .major.icon-btn:hover:not(.disabled):hover,
@@ -1829,13 +1825,13 @@ table {
         background-image: -webkit-linear-gradient(#47d1ff, #2ecbff);
         background-image: linear-gradient(#47d1ff, #2ecbff);
         color: white; }
-        /* line 166, ../sass/_mixins.scss */
+        /* line 170, ../sass/_mixins.scss */
         .btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu,
         .major.s-icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu {
           color: #8fe3ff; }
-      /* line 171, ../sass/_mixins.scss */
+      /* line 175, ../sass/_mixins.scss */
       .btn.major:hover.btn-menu .invoke-menu,
       .s-btn.major:hover.btn-menu .invoke-menu,
       .major.icon-btn:hover.btn-menu .invoke-menu,
@@ -1871,7 +1867,7 @@ table {
     border-top: 1px solid #8a8a8a;
     color: #cccccc;
     display: inline-block; }
-    /* line 163, ../sass/_mixins.scss */
+    /* line 167, ../sass/_mixins.scss */
     .btn.subtle:not(.disabled):hover,
     .s-btn.subtle:not(.disabled):hover,
     .subtle.icon-btn:not(.disabled):hover,
@@ -1883,13 +1879,13 @@ table {
       background-image: -webkit-linear-gradient(#969696, #8a8a8a);
       background-image: linear-gradient(#969696, #8a8a8a);
       color: #f0f0f0; }
-      /* line 166, ../sass/_mixins.scss */
+      /* line 170, ../sass/_mixins.scss */
       .btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #bababa; }
-    /* line 171, ../sass/_mixins.scss */
+    /* line 175, ../sass/_mixins.scss */
     .btn.subtle.btn-menu .invoke-menu,
     .s-btn.subtle.btn-menu .invoke-menu,
     .subtle.btn-menu.icon-btn .invoke-menu,
@@ -1922,7 +1918,7 @@ table {
     border-top: 1px solid #575757;
     color: #999;
     display: inline-block; }
-    /* line 163, ../sass/_mixins.scss */
+    /* line 167, ../sass/_mixins.scss */
     .btn.very-subtle:not(.disabled):hover, .btn.s-very-subtle:not(.disabled):hover,
     .s-btn.very-subtle:not(.disabled):hover,
     .very-subtle.icon-btn:not(.disabled):hover,
@@ -1937,7 +1933,7 @@ table {
       background-image: -webkit-linear-gradient(#636363, #575757);
       background-image: linear-gradient(#636363, #575757);
       color: #bdbdbd; }
-      /* line 166, ../sass/_mixins.scss */
+      /* line 170, ../sass/_mixins.scss */
       .btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .s-btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
       .very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -1946,7 +1942,7 @@ table {
       .s-very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
       .s-very-subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
         color: #878787; }
-    /* line 171, ../sass/_mixins.scss */
+    /* line 175, ../sass/_mixins.scss */
     .btn.very-subtle.btn-menu .invoke-menu, .btn.s-very-subtle.btn-menu .invoke-menu,
     .s-btn.very-subtle.btn-menu .invoke-menu,
     .very-subtle.btn-menu.icon-btn .invoke-menu,
@@ -1982,7 +1978,7 @@ table {
       border-top: 1px solid #fe9510;
       color: #fff;
       display: inline-block; }
-      /* line 163, ../sass/_mixins.scss */
+      /* line 167, ../sass/_mixins.scss */
       .btn.very-subtle.paused:not(.disabled):hover, .btn.s-very-subtle.paused:not(.disabled):hover,
       .s-btn.very-subtle.paused:not(.disabled):hover,
       .very-subtle.paused.icon-btn:not(.disabled):hover,
@@ -1997,7 +1993,7 @@ table {
         background-image: -webkit-linear-gradient(#fea029, #fe9510);
         background-image: linear-gradient(#fea029, #fe9510);
         color: white; }
-        /* line 166, ../sass/_mixins.scss */
+        /* line 170, ../sass/_mixins.scss */
         .btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .s-btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
         .very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
@@ -2006,7 +2002,7 @@ table {
         .s-very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
         .s-very-subtle.paused.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
           color: #fec070; }
-      /* line 171, ../sass/_mixins.scss */
+      /* line 175, ../sass/_mixins.scss */
       .btn.very-subtle.paused.btn-menu .invoke-menu, .btn.s-very-subtle.paused.btn-menu .invoke-menu,
       .s-btn.very-subtle.paused.btn-menu .invoke-menu,
       .very-subtle.paused.btn-menu.icon-btn .invoke-menu,
@@ -2351,13 +2347,13 @@ label.checkbox.custom {
   padding-left: 19px;
   position: relative;
   vertical-align: top; }
-  /* line 205, ../sass/controls/_controls.scss */
+  /* line 204, ../sass/controls/_controls.scss */
   label.checkbox.custom em {
     color: #999;
     display: inline-block;
     height: 14px;
     min-width: 14px; }
-    /* line 210, ../sass/controls/_controls.scss */
+    /* line 209, ../sass/controls/_controls.scss */
     label.checkbox.custom em:before {
       -moz-border-radius: 1.5px;
       -webkit-border-radius: 1.5px;
@@ -2376,51 +2372,51 @@ label.checkbox.custom {
       top: 0;
       position: absolute;
       text-align: center; }
-  /* line 228, ../sass/controls/_controls.scss */
+  /* line 227, ../sass/controls/_controls.scss */
   label.checkbox.custom.no-text {
     overflow: hidden;
     margin-right: 0;
     padding-left: 0;
     height: 14px;
     width: 14px; }
-    /* line 234, ../sass/controls/_controls.scss */
+    /* line 233, ../sass/controls/_controls.scss */
     label.checkbox.custom.no-text em {
       overflow: hidden; }
-  /* line 238, ../sass/controls/_controls.scss */
+  /* line 237, ../sass/controls/_controls.scss */
   label.checkbox.custom input {
     display: none; }
-    /* line 240, ../sass/controls/_controls.scss */
+    /* line 239, ../sass/controls/_controls.scss */
     label.checkbox.custom input:checked ~ em:before {
       background: #0099cc;
       color: #ccf2ff;
       content: "2"; }
 
-/* line 248, ../sass/controls/_controls.scss */
+/* line 247, ../sass/controls/_controls.scss */
 .input-labeled {
   margin-left: 5px; }
-  /* line 250, ../sass/controls/_controls.scss */
+  /* line 249, ../sass/controls/_controls.scss */
   .input-labeled label {
     display: inline-block;
     margin-right: 3px; }
-  /* line 254, ../sass/controls/_controls.scss */
+  /* line 253, ../sass/controls/_controls.scss */
   .input-labeled.inline {
     display: inline-block; }
-  /* line 257, ../sass/controls/_controls.scss */
+  /* line 256, ../sass/controls/_controls.scss */
   .input-labeled:first-child {
     margin-left: 0; }
 
-/* line 262, ../sass/controls/_controls.scss */
+/* line 261, ../sass/controls/_controls.scss */
 .btn-menu label.checkbox.custom {
   margin-left: 5px; }
 
-/* line 267, ../sass/controls/_controls.scss */
+/* line 266, ../sass/controls/_controls.scss */
 .item .checkbox.checked label {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   border-bottom: none; }
 
-/* line 273, ../sass/controls/_controls.scss */
+/* line 272, ../sass/controls/_controls.scss */
 .btn-menu {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2458,7 +2454,7 @@ label.checkbox.custom {
   			color: lighten($c, 10%);
   		}
   	}*/ }
-  /* line 163, ../sass/_mixins.scss */
+  /* line 167, ../sass/_mixins.scss */
   .btn-menu:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2467,37 +2463,37 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 166, ../sass/_mixins.scss */
+    /* line 170, ../sass/_mixins.scss */
     .btn-menu:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 171, ../sass/_mixins.scss */
+  /* line 175, ../sass/_mixins.scss */
   .btn-menu.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 285, ../sass/controls/_controls.scss */
+  /* line 284, ../sass/controls/_controls.scss */
   .btn-menu:not(.disabled):hover {
     color: #cccccc; }
-  /* line 310, ../sass/controls/_controls.scss */
+  /* line 309, ../sass/controls/_controls.scss */
   .btn-menu .name {
     margin-left: 5px; }
-  /* line 313, ../sass/controls/_controls.scss */
+  /* line 312, ../sass/controls/_controls.scss */
   .btn-menu .menu {
     position: absolute;
     left: 0;
     text-align: left; }
-    /* line 318, ../sass/controls/_controls.scss */
+    /* line 317, ../sass/controls/_controls.scss */
     .btn-menu .menu .ui-symbol.icon {
       width: 12px; }
 
-/* line 324, ../sass/controls/_controls.scss */
+/* line 323, ../sass/controls/_controls.scss */
 .top-bar .btn-menu {
   height: 25px;
   line-height: 25px;
   padding-right: 10px; }
-  /* line 332, ../sass/controls/_controls.scss */
+  /* line 331, ../sass/controls/_controls.scss */
   .top-bar .btn-menu.browse-btn {
     margin-right: 5px;
     padding-left: 25px; }
-    /* line 335, ../sass/controls/_controls.scss */
+    /* line 334, ../sass/controls/_controls.scss */
     .top-bar .btn-menu.browse-btn .badge {
       -moz-border-radius: 4.5px;
       -webkit-border-radius: 4.5px;
@@ -2513,14 +2509,14 @@ label.checkbox.custom {
       width: 15px;
       height: auto; }
 
-/* line 351, ../sass/controls/_controls.scss */
+/* line 350, ../sass/controls/_controls.scss */
 .context-available {
   color: #0099cc; }
-  /* line 355, ../sass/controls/_controls.scss */
+  /* line 354, ../sass/controls/_controls.scss */
   .context-available:hover {
     color: deepskyblue; }
 
-/* line 360, ../sass/controls/_controls.scss */
+/* line 359, ../sass/controls/_controls.scss */
 .view-switcher {
   -moz-transition-property: visibility, opacity, background-color, border-color;
   -o-transition-property: visibility, opacity, background-color, border-color;
@@ -2536,37 +2532,37 @@ label.checkbox.custom {
   transition-timing-function: ease-in-out; }
 
 /******************************************************** OBJECT-HEADER */
-/* line 365, ../sass/controls/_controls.scss */
+/* line 364, ../sass/controls/_controls.scss */
 .object-header {
   display: inline-block;
   font-size: 1em; }
-  /* line 369, ../sass/controls/_controls.scss */
+  /* line 368, ../sass/controls/_controls.scss */
   .object-header .label .title-label {
     color: white; }
-  /* line 372, ../sass/controls/_controls.scss */
+  /* line 371, ../sass/controls/_controls.scss */
   .object-header .label .type-icon {
     font-size: 120%;
     margin-right: 5px;
     vertical-align: middle; }
-  /* line 377, ../sass/controls/_controls.scss */
+  /* line 376, ../sass/controls/_controls.scss */
   .object-header .label .context-available {
     opacity: 0;
     font-size: 0.8em; }
-  /* line 382, ../sass/controls/_controls.scss */
+  /* line 381, ../sass/controls/_controls.scss */
   .object-header .label:hover .context-available {
     opacity: 1; }
 
-/* line 391, ../sass/controls/_controls.scss */
+/* line 390, ../sass/controls/_controls.scss */
 .top-bar .object-header,
 .object-browse-bar .object-header {
   font-size: 1.1em; }
-  /* line 393, ../sass/controls/_controls.scss */
+  /* line 392, ../sass/controls/_controls.scss */
   .top-bar .object-header span,
   .object-browse-bar .object-header span {
     display: inline-block; }
 
 /******************************************************** SLIDERS */
-/* line 405, ../sass/controls/_controls.scss */
+/* line 404, ../sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2587,7 +2583,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 416, ../sass/controls/_controls.scss */
+/* line 415, ../sass/controls/_controls.scss */
 .slider .knob {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2616,7 +2612,7 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 163, ../sass/_mixins.scss */
+  /* line 167, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2625,13 +2621,13 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 166, ../sass/_mixins.scss */
+    /* line 170, ../sass/_mixins.scss */
     .slider .knob:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 171, ../sass/_mixins.scss */
+  /* line 175, ../sass/_mixins.scss */
   .slider .knob.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 187, ../sass/_mixins.scss */
+  /* line 191, ../sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2655,7 +2651,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 209, ../sass/_mixins.scss */
+  /* line 213, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2670,12 +2666,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 427, ../sass/controls/_controls.scss */
+  /* line 426, ../sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 434, ../sass/controls/_controls.scss */
+/* line 433, ../sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2686,12 +2682,12 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 444, ../sass/controls/_controls.scss */
+  /* line 443, ../sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
-/* line 452, ../sass/controls/_controls.scss */
+/* line 451, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2708,7 +2704,7 @@ label.checkbox.custom {
   height: 10px;
   width: 10px; }
 
-/* line 458, ../sass/controls/_controls.scss */
+/* line 457, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-thumb {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2726,7 +2722,7 @@ label.checkbox.custom {
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   border-top: 1px solid gray; }
-  /* line 465, ../sass/controls/_controls.scss */
+  /* line 464, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb:hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2735,7 +2731,7 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#808080, #737373 20px);
     background-image: linear-gradient(#808080, #737373 20px); }
 
-/* line 470, ../sass/controls/_controls.scss */
+/* line 469, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-corner {
   background: rgba(0, 0, 0, 0.4); }
 
@@ -2827,14 +2823,14 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 171, ../sass/_mixins.scss */
+    /* line 175, ../sass/_mixins.scss */
     .menu-element .menu.btn-menu .invoke-menu {
       color: #828282; }
     /* line 37, ../sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 309, ../sass/_mixins.scss */
+      /* line 314, ../sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2885,7 +2881,7 @@ label.checkbox.custom {
     border-top: 1px solid #919191;
     color: #999;
     display: inline-block; }
-    /* line 171, ../sass/_mixins.scss */
+    /* line 175, ../sass/_mixins.scss */
     .menu-element .context-menu.btn-menu .invoke-menu,
     .menu-element .super-menu.btn-menu .invoke-menu {
       color: #b0b0b0; }
@@ -3711,7 +3707,7 @@ input[type="text"] {
   color: #cccccc;
   outline: none;
   padding: 0 3px; }
-  /* line 275, ../sass/_mixins.scss */
+  /* line 280, ../sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
   /* line 29, ../sass/forms/_text-input.scss */
@@ -3765,7 +3761,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 163, ../sass/_mixins.scss */
+  /* line 167, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -3774,10 +3770,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 166, ../sass/_mixins.scss */
+    /* line 170, ../sass/_mixins.scss */
     .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
       color: #878787; }
-  /* line 171, ../sass/_mixins.scss */
+  /* line 175, ../sass/_mixins.scss */
   .form-control.select.btn-menu .invoke-menu {
     color: #757575; }
   /* line 29, ../sass/forms/_selects.scss */
@@ -3856,7 +3852,7 @@ input[type="text"] {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 275, ../sass/_mixins.scss */
+  /* line 280, ../sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../sass/forms/_channel-selector.scss */
@@ -3956,7 +3952,7 @@ input[type="text"] {
   padding: 0 3px;
   background: #3b3b3b;
   border-bottom: 1px solid #4d4d4d; }
-  /* line 275, ../sass/_mixins.scss */
+  /* line 280, ../sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -4394,7 +4390,7 @@ input[type="text"] {
   bottom: 15%;
   left: 15%;
   z-index: 101; }
-  /* line 171, ../sass/_mixins.scss */
+  /* line 175, ../sass/_mixins.scss */
   .overlay > .holder.btn-menu .invoke-menu {
     color: #757575; }
   /* line 45, ../sass/overlay/_overlay.scss */
@@ -4919,7 +4915,7 @@ input[type="text"] {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 187, ../sass/_mixins.scss */
+    /* line 191, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4943,7 +4939,7 @@ input[type="text"] {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 209, ../sass/_mixins.scss */
+    /* line 213, ../sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -4973,7 +4969,7 @@ input[type="text"] {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 187, ../sass/_mixins.scss */
+  /* line 191, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -4997,7 +4993,7 @@ input[type="text"] {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 209, ../sass/_mixins.scss */
+  /* line 213, ../sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index b80e1ff5f9..e6387a1cbe 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -152,7 +152,7 @@
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 309, ../sass/_mixins.scss */
+  /* line 314, ../sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -200,25 +200,23 @@ ul.tree {
         left: 15px; }
         /* line 60, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .type-icon {
-          overflow: false;
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          width: auto;
-          height: auto;
           text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
+          font-size: 16px;
           color: #0099cc;
           left: 5px;
+          position: absolute;
+          top: 4px !important;
+          bottom: auto;
+          height: 16px;
+          line-height: 100%;
           right: auto;
-          width: 1em; }
-          /* line 68, ../sass/tree/_tree.scss */
+          width: 16px; }
+          /* line 73, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
             text-shadow: black 0 1px 2px;
             position: absolute;
             z-index: 2; }
-          /* line 74, ../sass/tree/_tree.scss */
+          /* line 79, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
             color: #ff3c00;
             font-size: 8px;
@@ -227,7 +225,7 @@ ul.tree {
             width: 8px;
             top: 1px;
             right: -2px; }
-          /* line 80, ../sass/tree/_tree.scss */
+          /* line 85, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
             color: #49dedb;
             font-size: 8px;
@@ -235,8 +233,8 @@ ul.tree {
             height: 8px;
             width: 8px;
             left: -3px;
-            bottom: 5px; }
-        /* line 89, ../sass/tree/_tree.scss */
+            bottom: 0px; }
+        /* line 93, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           overflow: hidden;
           position: absolute;
@@ -251,53 +249,53 @@ ul.tree {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap; }
-      /* line 100, ../sass/tree/_tree.scss */
+      /* line 104, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.loading {
         pointer-events: none; }
-        /* line 102, ../sass/tree/_tree.scss */
+        /* line 106, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .label {
           opacity: 0.5; }
-          /* line 104, ../sass/tree/_tree.scss */
+          /* line 108, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item.loading .label .title-label {
             font-style: italic; }
-        /* line 108, ../sass/tree/_tree.scss */
+        /* line 112, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .wait-spinner {
           margin-left: 14px; }
-      /* line 113, ../sass/tree/_tree.scss */
+      /* line 117, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.selected {
         background: #005177;
         color: #fff; }
-        /* line 117, ../sass/tree/_tree.scss */
+        /* line 121, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .view-control {
           color: #0099cc; }
-        /* line 120, ../sass/tree/_tree.scss */
+        /* line 124, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .label .type-icon {
           color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 128, ../sass/tree/_tree.scss */
+        /* line 132, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item:not(.selected):hover {
           background: #404040;
           color: #cccccc; }
-          /* line 131, ../sass/tree/_tree.scss */
+          /* line 135, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .context-trigger {
             display: block; }
-          /* line 134, ../sass/tree/_tree.scss */
+          /* line 138, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .icon {
             color: #33ccff; } }
-      /* line 141, ../sass/tree/_tree.scss */
+      /* line 145, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item:not(.loading) {
         cursor: pointer; }
-      /* line 145, ../sass/tree/_tree.scss */
+      /* line 149, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .context-trigger {
         top: -1px;
         position: absolute;
         right: 3px; }
-        /* line 151, ../sass/tree/_tree.scss */
+        /* line 155, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .context-trigger .invoke-menu {
           font-size: 0.75em;
           height: 0.9rem;
           line-height: 0.9rem; }
-  /* line 160, ../sass/tree/_tree.scss */
+  /* line 164, ../sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
@@ -327,7 +325,7 @@ ul.tree {
   ul.tree {
     margin: 0;
     padding: 0; }
-    /* line 309, ../sass/_mixins.scss */
+    /* line 314, ../sass/_mixins.scss */
     ul.tree li {
       list-style-type: none;
       margin: 0;
diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
index 2f4f938076289ee0821dad90fe6140302391fa27..aaab92d345f6ad0d43369f6c3405c70236496808 100755
GIT binary patch
delta 510
zcmeAOYl&cE(P3Z+(Voa=#=^d-@AX87iS?)6A7@}-lmTL!^u*!<1_lNJ1_q`GAkC4U
zQ<-*o<Li4segXr7%7%>8#1wYX^G_KV)PZUk%rbxi><3sxfqV}jUnL{Aq{4}vMHtA>
z0h$+(lb@Ve`?@5Efk9&rP<~ZzVnqQ%5<@uygJuShuaK9Rn<^oH<!u~LpaZC3RY87n
z2?H}wib30Cat7l`MvlowOx?_`Qi7WgFa;~ui!dkxl_~KtiHgWE85`L#nVRS^DKoOG
zv#Xn{n~R%^vx_q^WbN(_2<YCO1)~`q8V($QBjy9hav(K-QRIPk10C@H01E^20S1tL
zzyO2Um<G2})JRNJgiTpV&D6xqSXj~2*i_k6QP5Zv({@vDZ&MIH@UNkvfziPM)BXmC
z0#k3GLmC?XGc-)*P`e=Wx^EMEJipCX25uHmcraZ2eRLCyp8Q44oH1mxj=DP|Bg5nz
ljn$G{1iuJz34tPw5r{(=N*Q=TiW!(DUt|*AY_EBe5dbtqmJa{`

delta 259
zcmZpP=m=xu&}LwW(3;3*#xhgzoYF*xiS@_cA7x-*lmTL!^u*!<1_lNJ1_q`GAkC4U
zQ<)ajeP=3=pTNMNd>|t=F@>GawUB{9O#vuxmH`xCKfodk<b%|!WaO4qSh0ioH9+$`
za`KZCv+I-87#P%#0OgnECRP+MBrudSFlgie`3iZ7xv3KJSKh_}1$uxQRu$wImoP8`
zr5Lm<CTB37WMrFc#MI5~EXBY108_B?WM=iFGD_zJXU6l}d}ZKf0V!m-_=BMWMo)gC
gZq69ASw_R1adNii67ETY4}emPKpeDLPU{&X06?xmBme*a

diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
index d31a879fc3..a6f2bae8ea 100755
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
@@ -83,6 +83,8 @@
 <glyph unicode="&#xe604;" glyph-name="icon-tabular" d="M0 896v-192h448v256h-384c-35.2 0-64-28.8-64-64zM960 960h-384v-256h448v192c0 35.2-28.8 64-64 64zM576 576h448v-256h-448v256zM0 576h448v-256h-448v256zM0 0c0-35.2 28.8-64 64-64h384v256h-448v-192zM576-64h384c35.2 0 64 28.8 64 64v192h-448v-256z" />
 <glyph unicode="&#xe605;" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
 <glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M896 320c0 0-130-188-128-256 2-70.6 57.4-128 128-128s126 57.4 128 128c2 68-128 256-128 256zM449 831l0.2 64.8c0 35.4-28.4 64-63.8 64.2 0 0-0.2 0-0.2 0-35.2 0-63.8-28.6-64-63.8l-0.6-190.8-294-292.6c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-447 447zM384 320c-70.6 0-128 57.4-128 128 0 47.4 25.8 89 64.4 111l-0.4-110.8c0-35.4 28.4-64 63.8-64.2 0 0 0.2 0 0.2 0 35.2 0 63.8 28.6 64 63.8l0.4 110.8c38-22.2 63.6-63.4 63.6-110.6 0-70.6-57.4-128-128-128z" />
+<glyph unicode="&#xe607;" glyph-name="icon-x-in-circle-heavy" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
+<glyph unicode="&#xe608;" glyph-name="icon-info" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 832c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 128h-384v128h128v128h-128v128h320v-256h64v-128z" />
 <glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
 <glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
index 37af03fa794efb79373c205f3fe8cea1d2a76f7c..f6cf40ef12a279d8cdaa2add220a6bd2e683761c 100755
GIT binary patch
delta 493
zcmcZ+awTknV*RQ2#~BzHWq{ZwJ+Ziefq_AQfq^LkNOPp;RHj|t`1&4@pTNMNvLPci
zF@;_9{8I)7b)XssvkagB`vDeFAm0PXSINjNsc>Rv5eD*efaV3{<R>TAzAg!3V9?kD
zlwXybSW&=`#8A$_pqT;WE952Srb@_Pc^d~5=m2V1Rghm?!oUoaV$e33xZ@-v$K)o)
zZe~|0!Oa3p!OHa_42nQiN_<SBB63W|Ms`f5CVEWDjO^;{>gMX^;^yM);!F%#ySoDd
zx_4*6Xhw&I0|(%U`2eyUNX=gqd7#xm`~M$cVPHPM0J2X9VPhKHN>L**Q4uy}B{fqM
zGh<;zQ)5$QQ$;~zQB2!Sy}eCA_`tu0h6Y9l2Tc1LAPP*qfevYC_|MQVIYRY<%<H~Q
z?D70IUm3VrK*7Oq@%Pb9FnY3!nmJ?0<{CA3Mn;Cod(>A;ZV~(<#3clZGe#f|VJKzb
S1u14=nyknqyt!ZFBqIQg)shMT

delta 242
zcmcZ-b|YkhV*RoAM;RCxWq{ZwJ+Ziefq_AQfq^LkNOPp;RHg-W-<b;JConK5AIL~e
zOkwA9Eo5L&Qvk}FWdH@(53mRW`5^Tw8M!4DR_tJY4bVJ~oc!d(?D`}%1_t#bK>204
zi4_G52@K^73>rB=zCvDNZmNX*mA7#~fgYfSRR#IQB@E0!DF!Wzi91d*vQ2Jc>}GbB
z;@>R56s$ZsSna5c(mBDI@%%Pl8Ms+M>KHEmV5or6lTFmk8G|<GsJk;x-mS5Ody?P-
PpcEqz2W`&Ne8va>^n5;H

diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
index c93e44215ce309336ac305b4a5b954dad544db38..aaf58a7f76fe5205d1dd0645d2cea7f03cb85da2 100755
GIT binary patch
delta 560
zcmZ1yx*%Mv+~3WOfsp|Sv==aNgXs_krpbv+ViR>#>rcHuo}O4-z`($?1SrJ;#RBO$
zm1#h+H4F?Y8$kH-#@F{UQWH}c7}R5cYRo{GUG)6Z44@!TYzmOC0>bPESVS{&ODce3
zI~W)k13=h`okch&KN+Y_6J-7>5Uzb)5|o=*QJ@19+yWF(0OKTv^1Q^{RG`=uphloV
z##QoH-o_Q=7ncBC-!SpdMMjRv=NP-$U8MvWm>C#>o^aW`go#_ZUW7prs9K4SNmN9R
z$=Jw_$<#!TNtuydon75r-CW#UoL!uWA!~PcKtT8IEEvt`&~V@Y95Ek2mIJBziy{wn
zAu|KR{{t)x%m)}i_5s}vv#}m-rKpjZs0f>~lA5WBnX#~<sj;cDsiL5<D5mYE-rlAl
zeBfV0Lj$9O1E&2A5Cx{*K!-Fm{AXxjV1he<iGh`Yfs;{CnUj%);os!Fs@r8=_ibX2
z=ePOFz|8`5D+9yD-$ysW=*bh*%o#&ApHOpWWMr7kp|P5Oi{KX_E};mZ0!APX*}PBV
G86yBHou5Ad

delta 298
zcmZ1wz9dwv+~3WOfsp|Sw3aY%gXstcrpbv+ViR>#>yN!Znx0r(z`($?1SrJ;#RBO$
zm1#h+H4F^O2S7Ne`_9yi)Wj492DKcZ8Z!`P=W{L0015)dKzda`nEe2Ya7J!P1yJk+
z0|TQ62wSnU2<PM{1J!8=0M#r5;q3Y(wcNyt0v({>4xoSn7$-24=OyN*0>y3sHLe0-
z`73YZ3i69ffUa+u_~#-c+vIbM-R#a%{0z(tj6hGgY+k~|tvq?Y+EE#$bAmJD`E9;3
waI*kSV_>-Wg8}Fc2tBz$-JCIK^A2@)#>woOOSmTqJ^;#qLM3SPF3o3*0JF<U1ONa4

diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 22518172da..aba4c8950d 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -147,6 +147,7 @@ $formLabelW: 20%;
 $formInputH: 22px;
 $formRowCtrlsH: 14px;
 $menuLineH: 1.5rem;
+$menuLineHPx: 24px;
 $scrollbarTrackSize: 10px;
 $scrollbarTrackColorBg: rgba(#000, 0.4);
 $btnStdH: 25px;
diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss
index e37aaba143..9c71b49331 100644
--- a/platform/commonUI/general/res/sass/_icons.scss
+++ b/platform/commonUI/general/res/sass/_icons.scss
@@ -45,7 +45,7 @@
 	}
 }
 
-.bar .icon {
+.bar .ui-symbol {
 	display: inline-block;
 }
 
@@ -65,9 +65,9 @@
 	position: absolute;
 }
 
-.tree-item .type-icon {
-	font-size: 16px; // 16px is crisp size
-}
+//.tree-item .type-icon {
+//	font-size: 16px; // 16px is crisp size
+//}
 
 .l-icon-link:before {
 	content: "\f4";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 4f2c1901af..c047c9582e 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -23,154 +23,158 @@
 @mixin absPosDefault($offset: 0px, $overflowHidden: hidden) {
     overflow: $overflowHidden;
     position: absolute;
-    top: $offset; right: $offset; bottom: $offset; left: $offset;
-    width: auto; height: auto;
+    top: $offset;
+    right: $offset;
+    bottom: $offset;
+    left: $offset;
+    width: auto;
+    height: auto;
 }
 
 @mixin ancillaryIcon($d, $c) {
-	// Used for small icons used in combination with larger icons,
-	// like the link and alert icons in tree items.
-	color: $c;
-	font-size: $d;
-	line-height: $d;
-	height: $d;
-	width: $d;
+    // Used for small icons used in combination with larger icons,
+    // like the link and alert icons in tree items.
+    color: $c;
+    font-size: $d;
+    line-height: $d;
+    height: $d;
+    width: $d;
 }
 
 @mixin trans-prop-nice($props, $t: 500ms) {
-	@if $t == 0 {
-		@include transition-property(none);
-	} @else {
-		@include transition-property($props);
-		@include transition-duration($t);
-		@include transition-timing-function(ease-in-out);
-	}
+    @if $t == 0 {
+        @include transition-property(none);
+    } @else {
+        @include transition-property($props);
+        @include transition-duration($t);
+        @include transition-timing-function(ease-in-out);
+    }
 }
 
 @mixin trans-prop-nice-fade($t: 0.5s) {
-	@if $t == 0 {
-		@include transition-property(none);
-	} @else {
-		@include transition-property(visibility, opacity, background-color, border-color);
-		@include transition-duration($t);
-		@include transition-timing-function(ease-in-out);
-	}
+    @if $t == 0 {
+        @include transition-property(none);
+    } @else {
+        @include transition-property(visibility, opacity, background-color, border-color);
+        @include transition-duration($t);
+        @include transition-timing-function(ease-in-out);
+    }
 }
 
 @mixin trans-prop-nice-resize-h($t: 0.5s) {
-	@include transition-property(height, bottom, top);
-	@include transition-duration($t);
-	@include transition-timing-function(ease-in-out);
+    @include transition-property(height, bottom, top);
+    @include transition-duration($t);
+    @include transition-timing-function(ease-in-out);
 }
 
 @mixin trans-prop-nice-resize-w($t: 0.5s) {
-	@include transition-property(width, left, right);
-	@include transition-duration($t);
-	@include transition-timing-function(ease-in-out);
+    @include transition-property(width, left, right);
+    @include transition-duration($t);
+    @include transition-timing-function(ease-in-out);
 }
 
 @mixin triangle-right($size, $color) {
-	$size: $size/2;
-	$ratio: 1;
-	width: 0;
-	height: 0;
-	border-top: $size/$ratio solid transparent;
-	border-left: $size solid $color;
-	border-bottom: $size/$ratio solid transparent;
+    $size: $size/2;
+    $ratio: 1;
+    width: 0;
+    height: 0;
+    border-top: $size/$ratio solid transparent;
+    border-left: $size solid $color;
+    border-bottom: $size/$ratio solid transparent;
 }
 
 @mixin triangle-down($size, $color) {
-	$size: $size/2;
-	$ratio: 1;
-	width: 0;
-	height: 0;
-	border-left: $size/$ratio solid transparent;
-	border-top: $size solid $color;
-	border-right: $size/$ratio solid transparent;
+    $size: $size/2;
+    $ratio: 1;
+    width: 0;
+    height: 0;
+    border-left: $size/$ratio solid transparent;
+    border-top: $size solid $color;
+    border-right: $size/$ratio solid transparent;
 }
 
 @mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
-	//$size: $size*2;
-	width: 0;
-	height: 0;
-	$slopedB: $size/$ratio solid transparent;
-	$straightB: $size solid $color;
-	@if $dir == "up" {
-		border-left: $slopedB;
-		border-right: $slopedB;
-		border-bottom: $straightB;
-	} @else if $dir == "right" {
-		border-top: $slopedB;
-		border-bottom: $slopedB;
-		border-left: $straightB;
-	} @else if $dir == "down"  {
-		border-left: $slopedB;
-		border-right: $slopedB;
-		border-top: $straightB;
-	} @else {
-		border-top: $slopedB;
-		border-bottom: $slopedB;
-		border-right: $straightB;
-	}
+    //$size: $size*2;
+    width: 0;
+    height: 0;
+    $slopedB: $size/$ratio solid transparent;
+    $straightB: $size solid $color;
+    @if $dir == "up" {
+        border-left: $slopedB;
+        border-right: $slopedB;
+        border-bottom: $straightB;
+    } @else if $dir == "right" {
+        border-top: $slopedB;
+        border-bottom: $slopedB;
+        border-left: $straightB;
+    } @else if $dir == "down" {
+        border-left: $slopedB;
+        border-right: $slopedB;
+        border-top: $straightB;
+    } @else {
+        border-top: $slopedB;
+        border-bottom: $slopedB;
+        border-right: $straightB;
+    }
 }
 
 @mixin bgDiagonalStripes($c: yellow, $a: 0.1, $d: 40px) {
-	@include background-image(linear-gradient(-45deg,
-		rgba($c, $a) 25%, transparent 25%,
-		transparent 50%, rgba($c, $a) 50%,
-		rgba($c, $a) 75%, transparent 75%,
-		transparent 100%
-	));
-	background-repeat: repeat;
-	background-size: $d $d;
+    @include background-image(linear-gradient(-45deg,
+        rgba($c, $a) 25%, transparent 25%,
+        transparent 50%, rgba($c, $a) 50%,
+        rgba($c, $a) 75%, transparent 75%,
+        transparent 100%
+    ));
+    background-repeat: repeat;
+    background-size: $d $d;
 }
 
 @mixin bgTicks($c: $colorBodyFg, $repeatDir: 'x') {
-	$deg: 90deg;
-	@if ($repeatDir != 'x') {
-		$deg: 0deg;
-		$repeatDir: repeat-y;
-	} @else {
-		$repeatDir: repeat-x;
-	}
+    $deg: 90deg;
+    @if ($repeatDir != 'x') {
+        $deg: 0deg;
+        $repeatDir: repeat-y;
+    } @else {
+        $repeatDir: repeat-x;
+    }
 
-	@include background-image(linear-gradient($deg,
-		$c 1px, transparent 1px,
-		transparent 100%
-	));
-	background-repeat: $repeatDir;
+    @include background-image(linear-gradient($deg,
+        $c 1px, transparent 1px,
+        transparent 100%
+    ));
+    background-repeat: $repeatDir;
 }
 
 @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
-	$ltnRatio: 7%;
-	$gradRatio: 5%;
-	$hovRatio: 7%;
-	$bgBase: lighten($bg, $ltnRatio);
-	$fgBase: lighten($fg, $ltnRatio);
-	$gradC1: lighten($bgBase, $gradRatio);
-	$gradC2: $bgBase;
-	$cInvokeBase: lighten($gradC1, $ltnRatio*2);
+    $ltnRatio: 7%;
+    $gradRatio: 5%;
+    $hovRatio: 7%;
+    $bgBase: lighten($bg, $ltnRatio);
+    $fgBase: lighten($fg, $ltnRatio);
+    $gradC1: lighten($bgBase, $gradRatio);
+    $gradC2: $bgBase;
+    $cInvokeBase: lighten($gradC1, $ltnRatio*2);
 
-	@include background-image(linear-gradient($gradC1, $gradC2));
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
-	@include boxShdwSubtle();
-	border: none;
-	border-top: 1px solid lighten($gradC1, 2%);
-	color: $fg;
-	display: inline-block;
-	@if $hover == true {
-		&:not(.disabled):hover {
-			@include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
-			color: lighten($fgBase, $hovRatio);
-			&.btn-menu .invoke-menu {
-				color: lighten($cInvokeBase, $hovRatio);
-			}
-		}
-	}
-	&.btn-menu .invoke-menu {
-		color: $cInvokeBase;
-	}
+    @include background-image(linear-gradient($gradC1, $gradC2));
+    @include border-radius($controlCr);
+    @include box-sizing(border-box);
+    @include boxShdwSubtle();
+    border: none;
+    border-top: 1px solid lighten($gradC1, 2%);
+    color: $fg;
+    display: inline-block;
+    @if $hover == true {
+        &:not(.disabled):hover {
+            @include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
+            color: lighten($fgBase, $hovRatio);
+            &.btn-menu .invoke-menu {
+                color: lighten($cInvokeBase, $hovRatio);
+            }
+        }
+    }
+    &.btn-menu .invoke-menu {
+        color: $cInvokeBase;
+    }
 }
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
@@ -184,45 +188,45 @@
 }
 
 @mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
-	&:before {
-		@include trans-prop-nice("border-color",0.75s);
-		content: '';
-		display: block;
-		height: auto;
-		pointer-events: none;
-		position: absolute;
-		z-index: 2;
+    &:before {
+        @include trans-prop-nice("border-color", 0.75s);
+        content: '';
+        display: block;
+        height: auto;
+        pointer-events: none;
+        position: absolute;
+        z-index: 2;
 
-		@if $direction == "horizontal" {
-			border-top: $w $style darken($b, 15%);
-			top: 2px;
-			left: 5px;
-			right: 5px;
+        @if $direction == "horizontal" {
+            border-top: $w $style darken($b, 15%);
+            top: 2px;
+            left: 5px;
+            right: 5px;
 
-		} @else if $direction == "vertical" {
-			border-left: $w $style darken($b, 15%);
-			left: 2px;
-			bottom: 5px;
-			top: 5px;
-		}
-	}
-	&:not(.disabled):hover:before {
-		@include trans-prop-nice("border-color",50ms);
-		border-color: $colorKey;
-	}
+        } @else if $direction == "vertical" {
+            border-left: $w $style darken($b, 15%);
+            left: 2px;
+            bottom: 5px;
+            top: 5px;
+        }
+    }
+    &:not(.disabled):hover:before {
+        @include trans-prop-nice("border-color", 50ms);
+        border-color: $colorKey;
+    }
 }
 
 @mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include containerSubtle($bg, $fg, true);
+    @include containerSubtle($bg, $fg, true);
 }
 
 @mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	// No longer should be used; use btnSubtle instead
-	//@include containerSubtle($bg, $fg, true);
-	//@include background-image(linear-gradient(lighten($bg, 20%), $bg));
-/*	&:not(.disabled):hover {
-		@include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
-	}*/
+    // No longer should be used; use btnSubtle instead
+    //@include containerSubtle($bg, $fg, true);
+    //@include background-image(linear-gradient(lighten($bg, 20%), $bg));
+    /*	&:not(.disabled):hover {
+            @include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
+        }*/
 }
 
 @mixin boxIncised($sVal: 0.6) {
@@ -238,59 +242,60 @@
 }
 
 @mixin boxShdwLarge($sVal: 0.7) {
-	@include box-shadow(rgba(black, $sVal) 0 3px 10px);
+    @include box-shadow(rgba(black, $sVal) 0 3px 10px);
 }
 
 @mixin outerGlow($color: #fff, $sVal: 0.3) {
-	@include box-shadow(rgba($color, $sVal) 0 0 30px);
+    @include box-shadow(rgba($color, $sVal) 0 0 30px);
 }
 
 @mixin linearGlow($deg: 0, $c: red, $a: 0.4) {
-    @include background-image(linear-gradient($deg, rgba($c,0), rgba($c, $a) 100%));
+    @include background-image(linear-gradient($deg, rgba($c, 0), rgba($c, $a) 100%));
 }
 
 @mixin subtleGrad($deg: 0, $c: red, $a0: 0.2, $a1: 0.3) {
-	@include background-image(linear-gradient($deg, rgba($c,$a0), rgba($c, $a1) 100%));
+    @include background-image(linear-gradient($deg, rgba($c, $a0), rgba($c, $a1) 100%));
 }
 
 @mixin txtShdwSubtle($sVal: 0.1) {
-	@include text-shadow(rgba(black, $sVal) 0 1px 2px);
+    @include text-shadow(rgba(black, $sVal) 0 1px 2px);
 }
+
 @mixin txtShdwLarge($sVal: 0.7) {
-	@include text-shadow(rgba(black, $sVal) 0 3px 7px);
+    @include text-shadow(rgba(black, $sVal) 0 3px 7px);
 }
 
 /*********************************************** FORM ELEMENTS */
 @mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include appearance(none);
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
-	@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
-	//	background: lighten($bg, 20%);
-	background: rgba(#fff, 0.1);
-	border: none;
-	//border-bottom: 1px solid rgba(#fff, 0.1);
-	color: lighten($fg, 20%);
-	outline: none;
-	&.error {
-		background: rgba(red, 0.5);
-	}
+    @include appearance(none);
+    @include border-radius($controlCr);
+    @include box-sizing(border-box);
+    @include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
+    //	background: lighten($bg, 20%);
+    background: rgba(#fff, 0.1);
+    border: none;
+    //border-bottom: 1px solid rgba(#fff, 0.1);
+    color: lighten($fg, 20%);
+    outline: none;
+    &.error {
+        background: rgba(red, 0.5);
+    }
 }
 
 @mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include input-base($bg, $fg);
-	padding: 0 $interiorMarginSm;
+    @include input-base($bg, $fg);
+    padding: 0 $interiorMarginSm;
 }
 
 @mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include input-base($bg, $fg);
-	padding: $interiorMargin;
+    @include input-base($bg, $fg);
+    padding: $interiorMargin;
 }
 
 @mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include nice-input($bg, $fg);
-	background: lighten($bg, 3%);
-	border-bottom: 1px solid lighten($bg, 10%);
+    @include nice-input($bg, $fg);
+    background: lighten($bg, 3%);
+    border-bottom: 1px solid lighten($bg, 10%);
 }
 
 /*
@@ -308,24 +313,30 @@
     padding: 0;
     li {
         list-style-type: none;
-        margin:0;
+        margin: 0;
         padding: 0;
     }
 }
 
-@mixin vertical-align {
-	/* This doesn't work on an element inside an element with absolute positioning that has height: auto */
-	position: relative;
-	top: 50%;
-	-webkit-transform: translateY(-50%);
-	-ms-transform: translateY(-50%);
-	transform: translateY(-50%);
+@mixin verticalCenter {
+    /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
+    //position: relative;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+@mixin verticalCenterBlock($holderH, $itemH) {
+    top: floor(($holderH - $itemH) / 2) !important;
+    bottom: auto;
+    height: $itemH;
 }
 
 @mixin ellipsize() {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 @mixin scrollH($showBar: auto) {
@@ -339,21 +350,21 @@
 }
 
 @mixin wait-spinner($b: 5px, $c: $colorAlt1) {
-	display: block;
-	position: absolute;
-	-webkit-animation: rotation .6s infinite linear;
-	-moz-animation: rotation .6s infinite linear;
-	-o-animation: rotation .6s infinite linear;
-	animation: rotation .6s infinite linear;
-	border-color: rgba($c, 0.25);
-	border-top-color: rgba($c, 1.0);
-	border-style: solid;
-	border-width: $b;
-	border-radius: 100%;
+    display: block;
+    position: absolute;
+    -webkit-animation: rotation .6s infinite linear;
+    -moz-animation: rotation .6s infinite linear;
+    -o-animation: rotation .6s infinite linear;
+    animation: rotation .6s infinite linear;
+    border-color: rgba($c, 0.25);
+    border-top-color: rgba($c, 1.0);
+    border-style: solid;
+    border-width: $b;
+    border-radius: 100%;
 }
 
 @mixin test($c: #ffcc00, $a: 0.2) {
-	background-color: rgba($c, $a);
+    background-color: rgba($c, $a);
 }
 
 @mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
@@ -374,6 +385,6 @@
 }
 
 @mixin s-stale($a: 0.5) {
-	color: rgba($colorTelemFresh, $a) !important;
-	font-style: italic;
+    color: rgba($colorTelemFresh, $a) !important;
+    font-style: italic;
 }
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 3f15a69491..ce91bbe16d 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -194,7 +194,6 @@
 label.checkbox.custom {
 	$bg: lighten($colorBodyBg, $ltGamma);
 	$d: $formRowCtrlsH;
-	//	@include vertical-align();
 	cursor: pointer;
 	display: inline-block;
 	line-height: $d;
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 86592f77de..836f5d754c 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -44,7 +44,7 @@
             position: relative;
             &:hover .item-main {
 	            .item-type {
-		            color: $colorKey !important;
+		            color: lighten($colorKey, 10%) !important;
                     .l-icon-link {
                         color: $colorIconLink;
                     }
@@ -55,13 +55,16 @@
 	            }
             }
 	        .contents {
-		        top: $interiorMargin; right: $interiorMargin; bottom: $interiorMargin; left: $interiorMargin;
+                //@include test(red);
+                $m: $interiorMarginLg;
+		        top: $m; right: $m; bottom: $m; left: $m;
 	        }
             .bar {
                 &.top-bar.abs {
                     bottom: auto;
                     height: $ueBrowseGridItemTopBarH;
                     line-height: $ueBrowseGridItemTopBarH;
+                    text-align: right;
 	                z-index: 5;
 	                .left, .right {
 		                width: auto;
@@ -76,7 +79,6 @@
                 &.bottom-bar.abs {
                     top: auto;
                     height: $ueBrowseGridItemBottomBarH;
-	                padding: $interiorMargin;
                 }
             }
             .item-main {
@@ -89,7 +91,7 @@
                     //@include trans-prop-nice("color", $transTime);
                     @include absPosDefault($iconMargin, false);
                     //@include test(red);
-                    color: $colorItemFg;
+                    //color: $colorItemFg;
                     text-align: center;
                     font-size: $iconD * 0.95; //6em;
                     line-height: $iconD;
@@ -99,11 +101,12 @@
                     //line-height: $lh;
                     .l-icon-link {
                         // When the link icon is in the item-type icon holder
-                        color: darken($colorIconLink, 25%);
-                        height: 36px;
-                        line-height: 36px;
+                        //color: darken($colorIconLink, 25%);
+                        color: $colorIconLink;
+                        height: auto;
+                        line-height: 100%;
                         position: absolute;
-                        font-size: 32px;
+                        font-size: 0.3em;
                         left: 0px;
                         bottom: 10px;
                         z-index: 2;
@@ -123,11 +126,8 @@
             }
             .title {
 	            @include txtShdwSubtle();
+                @include ellipsize();
                 color: lighten($colorBodyFg, 20%);
-	            overflow: hidden;
-	            white-space: nowrap;
-	            text-overflow: ellipsis;
-//                font-weight: bold;
             }
             .details {
                 font-size: 0.8em;
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index def2526c61..168daad4bf 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -58,11 +58,16 @@ ul.tree {
 				left: $runningItemW;
 
 				.type-icon {
-					@include absPosDefault(0, false);
+					//@include absPosDefault(0, false);
+					$d: 16px; // 16px is crisp size
 					@include txtShdwSubtle(0.6);
+					font-size: $d;
 					color: $colorItemTreeIcon;
 					left: $interiorMargin;
-                    right: auto; width: 1em;
+					position: absolute;
+					@include verticalCenterBlock($menuLineHPx, $d);
+					line-height: 100%;
+                    right: auto; width: $d;
 
 					.icon {
 						&.l-icon-link,
@@ -81,8 +86,7 @@ ul.tree {
 							$d: 8px;
 							@include ancillaryIcon($d, $colorIconLink);
 							left: -3px;
-							bottom: 5px;
-
+							bottom: 0px;
 						}
 					}
 				}

From 67592def9029bfaf4606ac5d15b1b7403083ce34 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 20 Aug 2015 16:11:45 -0700
Subject: [PATCH 142/266] [Mobile] Sanding of mobile styles, in progress

open #74
CSS and markup changes for mobile,
particularly on grid-item;
Mod to behavior in tree for mobile nav:
leaf node grid-item click now navs to item;
Fixed info-button to work properly with mod to
infoButtonGesture.js;
---
 .../browse/res/templates/items/grid-item.html |   2 +-
 .../general/res/sass/mobile/_constants.scss   |   7 +-
 .../general/res/sass/mobile/_item.scss        | 121 ++++++++----------
 .../general/res/templates/tree-node.html      |   6 +-
 .../inspect/res/templates/info-button.html    |   5 +-
 .../inspect/src/gestures/InfoButtonGesture.js |   2 +-
 6 files changed, 66 insertions(+), 77 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html
index 246a7b54b4..f1fd6dd5ee 100644
--- a/platform/commonUI/browse/res/templates/items/grid-item.html
+++ b/platform/commonUI/browse/res/templates/items/grid-item.html
@@ -24,7 +24,7 @@
     <div class='contents abs'>
         <div class='top-bar bar abs'>
             <div class='ui-symbol profile' title='Shared'>&#x4f;</div>
-            <!--mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation-->
+            <mct-representation class="desktop-hide" key="'info-button'" mct-object="domainObject"></mct-representation>
         </div>
         <div class='item-main abs'>
             <div class='ui-symbol icon lg item-type'>
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 6a3a32c0db..d69084086e 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -21,11 +21,12 @@
  *****************************************************************************/
 
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
-$mobile-listIcon: 30px;
+$mobileListIconSize: 30px;
+$mobileTitleDescH: 35px;
 $mobile-listRight: 10px;
 
-$phone-itemHeight: $ueBrowseGridItemLg/4;
-$tablet-itemHeight: $ueBrowseGridItemLg/3;
+$phoneItemH: floor($ueBrowseGridItemLg/4);
+$tabletItemH: floor($ueBrowseGridItemLg/3);
 
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobile-treeHeight: 38px;
diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss
index 88f08cb343..717e589cb5 100644
--- a/platform/commonUI/general/res/sass/mobile/_item.scss
+++ b/platform/commonUI/general/res/sass/mobile/_item.scss
@@ -27,103 +27,92 @@
 .items-holder {
     .item {
         &.grid-item {
-            $dWid: $ueBrowseGridItemLg;
-            $dHei: $ueBrowseGridItemLg;
+            $titleH: 30px;
             @include phoneandtablet {
-                $dWid: 100%;
-                .mobile-grid-nav {
-                    top: 0px;
-                    bottom: 0px;
-                    right: 55px;
-                }
-                .mobile-info {
-                    text-align: center;
-                    width: 50px;
-                    right: 0px;
-                    left: auto;
-                    font-size: 1.3em;
+                width: 100%;
+                >.contents {
+                    top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
                 }
                 .bar {
-                    &.bottom-bar.abs {
-                        top: 0px;
-                        height: auto;
+                    &.top-bar {
+                        // Becomes the right side of the item
+                        //@include test(blue);
+                        bottom: 0 !important; left: auto !important; right: 20px !important;
+                        width: 40px !important; height: auto !important;
+                        text-align: right;
+                    }
+                    &.bottom-bar {
+                        // Becomes the left side of the item
+                        left: $mobileListIconSize + $interiorMarginLg;
+                        right: 60px;
                     }
                     
                 }
                 .item-main {
                     .item-type {
-                        font-size: $mobile-listIcon;
-                        top: 0px;
-                        left: 0px;
+                        //@include test(blue);
+                        font-size: $mobileListIconSize;
+                        right: auto;
+                        bottom: auto;
+                        left: 0;
+                        line-height: 100%;
                         text-align: left;
-                        height: auto
+                        width: $mobileListIconSize;
+                        .l-icon-link {
+                            bottom: 0;
+                        }
                     }
                     .item-open {
-                       display: none;
+                        display: block;
+                        opacity: 1;
+                        font-size: 1em;
+                        width: auto;
                     }
                 }
-                .title, .details {
-                    margin-left: $mobile-listIcon;
-                }
             }
 
             @include phone {
-                $dHei: $phone-itemHeight;
-                width: $dWid;
+                $dHei: $phoneItemH;
                 height: $dHei;
-                .mobile-right {
-                    top: 100%;
-                }
-                .mobile-info {
-                    line-height: $phone-itemHeight * .5;
+                .bar {
+                    &.top-bar {
+                        // Becomes the right side of the item
+                        line-height: $dHei !important;
+                    }
+                    &.bottom-bar {
+                        @include verticalCenterBlock($dHei, $mobileTitleDescH);
+                    }
                 }
                 .item-main {
                     .item-type {
-                        line-height: $phone-itemHeight * .8;
+                        @include verticalCenterBlock($dHei, $mobileListIconSize);
+                    }
+                    .item-open {
+                        line-height: $dHei;
                     }
                 }
-                .title {
-                    margin-right: $mobile-listRight;
-                    line-height: $phone-itemHeight * .5;
-                }
-                .details {
-                    margin-right: $mobile-listRight;
-                    line-height: 0px;
-                }                
             }
             
             @include tablet {
-                $dHei: $tablet-itemHeight;
-                width: $dWid;
+                $dHei: $tabletItemH;
                 height: $dHei;
-                .mobile-right {
-                    top: 100%;
-                }
-                
-                .mobile-info {
-                    line-height: $tablet-itemHeight * .57;
+                .bar {
+                    &.top-bar {
+                        // Becomes the right side of the item
+                        line-height: $dHei !important;
+                    }
+                    &.bottom-bar {
+                        @include verticalCenterBlock($dHei, $mobileTitleDescH);
+                    }
                 }
                 .item-main {
                     .item-type {
-                        font-size: $mobile-listIcon;
-                        line-height: $tablet-itemHeight * .75;
+                        @include verticalCenterBlock($dHei, $mobileListIconSize);
+                    }
+                    .item-open {
+                        line-height: $dHei;
                     }
                 }
-                .title {
-                    margin-right: $mobile-listRight;
-                    line-height: $tablet-itemHeight * .57;
-                }
-                .details {
-                    margin-right: $mobile-listRight;
-                    line-height: 0px;
-                }
-            }
-            
-            @include desktop {
-                $dWid: $ueBrowseGridItemLg;
-                $dHei: $ueBrowseGridItemLg;
-                width: $dWid;
-                height: $dHei; 
             }
         }
     }
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 39d6c064e6..0075b65045 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -25,12 +25,12 @@
 	        class="tree-item menus-to-left"
 	        ng-class="{selected: treeNode.isSelected()}"
 	        >
-            <mct-representation                                
+            <mct-representation
                 key="'label'"
 				mct-object="domainObject"
 				ng-model="ngModel"
-				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
-                          toggle.toggle(); treeNode.trackExpansion()"
+				ng-click="!treeNode.checkMobile() || model.composition == undefined ?
+				ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
 				>
             </mct-representation>
             <span
diff --git a/platform/commonUI/inspect/res/templates/info-button.html b/platform/commonUI/inspect/res/templates/info-button.html
index bfc43a8fa4..f41d48262b 100644
--- a/platform/commonUI/inspect/res/templates/info-button.html
+++ b/platform/commonUI/inspect/res/templates/info-button.html
@@ -21,6 +21,5 @@
 -->
 
 <!--The icon for the info button appearing in a grid item (list in folder)-->
-<div>
-    <a class='ui-symbol icon mobile-info'>i</a>
-</div>
+<a class='ui-symbol icon mobile-info'>&#xe608;</a>
+
diff --git a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
index d128392534..9dd3cf251c 100644
--- a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
@@ -68,7 +68,7 @@ define(
             // and then on any body touch the bubble is dismissed
             function showBubble(event) {
                 trackPosition(event);
-                
+                event.stopPropagation();
                 // Show the bubble, but on any touchstart on the
                 // body (anywhere) call hidebubble
                 dismissBubble = infoService.display(

From da8eb334e3766d2f0fb1be2d2339ec910bb7edae Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 20 Aug 2015 18:36:44 -0700
Subject: [PATCH 143/266] [Mobile] Sanding of mobile styles continues, in
 progress

open #74
CSS and markup changes for split pane holders;
drop shadow added to tree area;
Tree item cleanups;
This or earlier commit broke treeview nav action;
TO-DO: fix treeview nav action to hide menu;
---
 .../commonUI/browse/res/templates/browse.html |  23 ++--
 .../res/templates/browse/object-header.html   |   4 +-
 platform/commonUI/general/res/css/items.css   |  18 +--
 .../general/res/css/theme-espresso.css        | 105 ++++++++++-------
 platform/commonUI/general/res/css/tree.css    | 109 ++++++++----------
 .../commonUI/general/res/sass/_constants.scss |   1 +
 .../commonUI/general/res/sass/_mixins.scss    |   2 +-
 .../general/res/sass/items/_item.scss         |   4 +-
 .../general/res/sass/mobile/_constants.scss   |  10 +-
 .../general/res/sass/mobile/_layout.scss      |  58 ++++++----
 .../general/res/sass/mobile/_tree.scss        |  27 +++--
 .../res/sass/mobile/controls/_menus.scss      |   2 +-
 .../commonUI/general/res/sass/tree/_tree.scss |   3 +-
 13 files changed, 202 insertions(+), 164 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 2aadc0234e..ce7cb41cb1 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -20,30 +20,31 @@
  at runtime from the About dialog for additional information.
 -->
 
-<div content="jquery-wrapper" class="abs holder-all browse-mode" ng-controller="BrowseController">
+<div class="abs holder-all browse-mode" ng-controller="BrowseController">
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
             <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>
-                <div class='holder tree-holder abs mobile-tree-holder'>
-                    <mct-representation key="'tree'"
-                                        mct-object="domainObject"
-                                        ng-model="treeModel">
-                    </mct-representation>
-                </div>
+                <div class="holder abs l-mobile">
+                    <div class='tree-holder abs mobile-tree-holder'>
+                        <mct-representation key="'tree'"
+                                            mct-object="domainObject"
+                                            ng-model="treeModel">
+                        </mct-representation>
+                    </div>
                     <mct-representation key="'create-button'" mct-object="navigatedObject">
                     </mct-representation>
+                </div>
             </div>
 
             <mct-splitter class="mobile-hide"></mct-splitter>
                     <div class='split-pane-component items pane mobile-pane right-repr'>
-                        <div class='holder abs' id='content-area'>
+                        <div class='holder abs l-mobile' id='content-area'>
                             <mct-representation mct-object="navigatedObject" key="'browse-object'">
                             </mct-representation>
                         </div>
-                    <div class="left s-very-subtle key-properties ui-symbol mobile-menu-icon button-pos" 
-                        ng-click="treeSlide()">m</div>                        
-                    </div>   
+                    <div class="left key-properties ui-symbol icon mobile-menu-icon" ng-click="treeSlide()">m</div>
+                    </div>
         </mct-split-pane>
     </div>
     <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 84cc087bbc..72f7b3e57f 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -22,9 +22,9 @@
 <div class='object-header object-header-mobile'>
     <span class="label s-label">
         <mct-representation class="desktop-hide" key="'back-arrow'"></mct-representation>
-        <span class='type-icon icon ui-symbol'>{{type.getGlyph()}}</span>
+        <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
-        <span class='type-name mobile-important-hide'>{{type.getName()}}</span>
+        <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
         <span class='title-label'>{{model.name}}</span>
         <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
     </span>
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index af2c481a59..9ea92fa707 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -216,23 +216,23 @@
       bottom: 10px;
       left: 10px; }
     /* line 63, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .bar.top-bar.abs {
+    .items-holder .item.grid-item .bar.top-bar {
       bottom: auto;
       height: 20px;
       line-height: 20px;
       text-align: right;
       z-index: 5; }
       /* line 69, ../sass/items/_item.scss */
-      .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right {
+      .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
         width: auto; }
         /* line 71, ../sass/items/_item.scss */
-        .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon {
+        .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
           margin-left: 3px; }
           /* line 73, ../sass/items/_item.scss */
-          .items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-icon-link {
+          .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
             color: #49dedb; }
     /* line 79, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .bar.bottom-bar.abs {
+    .items-holder .item.grid-item .bar.bottom-bar {
       top: auto;
       height: 30px; }
     /* line 84, ../sass/items/_item.scss */
@@ -415,12 +415,12 @@
       line-height: 50px !important; }
     /* line 82, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
-      top: 7px !important;
+      top: 7px;
       bottom: auto;
       height: 35px; }
     /* line 87, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      top: 10px !important;
+      top: 10px;
       bottom: auto;
       height: 30px; }
     /* line 90, ../sass/mobile/_item.scss */
@@ -435,12 +435,12 @@
       line-height: 66px !important; }
     /* line 104, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
-      top: 15px !important;
+      top: 15px;
       bottom: auto;
       height: 35px; }
     /* line 109, ../sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
-      top: 18px !important;
+      top: 18px;
       bottom: auto;
       height: 30px; }
     /* line 112, ../sass/mobile/_item.scss */
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c0444d9990..27b5a11ad6 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -759,27 +759,45 @@ mct-container {
   .browse-wrapper,
   .mobile-pane {
     position: absolute;
-    left: 0;
-    top: 0;
+    top: 0 !important;
     right: 0;
-    white-space: nowrap; } }
+    bottom: 0;
+    left: 0; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 35, ../sass/mobile/_layout.scss */
+  .user-environ .browse-area,
+  .user-environ .edit-area,
+  .user-environ .editor {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 25px; } }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 44, ../sass/mobile/_layout.scss */
+  .holder.l-mobile {
+    top: 10px !important;
+    right: 10px !important;
+    bottom: 10px !important;
+    left: 10px !important; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 38, ../sass/mobile/_layout.scss */
+  /* line 56, ../sass/mobile/_layout.scss */
   .desktop-browse {
     min-width: 150px;
     max-width: 800px;
     width: 25%; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 49, ../sass/mobile/_layout.scss */
+  /* line 67, ../sass/mobile/_layout.scss */
   .browse-hidetree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 60, ../sass/mobile/_layout.scss */
+  /* line 78, ../sass/mobile/_layout.scss */
   .browse-hidetree .mobile-pane.left-menu {
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
@@ -799,7 +817,7 @@ mct-container {
     overflow-y: hidden;
     overflow-x: hidden; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 73, ../sass/mobile/_layout.scss */
+  /* line 91, ../sass/mobile/_layout.scss */
   .browse-hidetree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -810,19 +828,19 @@ mct-container {
     left: auto !important;
     width: 100% !important; } }
 
-/* line 82, ../sass/mobile/_layout.scss */
+/* line 100, ../sass/mobile/_layout.scss */
 .mobile-tree-holder {
   top: 30px; }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 91, ../sass/mobile/_layout.scss */
+  /* line 109, ../sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 102, ../sass/mobile/_layout.scss */
+  /* line 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
@@ -836,27 +854,32 @@ mct-container {
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-size: 100%;
+    background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+    background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
     opacity: 1;
     display: block !important;
     width: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 102, ../sass/mobile/_layout.scss */
+  /* line 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     right: 19px !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 102, ../sass/mobile/_layout.scss */
+  /* line 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
-    right: 66% !important; } }
+    right: 60% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 102, ../sass/mobile/_layout.scss */
+  /* line 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
     right: 500px !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 102, ../sass/mobile/_layout.scss */
+  /* line 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
-    right: 78% !important; } }
+    right: 70% !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 126, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -866,53 +889,56 @@ mct-container {
     backface-visibility: hidden;
     left: auto !important; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 126, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     width: 19px !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 126, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
-    width: 66% !important; } }
+    width: 60% !important; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 126, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
+    background-color: rgba(0, 128, 0, 0.2);
     width: 500px !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 126, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
-    width: 78% !important; } }
+    background-color: rgba(255, 165, 0, 0.2);
+    width: 70% !important; } }
+
+/* line 168, ../sass/mobile/_layout.scss */
+.mobile-menu-icon {
+  position: absolute;
+  top: 10px;
+  left: 10px; }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 149, ../sass/mobile/_layout.scss */
-  .button-pos {
-    position: absolute; } }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 158, ../sass/mobile/_layout.scss */
+  /* line 176, ../sass/mobile/_layout.scss */
   .object-header {
     position: relative;
     left: 44px; }
-    /* line 163, ../sass/mobile/_layout.scss */
+    /* line 181, ../sass/mobile/_layout.scss */
     .object-header .label .context-available {
       opacity: 1 !important; } }
 
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 170, ../sass/mobile/_layout.scss */
+  /* line 188, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 177, ../sass/mobile/_layout.scss */
+  /* line 195, ../sass/mobile/_layout.scss */
   .mobile-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 183, ../sass/mobile/_layout.scss */
+  /* line 201, ../sass/mobile/_layout.scss */
   .mobile-important-hide {
     display: none !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 189, ../sass/mobile/_layout.scss */
+  /* line 207, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -930,7 +956,7 @@ mct-container {
     opacity: 0; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 198, ../sass/mobile/_layout.scss */
+  /* line 216, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -948,17 +974,17 @@ mct-container {
     opacity: 1; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 207, ../sass/mobile/_layout.scss */
+  /* line 225, ../sass/mobile/_layout.scss */
   .phone-hide {
     display: none; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 213, ../sass/mobile/_layout.scss */
+  /* line 231, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; } }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 218, ../sass/mobile/_layout.scss */
+  /* line 236, ../sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
@@ -3026,8 +3052,7 @@ label.checkbox.custom {
   @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
     /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
-      font-size: 21px;
-      padding-top: 1px; } }
+      font-size: 21px; } }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 25, ../sass/mobile/controls/_menus.scss */
     .mobile-menu-icon {
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index e6387a1cbe..6ddab967f0 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -163,6 +163,9 @@ ul.tree {
     position: relative; }
     /* line 28, ../sass/tree/_tree.scss */
     ul.tree li span.tree-item {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
       -moz-border-radius: 2px;
       -webkit-border-radius: 2px;
       border-radius: 2px;
@@ -176,17 +179,17 @@ ul.tree {
       line-height: 1.5rem;
       margin-bottom: 3px;
       position: relative; }
-      /* line 39, ../sass/tree/_tree.scss */
+      /* line 40, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .view-control {
         display: inline-block;
         margin-left: 5px;
         font-size: 0.75em;
         width: 10px; }
         @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-          /* line 47, ../sass/tree/_tree.scss */
+          /* line 48, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .view-control:hover {
             color: #ffc700; } }
-      /* line 53, ../sass/tree/_tree.scss */
+      /* line 54, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .label {
         display: block;
         overflow: hidden;
@@ -198,25 +201,25 @@ ul.tree {
         width: auto;
         height: auto;
         left: 15px; }
-        /* line 60, ../sass/tree/_tree.scss */
+        /* line 61, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .type-icon {
           text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
           font-size: 16px;
           color: #0099cc;
           left: 5px;
           position: absolute;
-          top: 4px !important;
+          top: 4px;
           bottom: auto;
           height: 16px;
           line-height: 100%;
           right: auto;
           width: 16px; }
-          /* line 73, ../sass/tree/_tree.scss */
+          /* line 74, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
             text-shadow: black 0 1px 2px;
             position: absolute;
             z-index: 2; }
-          /* line 79, ../sass/tree/_tree.scss */
+          /* line 80, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
             color: #ff3c00;
             font-size: 8px;
@@ -225,7 +228,7 @@ ul.tree {
             width: 8px;
             top: 1px;
             right: -2px; }
-          /* line 85, ../sass/tree/_tree.scss */
+          /* line 86, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
             color: #49dedb;
             font-size: 8px;
@@ -234,7 +237,7 @@ ul.tree {
             width: 8px;
             left: -3px;
             bottom: 0px; }
-        /* line 93, ../sass/tree/_tree.scss */
+        /* line 94, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           overflow: hidden;
           position: absolute;
@@ -249,53 +252,53 @@ ul.tree {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap; }
-      /* line 104, ../sass/tree/_tree.scss */
+      /* line 105, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.loading {
         pointer-events: none; }
-        /* line 106, ../sass/tree/_tree.scss */
+        /* line 107, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .label {
           opacity: 0.5; }
-          /* line 108, ../sass/tree/_tree.scss */
+          /* line 109, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item.loading .label .title-label {
             font-style: italic; }
-        /* line 112, ../sass/tree/_tree.scss */
+        /* line 113, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .wait-spinner {
           margin-left: 14px; }
-      /* line 117, ../sass/tree/_tree.scss */
+      /* line 118, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.selected {
         background: #005177;
         color: #fff; }
-        /* line 121, ../sass/tree/_tree.scss */
+        /* line 122, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .view-control {
           color: #0099cc; }
-        /* line 124, ../sass/tree/_tree.scss */
+        /* line 125, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .label .type-icon {
           color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 132, ../sass/tree/_tree.scss */
+        /* line 133, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item:not(.selected):hover {
           background: #404040;
           color: #cccccc; }
-          /* line 135, ../sass/tree/_tree.scss */
+          /* line 136, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .context-trigger {
             display: block; }
-          /* line 138, ../sass/tree/_tree.scss */
+          /* line 139, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .icon {
             color: #33ccff; } }
-      /* line 145, ../sass/tree/_tree.scss */
+      /* line 146, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item:not(.loading) {
         cursor: pointer; }
-      /* line 149, ../sass/tree/_tree.scss */
+      /* line 150, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .context-trigger {
         top: -1px;
         position: absolute;
         right: 3px; }
-        /* line 155, ../sass/tree/_tree.scss */
+        /* line 156, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .context-trigger .invoke-menu {
           font-size: 0.75em;
           height: 0.9rem;
           line-height: 0.9rem; }
-  /* line 164, ../sass/tree/_tree.scss */
+  /* line 165, ../sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
@@ -321,38 +324,28 @@ ul.tree {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 24, ../sass/mobile/_tree.scss */
-  ul.tree {
-    margin: 0;
-    padding: 0; }
-    /* line 314, ../sass/_mixins.scss */
-    ul.tree li {
-      list-style-type: none;
-      margin: 0;
-      padding: 0; }
-    /* line 29, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item {
-      height: 38px;
-      line-height: 38px;
-      padding-top: 3px;
-      padding-bottom: 3px;
-      margin-bottom: 0px; }
-      /* line 36, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .view-control {
-        position: absolute;
-        right: 13px;
-        font-size: 1.8em;
-        right: 0px;
-        width: 35px;
-        text-align: center; }
-      /* line 45, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .label {
-        left: 3px;
-        right: 45px;
-        font-size: 1.2em; }
-        /* line 54, ../sass/mobile/_tree.scss */
-        ul.tree li span.tree-item .label .title-label {
-          right: 16.9px; }
-    /* line 63, ../sass/mobile/_tree.scss */
-    ul.tree ul.tree {
-      margin-left: 7px; } }
+  /* line 30, ../sass/mobile/_tree.scss */
+  ul.tree li span.tree-item {
+    height: 35px;
+    line-height: 35px;
+    margin-bottom: 0px; }
+    /* line 35, ../sass/mobile/_tree.scss */
+    ul.tree li span.tree-item .view-control {
+      position: absolute;
+      font-size: 1.1em;
+      right: 0px;
+      width: 30px;
+      text-align: center; }
+    /* line 44, ../sass/mobile/_tree.scss */
+    ul.tree li span.tree-item .label {
+      left: 0;
+      right: 35px;
+      font-size: 1.2em; }
+      /* line 51, ../sass/mobile/_tree.scss */
+      ul.tree li span.tree-item .label .type-icon {
+        top: 9px;
+        bottom: auto;
+        height: 16px; }
+  /* line 62, ../sass/mobile/_tree.scss */
+  ul.tree ul.tree {
+    margin-left: 20px; } }
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index aba4c8950d..d1f826443c 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -110,6 +110,7 @@ $ueBrowseGridItemBottomBarH: 30px;
 $itemPadLR: 5px;
 // Tree
 $treeVCW: 10px;
+$treeTypeIconH: 16px;
 $treeTypeIconW: 20px;
 $treeContextTriggerW: 20px;
 $colorItemTreeIcon: $colorKey;
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index c047c9582e..f605476c66 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -328,7 +328,7 @@
 }
 
 @mixin verticalCenterBlock($holderH, $itemH) {
-    top: floor(($holderH - $itemH) / 2) !important;
+    top: floor(($holderH - $itemH) / 2);
     bottom: auto;
     height: $itemH;
 }
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 836f5d754c..d9c9d8613b 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -60,7 +60,7 @@
 		        top: $m; right: $m; bottom: $m; left: $m;
 	        }
             .bar {
-                &.top-bar.abs {
+                &.top-bar {
                     bottom: auto;
                     height: $ueBrowseGridItemTopBarH;
                     line-height: $ueBrowseGridItemTopBarH;
@@ -76,7 +76,7 @@
 		                }
 	                }
                 }
-                &.bottom-bar.abs {
+                &.bottom-bar {
                     top: auto;
                     height: $ueBrowseGridItemBottomBarH;
                 }
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index d69084086e..9d7357126e 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -29,10 +29,10 @@ $phoneItemH: floor($ueBrowseGridItemLg/4);
 $tabletItemH: floor($ueBrowseGridItemLg/3);
 
 /************************** MOBILE TREE MENU DIMENSIONS */
-$mobile-treeHeight: 38px;
+$mobileTreeItemH: 35px;
 $mobile-startingTreeLeft: 3px;
-$mobile-runningTreeLeft: 7px;
-$mobile-treeRight: 13px;
+$mobileTreeItemIndent: 20px;
+$mobileTreeRightArrowW: 30px;
 
 /************************** WINDOW DIMENSIONS FOR RWD */
 $phoMaxW: 514px;
@@ -82,7 +82,7 @@ $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 $phoneRepSizePortrait: 19px;
-$phoneRepSizeLandscape: 66%;
+$phoneRepSizeLandscape: 60%;
 $tabletRepSizePortrait: 500px;
-$tabletRepSizeLandscape: 78%;
+$tabletRepSizeLandscape: 70%;
 $desktopMenuSize: 25%;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 3f4fc062d3..9609ed1fdd 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -27,9 +27,27 @@
 .mobile-pane {
     @include phoneandtablet {
         position: absolute;
-        left: 0; top: 0;
-        right: 0;
-        white-space: nowrap;
+        top: 0 !important; right: 0; bottom: 0; left: 0;
+        //white-space: nowrap; // CH CO
+    }
+}
+
+.user-environ .browse-area,
+.user-environ .edit-area,
+.user-environ .editor {
+    @include phoneandtablet {
+        //@include test(red);
+        top: 0; left: 0; right: 0; bottom: $ueFooterH;
+    }
+}
+
+.holder.l-mobile {
+    @include phoneandtablet {
+        //@include test();
+        top: $bodyMargin !important;
+        right: $bodyMargin !important;
+        bottom: $bodyMargin !important;
+        left: $bodyMargin !important;
     }
 }
 
@@ -39,8 +57,8 @@
     @include desktop {
         min-width: 150px;
         max-width: 800px;
-        width: $desktopMenuSize;   
-    }   
+        width: $desktopMenuSize;
+    }
 }
 
 // When the tree is hidden, these are the
@@ -56,7 +74,7 @@
         @include user-select(none);
     }
     // Sets the left tree menu when the tree
-    // is hidden. 
+    // is hidden.
     .mobile-pane.left-menu {
         @include phoneandtablet {
             @include trans-prop-nice(opacity, .4s);
@@ -64,19 +82,19 @@
             right: 100% !important;
             width: auto !important;
             overflow-y: hidden;
-            overflow-x: hidden;       
+            overflow-x: hidden;
         }
     }
 
     // Sets the right represenation when
-    // the tree is hidden. 
-    .mobile-pane.right-repr {       
-        @include phoneandtablet {         
+    // the tree is hidden.
+    .mobile-pane.right-repr {
+        @include phoneandtablet {
             @include slMenuTransitions;
             left: auto !important;
             width: 100% !important;
         }
-    }    
+    }
 }
 
 .mobile-tree-holder {
@@ -86,7 +104,7 @@
 // When the tree is shown, these are
 // the classes used for the left menu
 // and the right menu (for each device &
-// orientation combination, separate 
+// orientation combination, separate
 // parameters are used)
 .browse-showtree {
     // NOTE: DISABLED SELECTION
@@ -98,10 +116,11 @@
         @include user-select(none);
     }
     // Sets the left tree menu when the tree
-    // is shown.     
+    // is shown.
     .mobile-pane.left-menu {
         @include phoneandtablet {
             @include trans-prop-nice(opacity, .4s);
+            @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
             opacity: 1;
             display: block !important;
             width: auto !important;
@@ -121,8 +140,7 @@
             right: $tabletRepSizeLandscape !important;
         }
     }
-    // Sets the right represenation when
-    // the tree is shown.     
+    // Sets the right representation when the tree is shown.
     .mobile-pane.right-repr {
         @include phoneandtablet {
             @include slMenuTransitions;
@@ -137,19 +155,19 @@
             width: $phoneRepSizeLandscape !important;
         }
         @include tabletPortrait {
+            //@include test(green);
             width: $tabletRepSizePortrait !important;
         }
         @include tabletLandscape {
+            //@include test(orange);
             width: $tabletRepSizeLandscape !important;
         }
     }
 }
 
-// Button position is set as absolute with transitions
-.button-pos {
-    @include phoneandtablet {
-        position: absolute;
-    }
+.mobile-menu-icon {
+    position: absolute;
+    top: $bodyMargin; left: $bodyMargin;
 }
 
 // Object header must be moved
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index d7f62f16b0..6918b8f217 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -24,21 +24,20 @@
 ul.tree {
     // Only applies to phones and tablets
     @include phoneandtablet {
-        @include menuUlReset();
+        //@include menuUlReset();
         li {
+            //border-top: 1px solid $colorInteriorBorder; // TEMP
             span.tree-item {
                 // Adds some space to the top of each tree item
-                height: $mobile-treeHeight;
-                line-height: $mobile-treeHeight;
-                padding-top: $interiorMarginSm;
-                padding-bottom: $interiorMarginSm;
+                height: $mobileTreeItemH;
+                line-height: $mobileTreeItemH;
                 margin-bottom: 0px;
                 .view-control {
+                    //@include test(red);
                     position: absolute;
-                    right: $mobile-treeRight;
-                    font-size: 1.8em;
+                    font-size: 1.1em;
                     right: 0px;
-                    width: 35px;
+                    width: $mobileTreeRightArrowW;
                     text-align: center;
                 }                   
 
@@ -46,13 +45,13 @@ ul.tree {
                     // Designates the starting left margin
                     // (indentation) of 'My Items'
                     // Also adds right space for selection button
-                    left: $mobile-startingTreeLeft;
-                    right: 45px;
+                    left: 0;
+                    right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
                     font-size: 1.2em;
-                    // Allows tree item name to stop prior
-                    // to the arrow
+                    .type-icon {
+                        @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
+                    }
                     .title-label {
-                        right: $mobile-treeRight * 1.3;
                     }
                 }             
             }
@@ -61,7 +60,7 @@ ul.tree {
         // Sets the margin on the left, which causes the
         // running indentation after each folder is made
         ul.tree {
-            margin-left: $mobile-runningTreeLeft;
+            margin-left: $mobileTreeItemIndent;
         }
     }
 }
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index 40aef796ee..d738f63d4a 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -26,7 +26,7 @@
     display: inline-block;
     @include phoneandtablet {
         font-size: 21px;
-        padding-top: $imageThumbPad;
+        //padding-top: $imageThumbPad;
     }
     @include desktop {
         display: none;
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index 168daad4bf..cb0b0f1a72 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -27,6 +27,7 @@ ul.tree {
 		position: relative;
 		span.tree-item {
 			$runningItemW: 0;
+			@include box-sizing(border-box);
 			@include border-radius($basicCr);
 			@include single-transition(background-color, 0.25s);
 			display: block;
@@ -59,7 +60,7 @@ ul.tree {
 
 				.type-icon {
 					//@include absPosDefault(0, false);
-					$d: 16px; // 16px is crisp size
+					$d: $treeTypeIconH; // 16px is crisp size
 					@include txtShdwSubtle(0.6);
 					font-size: $d;
 					color: $colorItemTreeIcon;

From ee608cc4a4c842595eabb6aaacb91576a063c3ca Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Fri, 21 Aug 2015 15:09:23 -0700
Subject: [PATCH 144/266] [Mobile] IN PROGRESS: General fixes, spurred by
 mobile, for object-header

open #74
Attempting to layout using flex - not working;
See http://jsfiddle.net/charlesh88/cpf9zjts/9/ for working example;
New _flex.scss added;
This commit is changed elements that are mostly solid;
---
 .../browse/res/templates/back-arrow.html      |   2 +-
 .../browse/res/templates/browse-object.html   |   1 +
 .../res/templates/browse/object-header.html   |  11 +-
 .../general/res/css/theme-espresso.css        | 163 +++++++++++-------
 .../commonUI/general/res/sass/_global.scss    |   6 -
 platform/commonUI/general/res/sass/_main.scss |   1 +
 .../commonUI/general/res/sass/_mixins.scss    |   4 +
 .../general/res/sass/controls/_controls.scss  |  52 ++++--
 .../res/sass/user-environ/_layout.scss        |   6 +
 .../res/sass/user-environ/_top-bar.scss       |   5 -
 .../features/layout/res/templates/frame.html  |   5 +-
 11 files changed, 151 insertions(+), 105 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 15775fb632..086075c692 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -23,6 +23,6 @@
 <!-- Back Arrow Icon used on mobile-->
 <span ng-controller="BrowseController"
       ng-click='backArrow()'
-      ng-class="checkRoot(); atRoot ? 'mobile-back-hide' : 'mobile-back-unhide'">
+      ng-class="checkRoot(); atRoot ? 'hidden' : ''">
     <a class='type-icon icon ui-symbol'>{</a>
 </span>
diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 1f69f45b0a..fd26dfd2a9 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -22,6 +22,7 @@
 <span ng-controller="BrowseObjectController">
     <div class="object-browse-bar bar abs">
         <div class="items-select left abs">
+            <mct-representation key="'back-arrow'"></mct-representation>
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 72f7b3e57f..5511725c80 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -20,12 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <div class='object-header object-header-mobile'>
-    <span class="label s-label">
-        <mct-representation class="desktop-hide" key="'back-arrow'"></mct-representation>
-        <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
-        <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
-        <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
-        <span class='title-label'>{{model.name}}</span>
+    <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
+    <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
+    <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
+    <span class='title-label'>
+        {{model.name}}
         <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
     </span>
 </div>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 27b5a11ad6..c842eaf8ec 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -386,16 +386,10 @@ p {
   margin-bottom: 10px; }
 
 /* line 74, ../sass/_global.scss */
-span {
-  /* 618 DEBUG
-  box-sizing: border-box;
-  */ }
-
-/* line 80, ../sass/_global.scss */
 mct-container {
   display: block; }
 
-/* line 84, ../sass/_global.scss */
+/* line 78, ../sass/_global.scss */
 .abs, .btn-menu span.l-click-area {
   position: absolute;
   top: 0;
@@ -405,51 +399,51 @@ mct-container {
   height: auto;
   width: auto; }
 
-/* line 94, ../sass/_global.scss */
+/* line 88, ../sass/_global.scss */
 .code, .codehilite {
   font-family: "Lucida Console", monospace;
   font-size: 0.7em;
   line-height: 150%;
   white-space: pre; }
 
-/* line 101, ../sass/_global.scss */
+/* line 95, ../sass/_global.scss */
 .codehilite {
   background-color: rgba(255, 255, 255, 0.1);
   padding: 1em; }
 
-/* line 107, ../sass/_global.scss */
+/* line 101, ../sass/_global.scss */
 .align-right {
   text-align: right; }
 
-/* line 111, ../sass/_global.scss */
+/* line 105, ../sass/_global.scss */
 .centered {
   text-align: center; }
 
-/* line 115, ../sass/_global.scss */
+/* line 109, ../sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 119, ../sass/_global.scss */
+/* line 113, ../sass/_global.scss */
 .colorKey {
   color: #0099cc; }
 
-/* line 123, ../sass/_global.scss */
+/* line 117, ../sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 127, ../sass/_global.scss */
+/* line 121, ../sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 133, ../sass/_global.scss */
+/* line 127, ../sass/_global.scss */
 .paused:not(.s-btn):not(.icon-btn) {
   border-color: #c56f01 !important;
   color: #c56f01 !important; }
 
-/* line 139, ../sass/_global.scss */
+/* line 133, ../sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -702,34 +696,34 @@ mct-container {
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 245, ../sass/user-environ/_layout.scss */
+  /* line 251, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 249, ../sass/user-environ/_layout.scss */
+  /* line 255, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 257, ../sass/user-environ/_layout.scss */
+/* line 263, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 260, ../sass/user-environ/_layout.scss */
+  /* line 266, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 267, ../sass/user-environ/_layout.scss */
+/* line 273, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 270, ../sass/user-environ/_layout.scss */
+  /* line 276, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 274, ../sass/user-environ/_layout.scss */
+  /* line 280, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 276, ../sass/user-environ/_layout.scss */
+    /* line 282, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 285, ../sass/user-environ/_layout.scss */
+/* line 291, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -899,12 +893,10 @@ mct-container {
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
   /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
-    background-color: rgba(0, 128, 0, 0.2);
     width: 500px !important; } }
 @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
-    background-color: rgba(255, 165, 0, 0.2);
     width: 70% !important; } }
 
 /* line 168, ../sass/mobile/_layout.scss */
@@ -2560,35 +2552,49 @@ label.checkbox.custom {
 /******************************************************** OBJECT-HEADER */
 /* line 364, ../sass/controls/_controls.scss */
 .object-header {
-  display: inline-block;
-  font-size: 1em; }
-  /* line 368, ../sass/controls/_controls.scss */
-  .object-header .label .title-label {
-    color: white; }
-  /* line 371, ../sass/controls/_controls.scss */
-  .object-header .label .type-icon {
-    font-size: 120%;
-    margin-right: 5px;
+  font-size: 1em;
+  line-height: 120%; }
+  /* line 373, ../sass/controls/_controls.scss */
+  .object-header .title-label,
+  .object-header .type-icon,
+  .object-header .context-available {
+    border: 1px dotted rgba(102, 102, 255, 0.75);
     vertical-align: middle; }
-  /* line 376, ../sass/controls/_controls.scss */
-  .object-header .label .context-available {
+  /* line 379, ../sass/controls/_controls.scss */
+  .object-header > .type-icon {
+    font-size: 120%; }
+  /* line 383, ../sass/controls/_controls.scss */
+  .object-header .title-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: white;
+    padding-right: 0.75em;
+    position: relative; }
+  /* line 390, ../sass/controls/_controls.scss */
+  .object-header .context-available {
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    -webkit-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
     opacity: 0;
-    font-size: 0.8em; }
-  /* line 381, ../sass/controls/_controls.scss */
-  .object-header .label:hover .context-available {
+    font-size: 0.7em;
+    position: absolute;
+    right: 0; }
+  /* line 398, ../sass/controls/_controls.scss */
+  .object-header:hover .context-available {
     opacity: 1; }
 
-/* line 390, ../sass/controls/_controls.scss */
-.top-bar .object-header,
-.object-browse-bar .object-header {
-  font-size: 1.1em; }
-  /* line 392, ../sass/controls/_controls.scss */
-  .top-bar .object-header span,
-  .object-browse-bar .object-header span {
-    display: inline-block; }
-
 /******************************************************** SLIDERS */
-/* line 404, ../sass/controls/_controls.scss */
+/* line 420, ../sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2609,7 +2615,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 415, ../sass/controls/_controls.scss */
+/* line 431, ../sass/controls/_controls.scss */
 .slider .knob {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2692,12 +2698,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 426, ../sass/controls/_controls.scss */
+  /* line 442, ../sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 433, ../sass/controls/_controls.scss */
+/* line 449, ../sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2708,12 +2714,12 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 443, ../sass/controls/_controls.scss */
+  /* line 459, ../sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
-/* line 451, ../sass/controls/_controls.scss */
+/* line 467, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2730,7 +2736,7 @@ label.checkbox.custom {
   height: 10px;
   width: 10px; }
 
-/* line 457, ../sass/controls/_controls.scss */
+/* line 473, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-thumb {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2748,7 +2754,7 @@ label.checkbox.custom {
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   border-top: 1px solid gray; }
-  /* line 464, ../sass/controls/_controls.scss */
+  /* line 480, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb:hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2757,7 +2763,7 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#808080, #737373 20px);
     background-image: linear-gradient(#808080, #737373 20px); }
 
-/* line 469, ../sass/controls/_controls.scss */
+/* line 485, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-corner {
   background: rgba(0, 0, 0, 0.4); }
 
@@ -3488,6 +3494,31 @@ label.checkbox.custom {
   font-size: 0.65em;
   vertical-align: top; }
 
+/* line 2, ../sass/_flex.scss */
+.l-flex.l-flex-justify {
+  justify-content: space-between; }
+/* line 5, ../sass/_flex.scss */
+.l-flex .l-flex-row, .l-flex.l-flex-row {
+  display: flex;
+  flex-flow: row nowrap; }
+/* line 16, ../sass/_flex.scss */
+.l-flex .l-flex-max {
+  flex: 1 0 !important; }
+/* line 20, ../sass/_flex.scss */
+.l-flex .flex-ignore {
+  display: flex;
+  flex-flow: row nowrap;
+  flex: 0 1 auto; }
+
+/* line 28, ../sass/_flex.scss */
+.object-browse-bar.bar > div.abs {
+  background-color: rgba(0, 128, 0, 0.2); }
+
+/* line 33, ../sass/_flex.scss */
+.l-flex-row .title-label {
+  background-color: rgba(0, 0, 255, 0.2);
+  flex: 1 0 !important; }
+
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -4544,7 +4575,7 @@ input[type="text"] {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 27, ../sass/user-environ/_top-bar.scss */
+/* line 23, ../sass/user-environ/_top-bar.scss */
 .top-bar.browse, .top-bar.edit {
   border-bottom: 1px solid #4d4d4d;
   top: 10px;
@@ -4552,22 +4583,22 @@ input[type="text"] {
   bottom: auto;
   left: 10px;
   height: 30px; }
-/* line 37, ../sass/user-environ/_top-bar.scss */
+/* line 33, ../sass/user-environ/_top-bar.scss */
 .top-bar .title {
   color: #fff; }
-/* line 42, ../sass/user-environ/_top-bar.scss */
+/* line 37, ../sass/user-environ/_top-bar.scss */
 .top-bar .buttons-main {
   font-size: 0.8em;
   left: auto;
   text-align: right; }
-  /* line 47, ../sass/user-environ/_top-bar.scss */
+  /* line 42, ../sass/user-environ/_top-bar.scss */
   .top-bar .buttons-main .btn {
     margin-left: 5px; }
 
-/* line 55, ../sass/user-environ/_top-bar.scss */
+/* line 50, ../sass/user-environ/_top-bar.scss */
 .edit-mode .top-bar .buttons-main {
   white-space: nowrap; }
-  /* line 59, ../sass/user-environ/_top-bar.scss */
+  /* line 54, ../sass/user-environ/_top-bar.scss */
   .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .btn-menu span.buttons-main.l-click-area, .btn-menu .edit-mode .top-bar span.buttons-main.l-click-area {
     bottom: auto;
     left: auto; }
diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss
index 94fe8e151c..a6b8ff63c8 100644
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -71,12 +71,6 @@ p {
 	margin-bottom: $interiorMarginLg;
 }
 
-span {
-	/* 618 DEBUG
-	box-sizing: border-box;
-	*/
-}
-
 mct-container {
 	display: block;
 }
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 8803074f63..d75de0c0c9 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -53,6 +53,7 @@
 @import "edit/editor";
 @import "features/imagery";
 @import "features/time-display";
+@import "flex";
 @import "forms/elems";
 @import "forms/validation";
 @import "forms/text-input";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index f605476c66..a42a2f480d 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -367,6 +367,10 @@
     background-color: rgba($c, $a);
 }
 
+@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
+    border: 1px dotted rgba($c, $a);
+}
+
 @mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
     &:after {
         @include box-sizing(border-box);
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index ce91bbe16d..fe6aa3b86b 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -362,25 +362,41 @@ label.checkbox.custom {
 
 /******************************************************** OBJECT-HEADER */
 .object-header {
-	display: inline-block;
+	//@include test();
 	font-size: 1em;
+	line-height: 120%;
 	.label {
-		.title-label {
-			color: lighten($colorBodyFg, 40%);
-		}
-		.type-icon {
-			font-size: 120%;
-			margin-right: $interiorMargin;
-			vertical-align: middle;
-		}
+		//display: flex;
+		//flex-direction: row;
+	}
+
+	.title-label,
+	.type-icon,
+	.context-available {
+		@include tmpBorder(#6666ff);
+		vertical-align: middle;
+	}
+	> .type-icon {
+		font-size: 120%;
+	}
+
+	.title-label {
+		@include ellipsize();
+		color: lighten($colorBodyFg, 40%);
+		padding-right: 0.75em; // For context arrow. Done with em's so pad is relative to the scale of the text.
+		position: relative;
+	}
+
+	.context-available {
+		@include trans-prop-nice(opacity, 0.25s);
+		opacity: 0;
+		font-size: 0.7em;
+		position: absolute;
+		right: 0;
+	}
+	&:hover {
 		.context-available {
-			opacity: 0;
-			font-size: 0.8em;
-		}
-		&:hover {
-			.context-available {
-				opacity: 1;
-			}
+			opacity: 1;
 		}
 	}
 }
@@ -388,9 +404,9 @@ label.checkbox.custom {
 .top-bar,
 .object-browse-bar {
 	.object-header {
-		font-size: 1.1em;
+		//font-size: 1.1em;
 		span {
-			display: inline-block;
+			//display: inline-block;
 		}
 	}
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index c4f0c99b16..81faab4452 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -241,6 +241,12 @@
 	        .right.abs {
 		        top: auto;
 	        }
+            //.left.abs {
+            //    @include tmpBorder(green);
+            //}
+            //.right.abs {
+            //    @include tmpBorder(red);
+            //}
         }
         .object-holder {
             top: $ueTopBarH + $interiorMarginLg;
diff --git a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
index e2ee1f105c..19488e9c10 100644
--- a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
@@ -20,10 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .top-bar {
-//	$h: $ueTopBarH - 5px;
-//	background: rgba(#ff0000, 0.2);
-//	line-height: $ueTopBarBtnH;
-
     &.browse,
     &.edit {
 	    border-bottom: 1px solid $colorInteriorBorder;
@@ -36,7 +32,6 @@
 	
 	.title {
 		color: #fff;
-//		font-weight: bold;
 	}
 	
 	.buttons-main {
diff --git a/platform/features/layout/res/templates/frame.html b/platform/features/layout/res/templates/frame.html
index df4e3390ad..fccdf813bd 100644
--- a/platform/features/layout/res/templates/frame.html
+++ b/platform/features/layout/res/templates/frame.html
@@ -21,9 +21,8 @@
 -->
 <div class="frame frame-template abs">
     <div class="bar abs object-header object-top-bar">
-        <div class="title left abs">
-            <mct-representation key="'node'"
-                                mct-object="domainObject">
+        <div class="left abs">
+            <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
         <div class="btn-bar right abs">

From 039d692e4cef52acee4432ca76d9af8f57e34516 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Fri, 21 Aug 2015 15:10:19 -0700
Subject: [PATCH 145/266] Forgot to add new .scss file

open #74
---
 platform/commonUI/general/res/sass/_flex.scss | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 platform/commonUI/general/res/sass/_flex.scss

diff --git a/platform/commonUI/general/res/sass/_flex.scss b/platform/commonUI/general/res/sass/_flex.scss
new file mode 100644
index 0000000000..61e8007676
--- /dev/null
+++ b/platform/commonUI/general/res/sass/_flex.scss
@@ -0,0 +1,37 @@
+.l-flex {
+    &.l-flex-justify {
+        justify-content: space-between;
+    }
+    .l-flex-row,
+    &.l-flex-row {
+        display: flex;
+        flex-flow: row nowrap;
+        div, span {
+            //@include tmpBorder();
+        }
+        > div, > span {
+            //flex: 1 1 0;
+        }
+    }
+    .l-flex-max {
+        flex: 1 0 !important;
+    }
+
+    .flex-ignore {
+        display: flex;
+        flex-flow: row nowrap;
+        flex: 0 1 auto;
+    }
+}
+
+// TEMP, move out of here once working
+.object-browse-bar.bar > div.abs {
+    @include test(green);
+}
+
+
+.l-flex-row .title-label {
+    @include test(blue);
+    flex: 1 0 !important;
+}
+

From e96d3e3738fa3fe3ff05ac062aba762b0a4ead4b Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 24 Aug 2015 12:22:08 -0700
Subject: [PATCH 146/266] [Mobile] IN PROGRESS: Significant redo of
 object-header

open #74
Added .bar .l-flex using display: flex in object header;
---
 .../browse/res/templates/back-arrow.html      |   8 +-
 .../browse/res/templates/browse-object.html   |   8 +-
 .../res/templates/browse/object-header.html   |   7 +-
 .../general/res/css/theme-espresso.css        | 209 +++++++++---------
 platform/commonUI/general/res/sass/_main.scss |   2 +-
 .../general/res/sass/controls/_controls.scss  |  35 +--
 .../res/sass/user-environ/_layout.scss        |  32 ++-
 .../res/sass/user-environ/_object-browse.scss |  12 +-
 .../features/layout/res/templates/frame.html  |   6 +-
 9 files changed, 171 insertions(+), 148 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 086075c692..c73b4cbdb2 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -21,8 +21,8 @@
 -->
 
 <!-- Back Arrow Icon used on mobile-->
-<span ng-controller="BrowseController"
+<a ng-controller="BrowseController"
+      class='type-icon icon ui-symbol s-back'
       ng-click='backArrow()'
-      ng-class="checkRoot(); atRoot ? 'hidden' : ''">
-    <a class='type-icon icon ui-symbol'>{</a>
-</span>
+      ng-class="checkRoot(); atRoot ? 'hidden' : ''">{
+</a>
diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index fd26dfd2a9..90b3c11504 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -20,14 +20,14 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="BrowseObjectController">
-    <div class="object-browse-bar bar abs">
-        <div class="items-select left abs">
-            <mct-representation key="'back-arrow'"></mct-representation>
+    <div class="object-browse-bar bar l-flex">
+        <div class="items-select left">
+            <mct-representation key="'back-arrow'" class="l-back"></mct-representation>
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
         <!-- Temporarily, on mobile, the button bar is hidden-->
-        <div class="btn-bar right abs mobile-hide">
+        <div class="btn-bar right mobile-hide">
             <mct-representation key="'action-group'"
                                 mct-object="domainObject"
                                 parameters="{ category: 'view-control' }">
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index 5511725c80..f1667f5816 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -21,10 +21,11 @@
 -->
 <div class='object-header object-header-mobile'>
     <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
-    <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
+
     <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
-    <span class='title-label'>
-        {{model.name}}
+    <span class="l-elem-wrapper">
+        <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
+        <span class='title-label'>{{model.name}}</span>
         <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
     </span>
 </div>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c842eaf8ec..6d3f9a5442 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -542,23 +542,34 @@ mct-container {
 .bar.abs, .btn-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
-/* line 74, ../sass/user-environ/_layout.scss */
-.bar.left,
-.bar .left {
-  width: 45% !important;
-  right: auto !important; }
-/* line 79, ../sass/user-environ/_layout.scss */
-.bar.right,
-.bar .right {
-  width: 45% !important;
-  left: auto !important;
-  text-align: right; }
-  /* line 84, ../sass/user-environ/_layout.scss */
-  .bar.right .icon.major,
-  .bar .right .icon.major {
-    margin-left: 15px; }
+  /* line 73, ../sass/user-environ/_layout.scss */
+  .bar.abs.left, .btn-menu span.bar.left.l-click-area,
+  .bar.abs .left,
+  .btn-menu span.bar.l-click-area .left {
+    width: 45%;
+    right: auto; }
+  /* line 78, ../sass/user-environ/_layout.scss */
+  .bar.abs.right, .btn-menu span.bar.right.l-click-area,
+  .bar.abs .right,
+  .btn-menu span.bar.l-click-area .right {
+    width: 45%;
+    left: auto;
+    text-align: right; }
+    /* line 83, ../sass/user-environ/_layout.scss */
+    .bar.abs.right .icon.major, .btn-menu span.bar.right.l-click-area .icon.major,
+    .bar.abs .right .icon.major,
+    .btn-menu span.bar.l-click-area .right .icon.major {
+      margin-left: 15px; }
+/* line 88, ../sass/user-environ/_layout.scss */
+.bar.l-flex {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch; }
+  /* line 92, ../sass/user-environ/_layout.scss */
+  .bar.l-flex .left {
+    flex: 1 1 auto; }
 
-/* line 91, ../sass/user-environ/_layout.scss */
+/* line 99, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -566,23 +577,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 102, ../sass/user-environ/_layout.scss */
+/* line 110, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 108, ../sass/user-environ/_layout.scss */
+/* line 116, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 111, ../sass/user-environ/_layout.scss */
+  /* line 119, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 116, ../sass/user-environ/_layout.scss */
+  /* line 124, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 121, ../sass/user-environ/_layout.scss */
+/* line 129, ../sass/user-environ/_layout.scss */
 .user-environ .bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -594,20 +605,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 126, ../sass/user-environ/_layout.scss */
+  /* line 134, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .status-holder {
     z-index: 1; }
-  /* line 130, ../sass/user-environ/_layout.scss */
+  /* line 138, ../sass/user-environ/_layout.scss */
   .user-environ .bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 138, ../sass/user-environ/_layout.scss */
+/* line 146, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 140, ../sass/user-environ/_layout.scss */
+  /* line 148, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -618,112 +629,112 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 148, ../sass/user-environ/_layout.scss */
+    /* line 156, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 155, ../sass/user-environ/_layout.scss */
+  /* line 163, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 161, ../sass/user-environ/_layout.scss */
+  /* line 169, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 168, ../sass/user-environ/_layout.scss */
+  /* line 176, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 174, ../sass/user-environ/_layout.scss */
+  /* line 182, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 177, ../sass/user-environ/_layout.scss */
+  /* line 185, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 180, ../sass/user-environ/_layout.scss */
+  /* line 188, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 186, ../sass/user-environ/_layout.scss */
+  /* line 194, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 189, ../sass/user-environ/_layout.scss */
+  /* line 197, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 193, ../sass/user-environ/_layout.scss */
+  /* line 201, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 201, ../sass/user-environ/_layout.scss */
+/* line 209, ../sass/user-environ/_layout.scss */
 .browse-mode .split-layout .split-pane-component.pane.left {
   min-width: 150px;
   max-width: 50%; }
 
-/* line 210, ../sass/user-environ/_layout.scss */
+/* line 218, ../sass/user-environ/_layout.scss */
 .edit-mode .split-layout .split-pane-component.pane.right {
   min-width: 150px;
   max-width: 50%; }
-  /* line 213, ../sass/user-environ/_layout.scss */
+  /* line 221, ../sass/user-environ/_layout.scss */
   .edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
     min-height: 50px;
     max-height: 80%; }
 
-/* line 221, ../sass/user-environ/_layout.scss */
+/* line 229, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 224, ../sass/user-environ/_layout.scss */
+  /* line 232, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 227, ../sass/user-environ/_layout.scss */
+    /* line 235, ../sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 232, ../sass/user-environ/_layout.scss */
+  /* line 240, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 34px;
     padding-right: 5px; }
-  /* line 240, ../sass/user-environ/_layout.scss */
+  /* line 248, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 251, ../sass/user-environ/_layout.scss */
+  /* line 259, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 255, ../sass/user-environ/_layout.scss */
+  /* line 263, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 263, ../sass/user-environ/_layout.scss */
+/* line 271, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 266, ../sass/user-environ/_layout.scss */
+  /* line 274, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 273, ../sass/user-environ/_layout.scss */
+/* line 281, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 276, ../sass/user-environ/_layout.scss */
+  /* line 284, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 280, ../sass/user-environ/_layout.scss */
+  /* line 288, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 282, ../sass/user-environ/_layout.scss */
+    /* line 290, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 291, ../sass/user-environ/_layout.scss */
+/* line 299, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -2552,26 +2563,33 @@ label.checkbox.custom {
 /******************************************************** OBJECT-HEADER */
 /* line 364, ../sass/controls/_controls.scss */
 .object-header {
-  font-size: 1em;
-  line-height: 120%; }
+  font-size: 1em; }
   /* line 373, ../sass/controls/_controls.scss */
   .object-header .title-label,
   .object-header .type-icon,
   .object-header .context-available {
-    border: 1px dotted rgba(102, 102, 255, 0.75);
     vertical-align: middle; }
   /* line 379, ../sass/controls/_controls.scss */
   .object-header > .type-icon {
-    font-size: 120%; }
-  /* line 383, ../sass/controls/_controls.scss */
+    font-size: 120%;
+    float: left;
+    margin-right: 5px; }
+  /* line 386, ../sass/controls/_controls.scss */
+  .object-header .l-elem-wrapper {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: flex-start; }
+  /* line 392, ../sass/controls/_controls.scss */
+  .object-header .action {
+    margin-right: 5px; }
+  /* line 396, ../sass/controls/_controls.scss */
   .object-header .title-label {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: white;
-    padding-right: 0.75em;
-    position: relative; }
-  /* line 390, ../sass/controls/_controls.scss */
+    padding-right: 0.35em; }
+  /* line 403, ../sass/controls/_controls.scss */
   .object-header .context-available {
     -moz-transition-property: opacity;
     -o-transition-property: opacity;
@@ -2586,15 +2604,13 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     opacity: 0;
-    font-size: 0.7em;
-    position: absolute;
-    right: 0; }
-  /* line 398, ../sass/controls/_controls.scss */
+    font-size: 0.7em; }
+  /* line 411, ../sass/controls/_controls.scss */
   .object-header:hover .context-available {
     opacity: 1; }
 
 /******************************************************** SLIDERS */
-/* line 420, ../sass/controls/_controls.scss */
+/* line 423, ../sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2615,7 +2631,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 431, ../sass/controls/_controls.scss */
+/* line 434, ../sass/controls/_controls.scss */
 .slider .knob {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2698,12 +2714,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 442, ../sass/controls/_controls.scss */
+  /* line 445, ../sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 449, ../sass/controls/_controls.scss */
+/* line 452, ../sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2714,12 +2730,12 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 459, ../sass/controls/_controls.scss */
+  /* line 462, ../sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
-/* line 467, ../sass/controls/_controls.scss */
+/* line 470, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2736,7 +2752,7 @@ label.checkbox.custom {
   height: 10px;
   width: 10px; }
 
-/* line 473, ../sass/controls/_controls.scss */
+/* line 476, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-thumb {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2754,7 +2770,7 @@ label.checkbox.custom {
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   border-top: 1px solid gray; }
-  /* line 480, ../sass/controls/_controls.scss */
+  /* line 483, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb:hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2763,7 +2779,7 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#808080, #737373 20px);
     background-image: linear-gradient(#808080, #737373 20px); }
 
-/* line 485, ../sass/controls/_controls.scss */
+/* line 488, ../sass/controls/_controls.scss */
 ::-webkit-scrollbar-corner {
   background: rgba(0, 0, 0, 0.4); }
 
@@ -3494,31 +3510,6 @@ label.checkbox.custom {
   font-size: 0.65em;
   vertical-align: top; }
 
-/* line 2, ../sass/_flex.scss */
-.l-flex.l-flex-justify {
-  justify-content: space-between; }
-/* line 5, ../sass/_flex.scss */
-.l-flex .l-flex-row, .l-flex.l-flex-row {
-  display: flex;
-  flex-flow: row nowrap; }
-/* line 16, ../sass/_flex.scss */
-.l-flex .l-flex-max {
-  flex: 1 0 !important; }
-/* line 20, ../sass/_flex.scss */
-.l-flex .flex-ignore {
-  display: flex;
-  flex-flow: row nowrap;
-  flex: 0 1 auto; }
-
-/* line 28, ../sass/_flex.scss */
-.object-browse-bar.bar > div.abs {
-  background-color: rgba(0, 128, 0, 0.2); }
-
-/* line 33, ../sass/_flex.scss */
-.l-flex-row .title-label {
-  background-color: rgba(0, 0, 255, 0.2);
-  flex: 1 0 !important; }
-
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -4706,11 +4697,25 @@ input[type="text"] {
  *****************************************************************************/
 /* line 22, ../sass/user-environ/_object-browse.scss */
 .object-browse-bar {
+  overflow: hidden;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  width: auto;
+  height: auto;
   height: 24px;
-  line-height: 24px; }
-  /* line 26, ../sass/user-environ/_object-browse.scss */
-  .object-browse-bar .items-select .btn-menu {
-    margin-right: 15px; }
+  line-height: 24px;
+  white-space: nowrap; }
+  /* line 28, ../sass/user-environ/_object-browse.scss */
+  .object-browse-bar .left {
+    padding-right: 5px; }
+    /* line 30, ../sass/user-environ/_object-browse.scss */
+    .object-browse-bar .left .l-back {
+      display: inline-block;
+      float: left;
+      margin-right: 10px; }
 
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index d75de0c0c9..1073f325cc 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -53,7 +53,7 @@
 @import "edit/editor";
 @import "features/imagery";
 @import "features/time-display";
-@import "flex";
+//@import "flex";
 @import "forms/elems";
 @import "forms/validation";
 @import "forms/text-input";
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index fe6aa3b86b..61aabb1fa3 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -364,7 +364,7 @@ label.checkbox.custom {
 .object-header {
 	//@include test();
 	font-size: 1em;
-	line-height: 120%;
+	//line-height: 120%;
 	.label {
 		//display: flex;
 		//flex-direction: row;
@@ -373,26 +373,39 @@ label.checkbox.custom {
 	.title-label,
 	.type-icon,
 	.context-available {
-		@include tmpBorder(#6666ff);
+		//@include tmpBorder(#6666ff);
 		vertical-align: middle;
 	}
 	> .type-icon {
 		font-size: 120%;
+		float: left;
+		margin-right: $interiorMargin;
+	}
+
+
+	.l-elem-wrapper {
+		display: flex;
+		flex-flow: row nowrap;
+		justify-content: flex-start;
+	}
+
+	.action {
+		margin-right: $interiorMargin;
 	}
 
 	.title-label {
 		@include ellipsize();
 		color: lighten($colorBodyFg, 40%);
-		padding-right: 0.75em; // For context arrow. Done with em's so pad is relative to the scale of the text.
-		position: relative;
+		padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
+		//position: relative;
 	}
 
 	.context-available {
 		@include trans-prop-nice(opacity, 0.25s);
 		opacity: 0;
 		font-size: 0.7em;
-		position: absolute;
-		right: 0;
+		//position: absolute;
+		//right: 0;
 	}
 	&:hover {
 		.context-available {
@@ -401,16 +414,6 @@ label.checkbox.custom {
 	}
 }
 
-.top-bar,
-.object-browse-bar {
-	.object-header {
-		//font-size: 1.1em;
-		span {
-			//display: inline-block;
-		}
-	}
-}
-
 /******************************************************** SLIDERS */
 
 .slider {
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 81faab4452..7bca0d480b 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -70,19 +70,27 @@
     &.abs {
 	    text-wrap: none;
 	    white-space: nowrap;
+        &.left,
+        .left {
+            width: 45%;
+            right: auto;
+        }
+        &.right,
+        .right {
+            width: 45%;
+            left: auto;
+            text-align: right;
+            .icon.major {
+                margin-left: $interiorMargin * 3;
+            }
+        }
     }
-    &.left,
-    .left {
-        width: 45% !important;
-        right: auto !important;
-    }
-    &.right,
-    .right {
-        width: 45% !important;
-        left: auto !important;
-        text-align: right;
-        .icon.major {
-            margin-left: $interiorMargin * 3;
+    &.l-flex {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: stretch;
+        .left {
+            flex: 1 1 auto;
         }
     }
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
index 3ab3f8c5f7..fc1065acec 100644
--- a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
@@ -20,11 +20,17 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .object-browse-bar {
+    @include absPosDefault();
     height: $ueTopBarH;
     line-height: $ueTopBarH;
-    .items-select {
-        .btn-menu {
-            margin-right: $interiorMargin * 3;
+    white-space: nowrap;
+
+    .left {
+        padding-right: $interiorMargin;
+        .l-back {
+            display: inline-block;
+            float: left;
+            margin-right: $interiorMarginLg;
         }
     }
 }
\ No newline at end of file
diff --git a/platform/features/layout/res/templates/frame.html b/platform/features/layout/res/templates/frame.html
index fccdf813bd..0643f1645b 100644
--- a/platform/features/layout/res/templates/frame.html
+++ b/platform/features/layout/res/templates/frame.html
@@ -20,12 +20,12 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="frame frame-template abs">
-    <div class="bar abs object-header object-top-bar">
-        <div class="left abs">
+    <div class="bar abs l-flex object-header object-top-bar">
+        <div class="left">
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
-        <div class="btn-bar right abs">
+        <div class="btn-bar right">
             <mct-representation key="'switcher'"
                                 ng-model="representation"
                                 mct-object="domainObject">

From 44ed4e0e0d8032900c6601e1565253b61f031a0b Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 24 Aug 2015 12:39:50 -0700
Subject: [PATCH 147/266] [Mobile] IN PROGRESS: Minor tweak for line-height in
 top-bar

open #74
---
 .../browse/res/templates/browse/object-header.html  |  1 -
 .../commonUI/general/res/css/theme-espresso.css     | 13 +++++++------
 .../general/res/sass/user-environ/_top-bar.scss     |  4 +---
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index f1667f5816..a9652631d9 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -21,7 +21,6 @@
 -->
 <div class='object-header object-header-mobile'>
     <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
-
     <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
     <span class="l-elem-wrapper">
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 6d3f9a5442..9605e2ee4e 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -4573,23 +4573,24 @@ input[type="text"] {
   right: 10px;
   bottom: auto;
   left: 10px;
-  height: 30px; }
-/* line 33, ../sass/user-environ/_top-bar.scss */
+  height: 30px;
+  line-height: 24px; }
+/* line 31, ../sass/user-environ/_top-bar.scss */
 .top-bar .title {
   color: #fff; }
-/* line 37, ../sass/user-environ/_top-bar.scss */
+/* line 35, ../sass/user-environ/_top-bar.scss */
 .top-bar .buttons-main {
   font-size: 0.8em;
   left: auto;
   text-align: right; }
-  /* line 42, ../sass/user-environ/_top-bar.scss */
+  /* line 40, ../sass/user-environ/_top-bar.scss */
   .top-bar .buttons-main .btn {
     margin-left: 5px; }
 
-/* line 50, ../sass/user-environ/_top-bar.scss */
+/* line 48, ../sass/user-environ/_top-bar.scss */
 .edit-mode .top-bar .buttons-main {
   white-space: nowrap; }
-  /* line 54, ../sass/user-environ/_top-bar.scss */
+  /* line 52, ../sass/user-environ/_top-bar.scss */
   .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .btn-menu span.buttons-main.l-click-area, .btn-menu .edit-mode .top-bar span.buttons-main.l-click-area {
     bottom: auto;
     left: auto; }
diff --git a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
index 19488e9c10..638edab9ec 100644
--- a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
@@ -25,11 +25,9 @@
 	    border-bottom: 1px solid $colorInteriorBorder;
         top: $bodyMargin; right: $bodyMargin; bottom: auto; left: $bodyMargin;
         height: $ueTopBarEditH;
+		line-height: $ueTopBarH;
     }
 	
-	.action {
-	}
-	
 	.title {
 		color: #fff;
 	}

From 76c4b96683ea5dd2e55da3c65813fff8ac3a284c Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 24 Aug 2015 15:24:35 -0700
Subject: [PATCH 148/266] [Mobile] IN PROGRESS: Menu hide/show fixes; font-size
 tweaking

open #74
Changed .right-repr to use translateX in phone portrait mode;
font-size tweaking;
Refactored css organization in mobile/_layout.scss;
---
 .../commonUI/browse/res/templates/browse.html |  15 +-
 .../general/res/css/theme-espresso.css        | 162 +++++++++---------
 platform/commonUI/general/res/css/tree.css    |  12 +-
 platform/commonUI/general/res/sass/_main.scss |   2 +-
 .../commonUI/general/res/sass/_mixins.scss    |   1 +
 .../general/res/sass/mobile/_constants.scss   |   2 +-
 .../general/res/sass/mobile/_layout.scss      |  82 +++++----
 .../general/res/sass/mobile/_tree.scss        |  13 +-
 .../res/sass/mobile/controls/_menus.scss      |   2 +-
 .../res/sass/user-environ/_object-browse.scss |   1 +
 10 files changed, 158 insertions(+), 134 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index ce7cb41cb1..8bb6b7fa8e 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -38,13 +38,14 @@
             </div>
 
             <mct-splitter class="mobile-hide"></mct-splitter>
-                    <div class='split-pane-component items pane mobile-pane right-repr'>
-                        <div class='holder abs l-mobile' id='content-area'>
-                            <mct-representation mct-object="navigatedObject" key="'browse-object'">
-                            </mct-representation>
-                        </div>
-                    <div class="left key-properties ui-symbol icon mobile-menu-icon" ng-click="treeSlide()">m</div>
-                    </div>
+
+            <div class='split-pane-component items pane mobile-pane right-repr'>
+                <div class='holder abs l-mobile' id='content-area'>
+                    <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                    </mct-representation>
+                </div>
+                <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide" ng-click="treeSlide()">m</div>
+            </div>
         </mct-split-pane>
     </div>
     <mct-include key="'bottombar'"></mct-include>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 9605e2ee4e..1ead13f014 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -870,7 +870,7 @@ mct-container {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
   /* line 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
-    right: 19px !important; } }
+    right: 10% !important; } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 120, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left-menu {
@@ -896,7 +896,8 @@ mct-container {
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
   /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
-    width: 19px !important; } }
+    left: 0 !important;
+    transform: translateX(90%); } }
 @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 144, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
@@ -910,38 +911,39 @@ mct-container {
   .browse-showtree .mobile-pane.right-repr {
     width: 70% !important; } }
 
-/* line 168, ../sass/mobile/_layout.scss */
-.mobile-menu-icon {
-  position: absolute;
-  top: 10px;
-  left: 10px; }
-
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 176, ../sass/mobile/_layout.scss */
-  .object-header {
-    position: relative;
-    left: 44px; }
-    /* line 181, ../sass/mobile/_layout.scss */
-    .object-header .label .context-available {
-      opacity: 1 !important; } }
+  /* line 171, ../sass/mobile/_layout.scss */
+  .mobile-menu-icon {
+    font-size: 110%;
+    position: absolute;
+    top: 12px;
+    left: 10px; }
+
+  /* line 178, ../sass/mobile/_layout.scss */
+  .object-browse-bar {
+    display: block !important;
+    left: 35px !important; }
+    /* line 183, ../sass/mobile/_layout.scss */
+    .object-browse-bar .context-available {
+      opacity: 1 !important; }
 
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
   /* line 188, ../sass/mobile/_layout.scss */
-  .desktop-hide {
-    display: none; } }
+  .tree-holder {
+    overflow-x: hidden !important; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 195, ../sass/mobile/_layout.scss */
-  .mobile-hide {
-    display: none; } }
+  /* line 192, ../sass/mobile/_layout.scss */
+  .mobile-disable-select {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 201, ../sass/mobile/_layout.scss */
-  .mobile-important-hide {
-    display: none !important; } }
+  /* line 197, ../sass/mobile/_layout.scss */
+  .mobile-hide,
+  .mobile-hide-important {
+    display: none !important; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 207, ../sass/mobile/_layout.scss */
+  /* line 202, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -956,10 +958,9 @@ mct-container {
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
-    opacity: 0; } }
+    opacity: 0; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 216, ../sass/mobile/_layout.scss */
+  /* line 207, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -975,25 +976,54 @@ mct-container {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     opacity: 1; } }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 225, ../sass/mobile/_layout.scss */
-  .phone-hide {
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+  /* line 214, ../sass/mobile/_layout.scss */
+  .desktop-hide {
     display: none; } }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 231, ../sass/mobile/_layout.scss */
-  .tree-holder {
-    overflow-x: hidden !important; } }
+/*
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 236, ../sass/mobile/_layout.scss */
-  .mobile-disable-select {
-    -moz-user-select: -moz-none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none; } }
+.mobile-back-hide {
+    @include phoneandtablet {
+        pointer-events: none;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 0;
+    }
+}
 
+
+// Hides objects on phone and tablet
+.mobile-back-unhide {
+    @include phoneandtablet {
+        pointer-events: all;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 1;
+    }
+}
+
+
+// Hides objects only on the phone
+.phone-hide {
+    @include phone {
+        display: none;
+    }
+}
+
+.tree-holder {
+    @include phoneandtablet {
+        .tree-holder {
+            overflow-x: hidden !important;
+        }
+    }
+}
+.mobile-disable-select {
+    @include phoneandtablet {
+        .mobile-disable-select {
+            @include user-select(none);
+        }
+    }
+}
+*/
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -3047,39 +3077,6 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 25, ../sass/mobile/controls/_menus.scss */
-.mobile-menu-icon {
-  display: inline-block; }
-  @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-    /* line 25, ../sass/mobile/controls/_menus.scss */
-    .mobile-menu-icon {
-      font-size: 21px; } }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 25, ../sass/mobile/controls/_menus.scss */
-    .mobile-menu-icon {
-      display: none; } }
-
 /* line 1, ../sass/controls/_time-controller.scss */
 .l-time-controller {
   position: relative;
@@ -4706,13 +4703,16 @@ input[type="text"] {
   left: 0px;
   width: auto;
   height: auto;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 28, ../sass/user-environ/_object-browse.scss */
+  /* line 29, ../sass/user-environ/_object-browse.scss */
   .object-browse-bar .left {
     padding-right: 5px; }
-    /* line 30, ../sass/user-environ/_object-browse.scss */
+    /* line 31, ../sass/user-environ/_object-browse.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 6ddab967f0..0566559e1b 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -324,28 +324,28 @@ ul.tree {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 30, ../sass/mobile/_tree.scss */
+  /* line 28, ../sass/mobile/_tree.scss */
   ul.tree li span.tree-item {
     height: 35px;
     line-height: 35px;
     margin-bottom: 0px; }
-    /* line 35, ../sass/mobile/_tree.scss */
+    /* line 33, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .view-control {
       position: absolute;
       font-size: 1.1em;
       right: 0px;
       width: 30px;
       text-align: center; }
-    /* line 44, ../sass/mobile/_tree.scss */
+    /* line 42, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .label {
       left: 0;
       right: 35px;
-      font-size: 1.2em; }
-      /* line 51, ../sass/mobile/_tree.scss */
+      font-size: 1.1em; }
+      /* line 50, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label .type-icon {
         top: 9px;
         bottom: auto;
         height: 16px; }
-  /* line 62, ../sass/mobile/_tree.scss */
+  /* line 61, ../sass/mobile/_tree.scss */
   ul.tree ul.tree {
     margin-left: 20px; } }
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 1073f325cc..18dc5aa1e1 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -48,7 +48,7 @@
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
-@import "mobile/controls/menus";
+//@import "mobile/controls/menus";
 @import "controls/time-controller";
 @import "edit/editor";
 @import "features/imagery";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index a42a2f480d..bc97b6a521 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -368,6 +368,7 @@
 }
 
 @mixin tmpBorder($c: #ffcc00, $a: 0.75) {
+    @inlude box-sizing(border-box);
     border: 1px dotted rgba($c, $a);
 }
 
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 9d7357126e..aedd4c3abd 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -81,7 +81,7 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-$phoneRepSizePortrait: 19px;
+$phoneRepSizePortrait: 10%;
 $phoneRepSizeLandscape: 60%;
 $tabletRepSizePortrait: 500px;
 $tabletRepSizeLandscape: 70%;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 9609ed1fdd..e13334ec61 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -149,7 +149,9 @@
         // On both phones and tablets, the width of
         // the right pane is specified
         @include phonePortrait {
-            width: $phoneRepSizePortrait !important;
+            //width: $phoneRepSizePortrait !important;
+            left: 0 !important;
+            transform: translateX(100% - $phoneRepSizePortrait);
         }
         @include phoneLandscape {
             width: $phoneRepSizeLandscape !important;
@@ -165,24 +167,48 @@
     }
 }
 
-.mobile-menu-icon {
-    position: absolute;
-    top: $bodyMargin; left: $bodyMargin;
-}
+@include phoneandtablet {
+    .mobile-menu-icon {
+        font-size: 110%;
+        position: absolute;
+        top: $bodyMargin + 2;
+        left: $bodyMargin;
+    }
 
-// Object header must be moved
-// over to make space for the 
-// hamburger icon
-.object-header {
-    @include phoneandtablet {
-        position: relative;
-        left: 44px;        
-        .label {
-            .context-available {
-                opacity: 1 !important;
-            }
+    .object-browse-bar {
+        //@include test();
+        display: block !important;
+        //font-size: 0.95em;
+        left: 35px !important;
+        .context-available {
+            opacity: 1 !important;
         }
     }
+
+    .tree-holder {
+        overflow-x: hidden !important;
+    }
+
+    .mobile-disable-select {
+        @include user-select(none);
+    }
+
+    // Hides objects on phone and tablet
+    .mobile-hide,
+    .mobile-hide-important {
+        display: none !important;
+    }
+
+    .mobile-back-hide {
+        pointer-events: none;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 0;
+    }
+    .mobile-back-unhide {
+        pointer-events: all;
+        @include trans-prop-nice(opacity, .4s);
+        opacity: 1;
+    }
 }
 
 .desktop-hide {
@@ -191,18 +217,7 @@
     }
 }
 
-// Hides objects on phone and tablet
-.mobile-hide {
-    @include phoneandtablet {
-        display: none;
-    }
-}
-
-.mobile-important-hide {
-    @include phoneandtablet {
-        display: none !important;
-    }
-}
+/*
 
 .mobile-back-hide {
     @include phoneandtablet {
@@ -212,6 +227,7 @@
     }
 }
 
+
 // Hides objects on phone and tablet
 .mobile-back-unhide {
     @include phoneandtablet {
@@ -221,6 +237,7 @@
     }
 }
 
+
 // Hides objects only on the phone
 .phone-hide {
     @include phone {
@@ -230,11 +247,16 @@
 
 .tree-holder {
     @include phoneandtablet {
-        overflow-x: hidden !important;
+        .tree-holder {
+            overflow-x: hidden !important;
+        }
     }
 }
 .mobile-disable-select {
     @include phoneandtablet {
-        @include user-select(none);
+        .mobile-disable-select {
+            @include user-select(none);
+        }
     }
 }
+*/
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 6918b8f217..5cc0ac1b25 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -20,10 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-
-ul.tree {
-    // Only applies to phones and tablets
-    @include phoneandtablet {
+@include phoneandtablet {
+    ul.tree {
         //@include menuUlReset();
         li {
             //border-top: 1px solid $colorInteriorBorder; // TEMP
@@ -39,7 +37,7 @@ ul.tree {
                     right: 0px;
                     width: $mobileTreeRightArrowW;
                     text-align: center;
-                }                   
+                }
 
                 .label {
                     // Designates the starting left margin
@@ -47,13 +45,14 @@ ul.tree {
                     // Also adds right space for selection button
                     left: 0;
                     right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
-                    font-size: 1.2em;
+                    font-size: 1.1em;
+                    //font-size: 1.2em; // CH CO
                     .type-icon {
                         @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
                     }
                     .title-label {
                     }
-                }             
+                }
             }
         }
 
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index d738f63d4a..e06fdb7979 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -30,5 +30,5 @@
     }
     @include desktop {
         display: none;
-    }       
+    }
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
index fc1065acec..3ec809343a 100644
--- a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
@@ -21,6 +21,7 @@
  *****************************************************************************/
 .object-browse-bar {
     @include absPosDefault();
+    @include box-sizing(border-box);
     height: $ueTopBarH;
     line-height: $ueTopBarH;
     white-space: nowrap;

From 6a2bdd103bf5e00e51137bc34e5b50f0a6518591 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 24 Aug 2015 16:17:58 -0700
Subject: [PATCH 149/266] [Mobile] Hide Tree

On selecting a node in the tree, if the
user is on phone and in portrait, than
emit up to the browse controller to call
treeSlide(), which will hide the tree menu.
Also adjusted the agent service to properly
check for orientation using window.innerHeight/
Width. Also created function for the selection
of an object in BrowseController.
---
 platform/commonUI/browse/src/BrowseController.js    |  6 ++++++
 platform/commonUI/general/bundle.json               |  3 +--
 .../commonUI/general/res/templates/tree-node.html   |  5 ++---
 .../general/src/controllers/TreeNodeController.js   | 13 +++++++++++++
 .../commonUI/general/src/services/AgentService.js   |  6 +++---
 5 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index c61260a400..65ac4467b8 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -187,6 +187,12 @@ define(
                 navigationService.removeListener(setNavigation);
             });
             
+            // If the user has selected an object (and is portrait
+            // on a phone), then hide the tree menu
+            $scope.$on("select-obj", function () {
+                $scope.treeSlide();
+            });
+            
             $scope.backArrow = navigateToParent;
             
             $scope.checkRoot = checkRoot;
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index f4ceed6ba1..7f5e2bfb86 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -11,8 +11,7 @@
             },
             {
                 "key": "agentService",
-                "implementation": "/services/AgentService.js",
-                "depends": [ "$window" ]
+                "implementation": "/services/AgentService.js"
             }
         ],
         "runs": [
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 7f54b97180..9b094fe81d 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -29,15 +29,14 @@
                 key="'label'"
 				mct-object="domainObject"
 				ng-model="ngModel"
-				ng-click="!treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
-                          toggle.toggle(); treeNode.trackExpansion()"
+				ng-click="!treeNode.checkMobile() ? treeNode.setObject(ngModel, domainObject) : toggle.toggle(); treeNode.trackExpansion()"
 				>
             </mct-representation>
             <span
 	            class='ui-symbol view-control'
                 mct-object="domainObject"
                 ng-model="ngModel"
-				ng-click="treeNode.checkMobile() ? ngModel.selectedObject = domainObject :
+				ng-click="treeNode.checkMobile() ? treeNode.setObject(ngModel, domainObject) :
                           toggle.toggle(); treeNode.trackExpansion()"
 				ng-if="model.composition !== undefined || treeNode.checkMobile()"
 				>
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index c55c3e2b6b..8d6becdfad 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -87,6 +87,17 @@ define(
                 }
             }
             
+            // Sets the selected object in the tree, to be the
+            // currently represented object. If the user is on phone
+            // and in portrait mode, than, hide the tree menu
+            function setObject(ngModel, domainObject) {
+                ngModel.selectedObject = domainObject;
+                if (agentService.getOrientation() === "portrait" &&
+                        agentService.isPhone(navigator.userAgent)) {
+                    $scope.$emit('select-obj');
+                }
+            }
+            
             function checkMobile() {
                 return agentService.isMobile(navigator.userAgent);
             }
@@ -157,6 +168,8 @@ define(
                 
                 checkMobile: checkMobile,
                 
+                setObject: setObject,
+                
                 /**
                  * Check if this not has ever been expanded.
                  * @returns true if it has been expanded
diff --git a/platform/commonUI/general/src/services/AgentService.js b/platform/commonUI/general/src/services/AgentService.js
index 0d43cfdfa6..fa790e966f 100644
--- a/platform/commonUI/general/src/services/AgentService.js
+++ b/platform/commonUI/general/src/services/AgentService.js
@@ -35,7 +35,7 @@ define(
          * info using a comparison between the userAgent and key
          * device names
          */
-        function AgentService($window) {
+        function AgentService() {
             
             // Gets the UA name if it is one of the following.
             // If it is not (a desktop for example) nothing is
@@ -69,9 +69,9 @@ define(
             // Returns the orientation of the device based on the
             // device's window dimensions
             function getOrientation() {
-                if ($window.outerWidth > $window.outerHeight) {
+                if (window.innerWidth > window.innerHeight) {
                     return "landscape";
-                } else if ($window.outerWidth < $window.outerHeight) {
+                } else if (window.innerWidth < window.innerHeight) {
                     return "portrait";
                 }
             }

From 69c6d4bd262bc0371df683b70bc6acb4203c375f Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 24 Aug 2015 16:31:38 -0700
Subject: [PATCH 150/266] [Mobile] IN PROGRESS: Tweaks to labels;

open #74
Cleaned up layout of bottom-bar;
Fixed class selector for ue-bottom-bar;
---
 platform/commonUI/general/res/css/items.css   | 24 +++++++++----------
 .../general/res/css/theme-espresso.css        |  6 ++---
 .../general/res/sass/items/_item.scss         |  3 ++-
 .../res/sass/user-environ/_layout.scss        |  2 +-
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index 9ea92fa707..cf77cbed9a 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -234,12 +234,12 @@
     /* line 79, ../sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
       top: auto;
-      height: 30px; }
-    /* line 84, ../sass/items/_item.scss */
+      line-height: 110%; }
+    /* line 85, ../sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 90, ../sass/items/_item.scss */
+      /* line 91, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         overflow: false;
         position: absolute;
@@ -255,7 +255,7 @@
         bottom: auto;
         height: 102px;
         top: 30px; }
-        /* line 102, ../sass/items/_item.scss */
+        /* line 103, ../sass/items/_item.scss */
         .items-holder .item.grid-item .item-main .item-type .l-icon-link {
           color: #49dedb;
           height: auto;
@@ -265,7 +265,7 @@
           left: 0px;
           bottom: 10px;
           z-index: 2; }
-      /* line 115, ../sass/items/_item.scss */
+      /* line 116, ../sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -285,17 +285,17 @@
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 127, ../sass/items/_item.scss */
+    /* line 128, ../sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: #cccccc; }
-    /* line 132, ../sass/items/_item.scss */
+    /* line 133, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       font-size: 0.8em; }
-    /* line 135, ../sass/items/_item.scss */
+    /* line 136, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -332,16 +332,16 @@
       /* line 175, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 140, ../sass/items/_item.scss */
+      /* line 141, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 141, ../sass/items/_item.scss */
+      /* line 142, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 142, ../sass/items/_item.scss */
+      /* line 143, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 144, ../sass/items/_item.scss */
+      /* line 145, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 1ead13f014..61044025cd 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -594,7 +594,7 @@ mct-container {
   .user-environ .edit-area .work-area {
     top: 40px; }
 /* line 129, ../sass/user-environ/_layout.scss */
-.user-environ .bottom-bar {
+.user-environ .ue-bottom-bar {
   overflow: hidden;
   position: absolute;
   top: 0;
@@ -606,10 +606,10 @@ mct-container {
   top: auto;
   height: 25px; }
   /* line 134, ../sass/user-environ/_layout.scss */
-  .user-environ .bottom-bar .status-holder {
+  .user-environ .ue-bottom-bar .status-holder {
     z-index: 1; }
   /* line 138, ../sass/user-environ/_layout.scss */
-  .user-environ .bottom-bar .app-logo {
+  .user-environ .ue-bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index d9c9d8613b..c04568d8fa 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -78,7 +78,8 @@
                 }
                 &.bottom-bar {
                     top: auto;
-                    height: $ueBrowseGridItemBottomBarH;
+                    //height: $ueBrowseGridItemBottomBarH;
+                    line-height: 110%;
                 }
             }
             .item-main {
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 7bca0d480b..9538a2bb74 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -126,7 +126,7 @@
 		}
 	}
 
-	.bottom-bar {
+	.ue-bottom-bar {
         //@include absPosDefault($bodyMargin);
 		@include absPosDefault(0);// New status bar design
 		top: auto;

From 5184e08a5b262aafd9e780b8b453c5c12d73e43d Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 24 Aug 2015 16:45:55 -0700
Subject: [PATCH 151/266] [Mobile] IN PROGRESS: Tweak to TypeImpl to return
 glyph for unknown types

open #74
Thanks Victor!;
---
 platform/core/bundle.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/platform/core/bundle.json b/platform/core/bundle.json
index 4b33f48f35..c8c56299f6 100644
--- a/platform/core/bundle.json
+++ b/platform/core/bundle.json
@@ -142,7 +142,10 @@
             {
                 "key": "unknown",
                 "name": "Unknown Type",
-                "glyph": "?"
+                "glyph": "\u003f"
+            },
+            {
+                "glyph": "\u003f"
             }
         ],
         "capabilities": [

From aca06c6007197ac6423c7c094dcc74da13af6bfa Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 24 Aug 2015 16:46:48 -0700
Subject: [PATCH 152/266] [Action] Remove Action Merged

Remove Action merged to allow removal of
parent or current selected object, then
navigation to lowest existing parent if
currently located in deleted object.
---
 .../commonUI/edit/src/actions/RemoveAction.js | 32 +++++++++++++------
 .../edit/test/actions/RemoveActionSpec.js     | 19 +++++++++--
 2 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/platform/commonUI/edit/src/actions/RemoveAction.js b/platform/commonUI/edit/src/actions/RemoveAction.js
index 9e0e723200..e89ad3ed2d 100644
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -41,7 +41,8 @@ define(
          * @memberof module:editor/actions/remove-action
          */
         function RemoveAction($q, navigationService, context) {
-            var object = (context || {}).domainObject;
+            var object = (context || {}).domainObject,
+                ROOT_ID = "ROOT";
 
             /**
              * Check whether an object ID matches the ID of the object being
@@ -68,12 +69,25 @@ define(
                 var persistence = domainObject.getCapability('persistence');
                 return persistence && persistence.persist();
             }
-
-            // Checks current object with object being removed
-            function checkCurrentObjectNavigation(object, parent) {
-                var currentObj = navigationService.getNavigation();
-                if (currentObj.getId() === object.getId()) {
-                    navigationService.setNavigation(parent);
+            
+            // Checks current object and ascendants of current
+            // object with object being removed, if the current
+            // object or any in the current object's path is being removed,
+            // navigate back to parent of removed object. 
+            function checkObjectNavigation(object, parentObject) {
+                // Traverse object starts at current location
+                var traverseObject = navigationService.getNavigation();
+                
+                // Stop at ROOT of folder path
+                while(traverseObject.getId() !== ROOT_ID) {
+                    // If traverse object is object being removed
+                    // navigate to parent of removed object
+                    if (traverseObject.getId() === object.getId()) {
+                        navigationService.setNavigation(parentObject);
+                        return;
+                    }
+                    // Traverses to parent
+                    traverseObject = traverseObject.getCapability('context').getParent();
                 }
             }
             
@@ -86,8 +100,8 @@ define(
             function removeFromContext(object) {
                 var contextCapability = object.getCapability('context'),
                     parent = contextCapability.getParent();
-                // Navigates to parent if deleting current object
-                checkCurrentObjectNavigation(object, parent);
+                // Navigates through/ascendant if deleting current object
+                checkObjectNavigation(object, parent)
                 $q.when(
                     parent.useCapability('mutation', doMutate)
                 ).then(function () {
diff --git a/platform/commonUI/edit/test/actions/RemoveActionSpec.js b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
index e6b667d8b2..072094ed1d 100644
--- a/platform/commonUI/edit/test/actions/RemoveActionSpec.js
+++ b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
@@ -31,6 +31,7 @@ define(
                 mockNavigationService,
                 mockDomainObject,
                 mockParent,
+                mockGrandparent,
                 mockContext,
                 mockMutation,
                 mockPersistence,
@@ -56,7 +57,7 @@ define(
                     [ "getId", "getCapability" ]
                 );
                 mockQ = { when: mockPromise };
-                mockParent = {
+                mockGrandparent = {
                     getModel: function () {
                         return model;
                     },
@@ -70,6 +71,20 @@ define(
                         return "test";
                     }
                 };
+                mockParent = {
+                    getModel: function () {
+                        return model;
+                    },
+                    getCapability: function (k) {
+                        return capabilities[k];
+                    },
+                    useCapability: function (k, v) {
+                        return capabilities[k].invoke(v);
+                    },
+                    getParent: function () {
+                        return mockGrandparent;
+                    }
+                };
                 mockContext = jasmine.createSpyObj("context", [ "getParent" ]);
                 mockMutation = jasmine.createSpyObj("mutation", [ "invoke" ]);
                 mockPersistence = jasmine.createSpyObj("persistence", [ "persist" ]);
@@ -97,7 +112,7 @@ define(
                     type: mockType
                 };
                 model = {
-                    composition: [ "a", "test", "b", "c" ]
+                    composition: [ "a", "b", "test", "c" ]
                 };
 
                 actionContext = { domainObject: mockDomainObject };

From 13b66cd215d5aa371a092e04ffcb2a750ef49c03 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 24 Aug 2015 17:04:38 -0700
Subject: [PATCH 153/266] [Mobile] IN PROGRESS: Only display custom scrollbars
 in desktop mode

open #74
---
 .../general/res/css/theme-espresso.css        | 90 +++++++++----------
 .../general/res/sass/controls/_controls.scss  | 38 ++++----
 2 files changed, 65 insertions(+), 63 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 61044025cd..67e258e908 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -2765,54 +2765,54 @@ label.checkbox.custom {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
-/* line 470, ../sass/controls/_controls.scss */
-::-webkit-scrollbar {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  background-color: rgba(0, 0, 0, 0.4);
-  border-bottom: 1px solid rgba(77, 77, 77, 0.4);
-  border-right: 1px solid rgba(77, 77, 77, 0.4);
-  height: 10px;
-  width: 10px; }
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+  /* line 471, ../sass/controls/_controls.scss */
+  ::-webkit-scrollbar {
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
+    -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
+    box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-bottom: 1px solid rgba(77, 77, 77, 0.4);
+    border-right: 1px solid rgba(77, 77, 77, 0.4);
+    height: 10px;
+    width: 10px; }
 
-/* line 476, ../sass/controls/_controls.scss */
-::-webkit-scrollbar-thumb {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #666666), color-stop(100%, #595959));
-  background-image: -moz-linear-gradient(#666666, #595959 20px);
-  background-image: -webkit-linear-gradient(#666666, #595959 20px);
-  background-image: linear-gradient(#666666, #595959 20px);
-  -moz-border-radius: 1px;
-  -webkit-border-radius: 1px;
-  border-radius: 1px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  border-top: 1px solid gray; }
-  /* line 483, ../sass/controls/_controls.scss */
-  ::-webkit-scrollbar-thumb:hover {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  /* line 477, ../sass/controls/_controls.scss */
+  ::-webkit-scrollbar-thumb {
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #808080), color-stop(100%, #737373));
-    background-image: -moz-linear-gradient(#808080, #737373 20px);
-    background-image: -webkit-linear-gradient(#808080, #737373 20px);
-    background-image: linear-gradient(#808080, #737373 20px); }
-
-/* line 488, ../sass/controls/_controls.scss */
-::-webkit-scrollbar-corner {
-  background: rgba(0, 0, 0, 0.4); }
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #666666), color-stop(100%, #595959));
+    background-image: -moz-linear-gradient(#666666, #595959 20px);
+    background-image: -webkit-linear-gradient(#666666, #595959 20px);
+    background-image: linear-gradient(#666666, #595959 20px);
+    -moz-border-radius: 1px;
+    -webkit-border-radius: 1px;
+    border-radius: 1px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    border-top: 1px solid gray; }
+    /* line 484, ../sass/controls/_controls.scss */
+    ::-webkit-scrollbar-thumb:hover {
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #808080), color-stop(100%, #737373));
+      background-image: -moz-linear-gradient(#808080, #737373 20px);
+      background-image: -webkit-linear-gradient(#808080, #737373 20px);
+      background-image: linear-gradient(#808080, #737373 20px); }
 
+  /* line 489, ../sass/controls/_controls.scss */
+  ::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 61aabb1fa3..b2a0352594 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -467,24 +467,26 @@ label.checkbox.custom {
 
 /******************************************************** BROWSER ELEMENTS */
 
-::-webkit-scrollbar {
-	@include sliderTrack();
-	height: $scrollbarTrackSize;
-	width: $scrollbarTrackSize;
-}
-
-::-webkit-scrollbar-thumb {
-	$bg: lighten($colorBodyBg, 10%);
-	@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
-	@include border-radius(1px);
-	@include box-sizing(border-box);
-	@include boxShdwSubtle();
-	border-top: 1px solid lighten($bg, 20%);
-	&:hover {
-		@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
+@include desktop {
+	::-webkit-scrollbar {
+		@include sliderTrack();
+		height: $scrollbarTrackSize;
+		width: $scrollbarTrackSize;
 	}
-}
 
-::-webkit-scrollbar-corner {
-	background: rgba(#000, 0.4);
+	::-webkit-scrollbar-thumb {
+		$bg: lighten($colorBodyBg, 10%);
+		@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
+		@include border-radius(1px);
+		@include box-sizing(border-box);
+		@include boxShdwSubtle();
+		border-top: 1px solid lighten($bg, 20%);
+		&:hover {
+			@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
+		}
+	}
+
+	::-webkit-scrollbar-corner {
+		background: rgba(#000, 0.4);
+	}
 }
\ No newline at end of file

From 7542c6d49ab05d2860a7f43c180919eb05666b5e Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 25 Aug 2015 09:41:38 -0700
Subject: [PATCH 154/266] [Mobile] IN PROGRESS: Cleanups on .btn for
 line-height, sizing, etc.

open #74
---
 .../general/res/css/theme-espresso.css        | 308 +++++++++---------
 .../general/res/sass/controls/_buttons.scss   |   3 +-
 .../general/res/sass/controls/_controls.scss  |  57 ++--
 .../general/res/sass/user-environ/_frame.scss |  18 +-
 .../res/sass/user-environ/_object-browse.scss |   3 +-
 .../res/templates/controls/switcher.html      |   2 +-
 6 files changed, 195 insertions(+), 196 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 67e258e908..28337e74f6 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -1755,37 +1755,37 @@ table {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
-  line-height: 1.5em;
+  line-height: 150%;
   padding: 0 7.5px;
   text-decoration: none; }
-  /* line 32, ../sass/controls/_buttons.scss */
+  /* line 33, ../sass/controls/_buttons.scss */
   .btn.lg, .btn.create-btn,
   .l-btn.lg,
   .l-btn.create-btn {
     height: 24px;
     line-height: 22px;
     padding: 0 22.5px; }
-  /* line 41, ../sass/controls/_buttons.scss */
+  /* line 42, ../sass/controls/_buttons.scss */
   .btn.create-btn:before,
   .l-btn.create-btn:before {
     content: "+";
     font-family: symbolsfont;
     font-size: 0.8em; }
-  /* line 46, ../sass/controls/_buttons.scss */
+  /* line 47, ../sass/controls/_buttons.scss */
   .btn.create-btn .menu,
   .l-btn.create-btn .menu {
     margin-left: -7.5px; }
-  /* line 53, ../sass/controls/_buttons.scss */
+  /* line 54, ../sass/controls/_buttons.scss */
   .btn.sm,
   .l-btn.sm {
     padding: 0 5px; }
-  /* line 56, ../sass/controls/_buttons.scss */
+  /* line 57, ../sass/controls/_buttons.scss */
   .btn.vsm,
   .l-btn.vsm {
     padding: 0 2.5px; }
 
 /*********************************** STYLE STYLES */
-/* line 62, ../sass/controls/_buttons.scss */
+/* line 63, ../sass/controls/_buttons.scss */
 .btn,
 .s-btn,
 .icon-btn,
@@ -1799,7 +1799,7 @@ table {
   text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
   cursor: pointer;
   text-decoration: none; }
-  /* line 71, ../sass/controls/_buttons.scss */
+  /* line 72, ../sass/controls/_buttons.scss */
   .btn.major,
   .s-btn.major,
   .major.icon-btn,
@@ -1848,7 +1848,7 @@ table {
     .major.btn-menu.icon-btn .invoke-menu,
     .major.btn-menu.s-icon-btn .invoke-menu {
       color: #52d4ff; }
-    /* line 76, ../sass/controls/_buttons.scss */
+    /* line 77, ../sass/controls/_buttons.scss */
     .btn.major:hover,
     .s-btn.major:hover,
     .major.icon-btn:hover,
@@ -1896,13 +1896,13 @@ table {
       .major.icon-btn:hover.btn-menu .invoke-menu,
       .major.s-icon-btn:hover.btn-menu .invoke-menu {
         color: #6bdaff; }
-    /* line 80, ../sass/controls/_buttons.scss */
+    /* line 81, ../sass/controls/_buttons.scss */
     .btn.major .invoke-menu,
     .s-btn.major .invoke-menu,
     .major.icon-btn .invoke-menu,
     .major.s-icon-btn .invoke-menu {
       color: #ccf2ff; }
-  /* line 84, ../sass/controls/_buttons.scss */
+  /* line 85, ../sass/controls/_buttons.scss */
   .btn.subtle,
   .s-btn.subtle,
   .subtle.icon-btn,
@@ -1950,7 +1950,7 @@ table {
     .subtle.btn-menu.icon-btn .invoke-menu,
     .subtle.btn-menu.s-icon-btn .invoke-menu {
       color: #a8a8a8; }
-  /* line 87, ../sass/controls/_buttons.scss */
+  /* line 88, ../sass/controls/_buttons.scss */
   .btn.very-subtle, .btn.s-very-subtle,
   .s-btn.very-subtle,
   .very-subtle.icon-btn,
@@ -2010,7 +2010,7 @@ table {
     .s-very-subtle.btn-menu.icon-btn .invoke-menu,
     .s-very-subtle.btn-menu.s-icon-btn .invoke-menu {
       color: #757575; }
-    /* line 90, ../sass/controls/_buttons.scss */
+    /* line 91, ../sass/controls/_buttons.scss */
     .btn.very-subtle.paused, .btn.s-very-subtle.paused,
     .s-btn.very-subtle.paused,
     .very-subtle.paused.icon-btn,
@@ -2070,7 +2070,7 @@ table {
       .s-very-subtle.paused.btn-menu.icon-btn .invoke-menu,
       .s-very-subtle.paused.btn-menu.s-icon-btn .invoke-menu {
         color: #feb04d; }
-      /* line 92, ../sass/controls/_buttons.scss */
+      /* line 93, ../sass/controls/_buttons.scss */
       .btn.very-subtle.paused .icon:before, .btn.s-very-subtle.paused .icon:before,
       .s-btn.very-subtle.paused .icon:before,
       .very-subtle.paused.icon-btn .icon:before,
@@ -2080,31 +2080,31 @@ table {
       .s-very-subtle.paused.s-icon-btn .icon:before {
         content: "\0000EF"; }
 
-/* line 99, ../sass/controls/_buttons.scss */
+/* line 100, ../sass/controls/_buttons.scss */
 .icon-btn,
 .s-icon-btn {
   font-size: 1em; }
-  /* line 103, ../sass/controls/_buttons.scss */
+  /* line 104, ../sass/controls/_buttons.scss */
   .icon-btn .icon,
   .s-icon-btn .icon {
     color: #0099cc; }
-  /* line 107, ../sass/controls/_buttons.scss */
+  /* line 108, ../sass/controls/_buttons.scss */
   .icon-btn.paused .icon,
   .s-icon-btn.paused .icon {
     color: #fff; }
-  /* line 115, ../sass/controls/_buttons.scss */
+  /* line 116, ../sass/controls/_buttons.scss */
   .icon-btn:not(.disabled):not(.paused):hover .icon,
   .s-icon-btn:not(.disabled):not(.paused):hover .icon {
     color: #33ccff; }
-  /* line 122, ../sass/controls/_buttons.scss */
+  /* line 123, ../sass/controls/_buttons.scss */
   .icon-btn.labeled,
   .s-icon-btn.labeled {
     padding: 0 3.75px; }
-    /* line 127, ../sass/controls/_buttons.scss */
+    /* line 128, ../sass/controls/_buttons.scss */
     .icon-btn.labeled .title-label,
     .s-icon-btn.labeled .title-label {
       margin-left: 5px; }
-  /* line 132, ../sass/controls/_buttons.scss */
+  /* line 133, ../sass/controls/_buttons.scss */
   .icon-btn.pause-play,
   .s-icon-btn.pause-play {
     /*		&.paused {
@@ -2112,17 +2112,17 @@ table {
     				@include pulse(500ms);
     			}
     		}*/ }
-    /* line 138, ../sass/controls/_buttons.scss */
+    /* line 139, ../sass/controls/_buttons.scss */
     .icon-btn.pause-play .icon:before,
     .s-icon-btn.pause-play .icon:before {
       content: "\0000F1"; }
-  /* line 144, ../sass/controls/_buttons.scss */
+  /* line 145, ../sass/controls/_buttons.scss */
   .icon-btn.show-thumbs .icon:before,
   .s-icon-btn.show-thumbs .icon:before {
     content: "\000039"; }
 
 /*********************************** LAYOUT STYLES */
-/* line 151, ../sass/controls/_buttons.scss */
+/* line 152, ../sass/controls/_buttons.scss */
 span.btn,
 span.btn span,
 span.l-btn,
@@ -2315,11 +2315,20 @@ a.l-btn span {
     overflow-y: auto;
     overflow-x: hidden; }
 
-/* line 105, ../sass/controls/_controls.scss */
-.btn-bar .btn,
-.btn-bar .btn-set,
-.btn-bar .t-btn {
-  display: inline-block; }
+/* line 103, ../sass/controls/_controls.scss */
+.btn-bar {
+  /*	.btn,
+  	.btn-set,
+  	.t-btn {
+  		display: inline-block;
+  		//		margin-left: $interiorMargin;
+  	}
+  	.btn,
+  	.t-btn {
+  		&:first-child {
+  			//			margin-left: 0;
+  		}
+  	}*/ }
 
 /* line 119, ../sass/controls/_controls.scss */
 .l-composite-control {
@@ -2353,51 +2362,41 @@ a.l-btn span {
 .s-local-controls {
   font-size: 0.7rem; }
 
-/* line 156, ../sass/controls/_controls.scss */
+/*
 .btn-set {
-  display: inline-block;
-  position: relative; }
-  /* line 160, ../sass/controls/_controls.scss */
-  .btn-set .btn,
-  .btn-set .t-btn {
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    border-left: 1px solid #666666;
-    margin-left: 0; }
-    /* line 165, ../sass/controls/_controls.scss */
-    .btn-set .btn:first-child,
-    .btn-set .t-btn:first-child {
-      border-left: none;
-      -moz-border-radius-topleft: 3px;
-      -webkit-border-top-left-radius: 3px;
-      border-top-left-radius: 3px;
-      -moz-border-radius-bottomleft: 3px;
-      -webkit-border-bottom-left-radius: 3px;
-      border-bottom-left-radius: 3px; }
-    /* line 169, ../sass/controls/_controls.scss */
-    .btn-set .btn:last-child,
-    .btn-set .t-btn:last-child {
-      -moz-border-radius-topright: 3px;
-      -webkit-border-top-right-radius: 3px;
-      border-top-right-radius: 3px;
-      -moz-border-radius-bottomright: 3px;
-      -webkit-border-bottom-right-radius: 3px;
-      border-bottom-right-radius: 3px; }
-
-/* line 175, ../sass/controls/_controls.scss */
+	// Buttons that have a very tight conceptual grouping - no internal space between them.
+	display: inline-block;
+	position: relative;
+	.btn,
+	.t-btn {
+		@include border-radius(0);
+		border-left: 1px solid lighten($colorBodyBg, 20%);
+		margin-left: 0;
+		&:first-child {
+			border-left: none;
+			@include border-left-radius($controlCr);
+		}
+		&:last-child {
+			@include border-right-radius($controlCr);
+		}
+	}
+}
+*/
+/* line 177, ../sass/controls/_controls.scss */
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
+.object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
 .top-bar .buttons-main .t-btn,
+.top-bar .view-switcher,
 .tool-bar .btn,
 .tool-bar .t-btn {
   display: inline-block;
   font-size: 11.25px;
-  height: 25px;
-  line-height: 22px; }
+  line-height: 200%;
+  vertical-align: top; }
 
-/* line 194, ../sass/controls/_controls.scss */
+/* line 192, ../sass/controls/_controls.scss */
 label.checkbox.custom {
   cursor: pointer;
   display: inline-block;
@@ -2406,13 +2405,13 @@ label.checkbox.custom {
   padding-left: 19px;
   position: relative;
   vertical-align: top; }
-  /* line 204, ../sass/controls/_controls.scss */
+  /* line 202, ../sass/controls/_controls.scss */
   label.checkbox.custom em {
     color: #999;
     display: inline-block;
     height: 14px;
     min-width: 14px; }
-    /* line 209, ../sass/controls/_controls.scss */
+    /* line 207, ../sass/controls/_controls.scss */
     label.checkbox.custom em:before {
       -moz-border-radius: 1.5px;
       -webkit-border-radius: 1.5px;
@@ -2431,51 +2430,51 @@ label.checkbox.custom {
       top: 0;
       position: absolute;
       text-align: center; }
-  /* line 227, ../sass/controls/_controls.scss */
+  /* line 225, ../sass/controls/_controls.scss */
   label.checkbox.custom.no-text {
     overflow: hidden;
     margin-right: 0;
     padding-left: 0;
     height: 14px;
     width: 14px; }
-    /* line 233, ../sass/controls/_controls.scss */
+    /* line 231, ../sass/controls/_controls.scss */
     label.checkbox.custom.no-text em {
       overflow: hidden; }
-  /* line 237, ../sass/controls/_controls.scss */
+  /* line 235, ../sass/controls/_controls.scss */
   label.checkbox.custom input {
     display: none; }
-    /* line 239, ../sass/controls/_controls.scss */
+    /* line 237, ../sass/controls/_controls.scss */
     label.checkbox.custom input:checked ~ em:before {
       background: #0099cc;
       color: #ccf2ff;
       content: "2"; }
 
-/* line 247, ../sass/controls/_controls.scss */
+/* line 245, ../sass/controls/_controls.scss */
 .input-labeled {
   margin-left: 5px; }
-  /* line 249, ../sass/controls/_controls.scss */
+  /* line 247, ../sass/controls/_controls.scss */
   .input-labeled label {
     display: inline-block;
     margin-right: 3px; }
-  /* line 253, ../sass/controls/_controls.scss */
+  /* line 251, ../sass/controls/_controls.scss */
   .input-labeled.inline {
     display: inline-block; }
-  /* line 256, ../sass/controls/_controls.scss */
+  /* line 254, ../sass/controls/_controls.scss */
   .input-labeled:first-child {
     margin-left: 0; }
 
-/* line 261, ../sass/controls/_controls.scss */
+/* line 259, ../sass/controls/_controls.scss */
 .btn-menu label.checkbox.custom {
   margin-left: 5px; }
 
-/* line 266, ../sass/controls/_controls.scss */
+/* line 264, ../sass/controls/_controls.scss */
 .item .checkbox.checked label {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   border-bottom: none; }
 
-/* line 272, ../sass/controls/_controls.scss */
+/* line 270, ../sass/controls/_controls.scss */
 .btn-menu {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2528,54 +2527,49 @@ label.checkbox.custom {
   /* line 175, ../sass/_mixins.scss */
   .btn-menu.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 284, ../sass/controls/_controls.scss */
+  /* line 282, ../sass/controls/_controls.scss */
   .btn-menu:not(.disabled):hover {
     color: #cccccc; }
-  /* line 309, ../sass/controls/_controls.scss */
+  /* line 307, ../sass/controls/_controls.scss */
   .btn-menu .name {
     margin-left: 5px; }
-  /* line 312, ../sass/controls/_controls.scss */
+  /* line 310, ../sass/controls/_controls.scss */
   .btn-menu .menu {
     position: absolute;
     left: 0;
     text-align: left; }
-    /* line 317, ../sass/controls/_controls.scss */
+    /* line 315, ../sass/controls/_controls.scss */
     .btn-menu .menu .ui-symbol.icon {
       width: 12px; }
 
-/* line 323, ../sass/controls/_controls.scss */
-.top-bar .btn-menu {
-  height: 25px;
-  line-height: 25px;
-  padding-right: 10px; }
-  /* line 331, ../sass/controls/_controls.scss */
-  .top-bar .btn-menu.browse-btn {
-    margin-right: 5px;
-    padding-left: 25px; }
-    /* line 334, ../sass/controls/_controls.scss */
-    .top-bar .btn-menu.browse-btn .badge {
-      -moz-border-radius: 4.5px;
-      -webkit-border-radius: 4.5px;
-      border-radius: 4.5px;
-      display: block;
-      font-size: 1em;
-      line-height: 15px;
-      position: absolute;
-      top: 5px;
-      left: 5px;
-      bottom: 5px;
-      right: auto;
-      width: 15px;
-      height: auto; }
+/* line 329, ../sass/controls/_controls.scss */
+.top-bar .btn-menu.browse-btn {
+  margin-right: 5px;
+  padding-left: 25px; }
+  /* line 332, ../sass/controls/_controls.scss */
+  .top-bar .btn-menu.browse-btn .badge {
+    -moz-border-radius: 4.5px;
+    -webkit-border-radius: 4.5px;
+    border-radius: 4.5px;
+    display: block;
+    font-size: 1em;
+    line-height: 15px;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    bottom: 5px;
+    right: auto;
+    width: 15px;
+    height: auto; }
 
-/* line 350, ../sass/controls/_controls.scss */
+/* line 348, ../sass/controls/_controls.scss */
 .context-available {
   color: #0099cc; }
-  /* line 354, ../sass/controls/_controls.scss */
+  /* line 351, ../sass/controls/_controls.scss */
   .context-available:hover {
     color: deepskyblue; }
 
-/* line 359, ../sass/controls/_controls.scss */
+/* line 356, ../sass/controls/_controls.scss */
 .view-switcher {
   -moz-transition-property: visibility, opacity, background-color, border-color;
   -o-transition-property: visibility, opacity, background-color, border-color;
@@ -2594,53 +2588,51 @@ label.checkbox.custom {
 /* line 364, ../sass/controls/_controls.scss */
 .object-header {
   font-size: 1em; }
-  /* line 373, ../sass/controls/_controls.scss */
-  .object-header .title-label,
-  .object-header .type-icon,
-  .object-header .context-available {
-    vertical-align: middle; }
-  /* line 379, ../sass/controls/_controls.scss */
+  /* line 374, ../sass/controls/_controls.scss */
   .object-header > .type-icon {
     font-size: 120%;
     float: left;
     margin-right: 5px; }
-  /* line 386, ../sass/controls/_controls.scss */
+  /* line 380, ../sass/controls/_controls.scss */
   .object-header .l-elem-wrapper {
     display: flex;
     flex-flow: row nowrap;
     justify-content: flex-start; }
-  /* line 392, ../sass/controls/_controls.scss */
+  /* line 386, ../sass/controls/_controls.scss */
   .object-header .action {
     margin-right: 5px; }
-  /* line 396, ../sass/controls/_controls.scss */
+  /* line 390, ../sass/controls/_controls.scss */
   .object-header .title-label {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: white;
     padding-right: 0.35em; }
-  /* line 403, ../sass/controls/_controls.scss */
+  /* line 397, ../sass/controls/_controls.scss */
   .object-header .context-available {
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-property: opacity;
-    -moz-transition-duration: 0.25s;
-    -o-transition-duration: 0.25s;
-    -webkit-transition-duration: 0.25s;
-    transition-duration: 0.25s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    opacity: 0;
     font-size: 0.7em; }
-  /* line 411, ../sass/controls/_controls.scss */
-  .object-header:hover .context-available {
-    opacity: 1; }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 402, ../sass/controls/_controls.scss */
+    .object-header .context-available {
+      -moz-transition-property: opacity;
+      -o-transition-property: opacity;
+      -webkit-transition-property: opacity;
+      transition-property: opacity;
+      -moz-transition-duration: 0.25s;
+      -o-transition-duration: 0.25s;
+      -webkit-transition-duration: 0.25s;
+      transition-duration: 0.25s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      opacity: 0; }
+    /* line 407, ../sass/controls/_controls.scss */
+    .object-header:hover .context-available {
+      opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 423, ../sass/controls/_controls.scss */
+/* line 420, ../sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2661,7 +2653,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 434, ../sass/controls/_controls.scss */
+/* line 431, ../sass/controls/_controls.scss */
 .slider .knob {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2744,12 +2736,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 445, ../sass/controls/_controls.scss */
+  /* line 442, ../sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 452, ../sass/controls/_controls.scss */
+/* line 449, ../sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2760,13 +2752,13 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 462, ../sass/controls/_controls.scss */
+  /* line 459, ../sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 471, ../sass/controls/_controls.scss */
+  /* line 468, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2783,7 +2775,7 @@ label.checkbox.custom {
     height: 10px;
     width: 10px; }
 
-  /* line 477, ../sass/controls/_controls.scss */
+  /* line 474, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2801,7 +2793,7 @@ label.checkbox.custom {
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border-top: 1px solid gray; }
-    /* line 484, ../sass/controls/_controls.scss */
+    /* line 481, ../sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -2810,7 +2802,7 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#808080, #737373 20px);
       background-image: linear-gradient(#808080, #737373 20px); }
 
-  /* line 489, ../sass/controls/_controls.scss */
+  /* line 486, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
@@ -4531,14 +4523,18 @@ input[type="text"] {
   right: 5px;
   bottom: 5px;
   left: 5px; }
-/* line 53, ../sass/user-environ/_frame.scss */
+/* line 51, ../sass/user-environ/_frame.scss */
 .frame.frame-template .view-switcher {
-  opacity: 0;
+  line-height: 16px;
   z-index: 10; }
-/* line 57, ../sass/user-environ/_frame.scss */
-.frame.frame-template:hover .view-switcher {
-  opacity: 1; }
-/* line 65, ../sass/user-environ/_frame.scss */
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+  /* line 58, ../sass/user-environ/_frame.scss */
+  .frame.frame-template .view-switcher {
+    opacity: 0; }
+  /* line 61, ../sass/user-environ/_frame.scss */
+  .frame.frame-template:hover .view-switcher {
+    opacity: 1; } }
+/* line 69, ../sass/user-environ/_frame.scss */
 .frame .view-switcher .name {
   display: none; }
 
@@ -4695,12 +4691,12 @@ input[type="text"] {
  *****************************************************************************/
 /* line 22, ../sass/user-environ/_object-browse.scss */
 .object-browse-bar {
-  overflow: hidden;
+  overflow: visible;
   position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   width: auto;
   height: auto;
   -moz-box-sizing: border-box;
@@ -4709,10 +4705,10 @@ input[type="text"] {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 29, ../sass/user-environ/_object-browse.scss */
+  /* line 30, ../sass/user-environ/_object-browse.scss */
   .object-browse-bar .left {
     padding-right: 5px; }
-    /* line 31, ../sass/user-environ/_object-browse.scss */
+    /* line 32, ../sass/user-environ/_object-browse.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
index ab2285ab5c..fcb168466a 100644
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -26,7 +26,8 @@ $pad: $interiorMargin * $baseRatio;
 .btn,
 .l-btn {
 	@include user-select(none);
-	line-height: 1.5em; // Was 1.25em
+	//line-height: 1.5em; // Was 1.25em
+	line-height: 150%;
 	padding: 0 $pad;
 	text-decoration: none;
 	&.lg,
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index b2a0352594..bcec870f95 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -102,7 +102,7 @@
 
 .btn-bar {
 	//	position: relative;
-	.btn,
+/*	.btn,
 	.btn-set,
 	.t-btn {
 		display: inline-block;
@@ -113,7 +113,7 @@
 		&:first-child {
 			//			margin-left: 0;
 		}
-	}
+	}*/
 }
 
 .l-composite-control {
@@ -153,6 +153,7 @@
 	font-size: 0.7rem;
 }
 
+/*
 .btn-set {
 	// Buttons that have a very tight conceptual grouping - no internal space between them.
 	display: inline-block;
@@ -171,24 +172,21 @@
 		}
 	}
 }
+*/
 
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
+.object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
 .top-bar .buttons-main .t-btn,
+.top-bar .view-switcher,
 .tool-bar .btn,
 .tool-bar .t-btn {
 	$h: $btnToolbarH;
 	display: inline-block;
 	font-size: $h * $btnFontSizeToH;
-	height: $h;
-	line-height: $h - 3;
-	.icon:not(.invoke-menu) {
-		//		position: relative;
-		//		top: -0.04em;
-		//font-size: 150%;
-		//vertical-align: middle;
-	}
+	line-height: 200%;
+	vertical-align: top;
 }
 
 label.checkbox.custom {
@@ -325,9 +323,9 @@ label.checkbox.custom {
 	$p: 10px;
 	$badgeM: $interiorMargin;
 	$badgeD: $h - ($badgeM * 2);
-	height: $h;
-	line-height: $h;
-	padding-right: 10px;
+	//height: $h;
+	//line-height: $h;
+	//padding-right: 10px;
 	&.browse-btn {
 		margin-right: $interiorMargin;
 		padding-left: $badgeD + $badgeM * 2;
@@ -350,7 +348,6 @@ label.checkbox.custom {
 .context-available {
 	$c: $colorKey;
 	color: $c;
-	//padding: 0 5px;
 	&:hover {
 		color: lighten($c, 10%);
 	}
@@ -358,23 +355,21 @@ label.checkbox.custom {
 
 .view-switcher {
 	@include trans-prop-nice-fade($controlFadeMs);
+	.type-icon {
+		//vertical-align: top;
+	}
 }
 
 /******************************************************** OBJECT-HEADER */
 .object-header {
 	//@include test();
 	font-size: 1em;
-	//line-height: 120%;
-	.label {
-		//display: flex;
-		//flex-direction: row;
-	}
 
-	.title-label,
-	.type-icon,
-	.context-available {
+	> .title-label,
+	> .type-icon,
+	> .context-available {
 		//@include tmpBorder(#6666ff);
-		vertical-align: middle;
+		//vertical-align: middle;
 	}
 	> .type-icon {
 		font-size: 120%;
@@ -382,7 +377,6 @@ label.checkbox.custom {
 		margin-right: $interiorMargin;
 	}
 
-
 	.l-elem-wrapper {
 		display: flex;
 		flex-flow: row nowrap;
@@ -401,15 +395,18 @@ label.checkbox.custom {
 	}
 
 	.context-available {
-		@include trans-prop-nice(opacity, 0.25s);
-		opacity: 0;
 		font-size: 0.7em;
-		//position: absolute;
-		//right: 0;
 	}
-	&:hover {
+
+	@include desktop {
 		.context-available {
-			opacity: 1;
+			@include trans-prop-nice(opacity, 0.25s);
+			opacity: 0;
+		}
+		&:hover {
+			.context-available {
+				opacity: 1;
+			}
 		}
 	}
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss
index 3fdc925b5b..567f2116a1 100644
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -48,16 +48,20 @@
 		left: $myM;
 	}
 	&.frame-template {
-		// Hide the view switcher by default when it's in an element that's in a frame context
-		// Frame template is used because we need to target the lowest nested frame
 		.view-switcher {
-			opacity: 0;
+			line-height: 16px;
 			z-index: 10;
 		}
-		&:hover .view-switcher {
-			// Show the view switcher on frame hover
-			//display: inline-block !important;
-			opacity: 1;
+		// Hide the view switcher by default when it's in an element that's in a frame context
+		// Frame template is used because we need to target the lowest nested frame
+		@include desktop {
+			.view-switcher {
+				opacity: 0;
+			}
+			&:hover .view-switcher {
+				// Show the view switcher on frame hover
+				opacity: 1;
+			}
 		}
 	}
 	.view-switcher {
diff --git a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
index 3ec809343a..602a8adeae 100644
--- a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
@@ -20,7 +20,8 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .object-browse-bar {
-    @include absPosDefault();
+    //@include test(blue);
+    @include absPosDefault(0, visible);
     @include box-sizing(border-box);
     height: $ueTopBarH;
     line-height: $ueTopBarH;
diff --git a/platform/commonUI/general/res/templates/controls/switcher.html b/platform/commonUI/general/res/templates/controls/switcher.html
index 3dec71ab6c..beaf497709 100644
--- a/platform/commonUI/general/res/templates/controls/switcher.html
+++ b/platform/commonUI/general/res/templates/controls/switcher.html
@@ -21,7 +21,7 @@
 -->
 <span ng-controller="ViewSwitcherController">
     <div
-	    class="view-switcher menu-element btn btn-menu dropdown click-invoke"
+	    class="view-switcher menu-element s-btn l-btn btn-menu dropdown click-invoke"
 	    ng-if="view.length > 1"
 	    ng-controller="ClickAwayController as toggle"
 	    >

From e1858bf0aebc9ead745d0d4166a693c5efff464b Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 25 Aug 2015 10:15:14 -0700
Subject: [PATCH 155/266] [Mobile] IN PROGRESS: Moved position of view-switcher

open #74
view-switcher in object browse and edit moved to precede
action buttons, with margin;
Re-located CSS for .btn, etc. from _controls.scss to _layout.scss;
Cleaned up line-spacing in object-header in .frame;
---
 .../browse/res/templates/browse-object.html   |  9 ++-
 .../general/res/css/theme-espresso.css        | 55 ++++++++++++-------
 .../general/res/sass/controls/_controls.scss  |  4 +-
 .../general/res/sass/user-environ/_frame.scss | 10 ++--
 .../res/sass/user-environ/_layout.scss        | 22 ++++++++
 .../res/sass/user-environ/_top-bar.scss       |  6 +-
 6 files changed, 71 insertions(+), 35 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 90b3c11504..fb1ae37740 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -28,15 +28,14 @@
         </div>
         <!-- Temporarily, on mobile, the button bar is hidden-->
         <div class="btn-bar right mobile-hide">
-            <mct-representation key="'action-group'"
-                                mct-object="domainObject"
-                                parameters="{ category: 'view-control' }">
-            </mct-representation>
-
             <mct-representation key="'switcher'"
                                 mct-object="domainObject"
                                 ng-model="representation">
             </mct-representation>
+            <mct-representation key="'action-group'"
+                                mct-object="domainObject"
+                                parameters="{ category: 'view-control' }">
+            </mct-representation>
         </div>
     </div>
 
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 28337e74f6..2854861951 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -735,6 +735,25 @@ mct-container {
       right: 3px; }
 
 /* line 299, ../sass/user-environ/_layout.scss */
+.object-browse-bar .btn,
+.object-browse-bar .t-btn,
+.object-browse-bar .view-switcher,
+.top-bar .buttons-main .btn,
+.top-bar .buttons-main .t-btn,
+.top-bar .view-switcher,
+.tool-bar .btn,
+.tool-bar .t-btn {
+  display: inline-block;
+  font-size: 11.25px;
+  line-height: 200%;
+  vertical-align: top; }
+
+/* line 316, ../sass/user-environ/_layout.scss */
+.object-browse-bar .view-switcher,
+.top-bar .view-switcher {
+  margin-right: 20px; }
+
+/* line 321, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -2382,8 +2401,7 @@ a.l-btn span {
 	}
 }
 */
-/* line 177, ../sass/controls/_controls.scss */
-.object-browse-bar .btn,
+/*.object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
@@ -2391,11 +2409,12 @@ a.l-btn span {
 .top-bar .view-switcher,
 .tool-bar .btn,
 .tool-bar .t-btn {
-  display: inline-block;
-  font-size: 11.25px;
-  line-height: 200%;
-  vertical-align: top; }
-
+	$h: $btnToolbarH;
+	display: inline-block;
+	font-size: $h * $btnFontSizeToH;
+	line-height: 200%;
+	vertical-align: top;
+}*/
 /* line 192, ../sass/controls/_controls.scss */
 label.checkbox.custom {
   cursor: pointer;
@@ -4510,31 +4529,32 @@ input[type="text"] {
   /* line 28, ../sass/user-environ/_frame.scss */
   .frame.child-frame.panel:hover {
     border-color: #666666; }
-/* line 36, ../sass/user-environ/_frame.scss */
+/* line 32, ../sass/user-environ/_frame.scss */
 .frame > .object-header.abs, .btn-menu .frame > span.object-header.l-click-area {
   font-size: 0.75em;
-  height: 20px; }
-/* line 40, ../sass/user-environ/_frame.scss */
+  height: 16px;
+  line-height: 16px; }
+/* line 38, ../sass/user-environ/_frame.scss */
 .frame > .object-holder.abs, .btn-menu .frame > span.object-holder.l-click-area {
-  top: 23px; }
-/* line 43, ../sass/user-environ/_frame.scss */
+  top: 19px; }
+/* line 41, ../sass/user-environ/_frame.scss */
 .frame .contents {
   top: 5px;
   right: 5px;
   bottom: 5px;
   left: 5px; }
-/* line 51, ../sass/user-environ/_frame.scss */
+/* line 49, ../sass/user-environ/_frame.scss */
 .frame.frame-template .view-switcher {
   line-height: 16px;
   z-index: 10; }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 58, ../sass/user-environ/_frame.scss */
+  /* line 56, ../sass/user-environ/_frame.scss */
   .frame.frame-template .view-switcher {
     opacity: 0; }
-  /* line 61, ../sass/user-environ/_frame.scss */
+  /* line 59, ../sass/user-environ/_frame.scss */
   .frame.frame-template:hover .view-switcher {
     opacity: 1; } }
-/* line 69, ../sass/user-environ/_frame.scss */
+/* line 67, ../sass/user-environ/_frame.scss */
 .frame .view-switcher .name {
   display: none; }
 
@@ -4576,9 +4596,6 @@ input[type="text"] {
   font-size: 0.8em;
   left: auto;
   text-align: right; }
-  /* line 40, ../sass/user-environ/_top-bar.scss */
-  .top-bar .buttons-main .btn {
-    margin-left: 5px; }
 
 /* line 48, ../sass/user-environ/_top-bar.scss */
 .edit-mode .top-bar .buttons-main {
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index bcec870f95..4671d7d48a 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -174,7 +174,7 @@
 }
 */
 
-.object-browse-bar .btn,
+/*.object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
@@ -187,7 +187,7 @@
 	font-size: $h * $btnFontSizeToH;
 	line-height: 200%;
 	vertical-align: top;
-}
+}*/
 
 label.checkbox.custom {
 	$bg: lighten($colorBodyBg, $ltGamma);
diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss
index 567f2116a1..d67c0ccb9a 100644
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -20,22 +20,20 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .frame {
-	$ohH: 20px;
+	$ohH: 16px;
 	$bc: $colorInteriorBorder;
 	&.child-frame.panel {
 		background: $colorBodyBg;
 		border: 1px solid $bc;
 		&:hover {
 			border-color: lighten($bc, 10%);
-			//z-index: 2;
-		}
-		.contents {
-//			overflow: hidden;
 		}
 	}
 	>.object-header.abs {
+		//@include test(red);
 		font-size: 0.75em;
 		height: $ohH;
+		line-height: $ohH;
 	}
 	>.object-holder.abs {
 		top: $ohH + $interiorMarginSm;
@@ -49,7 +47,7 @@
 	}
 	&.frame-template {
 		.view-switcher {
-			line-height: 16px;
+			line-height: $ohH;
 			z-index: 10;
 		}
 		// Hide the view switcher by default when it's in an element that's in a frame context
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 9538a2bb74..b06b00100c 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -296,6 +296,28 @@
 	}
 }
 
+.object-browse-bar .btn,
+.object-browse-bar .t-btn,
+.object-browse-bar .view-switcher,
+.top-bar .buttons-main .btn,
+.top-bar .buttons-main .t-btn,
+.top-bar .view-switcher,
+.tool-bar .btn,
+.tool-bar .t-btn {
+    $h: $btnToolbarH;
+    display: inline-block;
+    font-size: $h * $btnFontSizeToH;
+    line-height: 200%;
+    vertical-align: top;
+}
+
+.object-browse-bar,
+.top-bar {
+    .view-switcher {
+        margin-right: $interiorMarginLg * 2;
+    }
+}
+
 .vscroll {
     overflow-y: auto;
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
index 638edab9ec..7bb5ecd852 100644
--- a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
@@ -37,9 +37,9 @@
 		left: auto;
 		text-align: right;
 //		width: 200px;
-		.btn {
-			margin-left: $interiorMargin;
-		}
+//		.btn {
+//			margin-left: $interiorMargin;
+//		}
 	}
 }
 

From c71f1fe447133c93596e281e91181d0d9e577960 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 25 Aug 2015 13:34:37 -0700
Subject: [PATCH 156/266] [Mobile] IN PROGRESS: Significant refactor in
 mobile/_layout.scss

open #74
Made view-switcher visible when browsing via mobile;
Fixed class in browse.html markup from left-menu to left;
Moved object-browse-bar, top-bar classes from _controls into _layout;
Renamed and simplified menu widths in mobile _constants;
Really significant refactor of mobiles/_layout;
Tweaks in user-environ/_layout;
TO-DO: figure out why object-browse-bar flex styles not
working in mobile;
---
 .../browse/res/templates/browse-object.html   |   7 +-
 .../commonUI/browse/res/templates/browse.html |   2 +-
 .../general/res/css/theme-espresso.css        | 321 ++++++------------
 .../general/res/sass/controls/_controls.scss  |   4 +-
 .../general/res/sass/mobile/_constants.scss   |   7 +-
 .../general/res/sass/mobile/_layout.scss      | 233 ++++---------
 .../res/sass/user-environ/_layout.scss        |   9 +-
 7 files changed, 188 insertions(+), 395 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index fb1ae37740..80bb313d22 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -26,15 +26,16 @@
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
-        <!-- Temporarily, on mobile, the button bar is hidden-->
-        <div class="btn-bar right mobile-hide">
+        <div class="btn-bar right">
             <mct-representation key="'switcher'"
                                 mct-object="domainObject"
                                 ng-model="representation">
             </mct-representation>
+            <!-- Temporarily, on mobile, the action buttons are hidden-->
             <mct-representation key="'action-group'"
                                 mct-object="domainObject"
-                                parameters="{ category: 'view-control' }">
+                                parameters="{ category: 'view-control' }"
+                                class="mobile-hide">
             </mct-representation>
         </div>
     </div>
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 8bb6b7fa8e..402cf7a197 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -24,7 +24,7 @@
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane mobile-pane left-menu desktop-browse'>
+            <div class='split-pane-component treeview pane mobile-pane left desktop-browse'>
                 <div class="holder abs l-mobile">
                     <div class='tree-holder abs mobile-tree-holder'>
                         <mct-representation key="'tree'"
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 2854861951..b6af269225 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -563,10 +563,10 @@ mct-container {
 /* line 88, ../sass/user-environ/_layout.scss */
 .bar.l-flex {
   display: flex;
-  flex-flow: row nowrap;
-  align-items: stretch; }
-  /* line 92, ../sass/user-environ/_layout.scss */
+  flex-flow: row nowrap; }
+  /* line 91, ../sass/user-environ/_layout.scss */
   .bar.l-flex .left {
+    background-color: rgba(0, 128, 0, 0.2);
     flex: 1 1 auto; }
 
 /* line 99, ../sass/user-environ/_layout.scss */
@@ -673,68 +673,65 @@ mct-container {
 /* line 209, ../sass/user-environ/_layout.scss */
 .browse-mode .split-layout .split-pane-component.pane.left {
   min-width: 150px;
-  max-width: 50%; }
+  max-width: 800px;
+  width: 25%; }
 
-/* line 218, ../sass/user-environ/_layout.scss */
-.edit-mode .split-layout .split-pane-component.pane.right {
-  min-width: 150px;
-  max-width: 50%; }
-  /* line 221, ../sass/user-environ/_layout.scss */
-  .edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
-    min-height: 50px;
-    max-height: 80%; }
+/* line 222, ../sass/user-environ/_layout.scss */
+.edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
+  min-height: 50px;
+  max-height: 80%; }
 
-/* line 229, ../sass/user-environ/_layout.scss */
+/* line 230, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 232, ../sass/user-environ/_layout.scss */
+  /* line 233, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 235, ../sass/user-environ/_layout.scss */
+    /* line 236, ../sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 240, ../sass/user-environ/_layout.scss */
+  /* line 241, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 34px;
     padding-right: 5px; }
-  /* line 248, ../sass/user-environ/_layout.scss */
+  /* line 249, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 259, ../sass/user-environ/_layout.scss */
+  /* line 260, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 263, ../sass/user-environ/_layout.scss */
+  /* line 264, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 271, ../sass/user-environ/_layout.scss */
+/* line 272, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 274, ../sass/user-environ/_layout.scss */
+  /* line 275, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 281, ../sass/user-environ/_layout.scss */
+/* line 282, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 284, ../sass/user-environ/_layout.scss */
+  /* line 285, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 288, ../sass/user-environ/_layout.scss */
+  /* line 289, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 290, ../sass/user-environ/_layout.scss */
+    /* line 291, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 299, ../sass/user-environ/_layout.scss */
+/* line 300, ../sass/user-environ/_layout.scss */
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
@@ -748,12 +745,12 @@ mct-container {
   line-height: 200%;
   vertical-align: top; }
 
-/* line 316, ../sass/user-environ/_layout.scss */
+/* line 317, ../sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 321, ../sass/user-environ/_layout.scss */
+/* line 322, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -786,183 +783,115 @@ mct-container {
     top: 0 !important;
     right: 0;
     bottom: 0;
-    left: 0; } }
+    left: 0; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 35, ../sass/mobile/_layout.scss */
+  /* line 32, ../sass/mobile/_layout.scss */
+  .mobile-pane.right-repr {
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    transition-timing-function: ease;
+    backface-visibility: hidden;
+    margin-left: 0 !important; }
+
+  /* line 38, ../sass/mobile/_layout.scss */
   .user-environ .browse-area,
   .user-environ .edit-area,
   .user-environ .editor {
     top: 0;
     left: 0;
     right: 0;
-    bottom: 25px; } }
+    bottom: 25px; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 44, ../sass/mobile/_layout.scss */
   .holder.l-mobile {
     top: 10px !important;
     right: 10px !important;
     bottom: 10px !important;
-    left: 10px !important; } }
+    left: 10px !important; }
 
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 56, ../sass/mobile/_layout.scss */
-  .desktop-browse {
-    min-width: 150px;
-    max-width: 800px;
-    width: 25%; } }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 67, ../sass/mobile/_layout.scss */
+  /* line 54, ../sass/mobile/_layout.scss */
   .browse-hidetree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
-    user-select: none; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 78, ../sass/mobile/_layout.scss */
-  .browse-hidetree .mobile-pane.left-menu {
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-property: opacity;
-    -moz-transition-duration: 0.4s;
-    -o-transition-duration: 0.4s;
-    -webkit-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    opacity: 0;
-    right: 100% !important;
-    width: auto !important;
-    overflow-y: hidden;
-    overflow-x: hidden; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 91, ../sass/mobile/_layout.scss */
-  .browse-hidetree .mobile-pane.right-repr {
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden;
-    left: auto !important;
-    width: 100% !important; } }
+    user-select: none; }
+    /* line 58, ../sass/mobile/_layout.scss */
+    .browse-hidetree .mobile-pane.left {
+      opacity: 0;
+      right: 100% !important;
+      width: auto !important;
+      overflow-y: hidden;
+      overflow-x: hidden; }
+    /* line 67, ../sass/mobile/_layout.scss */
+    .browse-hidetree .mobile-pane.right-repr {
+      left: 0 !important; }
 
-/* line 100, ../sass/mobile/_layout.scss */
-.mobile-tree-holder {
-  top: 30px; }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 109, ../sass/mobile/_layout.scss */
+  /* line 74, ../sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
-    user-select: none; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 120, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-property: opacity;
-    -moz-transition-duration: 0.4s;
-    -o-transition-duration: 0.4s;
-    -webkit-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
-    background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
-    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
-    opacity: 1;
-    display: block !important;
-    width: auto !important; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 120, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 10% !important; } }
-@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 120, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 60% !important; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 120, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 500px !important; } }
-@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 120, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left-menu {
-    right: 70% !important; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 144, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden;
-    left: auto !important; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 144, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    left: 0 !important;
-    transform: translateX(90%); } }
-@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 144, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    width: 60% !important; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 144, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    width: 500px !important; } }
-@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 144, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
-    width: 70% !important; } }
+    user-select: none; }
+    /* line 83, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.left {
+      -moz-transition-property: opacity;
+      -o-transition-property: opacity;
+      -webkit-transition-property: opacity;
+      transition-property: opacity;
+      -moz-transition-duration: 0.4s;
+      -o-transition-duration: 0.4s;
+      -webkit-transition-duration: 0.4s;
+      transition-duration: 0.4s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+      background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+      opacity: 1;
+      display: block !important;
+      right: auto !important;
+      width: 40% !important; }
+    /* line 93, ../sass/mobile/_layout.scss */
+    .browse-showtree .mobile-pane.right-repr {
+      left: 40% !important; }
 
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 171, ../sass/mobile/_layout.scss */
+  /* line 103, ../sass/mobile/_layout.scss */
   .mobile-menu-icon {
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
 
-  /* line 178, ../sass/mobile/_layout.scss */
-  .object-browse-bar {
-    display: block !important;
-    left: 35px !important; }
-    /* line 183, ../sass/mobile/_layout.scss */
-    .object-browse-bar .context-available {
-      opacity: 1 !important; }
+  /* line 113, ../sass/mobile/_layout.scss */
+  .object-browse-bar .context-available {
+    opacity: 1 !important; }
+  /* line 116, ../sass/mobile/_layout.scss */
+  .object-browse-bar .view-switcher {
+    margin-right: 0 !important; }
 
-  /* line 188, ../sass/mobile/_layout.scss */
+  /* line 121, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 192, ../sass/mobile/_layout.scss */
+  /* line 125, ../sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 197, ../sass/mobile/_layout.scss */
+  /* line 130, ../sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 202, ../sass/mobile/_layout.scss */
+  /* line 135, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -979,7 +908,7 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 207, ../sass/mobile/_layout.scss */
+  /* line 140, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -995,54 +924,18 @@ mct-container {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     opacity: 1; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 149, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.left {
+    width: 90% !important; }
+  /* line 152, ../sass/mobile/_layout.scss */
+  .browse-showtree .mobile-pane.right-repr {
+    left: 0 !important;
+    transform: translateX(90%); } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 214, ../sass/mobile/_layout.scss */
+  /* line 160, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
-
-/*
-
-.mobile-back-hide {
-    @include phoneandtablet {
-        pointer-events: none;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 0;
-    }
-}
-
-
-// Hides objects on phone and tablet
-.mobile-back-unhide {
-    @include phoneandtablet {
-        pointer-events: all;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 1;
-    }
-}
-
-
-// Hides objects only on the phone
-.phone-hide {
-    @include phone {
-        display: none;
-    }
-}
-
-.tree-holder {
-    @include phoneandtablet {
-        .tree-holder {
-            overflow-x: hidden !important;
-        }
-    }
-}
-.mobile-disable-select {
-    @include phoneandtablet {
-        .mobile-disable-select {
-            @include user-select(none);
-        }
-    }
-}
-*/
 /*****************************************************************************
 * Open MCT Web, Copyright (c) 2014-2015, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
@@ -2401,7 +2294,8 @@ a.l-btn span {
 	}
 }
 */
-/*.object-browse-bar .btn,
+/* line 177, ../sass/controls/_controls.scss */
+.object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
@@ -2409,12 +2303,11 @@ a.l-btn span {
 .top-bar .view-switcher,
 .tool-bar .btn,
 .tool-bar .t-btn {
-	$h: $btnToolbarH;
-	display: inline-block;
-	font-size: $h * $btnFontSizeToH;
-	line-height: 200%;
-	vertical-align: top;
-}*/
+  display: inline-block;
+  font-size: 11.25px;
+  line-height: 200%;
+  vertical-align: top; }
+
 /* line 192, ../sass/controls/_controls.scss */
 label.checkbox.custom {
   cursor: pointer;
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 4671d7d48a..bcec870f95 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -174,7 +174,7 @@
 }
 */
 
-/*.object-browse-bar .btn,
+.object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
 .top-bar .buttons-main .btn,
@@ -187,7 +187,7 @@
 	font-size: $h * $btnFontSizeToH;
 	line-height: 200%;
 	vertical-align: top;
-}*/
+}
 
 label.checkbox.custom {
 	$bg: lighten($colorBodyBg, $ltGamma);
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index aedd4c3abd..737c06ac63 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -81,8 +81,5 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}";
 $desktopLandscape: "screen and #{$desktopLandscapeCheck}";
 
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-$phoneRepSizePortrait: 10%;
-$phoneRepSizeLandscape: 60%;
-$tabletRepSizePortrait: 500px;
-$tabletRepSizeLandscape: 70%;
-$desktopMenuSize: 25%;
+$proporMenuOnly: 90%;
+$proporMenuWithView: 40%;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index e13334ec61..c073a65134 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -20,154 +20,86 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// Wrapper of the entire 2 panes, only enacted on
-// phone and tablet. Also for the panes
-
-.browse-wrapper,
-.mobile-pane {
-    @include phoneandtablet {
+@include phoneandtablet {
+    // Wrapper of the entire 2 panes, only enacted on
+    // phone and tablet. Also for the panes
+    .browse-wrapper,
+    .mobile-pane {
         position: absolute;
         top: 0 !important; right: 0; bottom: 0; left: 0;
-        //white-space: nowrap; // CH CO
     }
-}
 
-.user-environ .browse-area,
-.user-environ .edit-area,
-.user-environ .editor {
-    @include phoneandtablet {
-        //@include test(red);
+    .mobile-pane.right-repr {
+        //@include test();
+        @include slMenuTransitions;
+        margin-left: 0 !important;
+    }
+
+    .user-environ .browse-area,
+    .user-environ .edit-area,
+    .user-environ .editor {
         top: 0; left: 0; right: 0; bottom: $ueFooterH;
     }
-}
 
-.holder.l-mobile {
-    @include phoneandtablet {
-        //@include test();
+    .holder.l-mobile {
         top: $bodyMargin !important;
         right: $bodyMargin !important;
         bottom: $bodyMargin !important;
         left: $bodyMargin !important;
     }
-}
 
-// Default views of the panels
-// if in desktop browser
-.desktop-browse {
-    @include desktop {
-        min-width: 150px;
-        max-width: 800px;
-        width: $desktopMenuSize;
-    }
-}
-
-// When the tree is hidden, these are the
-// classes used for the left menu and the
-// right representation.
-.browse-hidetree {
-    // NOTE: DISABLED SELECTION
-    // Selection disabled in both panes
-    // causing cut/copy/paste menu to
-    // not appear. Should me moved in
-    // future to properly work
-    @include phoneandtablet {
+    // When the tree is hidden, these are the
+    // classes used for the left menu and the
+    // right representation.
+    .browse-hidetree {
         @include user-select(none);
-    }
-    // Sets the left tree menu when the tree
-    // is hidden.
-    .mobile-pane.left-menu {
-        @include phoneandtablet {
-            @include trans-prop-nice(opacity, .4s);
+        // Sets the left tree menu when the tree
+        // is hidden.
+        .mobile-pane.left {
             opacity: 0;
             right: 100% !important;
             width: auto !important;
             overflow-y: hidden;
             overflow-x: hidden;
         }
-    }
-
-    // Sets the right represenation when
-    // the tree is hidden.
-    .mobile-pane.right-repr {
-        @include phoneandtablet {
-            @include slMenuTransitions;
-            left: auto !important;
-            width: 100% !important;
+        // Sets the right represenation when
+        // the tree is hidden.
+        .mobile-pane.right-repr {
+            //@include slMenuTransitions;
+            left: 0 !important;
+            //width: 100% !important;
         }
     }
-}
 
-.mobile-tree-holder {
-    top: 30px;
-}
-
-// When the tree is shown, these are
-// the classes used for the left menu
-// and the right menu (for each device &
-// orientation combination, separate
-// parameters are used)
-.browse-showtree {
-    // NOTE: DISABLED SELECTION
-    // Selection disabled in both panes
-    // causing cut/copy/paste menu to
-    // not appear. Should me moved in
-    // future to properly work
-    @include phoneandtablet {
+    .browse-showtree {
+        // NOTE: DISABLED SELECTION
+        // Selection disabled in both panes
+        // causing cut/copy/paste menu to
+        // not appear. Should me moved in
+        // future to properly work
         @include user-select(none);
-    }
-    // Sets the left tree menu when the tree
-    // is shown.
-    .mobile-pane.left-menu {
-        @include phoneandtablet {
+
+        // Sets the left tree menu when the tree is shown.
+        .mobile-pane.left {
             @include trans-prop-nice(opacity, .4s);
             @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
             opacity: 1;
             display: block !important;
-            width: auto !important;
+            //width: auto !important; // CH CO
+            right: auto !important;
+            width: $proporMenuWithView !important;
         }
-        // On both phones and tablets, the amount of
-        // space allowed for the right pane is specified
-        @include phonePortrait {
-            right: $phoneRepSizePortrait !important;
-        }
-        @include phoneLandscape {
-            right: $phoneRepSizeLandscape !important;
-        }
-        @include tabletPortrait {
-            right: $tabletRepSizePortrait !important;
-        }
-        @include tabletLandscape {
-            right: $tabletRepSizeLandscape !important;
-        }
-    }
-    // Sets the right representation when the tree is shown.
-    .mobile-pane.right-repr {
-        @include phoneandtablet {
-            @include slMenuTransitions;
-            left: auto !important;
-        }
-        // On both phones and tablets, the width of
-        // the right pane is specified
-        @include phonePortrait {
-            //width: $phoneRepSizePortrait !important;
-            left: 0 !important;
-            transform: translateX(100% - $phoneRepSizePortrait);
-        }
-        @include phoneLandscape {
-            width: $phoneRepSizeLandscape !important;
-        }
-        @include tabletPortrait {
-            //@include test(green);
-            width: $tabletRepSizePortrait !important;
-        }
-        @include tabletLandscape {
-            //@include test(orange);
-            width: $tabletRepSizeLandscape !important;
-        }
-    }
-}
+        // Sets the right representation when the tree is shown.
+        .mobile-pane.right-repr {
+            //@include slMenuTransitions; CH MOVED
+            left: $proporMenuWithView !important;
+            //width: auto !important;
+
+            //left: 0 !important;
+            //transform: translateX($proporMenuWithView);
+        }
+    }
 
-@include phoneandtablet {
     .mobile-menu-icon {
         font-size: 110%;
         position: absolute;
@@ -177,12 +109,13 @@
 
     .object-browse-bar {
         //@include test();
-        display: block !important;
-        //font-size: 0.95em;
-        left: 35px !important;
+        //left: 35px !important; // TEMP
         .context-available {
             opacity: 1 !important;
         }
+        .view-switcher {
+            margin-right: 0 !important;
+        }
     }
 
     .tree-holder {
@@ -211,52 +144,20 @@
     }
 }
 
-.desktop-hide {
-    @include desktop {
-        display: none;
-    }
-}
-
-/*
-
-.mobile-back-hide {
-    @include phoneandtablet {
-        pointer-events: none;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 0;
-    }
-}
-
-
-// Hides objects on phone and tablet
-.mobile-back-unhide {
-    @include phoneandtablet {
-        pointer-events: all;
-        @include trans-prop-nice(opacity, .4s);
-        opacity: 1;
-    }
-}
-
-
-// Hides objects only on the phone
-.phone-hide {
-    @include phone {
-        display: none;
-    }
-}
-
-.tree-holder {
-    @include phoneandtablet {
-        .tree-holder {
-            overflow-x: hidden !important;
+@include phonePortrait {
+    .browse-showtree {
+        .mobile-pane.left {
+            width: $proporMenuOnly !important;
+        }
+        .mobile-pane.right-repr {
+            left: 0 !important;
+            transform: translateX($proporMenuOnly);
         }
     }
 }
-.mobile-disable-select {
-    @include phoneandtablet {
-        .mobile-disable-select {
-            @include user-select(none);
-        }
+
+@include desktop {
+    .desktop-hide {
+        display: none;
     }
-}
-*/
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index b06b00100c..1c87dc6d0e 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -88,8 +88,8 @@
     &.l-flex {
         display: flex;
         flex-flow: row nowrap;
-        align-items: stretch;
         .left {
+            @include test(green);
             flex: 1 1 auto;
         }
     }
@@ -208,7 +208,8 @@
     .split-layout {
         .split-pane-component.pane.left {
             min-width: 150px;
-            max-width: 50%;
+            max-width: 800px;
+            width: $ueBrowseLeftPaneW;
         }
     }
 }
@@ -216,8 +217,8 @@
 .edit-mode {
     .split-layout {
         .split-pane-component.pane.right {
-            min-width: 150px;
-            max-width: 50%;
+            //min-width: 150px;
+            //max-width: 50%;
             .split-pane-component.pane.bottom {
                 min-height: 50px;
                 max-height: 80%;

From fd5a911d501d8fb8e60b3475f95eadcbee941efb Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 25 Aug 2015 13:51:02 -0700
Subject: [PATCH 157/266] [Mobile] IN PROGRESS: Fixed object-browse-bar flex

open #74
Also set left position of .object-browse-bar;
---
 .../general/res/css/theme-espresso.css         | 18 ++++++++++--------
 .../general/res/sass/mobile/_constants.scss    |  1 -
 .../general/res/sass/mobile/_layout.scss       |  2 +-
 .../general/res/sass/user-environ/_layout.scss |  4 ++--
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index b6af269225..f06a544a3d 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -566,8 +566,7 @@ mct-container {
   flex-flow: row nowrap; }
   /* line 91, ../sass/user-environ/_layout.scss */
   .bar.l-flex .left {
-    background-color: rgba(0, 128, 0, 0.2);
-    flex: 1 1 auto; }
+    flex: 1 1 0; }
 
 /* line 99, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
@@ -868,12 +867,15 @@ mct-container {
     top: 12px;
     left: 10px; }
 
-  /* line 113, ../sass/mobile/_layout.scss */
-  .object-browse-bar .context-available {
-    opacity: 1 !important; }
-  /* line 116, ../sass/mobile/_layout.scss */
-  .object-browse-bar .view-switcher {
-    margin-right: 0 !important; }
+  /* line 110, ../sass/mobile/_layout.scss */
+  .object-browse-bar {
+    left: 30px !important; }
+    /* line 113, ../sass/mobile/_layout.scss */
+    .object-browse-bar .context-available {
+      opacity: 1 !important; }
+    /* line 116, ../sass/mobile/_layout.scss */
+    .object-browse-bar .view-switcher {
+      margin-right: 0 !important; }
 
   /* line 121, ../sass/mobile/_layout.scss */
   .tree-holder {
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 737c06ac63..913d47c0e3 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -30,7 +30,6 @@ $tabletItemH: floor($ueBrowseGridItemLg/3);
 
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobileTreeItemH: 35px;
-$mobile-startingTreeLeft: 3px;
 $mobileTreeItemIndent: 20px;
 $mobileTreeRightArrowW: 30px;
 
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index c073a65134..008beef117 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -109,7 +109,7 @@
 
     .object-browse-bar {
         //@include test();
-        //left: 35px !important; // TEMP
+        left: 30px !important;
         .context-available {
             opacity: 1 !important;
         }
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 1c87dc6d0e..e8960464f8 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -89,8 +89,8 @@
         display: flex;
         flex-flow: row nowrap;
         .left {
-            @include test(green);
-            flex: 1 1 auto;
+            //@include test(green);
+            flex: 1 1 0;
         }
     }
 }

From 07d0706cd1a611f97049828be73da009b5c3aaf7 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 25 Aug 2015 14:17:34 -0700
Subject: [PATCH 158/266] [Mobile] IN PROGRESS:

open #74
Added name for "base" (unknown) type in core/bundle.json;
Fixes to grid-item .details element:
- ellipsize,
- type now displayed properly;
- number of items with correct plural syntax;
---
 .../browse/res/templates/items/grid-item.html |  6 +--
 platform/commonUI/general/res/css/items.css   | 13 +++---
 .../general/res/css/theme-espresso.css        | 44 +++++++++----------
 .../general/res/sass/items/_item.scss         |  1 +
 platform/core/bundle.json                     |  1 +
 5 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html
index f1fd6dd5ee..647d8e26da 100644
--- a/platform/commonUI/browse/res/templates/items/grid-item.html
+++ b/platform/commonUI/browse/res/templates/items/grid-item.html
@@ -39,11 +39,9 @@
         <div class='bottom-bar bar abs'>
             <div class='title'>{{model.name}}</div>
             <div class='details'>
+                <span>{{type.getName()}}</span>
                 <span ng-show="model.composition !== undefined">
-                    {{model.composition.length}} Items
-                </span>
-                <span ng-show="model.composition == undefined">
-                    {{model.name}}
+                    - {{model.composition.length}} Item<span ng-show="model.composition.length > 1">s</span>
                 </span>
             </div>
         </div>
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index cf77cbed9a..a30f37c1c6 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -294,8 +294,11 @@
       color: #cccccc; }
     /* line 133, ../sass/items/_item.scss */
     .items-holder .item.grid-item .details {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       font-size: 0.8em; }
-    /* line 136, ../sass/items/_item.scss */
+    /* line 137, ../sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -332,16 +335,16 @@
       /* line 175, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
         color: #52d4ff; }
-      /* line 141, ../sass/items/_item.scss */
+      /* line 142, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 142, ../sass/items/_item.scss */
+      /* line 143, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 143, ../sass/items/_item.scss */
+      /* line 144, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 145, ../sass/items/_item.scss */
+      /* line 146, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index f06a544a3d..bdda60265b 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -775,7 +775,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 26, ../sass/mobile/_layout.scss */
+  /* line 30, ../sass/mobile/_layout.scss */
   .browse-wrapper,
   .mobile-pane {
     position: absolute;
@@ -784,7 +784,7 @@ mct-container {
     bottom: 0;
     left: 0; }
 
-  /* line 32, ../sass/mobile/_layout.scss */
+  /* line 36, ../sass/mobile/_layout.scss */
   .mobile-pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -794,7 +794,7 @@ mct-container {
     backface-visibility: hidden;
     margin-left: 0 !important; }
 
-  /* line 38, ../sass/mobile/_layout.scss */
+  /* line 42, ../sass/mobile/_layout.scss */
   .user-environ .browse-area,
   .user-environ .edit-area,
   .user-environ .editor {
@@ -803,37 +803,37 @@ mct-container {
     right: 0;
     bottom: 25px; }
 
-  /* line 44, ../sass/mobile/_layout.scss */
+  /* line 48, ../sass/mobile/_layout.scss */
   .holder.l-mobile {
     top: 10px !important;
     right: 10px !important;
     bottom: 10px !important;
     left: 10px !important; }
 
-  /* line 54, ../sass/mobile/_layout.scss */
+  /* line 58, ../sass/mobile/_layout.scss */
   .browse-hidetree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 58, ../sass/mobile/_layout.scss */
+    /* line 62, ../sass/mobile/_layout.scss */
     .browse-hidetree .mobile-pane.left {
       opacity: 0;
       right: 100% !important;
       width: auto !important;
       overflow-y: hidden;
       overflow-x: hidden; }
-    /* line 67, ../sass/mobile/_layout.scss */
+    /* line 71, ../sass/mobile/_layout.scss */
     .browse-hidetree .mobile-pane.right-repr {
       left: 0 !important; }
 
-  /* line 74, ../sass/mobile/_layout.scss */
+  /* line 78, ../sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 83, ../sass/mobile/_layout.scss */
+    /* line 87, ../sass/mobile/_layout.scss */
     .browse-showtree .mobile-pane.left {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -856,44 +856,44 @@ mct-container {
       display: block !important;
       right: auto !important;
       width: 40% !important; }
-    /* line 93, ../sass/mobile/_layout.scss */
+    /* line 97, ../sass/mobile/_layout.scss */
     .browse-showtree .mobile-pane.right-repr {
       left: 40% !important; }
 
-  /* line 103, ../sass/mobile/_layout.scss */
+  /* line 107, ../sass/mobile/_layout.scss */
   .mobile-menu-icon {
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
 
-  /* line 110, ../sass/mobile/_layout.scss */
+  /* line 114, ../sass/mobile/_layout.scss */
   .object-browse-bar {
     left: 30px !important; }
-    /* line 113, ../sass/mobile/_layout.scss */
+    /* line 117, ../sass/mobile/_layout.scss */
     .object-browse-bar .context-available {
       opacity: 1 !important; }
-    /* line 116, ../sass/mobile/_layout.scss */
+    /* line 120, ../sass/mobile/_layout.scss */
     .object-browse-bar .view-switcher {
       margin-right: 0 !important; }
 
-  /* line 121, ../sass/mobile/_layout.scss */
+  /* line 125, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 125, ../sass/mobile/_layout.scss */
+  /* line 129, ../sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 130, ../sass/mobile/_layout.scss */
+  /* line 134, ../sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 135, ../sass/mobile/_layout.scss */
+  /* line 139, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -910,7 +910,7 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 140, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -927,15 +927,15 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 1; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 149, ../sass/mobile/_layout.scss */
+  /* line 153, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.left {
     width: 90% !important; }
-  /* line 152, ../sass/mobile/_layout.scss */
+  /* line 156, ../sass/mobile/_layout.scss */
   .browse-showtree .mobile-pane.right-repr {
     left: 0 !important;
     transform: translateX(90%); } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 160, ../sass/mobile/_layout.scss */
+  /* line 164, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 /*****************************************************************************
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index c04568d8fa..55c37b2884 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -131,6 +131,7 @@
                 color: lighten($colorBodyFg, 20%);
             }
             .details {
+                @include ellipsize();
                 font-size: 0.8em;
             }
 	        &.selected {
diff --git a/platform/core/bundle.json b/platform/core/bundle.json
index c8c56299f6..f5bf73b8fc 100644
--- a/platform/core/bundle.json
+++ b/platform/core/bundle.json
@@ -145,6 +145,7 @@
                 "glyph": "\u003f"
             },
             {
+                "name": "Unknown Type",
                 "glyph": "\u003f"
             }
         ],

From d80c359a8639ca573850da60b14a88cdff55f9fd Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 25 Aug 2015 14:20:36 -0700
Subject: [PATCH 159/266] [Mobile] Tests

Fixed BrowseControllerSpec test
to account for new  call. Now
expects destroy and select-obj calls.
---
 platform/commonUI/browse/test/BrowseControllerSpec.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index 722b7b4132..136b44cd30 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -164,7 +164,12 @@ define(
             // lets the html code know if the
             // tree menu is open.
             it("calls the treeSlide function", function () {
-                mockScope.treeSlide();
+                expect(mockScope.$on).toHaveBeenCalledWith(
+                    "select-obj",
+                    jasmine.any(Function)
+                );
+                
+                mockScope.$on.calls[1].args[1]();
             });
 
             it("releases its navigation listener when its scope is destroyed", function () {
@@ -172,7 +177,8 @@ define(
                     "$destroy",
                     jasmine.any(Function)
                 );
-                mockScope.$on.mostRecentCall.args[1]();
+                
+                mockScope.$on.calls[0].args[1]();
                 // Should remove the listener it added earlier
                 expect(mockNavigationService.removeListener).toHaveBeenCalledWith(
                     mockNavigationService.addListener.mostRecentCall.args[0]

From 9cd57614e4fc4f63bb968a2d3287ca1cf7f1d6d6 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 25 Aug 2015 14:33:48 -0700
Subject: [PATCH 160/266] [Mobile] AgentService & Tests

Adjusted the getOrientation of agentService to
inject the window instead of calling for it in
agentService. Also adjusted treeNodeController
for this. Added tests for the agentService's
getOrientation function.
---
 .../general/src/controllers/TreeNodeController.js |  2 +-
 .../commonUI/general/src/services/AgentService.js |  9 +++++----
 .../general/test/services/AgentServiceSpec.js     | 15 +++++----------
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 96f89ee2e0..0aba8fc246 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -182,7 +182,7 @@ define(
         // and in portrait mode, than, hide the tree menu
         TreeNodeController.prototype.setObject = function (ngModel, domainObject) {
             ngModel.selectedObject = domainObject;
-            if (this.agentService.getOrientation() === "portrait" &&
+            if (this.agentService.getOrientation(window.innerWidth, window.innerHeight) === "portrait" &&
                     this.agentService.isPhone(navigator.userAgent)) {
                 this.$scope.$emit('select-obj');
             }
diff --git a/platform/commonUI/general/src/services/AgentService.js b/platform/commonUI/general/src/services/AgentService.js
index fa790e966f..1c7c83c9c3 100644
--- a/platform/commonUI/general/src/services/AgentService.js
+++ b/platform/commonUI/general/src/services/AgentService.js
@@ -67,11 +67,12 @@ define(
             }
 
             // Returns the orientation of the device based on the
-            // device's window dimensions
-            function getOrientation() {
-                if (window.innerWidth > window.innerHeight) {
+            // device's window dimensions, pass in the innerWidth
+            // and innerheight of the current window
+            function getOrientation(innerWidth, innerHeight) {
+                if (innerWidth > innerHeight) {
                     return "landscape";
-                } else if (window.innerWidth < window.innerHeight) {
+                } else if (innerWidth < innerHeight) {
                     return "portrait";
                 }
             }
diff --git a/platform/commonUI/general/test/services/AgentServiceSpec.js b/platform/commonUI/general/test/services/AgentServiceSpec.js
index e0f689ddfc..e24cc8e7f7 100644
--- a/platform/commonUI/general/test/services/AgentServiceSpec.js
+++ b/platform/commonUI/general/test/services/AgentServiceSpec.js
@@ -38,8 +38,8 @@ define(
                 // Creates a mockLocation, used to 
                 // do the view search
                 mockWindow = jasmine.createSpyObj(
-                    "$window",
-                    [ "outerWidth", "outerHeight" ]
+                    "window",
+                    [ "innerWidth", "innerHeight" ]
                 );
                 
                 mockNavigator = jasmine.createSpyObj(
@@ -47,7 +47,7 @@ define(
                     [ "userAgent" ]
                 );
                 
-                agentService = new AgentService(mockWindow);
+                agentService = new AgentService();
             });
             
             it("get current device user agent", function () {
@@ -61,13 +61,8 @@ define(
             });
             
             it("get orientation of the current device", function () {
-                mockWindow.outerWidth = 768;
-                mockWindow.outerHeight = 1024;
-                agentService.getOrientation();
-                
-                mockWindow.outerWidth = 1024;
-                mockWindow.outerHeight = 768;
-                agentService.getOrientation();
+                agentService.getOrientation(1024, 768);
+                agentService.getOrientation(768, 1024);
             });
         });
     }

From 0fa330adff264cdba41b2e8b0af252e3227b5bea Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Tue, 25 Aug 2015 14:49:38 -0700
Subject: [PATCH 161/266] [Mobile] Tests

Adjusted TreeNodeControllerSpec to
test setObject prototype.
---
 .../controllers/TreeNodeControllerSpec.js     | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
index 67e6cf7142..247120cdec 100644
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -30,6 +30,8 @@ define(
             var mockScope,
                 mockTimeout,
                 mockAgentService,
+                mockNgModel,
+                mockDomainObject,
                 controller;
 
             function TestObject(id, context) {
@@ -42,9 +44,18 @@ define(
             }
 
             beforeEach(function () {
-                mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on"]);
+                mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on", "$emit"]);
                 mockTimeout = jasmine.createSpy("$timeout");
-                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile"]);
+                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile", "isPhone", "getOrientation"]);
+                mockNgModel = jasmine.createSpyObj("ngModel", ["selectedObject"]);
+                mockDomainObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability", "getModel", "useCapability" ]
+                );
+                
+                mockAgentService.getOrientation.andReturn("portrait");
+                mockAgentService.isPhone.andReturn(true);
+                
                 controller = new TreeNodeController(mockScope, mockTimeout, mockAgentService);
             });
 
@@ -191,6 +202,11 @@ define(
                     controller.checkMobile();
                 }
             });
+            
+            it("allows a set object to emit select-obj", function () {
+                controller.setObject(mockNgModel, mockDomainObject);
+                expect(mockScope.$emit).toHaveBeenCalledWith('select-obj');
+            });
         });
     }
 );
\ No newline at end of file

From 39bd2928864273de4698f24359edadb344a0eb51 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Wed, 26 Aug 2015 09:43:51 -0700
Subject: [PATCH 162/266] [Mobile] IN PROGRESS: Overlay and form cleanups

open #74
Widths and layout strategy fixed for label and
controls in form when appearing in mobile;
Overlay margins adjusted;
Cleaned up font size, line-height in tree items;
---
 platform/commonUI/general/res/css/forms.css   |  41 ++---
 platform/commonUI/general/res/css/items.css   |   1 +
 .../general/res/css/theme-espresso.css        | 157 ++++++++++--------
 platform/commonUI/general/res/css/tree.css    |  50 +++---
 .../commonUI/general/res/sass/_constants.scss |   1 +
 platform/commonUI/general/res/sass/_main.scss |   2 -
 .../general/res/sass/controls/_controls.scss  |   2 +-
 .../general/res/sass/forms/_elems.scss        |  15 +-
 .../general/res/sass/forms/_validation.scss   |   8 +-
 .../general/res/sass/mobile/_constants.scss   |   6 +-
 .../general/res/sass/mobile/_tree.scss        |   8 +-
 .../res/sass/mobile/overlay/_overlay.scss     |  44 ++++-
 .../commonUI/general/res/sass/tree/_tree.scss |   1 +
 13 files changed, 196 insertions(+), 140 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 34a14c0107..6e2aec574a 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** STYLE */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
@@ -192,14 +193,14 @@
   box-sizing: border-box;
   overflow: hidden;
   *zoom: 1;
-  border-top: 1px solid #4d4d4d;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 5px;
   padding: 5px;
   position: relative; }
-  /* line 46, ../sass/forms/_elems.scss */
+  /* line 47, ../sass/forms/_elems.scss */
   .form .form-row.first {
     border-top: none; }
-  /* line 50, ../sass/forms/_elems.scss */
+  /* line 51, ../sass/forms/_elems.scss */
   .form .form-row .label,
   .form .form-row .controls {
     -moz-box-sizing: border-box;
@@ -207,45 +208,45 @@
     box-sizing: border-box;
     overflow: hidden;
     *zoom: 1;
-    box-sizing: border-box;
-    font-size: 0.75rem;
+    font-size: 0.8rem;
     line-height: 22px;
     min-height: 22px; }
-  /* line 61, ../sass/forms/_elems.scss */
+  /* line 60, ../sass/forms/_elems.scss */
   .form .form-row > .label {
     float: left;
+    min-width: 120px;
     position: relative;
     white-space: nowrap;
     width: 20%; }
-  /* line 69, ../sass/forms/_elems.scss */
+  /* line 70, ../sass/forms/_elems.scss */
   .form .form-row .value {
     color: #cccccc; }
-  /* line 73, ../sass/forms/_elems.scss */
+  /* line 74, ../sass/forms/_elems.scss */
   .form .form-row .controls {
     float: left;
     position: relative;
     width: 79.9%; }
-    /* line 80, ../sass/forms/_elems.scss */
+    /* line 81, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-composite-control.l-checkbox {
       display: inline-block;
       line-height: 14px;
       margin-right: 5px; }
-    /* line 89, ../sass/forms/_elems.scss */
+    /* line 90, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-med input[type="text"] {
       width: 200px; }
-    /* line 93, ../sass/forms/_elems.scss */
+    /* line 94, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-small input[type="text"] {
       width: 50px; }
-    /* line 97, ../sass/forms/_elems.scss */
+    /* line 98, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-numeric input[type="text"] {
       text-align: right; }
-    /* line 101, ../sass/forms/_elems.scss */
+    /* line 102, ../sass/forms/_elems.scss */
     .form .form-row .controls .select {
       margin-right: 5px; }
-  /* line 106, ../sass/forms/_elems.scss */
+  /* line 107, ../sass/forms/_elems.scss */
   .form .form-row .field-hints {
     color: #666666; }
-  /* line 110, ../sass/forms/_elems.scss */
+  /* line 111, ../sass/forms/_elems.scss */
   .form .form-row .selector-list {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -258,7 +259,7 @@
     position: relative;
     height: 150px;
     overflow: auto; }
-    /* line 121, ../sass/forms/_elems.scss */
+    /* line 122, ../sass/forms/_elems.scss */
     .form .form-row .selector-list .wrapper {
       overflow-y: auto;
       position: absolute;
@@ -267,24 +268,24 @@
       bottom: 5px;
       left: 5px; }
 
-/* line 135, ../sass/forms/_elems.scss */
+/* line 136, ../sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 141, ../sass/forms/_elems.scss */
+/* line 142, ../sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 146, ../sass/forms/_elems.scss */
+/* line 147, ../sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 153, ../sass/forms/_elems.scss */
+  /* line 154, ../sass/forms/_elems.scss */
   .l-result div.s-hint {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
index a30f37c1c6..0c29bd9ebb 100644
--- a/platform/commonUI/general/res/css/items.css
+++ b/platform/commonUI/general/res/css/items.css
@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** STYLE */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index bdda60265b..c503b222f4 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -70,6 +70,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** STYLE */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
@@ -775,17 +776,20 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 30, ../sass/mobile/_layout.scss */
+  /* line 26, ../sass/mobile/_layout.scss */
   .browse-wrapper,
-  .mobile-pane {
-    position: absolute;
+  .pane {
     top: 0 !important;
     right: 0;
     bottom: 0;
     left: 0; }
 
-  /* line 36, ../sass/mobile/_layout.scss */
-  .mobile-pane.right-repr {
+  /* line 31, ../sass/mobile/_layout.scss */
+  .pane.left {
+    background-color: #222; }
+
+  /* line 35, ../sass/mobile/_layout.scss */
+  .pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
     -webkit-transition-duration: 0.35s;
@@ -794,7 +798,7 @@ mct-container {
     backface-visibility: hidden;
     margin-left: 0 !important; }
 
-  /* line 42, ../sass/mobile/_layout.scss */
+  /* line 41, ../sass/mobile/_layout.scss */
   .user-environ .browse-area,
   .user-environ .edit-area,
   .user-environ .editor {
@@ -803,38 +807,38 @@ mct-container {
     right: 0;
     bottom: 25px; }
 
-  /* line 48, ../sass/mobile/_layout.scss */
+  /* line 47, ../sass/mobile/_layout.scss */
   .holder.l-mobile {
     top: 10px !important;
     right: 10px !important;
     bottom: 10px !important;
     left: 10px !important; }
 
-  /* line 58, ../sass/mobile/_layout.scss */
+  /* line 57, ../sass/mobile/_layout.scss */
   .browse-hidetree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 62, ../sass/mobile/_layout.scss */
-    .browse-hidetree .mobile-pane.left {
+    /* line 61, ../sass/mobile/_layout.scss */
+    .browse-hidetree .pane.left {
       opacity: 0;
       right: 100% !important;
       width: auto !important;
       overflow-y: hidden;
       overflow-x: hidden; }
-    /* line 71, ../sass/mobile/_layout.scss */
-    .browse-hidetree .mobile-pane.right-repr {
+    /* line 70, ../sass/mobile/_layout.scss */
+    .browse-hidetree .pane.right-repr {
       left: 0 !important; }
 
-  /* line 78, ../sass/mobile/_layout.scss */
+  /* line 77, ../sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 87, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.left {
+    /* line 86, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane.left {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
       -webkit-transition-property: opacity;
@@ -856,44 +860,44 @@ mct-container {
       display: block !important;
       right: auto !important;
       width: 40% !important; }
-    /* line 97, ../sass/mobile/_layout.scss */
-    .browse-showtree .mobile-pane.right-repr {
+    /* line 96, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane.right-repr {
       left: 40% !important; }
 
-  /* line 107, ../sass/mobile/_layout.scss */
+  /* line 106, ../sass/mobile/_layout.scss */
   .mobile-menu-icon {
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
 
-  /* line 114, ../sass/mobile/_layout.scss */
+  /* line 113, ../sass/mobile/_layout.scss */
   .object-browse-bar {
     left: 30px !important; }
-    /* line 117, ../sass/mobile/_layout.scss */
+    /* line 116, ../sass/mobile/_layout.scss */
     .object-browse-bar .context-available {
       opacity: 1 !important; }
-    /* line 120, ../sass/mobile/_layout.scss */
+    /* line 119, ../sass/mobile/_layout.scss */
     .object-browse-bar .view-switcher {
       margin-right: 0 !important; }
 
-  /* line 125, ../sass/mobile/_layout.scss */
+  /* line 124, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 129, ../sass/mobile/_layout.scss */
+  /* line 128, ../sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 134, ../sass/mobile/_layout.scss */
+  /* line 133, ../sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 139, ../sass/mobile/_layout.scss */
+  /* line 138, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -910,7 +914,7 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 144, ../sass/mobile/_layout.scss */
+  /* line 143, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -927,15 +931,15 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 1; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 153, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.left {
+  /* line 152, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane.left {
     width: 90% !important; }
-  /* line 156, ../sass/mobile/_layout.scss */
-  .browse-showtree .mobile-pane.right-repr {
+  /* line 155, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane.right-repr {
     left: 0 !important;
     transform: translateX(90%); } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 164, ../sass/mobile/_layout.scss */
+  /* line 163, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 /*****************************************************************************
@@ -2318,7 +2322,7 @@ label.checkbox.custom {
   margin-right: 20px;
   padding-left: 19px;
   position: relative;
-  vertical-align: top; }
+  vertical-align: middle; }
   /* line 202, ../sass/controls/_controls.scss */
   label.checkbox.custom em {
     color: #999;
@@ -3457,14 +3461,14 @@ label.checkbox.custom {
   box-sizing: border-box;
   overflow: hidden;
   *zoom: 1;
-  border-top: 1px solid #4d4d4d;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 5px;
   padding: 5px;
   position: relative; }
-  /* line 46, ../sass/forms/_elems.scss */
+  /* line 47, ../sass/forms/_elems.scss */
   .form .form-row.first {
     border-top: none; }
-  /* line 50, ../sass/forms/_elems.scss */
+  /* line 51, ../sass/forms/_elems.scss */
   .form .form-row .label,
   .form .form-row .controls {
     -moz-box-sizing: border-box;
@@ -3472,45 +3476,45 @@ label.checkbox.custom {
     box-sizing: border-box;
     overflow: hidden;
     *zoom: 1;
-    box-sizing: border-box;
-    font-size: 0.75rem;
+    font-size: 0.8rem;
     line-height: 22px;
     min-height: 22px; }
-  /* line 61, ../sass/forms/_elems.scss */
+  /* line 60, ../sass/forms/_elems.scss */
   .form .form-row > .label {
     float: left;
+    min-width: 120px;
     position: relative;
     white-space: nowrap;
     width: 20%; }
-  /* line 69, ../sass/forms/_elems.scss */
+  /* line 70, ../sass/forms/_elems.scss */
   .form .form-row .value {
     color: #cccccc; }
-  /* line 73, ../sass/forms/_elems.scss */
+  /* line 74, ../sass/forms/_elems.scss */
   .form .form-row .controls {
     float: left;
     position: relative;
     width: 79.9%; }
-    /* line 80, ../sass/forms/_elems.scss */
+    /* line 81, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-composite-control.l-checkbox {
       display: inline-block;
       line-height: 14px;
       margin-right: 5px; }
-    /* line 89, ../sass/forms/_elems.scss */
+    /* line 90, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-med input[type="text"] {
       width: 200px; }
-    /* line 93, ../sass/forms/_elems.scss */
+    /* line 94, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-small input[type="text"] {
       width: 50px; }
-    /* line 97, ../sass/forms/_elems.scss */
+    /* line 98, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-numeric input[type="text"] {
       text-align: right; }
-    /* line 101, ../sass/forms/_elems.scss */
+    /* line 102, ../sass/forms/_elems.scss */
     .form .form-row .controls .select {
       margin-right: 5px; }
-  /* line 106, ../sass/forms/_elems.scss */
+  /* line 107, ../sass/forms/_elems.scss */
   .form .form-row .field-hints {
     color: #666666; }
-  /* line 110, ../sass/forms/_elems.scss */
+  /* line 111, ../sass/forms/_elems.scss */
   .form .form-row .selector-list {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -3523,7 +3527,7 @@ label.checkbox.custom {
     position: relative;
     height: 150px;
     overflow: auto; }
-    /* line 121, ../sass/forms/_elems.scss */
+    /* line 122, ../sass/forms/_elems.scss */
     .form .form-row .selector-list .wrapper {
       overflow-y: auto;
       position: absolute;
@@ -3532,24 +3536,24 @@ label.checkbox.custom {
       bottom: 5px;
       left: 5px; }
 
-/* line 135, ../sass/forms/_elems.scss */
+/* line 136, ../sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 141, ../sass/forms/_elems.scss */
+/* line 142, ../sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 146, ../sass/forms/_elems.scss */
+/* line 147, ../sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 153, ../sass/forms/_elems.scss */
+  /* line 154, ../sass/forms/_elems.scss */
   .l-result div.s-hint {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -3585,18 +3589,16 @@ label.form-control.checkbox input {
   padding-right: 25px; }
   /* line 26, ../sass/forms/_validation.scss */
   .validates > .label::after {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 10px;
-    bottom: 0;
-    left: auto;
-    height: auto;
-    width: 15px;
+    /*            display: block;
+                position: absolute;
+                top: 0;
+                right: $reqSymbolM;
+                bottom: 0;
+                left: auto;
+                height: auto;
+                width: $reqSymbolW;*/
     font-family: symbolsfont;
-    font-size: 0.7em;
-    text-align: right;
-    vertical-align: middle; }
+    font-size: 0.7em; }
 /* line 44, ../sass/forms/_validation.scss */
 .validates.invalid > .label::after, .validates.invalid.req > .label::after {
   color: #ff9900;
@@ -4386,7 +4388,7 @@ input[type="text"] {
   overflow: auto; }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 6, ../sass/mobile/overlay/_overlay.scss */
+  /* line 4, ../sass/mobile/overlay/_overlay.scss */
   .overlay > .holder {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
@@ -4394,8 +4396,29 @@ input[type="text"] {
     top: 0;
     right: 0;
     bottom: 0;
-    left: 0; } }
-
+    left: 0; }
+    /* line 10, ../sass/mobile/overlay/_overlay.scss */
+    .overlay > .holder > .contents {
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      left: 10px; }
+      /* line 16, ../sass/mobile/overlay/_overlay.scss */
+      .overlay > .holder > .contents .form.editor {
+        border: none; }
+        /* line 19, ../sass/mobile/overlay/_overlay.scss */
+        .overlay > .holder > .contents .form.editor .contents {
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 33, ../sass/mobile/overlay/_overlay.scss */
+  .overlay > .holder > .contents .form.editor .contents .form-row > .label,
+  .overlay > .holder > .contents .form.editor .contents .form-row > .controls {
+    display: block;
+    float: none;
+    width: 100%; } }
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -4431,7 +4454,7 @@ input[type="text"] {
   line-height: 16px; }
 /* line 38, ../sass/user-environ/_frame.scss */
 .frame > .object-holder.abs, .btn-menu .frame > span.object-holder.l-click-area {
-  top: 19px; }
+  top: 21px; }
 /* line 41, ../sass/user-environ/_frame.scss */
 .frame .contents {
   top: 5px;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 0566559e1b..2ca3b73ab9 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -69,6 +69,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** STYLE */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
@@ -200,8 +201,9 @@ ul.tree {
         left: 0px;
         width: auto;
         height: auto;
+        line-height: 1.5rem;
         left: 15px; }
-        /* line 61, ../sass/tree/_tree.scss */
+        /* line 62, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .type-icon {
           text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
           font-size: 16px;
@@ -214,12 +216,12 @@ ul.tree {
           line-height: 100%;
           right: auto;
           width: 16px; }
-          /* line 74, ../sass/tree/_tree.scss */
+          /* line 75, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
             text-shadow: black 0 1px 2px;
             position: absolute;
             z-index: 2; }
-          /* line 80, ../sass/tree/_tree.scss */
+          /* line 81, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
             color: #ff3c00;
             font-size: 8px;
@@ -228,7 +230,7 @@ ul.tree {
             width: 8px;
             top: 1px;
             right: -2px; }
-          /* line 86, ../sass/tree/_tree.scss */
+          /* line 87, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
             color: #49dedb;
             font-size: 8px;
@@ -237,7 +239,7 @@ ul.tree {
             width: 8px;
             left: -3px;
             bottom: 0px; }
-        /* line 94, ../sass/tree/_tree.scss */
+        /* line 95, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .label .title-label {
           overflow: hidden;
           position: absolute;
@@ -252,53 +254,53 @@ ul.tree {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap; }
-      /* line 105, ../sass/tree/_tree.scss */
+      /* line 106, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.loading {
         pointer-events: none; }
-        /* line 107, ../sass/tree/_tree.scss */
+        /* line 108, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .label {
           opacity: 0.5; }
-          /* line 109, ../sass/tree/_tree.scss */
+          /* line 110, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item.loading .label .title-label {
             font-style: italic; }
-        /* line 113, ../sass/tree/_tree.scss */
+        /* line 114, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.loading .wait-spinner {
           margin-left: 14px; }
-      /* line 118, ../sass/tree/_tree.scss */
+      /* line 119, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item.selected {
         background: #005177;
         color: #fff; }
-        /* line 122, ../sass/tree/_tree.scss */
+        /* line 123, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .view-control {
           color: #0099cc; }
-        /* line 125, ../sass/tree/_tree.scss */
+        /* line 126, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item.selected .label .type-icon {
           color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 133, ../sass/tree/_tree.scss */
+        /* line 134, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item:not(.selected):hover {
           background: #404040;
           color: #cccccc; }
-          /* line 136, ../sass/tree/_tree.scss */
+          /* line 137, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .context-trigger {
             display: block; }
-          /* line 139, ../sass/tree/_tree.scss */
+          /* line 140, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .icon {
             color: #33ccff; } }
-      /* line 146, ../sass/tree/_tree.scss */
+      /* line 147, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item:not(.loading) {
         cursor: pointer; }
-      /* line 150, ../sass/tree/_tree.scss */
+      /* line 151, ../sass/tree/_tree.scss */
       ul.tree li span.tree-item .context-trigger {
         top: -1px;
         position: absolute;
         right: 3px; }
-        /* line 156, ../sass/tree/_tree.scss */
+        /* line 157, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item .context-trigger .invoke-menu {
           font-size: 0.75em;
           height: 0.9rem;
           line-height: 0.9rem; }
-  /* line 165, ../sass/tree/_tree.scss */
+  /* line 166, ../sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
@@ -329,23 +331,23 @@ ul.tree {
     height: 35px;
     line-height: 35px;
     margin-bottom: 0px; }
-    /* line 33, ../sass/mobile/_tree.scss */
+    /* line 32, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .view-control {
       position: absolute;
       font-size: 1.1em;
       right: 0px;
       width: 30px;
       text-align: center; }
-    /* line 42, ../sass/mobile/_tree.scss */
+    /* line 41, ../sass/mobile/_tree.scss */
     ul.tree li span.tree-item .label {
       left: 0;
       right: 35px;
-      font-size: 1.1em; }
-      /* line 50, ../sass/mobile/_tree.scss */
+      line-height: 35px; }
+      /* line 46, ../sass/mobile/_tree.scss */
       ul.tree li span.tree-item .label .type-icon {
         top: 9px;
         bottom: auto;
         height: 16px; }
-  /* line 61, ../sass/mobile/_tree.scss */
+  /* line 57, ../sass/mobile/_tree.scss */
   ul.tree ul.tree {
     margin-left: 20px; } }
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index d1f826443c..bb10a83455 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -47,6 +47,7 @@ $colorPausedBg: #c56f01;
 $colorPausedFg: #fff;
 $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
+$colorFormLines: rgba(#fff, 0.1);
 // Menu colors
 $colorMenuBg: lighten($colorBodyBg, 23%);
 $colorMenuFg: lighten($colorMenuBg, 70%);
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 18dc5aa1e1..a388fcac35 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -48,12 +48,10 @@
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
-//@import "mobile/controls/menus";
 @import "controls/time-controller";
 @import "edit/editor";
 @import "features/imagery";
 @import "features/time-display";
-//@import "flex";
 @import "forms/elems";
 @import "forms/validation";
 @import "forms/text-input";
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index bcec870f95..2e7a0e09d3 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -198,7 +198,7 @@ label.checkbox.custom {
 	margin-right: $interiorMargin * 4;
 	padding-left: $d + $interiorMargin;
 	position: relative;
-	vertical-align: top;
+	vertical-align: middle; // was top
 	em {
 		color: $colorBodyFg;
 		display: inline-block;
diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss
index 9a2adab2e3..095e9fc582 100644
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -21,7 +21,7 @@
  *****************************************************************************/
 .section-header {
 	@include border-radius(3px);
-	background: rgba(white, 0.1);
+	background: $colorFormLines;
 	font-size: 0.8em;
 	margin-top: $interiorMargin;
 	padding: $interiorMargin;
@@ -37,11 +37,12 @@
 	}
 
 	.form-row {
+		$m: $interiorMargin;
 		@include box-sizing(border-box);
 		@include clearfix;
-		border-top: 1px solid $colorInteriorBorder;
-		margin-top: $interiorMargin;
-		padding: $interiorMargin;
+		border-top: 1px solid $colorFormLines;
+		margin-top: $m;
+		padding: $m;
 		position: relative;
 		&.first {
 			border-top: none;
@@ -49,18 +50,18 @@
 
 		.label,
 		.controls {
-//			@include test(orange);
 			@include box-sizing(border-box);
 			@include clearfix;
-			box-sizing: border-box;
-			font-size: 0.75rem;
+			font-size: 0.8rem;
 			line-height: $formInputH;
             min-height: $formInputH;
 		}
 
 		>.label {
 			// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
+			//@include test(orange, 0.05);
 			float: left;
+			min-width: 120px;
             position: relative;
 			white-space: nowrap;
 			width: $formLabelW;
diff --git a/platform/commonUI/general/res/sass/forms/_validation.scss b/platform/commonUI/general/res/sass/forms/_validation.scss
index eba95840c5..07f15cb660 100644
--- a/platform/commonUI/general/res/sass/forms/_validation.scss
+++ b/platform/commonUI/general/res/sass/forms/_validation.scss
@@ -25,18 +25,18 @@
         padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element
         &::after {
             //            @include test(yellow, 0.3);
-            display: block;
+/*            display: block;
             position: absolute;
             top: 0;
             right: $reqSymbolM;
             bottom: 0;
             left: auto;
             height: auto;
-            width: $reqSymbolW;
+            width: $reqSymbolW;*/
             font-family: symbolsfont;
             font-size: $reqSymbolFontSize;
-            text-align: right;
-            vertical-align: middle;
+            //text-align: right;
+            //vertical-align: middle;
         }
     }
     &.invalid,
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index 913d47c0e3..f4fe4ceaad 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -20,11 +20,13 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/************************** STYLE */
+$colorMobilePaneLeft: #222;
+
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
-$mobile-listRight: 10px;
-
+$mobileOverlayMargin: 10px;
 $phoneItemH: floor($ueBrowseGridItemLg/4);
 $tabletItemH: floor($ueBrowseGridItemLg/3);
 
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 5cc0ac1b25..03e8051a14 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -26,7 +26,6 @@
         li {
             //border-top: 1px solid $colorInteriorBorder; // TEMP
             span.tree-item {
-                // Adds some space to the top of each tree item
                 height: $mobileTreeItemH;
                 line-height: $mobileTreeItemH;
                 margin-bottom: 0px;
@@ -40,13 +39,10 @@
                 }
 
                 .label {
-                    // Designates the starting left margin
-                    // (indentation) of 'My Items'
-                    // Also adds right space for selection button
                     left: 0;
                     right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
-                    font-size: 1.1em;
-                    //font-size: 1.2em; // CH CO
+                    line-height: $mobileTreeItemH;
+                    //font-size: 1.1em; // CH CO
                     .type-icon {
                         @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
                     }
diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
index ac99a36d17..9bee6e6865 100644
--- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
@@ -1,11 +1,41 @@
-.overlay {
-    @include phoneandtablet {
+@include phoneandtablet {
+    .overlay {
         $m: 0;
-        // Removes curved edges on the dialog box
-        // and makes it take up fullscreen
-        >.holder {
-          @include border-radius($m);
-          top: $m; right: $m; bottom: $m; left: $m;
+        > .holder {
+            @include border-radius($m);
+            top: $m;
+            right: $m;
+            bottom: $m;
+            left: $m;
+            > .contents {
+                top: $mobileOverlayMargin;
+                right: $mobileOverlayMargin;
+                bottom: $mobileOverlayMargin;
+                left: $mobileOverlayMargin;
+
+                .form.editor {
+                    border: none;
+
+                    .contents {
+                        top: 0;
+                        right: 0;
+                        bottom: 0;
+                        left: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@include phone {
+    .overlay > .holder > .contents .form.editor .contents .form-row {
+        > .label,
+        > .controls {
+            //@include test(blue);
+            display: block;
+            float: none;
+            width: 100%;
         }
     }
 }
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index cb0b0f1a72..cf1ad57a50 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -56,6 +56,7 @@ ul.tree {
 //				@include test(orange);
 				@include absPosDefault();
 				//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
+				line-height: $menuLineH;
 				left: $runningItemW;
 
 				.type-icon {

From 793c99ac2fb7975babe98e71a8387b54890d8ea8 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 26 Aug 2015 10:02:16 -0700
Subject: [PATCH 163/266] [Remove] Tests

RemoveActionSpec test complete, tests if
parent is object is removed. Also tests if
object not in object path is removed.
---
 .../edit/test/actions/RemoveActionSpec.js     | 91 +++++++++++++++----
 1 file changed, 71 insertions(+), 20 deletions(-)

diff --git a/platform/commonUI/edit/test/actions/RemoveActionSpec.js b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
index 072094ed1d..0a93ffa180 100644
--- a/platform/commonUI/edit/test/actions/RemoveActionSpec.js
+++ b/platform/commonUI/edit/test/actions/RemoveActionSpec.js
@@ -31,8 +31,11 @@ define(
                 mockNavigationService,
                 mockDomainObject,
                 mockParent,
-                mockGrandparent,
+                mockChildObject,
+                mockGrandchildObject,
                 mockContext,
+                mockChildContext,
+                mockGrandchildContext,
                 mockMutation,
                 mockPersistence,
                 mockType,
@@ -56,21 +59,15 @@ define(
                     "domainObject",
                     [ "getId", "getCapability" ]
                 );
+                mockChildObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability" ]
+                );
+                mockGrandchildObject = jasmine.createSpyObj(
+                    "domainObject",
+                    [ "getId", "getCapability" ]
+                );
                 mockQ = { when: mockPromise };
-                mockGrandparent = {
-                    getModel: function () {
-                        return model;
-                    },
-                    getCapability: function (k) {
-                        return capabilities[k];
-                    },
-                    useCapability: function (k, v) {
-                        return capabilities[k].invoke(v);
-                    },
-                    getId: function () {
-                        return "test";
-                    }
-                };
                 mockParent = {
                     getModel: function () {
                         return model;
@@ -80,12 +77,11 @@ define(
                     },
                     useCapability: function (k, v) {
                         return capabilities[k].invoke(v);
-                    },
-                    getParent: function () {
-                        return mockGrandparent;
                     }
                 };
                 mockContext = jasmine.createSpyObj("context", [ "getParent" ]);
+                mockChildContext = jasmine.createSpyObj("context", [ "getParent" ]);
+                mockGrandchildContext = jasmine.createSpyObj("context", [ "getParent" ]);
                 mockMutation = jasmine.createSpyObj("mutation", [ "invoke" ]);
                 mockPersistence = jasmine.createSpyObj("persistence", [ "persist" ]);
                 mockType = jasmine.createSpyObj("type", [ "hasFeature" ]);
@@ -112,7 +108,7 @@ define(
                     type: mockType
                 };
                 model = {
-                    composition: [ "a", "b", "test", "c" ]
+                    composition: [ "a", "test", "b" ]
                 };
 
                 actionContext = { domainObject: mockDomainObject };
@@ -152,11 +148,66 @@ define(
 
                 // Should have removed "test" - that was our
                 // mock domain object's id.
-                expect(result.composition).toEqual(["a", "b", "c"]);
+                expect(result.composition).toEqual(["a", "b"]);
 
                 // Finally, should have persisted
                 expect(mockPersistence.persist).toHaveBeenCalled();
             });
+            
+            it("removes parent of object currently navigated to", function () {
+                var mutator, result;
+                
+                // Navigates to child object
+                mockNavigationService.getNavigation.andReturn(mockChildObject);
+                
+                // Test is id of object being removed
+                // Child object has different id
+                mockDomainObject.getId.andReturn("test");
+                mockChildObject.getId.andReturn("not test");
+                
+                // Sets context for the child and domainObject
+                mockDomainObject.getCapability.andReturn(mockContext);
+                mockChildObject.getCapability.andReturn(mockChildContext);
+                
+                // Parents of child and domainObject are set
+                mockContext.getParent.andReturn(mockParent);
+                mockChildContext.getParent.andReturn(mockDomainObject);
+                
+                mockType.hasFeature.andReturn(true);
+                
+                action.perform();
+                
+                // Expects navigation to parent of domainObject (removed object)
+                expect(mockNavigationService.setNavigation).toHaveBeenCalledWith(mockParent);
+            });
+            
+            it("checks if removing object not in ascendent path (reaches ROOT)", function () {
+                // Navigates to grandchild of ROOT
+                mockNavigationService.getNavigation.andReturn(mockGrandchildObject);
+                
+                // domainObject (grandparent) is set as ROOT, child and grandchild
+                // are set objects not being removed
+                mockDomainObject.getId.andReturn("ROOT");
+                mockChildObject.getId.andReturn("not test");
+                mockGrandchildObject.getId.andReturn("not test");
+                
+                // Sets context for the grandchild, child, and domainObject
+                mockDomainObject.getCapability.andReturn(mockContext);
+                mockChildObject.getCapability.andReturn(mockChildContext);
+                mockGrandchildObject.getCapability.andReturn(mockGrandchildContext);
+                
+                // Parents of grandchild, child, and domainObject are set
+                mockContext.getParent.andReturn(mockParent);
+                mockChildContext.getParent.andReturn(mockDomainObject);
+                mockGrandchildContext.getParent.andReturn(mockChildObject);
+                
+                mockType.hasFeature.andReturn(true);
+                
+                action.perform();
+                
+                // Expects no navigation to occur
+                expect(mockNavigationService.setNavigation).not.toHaveBeenCalled();
+            });
 
         });
     }

From 89bfa54563d164cd9c5972d982f680b1a5f4e980 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Wed, 26 Aug 2015 10:08:57 -0700
Subject: [PATCH 164/266] [Mobile] IN PROGRESS: Misc layout tweaks; treeview
 pane styling

open #74
Treeview pane darkened;
Spacing in frame tweaked;
#content-area in right pane hidden
when treeview expanded for
phone portrait only;
Removed mobile-pane and
desktop-browse classes from markup;
---
 .../commonUI/browse/res/templates/browse.html |  4 +-
 .../general/res/css/theme-espresso.css        | 62 +++++++++++--------
 .../general/res/sass/mobile/_layout.scss      | 31 ++++++----
 .../general/res/sass/user-environ/_frame.scss |  2 +-
 4 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 402cf7a197..811e9e8bd9 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -24,7 +24,7 @@
     <mct-include key="'topbar-browse'"></mct-include>
     <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
-            <div class='split-pane-component treeview pane mobile-pane left desktop-browse'>
+            <div class='split-pane-component treeview pane left'>
                 <div class="holder abs l-mobile">
                     <div class='tree-holder abs mobile-tree-holder'>
                         <mct-representation key="'tree'"
@@ -39,7 +39,7 @@
 
             <mct-splitter class="mobile-hide"></mct-splitter>
 
-            <div class='split-pane-component items pane mobile-pane right-repr'>
+            <div class='split-pane-component items pane right-repr'>
                 <div class='holder abs l-mobile' id='content-area'>
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index c503b222f4..ec9f0aac32 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -785,7 +785,7 @@ mct-container {
     left: 0; }
 
   /* line 31, ../sass/mobile/_layout.scss */
-  .pane.left {
+  .pane.left.treeview {
     background-color: #222; }
 
   /* line 35, ../sass/mobile/_layout.scss */
@@ -797,8 +797,17 @@ mct-container {
     transition-timing-function: ease;
     backface-visibility: hidden;
     margin-left: 0 !important; }
+    /* line 39, ../sass/mobile/_layout.scss */
+    .pane.right-repr #content-area {
+      -moz-transition-duration: 0.35s;
+      -o-transition-duration: 0.35s;
+      -webkit-transition-duration: 0.35s;
+      transition-duration: 0.35s;
+      transition-timing-function: ease;
+      backface-visibility: hidden;
+      opacity: 1; }
 
-  /* line 41, ../sass/mobile/_layout.scss */
+  /* line 45, ../sass/mobile/_layout.scss */
   .user-environ .browse-area,
   .user-environ .edit-area,
   .user-environ .editor {
@@ -807,38 +816,38 @@ mct-container {
     right: 0;
     bottom: 25px; }
 
-  /* line 47, ../sass/mobile/_layout.scss */
+  /* line 51, ../sass/mobile/_layout.scss */
   .holder.l-mobile {
     top: 10px !important;
     right: 10px !important;
     bottom: 10px !important;
     left: 10px !important; }
 
-  /* line 57, ../sass/mobile/_layout.scss */
+  /* line 61, ../sass/mobile/_layout.scss */
   .browse-hidetree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 61, ../sass/mobile/_layout.scss */
-    .browse-hidetree .pane.left {
+    /* line 65, ../sass/mobile/_layout.scss */
+    .browse-hidetree .pane.left.treeview {
       opacity: 0;
       right: 100% !important;
       width: auto !important;
       overflow-y: hidden;
       overflow-x: hidden; }
-    /* line 70, ../sass/mobile/_layout.scss */
+    /* line 74, ../sass/mobile/_layout.scss */
     .browse-hidetree .pane.right-repr {
       left: 0 !important; }
 
-  /* line 77, ../sass/mobile/_layout.scss */
+  /* line 79, ../sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 86, ../sass/mobile/_layout.scss */
-    .browse-showtree .pane.left {
+    /* line 88, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane.left.treeview {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
       -webkit-transition-property: opacity;
@@ -860,44 +869,44 @@ mct-container {
       display: block !important;
       right: auto !important;
       width: 40% !important; }
-    /* line 96, ../sass/mobile/_layout.scss */
+    /* line 98, ../sass/mobile/_layout.scss */
     .browse-showtree .pane.right-repr {
       left: 40% !important; }
 
-  /* line 106, ../sass/mobile/_layout.scss */
+  /* line 107, ../sass/mobile/_layout.scss */
   .mobile-menu-icon {
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
 
-  /* line 113, ../sass/mobile/_layout.scss */
+  /* line 114, ../sass/mobile/_layout.scss */
   .object-browse-bar {
     left: 30px !important; }
-    /* line 116, ../sass/mobile/_layout.scss */
+    /* line 117, ../sass/mobile/_layout.scss */
     .object-browse-bar .context-available {
       opacity: 1 !important; }
-    /* line 119, ../sass/mobile/_layout.scss */
+    /* line 120, ../sass/mobile/_layout.scss */
     .object-browse-bar .view-switcher {
       margin-right: 0 !important; }
 
-  /* line 124, ../sass/mobile/_layout.scss */
+  /* line 125, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 128, ../sass/mobile/_layout.scss */
+  /* line 129, ../sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 133, ../sass/mobile/_layout.scss */
+  /* line 134, ../sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 138, ../sass/mobile/_layout.scss */
+  /* line 139, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -914,7 +923,7 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 143, ../sass/mobile/_layout.scss */
+  /* line 144, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -931,15 +940,18 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 1; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 152, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane.left {
+  /* line 153, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane.left.treeview {
     width: 90% !important; }
-  /* line 155, ../sass/mobile/_layout.scss */
+  /* line 156, ../sass/mobile/_layout.scss */
   .browse-showtree .pane.right-repr {
     left: 0 !important;
-    transform: translateX(90%); } }
+    transform: translateX(90%); }
+    /* line 159, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane.right-repr #content-area {
+      opacity: 0; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 163, ../sass/mobile/_layout.scss */
+  /* line 167, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 /*****************************************************************************
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 008beef117..aee784f537 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -24,15 +24,22 @@
     // Wrapper of the entire 2 panes, only enacted on
     // phone and tablet. Also for the panes
     .browse-wrapper,
-    .mobile-pane {
-        position: absolute;
+    .pane {
         top: 0 !important; right: 0; bottom: 0; left: 0;
     }
 
-    .mobile-pane.right-repr {
+    .pane.left.treeview {
+        background-color: $colorMobilePaneLeft;
+    }
+
+    .pane.right-repr {
         //@include test();
         @include slMenuTransitions;
         margin-left: 0 !important;
+        #content-area {
+            @include slMenuTransitions;
+            opacity: 1;
+        }
     }
 
     .user-environ .browse-area,
@@ -55,7 +62,7 @@
         @include user-select(none);
         // Sets the left tree menu when the tree
         // is hidden.
-        .mobile-pane.left {
+        .pane.left.treeview {
             opacity: 0;
             right: 100% !important;
             width: auto !important;
@@ -64,10 +71,8 @@
         }
         // Sets the right represenation when
         // the tree is hidden.
-        .mobile-pane.right-repr {
-            //@include slMenuTransitions;
+        .pane.right-repr {
             left: 0 !important;
-            //width: 100% !important;
         }
     }
 
@@ -80,7 +85,7 @@
         @include user-select(none);
 
         // Sets the left tree menu when the tree is shown.
-        .mobile-pane.left {
+        .pane.left.treeview {
             @include trans-prop-nice(opacity, .4s);
             @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
             opacity: 1;
@@ -90,8 +95,7 @@
             width: $proporMenuWithView !important;
         }
         // Sets the right representation when the tree is shown.
-        .mobile-pane.right-repr {
-            //@include slMenuTransitions; CH MOVED
+        .pane.right-repr {
             left: $proporMenuWithView !important;
             //width: auto !important;
 
@@ -146,12 +150,15 @@
 
 @include phonePortrait {
     .browse-showtree {
-        .mobile-pane.left {
+        .pane.left.treeview {
             width: $proporMenuOnly !important;
         }
-        .mobile-pane.right-repr {
+        .pane.right-repr {
             left: 0 !important;
             transform: translateX($proporMenuOnly);
+            #content-area {
+                opacity: 0;
+            }
         }
     }
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss
index d67c0ccb9a..f04071fa0e 100644
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -36,7 +36,7 @@
 		line-height: $ohH;
 	}
 	>.object-holder.abs {
-		top: $ohH + $interiorMarginSm;
+		top: $ohH + $interiorMargin;
 	}
 	.contents {
 		$myM: $interiorMargin;

From 2542255342a9d3919a35e9934fb4619f19247819 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 26 Aug 2015 10:16:22 -0700
Subject: [PATCH 165/266] [Mobile] AgentService call

window referred to in TreeNodeController added as
keyword to skip in top comment.
---
 platform/commonUI/general/src/controllers/TreeNodeController.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 0aba8fc246..b25d58a025 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global define,Promise*/
+/*global define,Promise,window*/
 
 /**
  * Module defining TreeNodeController. Created by vwoeltje on 11/10/14.

From 9a3009f32746c621ce5b6b9e75c18953a5017ea1 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Wed, 26 Aug 2015 10:50:14 -0700
Subject: [PATCH 166/266] [Mobile] IN PROGRESS: Styling on Create menu

open #74
---
 .../general/res/css/theme-espresso.css        | 34 +++++++++++++++++++
 platform/commonUI/general/res/sass/_main.scss |  1 +
 .../res/sass/mobile/controls/_menus.scss      | 29 ++++++++++------
 3 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index ec9f0aac32..75d2c7b754 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -2999,6 +2999,40 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 26, ../sass/mobile/controls/_menus.scss */
+  .menu-element .super-menu {
+    width: 250px;
+    height: 250px; }
+    /* line 32, ../sass/mobile/controls/_menus.scss */
+    .menu-element .super-menu .pane.left {
+      border-right: none;
+      padding-right: 0;
+      width: 100%; }
+    /* line 37, ../sass/mobile/controls/_menus.scss */
+    .menu-element .super-menu .pane.right {
+      display: none; } }
 /* line 1, ../sass/controls/_time-controller.scss */
 .l-time-controller {
   position: relative;
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index a388fcac35..8803074f63 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -48,6 +48,7 @@
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
+@import "mobile/controls/menus";
 @import "controls/time-controller";
 @import "edit/editor";
 @import "features/imagery";
diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
index e06fdb7979..3c8ea79917 100644
--- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss
@@ -20,15 +20,24 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-// Mobile hamburger icon is
-// sized according to the device
-.mobile-menu-icon {
-    display: inline-block;
-    @include phoneandtablet {
-        font-size: 21px;
-        //padding-top: $imageThumbPad;
-    }
-    @include desktop {
-        display: none;
+// Override the Create menu for mobile
+@include phoneandtablet {
+    .menu-element {
+        .super-menu {
+            $d: 250px;
+            width: $d;
+            height: $d;
+
+            .pane {
+                &.left {
+                    border-right: none;
+                    padding-right: 0;
+                    width: 100%;
+                }
+                &.right {
+                    display: none;
+                }
+            }
+        }
     }
 }

From f80266b23f40d92d418b608147bce03bd8bb96e0 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Wed, 26 Aug 2015 12:34:45 -0700
Subject: [PATCH 167/266] [Mobile] IN PROGRESS: Styling in forms, overlay and
 tree

open #74
.section-header and form-row styles changed in forms/_elems.scss;
significant changes to overlay in mobile: full-screen, close button, more;
tree hover bg changed to use rgba(#fff, 0.1);
removed "Hide title by default" in core/bundle.json;
---
 .../commonUI/dialog/res/templates/dialog.html |   2 +-
 .../dialog/res/templates/overlay.html         |   2 +-
 platform/commonUI/general/res/css/forms.css   |  59 +++++-----
 .../general/res/css/theme-espresso.css        | 103 +++++++++---------
 platform/commonUI/general/res/css/tree.css    |   2 +-
 .../commonUI/general/res/sass/_constants.scss |   6 +-
 .../general/res/sass/forms/_elems.scss        |  17 +--
 .../res/sass/mobile/overlay/_overlay.scss     |  10 ++
 .../general/res/sass/overlay/_overlay.scss    |  14 +--
 .../commonUI/general/res/sass/tree/_tree.scss |   2 +-
 platform/core/bundle.json                     |   6 -
 11 files changed, 113 insertions(+), 110 deletions(-)

diff --git a/platform/commonUI/dialog/res/templates/dialog.html b/platform/commonUI/dialog/res/templates/dialog.html
index 661ea36ff5..1bea0290e7 100644
--- a/platform/commonUI/dialog/res/templates/dialog.html
+++ b/platform/commonUI/dialog/res/templates/dialog.html
@@ -25,7 +25,7 @@
         All fields marked <span class="ui-symbol req">*</span> are required.
     </div>
 </div>
-<div class="abs form outline editor">
+<div class="abs form editor">
     <div class='abs contents l-dialog'>
         <mct-form ng-model="ngModel.value"
                   structure="ngModel.structure"
diff --git a/platform/commonUI/dialog/res/templates/overlay.html b/platform/commonUI/dialog/res/templates/overlay.html
index 2718f9d74d..df8bd9c160 100644
--- a/platform/commonUI/dialog/res/templates/overlay.html
+++ b/platform/commonUI/dialog/res/templates/overlay.html
@@ -25,7 +25,7 @@
         <a href=""
            ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="btn normal ui-symbol close">
+           class="clk-icon icon ui-symbol close">
             x
         </a>
         <div class="abs contents" ng-transclude>
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index 6e2aec574a..a9ce755177 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -172,21 +172,20 @@
  *****************************************************************************/
 /* line 22, ../sass/forms/_elems.scss */
 .section-header {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
   background: rgba(255, 255, 255, 0.1);
+  color: #cccccc;
   font-size: 0.8em;
-  margin-top: 5px;
-  padding: 5px; }
-  /* line 28, ../sass/forms/_elems.scss */
-  .section-header:first-child {
-    margin-top: 0; }
+  padding: 5px 5px;
+  text-transform: uppercase; }
 
 /* line 35, ../sass/forms/_elems.scss */
 .form .form-section {
-  position: relative; }
-/* line 39, ../sass/forms/_elems.scss */
+  position: relative;
+  margin-bottom: 20px; }
+/* line 40, ../sass/forms/_elems.scss */
 .form .form-row {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -195,12 +194,12 @@
   *zoom: 1;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 5px;
-  padding: 5px;
+  padding: 5px 5px;
   position: relative; }
-  /* line 47, ../sass/forms/_elems.scss */
+  /* line 48, ../sass/forms/_elems.scss */
   .form .form-row.first {
     border-top: none; }
-  /* line 51, ../sass/forms/_elems.scss */
+  /* line 52, ../sass/forms/_elems.scss */
   .form .form-row .label,
   .form .form-row .controls {
     -moz-box-sizing: border-box;
@@ -211,42 +210,42 @@
     font-size: 0.8rem;
     line-height: 22px;
     min-height: 22px; }
-  /* line 60, ../sass/forms/_elems.scss */
+  /* line 61, ../sass/forms/_elems.scss */
   .form .form-row > .label {
     float: left;
     min-width: 120px;
     position: relative;
     white-space: nowrap;
-    width: 20%; }
-  /* line 70, ../sass/forms/_elems.scss */
+    width: 30%; }
+  /* line 71, ../sass/forms/_elems.scss */
   .form .form-row .value {
     color: #cccccc; }
-  /* line 74, ../sass/forms/_elems.scss */
+  /* line 75, ../sass/forms/_elems.scss */
   .form .form-row .controls {
     float: left;
     position: relative;
-    width: 79.9%; }
-    /* line 81, ../sass/forms/_elems.scss */
+    width: 69.9%; }
+    /* line 82, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-composite-control.l-checkbox {
       display: inline-block;
       line-height: 14px;
       margin-right: 5px; }
-    /* line 90, ../sass/forms/_elems.scss */
+    /* line 91, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-med input[type="text"] {
       width: 200px; }
-    /* line 94, ../sass/forms/_elems.scss */
+    /* line 95, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-small input[type="text"] {
       width: 50px; }
-    /* line 98, ../sass/forms/_elems.scss */
+    /* line 99, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-numeric input[type="text"] {
       text-align: right; }
-    /* line 102, ../sass/forms/_elems.scss */
+    /* line 103, ../sass/forms/_elems.scss */
     .form .form-row .controls .select {
       margin-right: 5px; }
-  /* line 107, ../sass/forms/_elems.scss */
+  /* line 108, ../sass/forms/_elems.scss */
   .form .form-row .field-hints {
     color: #666666; }
-  /* line 111, ../sass/forms/_elems.scss */
+  /* line 112, ../sass/forms/_elems.scss */
   .form .form-row .selector-list {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -259,7 +258,7 @@
     position: relative;
     height: 150px;
     overflow: auto; }
-    /* line 122, ../sass/forms/_elems.scss */
+    /* line 123, ../sass/forms/_elems.scss */
     .form .form-row .selector-list .wrapper {
       overflow-y: auto;
       position: absolute;
@@ -268,24 +267,24 @@
       bottom: 5px;
       left: 5px; }
 
-/* line 136, ../sass/forms/_elems.scss */
+/* line 137, ../sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 142, ../sass/forms/_elems.scss */
+/* line 143, ../sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 147, ../sass/forms/_elems.scss */
+/* line 148, ../sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 154, ../sass/forms/_elems.scss */
+  /* line 155, ../sass/forms/_elems.scss */
   .l-result div.s-hint {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 75d2c7b754..289902281a 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -3486,21 +3486,20 @@ label.checkbox.custom {
  *****************************************************************************/
 /* line 22, ../sass/forms/_elems.scss */
 .section-header {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
   background: rgba(255, 255, 255, 0.1);
+  color: #cccccc;
   font-size: 0.8em;
-  margin-top: 5px;
-  padding: 5px; }
-  /* line 28, ../sass/forms/_elems.scss */
-  .section-header:first-child {
-    margin-top: 0; }
+  padding: 5px 5px;
+  text-transform: uppercase; }
 
 /* line 35, ../sass/forms/_elems.scss */
 .form .form-section {
-  position: relative; }
-/* line 39, ../sass/forms/_elems.scss */
+  position: relative;
+  margin-bottom: 20px; }
+/* line 40, ../sass/forms/_elems.scss */
 .form .form-row {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -3509,12 +3508,12 @@ label.checkbox.custom {
   *zoom: 1;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 5px;
-  padding: 5px;
+  padding: 5px 5px;
   position: relative; }
-  /* line 47, ../sass/forms/_elems.scss */
+  /* line 48, ../sass/forms/_elems.scss */
   .form .form-row.first {
     border-top: none; }
-  /* line 51, ../sass/forms/_elems.scss */
+  /* line 52, ../sass/forms/_elems.scss */
   .form .form-row .label,
   .form .form-row .controls {
     -moz-box-sizing: border-box;
@@ -3525,42 +3524,42 @@ label.checkbox.custom {
     font-size: 0.8rem;
     line-height: 22px;
     min-height: 22px; }
-  /* line 60, ../sass/forms/_elems.scss */
+  /* line 61, ../sass/forms/_elems.scss */
   .form .form-row > .label {
     float: left;
     min-width: 120px;
     position: relative;
     white-space: nowrap;
-    width: 20%; }
-  /* line 70, ../sass/forms/_elems.scss */
+    width: 30%; }
+  /* line 71, ../sass/forms/_elems.scss */
   .form .form-row .value {
     color: #cccccc; }
-  /* line 74, ../sass/forms/_elems.scss */
+  /* line 75, ../sass/forms/_elems.scss */
   .form .form-row .controls {
     float: left;
     position: relative;
-    width: 79.9%; }
-    /* line 81, ../sass/forms/_elems.scss */
+    width: 69.9%; }
+    /* line 82, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-composite-control.l-checkbox {
       display: inline-block;
       line-height: 14px;
       margin-right: 5px; }
-    /* line 90, ../sass/forms/_elems.scss */
+    /* line 91, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-med input[type="text"] {
       width: 200px; }
-    /* line 94, ../sass/forms/_elems.scss */
+    /* line 95, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-small input[type="text"] {
       width: 50px; }
-    /* line 98, ../sass/forms/_elems.scss */
+    /* line 99, ../sass/forms/_elems.scss */
     .form .form-row .controls .l-numeric input[type="text"] {
       text-align: right; }
-    /* line 102, ../sass/forms/_elems.scss */
+    /* line 103, ../sass/forms/_elems.scss */
     .form .form-row .controls .select {
       margin-right: 5px; }
-  /* line 107, ../sass/forms/_elems.scss */
+  /* line 108, ../sass/forms/_elems.scss */
   .form .form-row .field-hints {
     color: #666666; }
-  /* line 111, ../sass/forms/_elems.scss */
+  /* line 112, ../sass/forms/_elems.scss */
   .form .form-row .selector-list {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -3573,7 +3572,7 @@ label.checkbox.custom {
     position: relative;
     height: 150px;
     overflow: auto; }
-    /* line 122, ../sass/forms/_elems.scss */
+    /* line 123, ../sass/forms/_elems.scss */
     .form .form-row .selector-list .wrapper {
       overflow-y: auto;
       position: absolute;
@@ -3582,24 +3581,24 @@ label.checkbox.custom {
       bottom: 5px;
       left: 5px; }
 
-/* line 136, ../sass/forms/_elems.scss */
+/* line 137, ../sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 142, ../sass/forms/_elems.scss */
+/* line 143, ../sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 147, ../sass/forms/_elems.scss */
+/* line 148, ../sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 154, ../sass/forms/_elems.scss */
+  /* line 155, ../sass/forms/_elems.scss */
   .l-result div.s-hint {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -4346,19 +4345,14 @@ input[type="text"] {
   background: rgba(0, 0, 0, 0.7);
   z-index: 100; }
 /* line 27, ../sass/overlay/_overlay.scss */
-.overlay .btn.close {
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-  padding: 3px 6px;
+.overlay .clk-icon.close {
   position: absolute;
-  border: none;
-  top: 3px;
-  right: 3px;
+  top: 10px;
+  right: 10px;
   bottom: auto;
   left: auto;
   z-index: 100; }
-/* line 38, ../sass/overlay/_overlay.scss */
+/* line 32, ../sass/overlay/_overlay.scss */
 .overlay > .holder {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -4391,29 +4385,29 @@ input[type="text"] {
   /* line 175, ../sass/_mixins.scss */
   .overlay > .holder.btn-menu .invoke-menu {
     color: #757575; }
-  /* line 45, ../sass/overlay/_overlay.scss */
+  /* line 39, ../sass/overlay/_overlay.scss */
   .overlay > .holder > .contents {
     top: 25px;
     right: 25px;
     bottom: 25px;
     left: 25px; }
-/* line 50, ../sass/overlay/_overlay.scss */
+/* line 44, ../sass/overlay/_overlay.scss */
 .overlay .title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 1.3em;
+  font-size: 1.2em;
   margin-bottom: 5px; }
-/* line 56, ../sass/overlay/_overlay.scss */
+/* line 50, ../sass/overlay/_overlay.scss */
 .overlay .top-bar {
   height: 60px; }
-/* line 60, ../sass/overlay/_overlay.scss */
+/* line 54, ../sass/overlay/_overlay.scss */
 .overlay .editor {
   top: 70px;
   bottom: 50px;
   left: 0;
   right: 0; }
-/* line 66, ../sass/overlay/_overlay.scss */
+/* line 60, ../sass/overlay/_overlay.scss */
 .overlay .bottom-bar {
   top: auto;
   right: 0;
@@ -4422,10 +4416,10 @@ input[type="text"] {
   overflow: visible;
   height: 40px;
   text-align: right; }
-  /* line 72, ../sass/overlay/_overlay.scss */
+  /* line 66, ../sass/overlay/_overlay.scss */
   .overlay .bottom-bar .btn {
     margin-left: 10px; }
-/* line 76, ../sass/overlay/_overlay.scss */
+/* line 70, ../sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
   top: 5px;
   right: 5px;
@@ -4435,6 +4429,10 @@ input[type="text"] {
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 4, ../sass/mobile/overlay/_overlay.scss */
+  .overlay .clk-icon.close {
+    top: 10px;
+    right: 10px; }
+  /* line 8, ../sass/mobile/overlay/_overlay.scss */
   .overlay > .holder {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
@@ -4443,23 +4441,26 @@ input[type="text"] {
     right: 0;
     bottom: 0;
     left: 0; }
-    /* line 10, ../sass/mobile/overlay/_overlay.scss */
+    /* line 14, ../sass/mobile/overlay/_overlay.scss */
     .overlay > .holder > .contents {
       top: 10px;
       right: 10px;
       bottom: 10px;
       left: 10px; }
-      /* line 16, ../sass/mobile/overlay/_overlay.scss */
+      /* line 21, ../sass/mobile/overlay/_overlay.scss */
+      .overlay > .holder > .contents .top-bar > .title {
+        margin-right: 1.2em; }
+      /* line 26, ../sass/mobile/overlay/_overlay.scss */
       .overlay > .holder > .contents .form.editor {
         border: none; }
-        /* line 19, ../sass/mobile/overlay/_overlay.scss */
+        /* line 29, ../sass/mobile/overlay/_overlay.scss */
         .overlay > .holder > .contents .form.editor .contents {
           top: 0;
           right: 0;
           bottom: 0;
           left: 0; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 33, ../sass/mobile/overlay/_overlay.scss */
+  /* line 43, ../sass/mobile/overlay/_overlay.scss */
   .overlay > .holder > .contents .form.editor .contents .form-row > .label,
   .overlay > .holder > .contents .form.editor .contents .form-row > .controls {
     display: block;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 2ca3b73ab9..701433a525 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -279,7 +279,7 @@ ul.tree {
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
         /* line 134, ../sass/tree/_tree.scss */
         ul.tree li span.tree-item:not(.selected):hover {
-          background: #404040;
+          background: rgba(255, 255, 255, 0.1);
           color: #cccccc; }
           /* line 137, ../sass/tree/_tree.scss */
           ul.tree li span.tree-item:not(.selected):hover .context-trigger {
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index bb10a83455..83031d6b0e 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -48,6 +48,7 @@ $colorPausedFg: #fff;
 $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
 $colorFormLines: rgba(#fff, 0.1);
+$colorFormSectionHeader: rgba(#000, 0.2);
 // Menu colors
 $colorMenuBg: lighten($colorBodyBg, 23%);
 $colorMenuFg: lighten($colorMenuBg, 70%);
@@ -104,6 +105,7 @@ $ueEditLeftPaneW: 75%;
 // Overlay
 $ovrTopBarH: 60px;
 $ovrFooterH: 40px;
+$overlayMargin: 25px;
 // Items
 $ueBrowseGridItemLg: 200px;
 $ueBrowseGridItemTopBarH: 20px;
@@ -145,9 +147,11 @@ $reqSymbolFontSize: 0.7em;
 
 /************************** CONTROLS */
 $controlDisabledOpacity: 0.3;
-$formLabelW: 20%;
+$formLabelW: 30%;
 $formInputH: 22px;
 $formRowCtrlsH: 14px;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
 $menuLineH: 1.5rem;
 $menuLineHPx: 24px;
 $scrollbarTrackSize: 10px;
diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss
index 095e9fc582..3971036983 100644
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -20,20 +20,21 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .section-header {
-	@include border-radius(3px);
-	background: $colorFormLines;
+	@include border-radius($basicCr);
+	background: rgba(#fff, 0.1);
+	$c: lighten($colorBodyFg, 20%);
+	//border-bottom: 1px solid rgba(#fff, 0.3);
+	color: $c;
 	font-size: 0.8em;
-	margin-top: $interiorMargin;
-	padding: $interiorMargin;
-	&:first-child {
-		margin-top: 0;
-	}
+	padding: $formTBPad $formLRPad;
+	text-transform: uppercase;
 }
 
 .form {
 //	@include test(orange);
 	.form-section {
 		position: relative;
+		margin-bottom: $interiorMarginLg * 2;
 	}
 
 	.form-row {
@@ -42,7 +43,7 @@
 		@include clearfix;
 		border-top: 1px solid $colorFormLines;
 		margin-top: $m;
-		padding: $m;
+		padding: $formTBPad $formLRPad;
 		position: relative;
 		&.first {
 			border-top: none;
diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
index 9bee6e6865..2c455a9941 100644
--- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
@@ -1,6 +1,10 @@
 @include phoneandtablet {
     .overlay {
         $m: 0;
+        .clk-icon.close {
+            top: $mobileOverlayMargin; right: $mobileOverlayMargin;
+        }
+
         > .holder {
             @include border-radius($m);
             top: $m;
@@ -13,6 +17,12 @@
                 bottom: $mobileOverlayMargin;
                 left: $mobileOverlayMargin;
 
+                .top-bar {
+                    > .title {
+                        margin-right: 1.2em;
+                    }
+                }
+
                 .form.editor {
                     border: none;
 
diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss
index 692db103e1..f5c9cd477f 100644
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@@ -24,16 +24,10 @@
 		background: $colorOvrBlocker;
 		z-index: 100;
 	}
-    .btn.close {
-	    @include border-radius($basicCr * 2);
-	    padding: 3px 6px;
+    .clk-icon.close {
         position: absolute;
-	    border: none;
-        top: $interiorMarginSm; right: $interiorMarginSm; bottom: auto; left: auto;
+        top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
 	    z-index: 100;
-    }
-    .editor {
-//        background: $colorBodyBg;
     }
 	>.holder {
 		$i: 15%;
@@ -43,13 +37,13 @@
 		top: $i; right: $i; bottom: $i; left: $i;
 		z-index: 101;
         >.contents {
-            $m: 25px;
+            $m: $overlayMargin;
             top: $m; right: $m; bottom: $m; left: $m;
         }
 	}
     .title {
 	    @include ellipsize();
-        font-size: 1.3em;
+        font-size: 1.2em;
 	    margin-bottom: $interiorMargin;
     }
     
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index cf1ad57a50..65ddab2a63 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -132,7 +132,7 @@ ul.tree {
                 // NOTE: [Mobile] Removed Hover on Mobile
                 @include desktop {
                     &:hover {
-                        background: lighten($colorBodyBg, 5%);
+                        background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
                         color: lighten($colorBodyFg, 20%);
                         .context-trigger {
                             display: block;
diff --git a/platform/core/bundle.json b/platform/core/bundle.json
index f5bf73b8fc..0643be2646 100644
--- a/platform/core/bundle.json
+++ b/platform/core/bundle.json
@@ -117,12 +117,6 @@
                         "pattern": "\\S+",
                         "required": true,
                         "cssclass": "l-med"
-                    },
-                    {
-                        "control": "checkbox",
-                        "name": "Display title by default",
-                        "key": "displayTitle",
-                        "property": [ "display", "title" ]
                     }
                 ]
             },

From b8b9721ddc961c92d2a9cf8e4f362f0e308d58c9 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Wed, 26 Aug 2015 13:04:09 -0700
Subject: [PATCH 168/266] [Mobile] IN PROGRESS: Hide name in view-switcher in
 mobile

open #74
---
 .../general/res/css/theme-espresso.css        | 21 +++++++++++--------
 .../general/res/sass/mobile/_layout.scss      |  4 ++++
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 289902281a..0f33224f0d 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -889,24 +889,27 @@ mct-container {
     /* line 120, ../sass/mobile/_layout.scss */
     .object-browse-bar .view-switcher {
       margin-right: 0 !important; }
+      /* line 122, ../sass/mobile/_layout.scss */
+      .object-browse-bar .view-switcher .name {
+        display: none; }
 
-  /* line 125, ../sass/mobile/_layout.scss */
+  /* line 129, ../sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 129, ../sass/mobile/_layout.scss */
+  /* line 133, ../sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 134, ../sass/mobile/_layout.scss */
+  /* line 138, ../sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 139, ../sass/mobile/_layout.scss */
+  /* line 143, ../sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -923,7 +926,7 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 144, ../sass/mobile/_layout.scss */
+  /* line 148, ../sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -940,18 +943,18 @@ mct-container {
     transition-timing-function: ease-in-out;
     opacity: 1; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 153, ../sass/mobile/_layout.scss */
+  /* line 157, ../sass/mobile/_layout.scss */
   .browse-showtree .pane.left.treeview {
     width: 90% !important; }
-  /* line 156, ../sass/mobile/_layout.scss */
+  /* line 160, ../sass/mobile/_layout.scss */
   .browse-showtree .pane.right-repr {
     left: 0 !important;
     transform: translateX(90%); }
-    /* line 159, ../sass/mobile/_layout.scss */
+    /* line 163, ../sass/mobile/_layout.scss */
     .browse-showtree .pane.right-repr #content-area {
       opacity: 0; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 167, ../sass/mobile/_layout.scss */
+  /* line 171, ../sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 /*****************************************************************************
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index aee784f537..a6ffe688c4 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -119,6 +119,10 @@
         }
         .view-switcher {
             margin-right: 0 !important;
+            .name {
+                // Hide the name in mobile
+                display: none;
+            }
         }
     }
 

From a27083c28c690f2370a04330e025e4d4fdc1f89a Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 26 Aug 2015 16:54:13 -0700
Subject: [PATCH 169/266] [Mobile] IN PROGRESS: tweaked padding in form-row

open #74
---
 platform/commonUI/general/res/css/forms.css   |  2 +-
 .../general/res/css/theme-espresso.css        | 20 +++++++++----------
 .../general/res/sass/forms/_elems.scss        |  2 +-
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index a9ce755177..d5e363bcd9 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -194,7 +194,7 @@
   *zoom: 1;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 5px;
-  padding: 5px 5px;
+  padding: 5px 0;
   position: relative; }
   /* line 48, ../sass/forms/_elems.scss */
   .form .form-row.first {
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 0f33224f0d..80ba436f86 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -120,7 +120,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -141,38 +141,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -3511,7 +3511,7 @@ label.checkbox.custom {
   *zoom: 1;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 5px;
-  padding: 5px 5px;
+  padding: 5px 0;
   position: relative; }
   /* line 48, ../sass/forms/_elems.scss */
   .form .form-row.first {
diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss
index 3971036983..61825dfd2f 100644
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -43,7 +43,7 @@
 		@include clearfix;
 		border-top: 1px solid $colorFormLines;
 		margin-top: $m;
-		padding: $formTBPad $formLRPad;
+		padding: $formTBPad 0;
 		position: relative;
 		&.first {
 			border-top: none;

From d33678276cc24712bc8f12bef9dd6b0cb41e094c Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 26 Aug 2015 17:49:40 -0700
Subject: [PATCH 170/266] [Mobile] IN PROGRESS: Re-orgs after merge of Shivam's
 mobile branch

open #74
Re-applied changes to browse.html;
Added mobile/.../_search.scss;
Removed unused mobile/search/layout.scss;
Moved inclusion of search/_search.scss from tree.scss to main.scss;
---
 .../commonUI/browse/res/templates/browse.html |  34 +--
 .../general/res/css/theme-espresso.css        | 253 ++++++++++++++++++
 platform/commonUI/general/res/css/tree.css    | 246 -----------------
 platform/commonUI/general/res/sass/_main.scss |   2 +
 .../res/sass/mobile/search/_search.scss       |  13 +
 .../general/res/sass/search/_layout.scss      |  31 ---
 platform/commonUI/general/res/sass/tree.scss  |   1 -
 7 files changed, 286 insertions(+), 294 deletions(-)
 create mode 100644 platform/commonUI/general/res/sass/mobile/search/_search.scss
 delete mode 100644 platform/commonUI/general/res/sass/search/_layout.scss

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 6e6db9d1a4..dd97bbea3f 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -25,22 +25,24 @@
     <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
             <div class='split-pane-component treeview pane left'>
-                <mct-representation key="'create-button'" mct-object="navigatedObject">
-                </mct-representation>
-                <div class='holder search-holder abs l-mobile'
-                     ng-class="{active: treeModel.search}">
-                    <mct-representation key="'search'"
-                                 mct-object="domainObject"
-                                 ng-model="treeModel">
-                    </mct-representation>
-                </div>
-                <div class='tree-holder abs mobile-tree-holder'
-                     ng-hide="treeModel.search">
-                    <mct-representation key="'tree'"
-                                        mct-object="domainObject"
-                                        ng-model="treeModel">
-                    </mct-representation>
-                </div>
+	            <div class="holder abs l-mobile">
+	                <mct-representation key="'create-button'" mct-object="navigatedObject">
+	                </mct-representation>
+	                <div class='holder search-holder abs'
+	                     ng-class="{active: treeModel.search}">
+	                    <mct-representation key="'search'"
+	                                 mct-object="domainObject"
+	                                 ng-model="treeModel">
+	                    </mct-representation>
+	                </div>
+	                <div class='tree-holder abs mobile-tree-holder'
+	                     ng-hide="treeModel.search">
+	                    <mct-representation key="'tree'"
+	                                        mct-object="domainObject"
+	                                        ng-model="treeModel">
+	                    </mct-representation>
+	                </div>
+	            </div>
             </div>
 
             <mct-splitter class="mobile-hide"></mct-splitter>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 9007cbbe1d..12ed7b12aa 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -4350,6 +4350,259 @@ input[type="text"] {
   right: 0;
   left: 0; }
 
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../sass/search/_search.scss */
+.abs.search-holder, .btn-menu span.search-holder.l-click-area {
+  height: 25px;
+  bottom: 0;
+  top: 23px;
+  z-index: 5; }
+  /* line 27, ../sass/search/_search.scss */
+  .abs.search-holder.active, .btn-menu span.search-holder.active.l-click-area {
+    height: auto;
+    bottom: 0; }
+
+/* line 38, ../sass/search/_search.scss */
+.search {
+  display: flex;
+  flex-direction: column;
+  height: 100%; }
+  /* line 49, ../sass/search/_search.scss */
+  .search .search-bar {
+    font-size: 0.8em;
+    position: relative;
+    width: 100%; }
+    /* line 66, ../sass/search/_search.scss */
+    .search .search-bar .search-input {
+      height: 25px;
+      line-height: 25px;
+      padding-top: 0;
+      padding-bottom: 0; }
+    /* line 73, ../sass/search/_search.scss */
+    .search .search-bar .search-icon,
+    .search .search-bar .clear-icon,
+    .search .search-bar .menu-icon {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      color: #737373;
+      height: 17px;
+      width: 17px;
+      line-height: 17px;
+      position: absolute;
+      text-align: center;
+      top: 4px; }
+    /* line 86, ../sass/search/_search.scss */
+    .search .search-bar .clear-icon,
+    .search .search-bar .menu-icon {
+      cursor: pointer;
+      transition: color .25s; }
+    /* line 93, ../sass/search/_search.scss */
+    .search .search-bar .search-input {
+      position: relative;
+      width: 100%;
+      padding-left: 22px !important;
+      padding-right: 44px !important; }
+      /* line 100, ../sass/search/_search.scss */
+      .search .search-bar .search-input input {
+        width: 100%; }
+    /* line 105, ../sass/search/_search.scss */
+    .search .search-bar .search-icon {
+      color: #737373;
+      left: 3px;
+      transition: visibility .15s, opacity .15s, color .2s;
+      pointer-events: none; }
+    /* line 125, ../sass/search/_search.scss */
+    .search .search-bar .search-input:hover + div.search-icon {
+      color: #a6a6a6; }
+    /* line 129, ../sass/search/_search.scss */
+    .search .search-bar .clear-icon {
+      right: 22px;
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility .15s, opacity .15s, color .2s; }
+      /* line 138, ../sass/search/_search.scss */
+      .search .search-bar .clear-icon.content {
+        visibility: visible;
+        opacity: 1; }
+      /* line 143, ../sass/search/_search.scss */
+      .search .search-bar .clear-icon:hover {
+        color: #a6a6a6; }
+    /* line 148, ../sass/search/_search.scss */
+    .search .search-bar .menu-icon {
+      font-size: 0.8em;
+      padding-right: 4px;
+      right: 4px;
+      text-align: right; }
+      /* line 154, ../sass/search/_search.scss */
+      .search .search-bar .menu-icon:hover {
+        color: #a6a6a6; }
+    /* line 159, ../sass/search/_search.scss */
+    .search .search-bar .search-menu-holder {
+      float: right;
+      left: -20px;
+      z-index: 1;
+      transition: visibility .05s, opacity .05s; }
+      /* line 169, ../sass/search/_search.scss */
+      .search .search-bar .search-menu-holder.off {
+        visibility: hidden;
+        opacity: 0; }
+    /* line 176, ../sass/search/_search.scss */
+    .search .search-bar .menu-icon:hover + div.search-menu-holder {
+      visibility: visible; }
+    /* line 179, ../sass/search/_search.scss */
+    .search .search-bar div.search-menu-holder:hover {
+      visibility: visible; }
+  /* line 184, ../sass/search/_search.scss */
+  .search .active-filter-display {
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    line-height: 130%;
+    padding: 5px 0;
+    padding-left: 1.4625em;
+    font-size: 0.65em;
+    margin-top: 3px; }
+    /* line 199, ../sass/search/_search.scss */
+    .search .active-filter-display .clear-filters-icon {
+      opacity: 0.4;
+      font-size: 0.8em;
+      position: absolute;
+      left: 1px;
+      cursor: pointer; }
+    /* line 210, ../sass/search/_search.scss */
+    .search .active-filter-display.off {
+      visibility: hidden;
+      opacity: 0;
+      height: 0;
+      margin: 0;
+      padding: 0;
+      border: 0; }
+  /* line 220, ../sass/search/_search.scss */
+  .search .search-scroll {
+    order: 3;
+    margin-top: 4px;
+    overflow-y: auto;
+    top: auto;
+    height: auto;
+    max-height: 100%;
+    position: relative; }
+    /* line 235, ../sass/search/_search.scss */
+    .search .search-scroll .results .search-result-item {
+      -moz-transition: background-color 0.25s;
+      -o-transition: background-color 0.25s;
+      -webkit-transition: background-color 0.25s;
+      transition: background-color 0.25s;
+      margin-bottom: 2px;
+      border-radius: 2px;
+      padding-top: 4px;
+      padding-bottom: 2px; }
+      /* line 249, ../sass/search/_search.scss */
+      .search .search-scroll .results .search-result-item .label {
+        margin-left: 6px; }
+        /* line 253, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item .label .title-label {
+          display: inline-block;
+          position: absolute;
+          left: 29px;
+          right: 5px;
+          font-size: .8em;
+          line-height: 17px;
+          width: auto;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap; }
+      /* line 275, ../sass/search/_search.scss */
+      .search .search-scroll .results .search-result-item.selected {
+        background: #005177;
+        color: #fff; }
+        /* line 279, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item.selected .view-control {
+          color: #0099cc; }
+        /* line 282, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item.selected .label .type-icon {
+          color: #fff; }
+      /* line 287, ../sass/search/_search.scss */
+      .search .search-scroll .results .search-result-item .label .type-icon .l-icon-link {
+        text-shadow: black 0 1px 2px;
+        z-index: 2;
+        color: #49dedb;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        margin-left: -25px; }
+      /* line 296, ../sass/search/_search.scss */
+      .search .search-scroll .results .search-result-item:not(.selected):hover {
+        background: #404040;
+        color: #cccccc; }
+        /* line 299, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
+          display: block; }
+        /* line 302, ../sass/search/_search.scss */
+        .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
+          color: #33ccff; }
+    /* line 310, ../sass/search/_search.scss */
+    .search .search-scroll .load-icon {
+      position: relative; }
+      /* line 312, ../sass/search/_search.scss */
+      .search .search-scroll .load-icon.loading {
+        pointer-events: none;
+        margin-left: 6px; }
+        /* line 316, ../sass/search/_search.scss */
+        .search .search-scroll .load-icon.loading .title-label {
+          font-style: italic;
+          font-size: .9em;
+          opacity: 0.5;
+          margin-left: 26px;
+          line-height: 24px; }
+        /* line 326, ../sass/search/_search.scss */
+        .search .search-scroll .load-icon.loading .wait-spinner {
+          margin-left: 6px; }
+      /* line 331, ../sass/search/_search.scss */
+      .search .search-scroll .load-icon:not(.loading) {
+        cursor: pointer; }
+    /* line 336, ../sass/search/_search.scss */
+    .search .search-scroll .load-more-button {
+      margin-top: 5px 0;
+      font-size: 0.8em;
+      position: relative;
+      left: 50%;
+      margin-left: -45px;
+      text-align: center;
+      width: 90px;
+      white-space: nowrap; }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 5, ../sass/mobile/search/_search.scss */
+  .search .search-bar .menu-icon {
+    display: none; }
+  /* line 8, ../sass/mobile/search/_search.scss */
+  .search .search-bar .clear-icon {
+    right: 5px; } }
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 9bf108bc36..701433a525 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -304,252 +304,6 @@ ul.tree {
   ul.tree ul.tree {
     margin-left: 15px; }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 23, ../sass/search/_search.scss */
-.abs.search-holder {
-  height: 25px;
-  bottom: 0;
-  top: 23px;
-  z-index: 5; }
-  /* line 27, ../sass/search/_search.scss */
-  .abs.search-holder.active {
-    height: auto;
-    bottom: 0; }
-
-/* line 38, ../sass/search/_search.scss */
-.search {
-  display: flex;
-  flex-direction: column;
-  height: 100%; }
-  /* line 49, ../sass/search/_search.scss */
-  .search .search-bar {
-    font-size: 0.8em;
-    position: relative;
-    width: 100%; }
-    /* line 66, ../sass/search/_search.scss */
-    .search .search-bar .search-input {
-      height: 25px;
-      line-height: 25px;
-      padding-top: 0;
-      padding-bottom: 0; }
-    /* line 73, ../sass/search/_search.scss */
-    .search .search-bar .search-icon,
-    .search .search-bar .clear-icon,
-    .search .search-bar .menu-icon {
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      color: #737373;
-      height: 17px;
-      width: 17px;
-      line-height: 17px;
-      position: absolute;
-      text-align: center;
-      top: 4px; }
-    /* line 86, ../sass/search/_search.scss */
-    .search .search-bar .clear-icon,
-    .search .search-bar .menu-icon {
-      cursor: pointer;
-      transition: color .25s; }
-    /* line 93, ../sass/search/_search.scss */
-    .search .search-bar .search-input {
-      position: relative;
-      width: 100%;
-      padding-left: 22px !important;
-      padding-right: 44px !important; }
-      /* line 100, ../sass/search/_search.scss */
-      .search .search-bar .search-input input {
-        width: 100%; }
-    /* line 105, ../sass/search/_search.scss */
-    .search .search-bar .search-icon {
-      color: #737373;
-      left: 3px;
-      transition: visibility .15s, opacity .15s, color .2s;
-      pointer-events: none; }
-    /* line 125, ../sass/search/_search.scss */
-    .search .search-bar .search-input:hover + div.search-icon {
-      color: #a6a6a6; }
-    /* line 129, ../sass/search/_search.scss */
-    .search .search-bar .clear-icon {
-      right: 22px;
-      visibility: hidden;
-      opacity: 0;
-      transition: visibility .15s, opacity .15s, color .2s; }
-      /* line 138, ../sass/search/_search.scss */
-      .search .search-bar .clear-icon.content {
-        visibility: visible;
-        opacity: 1; }
-      /* line 143, ../sass/search/_search.scss */
-      .search .search-bar .clear-icon:hover {
-        color: #a6a6a6; }
-    /* line 148, ../sass/search/_search.scss */
-    .search .search-bar .menu-icon {
-      font-size: 0.8em;
-      padding-right: 4px;
-      right: 4px;
-      text-align: right; }
-      /* line 154, ../sass/search/_search.scss */
-      .search .search-bar .menu-icon:hover {
-        color: #a6a6a6; }
-    /* line 159, ../sass/search/_search.scss */
-    .search .search-bar .search-menu-holder {
-      float: right;
-      left: -20px;
-      z-index: 1;
-      transition: visibility .05s, opacity .05s; }
-      /* line 169, ../sass/search/_search.scss */
-      .search .search-bar .search-menu-holder.off {
-        visibility: hidden;
-        opacity: 0; }
-    /* line 176, ../sass/search/_search.scss */
-    .search .search-bar .menu-icon:hover + div.search-menu-holder {
-      visibility: visible; }
-    /* line 179, ../sass/search/_search.scss */
-    .search .search-bar div.search-menu-holder:hover {
-      visibility: visible; }
-  /* line 184, ../sass/search/_search.scss */
-  .search .active-filter-display {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    line-height: 130%;
-    padding: 5px 0;
-    padding-left: 1.4625em;
-    font-size: 0.65em;
-    margin-top: 3px; }
-    /* line 199, ../sass/search/_search.scss */
-    .search .active-filter-display .clear-filters-icon {
-      opacity: 0.4;
-      font-size: 0.8em;
-      position: absolute;
-      left: 1px;
-      cursor: pointer; }
-    /* line 210, ../sass/search/_search.scss */
-    .search .active-filter-display.off {
-      visibility: hidden;
-      opacity: 0;
-      height: 0;
-      margin: 0;
-      padding: 0;
-      border: 0; }
-  /* line 220, ../sass/search/_search.scss */
-  .search .search-scroll {
-    order: 3;
-    margin-top: 4px;
-    overflow-y: auto;
-    top: auto;
-    height: auto;
-    max-height: 100%;
-    position: relative; }
-    /* line 235, ../sass/search/_search.scss */
-    .search .search-scroll .results .search-result-item {
-      -moz-transition: background-color 0.25s;
-      -o-transition: background-color 0.25s;
-      -webkit-transition: background-color 0.25s;
-      transition: background-color 0.25s;
-      margin-bottom: 2px;
-      border-radius: 2px;
-      padding-top: 4px;
-      padding-bottom: 2px; }
-      /* line 249, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item .label {
-        margin-left: 6px; }
-        /* line 253, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item .label .title-label {
-          display: inline-block;
-          position: absolute;
-          left: 29px;
-          right: 5px;
-          font-size: .8em;
-          line-height: 17px;
-          width: auto;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap; }
-      /* line 275, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item.selected {
-        background: #005177;
-        color: #fff; }
-        /* line 279, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item.selected .view-control {
-          color: #0099cc; }
-        /* line 282, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item.selected .label .type-icon {
-          color: #fff; }
-      /* line 287, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item .label .type-icon .l-icon-link {
-        text-shadow: black 0 1px 2px;
-        z-index: 2;
-        color: #49dedb;
-        font-size: 8px;
-        line-height: 8px;
-        height: 8px;
-        width: 8px;
-        margin-left: -25px; }
-      /* line 296, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item:not(.selected):hover {
-        background: #404040;
-        color: #cccccc; }
-        /* line 299, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
-          display: block; }
-        /* line 302, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
-          color: #33ccff; }
-    /* line 310, ../sass/search/_search.scss */
-    .search .search-scroll .load-icon {
-      position: relative; }
-      /* line 312, ../sass/search/_search.scss */
-      .search .search-scroll .load-icon.loading {
-        pointer-events: none;
-        margin-left: 6px; }
-        /* line 316, ../sass/search/_search.scss */
-        .search .search-scroll .load-icon.loading .title-label {
-          font-style: italic;
-          font-size: .9em;
-          opacity: 0.5;
-          margin-left: 26px;
-          line-height: 24px; }
-        /* line 326, ../sass/search/_search.scss */
-        .search .search-scroll .load-icon.loading .wait-spinner {
-          margin-left: 6px; }
-      /* line 331, ../sass/search/_search.scss */
-      .search .search-scroll .load-icon:not(.loading) {
-        cursor: pointer; }
-    /* line 336, ../sass/search/_search.scss */
-    .search .search-scroll .load-more-button {
-      margin-top: 5px 0;
-      font-size: 0.8em;
-      position: relative;
-      left: 50%;
-      margin-left: -45px;
-      text-align: center;
-      width: 90px;
-      white-space: nowrap; }
-
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 1dda9770ce..eff854790b 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -61,6 +61,8 @@
 @import "forms/datetime";
 @import "forms/filter";
 @import "plots/plots-main";
+@import "search/search";
+@import "mobile/search/search";
 @import "overlay/overlay";
 @import "mobile/overlay/overlay";
 @import "user-environ/frame";
diff --git a/platform/commonUI/general/res/sass/mobile/search/_search.scss b/platform/commonUI/general/res/sass/mobile/search/_search.scss
new file mode 100644
index 0000000000..d37514a0a5
--- /dev/null
+++ b/platform/commonUI/general/res/sass/mobile/search/_search.scss
@@ -0,0 +1,13 @@
+@include phone {
+	.search {
+		.search-bar {
+			// Hide menu-icon and adjust spacing when in phone mode
+			.menu-icon {
+				display: none;
+			}
+			.clear-icon {
+				right: $interiorMargin;
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/search/_layout.scss b/platform/commonUI/general/res/sass/search/_layout.scss
deleted file mode 100644
index 03612d2d3c..0000000000
--- a/platform/commonUI/general/res/sass/search/_layout.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-// Overrides some styling in user-environ/_layout.scss
-.pane {
-    &.treeview.left {
-	    .tree-holder {
-            // Want tree holder to start right below the search bar.
-		    top: 60px;
-	    }
-    }
-}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/tree.scss b/platform/commonUI/general/res/sass/tree.scss
index d4fea6e8b6..5a28f94641 100644
--- a/platform/commonUI/general/res/sass/tree.scss
+++ b/platform/commonUI/general/res/sass/tree.scss
@@ -30,5 +30,4 @@
 @import "mixins";
 @import "mobile/mixins";
 @import "tree/tree";
-@import "search/search";
 @import "mobile/tree";

From 6e172359b45b55f16f03936394da2810993eb719 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 26 Aug 2015 18:15:29 -0700
Subject: [PATCH 171/266] [Mobile] IN PROGRESS: Significant re-org of search
 results styling

open #74
Removed all styles for search-result-item
in search/_search.scss and significantly re-orged .tree-item in
_tree.scss and mobile/_tree.scss to control
search-result-item styles;
---
 .../general/res/css/theme-espresso.css        |  67 +---
 platform/commonUI/general/res/css/tree.css    | 334 ++++++++++--------
 .../general/res/sass/mobile/_tree.scss        |  56 ++-
 .../general/res/sass/search/_search.scss      |  77 ----
 .../commonUI/general/res/sass/tree/_tree.scss | 261 +++++++-------
 5 files changed, 349 insertions(+), 446 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 12ed7b12aa..b34ca46897 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -4510,82 +4510,27 @@ input[type="text"] {
     height: auto;
     max-height: 100%;
     position: relative; }
-    /* line 235, ../sass/search/_search.scss */
-    .search .search-scroll .results .search-result-item {
-      -moz-transition: background-color 0.25s;
-      -o-transition: background-color 0.25s;
-      -webkit-transition: background-color 0.25s;
-      transition: background-color 0.25s;
-      margin-bottom: 2px;
-      border-radius: 2px;
-      padding-top: 4px;
-      padding-bottom: 2px; }
-      /* line 249, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item .label {
-        margin-left: 6px; }
-        /* line 253, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item .label .title-label {
-          display: inline-block;
-          position: absolute;
-          left: 29px;
-          right: 5px;
-          font-size: .8em;
-          line-height: 17px;
-          width: auto;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap; }
-      /* line 275, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item.selected {
-        background: #005177;
-        color: #fff; }
-        /* line 279, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item.selected .view-control {
-          color: #0099cc; }
-        /* line 282, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item.selected .label .type-icon {
-          color: #fff; }
-      /* line 287, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item .label .type-icon .l-icon-link {
-        text-shadow: black 0 1px 2px;
-        z-index: 2;
-        color: #49dedb;
-        font-size: 8px;
-        line-height: 8px;
-        height: 8px;
-        width: 8px;
-        margin-left: -25px; }
-      /* line 296, ../sass/search/_search.scss */
-      .search .search-scroll .results .search-result-item:not(.selected):hover {
-        background: #404040;
-        color: #cccccc; }
-        /* line 299, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item:not(.selected):hover .context-trigger {
-          display: block; }
-        /* line 302, ../sass/search/_search.scss */
-        .search .search-scroll .results .search-result-item:not(.selected):hover .icon {
-          color: #33ccff; }
-    /* line 310, ../sass/search/_search.scss */
+    /* line 233, ../sass/search/_search.scss */
     .search .search-scroll .load-icon {
       position: relative; }
-      /* line 312, ../sass/search/_search.scss */
+      /* line 235, ../sass/search/_search.scss */
       .search .search-scroll .load-icon.loading {
         pointer-events: none;
         margin-left: 6px; }
-        /* line 316, ../sass/search/_search.scss */
+        /* line 239, ../sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .title-label {
           font-style: italic;
           font-size: .9em;
           opacity: 0.5;
           margin-left: 26px;
           line-height: 24px; }
-        /* line 326, ../sass/search/_search.scss */
+        /* line 249, ../sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .wait-spinner {
           margin-left: 6px; }
-      /* line 331, ../sass/search/_search.scss */
+      /* line 254, ../sass/search/_search.scss */
       .search .search-scroll .load-icon:not(.loading) {
         cursor: pointer; }
-    /* line 336, ../sass/search/_search.scss */
+    /* line 259, ../sass/search/_search.scss */
     .search .search-scroll .load-more-button {
       margin-top: 5px 0;
       font-size: 0.8em;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 701433a525..770338d9f8 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -162,148 +162,175 @@ ul.tree {
   ul.tree li {
     display: block;
     position: relative; }
-    /* line 28, ../sass/tree/_tree.scss */
-    ul.tree li span.tree-item {
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      -moz-border-radius: 2px;
-      -webkit-border-radius: 2px;
-      border-radius: 2px;
-      -moz-transition: background-color 0.25s;
-      -o-transition: background-color 0.25s;
-      -webkit-transition: background-color 0.25s;
-      transition: background-color 0.25s;
-      display: block;
-      font-size: 0.8em;
-      height: 1.5rem;
-      line-height: 1.5rem;
-      margin-bottom: 3px;
-      position: relative; }
-      /* line 40, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item .view-control {
-        display: inline-block;
-        margin-left: 5px;
-        font-size: 0.75em;
-        width: 10px; }
-        @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-          /* line 48, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .view-control:hover {
-            color: #ffc700; } }
-      /* line 54, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item .label {
-        display: block;
-        overflow: hidden;
-        position: absolute;
-        top: 0px;
-        right: 0px;
-        bottom: 0px;
-        left: 0px;
-        width: auto;
-        height: auto;
-        line-height: 1.5rem;
-        left: 15px; }
-        /* line 62, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .label .type-icon {
-          text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
-          font-size: 16px;
-          color: #0099cc;
-          left: 5px;
-          position: absolute;
-          top: 4px;
-          bottom: auto;
-          height: 16px;
-          line-height: 100%;
-          right: auto;
-          width: 16px; }
-          /* line 75, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
-            text-shadow: black 0 1px 2px;
-            position: absolute;
-            z-index: 2; }
-          /* line 81, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert {
-            color: #ff3c00;
-            font-size: 8px;
-            line-height: 8px;
-            height: 8px;
-            width: 8px;
-            top: 1px;
-            right: -2px; }
-          /* line 87, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item .label .type-icon .icon.l-icon-link {
-            color: #49dedb;
-            font-size: 8px;
-            line-height: 8px;
-            height: 8px;
-            width: 8px;
-            left: -3px;
-            bottom: 0px; }
-        /* line 95, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .label .title-label {
-          overflow: hidden;
-          position: absolute;
-          top: 0px;
-          right: 0px;
-          bottom: 0px;
-          left: 0px;
-          width: auto;
-          height: auto;
-          display: block;
-          left: 30px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap; }
-      /* line 106, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item.loading {
-        pointer-events: none; }
-        /* line 108, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.loading .label {
-          opacity: 0.5; }
-          /* line 110, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item.loading .label .title-label {
-            font-style: italic; }
-        /* line 114, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.loading .wait-spinner {
-          margin-left: 14px; }
-      /* line 119, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item.selected {
-        background: #005177;
-        color: #fff; }
-        /* line 123, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.selected .view-control {
-          color: #0099cc; }
-        /* line 126, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item.selected .label .type-icon {
-          color: #fff; }
-      @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 134, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item:not(.selected):hover {
-          background: rgba(255, 255, 255, 0.1);
-          color: #cccccc; }
-          /* line 137, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item:not(.selected):hover .context-trigger {
-            display: block; }
-          /* line 140, ../sass/tree/_tree.scss */
-          ul.tree li span.tree-item:not(.selected):hover .icon {
-            color: #33ccff; } }
-      /* line 147, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item:not(.loading) {
-        cursor: pointer; }
-      /* line 151, ../sass/tree/_tree.scss */
-      ul.tree li span.tree-item .context-trigger {
-        top: -1px;
-        position: absolute;
-        right: 3px; }
-        /* line 157, ../sass/tree/_tree.scss */
-        ul.tree li span.tree-item .context-trigger .invoke-menu {
-          font-size: 0.75em;
-          height: 0.9rem;
-          line-height: 0.9rem; }
-  /* line 166, ../sass/tree/_tree.scss */
+  /* line 29, ../sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
+/* line 34, ../sass/tree/_tree.scss */
+.tree-item,
+.search-result-item {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  -moz-transition: background-color 0.25s;
+  -o-transition: background-color 0.25s;
+  -webkit-transition: background-color 0.25s;
+  transition: background-color 0.25s;
+  display: block;
+  font-size: 0.8em;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  margin-bottom: 3px;
+  position: relative; }
+  /* line 47, ../sass/tree/_tree.scss */
+  .tree-item .view-control,
+  .search-result-item .view-control {
+    display: inline-block;
+    margin-left: 5px;
+    font-size: 0.75em;
+    width: 10px; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 55, ../sass/tree/_tree.scss */
+      .tree-item .view-control:hover,
+      .search-result-item .view-control:hover {
+        color: #ffc700; } }
+  /* line 61, ../sass/tree/_tree.scss */
+  .tree-item .label,
+  .search-result-item .label {
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    width: auto;
+    height: auto;
+    line-height: 1.5rem; }
+    /* line 69, ../sass/tree/_tree.scss */
+    .tree-item .label .type-icon,
+    .search-result-item .label .type-icon {
+      text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
+      font-size: 16px;
+      color: #0099cc;
+      left: 5px;
+      position: absolute;
+      top: 4px;
+      bottom: auto;
+      height: 16px;
+      line-height: 100%;
+      right: auto;
+      width: 16px; }
+      /* line 82, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-alert {
+        text-shadow: black 0 1px 2px;
+        position: absolute;
+        z-index: 2; }
+      /* line 88, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-item .label .type-icon .icon.l-icon-alert {
+        color: #ff3c00;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        top: 1px;
+        right: -2px; }
+      /* line 94, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-link {
+        color: #49dedb;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        left: -3px;
+        bottom: 0px; }
+    /* line 102, ../sass/tree/_tree.scss */
+    .tree-item .label .title-label,
+    .search-result-item .label .title-label {
+      overflow: hidden;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      width: auto;
+      height: auto;
+      display: block;
+      left: 30px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; }
+  /* line 113, ../sass/tree/_tree.scss */
+  .tree-item.loading,
+  .search-result-item.loading {
+    pointer-events: none; }
+    /* line 115, ../sass/tree/_tree.scss */
+    .tree-item.loading .label,
+    .search-result-item.loading .label {
+      opacity: 0.5; }
+      /* line 117, ../sass/tree/_tree.scss */
+      .tree-item.loading .label .title-label,
+      .search-result-item.loading .label .title-label {
+        font-style: italic; }
+    /* line 121, ../sass/tree/_tree.scss */
+    .tree-item.loading .wait-spinner,
+    .search-result-item.loading .wait-spinner {
+      margin-left: 14px; }
+  /* line 126, ../sass/tree/_tree.scss */
+  .tree-item.selected,
+  .search-result-item.selected {
+    background: #005177;
+    color: #fff; }
+    /* line 130, ../sass/tree/_tree.scss */
+    .tree-item.selected .view-control,
+    .search-result-item.selected .view-control {
+      color: #0099cc; }
+    /* line 133, ../sass/tree/_tree.scss */
+    .tree-item.selected .label .type-icon,
+    .search-result-item.selected .label .type-icon {
+      color: #fff; }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 141, ../sass/tree/_tree.scss */
+    .tree-item:not(.selected):hover,
+    .search-result-item:not(.selected):hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #cccccc; }
+      /* line 144, ../sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .context-trigger,
+      .search-result-item:not(.selected):hover .context-trigger {
+        display: block; }
+      /* line 147, ../sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .icon,
+      .search-result-item:not(.selected):hover .icon {
+        color: #33ccff; } }
+  /* line 154, ../sass/tree/_tree.scss */
+  .tree-item:not(.loading),
+  .search-result-item:not(.loading) {
+    cursor: pointer; }
+  /* line 158, ../sass/tree/_tree.scss */
+  .tree-item .context-trigger,
+  .search-result-item .context-trigger {
+    top: -1px;
+    position: absolute;
+    right: 3px; }
+    /* line 164, ../sass/tree/_tree.scss */
+    .tree-item .context-trigger .invoke-menu,
+    .search-result-item .context-trigger .invoke-menu {
+      font-size: 0.75em;
+      height: 0.9rem;
+      line-height: 0.9rem; }
+
+/* line 173, ../sass/tree/_tree.scss */
+.tree-item .label {
+  left: 15px; }
+
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -326,28 +353,33 @@ ul.tree {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 28, ../sass/mobile/_tree.scss */
-  ul.tree li span.tree-item {
+  /* line 27, ../sass/mobile/_tree.scss */
+  ul.tree ul.tree {
+    margin-left: 20px; }
+
+  /* line 31, ../sass/mobile/_tree.scss */
+  .tree-item,
+  .search-result-item {
     height: 35px;
     line-height: 35px;
     margin-bottom: 0px; }
-    /* line 32, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item .view-control {
+    /* line 36, ../sass/mobile/_tree.scss */
+    .tree-item .view-control,
+    .search-result-item .view-control {
       position: absolute;
       font-size: 1.1em;
       right: 0px;
       width: 30px;
       text-align: center; }
-    /* line 41, ../sass/mobile/_tree.scss */
-    ul.tree li span.tree-item .label {
+    /* line 45, ../sass/mobile/_tree.scss */
+    .tree-item .label,
+    .search-result-item .label {
       left: 0;
       right: 35px;
       line-height: 35px; }
-      /* line 46, ../sass/mobile/_tree.scss */
-      ul.tree li span.tree-item .label .type-icon {
+      /* line 50, ../sass/mobile/_tree.scss */
+      .tree-item .label .type-icon,
+      .search-result-item .label .type-icon {
         top: 9px;
         bottom: auto;
-        height: 16px; }
-  /* line 57, ../sass/mobile/_tree.scss */
-  ul.tree ul.tree {
-    margin-left: 20px; } }
+        height: 16px; } }
diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss
index 03e8051a14..e6efb4be55 100644
--- a/platform/commonUI/general/res/sass/mobile/_tree.scss
+++ b/platform/commonUI/general/res/sass/mobile/_tree.scss
@@ -22,40 +22,36 @@
 
 @include phoneandtablet {
     ul.tree {
-        //@include menuUlReset();
-        li {
-            //border-top: 1px solid $colorInteriorBorder; // TEMP
-            span.tree-item {
-                height: $mobileTreeItemH;
-                line-height: $mobileTreeItemH;
-                margin-bottom: 0px;
-                .view-control {
-                    //@include test(red);
-                    position: absolute;
-                    font-size: 1.1em;
-                    right: 0px;
-                    width: $mobileTreeRightArrowW;
-                    text-align: center;
-                }
-
-                .label {
-                    left: 0;
-                    right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
-                    line-height: $mobileTreeItemH;
-                    //font-size: 1.1em; // CH CO
-                    .type-icon {
-                        @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
-                    }
-                    .title-label {
-                    }
-                }
-            }
-        }
-
         // Sets the margin on the left, which causes the
         // running indentation after each folder is made
         ul.tree {
             margin-left: $mobileTreeItemIndent;
         }
     }
+	.tree-item,
+	.search-result-item {
+		height: $mobileTreeItemH;
+		line-height: $mobileTreeItemH;
+		margin-bottom: 0px;
+		.view-control {
+			//@include test(red);
+			position: absolute;
+			font-size: 1.1em;
+			right: 0px;
+			width: $mobileTreeRightArrowW;
+			text-align: center;
+		}
+
+		.label {
+			left: 0;
+			right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow
+			line-height: $mobileTreeItemH;
+			//font-size: 1.1em; // CH CO
+			.type-icon {
+				@include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH);
+			}
+			.title-label {
+			}
+		}
+	}
 }
diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss
index 4c225437c1..e48baba95f 100644
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -230,83 +230,6 @@
 		max-height: 100%;
 		position: relative;
 
-		.results {
-
-			.search-result-item {
-				// Include transitions (for the highlights)
-				@include single-transition(background-color, 0.25s);
-
-				// Space the results from each other
-				margin-bottom: 2px;
-
-				// Make the highlights the right color and shape.
-				// Attempting to match the style in the tree, but
-				//   while having these be compact.
-				border-radius: 2px;
-				padding-top: 4px;
-				padding-bottom: 2px;
-
-				.label {
-					// Give some padding away from the left side
-					margin-left: $leftMargin;
-
-					.title-label {
-						display: inline-block;
-						position: absolute;
-
-						// Give some padding away from the left side
-						left: $leftMargin + 3px + $iconWidth;
-						// and the right side
-						right: $rightPadding;
-
-						// Size and position the text
-						font-size: .8em;
-						line-height: 17px;
-
-						// Hide overflow text
-						width: auto;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-					}
-				}
-
-				// Change styling when it's selected
-				&.selected {
-					$c: #fff;
-					background: $colorKeySelectedBg;
-					color: $c;
-					.view-control {
-						color: $colorItemTreeIcon;
-					}
-					.label .type-icon {
-						color: #fff;
-					}
-				}
-                
-                .label .type-icon .l-icon-link {
-                    @include txtShdwSubtle(1);
-                    z-index: 2;
-                    @include ancillaryIcon(8px, $colorIconLink);
-                    margin-left: -25px;
-                }
-
-				// Change styling when it's being hovered over
-				&:not(.selected) {
-					&:hover {
-						background: lighten($colorBodyBg, 5%);
-						color: lighten($colorBodyFg, 20%);
-						.context-trigger {
-							display: block;
-						}
-						.icon {
-							color: $colorItemTreeIconHover;
-						}
-					}
-				}
-			}
-		}
-
 		.load-icon {
 			position: relative;
 			&.loading {
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index 65ddab2a63..330bdeb5d5 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -25,145 +25,152 @@ ul.tree {
 	li {
 		display: block;
 		position: relative;
-		span.tree-item {
-			$runningItemW: 0;
-			@include box-sizing(border-box);
-			@include border-radius($basicCr);
-			@include single-transition(background-color, 0.25s);
-			display: block;
-			font-size: 0.8em;
-			height: $menuLineH;
-			line-height: $menuLineH;
-			margin-bottom: $interiorMarginSm;
-			position: relative;
+	}
+	ul.tree {
+		margin-left: $treeVCW + $interiorMargin;
+	}
+}
 
-			.view-control {
-				display: inline-block;
-                margin-left: $interiorMargin;
-				font-size: 0.75em;
-				width: $treeVCW;
-				$runningItemW: $interiorMargin + $treeVCW;
-                // NOTE: [Mobile] Removed Hover on Mobile
-                @include desktop {
-                    &:hover {
-                        color: $colorItemTreeVCHover;
-                    }
-                }
+.tree-item,
+.search-result-item {
+	$runningItemW: 0;
+	@include box-sizing(border-box);
+	@include border-radius($basicCr);
+	@include single-transition(background-color, 0.25s);
+	display: block;
+	font-size: 0.8em;
+	height: $menuLineH;
+	line-height: $menuLineH;
+	margin-bottom: $interiorMarginSm;
+	position: relative;
+
+	.view-control {
+		display: inline-block;
+		margin-left: $interiorMargin;
+		font-size: 0.75em;
+		width: $treeVCW;
+		$runningItemW: $interiorMargin + $treeVCW;
+		// NOTE: [Mobile] Removed Hover on Mobile
+		@include desktop {
+			&:hover {
+				color: $colorItemTreeVCHover;
 			}
+		}
+	}
 
-			.label {
-				display: block;
-//				@include test(orange);
-				@include absPosDefault();
-				//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
-				line-height: $menuLineH;
-				left: $runningItemW;
+	.label {
+		display: block;
+		//				@include test(orange);
+		@include absPosDefault();
+		//left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon
+		line-height: $menuLineH;
+		//left: $runningItemW;
 
-				.type-icon {
-					//@include absPosDefault(0, false);
-					$d: $treeTypeIconH; // 16px is crisp size
-					@include txtShdwSubtle(0.6);
-					font-size: $d;
-					color: $colorItemTreeIcon;
-					left: $interiorMargin;
+		.type-icon {
+			//@include absPosDefault(0, false);
+			$d: $treeTypeIconH; // 16px is crisp size
+			@include txtShdwSubtle(0.6);
+			font-size: $d;
+			color: $colorItemTreeIcon;
+			left: $interiorMargin;
+			position: absolute;
+			@include verticalCenterBlock($menuLineHPx, $d);
+			line-height: 100%;
+			right: auto; width: $d;
+
+			.icon {
+				&.l-icon-link,
+				&.l-icon-alert {
+					@include txtShdwSubtle(1);
 					position: absolute;
-					@include verticalCenterBlock($menuLineHPx, $d);
-					line-height: 100%;
-                    right: auto; width: $d;
-
-					.icon {
-						&.l-icon-link,
-						&.l-icon-alert {
-							@include txtShdwSubtle(1);
-							position: absolute;
-							z-index: 2;
-						}
-						&.l-icon-alert {
-							$d: 8px;
-							@include ancillaryIcon($d, $colorAlert);
-							top: 1px;
-							right: -2px;
-						}
-						&.l-icon-link {
-							$d: 8px;
-							@include ancillaryIcon($d, $colorIconLink);
-							left: -3px;
-							bottom: 0px;
-						}
-					}
+					z-index: 2;
 				}
-				.title-label {
-					@include absPosDefault();
+				&.l-icon-alert {
+					$d: 8px;
+					@include ancillaryIcon($d, $colorAlert);
+					top: 1px;
+					right: -2px;
+				}
+				&.l-icon-link {
+					$d: 8px;
+					@include ancillaryIcon($d, $colorIconLink);
+					left: -3px;
+					bottom: 0px;
+				}
+			}
+		}
+		.title-label {
+			@include absPosDefault();
+			display: block;
+			left: $runningItemW + ($interiorMargin * 3);
+			//right: $treeContextTriggerW + $interiorMargin;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	&.loading {
+		pointer-events: none;
+		.label {
+			opacity: 0.5;
+			.title-label {
+				font-style: italic;
+			}
+		}
+		.wait-spinner {
+			margin-left: 14px;
+		}
+	}
+
+	&.selected {
+		$c: #fff;
+		background: $colorKeySelectedBg;
+		color: $c;
+		.view-control {
+			color: $colorItemTreeIcon;
+		}
+		.label .type-icon {
+			color: #fff; //$colorItemTreeIconHover;
+		}
+	}
+
+	&:not(.selected) {
+		// NOTE: [Mobile] Removed Hover on Mobile
+		@include desktop {
+			&:hover {
+				background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
+				color: lighten($colorBodyFg, 20%);
+				.context-trigger {
 					display: block;
-					left: $runningItemW + ($interiorMargin * 3);
-	                //right: $treeContextTriggerW + $interiorMargin;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
 				}
-			}
-
-			&.loading {
-				pointer-events: none;
-				.label {
-					opacity: 0.5;
-					.title-label {
-						font-style: italic;
-					}
-				}
-				.wait-spinner {
-					margin-left: 14px;
-				}
-			}
-
-			&.selected {
-				$c: #fff;
-				background: $colorKeySelectedBg;
-				color: $c;
-				.view-control {
-					color: $colorItemTreeIcon;
-				}
-				.label .type-icon {
-					color: #fff; //$colorItemTreeIconHover;
-				}
-			}
-
-			&:not(.selected) {
-                // NOTE: [Mobile] Removed Hover on Mobile
-                @include desktop {
-                    &:hover {
-                        background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
-                        color: lighten($colorBodyFg, 20%);
-                        .context-trigger {
-                            display: block;
-                        }
-                        .icon {
-                            color: $colorItemTreeIconHover;
-                        }
-                    }
-                }
-			}
-
-			&:not(.loading) {
-				cursor: pointer;
-			}
-
-			.context-trigger {
-				$h: 0.9rem;
-				//display: none;
-				top: -1px;
-				position: absolute;
-				right: $interiorMarginSm;
-				.invoke-menu {
-					font-size: 0.75em;
-					height: $h;
-					line-height: $h;
+				.icon {
+					color: $colorItemTreeIconHover;
 				}
 			}
 		}
 	}
 
-	ul.tree {
-		margin-left: $treeVCW + $interiorMargin;
+	&:not(.loading) {
+		cursor: pointer;
+	}
+
+	.context-trigger {
+		$h: 0.9rem;
+		//display: none;
+		top: -1px;
+		position: absolute;
+		right: $interiorMarginSm;
+		.invoke-menu {
+			font-size: 0.75em;
+			height: $h;
+			line-height: $h;
+		}
+	}
+}
+
+.tree-item {
+	.label {
+		left: $interiorMargin + $treeVCW;
 	}
 }
\ No newline at end of file

From a0169ad1585326ff24540b3e3b9860c40212f308 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 26 Aug 2015 20:20:16 -0700
Subject: [PATCH 172/266] [Mobile] Browse Controller

Adjusted BrowseController to hide the
back button if current object represented/
selected has no context.
---
 platform/commonUI/browse/src/BrowseController.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index d1f89d43fb..d1ec4d33e0 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -150,9 +150,15 @@ define(
             }
             
             function checkRoot() {
-                var parent = navigationService.getNavigation().getCapability('context').getParent();
-                if (parent.getId() !== ROOT_ID) {
-                    $scope.atRoot = false;
+                var context = navigationService.getNavigation().getCapability('context'),
+                    parent;
+                if (context) {
+                    parent = context.getParent();
+                    if (parent.getId() !== ROOT_ID) {
+                        $scope.atRoot = false;
+                    } else {
+                        $scope.atRoot = true;
+                    }
                 } else {
                     $scope.atRoot = true;
                 }

From bb2f086623c27235fd7566c1d429e566bf7ca1b3 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 26 Aug 2015 20:21:36 -0700
Subject: [PATCH 173/266] [Mobile] Leaf Node of Folder/Layout

Domainobjects that can hold an array of
domain objects return '[]' instead of
undefined, when checking for model.composition.
Now checks for empty array and navigates to layout/
folder that has no children.
---
 platform/commonUI/general/res/templates/tree-node.html | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 1d5559e668..a40cb9fd7b 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -29,8 +29,9 @@
                 key="'label'"
 				mct-object="domainObject"
 				ng-model="ngModel"
-				ng-click="!treeNode.checkMobile() || model.composition == undefined ?
-				ngModel.selectedObject = domainObject : toggle.toggle(); treeNode.trackExpansion()"
+				ng-click="!treeNode.checkMobile() || model.composition == undefined ||
+                          model.composition.length == 0 ? ngModel.selectedObject = domainObject : toggle.toggle();
+                          treeNode.trackExpansion()"
 				>
             </mct-representation>
             <span

From 67cb5f8077374c5263903d0bb3ace602d1e33e56 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Wed, 26 Aug 2015 21:08:33 -0700
Subject: [PATCH 174/266] [Mobile] Tests

Completed test for the BrowseController
Spec that takes in an undefined context.
---
 .../commonUI/browse/test/BrowseControllerSpec.js    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index 136b44cd30..e5e54e32d6 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -304,6 +304,19 @@ define(
                 );
                 
                 mockScope.checkRoot();
+                
+                mockDomainObject.getCapability.andReturn(undefined);
+                mockNavigationService.getNavigation.andReturn(mockDomainObject);
+                
+                controller = new BrowseController(
+                    mockScope,
+                    mockRoute,
+                    mockLocation,
+                    mockObjectService,
+                    mockNavigationService
+                );
+                
+                mockScope.checkRoot();
             });
             
             // Mocks the back arrow call that

From 8c4c65241a0d8cb8793cab19e2e40f0ddd751bdb Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 27 Aug 2015 09:02:55 -0700
Subject: [PATCH 175/266] [Mobile] Tree

WHen selecting a leaf node on phone-portrait,
now the left menu will close if you select the
object name or the arrow.
---
 platform/commonUI/general/res/templates/tree-node.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index a40cb9fd7b..cd77d001a2 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -30,7 +30,7 @@
 				mct-object="domainObject"
 				ng-model="ngModel"
 				ng-click="!treeNode.checkMobile() || model.composition == undefined ||
-                          model.composition.length == 0 ? ngModel.selectedObject = domainObject : toggle.toggle();
+                          model.composition.length == 0 ? treeNode.setObject(ngModel, domainObject) : toggle.toggle();
                           treeNode.trackExpansion()"
 				>
             </mct-representation>

From 1961adf8d63682534fea5edf493f5bb9b5a632ac Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Thu, 27 Aug 2015 10:33:32 -0700
Subject: [PATCH 176/266] [Mobile] Fixed font-size and line-height problem in
 tree

open #74
---
 platform/commonUI/general/res/css/forms.css          | 4 ++--
 platform/commonUI/general/res/css/theme-espresso.css | 4 ++--
 platform/commonUI/general/res/css/tree.css           | 2 +-
 platform/commonUI/general/res/sass/forms/_elems.scss | 4 ++--
 platform/commonUI/general/res/sass/tree/_tree.scss   | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
index d5e363bcd9..335ceafac1 100644
--- a/platform/commonUI/general/res/css/forms.css
+++ b/platform/commonUI/general/res/css/forms.css
@@ -200,8 +200,8 @@
   .form .form-row.first {
     border-top: none; }
   /* line 52, ../sass/forms/_elems.scss */
-  .form .form-row .label,
-  .form .form-row .controls {
+  .form .form-row > .label,
+  .form .form-row > .controls {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index b34ca46897..b9be506ef9 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -3545,8 +3545,8 @@ label.checkbox.custom {
   .form .form-row.first {
     border-top: none; }
   /* line 52, ../sass/forms/_elems.scss */
-  .form .form-row .label,
-  .form .form-row .controls {
+  .form .form-row > .label,
+  .form .form-row > .controls {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
index 770338d9f8..73d260de38 100644
--- a/platform/commonUI/general/res/css/tree.css
+++ b/platform/commonUI/general/res/css/tree.css
@@ -180,7 +180,7 @@ ul.tree {
   -webkit-transition: background-color 0.25s;
   transition: background-color 0.25s;
   display: block;
-  font-size: 0.8em;
+  font-size: 0.8rem;
   height: 1.5rem;
   line-height: 1.5rem;
   margin-bottom: 3px;
diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss
index 61825dfd2f..0f430c2391 100644
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -49,8 +49,8 @@
 			border-top: none;
 		}
 
-		.label,
-		.controls {
+		>.label,
+		>.controls {
 			@include box-sizing(border-box);
 			@include clearfix;
 			font-size: 0.8rem;
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index 330bdeb5d5..8a0c4c1e2a 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -38,7 +38,7 @@ ul.tree {
 	@include border-radius($basicCr);
 	@include single-transition(background-color, 0.25s);
 	display: block;
-	font-size: 0.8em;
+	font-size: 0.8rem;
 	height: $menuLineH;
 	line-height: $menuLineH;
 	margin-bottom: $interiorMarginSm;

From 48136c226528221403cec8b5b44e3543f6cb4f97 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 27 Aug 2015 10:42:11 -0700
Subject: [PATCH 177/266] [Context] Back Arrow

Checks the Back Arrow in both checkRoot and
navigateToParent, also checks grandparent in both.
This allows the back arrow to hide in search when
context is unavailable.
---
 .../browse/res/templates/back-arrow.html      |  4 +-
 .../commonUI/browse/src/BrowseController.js   | 44 +++++++++++++------
 2 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index c73b4cbdb2..3ed0ec061b 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -23,6 +23,6 @@
 <!-- Back Arrow Icon used on mobile-->
 <a ng-controller="BrowseController"
       class='type-icon icon ui-symbol s-back'
-      ng-click='backArrow()'
-      ng-class="checkRoot(); atRoot ? 'hidden' : ''">{
+      ng-class="checkRoot(); atRoot ? 'hidden' : ''"
+      ng-click='backArrow()'>{
 </a>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index d1ec4d33e0..ca73c8c573 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -134,28 +134,44 @@ define(
             // is not the root, then user is navigated to
             // parent
             function navigateToParent() {
-                var parent = navigationService.getNavigation().getCapability('context').getParent(),
-                    grandparent;
-                if (parent.getId() !== ROOT_ID) {
-                    grandparent = parent.getCapability('context').getParent().getId();
-                    navigateTo(parent);
-                    if (grandparent && grandparent !== ROOT_ID) {
-                        $scope.atRoot = false;
-                    } else {
-                        $scope.atRoot = true;
+                var context = navigationService.getNavigation().getCapability('context'),
+                    parentContext,
+                    parent,
+                    grandparentId;
+                
+                // Checks if the current object has a context
+                if (context) {
+                    parent = context.getParent();
+                    parentContext = parent.getCapability('context');
+                    if ((parent.getId() !== ROOT_ID) && parentContext) {
+                        grandparentId = parentContext.getParent().getId();
+                        navigateTo(parent);
+                        if (grandparentId && grandparentId !== ROOT_ID) {
+                            $scope.atRoot = false;
+                        } else {
+                            $scope.atRoot = true;
+                        }
                     }
-                } else {
-                    $scope.atRoot = true;
                 }
             }
             
             function checkRoot() {
                 var context = navigationService.getNavigation().getCapability('context'),
-                    parent;
+                    parentContext,
+                    parent,
+                    grandparent;
+                
+                // Checks if the current object has a context
                 if (context) {
                     parent = context.getParent();
-                    if (parent.getId() !== ROOT_ID) {
-                        $scope.atRoot = false;
+                    parentContext = parent.getCapability('context');
+                    if ((parent.getId() !== ROOT_ID) && parentContext) {
+                        grandparent = parentContext.getParent();
+                        if (!grandparent) {
+                            $scope.atRoot = true;
+                        } else {
+                            $scope.atRoot = false;
+                        }
                     } else {
                         $scope.atRoot = true;
                     }

From f0c64b6b92da569b6a2aa7e1dbb9afb0c64d2537 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 27 Aug 2015 10:45:48 -0700
Subject: [PATCH 178/266] [Browse] Back Arrow

Refactored Back Arrow to work same as prior
commit, however with less if else statements.
Returns if not at root, otherwise root is set to
true.
---
 .../commonUI/browse/src/BrowseController.js   | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index ca73c8c573..4e97ee6f87 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -141,16 +141,31 @@ define(
                 
                 // Checks if the current object has a context
                 if (context) {
+                    
+                    // Sets the parent and the parent context
+                    // which is checked
                     parent = context.getParent();
                     parentContext = parent.getCapability('context');
+                    
                     if ((parent.getId() !== ROOT_ID) && parentContext) {
+                        // Gets the grandparent id
                         grandparentId = parentContext.getParent().getId();
+                        
+                        // Navigates to the parent
                         navigateTo(parent);
+                        
+                        // Checks after navigation if the user is located at the 
+                        // root (grandparent of original selected object, after
+                        // navigation, user is at parent of original object and
+                        // child of grandparent)
                         if (grandparentId && grandparentId !== ROOT_ID) {
                             $scope.atRoot = false;
-                        } else {
-                            $scope.atRoot = true;
+                            return;
                         }
+                        
+                        // Set at root if no grandparent exists and
+                        // if grandparent is ROOT, after navigation
+                        $scope.atRoot = true;
                     }
                 }
             }
@@ -167,17 +182,22 @@ define(
                     parentContext = parent.getCapability('context');
                     if ((parent.getId() !== ROOT_ID) && parentContext) {
                         grandparent = parentContext.getParent();
-                        if (!grandparent) {
-                            $scope.atRoot = true;
-                        } else {
+                        
+                        // Checks if the grandparent exists
+                        // if it does not exist (for example in search),
+                        // than do not show the back button
+                        if (grandparent) {
                             $scope.atRoot = false;
+                            return;
                         }
-                    } else {
-                        $scope.atRoot = true;
                     }
-                } else {
-                    $scope.atRoot = true;
                 }
+                
+                // In any other situation where the context or parent
+                // context does not exist or the user is at ROOT, than
+                // hide the back arrow
+                $scope.atRoot = true;
+               
             }
 
             // Load the root object, put it in the scope.

From 63b41d796a2881bda72398cc78f693ab51ba30d6 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Thu, 27 Aug 2015 12:06:25 -0700
Subject: [PATCH 179/266] [Mobile] Clean Up

Cleaned up context menu gesture
comments with spacing.
---
 platform/representation/src/gestures/ContextMenuGesture.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index 158c209beb..4de40586dd 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -55,14 +55,17 @@ define(
     
     // When context menu event occurs, show object actions instead
             if (!agentService.isMobile(navigator.userAgent)) {
+                
                 // When context menu event occurs, show object actions instead
                 element.on('contextmenu', showMenu);
             } else if (agentService.isMobile(navigator.userAgent)) {
+                
                 // If on mobile device, then start timeout for the single touch event
                 // during the timeout 'isPressing' is true.
                 element.on('touchstart', function (event) {
                     if (event.touches.length < 2) {
                         isPressing = true;
+                        
                         // After the timeout, if 'isPressing' is
                         // true, display context menu for object
                         $timeout(function () {
@@ -72,6 +75,7 @@ define(
                         }, longTouchTime);
                     }
                 });
+                
                 // Whenever the touch event ends, 'isPressing' is false.
                 element.on('touchend', function (event) {
                     isPressing = false;

From 54bf39344a661344bf245bec916fc5b9237ce5ec Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Thu, 27 Aug 2015 17:05:50 -0700
Subject: [PATCH 180/266] [Mobile] Multiple mobile Safari fixes

open #74
New mixins to prefix '-webkit-' to props and vals;
'flex' classes use new webkit mixins;
Fixed flex layout of .object-browse-bar and
.context-available element;
Migrated CSS to remove small .scss include files;
---
 .../res/templates/browse/object-header.html   |   2 +-
 .../general/res/css/theme-espresso.css        | 273 +++++++++---------
 platform/commonUI/general/res/sass/_flex.scss |  37 ---
 platform/commonUI/general/res/sass/_main.scss |   2 +-
 .../commonUI/general/res/sass/_mixins.scss    |  10 +
 .../general/res/sass/controls/_controls.scss  |  28 +-
 .../general/res/sass/mobile/_layout.scss      |   2 +-
 .../general/res/sass/search/_search.scss      |  16 +-
 .../res/sass/user-environ/_layout.scss        |  35 ++-
 .../res/sass/user-environ/_object-browse.scss |  38 ---
 10 files changed, 197 insertions(+), 246 deletions(-)
 delete mode 100644 platform/commonUI/general/res/sass/_flex.scss
 delete mode 100644 platform/commonUI/general/res/sass/user-environ/_object-browse.scss

diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html
index a9652631d9..7ea43a6b9f 100644
--- a/platform/commonUI/browse/res/templates/browse/object-header.html
+++ b/platform/commonUI/browse/res/templates/browse/object-header.html
@@ -22,7 +22,7 @@
 <div class='object-header object-header-mobile'>
     <span class='type-icon ui-symbol'>{{type.getGlyph()}}</span>
     <!--span class='type-name mobile-important-hide'>{{type.getName()}}</span-->
-    <span class="l-elem-wrapper">
+    <span class="l-elem-wrapper l-flex">
         <span ng-if="parameters.mode" class='action'>{{parameters.mode}}</span>
         <span class='title-label'>{{model.name}}</span>
         <mct-representation key="'menu-arrow'" mct-object='domainObject'></mct-representation>
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index b9be506ef9..87add64e54 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -562,15 +562,8 @@ mct-container {
     .bar.abs .right .icon.major,
     .btn-menu span.bar.l-click-area .right .icon.major {
       margin-left: 15px; }
-/* line 88, ../sass/user-environ/_layout.scss */
-.bar.l-flex {
-  display: flex;
-  flex-flow: row nowrap; }
-  /* line 91, ../sass/user-environ/_layout.scss */
-  .bar.l-flex .left {
-    flex: 1 1 0; }
 
-/* line 99, ../sass/user-environ/_layout.scss */
+/* line 91, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -578,23 +571,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 110, ../sass/user-environ/_layout.scss */
+/* line 102, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 116, ../sass/user-environ/_layout.scss */
+/* line 108, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 119, ../sass/user-environ/_layout.scss */
+  /* line 111, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 124, ../sass/user-environ/_layout.scss */
+  /* line 116, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 129, ../sass/user-environ/_layout.scss */
+/* line 121, ../sass/user-environ/_layout.scss */
 .user-environ .ue-bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -606,20 +599,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 134, ../sass/user-environ/_layout.scss */
+  /* line 126, ../sass/user-environ/_layout.scss */
   .user-environ .ue-bottom-bar .status-holder {
     z-index: 1; }
-  /* line 138, ../sass/user-environ/_layout.scss */
+  /* line 130, ../sass/user-environ/_layout.scss */
   .user-environ .ue-bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 146, ../sass/user-environ/_layout.scss */
+/* line 138, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 148, ../sass/user-environ/_layout.scss */
+  /* line 140, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -630,111 +623,111 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 156, ../sass/user-environ/_layout.scss */
+    /* line 148, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 163, ../sass/user-environ/_layout.scss */
+  /* line 155, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 169, ../sass/user-environ/_layout.scss */
+  /* line 161, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 176, ../sass/user-environ/_layout.scss */
+  /* line 168, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 182, ../sass/user-environ/_layout.scss */
+  /* line 174, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 185, ../sass/user-environ/_layout.scss */
+  /* line 177, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 188, ../sass/user-environ/_layout.scss */
+  /* line 180, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 194, ../sass/user-environ/_layout.scss */
+  /* line 186, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 197, ../sass/user-environ/_layout.scss */
+  /* line 189, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 201, ../sass/user-environ/_layout.scss */
+  /* line 193, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 209, ../sass/user-environ/_layout.scss */
+/* line 201, ../sass/user-environ/_layout.scss */
 .browse-mode .split-layout .split-pane-component.pane.left {
   min-width: 150px;
   max-width: 800px;
   width: 25%; }
 
-/* line 222, ../sass/user-environ/_layout.scss */
+/* line 214, ../sass/user-environ/_layout.scss */
 .edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
   min-height: 50px;
   max-height: 80%; }
 
-/* line 230, ../sass/user-environ/_layout.scss */
+/* line 222, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 233, ../sass/user-environ/_layout.scss */
+  /* line 225, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 236, ../sass/user-environ/_layout.scss */
+    /* line 228, ../sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 241, ../sass/user-environ/_layout.scss */
+  /* line 233, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .search-holder {
     top: 34px; }
-  /* line 244, ../sass/user-environ/_layout.scss */
+  /* line 236, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 64px; }
-  /* line 251, ../sass/user-environ/_layout.scss */
+  /* line 243, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 262, ../sass/user-environ/_layout.scss */
+  /* line 254, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 266, ../sass/user-environ/_layout.scss */
+  /* line 258, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 274, ../sass/user-environ/_layout.scss */
+/* line 266, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 277, ../sass/user-environ/_layout.scss */
+  /* line 269, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 284, ../sass/user-environ/_layout.scss */
+/* line 276, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 287, ../sass/user-environ/_layout.scss */
+  /* line 279, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 291, ../sass/user-environ/_layout.scss */
+  /* line 283, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 293, ../sass/user-environ/_layout.scss */
+    /* line 285, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 302, ../sass/user-environ/_layout.scss */
+/* line 294, ../sass/user-environ/_layout.scss */
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
@@ -748,12 +741,48 @@ mct-container {
   line-height: 200%;
   vertical-align: top; }
 
-/* line 319, ../sass/user-environ/_layout.scss */
+/* line 311, ../sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 324, ../sass/user-environ/_layout.scss */
+/* line 316, ../sass/user-environ/_layout.scss */
+.object-browse-bar {
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 24px;
+  line-height: 24px;
+  white-space: nowrap; }
+  /* line 324, ../sass/user-environ/_layout.scss */
+  .object-browse-bar .left {
+    padding-right: 20px; }
+    /* line 326, ../sass/user-environ/_layout.scss */
+    .object-browse-bar .left .l-back {
+      display: inline-block;
+      float: left;
+      margin-right: 10px; }
+
+/* line 334, ../sass/user-environ/_layout.scss */
+.l-flex {
+  display: flex;
+  display: -webkit-flex;
+  flex-flow: row nowrap;
+  -webkit-flex-flow: row nowrap; }
+  /* line 337, ../sass/user-environ/_layout.scss */
+  .l-flex .left {
+    flex: 1 1 0;
+    -webkit-flex: 1 1 0; }
+
+/* line 343, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -952,7 +981,8 @@ mct-container {
   /* line 160, ../sass/mobile/_layout.scss */
   .browse-showtree .pane.right-repr {
     left: 0 !important;
-    transform: translateX(90%); }
+    transform: translateX(90%);
+    -webkit-transform: translateX(90%); }
     /* line 163, ../sass/mobile/_layout.scss */
     .browse-showtree .pane.right-repr #content-area {
       opacity: 0; } }
@@ -2527,31 +2557,37 @@ label.checkbox.custom {
 /* line 364, ../sass/controls/_controls.scss */
 .object-header {
   font-size: 1em; }
-  /* line 374, ../sass/controls/_controls.scss */
+  /* line 375, ../sass/controls/_controls.scss */
   .object-header > .type-icon {
     font-size: 120%;
     float: left;
     margin-right: 5px; }
-  /* line 380, ../sass/controls/_controls.scss */
+  /* line 381, ../sass/controls/_controls.scss */
   .object-header .l-elem-wrapper {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: flex-start; }
-  /* line 386, ../sass/controls/_controls.scss */
+    justify-content: flex-start;
+    -webkit-justify-content: flex-start; }
+    /* line 384, ../sass/controls/_controls.scss */
+    .object-header .l-elem-wrapper mct-representation {
+      min-width: 0.7em; }
+  /* line 392, ../sass/controls/_controls.scss */
   .object-header .action {
     margin-right: 5px; }
-  /* line 390, ../sass/controls/_controls.scss */
+  /* line 396, ../sass/controls/_controls.scss */
   .object-header .title-label {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     color: white;
+    flex: 0 1 auto;
+    -webkit-flex: 0 1 auto;
     padding-right: 0.35em; }
-  /* line 397, ../sass/controls/_controls.scss */
+  /* line 405, ../sass/controls/_controls.scss */
   .object-header .context-available {
-    font-size: 0.7em; }
+    font-size: 0.7em;
+    flex: 0 0 1;
+    -webkit-flex: 0 0 1; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 402, ../sass/controls/_controls.scss */
+    /* line 412, ../sass/controls/_controls.scss */
     .object-header .context-available {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -2566,12 +2602,12 @@ label.checkbox.custom {
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       opacity: 0; }
-    /* line 407, ../sass/controls/_controls.scss */
+    /* line 417, ../sass/controls/_controls.scss */
     .object-header:hover .context-available {
       opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 420, ../sass/controls/_controls.scss */
+/* line 430, ../sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2592,7 +2628,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 431, ../sass/controls/_controls.scss */
+/* line 441, ../sass/controls/_controls.scss */
 .slider .knob {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2675,12 +2711,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 442, ../sass/controls/_controls.scss */
+  /* line 452, ../sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 449, ../sass/controls/_controls.scss */
+/* line 459, ../sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2691,13 +2727,13 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 459, ../sass/controls/_controls.scss */
+  /* line 469, ../sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 468, ../sass/controls/_controls.scss */
+  /* line 478, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2714,7 +2750,7 @@ label.checkbox.custom {
     height: 10px;
     width: 10px; }
 
-  /* line 474, ../sass/controls/_controls.scss */
+  /* line 484, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2732,7 +2768,7 @@ label.checkbox.custom {
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border-top: 1px solid gray; }
-    /* line 481, ../sass/controls/_controls.scss */
+    /* line 491, ../sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -2741,7 +2777,7 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#808080, #737373 20px);
       background-image: linear-gradient(#808080, #737373 20px); }
 
-  /* line 486, ../sass/controls/_controls.scss */
+  /* line 496, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
@@ -4385,20 +4421,23 @@ input[type="text"] {
 /* line 38, ../sass/search/_search.scss */
 .search {
   display: flex;
+  display: -webkit-flex;
   flex-direction: column;
+  -webkit-flex-direction: column;
   height: 100%; }
-  /* line 49, ../sass/search/_search.scss */
+  /* line 48, ../sass/search/_search.scss */
   .search .search-bar {
     font-size: 0.8em;
+    max-width: 250px;
     position: relative;
     width: 100%; }
-    /* line 66, ../sass/search/_search.scss */
+    /* line 60, ../sass/search/_search.scss */
     .search .search-bar .search-input {
       height: 25px;
       line-height: 25px;
       padding-top: 0;
       padding-bottom: 0; }
-    /* line 73, ../sass/search/_search.scss */
+    /* line 67, ../sass/search/_search.scss */
     .search .search-bar .search-icon,
     .search .search-bar .clear-icon,
     .search .search-bar .menu-icon {
@@ -4412,68 +4451,68 @@ input[type="text"] {
       position: absolute;
       text-align: center;
       top: 4px; }
-    /* line 86, ../sass/search/_search.scss */
+    /* line 80, ../sass/search/_search.scss */
     .search .search-bar .clear-icon,
     .search .search-bar .menu-icon {
       cursor: pointer;
       transition: color .25s; }
-    /* line 93, ../sass/search/_search.scss */
+    /* line 87, ../sass/search/_search.scss */
     .search .search-bar .search-input {
       position: relative;
       width: 100%;
       padding-left: 22px !important;
       padding-right: 44px !important; }
-      /* line 100, ../sass/search/_search.scss */
+      /* line 94, ../sass/search/_search.scss */
       .search .search-bar .search-input input {
         width: 100%; }
-    /* line 105, ../sass/search/_search.scss */
+    /* line 99, ../sass/search/_search.scss */
     .search .search-bar .search-icon {
       color: #737373;
       left: 3px;
       transition: visibility .15s, opacity .15s, color .2s;
       pointer-events: none; }
-    /* line 125, ../sass/search/_search.scss */
+    /* line 119, ../sass/search/_search.scss */
     .search .search-bar .search-input:hover + div.search-icon {
       color: #a6a6a6; }
-    /* line 129, ../sass/search/_search.scss */
+    /* line 123, ../sass/search/_search.scss */
     .search .search-bar .clear-icon {
       right: 22px;
       visibility: hidden;
       opacity: 0;
       transition: visibility .15s, opacity .15s, color .2s; }
-      /* line 138, ../sass/search/_search.scss */
+      /* line 132, ../sass/search/_search.scss */
       .search .search-bar .clear-icon.content {
         visibility: visible;
         opacity: 1; }
-      /* line 143, ../sass/search/_search.scss */
+      /* line 137, ../sass/search/_search.scss */
       .search .search-bar .clear-icon:hover {
         color: #a6a6a6; }
-    /* line 148, ../sass/search/_search.scss */
+    /* line 142, ../sass/search/_search.scss */
     .search .search-bar .menu-icon {
       font-size: 0.8em;
       padding-right: 4px;
       right: 4px;
       text-align: right; }
-      /* line 154, ../sass/search/_search.scss */
+      /* line 148, ../sass/search/_search.scss */
       .search .search-bar .menu-icon:hover {
         color: #a6a6a6; }
-    /* line 159, ../sass/search/_search.scss */
+    /* line 153, ../sass/search/_search.scss */
     .search .search-bar .search-menu-holder {
       float: right;
       left: -20px;
       z-index: 1;
       transition: visibility .05s, opacity .05s; }
-      /* line 169, ../sass/search/_search.scss */
+      /* line 163, ../sass/search/_search.scss */
       .search .search-bar .search-menu-holder.off {
         visibility: hidden;
         opacity: 0; }
-    /* line 176, ../sass/search/_search.scss */
+    /* line 170, ../sass/search/_search.scss */
     .search .search-bar .menu-icon:hover + div.search-menu-holder {
       visibility: visible; }
-    /* line 179, ../sass/search/_search.scss */
+    /* line 173, ../sass/search/_search.scss */
     .search .search-bar div.search-menu-holder:hover {
       visibility: visible; }
-  /* line 184, ../sass/search/_search.scss */
+  /* line 178, ../sass/search/_search.scss */
   .search .active-filter-display {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -4486,14 +4525,14 @@ input[type="text"] {
     padding-left: 1.4625em;
     font-size: 0.65em;
     margin-top: 3px; }
-    /* line 199, ../sass/search/_search.scss */
+    /* line 193, ../sass/search/_search.scss */
     .search .active-filter-display .clear-filters-icon {
       opacity: 0.4;
       font-size: 0.8em;
       position: absolute;
       left: 1px;
       cursor: pointer; }
-    /* line 210, ../sass/search/_search.scss */
+    /* line 204, ../sass/search/_search.scss */
     .search .active-filter-display.off {
       visibility: hidden;
       opacity: 0;
@@ -4501,7 +4540,7 @@ input[type="text"] {
       margin: 0;
       padding: 0;
       border: 0; }
-  /* line 220, ../sass/search/_search.scss */
+  /* line 214, ../sass/search/_search.scss */
   .search .search-scroll {
     order: 3;
     margin-top: 4px;
@@ -4510,27 +4549,27 @@ input[type="text"] {
     height: auto;
     max-height: 100%;
     position: relative; }
-    /* line 233, ../sass/search/_search.scss */
+    /* line 227, ../sass/search/_search.scss */
     .search .search-scroll .load-icon {
       position: relative; }
-      /* line 235, ../sass/search/_search.scss */
+      /* line 229, ../sass/search/_search.scss */
       .search .search-scroll .load-icon.loading {
         pointer-events: none;
         margin-left: 6px; }
-        /* line 239, ../sass/search/_search.scss */
+        /* line 233, ../sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .title-label {
           font-style: italic;
           font-size: .9em;
           opacity: 0.5;
           margin-left: 26px;
           line-height: 24px; }
-        /* line 249, ../sass/search/_search.scss */
+        /* line 243, ../sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .wait-spinner {
           margin-left: 6px; }
-      /* line 254, ../sass/search/_search.scss */
+      /* line 248, ../sass/search/_search.scss */
       .search .search-scroll .load-icon:not(.loading) {
         cursor: pointer; }
-    /* line 259, ../sass/search/_search.scss */
+    /* line 253, ../sass/search/_search.scss */
     .search .search-scroll .load-more-button {
       margin-top: 5px 0;
       font-size: 0.8em;
@@ -4879,52 +4918,6 @@ input[type="text"] {
     .status.block .status-indicator.caution {
       color: #ffaa00; }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 22, ../sass/user-environ/_object-browse.scss */
-.object-browse-bar {
-  overflow: visible;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: auto;
-  height: auto;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  height: 24px;
-  line-height: 24px;
-  white-space: nowrap; }
-  /* line 30, ../sass/user-environ/_object-browse.scss */
-  .object-browse-bar .left {
-    padding-right: 5px; }
-    /* line 32, ../sass/user-environ/_object-browse.scss */
-    .object-browse-bar .left .l-back {
-      display: inline-block;
-      float: left;
-      margin-right: 10px; }
-
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/_flex.scss b/platform/commonUI/general/res/sass/_flex.scss
deleted file mode 100644
index 61e8007676..0000000000
--- a/platform/commonUI/general/res/sass/_flex.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.l-flex {
-    &.l-flex-justify {
-        justify-content: space-between;
-    }
-    .l-flex-row,
-    &.l-flex-row {
-        display: flex;
-        flex-flow: row nowrap;
-        div, span {
-            //@include tmpBorder();
-        }
-        > div, > span {
-            //flex: 1 1 0;
-        }
-    }
-    .l-flex-max {
-        flex: 1 0 !important;
-    }
-
-    .flex-ignore {
-        display: flex;
-        flex-flow: row nowrap;
-        flex: 0 1 auto;
-    }
-}
-
-// TEMP, move out of here once working
-.object-browse-bar.bar > div.abs {
-    @include test(green);
-}
-
-
-.l-flex-row .title-label {
-    @include test(blue);
-    flex: 1 0 !important;
-}
-
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index eff854790b..347087f24f 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -68,7 +68,7 @@
 @import "user-environ/frame";
 @import "user-environ/top-bar";
 @import "user-environ/bottom-bar";
-@import "user-environ/object-browse";
+//@import "user-environ/object-browse";
 @import "user-environ/tool-bar";
 @import "helpers/bubbles";
 @import "helpers/splitter";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index bc97b6a521..9625ed96af 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -318,6 +318,16 @@
     }
 }
 
+@mixin webkitProp($name, $val) {
+	#{$name}: #{$val};
+	-webkit-#{$name}: #{$val};
+}
+
+@mixin webkitVal($name, $val) {
+	#{$name}: #{$val};
+	#{$name}: -webkit-#{$val};
+}
+
 @mixin verticalCenter {
     /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
     //position: relative;
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 2e7a0e09d3..4fd66df059 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -365,12 +365,13 @@ label.checkbox.custom {
 	//@include test();
 	font-size: 1em;
 
-	> .title-label,
-	> .type-icon,
-	> .context-available {
-		//@include tmpBorder(#6666ff);
-		//vertical-align: middle;
-	}
+	//> .title-label,
+	//> .type-icon,
+	//> .context-available {
+	//	//@include tmpBorder(#6666ff);
+	//	//vertical-align: middle;
+	//}
+
 	> .type-icon {
 		font-size: 120%;
 		float: left;
@@ -378,9 +379,14 @@ label.checkbox.custom {
 	}
 
 	.l-elem-wrapper {
-		display: flex;
-		flex-flow: row nowrap;
-		justify-content: flex-start;
+		//@include test(#66f, 0.2);
+		@include webkitProp(justify-content, flex-start);
+		mct-representation {
+			// Holds the context-available item
+			// Must have min-width to make flex work properly
+			// in Safari
+			min-width: 0.7em;
+		}
 	}
 
 	.action {
@@ -388,14 +394,18 @@ label.checkbox.custom {
 	}
 
 	.title-label {
+		//@include test(green, 0.9);
 		@include ellipsize();
 		color: lighten($colorBodyFg, 40%);
+		@include webkitProp(flex, '0 1 auto');
 		padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
 		//position: relative;
 	}
 
 	.context-available {
 		font-size: 0.7em;
+		@include webkitProp(flex, '0 0 1');
+		//margin-right: $interiorMargin;
 	}
 
 	@include desktop {
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index 9a88c64a6a..d202ec0450 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -159,7 +159,7 @@
         }
         .pane.right-repr {
             left: 0 !important;
-            transform: translateX($proporMenuOnly);
+	        @include webkitProp(transform, translateX($proporMenuOnly));
             #content-area {
                 opacity: 0;
             }
diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss
index e48baba95f..34a323e6ef 100644
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -39,26 +39,20 @@
 	$iconWidth: 20px;
 	$leftMargin: 6px;
 	$rightPadding: 5px;
-
-	//padding-right: $rightPadding;
-	//@include test();
-	display: flex; //block;
-	flex-direction: column;
+	@include webkitVal(display, flex);
+	//display: flex;
+	@include webkitProp(flex-direction, column);
+	//flex-direction: column;
 	height: 100%;
 
 	.search-bar {
-		//$heightAdjust: 4px;
 		$textInputHeight: 19px; // This is equal to the default value, 19px
 		$iconEdgeM: 4px;
 		$iconD: $treeSearchInputBarH - ($iconEdgeM*2);
 		font-size: 0.8em;
-
-		//order: 1;
-
+		max-width: 250px;
 		position: relative;
 		width: 100%;
-		//height: $textInputHeight;
-		//margin-top: $heightAdjust;
 		.search-input,
 		.search-icon {
 		}
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index bcb441237f..04b582d123 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -85,14 +85,6 @@
             }
         }
     }
-    &.l-flex {
-        display: flex;
-        flex-flow: row nowrap;
-        .left {
-            //@include test(green);
-            flex: 1 1 0;
-        }
-    }
 }
 
 .user-environ {
@@ -321,6 +313,33 @@
     }
 }
 
+.object-browse-bar {
+	//@include test(blue);
+	@include absPosDefault(0, visible);
+	@include box-sizing(border-box);
+	height: $ueTopBarH;
+	line-height: $ueTopBarH;
+	white-space: nowrap;
+
+	.left {
+		padding-right: $interiorMarginLg * 2;
+		.l-back {
+			display: inline-block;
+			float: left;
+			margin-right: $interiorMarginLg;
+		}
+	}
+}
+
+.l-flex {
+	@include webkitVal('display', 'flex');
+	@include webkitProp('flex-flow', 'row nowrap');
+	.left {
+		//@include test(red);
+		@include webkitProp(flex, '1 1 0');
+	}
+}
+
 .vscroll {
     overflow-y: auto;
 }
diff --git a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
deleted file mode 100644
index 602a8adeae..0000000000
--- a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-.object-browse-bar {
-    //@include test(blue);
-    @include absPosDefault(0, visible);
-    @include box-sizing(border-box);
-    height: $ueTopBarH;
-    line-height: $ueTopBarH;
-    white-space: nowrap;
-
-    .left {
-        padding-right: $interiorMargin;
-        .l-back {
-            display: inline-block;
-            float: left;
-            margin-right: $interiorMarginLg;
-        }
-    }
-}
\ No newline at end of file

From 5a991076ea4733b2abcc5322f0620c1d59ade466 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 31 Aug 2015 12:34:34 -0700
Subject: [PATCH 181/266] [Frontend] CSS and markup tweaks to enable flex
 layout

open #93
Layout frame and imagery markup modified;
---
 .../general/res/css/theme-espresso.css        | 178 +++++++++---------
 .../general/res/sass/features/_imagery.scss   |   5 -
 .../res/sass/user-environ/_layout.scss        |   7 +
 .../imagery/res/templates/imagery.html        |   2 +-
 4 files changed, 98 insertions(+), 94 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 87add64e54..46bc99f786 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -121,7 +121,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -142,38 +142,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -562,8 +562,15 @@ mct-container {
     .bar.abs .right .icon.major,
     .btn-menu span.bar.l-click-area .right .icon.major {
       margin-left: 15px; }
+  /* line 89, ../sass/user-environ/_layout.scss */
+  .bar.abs .l-flex .left, .btn-menu span.bar.l-click-area .l-flex .left,
+  .bar.abs .l-flex .right,
+  .btn-menu span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .btn-menu span.bar.l-flex.l-click-area .left,
+  .bar.abs.l-flex .right,
+  .btn-menu span.bar.l-flex.l-click-area .right {
+    width: auto; }
 
-/* line 91, ../sass/user-environ/_layout.scss */
+/* line 98, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -571,23 +578,23 @@ mct-container {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 102, ../sass/user-environ/_layout.scss */
+/* line 109, ../sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 108, ../sass/user-environ/_layout.scss */
+/* line 115, ../sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 111, ../sass/user-environ/_layout.scss */
+  /* line 118, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 116, ../sass/user-environ/_layout.scss */
+  /* line 123, ../sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 121, ../sass/user-environ/_layout.scss */
+/* line 128, ../sass/user-environ/_layout.scss */
 .user-environ .ue-bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -599,20 +606,20 @@ mct-container {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 126, ../sass/user-environ/_layout.scss */
+  /* line 133, ../sass/user-environ/_layout.scss */
   .user-environ .ue-bottom-bar .status-holder {
     z-index: 1; }
-  /* line 130, ../sass/user-environ/_layout.scss */
+  /* line 137, ../sass/user-environ/_layout.scss */
   .user-environ .ue-bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 138, ../sass/user-environ/_layout.scss */
+/* line 145, ../sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 140, ../sass/user-environ/_layout.scss */
+  /* line 147, ../sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -623,111 +630,111 @@ mct-container {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 148, ../sass/user-environ/_layout.scss */
+    /* line 155, ../sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 155, ../sass/user-environ/_layout.scss */
+  /* line 162, ../sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 161, ../sass/user-environ/_layout.scss */
+  /* line 168, ../sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 168, ../sass/user-environ/_layout.scss */
+  /* line 175, ../sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 174, ../sass/user-environ/_layout.scss */
+  /* line 181, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 177, ../sass/user-environ/_layout.scss */
+  /* line 184, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 180, ../sass/user-environ/_layout.scss */
+  /* line 187, ../sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 186, ../sass/user-environ/_layout.scss */
+  /* line 193, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 189, ../sass/user-environ/_layout.scss */
+  /* line 196, ../sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 193, ../sass/user-environ/_layout.scss */
+  /* line 200, ../sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 201, ../sass/user-environ/_layout.scss */
+/* line 208, ../sass/user-environ/_layout.scss */
 .browse-mode .split-layout .split-pane-component.pane.left {
   min-width: 150px;
   max-width: 800px;
   width: 25%; }
 
-/* line 214, ../sass/user-environ/_layout.scss */
+/* line 221, ../sass/user-environ/_layout.scss */
 .edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
   min-height: 50px;
   max-height: 80%; }
 
-/* line 222, ../sass/user-environ/_layout.scss */
+/* line 229, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 225, ../sass/user-environ/_layout.scss */
+  /* line 232, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 228, ../sass/user-environ/_layout.scss */
+    /* line 235, ../sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 233, ../sass/user-environ/_layout.scss */
+  /* line 240, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .search-holder {
     top: 34px; }
-  /* line 236, ../sass/user-environ/_layout.scss */
+  /* line 243, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 64px; }
-  /* line 243, ../sass/user-environ/_layout.scss */
+  /* line 250, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 254, ../sass/user-environ/_layout.scss */
+  /* line 261, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 258, ../sass/user-environ/_layout.scss */
+  /* line 265, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 266, ../sass/user-environ/_layout.scss */
+/* line 273, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 269, ../sass/user-environ/_layout.scss */
+  /* line 276, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 276, ../sass/user-environ/_layout.scss */
+/* line 283, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 279, ../sass/user-environ/_layout.scss */
+  /* line 286, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 283, ../sass/user-environ/_layout.scss */
+  /* line 290, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 285, ../sass/user-environ/_layout.scss */
+    /* line 292, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 294, ../sass/user-environ/_layout.scss */
+/* line 301, ../sass/user-environ/_layout.scss */
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
@@ -741,12 +748,12 @@ mct-container {
   line-height: 200%;
   vertical-align: top; }
 
-/* line 311, ../sass/user-environ/_layout.scss */
+/* line 318, ../sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 316, ../sass/user-environ/_layout.scss */
+/* line 323, ../sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -762,27 +769,27 @@ mct-container {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 324, ../sass/user-environ/_layout.scss */
+  /* line 331, ../sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 326, ../sass/user-environ/_layout.scss */
+    /* line 333, ../sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/* line 334, ../sass/user-environ/_layout.scss */
+/* line 341, ../sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
   display: -webkit-flex;
   flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap; }
-  /* line 337, ../sass/user-environ/_layout.scss */
+  /* line 344, ../sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
     -webkit-flex: 1 1 0; }
 
-/* line 343, ../sass/user-environ/_layout.scss */
+/* line 350, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -3320,8 +3327,6 @@ label.checkbox.custom {
 .l-image-main-wrapper,
 .l-image-main,
 .l-image-main-controlbar,
-.l-image-main-controlbar .left,
-.l-image-main-controlbar .right,
 .l-image-thumbs-wrapper {
   overflow: false;
   position: absolute;
@@ -3333,82 +3338,79 @@ label.checkbox.custom {
   height: auto; }
 
 /*************************************** MAIN LAYOUT */
-/* line 11, ../sass/features/_imagery.scss */
+/* line 9, ../sass/features/_imagery.scss */
 .l-image-main-wrapper {
   min-height: 100px;
   min-width: 150px; }
-  /* line 18, ../sass/features/_imagery.scss */
+  /* line 16, ../sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main {
     background-color: rgba(255, 255, 255, 0.1);
     bottom: 27px; }
-  /* line 22, ../sass/features/_imagery.scss */
+  /* line 20, ../sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main-controlbar {
     top: auto;
     height: 22px; }
 
-/* line 28, ../sass/features/_imagery.scss */
+/* line 26, ../sass/features/_imagery.scss */
 .l-image-thumbs-wrapper {
   top: auto;
   height: 168px; }
 
-/* line 34, ../sass/features/_imagery.scss */
+/* line 32, ../sass/features/_imagery.scss */
 .l-date,
 .l-time,
 .l-timezone {
   display: inline-block; }
 
 /*************************************** MAIN IMAGE */
-/* line 42, ../sass/features/_imagery.scss */
+/* line 40, ../sass/features/_imagery.scss */
 .l-image-main,
 .l-image-thumb-item .l-thumb {
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat; }
 
-/* line 53, ../sass/features/_imagery.scss */
+/* line 51, ../sass/features/_imagery.scss */
 .l-image-main-controlbar {
   font-size: 0.8em;
   line-height: 22px; }
-  /* line 57, ../sass/features/_imagery.scss */
+  /* line 55, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .left, .l-image-main-controlbar .right {
     direction: rtl;
     overflow: hidden; }
-  /* line 61, ../sass/features/_imagery.scss */
+  /* line 59, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .left {
-    text-align: left;
-    width: 75% !important; }
-  /* line 66, ../sass/features/_imagery.scss */
+    text-align: left; }
+  /* line 63, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .right {
-    min-width: 40px;
-    width: 25% !important;
     z-index: 2; }
-  /* line 72, ../sass/features/_imagery.scss */
+  /* line 67, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .l-date,
   .l-image-main-controlbar .l-time {
     color: #fff; }
-  /* line 76, ../sass/features/_imagery.scss */
+  /* line 71, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .l-mag {
     direction: ltr;
     display: inline-block; }
-    /* line 80, ../sass/features/_imagery.scss */
+    /* line 75, ../sass/features/_imagery.scss */
     .l-image-main-controlbar .l-mag:before {
       content: "\000049"; }
-  /* line 84, ../sass/features/_imagery.scss */
+  /* line 79, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .s-mag {
     color: #666666; }
-  /* line 87, ../sass/features/_imagery.scss */
+  /* line 82, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .l-btn.show-thumbs {
     display: none; }
 
-/* line 92, ../sass/features/_imagery.scss */
+/* line 87, ../sass/features/_imagery.scss */
 .s-image-main {
   border: 1px solid transparent; }
-  /* line 94, ../sass/features/_imagery.scss */
+  /* line 89, ../sass/features/_imagery.scss */
   .s-image-main.paused {
     border-color: #c56f01; }
 
 /*************************************** THUMBS */
-/* line 101, ../sass/features/_imagery.scss */
+/* line 96, ../sass/features/_imagery.scss */
 .l-image-thumbs-wrapper {
   direction: rtl;
   overflow-x: auto;
@@ -3417,7 +3419,7 @@ label.checkbox.custom {
   white-space: nowrap;
   z-index: 70; }
 
-/* line 111, ../sass/features/_imagery.scss */
+/* line 106, ../sass/features/_imagery.scss */
 .l-image-thumb-item {
   -moz-transition: background-color 0.25s;
   -o-transition: background-color 0.25s;
@@ -3436,30 +3438,30 @@ label.checkbox.custom {
   text-align: left;
   width: 122px;
   white-space: normal; }
-  /* line 116, ../sass/features/_imagery.scss */
+  /* line 111, ../sass/features/_imagery.scss */
   .l-image-thumb-item .l-thumb,
   .l-image-thumb-item .l-date,
   .l-image-thumb-item .l-time {
     display: inline-block; }
-  /* line 121, ../sass/features/_imagery.scss */
+  /* line 116, ../sass/features/_imagery.scss */
   .l-image-thumb-item .l-date,
   .l-image-thumb-item .l-time {
     padding: 2px 3px; }
-  /* line 133, ../sass/features/_imagery.scss */
+  /* line 128, ../sass/features/_imagery.scss */
   .l-image-thumb-item:hover {
     background: rgba(255, 255, 255, 0.2); }
-    /* line 135, ../sass/features/_imagery.scss */
+    /* line 130, ../sass/features/_imagery.scss */
     .l-image-thumb-item:hover .l-date,
     .l-image-thumb-item:hover .l-time {
       color: #fff; }
-  /* line 140, ../sass/features/_imagery.scss */
+  /* line 135, ../sass/features/_imagery.scss */
   .l-image-thumb-item.selected {
     background: #005177; }
-    /* line 142, ../sass/features/_imagery.scss */
+    /* line 137, ../sass/features/_imagery.scss */
     .l-image-thumb-item.selected .l-date,
     .l-image-thumb-item.selected .l-time {
       color: #fff; }
-  /* line 147, ../sass/features/_imagery.scss */
+  /* line 142, ../sass/features/_imagery.scss */
   .l-image-thumb-item .l-thumb {
     background-color: rgba(255, 255, 255, 0.1);
     height: 120px;
@@ -3467,13 +3469,13 @@ label.checkbox.custom {
     margin-top: 0; }
 
 /*************************************** WHEN IN FRAME */
-/* line 157, ../sass/features/_imagery.scss */
+/* line 152, ../sass/features/_imagery.scss */
 .frame .t-imagery .l-image-main-wrapper {
   bottom: 0; }
-  /* line 159, ../sass/features/_imagery.scss */
+  /* line 154, ../sass/features/_imagery.scss */
   .frame .t-imagery .l-image-main-wrapper .l-image-main-controlbar {
     font-size: 0.7em; }
-/* line 168, ../sass/features/_imagery.scss */
+/* line 163, ../sass/features/_imagery.scss */
 .frame .t-imagery .l-image-thumbs-wrapper {
   display: none; }
 
diff --git a/platform/commonUI/general/res/sass/features/_imagery.scss b/platform/commonUI/general/res/sass/features/_imagery.scss
index fa0b092fbf..c86556fd04 100644
--- a/platform/commonUI/general/res/sass/features/_imagery.scss
+++ b/platform/commonUI/general/res/sass/features/_imagery.scss
@@ -1,8 +1,6 @@
 .l-image-main-wrapper,
 .l-image-main,
 .l-image-main-controlbar,
-.l-image-main-controlbar .left,
-.l-image-main-controlbar .right,
 .l-image-thumbs-wrapper {
 	@include absPosDefault(0, false);
 }
@@ -61,12 +59,9 @@
 	.left {
 		//@include test(red);
 		text-align: left;
-		width: 75% !important;
 	}
 	.right {
 		//@include test(green);
-		min-width: 40px;
-		width: 25% !important;
 		z-index: 2;
 	}
 	.l-date,
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 04b582d123..d5e89c27fb 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -84,6 +84,13 @@
                 margin-left: $interiorMargin * 3;
             }
         }
+        .l-flex,
+        &.l-flex {
+            .left,
+            .right {
+                width: auto;
+            }
+        }
     }
 }
 
diff --git a/platform/features/imagery/res/templates/imagery.html b/platform/features/imagery/res/templates/imagery.html
index 80f0813b2b..2b1f8f969e 100644
--- a/platform/features/imagery/res/templates/imagery.html
+++ b/platform/features/imagery/res/templates/imagery.html
@@ -33,7 +33,7 @@
             >
         </div>
 
-        <div class="l-image-main-controlbar bar">
+        <div class="l-image-main-controlbar l-flex bar">
             <div class="left">
                 <a
                     class="t-btn l-btn s-btn s-icon-btn s-very-subtle show-thumbs sm"

From 90f62b92a50864047c4c12c96e6187f23828cb49 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 31 Aug 2015 12:54:52 -0700
Subject: [PATCH 182/266] [Frontend] Super-minor cleanups in .scss files

open #93
---
 platform/commonUI/general/res/css/theme-espresso.css          | 1 -
 platform/commonUI/general/res/sass/_main.scss                 | 1 -
 .../commonUI/general/res/sass/themes/_theme-espresso.scss     | 4 +++-
 platform/commonUI/general/res/sass/tree.scss                  | 2 --
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 46bc99f786..38c9695ec6 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -99,7 +99,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* CONSTANTS */
-/*****************************************************************************
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 347087f24f..43947dcc51 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -1,4 +1,3 @@
-/*****************************************************************************
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
diff --git a/platform/commonUI/general/res/sass/themes/_theme-espresso.scss b/platform/commonUI/general/res/sass/themes/_theme-espresso.scss
index d165be8929..edda0a1489 100644
--- a/platform/commonUI/general/res/sass/themes/_theme-espresso.scss
+++ b/platform/commonUI/general/res/sass/themes/_theme-espresso.scss
@@ -19,4 +19,6 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* CONSTANTS */
\ No newline at end of file
+/* CONSTANTS */
+//$colorBodyBg: #fff;
+//$colorBodyFg: #666;
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/tree.scss b/platform/commonUI/general/res/sass/tree.scss
index 5a28f94641..881b105a7a 100644
--- a/platform/commonUI/general/res/sass/tree.scss
+++ b/platform/commonUI/general/res/sass/tree.scss
@@ -21,8 +21,6 @@
  *****************************************************************************/
 @import "compass";
 @import "compass/css3";
-@import "compass/css3/border-radius";
-@import "compass/css3/opacity";
 @import "compass/utilities";
 
 @import "constants";

From 7ffbc9ad2faae29b906e7a73b638b52839968898 Mon Sep 17 00:00:00 2001
From: Shivam Dave <sdave@ucsc.edu>
Date: Mon, 31 Aug 2015 13:37:22 -0700
Subject: [PATCH 183/266] [Remove Action] Check

Added check for traverseObject
context because prior to this,
was not checked.
---
 platform/commonUI/edit/src/actions/RemoveAction.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/commonUI/edit/src/actions/RemoveAction.js b/platform/commonUI/edit/src/actions/RemoveAction.js
index 2d8e224491..477a7e14a0 100644
--- a/platform/commonUI/edit/src/actions/RemoveAction.js
+++ b/platform/commonUI/edit/src/actions/RemoveAction.js
@@ -93,7 +93,7 @@ define(
                 var traverseObject = (navigationService).getNavigation();
                 
                 // Stop when object is not defined (above ROOT)
-                while (traverseObject) {
+                while (traverseObject && traverseObject.getCapability('context')) {
                     
                     // If object currently traversed to is object being removed
                     // navigate to parent of current object and then exit loop

From 2cbe68673237d6bd7ffadbb74dab425de4600b9f Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 31 Aug 2015 14:11:42 -0700
Subject: [PATCH 184/266] [Frontend] IN-PROGRESS Refactoring to cleanup SASS
 file structure

open #95
Moved styles from initialization.scss to user-environ/_layout;
forms.scss, items.scss, tree.scss includes moved into main.scss;

Removed forms.css, items.css, tree.css,
Removed initialization.scss, tree.scss
---
 platform/commonUI/general/bundle.json         |    8 -
 platform/commonUI/general/res/css/forms.css   |  581 -------
 platform/commonUI/general/res/css/items.css   |  452 -----
 platform/commonUI/general/res/css/main.css    |  120 --
 .../general/res/css/theme-espresso.css        | 1457 ++++++++++++-----
 platform/commonUI/general/res/css/tree.css    |  385 -----
 .../general/res/sass/_initialization.scss     |   20 -
 platform/commonUI/general/res/sass/_main.scss |   38 +-
 platform/commonUI/general/res/sass/forms.scss |    7 +-
 platform/commonUI/general/res/sass/tree.scss  |   31 -
 .../res/sass/user-environ/_layout.scss        |    9 +-
 11 files changed, 1086 insertions(+), 2022 deletions(-)
 delete mode 100644 platform/commonUI/general/res/css/forms.css
 delete mode 100644 platform/commonUI/general/res/css/items.css
 delete mode 100644 platform/commonUI/general/res/css/main.css
 delete mode 100644 platform/commonUI/general/res/css/tree.css
 delete mode 100644 platform/commonUI/general/res/sass/_initialization.scss
 delete mode 100644 platform/commonUI/general/res/sass/tree.scss

diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 2ab488ba12..9f79f39fa7 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -28,14 +28,6 @@
             {
                 "stylesheetUrl": "css/theme-espresso.css",
                 "priority": 1000
-            },
-            {
-                "stylesheetUrl": "css/items.css",
-                "priority": 901
-            },
-            {
-                "stylesheetUrl": "css/tree.css",
-                "priority": 900
             }
         ],
         "templates": [
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css
deleted file mode 100644
index 335ceafac1..0000000000
--- a/platform/commonUI/general/res/css/forms.css
+++ /dev/null
@@ -1,581 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/************************** FEATURES */
-/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** COLORS AND SHADING */
-/************************** RATIOS */
-/************************** LAYOUT */
-/************************** CONTROLS */
-/************************** PATHS */
-/************************** TIMINGS */
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/************************** STYLE */
-/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
-/************************** MOBILE TREE MENU DIMENSIONS */
-/************************** WINDOW DIMENSIONS FOR RWD */
-/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*********************************************** FORM ELEMENTS */
-/*
-@mixin invokeMenu($baseColor: $colorBodyFg) {
-	$c: $baseColor;
-	color: $c;
-	&:hover {
-		color: lighten($c, $ltGamma);
-	}
-}
-*/
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 22, ../sass/forms/_elems.scss */
-.section-header {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  background: rgba(255, 255, 255, 0.1);
-  color: #cccccc;
-  font-size: 0.8em;
-  padding: 5px 5px;
-  text-transform: uppercase; }
-
-/* line 35, ../sass/forms/_elems.scss */
-.form .form-section {
-  position: relative;
-  margin-bottom: 20px; }
-/* line 40, ../sass/forms/_elems.scss */
-.form .form-row {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  overflow: hidden;
-  *zoom: 1;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  margin-top: 5px;
-  padding: 5px 0;
-  position: relative; }
-  /* line 48, ../sass/forms/_elems.scss */
-  .form .form-row.first {
-    border-top: none; }
-  /* line 52, ../sass/forms/_elems.scss */
-  .form .form-row > .label,
-  .form .form-row > .controls {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    overflow: hidden;
-    *zoom: 1;
-    font-size: 0.8rem;
-    line-height: 22px;
-    min-height: 22px; }
-  /* line 61, ../sass/forms/_elems.scss */
-  .form .form-row > .label {
-    float: left;
-    min-width: 120px;
-    position: relative;
-    white-space: nowrap;
-    width: 30%; }
-  /* line 71, ../sass/forms/_elems.scss */
-  .form .form-row .value {
-    color: #cccccc; }
-  /* line 75, ../sass/forms/_elems.scss */
-  .form .form-row .controls {
-    float: left;
-    position: relative;
-    width: 69.9%; }
-    /* line 82, ../sass/forms/_elems.scss */
-    .form .form-row .controls .l-composite-control.l-checkbox {
-      display: inline-block;
-      line-height: 14px;
-      margin-right: 5px; }
-    /* line 91, ../sass/forms/_elems.scss */
-    .form .form-row .controls .l-med input[type="text"] {
-      width: 200px; }
-    /* line 95, ../sass/forms/_elems.scss */
-    .form .form-row .controls .l-small input[type="text"] {
-      width: 50px; }
-    /* line 99, ../sass/forms/_elems.scss */
-    .form .form-row .controls .l-numeric input[type="text"] {
-      text-align: right; }
-    /* line 103, ../sass/forms/_elems.scss */
-    .form .form-row .controls .select {
-      margin-right: 5px; }
-  /* line 108, ../sass/forms/_elems.scss */
-  .form .form-row .field-hints {
-    color: #666666; }
-  /* line 112, ../sass/forms/_elems.scss */
-  .form .form-row .selector-list {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 5px;
-    position: relative;
-    height: 150px;
-    overflow: auto; }
-    /* line 123, ../sass/forms/_elems.scss */
-    .form .form-row .selector-list .wrapper {
-      overflow-y: auto;
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      bottom: 5px;
-      left: 5px; }
-
-/* line 137, ../sass/forms/_elems.scss */
-label.form-control.checkbox input {
-  margin-right: 5px;
-  vertical-align: top; }
-
-/* line 143, ../sass/forms/_elems.scss */
-.hint,
-.s-hint {
-  font-size: 0.9em; }
-
-/* line 148, ../sass/forms/_elems.scss */
-.l-result {
-  display: inline-block;
-  min-width: 32px;
-  min-height: 32px;
-  position: relative;
-  vertical-align: top; }
-  /* line 155, ../sass/forms/_elems.scss */
-  .l-result div.s-hint {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    background: rgba(255, 153, 0, 0.8);
-    display: block;
-    color: #ffd699;
-    padding: 5px; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 22, ../sass/forms/_textarea.scss */
-.edit-main textarea {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  color: #cccccc;
-  outline: none;
-  padding: 5px;
-  position: absolute;
-  height: 100%;
-  width: 100%; }
-  /* line 33, ../sass/forms/_mixins.scss */
-  .edit-main textarea.error {
-    background: rgba(255, 0, 0, 0.5); }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 22, ../sass/forms/_text-input.scss */
-input[type="text"] {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  color: #cccccc;
-  outline: none;
-  padding: 0 3px; }
-  /* line 33, ../sass/forms/_mixins.scss */
-  input[type="text"].error {
-    background: rgba(255, 0, 0, 0.5); }
-  /* line 29, ../sass/forms/_text-input.scss */
-  input[type="text"].numeric {
-    text-align: right; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 22, ../sass/forms/_selects.scss */
-.form-control.select {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
-  background-image: -moz-linear-gradient(#525252, #454545);
-  background-image: -webkit-linear-gradient(#525252, #454545);
-  background-image: linear-gradient(#525252, #454545);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  border: none;
-  border-top: 1px solid #575757;
-  color: #999;
-  display: inline-block;
-  cursor: pointer;
-  display: inline-block;
-  margin: 0 0 2px 2px;
-  overflow: hidden;
-  position: relative; }
-  /* line 167, ../sass/_mixins.scss */
-  .form-control.select:not(.disabled):hover {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #636363), color-stop(100%, #575757));
-    background-image: -moz-linear-gradient(#636363, #575757);
-    background-image: -webkit-linear-gradient(#636363, #575757);
-    background-image: linear-gradient(#636363, #575757);
-    color: #bdbdbd; }
-    /* line 170, ../sass/_mixins.scss */
-    .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
-      color: #878787; }
-  /* line 175, ../sass/_mixins.scss */
-  .form-control.select.btn-menu .invoke-menu {
-    color: #757575; }
-  /* line 29, ../sass/forms/_selects.scss */
-  .form-control.select select {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    background: none;
-    color: #999;
-    border: none !important;
-    cursor: pointer;
-    padding: 4px 25px 2px 5px;
-    width: 120%; }
-    /* line 38, ../sass/forms/_selects.scss */
-    .form-control.select select option {
-      margin: 5px 0; }
-  /* line 42, ../sass/forms/_selects.scss */
-  .form-control.select:after {
-    color: #0099cc;
-    content: "v";
-    display: block;
-    font-family: 'symbolsfont';
-    pointer-events: none;
-    position: absolute;
-    right: 5px;
-    top: 0; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 23, ../sass/forms/_channel-selector.scss */
-.channel-selector .line {
-  margin-bottom: 5px;
-  min-height: 22px; }
-/* line 27, ../sass/forms/_channel-selector.scss */
-.channel-selector .treeview {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  color: #cccccc;
-  outline: none;
-  padding: 0 3px;
-  background: #3b3b3b;
-  border-bottom: 1px solid #4d4d4d;
-  min-height: 300px;
-  max-height: 400px;
-  overflow: auto;
-  padding: 5px; }
-  /* line 33, ../sass/forms/_mixins.scss */
-  .channel-selector .treeview.error {
-    background: rgba(255, 0, 0, 0.5); }
-/* line 36, ../sass/forms/_channel-selector.scss */
-.channel-selector .btns-add-remove {
-  margin-top: 150px; }
-  /* line 39, ../sass/forms/_channel-selector.scss */
-  .channel-selector .btns-add-remove .btn {
-    display: block;
-    font-size: 1.5em;
-    margin-bottom: 5px;
-    padding: 10px;
-    text-align: center; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 23, ../sass/forms/_datetime.scss */
-.complex.datetime span {
-  display: inline-block;
-  margin-right: 5px; }
-/* line 36, ../sass/forms/_datetime.scss */
-.complex.datetime .fields {
-  margin-top: 3px 0;
-  padding: 3px 0; }
-/* line 41, ../sass/forms/_datetime.scss */
-.complex.datetime .date {
-  width: 85px; }
-  /* line 44, ../sass/forms/_datetime.scss */
-  .complex.datetime .date input {
-    width: 80px; }
-/* line 50, ../sass/forms/_datetime.scss */
-.complex.datetime .time.sm {
-  width: 45px; }
-  /* line 53, ../sass/forms/_datetime.scss */
-  .complex.datetime .time.sm input {
-    width: 40px; }
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css
deleted file mode 100644
index 0c29bd9ebb..0000000000
--- a/platform/commonUI/general/res/css/items.css
+++ /dev/null
@@ -1,452 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/************************** FEATURES */
-/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** COLORS AND SHADING */
-/************************** RATIOS */
-/************************** LAYOUT */
-/************************** CONTROLS */
-/************************** PATHS */
-/************************** TIMINGS */
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/************************** STYLE */
-/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
-/************************** MOBILE TREE MENU DIMENSIONS */
-/************************** WINDOW DIMENSIONS FOR RWD */
-/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*********************************************** FORM ELEMENTS */
-/*
-@mixin invokeMenu($baseColor: $colorBodyFg) {
-	$c: $baseColor;
-	color: $c;
-	&:hover {
-		color: lighten($c, $ltGamma);
-	}
-}
-*/
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 22, ../sass/items/_item.scss */
-.items-holder {
-  overflow: hidden;
-  *zoom: 1;
-  overflow-y: auto; }
-  /* line 25, ../sass/items/_item.scss */
-  .items-holder .contents {
-    top: 0; }
-  /* line 29, ../sass/items/_item.scss */
-  .items-holder .item.grid-item {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5e5e5e), color-stop(100%, #525252));
-    background-image: -moz-linear-gradient(#5e5e5e, #525252);
-    background-image: -webkit-linear-gradient(#5e5e5e, #525252);
-    background-image: linear-gradient(#5e5e5e, #525252);
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border: none;
-    border-top: 1px solid #636363;
-    color: #999;
-    display: inline-block;
-    box-sizing: border-box;
-    cursor: pointer;
-    float: left;
-    height: 200px;
-    width: 200px;
-    margin-bottom: 3px;
-    margin-right: 3px;
-    position: relative; }
-    /* line 167, ../sass/_mixins.scss */
-    .items-holder .item.grid-item:not(.disabled):hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #707070), color-stop(100%, #636363));
-      background-image: -moz-linear-gradient(#707070, #636363);
-      background-image: -webkit-linear-gradient(#707070, #636363);
-      background-image: linear-gradient(#707070, #636363);
-      color: #bdbdbd; }
-      /* line 170, ../sass/_mixins.scss */
-      .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
-        color: #949494; }
-    /* line 175, ../sass/_mixins.scss */
-    .items-holder .item.grid-item.btn-menu .invoke-menu {
-      color: #828282; }
-    /* line 46, ../sass/items/_item.scss */
-    .items-holder .item.grid-item:hover .item-main .item-type {
-      color: deepskyblue !important; }
-      /* line 48, ../sass/items/_item.scss */
-      .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
-        color: #49dedb; }
-    /* line 52, ../sass/items/_item.scss */
-    .items-holder .item.grid-item:hover .item-main .item-open {
-      opacity: 1; }
-    /* line 57, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .contents {
-      top: 10px;
-      right: 10px;
-      bottom: 10px;
-      left: 10px; }
-    /* line 63, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .bar.top-bar {
-      bottom: auto;
-      height: 20px;
-      line-height: 20px;
-      text-align: right;
-      z-index: 5; }
-      /* line 69, ../sass/items/_item.scss */
-      .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
-        width: auto; }
-        /* line 71, ../sass/items/_item.scss */
-        .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
-          margin-left: 3px; }
-          /* line 73, ../sass/items/_item.scss */
-          .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
-            color: #49dedb; }
-    /* line 79, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .bar.bottom-bar {
-      top: auto;
-      line-height: 110%; }
-    /* line 85, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .item-main {
-      line-height: 160px;
-      z-index: 1; }
-      /* line 91, ../sass/items/_item.scss */
-      .items-holder .item.grid-item .item-main .item-type {
-        overflow: false;
-        position: absolute;
-        top: 40px;
-        right: 40px;
-        bottom: 40px;
-        left: 40px;
-        width: auto;
-        height: auto;
-        text-align: center;
-        font-size: 96.9px;
-        line-height: 102px;
-        bottom: auto;
-        height: 102px;
-        top: 30px; }
-        /* line 103, ../sass/items/_item.scss */
-        .items-holder .item.grid-item .item-main .item-type .l-icon-link {
-          color: #49dedb;
-          height: auto;
-          line-height: 100%;
-          position: absolute;
-          font-size: 0.3em;
-          left: 0px;
-          bottom: 10px;
-          z-index: 2; }
-      /* line 116, ../sass/items/_item.scss */
-      .items-holder .item.grid-item .item-main .item-open {
-        -moz-transition-property: "opacity";
-        -o-transition-property: "opacity";
-        -webkit-transition-property: "opacity";
-        transition-property: "opacity";
-        -moz-transition-duration: 200ms;
-        -o-transition-duration: 200ms;
-        -webkit-transition-duration: 200ms;
-        transition-duration: 200ms;
-        -moz-transition-timing-function: ease-in-out;
-        -o-transition-timing-function: ease-in-out;
-        -webkit-transition-timing-function: ease-in-out;
-        transition-timing-function: ease-in-out;
-        opacity: 0;
-        font-size: 3em;
-        left: auto;
-        width: 50px;
-        pointer-events: none;
-        text-align: right; }
-    /* line 128, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .title {
-      text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      color: #cccccc; }
-    /* line 133, ../sass/items/_item.scss */
-    .items-holder .item.grid-item .details {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      font-size: 0.8em; }
-    /* line 137, ../sass/items/_item.scss */
-    .items-holder .item.grid-item.selected {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0ac2ff), color-stop(100%, #00b4f0));
-      background-image: -moz-linear-gradient(#0ac2ff, #00b4f0);
-      background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
-      background-image: linear-gradient(#0ac2ff, #00b4f0);
-      -moz-border-radius: 3px;
-      -webkit-border-radius: 3px;
-      border-radius: 3px;
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      border: none;
-      border-top: 1px solid #14c4ff;
-      color: #999;
-      display: inline-block;
-      color: #80dfff; }
-      /* line 167, ../sass/_mixins.scss */
-      .items-holder .item.grid-item.selected:not(.disabled):hover {
-        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-        background-size: 100%;
-        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ecbff), color-stop(100%, #14c4ff));
-        background-image: -moz-linear-gradient(#2ecbff, #14c4ff);
-        background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
-        background-image: linear-gradient(#2ecbff, #14c4ff);
-        color: #bdbdbd; }
-        /* line 170, ../sass/_mixins.scss */
-        .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
-          color: #75ddff; }
-      /* line 175, ../sass/_mixins.scss */
-      .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
-        color: #52d4ff; }
-      /* line 142, ../sass/items/_item.scss */
-      .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
-        color: #80dfff; }
-      /* line 143, ../sass/items/_item.scss */
-      .items-holder .item.grid-item.selected .item-main .item-open {
-        color: #80dfff; }
-      /* line 144, ../sass/items/_item.scss */
-      .items-holder .item.grid-item.selected .title {
-        color: white; }
-      /* line 146, ../sass/items/_item.scss */
-      .items-holder .item.grid-item.selected:hover .item-main .item-type {
-        color: white !important; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 29, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item {
-    width: 100%; }
-    /* line 33, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item > .contents {
-      top: 0px;
-      right: 10px;
-      bottom: 0px;
-      left: 10px; }
-    /* line 37, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .bar.top-bar {
-      bottom: 0 !important;
-      left: auto !important;
-      right: 20px !important;
-      width: 40px !important;
-      height: auto !important;
-      text-align: right; }
-    /* line 44, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .bar.bottom-bar {
-      left: 40px;
-      right: 60px; }
-    /* line 52, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .item-main .item-type {
-      font-size: 30px;
-      right: auto;
-      bottom: auto;
-      left: 0;
-      line-height: 100%;
-      text-align: left;
-      width: 30px; }
-      /* line 61, ../sass/mobile/_item.scss */
-      .items-holder .item.grid-item .item-main .item-type .l-icon-link {
-        bottom: 0; }
-    /* line 65, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .item-main .item-open {
-      display: block;
-      opacity: 1;
-      font-size: 1em;
-      width: auto; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 29, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item {
-    height: 50px; }
-    /* line 78, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .bar.top-bar {
-      line-height: 50px !important; }
-    /* line 82, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .bar.bottom-bar {
-      top: 7px;
-      bottom: auto;
-      height: 35px; }
-    /* line 87, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .item-main .item-type {
-      top: 10px;
-      bottom: auto;
-      height: 30px; }
-    /* line 90, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .item-main .item-open {
-      line-height: 50px; } }
-@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 29, ../sass/mobile/_item.scss */
-  .items-holder .item.grid-item {
-    height: 66px; }
-    /* line 100, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .bar.top-bar {
-      line-height: 66px !important; }
-    /* line 104, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .bar.bottom-bar {
-      top: 15px;
-      bottom: auto;
-      height: 35px; }
-    /* line 109, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .item-main .item-type {
-      top: 18px;
-      bottom: auto;
-      height: 30px; }
-    /* line 112, ../sass/mobile/_item.scss */
-    .items-holder .item.grid-item .item-main .item-open {
-      line-height: 66px; } }
diff --git a/platform/commonUI/general/res/css/main.css b/platform/commonUI/general/res/css/main.css
deleted file mode 100644
index 6bc14639ac..0000000000
--- a/platform/commonUI/general/res/css/main.css
+++ /dev/null
@@ -1,120 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*
-Syntax error: Undefined variable: "$colorBodyBg".
-        on line 66 of /Users/iMac/dev/nasa/wtd-dev/platform/sass/_effects.scss, in `boxOutline'
-        from line 7 of /Users/iMac/dev/nasa/wtd-dev/platform/sass/_effects.scss
-        from line 10 of /Users/iMac/dev/nasa/wtd-dev/platform/sass/main.scss
-
-Backtrace:
-/Users/iMac/dev/nasa/wtd-dev/platform/sass/_effects.scss:66:in `boxOutline'
-/Users/iMac/dev/nasa/wtd-dev/platform/sass/_effects.scss:7
-/Users/iMac/dev/nasa/wtd-dev/platform/sass/main.scss:10
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/script/variable.rb:49:in `_perform'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/script/node.rb:40:in `perform'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/script/funcall.rb:93:in `_perform'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/script/funcall.rb:93:in `map'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/script/funcall.rb:93:in `_perform'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/script/node.rb:40:in `perform'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:56:in `perform_arguments'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:50:in `zip'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:50:in `perform_arguments'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:261:in `visit_mixin'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `send'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:98:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:53:in `map'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:107:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:119:in `with_environment'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:106:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:318:in `visit_rule'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `send'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:98:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:225:in `visit_import'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:225:in `map'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:225:in `visit_import'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `send'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:98:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:53:in `map'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:53:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:107:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:119:in `with_environment'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:106:in `visit_children'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:126:in `visit_root'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `send'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/base.rb:37:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:98:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:7:in `send'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/visitors/perform.rb:7:in `visit'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/tree/root_node.rb:20:in `render'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/engine.rb:315:in `_render'
-/Library/Ruby/Gems/1.8/gems/sass-3.2.5/lib/sass/../sass/engine.rb:262:in `render'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:140:in `compile'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:126:in `timed'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:139:in `compile'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/logger.rb:45:in `red'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:138:in `compile'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:118:in `compile_if_required'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:103:in `run'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:101:in `each'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:101:in `run'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:126:in `timed'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/compiler.rb:100:in `run'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/commands/watch_project.rb:147:in `recompile'
-/Library/Ruby/Site/1.8/rubygems/custom_require.rb:36:in `to_proc'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/path.rb:73:in `call'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/path.rb:73:in `run_callback'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/path.rb:55:in `callback_action'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/path.rb:35:in `update'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/state/directory.rb:39:in `modified'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/state/directory.rb:37:in `each'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/state/directory.rb:37:in `modified'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/state/directory.rb:18:in `refresh'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:17:in `run'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:17:in `each'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:17:in `run'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:15:in `loop'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/backends/polling.rb:15:in `run'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm/monitor.rb:26:in `run'
-/Library/Ruby/Gems/1.8/gems/fssm-0.2.9/lib/fssm.rb:70:in `monitor'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/commands/watch_project.rb:87:in `perform'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/commands/base.rb:18:in `execute'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/commands/project_base.rb:19:in `execute'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/exec/sub_command_ui.rb:43:in `perform!'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/lib/compass/exec/sub_command_ui.rb:15:in `run!'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/bin/compass:30
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/bin/compass:44:in `call'
-/Library/Ruby/Gems/1.8/gems/compass-0.12.2/bin/compass:44
-/usr/bin/compass:23:in `load'
-/usr/bin/compass:23
-*/
-body:before {
-  white-space: pre;
-  font-family: monospace;
-  content: "Syntax error: Undefined variable: \"$colorBodyBg\".\A         on line 66 of /Users/iMac/dev/nasa/wtd-dev/platform/sass/_effects.scss, in `boxOutline'\A         from line 7 of /Users/iMac/dev/nasa/wtd-dev/platform/sass/_effects.scss\A         from line 10 of /Users/iMac/dev/nasa/wtd-dev/platform/sass/main.scss"; }
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 38c9695ec6..2d329797db 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -249,6 +249,27 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
 /* line 22, ../sass/_effects.scss */
 .disabled,
 a.disabled {
@@ -676,64 +697,67 @@ mct-container {
   max-width: 800px;
   width: 25%; }
 
-/* line 221, ../sass/user-environ/_layout.scss */
-.edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom {
-  min-height: 50px;
-  max-height: 80%; }
+/* line 218, ../sass/user-environ/_layout.scss */
+.edit-mode .split-layout .split-pane-component.pane.right {
+  width: 15%; }
+  /* line 220, ../sass/user-environ/_layout.scss */
+  .edit-mode .split-layout .split-pane-component.pane.right .pane.bottom {
+    min-height: 50px;
+    height: 30%; }
 
-/* line 229, ../sass/user-environ/_layout.scss */
+/* line 230, ../sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 232, ../sass/user-environ/_layout.scss */
+  /* line 233, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 235, ../sass/user-environ/_layout.scss */
+    /* line 236, ../sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 240, ../sass/user-environ/_layout.scss */
+  /* line 241, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .search-holder {
     top: 34px; }
-  /* line 243, ../sass/user-environ/_layout.scss */
+  /* line 244, ../sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 64px; }
-  /* line 250, ../sass/user-environ/_layout.scss */
+  /* line 251, ../sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
   .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 261, ../sass/user-environ/_layout.scss */
+  /* line 262, ../sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 265, ../sass/user-environ/_layout.scss */
+  /* line 266, ../sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 273, ../sass/user-environ/_layout.scss */
+/* line 274, ../sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 276, ../sass/user-environ/_layout.scss */
+  /* line 277, ../sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 283, ../sass/user-environ/_layout.scss */
+/* line 284, ../sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 286, ../sass/user-environ/_layout.scss */
+  /* line 287, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 290, ../sass/user-environ/_layout.scss */
+  /* line 291, ../sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 292, ../sass/user-environ/_layout.scss */
+    /* line 293, ../sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 301, ../sass/user-environ/_layout.scss */
+/* line 302, ../sass/user-environ/_layout.scss */
 .object-browse-bar .btn,
 .object-browse-bar .t-btn,
 .object-browse-bar .view-switcher,
@@ -747,12 +771,12 @@ mct-container {
   line-height: 200%;
   vertical-align: top; }
 
-/* line 318, ../sass/user-environ/_layout.scss */
+/* line 319, ../sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 323, ../sass/user-environ/_layout.scss */
+/* line 324, ../sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -768,27 +792,27 @@ mct-container {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 331, ../sass/user-environ/_layout.scss */
+  /* line 332, ../sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 333, ../sass/user-environ/_layout.scss */
+    /* line 334, ../sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/* line 341, ../sass/user-environ/_layout.scss */
+/* line 342, ../sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
   display: -webkit-flex;
   flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap; }
-  /* line 344, ../sass/user-environ/_layout.scss */
+  /* line 345, ../sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
     -webkit-flex: 1 1 0; }
 
-/* line 350, ../sass/user-environ/_layout.scss */
+/* line 351, ../sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -1668,6 +1692,7 @@ table {
   table.t-event-messages .td {
     min-width: 150px; }
 
+/********************************* CONTROLS */
 /* line 1, ../sass/controls/_breadcrumb.scss */
 .l-breadcrumb {
   font-size: 0.7rem;
@@ -3072,40 +3097,6 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 26, ../sass/mobile/controls/_menus.scss */
-  .menu-element .super-menu {
-    width: 250px;
-    height: 250px; }
-    /* line 32, ../sass/mobile/controls/_menus.scss */
-    .menu-element .super-menu .pane.left {
-      border-right: none;
-      padding-right: 0;
-      width: 100%; }
-    /* line 37, ../sass/mobile/controls/_menus.scss */
-    .menu-element .super-menu .pane.right {
-      display: none; } }
 /* line 1, ../sass/controls/_time-controller.scss */
 .l-time-controller {
   position: relative;
@@ -3203,6 +3194,40 @@ label.checkbox.custom {
       .l-time-controller .knob.knob-r .range-value {
         left: 14px; }
 
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 26, ../sass/mobile/controls/_menus.scss */
+  .menu-element .super-menu {
+    width: 250px;
+    height: 250px; }
+    /* line 32, ../sass/mobile/controls/_menus.scss */
+    .menu-element .super-menu .pane.left {
+      border-right: none;
+      padding-right: 0;
+      width: 100%; }
+    /* line 37, ../sass/mobile/controls/_menus.scss */
+    .menu-element .super-menu .pane.right {
+      display: none; } }
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -3322,215 +3347,7 @@ label.checkbox.custom {
     .edit-main .frame.child-frame.panel:hover .edit-corner:hover {
       background-color: #0099cc; }
 
-/* line 1, ../sass/features/_imagery.scss */
-.l-image-main-wrapper,
-.l-image-main,
-.l-image-main-controlbar,
-.l-image-thumbs-wrapper {
-  overflow: false;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: auto;
-  height: auto; }
-
-/*************************************** MAIN LAYOUT */
-/* line 9, ../sass/features/_imagery.scss */
-.l-image-main-wrapper {
-  min-height: 100px;
-  min-width: 150px; }
-  /* line 16, ../sass/features/_imagery.scss */
-  .l-image-main-wrapper .l-image-main {
-    background-color: rgba(255, 255, 255, 0.1);
-    bottom: 27px; }
-  /* line 20, ../sass/features/_imagery.scss */
-  .l-image-main-wrapper .l-image-main-controlbar {
-    top: auto;
-    height: 22px; }
-
-/* line 26, ../sass/features/_imagery.scss */
-.l-image-thumbs-wrapper {
-  top: auto;
-  height: 168px; }
-
-/* line 32, ../sass/features/_imagery.scss */
-.l-date,
-.l-time,
-.l-timezone {
-  display: inline-block; }
-
-/*************************************** MAIN IMAGE */
-/* line 40, ../sass/features/_imagery.scss */
-.l-image-main,
-.l-image-thumb-item .l-thumb {
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat; }
-
-/* line 51, ../sass/features/_imagery.scss */
-.l-image-main-controlbar {
-  font-size: 0.8em;
-  line-height: 22px; }
-  /* line 55, ../sass/features/_imagery.scss */
-  .l-image-main-controlbar .left, .l-image-main-controlbar .right {
-    direction: rtl;
-    overflow: hidden; }
-  /* line 59, ../sass/features/_imagery.scss */
-  .l-image-main-controlbar .left {
-    text-align: left; }
-  /* line 63, ../sass/features/_imagery.scss */
-  .l-image-main-controlbar .right {
-    z-index: 2; }
-  /* line 67, ../sass/features/_imagery.scss */
-  .l-image-main-controlbar .l-date,
-  .l-image-main-controlbar .l-time {
-    color: #fff; }
-  /* line 71, ../sass/features/_imagery.scss */
-  .l-image-main-controlbar .l-mag {
-    direction: ltr;
-    display: inline-block; }
-    /* line 75, ../sass/features/_imagery.scss */
-    .l-image-main-controlbar .l-mag:before {
-      content: "\000049"; }
-  /* line 79, ../sass/features/_imagery.scss */
-  .l-image-main-controlbar .s-mag {
-    color: #666666; }
-  /* line 82, ../sass/features/_imagery.scss */
-  .l-image-main-controlbar .l-btn.show-thumbs {
-    display: none; }
-
-/* line 87, ../sass/features/_imagery.scss */
-.s-image-main {
-  border: 1px solid transparent; }
-  /* line 89, ../sass/features/_imagery.scss */
-  .s-image-main.paused {
-    border-color: #c56f01; }
-
-/*************************************** THUMBS */
-/* line 96, ../sass/features/_imagery.scss */
-.l-image-thumbs-wrapper {
-  direction: rtl;
-  overflow-x: auto;
-  overflow-y: hidden;
-  padding-bottom: 5px;
-  white-space: nowrap;
-  z-index: 70; }
-
-/* line 106, ../sass/features/_imagery.scss */
-.l-image-thumb-item {
-  -moz-transition: background-color 0.25s;
-  -o-transition: background-color 0.25s;
-  -webkit-transition: background-color 0.25s;
-  transition: background-color 0.25s;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  padding: 1px;
-  position: relative;
-  cursor: pointer;
-  direction: ltr;
-  display: inline-block;
-  font-size: 0.8em;
-  margin-left: 3px;
-  text-align: left;
-  width: 122px;
-  white-space: normal; }
-  /* line 111, ../sass/features/_imagery.scss */
-  .l-image-thumb-item .l-thumb,
-  .l-image-thumb-item .l-date,
-  .l-image-thumb-item .l-time {
-    display: inline-block; }
-  /* line 116, ../sass/features/_imagery.scss */
-  .l-image-thumb-item .l-date,
-  .l-image-thumb-item .l-time {
-    padding: 2px 3px; }
-  /* line 128, ../sass/features/_imagery.scss */
-  .l-image-thumb-item:hover {
-    background: rgba(255, 255, 255, 0.2); }
-    /* line 130, ../sass/features/_imagery.scss */
-    .l-image-thumb-item:hover .l-date,
-    .l-image-thumb-item:hover .l-time {
-      color: #fff; }
-  /* line 135, ../sass/features/_imagery.scss */
-  .l-image-thumb-item.selected {
-    background: #005177; }
-    /* line 137, ../sass/features/_imagery.scss */
-    .l-image-thumb-item.selected .l-date,
-    .l-image-thumb-item.selected .l-time {
-      color: #fff; }
-  /* line 142, ../sass/features/_imagery.scss */
-  .l-image-thumb-item .l-thumb {
-    background-color: rgba(255, 255, 255, 0.1);
-    height: 120px;
-    width: 120px;
-    margin-top: 0; }
-
-/*************************************** WHEN IN FRAME */
-/* line 152, ../sass/features/_imagery.scss */
-.frame .t-imagery .l-image-main-wrapper {
-  bottom: 0; }
-  /* line 154, ../sass/features/_imagery.scss */
-  .frame .t-imagery .l-image-main-wrapper .l-image-main-controlbar {
-    font-size: 0.7em; }
-/* line 163, ../sass/features/_imagery.scss */
-.frame .t-imagery .l-image-thumbs-wrapper {
-  display: none; }
-
-/* line 5, ../sass/features/_time-display.scss */
-.l-time-display:hover .l-btn.control {
-  opacity: 1; }
-/* line 9, ../sass/features/_time-display.scss */
-.l-time-display .l-elem-wrapper {
-  position: relative; }
-/* line 12, ../sass/features/_time-display.scss */
-.l-time-display .l-elem {
-  display: inline-block; }
-/* line 17, ../sass/features/_time-display.scss */
-.l-time-display.l-timer .l-elem.l-value {
-  -moz-transition-property: left;
-  -o-transition-property: left;
-  -webkit-transition-property: left;
-  transition-property: left;
-  -moz-transition-duration: 200ms;
-  -o-transition-duration: 200ms;
-  -webkit-transition-duration: 200ms;
-  transition-duration: 200ms;
-  -moz-transition-timing-function: ease-in-out;
-  -o-transition-timing-function: ease-in-out;
-  -webkit-transition-timing-function: ease-in-out;
-  transition-timing-function: ease-in-out;
-  position: absolute;
-  left: 0;
-  z-index: 1; }
-  /* line 22, ../sass/features/_time-display.scss */
-  .l-time-display.l-timer .l-elem.l-value .ui-symbol.direction {
-    font-size: 0.8em; }
-/* line 26, ../sass/features/_time-display.scss */
-.l-time-display.l-timer:hover .l-elem.l-value {
-  left: 20px; }
-/* line 33, ../sass/features/_time-display.scss */
-.l-time-display .l-elem .value.active, .l-time-display .l-elem.value.active {
-  color: #fff; }
-/* line 38, ../sass/features/_time-display.scss */
-.l-time-display .l-btn.control {
-  -moz-transition-property: visibility, opacity, background-color, border-color;
-  -o-transition-property: visibility, opacity, background-color, border-color;
-  -webkit-transition-property: visibility, opacity, background-color, border-color;
-  transition-property: visibility, opacity, background-color, border-color;
-  -moz-transition-duration: 200ms;
-  -o-transition-duration: 200ms;
-  -webkit-transition-duration: 200ms;
-  transition-duration: 200ms;
-  -moz-transition-timing-function: ease-in-out;
-  -o-transition-timing-function: ease-in-out;
-  -webkit-transition-timing-function: ease-in-out;
-  transition-timing-function: ease-in-out;
-  opacity: 0;
-  font-size: 0.65em;
-  vertical-align: top; }
-
+/********************************* FORMS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -3697,41 +3514,30 @@ label.form-control.checkbox input {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 23, ../sass/forms/_validation.scss */
-.validates > .label {
-  padding-right: 25px; }
-  /* line 26, ../sass/forms/_validation.scss */
-  .validates > .label::after {
-    /*            display: block;
-                position: absolute;
-                top: 0;
-                right: $reqSymbolM;
-                bottom: 0;
-                left: auto;
-                height: auto;
-                width: $reqSymbolW;*/
-    font-family: symbolsfont;
-    font-size: 0.7em; }
-/* line 44, ../sass/forms/_validation.scss */
-.validates.invalid > .label::after, .validates.invalid.req > .label::after {
-  color: #ff9900;
-  content: "x"; }
-/* line 51, ../sass/forms/_validation.scss */
-.validates.valid > .label::after, .validates.valid.req > .label::after {
-  color: #33cc33;
-  content: "2"; }
-/* line 57, ../sass/forms/_validation.scss */
-.validates.req > .label::after {
-  color: #ffc700;
-  content: "*"; }
-
-/* line 63, ../sass/forms/_validation.scss */
-.req {
-  font-size: 0.7em; }
-
-/* line 66, ../sass/forms/_validation.scss */
-span.req {
-  color: #ffc700; }
+/* line 22, ../sass/forms/_textarea.scss */
+.edit-main textarea {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: #cccccc;
+  outline: none;
+  padding: 5px;
+  position: absolute;
+  height: 100%;
+  width: 100%; }
+  /* line 33, ../sass/forms/_mixins.scss */
+  .edit-main textarea.error {
+    background: rgba(255, 0, 0, 0.5); }
 
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
@@ -3772,7 +3578,7 @@ input[type="text"] {
   color: #cccccc;
   outline: none;
   padding: 0 3px; }
-  /* line 280, ../sass/_mixins.scss */
+  /* line 33, ../sass/forms/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
   /* line 29, ../sass/forms/_text-input.scss */
@@ -3917,7 +3723,7 @@ input[type="text"] {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 280, ../sass/_mixins.scss */
+  /* line 33, ../sass/forms/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../sass/forms/_channel-selector.scss */
@@ -3973,6 +3779,63 @@ input[type="text"] {
   .complex.datetime .time.sm input {
     width: 40px; }
 
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../sass/forms/_validation.scss */
+.validates > .label {
+  padding-right: 25px; }
+  /* line 26, ../sass/forms/_validation.scss */
+  .validates > .label::after {
+    /*            display: block;
+                position: absolute;
+                top: 0;
+                right: $reqSymbolM;
+                bottom: 0;
+                left: auto;
+                height: auto;
+                width: $reqSymbolW;*/
+    font-family: symbolsfont;
+    font-size: 0.7em; }
+/* line 44, ../sass/forms/_validation.scss */
+.validates.invalid > .label::after, .validates.invalid.req > .label::after {
+  color: #ff9900;
+  content: "x"; }
+/* line 51, ../sass/forms/_validation.scss */
+.validates.valid > .label::after, .validates.valid.req > .label::after {
+  color: #33cc33;
+  content: "2"; }
+/* line 57, ../sass/forms/_validation.scss */
+.validates.req > .label::after {
+  color: #ffc700;
+  content: "*"; }
+
+/* line 63, ../sass/forms/_validation.scss */
+.req {
+  font-size: 0.7em; }
+
+/* line 66, ../sass/forms/_validation.scss */
+span.req {
+  color: #ffc700; }
+
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -4017,7 +3880,7 @@ input[type="text"] {
   padding: 0 3px;
   background: #3b3b3b;
   border-bottom: 1px solid #4d4d4d; }
-  /* line 280, ../sass/_mixins.scss */
+  /* line 33, ../sass/forms/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -4735,6 +4598,262 @@ input[type="text"] {
     display: block;
     float: none;
     width: 100%; } }
+/********************************* USER ENVIRON */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../sass/tree/_tree.scss */
+ul.tree {
+  margin: 0;
+  padding: 0; }
+  /* line 314, ../sass/_mixins.scss */
+  ul.tree li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0; }
+  /* line 25, ../sass/tree/_tree.scss */
+  ul.tree li {
+    display: block;
+    position: relative; }
+  /* line 29, ../sass/tree/_tree.scss */
+  ul.tree ul.tree {
+    margin-left: 15px; }
+
+/* line 34, ../sass/tree/_tree.scss */
+.tree-item,
+.search-result-item {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  -moz-transition: background-color 0.25s;
+  -o-transition: background-color 0.25s;
+  -webkit-transition: background-color 0.25s;
+  transition: background-color 0.25s;
+  display: block;
+  font-size: 0.8rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  margin-bottom: 3px;
+  position: relative; }
+  /* line 47, ../sass/tree/_tree.scss */
+  .tree-item .view-control,
+  .search-result-item .view-control {
+    display: inline-block;
+    margin-left: 5px;
+    font-size: 0.75em;
+    width: 10px; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 55, ../sass/tree/_tree.scss */
+      .tree-item .view-control:hover,
+      .search-result-item .view-control:hover {
+        color: #ffc700; } }
+  /* line 61, ../sass/tree/_tree.scss */
+  .tree-item .label,
+  .search-result-item .label {
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    width: auto;
+    height: auto;
+    line-height: 1.5rem; }
+    /* line 69, ../sass/tree/_tree.scss */
+    .tree-item .label .type-icon,
+    .search-result-item .label .type-icon {
+      text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
+      font-size: 16px;
+      color: #0099cc;
+      left: 5px;
+      position: absolute;
+      top: 4px;
+      bottom: auto;
+      height: 16px;
+      line-height: 100%;
+      right: auto;
+      width: 16px; }
+      /* line 82, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-alert {
+        text-shadow: black 0 1px 2px;
+        position: absolute;
+        z-index: 2; }
+      /* line 88, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-item .label .type-icon .icon.l-icon-alert {
+        color: #ff3c00;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        top: 1px;
+        right: -2px; }
+      /* line 94, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-link {
+        color: #49dedb;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        left: -3px;
+        bottom: 0px; }
+    /* line 102, ../sass/tree/_tree.scss */
+    .tree-item .label .title-label,
+    .search-result-item .label .title-label {
+      overflow: hidden;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      width: auto;
+      height: auto;
+      display: block;
+      left: 30px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; }
+  /* line 113, ../sass/tree/_tree.scss */
+  .tree-item.loading,
+  .search-result-item.loading {
+    pointer-events: none; }
+    /* line 115, ../sass/tree/_tree.scss */
+    .tree-item.loading .label,
+    .search-result-item.loading .label {
+      opacity: 0.5; }
+      /* line 117, ../sass/tree/_tree.scss */
+      .tree-item.loading .label .title-label,
+      .search-result-item.loading .label .title-label {
+        font-style: italic; }
+    /* line 121, ../sass/tree/_tree.scss */
+    .tree-item.loading .wait-spinner,
+    .search-result-item.loading .wait-spinner {
+      margin-left: 14px; }
+  /* line 126, ../sass/tree/_tree.scss */
+  .tree-item.selected,
+  .search-result-item.selected {
+    background: #005177;
+    color: #fff; }
+    /* line 130, ../sass/tree/_tree.scss */
+    .tree-item.selected .view-control,
+    .search-result-item.selected .view-control {
+      color: #0099cc; }
+    /* line 133, ../sass/tree/_tree.scss */
+    .tree-item.selected .label .type-icon,
+    .search-result-item.selected .label .type-icon {
+      color: #fff; }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 141, ../sass/tree/_tree.scss */
+    .tree-item:not(.selected):hover,
+    .search-result-item:not(.selected):hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #cccccc; }
+      /* line 144, ../sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .context-trigger,
+      .search-result-item:not(.selected):hover .context-trigger {
+        display: block; }
+      /* line 147, ../sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .icon,
+      .search-result-item:not(.selected):hover .icon {
+        color: #33ccff; } }
+  /* line 154, ../sass/tree/_tree.scss */
+  .tree-item:not(.loading),
+  .search-result-item:not(.loading) {
+    cursor: pointer; }
+  /* line 158, ../sass/tree/_tree.scss */
+  .tree-item .context-trigger,
+  .search-result-item .context-trigger {
+    top: -1px;
+    position: absolute;
+    right: 3px; }
+    /* line 164, ../sass/tree/_tree.scss */
+    .tree-item .context-trigger .invoke-menu,
+    .search-result-item .context-trigger .invoke-menu {
+      font-size: 0.75em;
+      height: 0.9rem;
+      line-height: 0.9rem; }
+
+/* line 173, ../sass/tree/_tree.scss */
+.tree-item .label {
+  left: 15px; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 27, ../sass/mobile/_tree.scss */
+  ul.tree ul.tree {
+    margin-left: 20px; }
+
+  /* line 31, ../sass/mobile/_tree.scss */
+  .tree-item,
+  .search-result-item {
+    height: 35px;
+    line-height: 35px;
+    margin-bottom: 0px; }
+    /* line 36, ../sass/mobile/_tree.scss */
+    .tree-item .view-control,
+    .search-result-item .view-control {
+      position: absolute;
+      font-size: 1.1em;
+      right: 0px;
+      width: 30px;
+      text-align: center; }
+    /* line 45, ../sass/mobile/_tree.scss */
+    .tree-item .label,
+    .search-result-item .label {
+      left: 0;
+      right: 35px;
+      line-height: 35px; }
+      /* line 50, ../sass/mobile/_tree.scss */
+      .tree-item .label .type-icon,
+      .search-result-item .label .type-icon {
+        top: 9px;
+        bottom: auto;
+        height: 16px; } }
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -4962,6 +5081,7 @@ input[type="text"] {
   .tool-bar .input-labeled label {
     font-size: 11.25px; }
 
+/********************************* HELPERS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -5419,6 +5539,18 @@ input[type="text"] {
   top: 0;
   left: 0; }
 
+/* Styles for messages */
+/* line 4, ../sass/_messages.scss */
+.message.block {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  padding: 10px; }
+/* line 8, ../sass/_messages.scss */
+.message.error {
+  background-color: rgba(255, 60, 0, 0.3);
+  color: #ff8a66; }
+
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -5452,6 +5584,416 @@ input[type="text"] {
   .properties .s-row .s-value {
     color: #fff; }
 
+/********************************* VIEWS */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* Styles for the iframe EmbeddedPageController element */
+/* line 25, ../sass/_iframe.scss */
+.l-iframe iframe {
+  display: block;
+  height: 100%;
+  width: 100%; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/******************************** BROWSE */
+/* line 27, ../sass/_hide-non-functional.scss */
+.browse-mode .browse.top-bar {
+  display: none; }
+/* line 32, ../sass/_hide-non-functional.scss */
+.browse-mode .browse-area.holder {
+  top: 10px; }
+
+/* Styles for sub-dividing views generically */
+/* line 3, ../sass/_views.scss */
+.l-view-section {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  font-size: 0.8rem; }
+  /* line 6, ../sass/_views.scss */
+  .l-view-section h2 {
+    color: #fff;
+    margin-bottom: 5px; }
+  /* line 10, ../sass/_views.scss */
+  .l-view-section.fixed {
+    font-size: 0.8em; }
+  /* line 13, ../sass/_views.scss */
+  .l-view-section.scrolling {
+    overflow: auto; }
+  /* line 16, ../sass/_views.scss */
+  .l-view-section .controls,
+  .l-view-section label,
+  .l-view-section .inline-block {
+    display: inline-block; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../sass/items/_item.scss */
+.items-holder {
+  overflow: hidden;
+  *zoom: 1;
+  overflow-y: auto; }
+  /* line 25, ../sass/items/_item.scss */
+  .items-holder .contents {
+    top: 0; }
+  /* line 29, ../sass/items/_item.scss */
+  .items-holder .item.grid-item {
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-size: 100%;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5e5e5e), color-stop(100%, #525252));
+    background-image: -moz-linear-gradient(#5e5e5e, #525252);
+    background-image: -webkit-linear-gradient(#5e5e5e, #525252);
+    background-image: linear-gradient(#5e5e5e, #525252);
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    border: none;
+    border-top: 1px solid #636363;
+    color: #999;
+    display: inline-block;
+    box-sizing: border-box;
+    cursor: pointer;
+    float: left;
+    height: 200px;
+    width: 200px;
+    margin-bottom: 3px;
+    margin-right: 3px;
+    position: relative; }
+    /* line 167, ../sass/_mixins.scss */
+    .items-holder .item.grid-item:not(.disabled):hover {
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #707070), color-stop(100%, #636363));
+      background-image: -moz-linear-gradient(#707070, #636363);
+      background-image: -webkit-linear-gradient(#707070, #636363);
+      background-image: linear-gradient(#707070, #636363);
+      color: #bdbdbd; }
+      /* line 170, ../sass/_mixins.scss */
+      .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
+        color: #949494; }
+    /* line 175, ../sass/_mixins.scss */
+    .items-holder .item.grid-item.btn-menu .invoke-menu {
+      color: #828282; }
+    /* line 46, ../sass/items/_item.scss */
+    .items-holder .item.grid-item:hover .item-main .item-type {
+      color: deepskyblue !important; }
+      /* line 48, ../sass/items/_item.scss */
+      .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
+        color: #49dedb; }
+    /* line 52, ../sass/items/_item.scss */
+    .items-holder .item.grid-item:hover .item-main .item-open {
+      opacity: 1; }
+    /* line 57, ../sass/items/_item.scss */
+    .items-holder .item.grid-item .contents {
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      left: 10px; }
+    /* line 63, ../sass/items/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      bottom: auto;
+      height: 20px;
+      line-height: 20px;
+      text-align: right;
+      z-index: 5; }
+      /* line 69, ../sass/items/_item.scss */
+      .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
+        width: auto; }
+        /* line 71, ../sass/items/_item.scss */
+        .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
+          margin-left: 3px; }
+          /* line 73, ../sass/items/_item.scss */
+          .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
+            color: #49dedb; }
+    /* line 79, ../sass/items/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: auto;
+      line-height: 110%; }
+    /* line 85, ../sass/items/_item.scss */
+    .items-holder .item.grid-item .item-main {
+      line-height: 160px;
+      z-index: 1; }
+      /* line 91, ../sass/items/_item.scss */
+      .items-holder .item.grid-item .item-main .item-type {
+        overflow: false;
+        position: absolute;
+        top: 40px;
+        right: 40px;
+        bottom: 40px;
+        left: 40px;
+        width: auto;
+        height: auto;
+        text-align: center;
+        font-size: 96.9px;
+        line-height: 102px;
+        bottom: auto;
+        height: 102px;
+        top: 30px; }
+        /* line 103, ../sass/items/_item.scss */
+        .items-holder .item.grid-item .item-main .item-type .l-icon-link {
+          color: #49dedb;
+          height: auto;
+          line-height: 100%;
+          position: absolute;
+          font-size: 0.3em;
+          left: 0px;
+          bottom: 10px;
+          z-index: 2; }
+      /* line 116, ../sass/items/_item.scss */
+      .items-holder .item.grid-item .item-main .item-open {
+        -moz-transition-property: "opacity";
+        -o-transition-property: "opacity";
+        -webkit-transition-property: "opacity";
+        transition-property: "opacity";
+        -moz-transition-duration: 200ms;
+        -o-transition-duration: 200ms;
+        -webkit-transition-duration: 200ms;
+        transition-duration: 200ms;
+        -moz-transition-timing-function: ease-in-out;
+        -o-transition-timing-function: ease-in-out;
+        -webkit-transition-timing-function: ease-in-out;
+        transition-timing-function: ease-in-out;
+        opacity: 0;
+        font-size: 3em;
+        left: auto;
+        width: 50px;
+        pointer-events: none;
+        text-align: right; }
+    /* line 128, ../sass/items/_item.scss */
+    .items-holder .item.grid-item .title {
+      text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #cccccc; }
+    /* line 133, ../sass/items/_item.scss */
+    .items-holder .item.grid-item .details {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 0.8em; }
+    /* line 137, ../sass/items/_item.scss */
+    .items-holder .item.grid-item.selected {
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0ac2ff), color-stop(100%, #00b4f0));
+      background-image: -moz-linear-gradient(#0ac2ff, #00b4f0);
+      background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
+      background-image: linear-gradient(#0ac2ff, #00b4f0);
+      -moz-border-radius: 3px;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+      -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+      box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+      border: none;
+      border-top: 1px solid #14c4ff;
+      color: #999;
+      display: inline-block;
+      color: #80dfff; }
+      /* line 167, ../sass/_mixins.scss */
+      .items-holder .item.grid-item.selected:not(.disabled):hover {
+        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+        background-size: 100%;
+        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ecbff), color-stop(100%, #14c4ff));
+        background-image: -moz-linear-gradient(#2ecbff, #14c4ff);
+        background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
+        background-image: linear-gradient(#2ecbff, #14c4ff);
+        color: #bdbdbd; }
+        /* line 170, ../sass/_mixins.scss */
+        .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
+          color: #75ddff; }
+      /* line 175, ../sass/_mixins.scss */
+      .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
+        color: #52d4ff; }
+      /* line 142, ../sass/items/_item.scss */
+      .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
+        color: #80dfff; }
+      /* line 143, ../sass/items/_item.scss */
+      .items-holder .item.grid-item.selected .item-main .item-open {
+        color: #80dfff; }
+      /* line 144, ../sass/items/_item.scss */
+      .items-holder .item.grid-item.selected .title {
+        color: white; }
+      /* line 146, ../sass/items/_item.scss */
+      .items-holder .item.grid-item.selected:hover .item-main .item-type {
+        color: white !important; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 29, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    width: 100%; }
+    /* line 33, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item > .contents {
+      top: 0px;
+      right: 10px;
+      bottom: 0px;
+      left: 10px; }
+    /* line 37, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      bottom: 0 !important;
+      left: auto !important;
+      right: 20px !important;
+      width: 40px !important;
+      height: auto !important;
+      text-align: right; }
+    /* line 44, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      left: 40px;
+      right: 60px; }
+    /* line 52, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      font-size: 30px;
+      right: auto;
+      bottom: auto;
+      left: 0;
+      line-height: 100%;
+      text-align: left;
+      width: 30px; }
+      /* line 61, ../sass/mobile/_item.scss */
+      .items-holder .item.grid-item .item-main .item-type .l-icon-link {
+        bottom: 0; }
+    /* line 65, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      display: block;
+      opacity: 1;
+      font-size: 1em;
+      width: auto; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 29, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    height: 50px; }
+    /* line 78, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      line-height: 50px !important; }
+    /* line 82, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: 7px;
+      bottom: auto;
+      height: 35px; }
+    /* line 87, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      top: 10px;
+      bottom: auto;
+      height: 30px; }
+    /* line 90, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      line-height: 50px; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 29, ../sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    height: 66px; }
+    /* line 100, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      line-height: 66px !important; }
+    /* line 104, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: 15px;
+      bottom: auto;
+      height: 35px; }
+    /* line 109, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      top: 18px;
+      bottom: auto;
+      height: 30px; }
+    /* line 112, ../sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      line-height: 66px; } }
+
+/********************************* TO BE MOVED */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -5595,110 +6137,211 @@ input[type="text"] {
         border-left: none;
         padding-left: 0; }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* Styles for the iframe EmbeddedPageController element */
-/* line 25, ../sass/_iframe.scss */
-.l-iframe iframe {
-  display: block;
-  height: 100%;
-  width: 100%; }
-
-/* Styles for messages */
-/* line 4, ../sass/_messages.scss */
-.message.block {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  padding: 10px; }
-/* line 8, ../sass/_messages.scss */
-.message.error {
-  background-color: rgba(255, 60, 0, 0.3);
-  color: #ff8a66; }
-
-/* line 5, ../sass/_initialization.scss */
-.browse-mode .split-layout .split-pane-component.pane.left {
-  width: 15%; }
-
-/* line 13, ../sass/_initialization.scss */
-.edit-mode .split-layout .split-pane-component.pane.right {
-  width: 15%; }
-  /* line 15, ../sass/_initialization.scss */
-  .edit-mode .split-layout .split-pane-component.pane.right .pane.bottom {
-    height: 30%; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/******************************** BROWSE */
-/* line 27, ../sass/_hide-non-functional.scss */
-.browse-mode .browse.top-bar {
-  display: none; }
-/* line 32, ../sass/_hide-non-functional.scss */
-.browse-mode .browse-area.holder {
-  top: 10px; }
-
-/* Styles for sub-dividing views generically */
-/* line 3, ../sass/_views.scss */
-.l-view-section {
-  overflow: hidden;
+/* line 1, ../sass/features/_imagery.scss */
+.l-image-main-wrapper,
+.l-image-main,
+.l-image-main-controlbar,
+.l-image-thumbs-wrapper {
+  overflow: false;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   width: auto;
-  height: auto;
-  font-size: 0.8rem; }
-  /* line 6, ../sass/_views.scss */
-  .l-view-section h2 {
-    color: #fff;
-    margin-bottom: 5px; }
-  /* line 10, ../sass/_views.scss */
-  .l-view-section.fixed {
-    font-size: 0.8em; }
-  /* line 13, ../sass/_views.scss */
-  .l-view-section.scrolling {
-    overflow: auto; }
-  /* line 16, ../sass/_views.scss */
-  .l-view-section .controls,
-  .l-view-section label,
-  .l-view-section .inline-block {
+  height: auto; }
+
+/*************************************** MAIN LAYOUT */
+/* line 9, ../sass/features/_imagery.scss */
+.l-image-main-wrapper {
+  min-height: 100px;
+  min-width: 150px; }
+  /* line 16, ../sass/features/_imagery.scss */
+  .l-image-main-wrapper .l-image-main {
+    background-color: rgba(255, 255, 255, 0.1);
+    bottom: 27px; }
+  /* line 20, ../sass/features/_imagery.scss */
+  .l-image-main-wrapper .l-image-main-controlbar {
+    top: auto;
+    height: 22px; }
+
+/* line 26, ../sass/features/_imagery.scss */
+.l-image-thumbs-wrapper {
+  top: auto;
+  height: 168px; }
+
+/* line 32, ../sass/features/_imagery.scss */
+.l-date,
+.l-time,
+.l-timezone {
+  display: inline-block; }
+
+/*************************************** MAIN IMAGE */
+/* line 40, ../sass/features/_imagery.scss */
+.l-image-main,
+.l-image-thumb-item .l-thumb {
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat; }
+
+/* line 51, ../sass/features/_imagery.scss */
+.l-image-main-controlbar {
+  font-size: 0.8em;
+  line-height: 22px; }
+  /* line 55, ../sass/features/_imagery.scss */
+  .l-image-main-controlbar .left, .l-image-main-controlbar .right {
+    direction: rtl;
+    overflow: hidden; }
+  /* line 59, ../sass/features/_imagery.scss */
+  .l-image-main-controlbar .left {
+    text-align: left; }
+  /* line 63, ../sass/features/_imagery.scss */
+  .l-image-main-controlbar .right {
+    z-index: 2; }
+  /* line 67, ../sass/features/_imagery.scss */
+  .l-image-main-controlbar .l-date,
+  .l-image-main-controlbar .l-time {
+    color: #fff; }
+  /* line 71, ../sass/features/_imagery.scss */
+  .l-image-main-controlbar .l-mag {
+    direction: ltr;
     display: inline-block; }
+    /* line 75, ../sass/features/_imagery.scss */
+    .l-image-main-controlbar .l-mag:before {
+      content: "\000049"; }
+  /* line 79, ../sass/features/_imagery.scss */
+  .l-image-main-controlbar .s-mag {
+    color: #666666; }
+  /* line 82, ../sass/features/_imagery.scss */
+  .l-image-main-controlbar .l-btn.show-thumbs {
+    display: none; }
+
+/* line 87, ../sass/features/_imagery.scss */
+.s-image-main {
+  border: 1px solid transparent; }
+  /* line 89, ../sass/features/_imagery.scss */
+  .s-image-main.paused {
+    border-color: #c56f01; }
+
+/*************************************** THUMBS */
+/* line 96, ../sass/features/_imagery.scss */
+.l-image-thumbs-wrapper {
+  direction: rtl;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 5px;
+  white-space: nowrap;
+  z-index: 70; }
+
+/* line 106, ../sass/features/_imagery.scss */
+.l-image-thumb-item {
+  -moz-transition: background-color 0.25s;
+  -o-transition: background-color 0.25s;
+  -webkit-transition: background-color 0.25s;
+  transition: background-color 0.25s;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 1px;
+  position: relative;
+  cursor: pointer;
+  direction: ltr;
+  display: inline-block;
+  font-size: 0.8em;
+  margin-left: 3px;
+  text-align: left;
+  width: 122px;
+  white-space: normal; }
+  /* line 111, ../sass/features/_imagery.scss */
+  .l-image-thumb-item .l-thumb,
+  .l-image-thumb-item .l-date,
+  .l-image-thumb-item .l-time {
+    display: inline-block; }
+  /* line 116, ../sass/features/_imagery.scss */
+  .l-image-thumb-item .l-date,
+  .l-image-thumb-item .l-time {
+    padding: 2px 3px; }
+  /* line 128, ../sass/features/_imagery.scss */
+  .l-image-thumb-item:hover {
+    background: rgba(255, 255, 255, 0.2); }
+    /* line 130, ../sass/features/_imagery.scss */
+    .l-image-thumb-item:hover .l-date,
+    .l-image-thumb-item:hover .l-time {
+      color: #fff; }
+  /* line 135, ../sass/features/_imagery.scss */
+  .l-image-thumb-item.selected {
+    background: #005177; }
+    /* line 137, ../sass/features/_imagery.scss */
+    .l-image-thumb-item.selected .l-date,
+    .l-image-thumb-item.selected .l-time {
+      color: #fff; }
+  /* line 142, ../sass/features/_imagery.scss */
+  .l-image-thumb-item .l-thumb {
+    background-color: rgba(255, 255, 255, 0.1);
+    height: 120px;
+    width: 120px;
+    margin-top: 0; }
+
+/*************************************** WHEN IN FRAME */
+/* line 152, ../sass/features/_imagery.scss */
+.frame .t-imagery .l-image-main-wrapper {
+  bottom: 0; }
+  /* line 154, ../sass/features/_imagery.scss */
+  .frame .t-imagery .l-image-main-wrapper .l-image-main-controlbar {
+    font-size: 0.7em; }
+/* line 163, ../sass/features/_imagery.scss */
+.frame .t-imagery .l-image-thumbs-wrapper {
+  display: none; }
+
+/* line 5, ../sass/features/_time-display.scss */
+.l-time-display:hover .l-btn.control {
+  opacity: 1; }
+/* line 9, ../sass/features/_time-display.scss */
+.l-time-display .l-elem-wrapper {
+  position: relative; }
+/* line 12, ../sass/features/_time-display.scss */
+.l-time-display .l-elem {
+  display: inline-block; }
+/* line 17, ../sass/features/_time-display.scss */
+.l-time-display.l-timer .l-elem.l-value {
+  -moz-transition-property: left;
+  -o-transition-property: left;
+  -webkit-transition-property: left;
+  transition-property: left;
+  -moz-transition-duration: 200ms;
+  -o-transition-duration: 200ms;
+  -webkit-transition-duration: 200ms;
+  transition-duration: 200ms;
+  -moz-transition-timing-function: ease-in-out;
+  -o-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  position: absolute;
+  left: 0;
+  z-index: 1; }
+  /* line 22, ../sass/features/_time-display.scss */
+  .l-time-display.l-timer .l-elem.l-value .ui-symbol.direction {
+    font-size: 0.8em; }
+/* line 26, ../sass/features/_time-display.scss */
+.l-time-display.l-timer:hover .l-elem.l-value {
+  left: 20px; }
+/* line 33, ../sass/features/_time-display.scss */
+.l-time-display .l-elem .value.active, .l-time-display .l-elem.value.active {
+  color: #fff; }
+/* line 38, ../sass/features/_time-display.scss */
+.l-time-display .l-btn.control {
+  -moz-transition-property: visibility, opacity, background-color, border-color;
+  -o-transition-property: visibility, opacity, background-color, border-color;
+  -webkit-transition-property: visibility, opacity, background-color, border-color;
+  transition-property: visibility, opacity, background-color, border-color;
+  -moz-transition-duration: 200ms;
+  -o-transition-duration: 200ms;
+  -webkit-transition-duration: 200ms;
+  transition-duration: 200ms;
+  -moz-transition-timing-function: ease-in-out;
+  -o-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  opacity: 0;
+  font-size: 0.65em;
+  vertical-align: top; }
diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css
deleted file mode 100644
index 73d260de38..0000000000
--- a/platform/commonUI/general/res/css/tree.css
+++ /dev/null
@@ -1,385 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/************************** FEATURES */
-/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** COLORS AND SHADING */
-/************************** RATIOS */
-/************************** LAYOUT */
-/************************** CONTROLS */
-/************************** PATHS */
-/************************** TIMINGS */
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/************************** STYLE */
-/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
-/************************** MOBILE TREE MENU DIMENSIONS */
-/************************** WINDOW DIMENSIONS FOR RWD */
-/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*********************************************** FORM ELEMENTS */
-/*
-@mixin invokeMenu($baseColor: $colorBodyFg) {
-	$c: $baseColor;
-	color: $c;
-	&:hover {
-		color: lighten($c, $ltGamma);
-	}
-}
-*/
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 23, ../sass/tree/_tree.scss */
-ul.tree {
-  margin: 0;
-  padding: 0; }
-  /* line 314, ../sass/_mixins.scss */
-  ul.tree li {
-    list-style-type: none;
-    margin: 0;
-    padding: 0; }
-  /* line 25, ../sass/tree/_tree.scss */
-  ul.tree li {
-    display: block;
-    position: relative; }
-  /* line 29, ../sass/tree/_tree.scss */
-  ul.tree ul.tree {
-    margin-left: 15px; }
-
-/* line 34, ../sass/tree/_tree.scss */
-.tree-item,
-.search-result-item {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-transition: background-color 0.25s;
-  -o-transition: background-color 0.25s;
-  -webkit-transition: background-color 0.25s;
-  transition: background-color 0.25s;
-  display: block;
-  font-size: 0.8rem;
-  height: 1.5rem;
-  line-height: 1.5rem;
-  margin-bottom: 3px;
-  position: relative; }
-  /* line 47, ../sass/tree/_tree.scss */
-  .tree-item .view-control,
-  .search-result-item .view-control {
-    display: inline-block;
-    margin-left: 5px;
-    font-size: 0.75em;
-    width: 10px; }
-    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 55, ../sass/tree/_tree.scss */
-      .tree-item .view-control:hover,
-      .search-result-item .view-control:hover {
-        color: #ffc700; } }
-  /* line 61, ../sass/tree/_tree.scss */
-  .tree-item .label,
-  .search-result-item .label {
-    display: block;
-    overflow: hidden;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    width: auto;
-    height: auto;
-    line-height: 1.5rem; }
-    /* line 69, ../sass/tree/_tree.scss */
-    .tree-item .label .type-icon,
-    .search-result-item .label .type-icon {
-      text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
-      font-size: 16px;
-      color: #0099cc;
-      left: 5px;
-      position: absolute;
-      top: 4px;
-      bottom: auto;
-      height: 16px;
-      line-height: 100%;
-      right: auto;
-      width: 16px; }
-      /* line 82, ../sass/tree/_tree.scss */
-      .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
-      .search-result-item .label .type-icon .icon.l-icon-link,
-      .search-result-item .label .type-icon .icon.l-icon-alert {
-        text-shadow: black 0 1px 2px;
-        position: absolute;
-        z-index: 2; }
-      /* line 88, ../sass/tree/_tree.scss */
-      .tree-item .label .type-icon .icon.l-icon-alert,
-      .search-result-item .label .type-icon .icon.l-icon-alert {
-        color: #ff3c00;
-        font-size: 8px;
-        line-height: 8px;
-        height: 8px;
-        width: 8px;
-        top: 1px;
-        right: -2px; }
-      /* line 94, ../sass/tree/_tree.scss */
-      .tree-item .label .type-icon .icon.l-icon-link,
-      .search-result-item .label .type-icon .icon.l-icon-link {
-        color: #49dedb;
-        font-size: 8px;
-        line-height: 8px;
-        height: 8px;
-        width: 8px;
-        left: -3px;
-        bottom: 0px; }
-    /* line 102, ../sass/tree/_tree.scss */
-    .tree-item .label .title-label,
-    .search-result-item .label .title-label {
-      overflow: hidden;
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      bottom: 0px;
-      left: 0px;
-      width: auto;
-      height: auto;
-      display: block;
-      left: 30px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap; }
-  /* line 113, ../sass/tree/_tree.scss */
-  .tree-item.loading,
-  .search-result-item.loading {
-    pointer-events: none; }
-    /* line 115, ../sass/tree/_tree.scss */
-    .tree-item.loading .label,
-    .search-result-item.loading .label {
-      opacity: 0.5; }
-      /* line 117, ../sass/tree/_tree.scss */
-      .tree-item.loading .label .title-label,
-      .search-result-item.loading .label .title-label {
-        font-style: italic; }
-    /* line 121, ../sass/tree/_tree.scss */
-    .tree-item.loading .wait-spinner,
-    .search-result-item.loading .wait-spinner {
-      margin-left: 14px; }
-  /* line 126, ../sass/tree/_tree.scss */
-  .tree-item.selected,
-  .search-result-item.selected {
-    background: #005177;
-    color: #fff; }
-    /* line 130, ../sass/tree/_tree.scss */
-    .tree-item.selected .view-control,
-    .search-result-item.selected .view-control {
-      color: #0099cc; }
-    /* line 133, ../sass/tree/_tree.scss */
-    .tree-item.selected .label .type-icon,
-    .search-result-item.selected .label .type-icon {
-      color: #fff; }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 141, ../sass/tree/_tree.scss */
-    .tree-item:not(.selected):hover,
-    .search-result-item:not(.selected):hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: #cccccc; }
-      /* line 144, ../sass/tree/_tree.scss */
-      .tree-item:not(.selected):hover .context-trigger,
-      .search-result-item:not(.selected):hover .context-trigger {
-        display: block; }
-      /* line 147, ../sass/tree/_tree.scss */
-      .tree-item:not(.selected):hover .icon,
-      .search-result-item:not(.selected):hover .icon {
-        color: #33ccff; } }
-  /* line 154, ../sass/tree/_tree.scss */
-  .tree-item:not(.loading),
-  .search-result-item:not(.loading) {
-    cursor: pointer; }
-  /* line 158, ../sass/tree/_tree.scss */
-  .tree-item .context-trigger,
-  .search-result-item .context-trigger {
-    top: -1px;
-    position: absolute;
-    right: 3px; }
-    /* line 164, ../sass/tree/_tree.scss */
-    .tree-item .context-trigger .invoke-menu,
-    .search-result-item .context-trigger .invoke-menu {
-      font-size: 0.75em;
-      height: 0.9rem;
-      line-height: 0.9rem; }
-
-/* line 173, ../sass/tree/_tree.scss */
-.tree-item .label {
-  left: 15px; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 27, ../sass/mobile/_tree.scss */
-  ul.tree ul.tree {
-    margin-left: 20px; }
-
-  /* line 31, ../sass/mobile/_tree.scss */
-  .tree-item,
-  .search-result-item {
-    height: 35px;
-    line-height: 35px;
-    margin-bottom: 0px; }
-    /* line 36, ../sass/mobile/_tree.scss */
-    .tree-item .view-control,
-    .search-result-item .view-control {
-      position: absolute;
-      font-size: 1.1em;
-      right: 0px;
-      width: 30px;
-      text-align: center; }
-    /* line 45, ../sass/mobile/_tree.scss */
-    .tree-item .label,
-    .search-result-item .label {
-      left: 0;
-      right: 35px;
-      line-height: 35px; }
-      /* line 50, ../sass/mobile/_tree.scss */
-      .tree-item .label .type-icon,
-      .search-result-item .label .type-icon {
-        top: 9px;
-        bottom: auto;
-        height: 16px; } }
diff --git a/platform/commonUI/general/res/sass/_initialization.scss b/platform/commonUI/general/res/sass/_initialization.scss
deleted file mode 100644
index bd5f003b9b..0000000000
--- a/platform/commonUI/general/res/sass/_initialization.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-// Classes for initializing states of objects
-
-.browse-mode {
-    .split-layout {
-        .split-pane-component.pane.left {
-            width: 15%;
-        }
-    }
-}
-
-.edit-mode {
-    .split-layout {
-        .split-pane-component.pane.right {
-            width: 15%;
-            .pane.bottom {
-                height: 30%;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 43947dcc51..7f25dbf09c 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -22,11 +22,10 @@
 @import "compass";
 @import "compass/reset";
 @import "compass/css3";
-@import "compass/css3/animation";
-@import "compass/css3/user-interface";
 @import "compass/utilities";
 
 @import "mixins";
+@import "forms/mixins";
 @import "mobile/mixins";
 
 @import "effects";
@@ -41,41 +40,58 @@
 @import "limits";
 @import "data-status";
 @import "lists/tabular";
+
+/********************************* CONTROLS */
 @import "controls/breadcrumb";
 @import "controls/buttons";
 @import "controls/color-palette";
 @import "controls/controls";
 @import "controls/lists";
 @import "controls/menus";
-@import "mobile/controls/menus";
 @import "controls/time-controller";
+@import "mobile/controls/menus";
 @import "edit/editor";
-@import "features/imagery";
-@import "features/time-display";
+
+/********************************* FORMS */
 @import "forms/elems";
-@import "forms/validation";
+@import "forms/textarea";
 @import "forms/text-input";
 @import "forms/selects";
 @import "forms/channel-selector";
 @import "forms/datetime";
+@import "forms/validation";
 @import "forms/filter";
+
 @import "plots/plots-main";
 @import "search/search";
 @import "mobile/search/search";
 @import "overlay/overlay";
 @import "mobile/overlay/overlay";
+
+/********************************* USER ENVIRON */
+@import "tree/tree";
+@import "mobile/tree";
 @import "user-environ/frame";
 @import "user-environ/top-bar";
 @import "user-environ/bottom-bar";
-//@import "user-environ/object-browse";
 @import "user-environ/tool-bar";
+
+/********************************* HELPERS */
 @import "helpers/bubbles";
 @import "helpers/splitter";
 @import "helpers/wait-spinner";
-@import "properties";
-@import "autoflow";
-@import "iframe";
 @import "messages";
-@import "initialization";
+@import "properties";
+
+/********************************* VIEWS */
+@import "iframe";
 @import "hide-non-functional";
 @import "views";
+@import "items/item";
+@import "mobile/item";
+
+
+/********************************* TO BE MOVED */
+@import "autoflow";
+@import "features/imagery";
+@import "features/time-display";
diff --git a/platform/commonUI/general/res/sass/forms.scss b/platform/commonUI/general/res/sass/forms.scss
index 6929093c04..17d1a02c40 100644
--- a/platform/commonUI/general/res/sass/forms.scss
+++ b/platform/commonUI/general/res/sass/forms.scss
@@ -21,8 +21,8 @@
  *****************************************************************************/
 @import "compass";
 @import "compass/css3";
-@import "compass/css3/border-radius";
-@import "compass/css3/opacity";
+    @import "compass/css3/border-radius";
+    @import "compass/css3/opacity";
 @import "compass/utilities";
 
 @import "constants";
@@ -36,4 +36,5 @@
 @import "forms/selects";
 @import "forms/channel-selector";
 @import "forms/datetime";
-//@import "forms/filter";
\ No newline at end of file
+@import "forms/validation";
+@import "forms/filter";
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/tree.scss b/platform/commonUI/general/res/sass/tree.scss
deleted file mode 100644
index 881b105a7a..0000000000
--- a/platform/commonUI/general/res/sass/tree.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@import "compass";
-@import "compass/css3";
-@import "compass/utilities";
-
-@import "constants";
-@import "mobile/constants";
-@import "mixins";
-@import "mobile/mixins";
-@import "tree/tree";
-@import "mobile/tree";
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index d5e89c27fb..09f046042e 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -216,16 +216,17 @@
 .edit-mode {
     .split-layout {
         .split-pane-component.pane.right {
-            //min-width: 150px;
-            //max-width: 50%;
-            .split-pane-component.pane.bottom {
+            width: 15%;
+            .pane.bottom {
                 min-height: 50px;
-                max-height: 80%;
+                height: 30%;
             }
         }
     }
 }
 
+
+
 .pane {
     position: absolute;
     &.treeview.left {

From 194bc41322aaa85eb2a5f23e98d459b074c37060 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 1 Sep 2015 17:03:54 -0700
Subject: [PATCH 185/266] [Composition] Add an add method

Add a method to add new objects to the composition of
another domain object. nasa/openmctweb#97
---
 .../src/capabilities/CompositionCapability.js | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/platform/core/src/capabilities/CompositionCapability.js b/platform/core/src/capabilities/CompositionCapability.js
index f1b2532040..a2a269e0b8 100644
--- a/platform/core/src/capabilities/CompositionCapability.js
+++ b/platform/core/src/capabilities/CompositionCapability.js
@@ -50,6 +50,49 @@ define(
             this.domainObject = domainObject;
         }
 
+        /**
+         * Add a domain object to the composition of the field.
+         * This mutates but does not persist the modified object.
+         *
+         * If no index is given, this is added to the end of the composition.
+         *
+         * @param {DomainObject|string} domainObject the domain object to add,
+         *        or simply its identifier
+         * @param {number} [index] the index at which to add the object
+         * @returns {Promise.<boolean>} the mutation result
+         */
+        CompositionCapability.prototype.add = function (domainObject, index) {
+            var id = typeof domainObject === 'string' ?
+                    domainObject : domainObject.getId();
+
+            function addIdToModel(model) {
+                var composition = model.composition,
+                    oldIndex = composition.indexOf(id);
+
+                // If no index has been specified already and the id is already
+                // present, nothing to do. If the id is already at that index,
+                // also nothing to do.
+                if ((isNaN(index) && oldIndex !== -1) || (index === oldIndex) {
+                    return;
+                }
+
+                // Pick a specific index if needed.
+                index = isNaN(index) ? composition.length : index;
+                // Also, don't put past the end of the array
+                index = Math.min(composition.length, index);
+
+                // Remove the existing instance of the id
+                if (oldIndex !== -1) {
+                    model.composition.splice(oldIndex, 1);
+                }
+
+                // ...and add it back at the appropriate index.
+                model.composition.splice(index, 0, id);
+            }
+
+            return this.domainObject.useCapability('mutation', addIdToModel);
+        };
+
         /**
          * Request the composition of this object.
          * @returns {Promise.<DomainObject[]>} a list of all domain

From 8e995eba8f5af52a0aabd34c39ade61fdc539749 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 1 Sep 2015 17:11:09 -0700
Subject: [PATCH 186/266] [Composition] Use composition.add during creation

---
 .../browse/src/creation/CreationService.js        | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/browse/src/creation/CreationService.js b/platform/commonUI/browse/src/creation/CreationService.js
index 3dd96d289e..188c384c1a 100644
--- a/platform/commonUI/browse/src/creation/CreationService.js
+++ b/platform/commonUI/browse/src/creation/CreationService.js
@@ -86,18 +86,9 @@ define(
             // composition, so that it will subsequently appear
             // as a child contained by that parent.
             function addToComposition(id, parent, parentPersistence) {
-                var mutatationResult = parent.useCapability("mutation", function (model) {
-                    if (Array.isArray(model.composition)) {
-                        // Don't add if the id is already there
-                        if (model.composition.indexOf(id) === -1) {
-                            model.composition.push(id);
-                        }
-                    } else {
-                        // This is abnormal; composition should be an array
-                        self.$log.warn(NO_COMPOSITION_WARNING + parent.getId());
-                        return false; // Cancel mutation
-                    }
-                });
+                var compositionCapability = parent.getCapability('composition'),
+                    mutationResult = compositionCapability &&
+                        compositionCapability.add(id);
 
                 return self.$q.when(mutatationResult).then(function (result) {
                     if (!result) {

From b9d8b124ffc5dafba1cce20aa525937a683f9bd1 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 2 Sep 2015 09:08:47 -0700
Subject: [PATCH 187/266] [Composition] Use composition.add from link action

---
 .../commonUI/edit/src/actions/LinkAction.js     | 17 +++++------------
 .../src/capabilities/CompositionCapability.js   |  7 ++++---
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/platform/commonUI/edit/src/actions/LinkAction.js b/platform/commonUI/edit/src/actions/LinkAction.js
index 74abd2a93c..95ed9a8082 100644
--- a/platform/commonUI/edit/src/actions/LinkAction.js
+++ b/platform/commonUI/edit/src/actions/LinkAction.js
@@ -36,20 +36,11 @@ define(
         function LinkAction(context) {
             this.domainObject = (context || {}).domainObject;
             this.selectedObject = (context || {}).selectedObject;
-            this.selectedId = this.selectedObject && this.selectedObject.getId();
         }
 
         LinkAction.prototype.perform = function () {
             var self = this;
 
-            // Add this domain object's identifier
-            function addId(model) {
-                if (Array.isArray(model.composition) &&
-                    model.composition.indexOf(self.selectedId) < 0) {
-                    model.composition.push(self.selectedId);
-                }
-            }
-
             // Persist changes to the domain object
             function doPersist() {
                 var persistence =
@@ -59,11 +50,13 @@ define(
 
             // Link these objects
             function doLink() {
-                return self.domainObject.useCapability("mutation", addId)
-                    .then(doPersist);
+                var composition = self.domainObject &&
+                        self.domainObject.getCapability('composition');
+                return composition && composition.add(self.selectedObject)
+                        .then(doPersist);
             }
 
-            return this.selectedId && doLink();
+            return this.selectedObject && doLink();
         };
 
         return LinkAction;
diff --git a/platform/core/src/capabilities/CompositionCapability.js b/platform/core/src/capabilities/CompositionCapability.js
index a2a269e0b8..c96a060986 100644
--- a/platform/core/src/capabilities/CompositionCapability.js
+++ b/platform/core/src/capabilities/CompositionCapability.js
@@ -63,7 +63,8 @@ define(
          */
         CompositionCapability.prototype.add = function (domainObject, index) {
             var id = typeof domainObject === 'string' ?
-                    domainObject : domainObject.getId();
+                    domainObject : domainObject.getId(),
+                $q = this.$q;
 
             function addIdToModel(model) {
                 var composition = model.composition,
@@ -71,9 +72,9 @@ define(
 
                 // If no index has been specified already and the id is already
                 // present, nothing to do. If the id is already at that index,
-                // also nothing to do.
+                // also nothing to do, so cancel mutation.
                 if ((isNaN(index) && oldIndex !== -1) || (index === oldIndex) {
-                    return;
+                    return false;
                 }
 
                 // Pick a specific index if needed.

From d3d94d67ea1ae974f3c6cd4b6d5540c1bf4ec45b Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 2 Sep 2015 09:11:46 -0700
Subject: [PATCH 188/266] [Composition] Use composition.add from LinkService

---
 .../src/capabilities/CompositionCapability.js     |  5 ++---
 platform/entanglement/src/services/LinkService.js | 15 ++++++---------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/platform/core/src/capabilities/CompositionCapability.js b/platform/core/src/capabilities/CompositionCapability.js
index c96a060986..1bf7f790f1 100644
--- a/platform/core/src/capabilities/CompositionCapability.js
+++ b/platform/core/src/capabilities/CompositionCapability.js
@@ -63,8 +63,7 @@ define(
          */
         CompositionCapability.prototype.add = function (domainObject, index) {
             var id = typeof domainObject === 'string' ?
-                    domainObject : domainObject.getId(),
-                $q = this.$q;
+                    domainObject : domainObject.getId();
 
             function addIdToModel(model) {
                 var composition = model.composition,
@@ -73,7 +72,7 @@ define(
                 // If no index has been specified already and the id is already
                 // present, nothing to do. If the id is already at that index,
                 // also nothing to do, so cancel mutation.
-                if ((isNaN(index) && oldIndex !== -1) || (index === oldIndex) {
+                if ((isNaN(index) && oldIndex !== -1) || (index === oldIndex)) {
                     return false;
                 }
 
diff --git a/platform/entanglement/src/services/LinkService.js b/platform/entanglement/src/services/LinkService.js
index 9fb38dd273..ae02675eeb 100644
--- a/platform/entanglement/src/services/LinkService.js
+++ b/platform/entanglement/src/services/LinkService.js
@@ -52,10 +52,13 @@ define(
                 "composition",
                 parentCandidate.getCapability('type'),
                 object.getCapability('type')
-            );
+            ) && parentCandidate.hasCapability('composition');
         };
 
         LinkService.prototype.perform = function (object, parentObject) {
+            // Note that this was checked-for explicitly during validate step
+            var composition = parentObject.getCapability('composition');
+
             function findChild(children) {
                 var i;
                 for (i = 0; i < children.length; i += 1) {
@@ -65,16 +68,10 @@ define(
                 }
             }
 
-            return parentObject.useCapability('mutation', function (model) {
-                if (model.composition.indexOf(object.getId()) === -1) {
-                    model.composition.push(object.getId());
-                }
-            }).then(function () {
+            return composition.add(object).then(function () {
                 return parentObject.getCapability('persistence').persist();
             }).then(function getObjectWithNewContext() {
-                return parentObject
-                    .useCapability('composition')
-                    .then(findChild);
+                return composition.invoke().then(findChild);
             });
         };
 

From 8759fdbd95d675565cf384e1b0b6618f468c5ba4 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 2 Sep 2015 09:37:26 -0700
Subject: [PATCH 189/266] [Composition] Update specs

Update specs to reflect usage of the add method in
the composition capability.
---
 .../browse/src/creation/CreationService.js    |  6 +--
 .../test/creation/CreationServiceSpec.js      | 47 +++++++++--------
 .../edit/test/actions/LinkActionSpec.js       | 36 ++++---------
 .../entanglement/src/services/LinkService.js  |  2 +-
 .../test/services/LinkServiceSpec.js          | 52 +++++++++++++------
 5 files changed, 75 insertions(+), 68 deletions(-)

diff --git a/platform/commonUI/browse/src/creation/CreationService.js b/platform/commonUI/browse/src/creation/CreationService.js
index 188c384c1a..984a3dbe85 100644
--- a/platform/commonUI/browse/src/creation/CreationService.js
+++ b/platform/commonUI/browse/src/creation/CreationService.js
@@ -87,12 +87,12 @@ define(
             // as a child contained by that parent.
             function addToComposition(id, parent, parentPersistence) {
                 var compositionCapability = parent.getCapability('composition'),
-                    mutationResult = compositionCapability &&
+                    addResult = compositionCapability &&
                         compositionCapability.add(id);
 
-                return self.$q.when(mutatationResult).then(function (result) {
+                return self.$q.when(addResult).then(function (result) {
                     if (!result) {
-                        self.$log.error("Could not mutate " + parent.getId());
+                        self.$log.error("Could not modify " + parent.getId());
                         return undefined;
                     }
 
diff --git a/platform/commonUI/browse/test/creation/CreationServiceSpec.js b/platform/commonUI/browse/test/creation/CreationServiceSpec.js
index bdcd752c6c..d492b51f8f 100644
--- a/platform/commonUI/browse/test/creation/CreationServiceSpec.js
+++ b/platform/commonUI/browse/test/creation/CreationServiceSpec.js
@@ -86,7 +86,7 @@ define(
                 );
                 mockCompositionCapability = jasmine.createSpyObj(
                     "composition",
-                    ["invoke"]
+                    ["invoke", "add"]
                 );
                 mockContextCapability = jasmine.createSpyObj(
                     "context",
@@ -120,6 +120,7 @@ define(
                 mockCompositionCapability.invoke.andReturn(
                     mockPromise([mockNewObject])
                 );
+                mockCompositionCapability.add.andReturn(mockPromise(true));
 
                 creationService = new CreationService(
                     mockPersistenceService,
@@ -143,33 +144,34 @@ define(
                     parentModel = { composition: ["notAnyUUID"] };
                 creationService.createObject(model, mockParentObject);
 
-                // Invoke the mutation callback
-                expect(mockMutationCapability.invoke).toHaveBeenCalled();
-                mockMutationCapability.invoke.mostRecentCall.args[0](parentModel);
-
-                // Should have a longer composition now, with the new UUID
-                expect(parentModel.composition.length).toEqual(2);
+                // Verify that a new ID was added
+                expect(mockCompositionCapability.add)
+                    .toHaveBeenCalledWith(jasmine.any(String));
             });
 
-            it("warns if parent has no composition", function () {
-                var model = { someKey: "some value" },
-                    parentModel = { };
-                creationService.createObject(model, mockParentObject);
+            it("provides the newly-created object", function () {
+                var mockDomainObject = jasmine.createSpyObj(
+                        'newDomainObject',
+                        ['getId', 'getModel', 'getCapability']
+                    ),
+                    mockCallback = jasmine.createSpy('callback');
 
-                // Verify precondition; no prior warnings
-                expect(mockLog.warn).not.toHaveBeenCalled();
+                // Act as if the object had been created
+                mockCompositionCapability.add.andCallFake(function (id) {
+                    mockDomainObject.getId.andReturn(id);
+                    mockCompositionCapability.invoke
+                        .andReturn(mockPromise([mockDomainObject]));
+                    return mockPromise(true);
+                });
 
-                // Invoke the mutation callback
-                expect(mockMutationCapability.invoke).toHaveBeenCalled();
-                mockMutationCapability.invoke.mostRecentCall.args[0](parentModel);
+                // Should find it in the composition
+                creationService.createObject({}, mockParentObject)
+                    .then(mockCallback);
+
+                expect(mockCallback).toHaveBeenCalledWith(mockDomainObject);
 
-                // Should have a longer composition now, with the new UUID
-                expect(mockLog.warn).toHaveBeenCalled();
-                // Composition should still be undefined
-                expect(parentModel.composition).toBeUndefined();
             });
 
-
             it("warns if parent has no persistence capability", function () {
                 // Callbacks
                 var success = jasmine.createSpy("success"),
@@ -185,7 +187,6 @@ define(
                 expect(mockLog.warn).toHaveBeenCalled();
                 expect(success).not.toHaveBeenCalled();
                 expect(failure).toHaveBeenCalled();
-
             });
 
             it("logs an error when mutaton fails", function () {
@@ -194,7 +195,7 @@ define(
                 var model = { someKey: "some value" },
                     parentModel = { composition: ["notAnyUUID"] };
 
-                mockMutationCapability.invoke.andReturn(mockPromise(false));
+                mockCompositionCapability.add.andReturn(mockPromise(false));
 
                 creationService.createObject(model, mockParentObject);
 
diff --git a/platform/commonUI/edit/test/actions/LinkActionSpec.js b/platform/commonUI/edit/test/actions/LinkActionSpec.js
index 835f93740a..96ea30e2b3 100644
--- a/platform/commonUI/edit/test/actions/LinkActionSpec.js
+++ b/platform/commonUI/edit/test/actions/LinkActionSpec.js
@@ -31,7 +31,7 @@ define(
                 mockDomainObject,
                 mockParent,
                 mockContext,
-                mockMutation,
+                mockComposition,
                 mockPersistence,
                 mockType,
                 actionContext,
@@ -67,7 +67,7 @@ define(
                     }
                 };
                 mockContext = jasmine.createSpyObj("context", [ "getParent" ]);
-                mockMutation = jasmine.createSpyObj("mutation", [ "invoke" ]);
+                mockComposition = jasmine.createSpyObj("composition", [ "invoke", "add" ]);
                 mockPersistence = jasmine.createSpyObj("persistence", [ "persist" ]);
                 mockType = jasmine.createSpyObj("type", [ "hasFeature" ]);
 
@@ -75,11 +75,11 @@ define(
                 mockDomainObject.getCapability.andReturn(mockContext);
                 mockContext.getParent.andReturn(mockParent);
                 mockType.hasFeature.andReturn(true);
-                mockMutation.invoke.andReturn(mockPromise(true));
-
+                mockComposition.invoke.andReturn(mockPromise(true));
+                mockComposition.add.andReturn(mockPromise(true));
 
                 capabilities = {
-                    mutation: mockMutation,
+                    composition: mockComposition,
                     persistence: mockPersistence,
                     type: mockType
                 };
@@ -96,33 +96,17 @@ define(
             });
 
 
-            it("mutates the parent when performed", function () {
+            it("adds to the parent's composition when performed", function () {
                 action.perform();
-                expect(mockMutation.invoke)
-                    .toHaveBeenCalledWith(jasmine.any(Function));
+                expect(mockComposition.add)
+                    .toHaveBeenCalledWith(mockDomainObject);
             });
 
-            it("changes composition from its mutation function", function () {
-                var mutator, result;
+            it("persists changes afterward", function () {
                 action.perform();
-                mutator = mockMutation.invoke.mostRecentCall.args[0];
-                result = mutator(model);
-
-                // Should not have cancelled the mutation
-                expect(result).not.toBe(false);
-
-                // Simulate mutate's behavior (remove can either return a
-                // new model or modify this one in-place)
-                result = result || model;
-
-                // Should have removed "test" - that was our
-                // mock domain object's id.
-                expect(result.composition).toEqual(["a", "b", "c", "test"]);
-
-                // Finally, should have persisted
                 expect(mockPersistence.persist).toHaveBeenCalled();
             });
 
         });
     }
-);
\ No newline at end of file
+);
diff --git a/platform/entanglement/src/services/LinkService.js b/platform/entanglement/src/services/LinkService.js
index ae02675eeb..ab648611e1 100644
--- a/platform/entanglement/src/services/LinkService.js
+++ b/platform/entanglement/src/services/LinkService.js
@@ -45,7 +45,7 @@ define(
             if (parentCandidate.getId() === object.getId()) {
                 return false;
             }
-            if (parentCandidate.getModel().composition.indexOf(object.getId()) !== -1) {
+            if ((parentCandidate.getModel().composition || []).indexOf(object.getId()) !== -1) {
                 return false;
             }
             return this.policyService.allow(
diff --git a/platform/entanglement/test/services/LinkServiceSpec.js b/platform/entanglement/test/services/LinkServiceSpec.js
index b9bbe62c58..7f430320a2 100644
--- a/platform/entanglement/test/services/LinkServiceSpec.js
+++ b/platform/entanglement/test/services/LinkServiceSpec.js
@@ -55,11 +55,18 @@ define(
                         name: 'object'
                     });
                     parentCandidate = domainObjectFactory({
-                        name: 'parentCandidate'
+                        name: 'parentCandidate',
+                        capabilities: {
+                            composition: jasmine.createSpyObj(
+                                'composition',
+                                ['invoke', 'add']
+                            )
+                        }
                     });
                     validate = function () {
                         return linkService.validate(object, parentCandidate);
                     };
+                    mockPolicyService.allow.andReturn(true);
                 });
 
                 it("does not allow invalid parentCandidate", function () {
@@ -81,6 +88,23 @@ define(
                     expect(validate()).toBe(false);
                 });
 
+                it("does not allow parents that contains object", function () {
+                    object.id = 'abc';
+                    parentCandidate.id = 'xyz';
+                    parentCandidate.model.composition = ['abc'];
+                    expect(validate()).toBe(false);
+                });
+
+                it("does not allow parents without composition", function () {
+                    parentCandidate = domainObjectFactory({
+                        name: 'parentCandidate'
+                    });
+                    object.id = 'abc';
+                    parentCandidate.id = 'xyz';
+                    parentCandidate.model.composition = undefined;
+                    expect(validate()).toBe(false);
+                });
+
                 describe("defers to policyService", function () {
                     beforeEach(function () {
                         object.id = 'abc';
@@ -121,16 +145,16 @@ define(
                     linkedObject,
                     parentModel,
                     parentObject,
-                    mutationPromise,
                     compositionPromise,
                     persistencePromise,
+                    addPromise,
                     compositionCapability,
                     persistenceCapability;
 
                 beforeEach(function () {
-                    mutationPromise = new ControlledPromise();
                     compositionPromise = new ControlledPromise();
                     persistencePromise = new ControlledPromise();
+                    addPromise = new ControlledPromise();
                     persistenceCapability = jasmine.createSpyObj(
                         'persistenceCapability',
                         ['persist']
@@ -138,9 +162,10 @@ define(
                     persistenceCapability.persist.andReturn(persistencePromise);
                     compositionCapability = jasmine.createSpyObj(
                         'compositionCapability',
-                        ['invoke']
+                        ['invoke', 'add']
                     );
                     compositionCapability.invoke.andReturn(compositionPromise);
+                    compositionCapability.add.andReturn(addPromise);
                     parentModel = {
                         composition: []
                     };
@@ -151,7 +176,7 @@ define(
                             mutation: {
                                 invoke: function (mutator) {
                                     mutator(parentModel);
-                                    return mutationPromise;
+                                    return new ControlledPromise();
                                 }
                             },
                             persistence: persistenceCapability,
@@ -172,20 +197,17 @@ define(
                 });
 
 
-                it("modifies parent model composition", function () {
-                    expect(parentModel.composition.length).toBe(0);
+                it("adds to the parent's composition", function () {
+                    expect(compositionCapability.add).not.toHaveBeenCalled();
                     linkService.perform(object, parentObject);
-                    expect(parentObject.useCapability).toHaveBeenCalledWith(
-                        'mutation',
-                        jasmine.any(Function)
-                    );
-                    expect(parentModel.composition).toContain('xyz');
+                    expect(compositionCapability.add)
+                        .toHaveBeenCalledWith(object);
                 });
 
                 it("persists parent", function () {
                     linkService.perform(object, parentObject);
-                    expect(mutationPromise.then).toHaveBeenCalled();
-                    mutationPromise.resolve();
+                    expect(addPromise.then).toHaveBeenCalled();
+                    addPromise.resolve();
                     expect(parentObject.getCapability)
                         .toHaveBeenCalledWith('persistence');
                     expect(persistenceCapability.persist).toHaveBeenCalled();
@@ -197,7 +219,7 @@ define(
                     whenComplete = jasmine.createSpy('whenComplete');
                     returnPromise.then(whenComplete);
 
-                    mutationPromise.resolve();
+                    addPromise.resolve();
                     persistencePromise.resolve();
                     compositionPromise.resolve([linkedObject]);
                     expect(whenComplete).toHaveBeenCalledWith(linkedObject);

From ba6e542d08c1acabb3cd1869e97cb1a80c77fa73 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 2 Sep 2015 11:16:19 -0700
Subject: [PATCH 190/266] [Persistence] Load models from multiple spaces

---
 platform/core/bundle.json                     | 18 +++++++++++-
 .../core/src/models/PersistedModelProvider.js | 28 ++++++++++++++-----
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/platform/core/bundle.json b/platform/core/bundle.json
index 4b33f48f35..35b76c8a32 100644
--- a/platform/core/bundle.json
+++ b/platform/core/bundle.json
@@ -63,7 +63,12 @@
                 "provides": "modelService",
                 "type": "provider",
                 "implementation": "models/PersistedModelProvider.js",
-                "depends": [ "persistenceService", "$q", "PERSISTENCE_SPACE" ]
+                "depends": [
+                    "persistenceService",
+                    "$q",
+                    "PERSISTENCE_SPACE",
+                    "ADDITIONAL_PERSISTENCE_SPACES"
+                ]
             },
             {
                 "provides": "modelService",
@@ -215,6 +220,17 @@
                     "composition": []
                 }
             }
+        ],
+        "constants": [
+            {
+                "key": "PERSISTENCE_SPACE",
+                "value": "mct"
+            },
+            {
+                "key": "ADDITIONAL_PERSISTENCE_SPACES",
+                "value": [],
+                "description": "An array of additional persistence spaces to load models from."
+            }
         ]
     }
 }
diff --git a/platform/core/src/models/PersistedModelProvider.js b/platform/core/src/models/PersistedModelProvider.js
index 59ab020b14..3acd5a6ae6 100644
--- a/platform/core/src/models/PersistedModelProvider.js
+++ b/platform/core/src/models/PersistedModelProvider.js
@@ -39,23 +39,37 @@ define(
          * @param {PersistenceService} persistenceService the service in which
          *        domain object models are persisted.
          * @param $q Angular's $q service, for working with promises
-         * @param {string} SPACE the name of the persistence space from which
-         *        models should be retrieved.
+         * @param {string} space the name of the persistence space(s)
+         *        from which models should be retrieved.
+         * @param {string} spaces additional persistence spaces to use
          */
-        function PersistedModelProvider(persistenceService, $q, space) {
+        function PersistedModelProvider(persistenceService, $q, space, spaces) {
             this.persistenceService = persistenceService;
             this.$q = $q;
-            this.space = space;
+            this.spaces = [space].concat(spaces || []);
+        }
+
+        // Take the most recently modified model, for cases where
+        // multiple persistence spaces return models.
+        function takeMostRecent(modelA, modelB) {
+            return (!modelA || modelA.modified === undefined) ? modelB :
+                    (!modelB || modelB.modified === undefined) ? modelA :
+                            modelA.modified > modelB.modified ? modelA :
+                                    modelB;
         }
 
         PersistedModelProvider.prototype.getModels = function (ids) {
             var persistenceService = this.persistenceService,
                 $q = this.$q,
-                space = this.space;
+                spaces = this.spaces;
 
-            // Load a single object model from persistence
+            // Load a single object model from any persistence spaces
             function loadModel(id) {
-                return persistenceService.readObject(space, id);
+                return $q.all(spaces.map(function (space) {
+                    return persistenceService.readObject(space, id);
+                })).then(function (models) {
+                    return models.reduce(takeMostRecent);
+                });
             }
 
             // Package the result as id->model

From b1238b0c96272788f991488e2a2c8f7ff9a1ff2b Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 2 Sep 2015 11:37:47 -0700
Subject: [PATCH 191/266] [Composition] Return newly-contextualized object

After adding to composition, return the newly-contextualized
object; this is regularly used by other services.
---
 .../browse/src/creation/CreationService.js    | 12 +--------
 .../src/capabilities/CompositionCapability.js | 25 ++++++++++++++++---
 .../entanglement/src/services/LinkService.js  |  8 +++---
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/platform/commonUI/browse/src/creation/CreationService.js b/platform/commonUI/browse/src/creation/CreationService.js
index 984a3dbe85..baac8488c3 100644
--- a/platform/commonUI/browse/src/creation/CreationService.js
+++ b/platform/commonUI/browse/src/creation/CreationService.js
@@ -97,17 +97,7 @@ define(
                     }
 
                     return parentPersistence.persist().then(function () {
-                        // Locate and return new Object in context of parent.
-                        return parent
-                            .useCapability('composition')
-                            .then(function (children) {
-                                var i;
-                                for (i = 0; i < children.length; i += 1) {
-                                    if (children[i].getId() === id) {
-                                        return children[i];
-                                    }
-                                }
-                            });
+                        return result;
                     });
                 });
             }
diff --git a/platform/core/src/capabilities/CompositionCapability.js b/platform/core/src/capabilities/CompositionCapability.js
index 1bf7f790f1..8fcca62174 100644
--- a/platform/core/src/capabilities/CompositionCapability.js
+++ b/platform/core/src/capabilities/CompositionCapability.js
@@ -59,11 +59,27 @@ define(
          * @param {DomainObject|string} domainObject the domain object to add,
          *        or simply its identifier
          * @param {number} [index] the index at which to add the object
-         * @returns {Promise.<boolean>} the mutation result
+         * @returns {Promise.<DomainObject>} a promise for the added object
+         *          in its new context
          */
         CompositionCapability.prototype.add = function (domainObject, index) {
-            var id = typeof domainObject === 'string' ?
-                    domainObject : domainObject.getId();
+            var self = this,
+                id = typeof domainObject === 'string' ?
+                        domainObject : domainObject.getId();
+
+            // Find the object with the above id, used to contextualize
+            function findObject(objects) {
+                var i;
+                for (i = 0; i < objects.length; i += 1) {
+                    if (objects[i].getId() === id) {
+                        return objects[i];
+                    }
+                }
+            }
+
+            function contextualize(mutationResult) {
+                return mutationResult && self.invoke().then(findObject);
+            }
 
             function addIdToModel(model) {
                 var composition = model.composition,
@@ -90,7 +106,8 @@ define(
                 model.composition.splice(index, 0, id);
             }
 
-            return this.domainObject.useCapability('mutation', addIdToModel);
+            return this.domainObject.useCapability('mutation', addIdToModel)
+                    .then(contextualize);
         };
 
         /**
diff --git a/platform/entanglement/src/services/LinkService.js b/platform/entanglement/src/services/LinkService.js
index ab648611e1..bfebddcbd9 100644
--- a/platform/entanglement/src/services/LinkService.js
+++ b/platform/entanglement/src/services/LinkService.js
@@ -68,10 +68,10 @@ define(
                 }
             }
 
-            return composition.add(object).then(function () {
-                return parentObject.getCapability('persistence').persist();
-            }).then(function getObjectWithNewContext() {
-                return composition.invoke().then(findChild);
+            return composition.add(object).then(function (result) {
+                return parentObject.getCapability('persistence')
+                    .persist()
+                    .then(function () { return result; });
             });
         };
 

From b2649de64916ddfaa9d12d5beaaf2f7cb6e4c975 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 2 Sep 2015 11:45:52 -0700
Subject: [PATCH 192/266] [Composition] Update specs

Update specs for changes to the return value of
composition.add, nasa/openmctweb#97
---
 .../test/creation/CreationServiceSpec.js      |  2 +-
 .../core/src/models/PersistedModelProvider.js |  8 ++---
 .../test/models/PersistedModelProviderSpec.js | 31 ++++++++++++++++---
 .../entanglement/src/services/LinkService.js  |  9 ------
 .../test/services/LinkServiceSpec.js          |  4 +--
 5 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/platform/commonUI/browse/test/creation/CreationServiceSpec.js b/platform/commonUI/browse/test/creation/CreationServiceSpec.js
index d492b51f8f..bc26c8be23 100644
--- a/platform/commonUI/browse/test/creation/CreationServiceSpec.js
+++ b/platform/commonUI/browse/test/creation/CreationServiceSpec.js
@@ -161,7 +161,7 @@ define(
                     mockDomainObject.getId.andReturn(id);
                     mockCompositionCapability.invoke
                         .andReturn(mockPromise([mockDomainObject]));
-                    return mockPromise(true);
+                    return mockPromise(mockDomainObject);
                 });
 
                 // Should find it in the composition
diff --git a/platform/core/src/models/PersistedModelProvider.js b/platform/core/src/models/PersistedModelProvider.js
index 3acd5a6ae6..a10f818179 100644
--- a/platform/core/src/models/PersistedModelProvider.js
+++ b/platform/core/src/models/PersistedModelProvider.js
@@ -52,10 +52,10 @@ define(
         // Take the most recently modified model, for cases where
         // multiple persistence spaces return models.
         function takeMostRecent(modelA, modelB) {
-            return (!modelA || modelA.modified === undefined) ? modelB :
-                    (!modelB || modelB.modified === undefined) ? modelA :
-                            modelA.modified > modelB.modified ? modelA :
-                                    modelB;
+            return (!modelB || modelB.modified === undefined) ? modelA :
+                    (!modelA || modelA.modified === undefined) ? modelB :
+                            modelB.modified > modelA.modified ? modelB :
+                                    modelA;
         }
 
         PersistedModelProvider.prototype.getModels = function (ids) {
diff --git a/platform/core/test/models/PersistedModelProviderSpec.js b/platform/core/test/models/PersistedModelProviderSpec.js
index 20f0e89649..8dcb58a400 100644
--- a/platform/core/test/models/PersistedModelProviderSpec.js
+++ b/platform/core/test/models/PersistedModelProviderSpec.js
@@ -32,7 +32,9 @@ define(
         describe("The persisted model provider", function () {
             var mockQ,
                 mockPersistenceService,
-                SPACE = "some space",
+                SPACE = "space0",
+                spaces = [ "space1" ],
+                modTimes,
                 provider;
 
             function mockPromise(value) {
@@ -51,12 +53,14 @@ define(
             }
 
             beforeEach(function () {
+                modTimes = {};
                 mockQ = { when: mockPromise, all: mockAll };
                 mockPersistenceService = {
                     readObject: function (space, id) {
                         return mockPromise({
                             space: space,
-                            id: id
+                            id: id,
+                            modified: (modTimes[space] || {})[id]
                         });
                     }
                 };
@@ -64,7 +68,8 @@ define(
                 provider = new PersistedModelProvider(
                     mockPersistenceService,
                     mockQ,
-                    SPACE
+                    SPACE,
+                    spaces
                 );
             });
 
@@ -82,6 +87,24 @@ define(
                 });
             });
 
+            it("reads object models from multiple spaces", function () {
+                var models;
+
+                modTimes.space1 = {
+                    'x': 12321
+                };
+
+                provider.getModels(["a", "x", "zz"]).then(function (m) {
+                    models = m;
+                });
+
+                expect(models).toEqual({
+                    a: { space: SPACE, id: "a" },
+                    x: { space: 'space1', id: "x", modified: 12321 },
+                    zz: { space: SPACE, id: "zz" }
+                });
+            });
+
         });
     }
-);
\ No newline at end of file
+);
diff --git a/platform/entanglement/src/services/LinkService.js b/platform/entanglement/src/services/LinkService.js
index bfebddcbd9..8a0613d9b5 100644
--- a/platform/entanglement/src/services/LinkService.js
+++ b/platform/entanglement/src/services/LinkService.js
@@ -59,15 +59,6 @@ define(
             // Note that this was checked-for explicitly during validate step
             var composition = parentObject.getCapability('composition');
 
-            function findChild(children) {
-                var i;
-                for (i = 0; i < children.length; i += 1) {
-                    if (children[i].getId() === object.getId()) {
-                        return children[i];
-                    }
-                }
-            }
-
             return composition.add(object).then(function (result) {
                 return parentObject.getCapability('persistence')
                     .persist()
diff --git a/platform/entanglement/test/services/LinkServiceSpec.js b/platform/entanglement/test/services/LinkServiceSpec.js
index 7f430320a2..32bb4c0a7a 100644
--- a/platform/entanglement/test/services/LinkServiceSpec.js
+++ b/platform/entanglement/test/services/LinkServiceSpec.js
@@ -207,7 +207,7 @@ define(
                 it("persists parent", function () {
                     linkService.perform(object, parentObject);
                     expect(addPromise.then).toHaveBeenCalled();
-                    addPromise.resolve();
+                    addPromise.resolve(linkedObject);
                     expect(parentObject.getCapability)
                         .toHaveBeenCalledWith('persistence');
                     expect(persistenceCapability.persist).toHaveBeenCalled();
@@ -219,7 +219,7 @@ define(
                     whenComplete = jasmine.createSpy('whenComplete');
                     returnPromise.then(whenComplete);
 
-                    addPromise.resolve();
+                    addPromise.resolve(linkedObject);
                     persistencePromise.resolve();
                     compositionPromise.resolve([linkedObject]);
                     expect(whenComplete).toHaveBeenCalledWith(linkedObject);

From 17e9e87a2b592e10feaf6cc98ff25cfae1cdd4d8 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 2 Sep 2015 11:56:37 -0700
Subject: [PATCH 193/266] [Composition] Test composition.add

Add test case to verify the behavior of the add method
of the composition capability.
---
 .../src/capabilities/CompositionCapability.js | 22 ++---
 .../capabilities/CompositionCapabilitySpec.js | 96 ++++++++++++++++++-
 2 files changed, 105 insertions(+), 13 deletions(-)

diff --git a/platform/core/src/capabilities/CompositionCapability.js b/platform/core/src/capabilities/CompositionCapability.js
index 8fcca62174..925e27ba79 100644
--- a/platform/core/src/capabilities/CompositionCapability.js
+++ b/platform/core/src/capabilities/CompositionCapability.js
@@ -65,7 +65,10 @@ define(
         CompositionCapability.prototype.add = function (domainObject, index) {
             var self = this,
                 id = typeof domainObject === 'string' ?
-                        domainObject : domainObject.getId();
+                        domainObject : domainObject.getId(),
+                model = self.domainObject.getModel(),
+                composition = model.composition,
+                oldIndex = composition.indexOf(id);
 
             // Find the object with the above id, used to contextualize
             function findObject(objects) {
@@ -82,16 +85,6 @@ define(
             }
 
             function addIdToModel(model) {
-                var composition = model.composition,
-                    oldIndex = composition.indexOf(id);
-
-                // If no index has been specified already and the id is already
-                // present, nothing to do. If the id is already at that index,
-                // also nothing to do, so cancel mutation.
-                if ((isNaN(index) && oldIndex !== -1) || (index === oldIndex)) {
-                    return false;
-                }
-
                 // Pick a specific index if needed.
                 index = isNaN(index) ? composition.length : index;
                 // Also, don't put past the end of the array
@@ -106,6 +99,13 @@ define(
                 model.composition.splice(index, 0, id);
             }
 
+            // If no index has been specified already and the id is already
+            // present, nothing to do. If the id is already at that index,
+            // also nothing to do, so cancel mutation.
+            if ((isNaN(index) && oldIndex !== -1) || (index === oldIndex)) {
+                return contextualize(true);
+            }
+
             return this.domainObject.useCapability('mutation', addIdToModel)
                     .then(contextualize);
         };
diff --git a/platform/core/test/capabilities/CompositionCapabilitySpec.js b/platform/core/test/capabilities/CompositionCapabilitySpec.js
index 518cb2e795..08b135b172 100644
--- a/platform/core/test/capabilities/CompositionCapabilitySpec.js
+++ b/platform/core/test/capabilities/CompositionCapabilitySpec.js
@@ -47,7 +47,7 @@ define(
             // so support that, but don't introduce complication of
             // native promises.
             function mockPromise(value) {
-                return {
+                return (value || {}).then ? value : {
                     then: function (callback) {
                         return mockPromise(callback(value));
                     }
@@ -111,6 +111,98 @@ define(
 
             });
 
+            it("allows domain objects to be added", function () {
+                var result,
+                    testModel = { composition: [] },
+                    mockChild = jasmine.createSpyObj("child", DOMAIN_OBJECT_METHODS);
+
+                mockDomainObject.getModel.andReturn(testModel);
+                mockObjectService.getObjects.andReturn(mockPromise({a: mockChild}));
+                mockChild.getCapability.andReturn(undefined);
+                mockChild.getId.andReturn('a');
+
+                mockDomainObject.useCapability.andCallFake(function (key, mutator) {
+                    if (key === 'mutation') {
+                        mutator(testModel);
+                        return mockPromise(true);
+                    }
+                });
+
+                composition.add(mockChild).then(function (domainObject) {
+                    result = domainObject;
+                });
+
+                expect(testModel.composition).toEqual(['a']);
+
+                // Should have returned the added object in its new context
+                expect(result.getId()).toEqual('a');
+                expect(result.getCapability('context')).toBeDefined();
+                expect(result.getCapability('context').getParent())
+                    .toEqual(mockDomainObject);
+            });
+
+            it("does not re-add IDs which are already present", function () {
+                var result,
+                    testModel = { composition: [ 'a' ] },
+                    mockChild = jasmine.createSpyObj("child", DOMAIN_OBJECT_METHODS);
+
+                mockDomainObject.getModel.andReturn(testModel);
+                mockObjectService.getObjects.andReturn(mockPromise({a: mockChild}));
+                mockChild.getCapability.andReturn(undefined);
+                mockChild.getId.andReturn('a');
+
+                mockDomainObject.useCapability.andCallFake(function (key, mutator) {
+                    if (key === 'mutation') {
+                        mutator(testModel);
+                        return mockPromise(true);
+                    }
+                });
+
+                composition.add(mockChild).then(function (domainObject) {
+                    result = domainObject;
+                });
+
+                // Still just 'a'
+                expect(testModel.composition).toEqual(['a']);
+
+                // Should have returned the added object in its new context
+                expect(result.getId()).toEqual('a');
+                expect(result.getCapability('context')).toBeDefined();
+                expect(result.getCapability('context').getParent())
+                    .toEqual(mockDomainObject);
+            });
+
+            it("can add objects at a specified index", function () {
+                var result,
+                    testModel = { composition: [ 'a', 'b', 'c' ] },
+                    mockChild = jasmine.createSpyObj("child", DOMAIN_OBJECT_METHODS);
+
+                mockDomainObject.getModel.andReturn(testModel);
+                mockObjectService.getObjects.andReturn(mockPromise({a: mockChild}));
+                mockChild.getCapability.andReturn(undefined);
+                mockChild.getId.andReturn('a');
+
+                mockDomainObject.useCapability.andCallFake(function (key, mutator) {
+                    if (key === 'mutation') {
+                        mutator(testModel);
+                        return mockPromise(true);
+                    }
+                });
+
+                composition.add(mockChild, 1).then(function (domainObject) {
+                    result = domainObject;
+                });
+
+                // Still just 'a'
+                expect(testModel.composition).toEqual(['b', 'a', 'c']);
+
+                // Should have returned the added object in its new context
+                expect(result.getId()).toEqual('a');
+                expect(result.getCapability('context')).toBeDefined();
+                expect(result.getCapability('context').getParent())
+                    .toEqual(mockDomainObject);
+            });
+
         });
     }
-);
\ No newline at end of file
+);

From 3310016264c653dbca14736e0f04e33381bcea78 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 2 Sep 2015 12:01:43 -0700
Subject: [PATCH 194/266] [Properties] Hide rows without controls

Hide rows for domain object properties that do not have
associated controls from the Edit Properties dialog;
follow up for nasa/openmctweb#92
---
 platform/commonUI/edit/src/actions/PropertiesDialog.js      | 3 +++
 platform/commonUI/edit/test/actions/PropertiesDialogSpec.js | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/platform/commonUI/edit/src/actions/PropertiesDialog.js b/platform/commonUI/edit/src/actions/PropertiesDialog.js
index 97ee1f5c0a..f461c0b8e1 100644
--- a/platform/commonUI/edit/src/actions/PropertiesDialog.js
+++ b/platform/commonUI/edit/src/actions/PropertiesDialog.js
@@ -54,6 +54,9 @@ define(
                         var row = Object.create(property.getDefinition());
                         row.key = index;
                         return row;
+                    }).filter(function (row) {
+                        // Only show properties which are editable
+                        return row.control;
                     })
                 }]
             };
diff --git a/platform/commonUI/edit/test/actions/PropertiesDialogSpec.js b/platform/commonUI/edit/test/actions/PropertiesDialogSpec.js
index 7269ae64a3..a9077e8ec6 100644
--- a/platform/commonUI/edit/test/actions/PropertiesDialogSpec.js
+++ b/platform/commonUI/edit/test/actions/PropertiesDialogSpec.js
@@ -39,7 +39,7 @@ define(
                     return {
                         getValue: function (model) { return model[k]; },
                         setValue: function (model, v) { model[k] = v; },
-                        getDefinition: function () { return {}; }
+                        getDefinition: function () { return { control: 'textfield '}; }
                     };
                 });
 

From bb1a02c8bd48fca30b9b7b2462d03ebad010daa4 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 2 Sep 2015 18:02:58 -0700
Subject: [PATCH 195/266] [Frontend] Significant re-factoring of CSS and markup

open #95
IN-PROGRESS!;
Mostly buttons and menus classes (s-btn and s-menu);
Removed unused templates and .css files;
Normalized some button containers;
---
 platform/commonUI/browse/bundle.json          |    6 -
 .../res/templates/create/create-button.html   |    7 +-
 .../browse/res/templates/topbar-browse.html   |   36 -
 .../commonUI/dialog/res/templates/dialog.html |    6 +-
 .../dialog/res/templates/overlay-options.html |    2 +-
 .../res/templates/edit-action-buttons.html    |    2 +-
 .../general/res/css/theme-espresso.css        | 5808 ++++++++---------
 .../commonUI/general/res/sass/_autoflow.scss  |    4 +-
 .../commonUI/general/res/sass/_constants.scss |    5 +-
 .../commonUI/general/res/sass/_icons.scss     |    2 +-
 platform/commonUI/general/res/sass/_main.scss |   36 +-
 .../commonUI/general/res/sass/_mixins.scss    |   34 +-
 .../general/res/sass/controls/_buttons.scss   |  154 +-
 .../general/res/sass/controls/_controls.scss  |  135 +-
 .../general/res/sass/controls/_menus.scss     |   47 +-
 platform/commonUI/general/res/sass/forms.scss |   40 -
 platform/commonUI/general/res/sass/items.scss |   33 -
 .../general/res/sass/mobile/_layout.scss      |    2 +-
 .../general/res/sass/overlay/_overlay.scss    |   16 +-
 .../general/res/sass/theme-espresso.scss      |   11 +
 .../res/sass/themes/_theme-espresso.scss      |    8 +-
 .../general/res/sass/user-environ/_frame.scss |    4 +-
 .../res/sass/user-environ/_layout.scss        |   22 +-
 .../res/templates/controls/action-button.html |    2 +-
 .../res/templates/controls/action-group.html  |   13 +-
 .../res/templates/controls/switcher.html      |    8 +-
 .../res/templates/menu/context-menu.html      |    2 +-
 .../imagery/res/templates/imagery.html        |   12 +-
 platform/features/layout/bundle.json          |    2 +-
 .../features/plot/res/templates/plot.html     |   11 +-
 .../forms/res/templates/controls/button.html  |    2 +-
 .../forms/res/templates/controls/color.html   |    6 +-
 .../res/templates/controls/menu-button.html   |    8 +-
 platform/search/res/templates/search.html     |    2 +-
 34 files changed, 3022 insertions(+), 3466 deletions(-)
 delete mode 100644 platform/commonUI/browse/res/templates/topbar-browse.html
 delete mode 100644 platform/commonUI/general/res/sass/forms.scss
 delete mode 100644 platform/commonUI/general/res/sass/items.scss

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index c5ee5e7198..9b82d32d4a 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -45,12 +45,6 @@
                 "templateUrl": "templates/create/locator.html"
             }
         ],
-        "templates": [
-            {
-                "key": "topbar-browse",
-                "templateUrl": "templates/topbar-browse.html"
-            }
-        ],
         "representations": [
             {
                 "key": "browse-object",
diff --git a/platform/commonUI/browse/res/templates/create/create-button.html b/platform/commonUI/browse/res/templates/create/create-button.html
index 527afd9882..67a0294111 100644
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@@ -20,10 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
-    <div class="btn btn-menu create-btn major" ng-click="createController.toggle()">
-	    Create
+    <div class="s-menu major create-btn" ng-click="createController.toggle()">
+		<span class="ui-symbol icon type-icon">&#x2b;</span>
+		<span class="title-label">Create</span>
     </div>
-    <div class="menu dropdown super-menu" ng-show="createController.isActive()">
+    <div class="menu super-menu" ng-show="createController.isActive()">
         <mct-representation mct-object="domainObject" key="'create-menu'">
         </mct-representation>
     </div>
diff --git a/platform/commonUI/browse/res/templates/topbar-browse.html b/platform/commonUI/browse/res/templates/topbar-browse.html
deleted file mode 100644
index 9549a3e17f..0000000000
--- a/platform/commonUI/browse/res/templates/topbar-browse.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--
- Open MCT Web, Copyright (c) 2014-2015, United States Government
- as represented by the Administrator of the National Aeronautics and Space
- Administration. All rights reserved.
-
- Open MCT Web is licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance with the License.
- You may obtain a copy of the License at
- http://www.apache.org/licenses/LICENSE-2.0.
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- License for the specific language governing permissions and limitations
- under the License.
-
- Open MCT Web includes source code licensed under additional open source
- licenses. See the Open Source Licenses file (LICENSES.md) included with
- this source code distribution or the Licensing information page available
- at runtime from the About dialog for additional information.
--->
-<div class='top-bar browse abs'>
-    <!-- TO-DO: replace JS placeholders for click actions -->
-    <div class='browse-main bar abs left'>
-        <a class="menu-element btn btn-menu browse-btn" onclick="alert('Not yet functional. This will allow filtering of browsed objects and search context.');">
-            <span class='ui-symbol badge major' href=''>*</span>Browse All<span class='ui-symbol invoke-menu'>v</span>
-        </a>
-        <input type='text' class='control filter' name='filter-available'/>
-        <a class='icon icon-filter ui-symbol' onclick="alert('Not yet functional. This will initiate a search.');">M</a>
-    </div>
-    <div class='icon-buttons-main bar abs right'>
-        <a class='ui-symbol icon major alert' onclick="alert('Not yet functional. This will allow updating of domain objects that need to be refreshed.');">!<span id='alert-actions-menu' class='ui-symbol invoke-menu'>v</span></a>
-        <!--a class='ui-symbol icon major profile' href=''>P<span id='profile-actions-menu' class='ui-symbol invoke-menu'>v</span></a-->
-        <a class='ui-symbol icon major settings' onclick="alert('Not yet functional. This will allow access to application configuration settings.');">G<span id='settings-actions-menu' class='ui-symbol invoke-menu'>v</span></a>
-    </div>
-</div>
\ No newline at end of file
diff --git a/platform/commonUI/dialog/res/templates/dialog.html b/platform/commonUI/dialog/res/templates/dialog.html
index 1bea0290e7..e3379b034e 100644
--- a/platform/commonUI/dialog/res/templates/dialog.html
+++ b/platform/commonUI/dialog/res/templates/dialog.html
@@ -34,13 +34,13 @@
     </div>
 </div>
 <div class="abs bottom-bar">
-    <a class='btn lg major'
-       href=''
+    <a class='s-btn major'
        ng-class="{ disabled: !createForm.$valid }"
        ng-click="ngModel.confirm()">
         OK
     </a>
-    <a class='btn lg subtle' href='' ng-click="ngModel.cancel()">
+    <a class='s-btn'
+       ng-click="ngModel.cancel()">
         Cancel
     </a>
 </div>
\ No newline at end of file
diff --git a/platform/commonUI/dialog/res/templates/overlay-options.html b/platform/commonUI/dialog/res/templates/overlay-options.html
index 9c3881d9a2..2f572e20a5 100644
--- a/platform/commonUI/dialog/res/templates/overlay-options.html
+++ b/platform/commonUI/dialog/res/templates/overlay-options.html
@@ -35,7 +35,7 @@
     <div class="abs bottom-bar">
         <a ng-repeat="option in ngModel.dialog.options"
            href=''
-           class="btn lg"
+           class="s-btn lg"
            title="{{option.description}}"
            ng-click="ngModel.confirm(option.key)"
            ng-class="{ major: $first, subtle: !$first }">
diff --git a/platform/commonUI/edit/res/templates/edit-action-buttons.html b/platform/commonUI/edit/res/templates/edit-action-buttons.html
index 264ad80e3a..d2f99e9c04 100644
--- a/platform/commonUI/edit/res/templates/edit-action-buttons.html
+++ b/platform/commonUI/edit/res/templates/edit-action-buttons.html
@@ -21,7 +21,7 @@
 -->
 <span ng-controller="EditActionController">
     <span ng-repeat="currentAction in editActions">
-        <a class='btn'
+        <a class='s-btn'
            ng-click="currentAction.perform()"
            ng-class="{ major: $index === 0, subtle: $index !== 0 }">
             {{currentAction.getMetadata().name}}
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 2d329797db..c93867b483 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -20,6 +20,62 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline; }
+
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html {
+  line-height: 1; }
+
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+ol, ul {
+  list-style: none; }
+
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle; }
+
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q, blockquote {
+  quotes: none; }
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  q:before, q:after, blockquote:before, blockquote:after {
+    content: "";
+    content: none; }
+
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+a img {
+  border: none; }
+
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+  display: block; }
+
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -77,105 +133,6 @@
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* CONSTANTS */
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 5, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  font-size: 100%;
-  vertical-align: baseline; }
-
-/* line 22, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
-html {
-  line-height: 1; }
-
-/* line 24, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
-ol, ul {
-  list-style: none; }
-
-/* line 26, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
-table {
-  border-collapse: collapse;
-  border-spacing: 0; }
-
-/* line 28, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
-caption, th, td {
-  text-align: left;
-  font-weight: normal;
-  vertical-align: middle; }
-
-/* line 30, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
-q, blockquote {
-  quotes: none; }
-  /* line 103, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
-  q:before, q:after, blockquote:before, blockquote:after {
-    content: "";
-    content: none; }
-
-/* line 32, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
-a img {
-  border: none; }
-
-/* line 116, ../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
-article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
-  display: block; }
-
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -228,6 +185,54 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* CONSTANTS */
+/*
+@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
+	background: red;
+	display: inline-block;
+}*/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -412,7 +417,7 @@ mct-container {
   display: block; }
 
 /* line 78, ../sass/_global.scss */
-.abs, .btn-menu span.l-click-area {
+.abs, .s-menu span.l-click-area {
   position: absolute;
   top: 0;
   right: 0;
@@ -461,7 +466,7 @@ mct-container {
   display: none !important; }
 
 /* line 127, ../sass/_global.scss */
-.paused:not(.s-btn):not(.icon-btn) {
+.paused:not(.s-btn):not(.s-menu) {
   border-color: #c56f01 !important;
   color: #c56f01 !important; }
 
@@ -503,660 +508,6 @@ mct-container {
 .ui-symbol {
   font-family: 'symbolsfont'; }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 32, ../sass/user-environ/_layout.scss */
-.holder-all {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0; }
-
-/* line 40, ../sass/user-environ/_layout.scss */
-.browse-area,
-.edit-area,
-.editor {
-  position: absolute; }
-
-/* line 46, ../sass/user-environ/_layout.scss */
-.editor {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px; }
-
-/* line 50, ../sass/user-environ/_layout.scss */
-.contents {
-  box-sizing: border-box;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0; }
-  /* line 58, ../sass/user-environ/_layout.scss */
-  .contents.nomargin {
-    right: 0px;
-    bottom: 0px;
-    left: 0px; }
-
-/* line 67, ../sass/user-environ/_layout.scss */
-.bar .icon.major {
-  margin-right: 5px; }
-/* line 70, ../sass/user-environ/_layout.scss */
-.bar.abs, .btn-menu span.bar.l-click-area {
-  text-wrap: none;
-  white-space: nowrap; }
-  /* line 73, ../sass/user-environ/_layout.scss */
-  .bar.abs.left, .btn-menu span.bar.left.l-click-area,
-  .bar.abs .left,
-  .btn-menu span.bar.l-click-area .left {
-    width: 45%;
-    right: auto; }
-  /* line 78, ../sass/user-environ/_layout.scss */
-  .bar.abs.right, .btn-menu span.bar.right.l-click-area,
-  .bar.abs .right,
-  .btn-menu span.bar.l-click-area .right {
-    width: 45%;
-    left: auto;
-    text-align: right; }
-    /* line 83, ../sass/user-environ/_layout.scss */
-    .bar.abs.right .icon.major, .btn-menu span.bar.right.l-click-area .icon.major,
-    .bar.abs .right .icon.major,
-    .btn-menu span.bar.l-click-area .right .icon.major {
-      margin-left: 15px; }
-  /* line 89, ../sass/user-environ/_layout.scss */
-  .bar.abs .l-flex .left, .btn-menu span.bar.l-click-area .l-flex .left,
-  .bar.abs .l-flex .right,
-  .btn-menu span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .btn-menu span.bar.l-flex.l-click-area .left,
-  .bar.abs.l-flex .right,
-  .btn-menu span.bar.l-flex.l-click-area .right {
-    width: auto; }
-
-/* line 98, ../sass/user-environ/_layout.scss */
-.user-environ .browse-area,
-.user-environ .edit-area,
-.user-environ .editor {
-  top: 39px;
-  right: 10px;
-  bottom: 35px;
-  left: 10px; }
-/* line 109, ../sass/user-environ/_layout.scss */
-.user-environ .browse-area > .contents,
-.user-environ .edit-area > .contents {
-  left: 0;
-  right: 0; }
-/* line 115, ../sass/user-environ/_layout.scss */
-.user-environ .edit-area {
-  top: 45px; }
-  /* line 118, ../sass/user-environ/_layout.scss */
-  .user-environ .edit-area .tool-bar {
-    bottom: auto;
-    height: 30px;
-    line-height: 25px; }
-  /* line 123, ../sass/user-environ/_layout.scss */
-  .user-environ .edit-area .work-area {
-    top: 40px; }
-/* line 128, ../sass/user-environ/_layout.scss */
-.user-environ .ue-bottom-bar {
-  overflow: hidden;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: auto;
-  height: auto;
-  top: auto;
-  height: 25px; }
-  /* line 133, ../sass/user-environ/_layout.scss */
-  .user-environ .ue-bottom-bar .status-holder {
-    z-index: 1; }
-  /* line 137, ../sass/user-environ/_layout.scss */
-  .user-environ .ue-bottom-bar .app-logo {
-    left: auto;
-    width: 105px;
-    z-index: 2; }
-
-/* line 145, ../sass/user-environ/_layout.scss */
-.cols {
-  overflow: hidden;
-  *zoom: 1; }
-  /* line 147, ../sass/user-environ/_layout.scss */
-  .cols .col {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    overflow: hidden;
-    *zoom: 1;
-    float: left;
-    margin-left: 1.5%;
-    padding-left: 5px;
-    position: relative; }
-    /* line 155, ../sass/user-environ/_layout.scss */
-    .cols .col:first-child {
-      margin-left: 0;
-      padding-left: 0; }
-  /* line 162, ../sass/user-environ/_layout.scss */
-  .cols.cols-2 .col-1 {
-    min-width: 250px;
-    width: 48.5%; }
-  /* line 168, ../sass/user-environ/_layout.scss */
-  .cols.cols-2-ff .col-100px {
-    width: 100px; }
-  /* line 175, ../sass/user-environ/_layout.scss */
-  .cols.cols-6 .col-1 {
-    min-width: 83.33333px;
-    width: 15.16667%; }
-  /* line 181, ../sass/user-environ/_layout.scss */
-  .cols.cols-16 .col-1 {
-    min-width: 31.25px;
-    width: 4.75%; }
-  /* line 184, ../sass/user-environ/_layout.scss */
-  .cols.cols-16 .col-2 {
-    min-width: 62.5px;
-    width: 11%; }
-  /* line 187, ../sass/user-environ/_layout.scss */
-  .cols.cols-16 .col-7 {
-    min-width: 218.75px;
-    width: 42.25%; }
-  /* line 193, ../sass/user-environ/_layout.scss */
-  .cols.cols-32 .col-2 {
-    min-width: 31.25px;
-    width: 4.75%; }
-  /* line 196, ../sass/user-environ/_layout.scss */
-  .cols.cols-32 .col-15 {
-    min-width: 234.375px;
-    width: 45.375%; }
-  /* line 200, ../sass/user-environ/_layout.scss */
-  .cols .l-row {
-    overflow: hidden;
-    *zoom: 1;
-    padding: 5px 0; }
-
-/* line 208, ../sass/user-environ/_layout.scss */
-.browse-mode .split-layout .split-pane-component.pane.left {
-  min-width: 150px;
-  max-width: 800px;
-  width: 25%; }
-
-/* line 218, ../sass/user-environ/_layout.scss */
-.edit-mode .split-layout .split-pane-component.pane.right {
-  width: 15%; }
-  /* line 220, ../sass/user-environ/_layout.scss */
-  .edit-mode .split-layout .split-pane-component.pane.right .pane.bottom {
-    min-height: 50px;
-    height: 30%; }
-
-/* line 230, ../sass/user-environ/_layout.scss */
-.pane {
-  position: absolute; }
-  /* line 233, ../sass/user-environ/_layout.scss */
-  .pane.treeview.left .create-btn-holder {
-    bottom: auto;
-    top: 0;
-    height: 24px; }
-    /* line 236, ../sass/user-environ/_layout.scss */
-    .pane.treeview.left .create-btn-holder .wrapper.menu-element {
-      position: absolute;
-      bottom: 5px; }
-  /* line 241, ../sass/user-environ/_layout.scss */
-  .pane.treeview.left .search-holder {
-    top: 34px; }
-  /* line 244, ../sass/user-environ/_layout.scss */
-  .pane.treeview.left .tree-holder {
-    overflow: auto;
-    top: 64px; }
-  /* line 251, ../sass/user-environ/_layout.scss */
-  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area,
-  .pane.items .object-browse-bar .right.abs,
-  .pane.items .object-browse-bar .btn-menu span.right.l-click-area,
-  .btn-menu .pane.items .object-browse-bar span.right.l-click-area {
-    top: auto; }
-  /* line 262, ../sass/user-environ/_layout.scss */
-  .pane.items .object-holder {
-    top: 34px; }
-  /* line 266, ../sass/user-environ/_layout.scss */
-  .pane .object-holder {
-    overflow: auto; }
-
-/* line 274, ../sass/user-environ/_layout.scss */
-.split-layout.horizontal > .pane {
-  margin-top: 5px; }
-  /* line 277, ../sass/user-environ/_layout.scss */
-  .split-layout.horizontal > .pane:first-child {
-    margin-top: 0; }
-/* line 284, ../sass/user-environ/_layout.scss */
-.split-layout.vertical > .pane {
-  margin-left: 5px; }
-  /* line 287, ../sass/user-environ/_layout.scss */
-  .split-layout.vertical > .pane > .holder {
-    left: 0;
-    right: 0; }
-  /* line 291, ../sass/user-environ/_layout.scss */
-  .split-layout.vertical > .pane:first-child {
-    margin-left: 0; }
-    /* line 293, ../sass/user-environ/_layout.scss */
-    .split-layout.vertical > .pane:first-child .holder {
-      right: 3px; }
-
-/* line 302, ../sass/user-environ/_layout.scss */
-.object-browse-bar .btn,
-.object-browse-bar .t-btn,
-.object-browse-bar .view-switcher,
-.top-bar .buttons-main .btn,
-.top-bar .buttons-main .t-btn,
-.top-bar .view-switcher,
-.tool-bar .btn,
-.tool-bar .t-btn {
-  display: inline-block;
-  font-size: 11.25px;
-  line-height: 200%;
-  vertical-align: top; }
-
-/* line 319, ../sass/user-environ/_layout.scss */
-.object-browse-bar .view-switcher,
-.top-bar .view-switcher {
-  margin-right: 20px; }
-
-/* line 324, ../sass/user-environ/_layout.scss */
-.object-browse-bar {
-  overflow: visible;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: auto;
-  height: auto;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  height: 24px;
-  line-height: 24px;
-  white-space: nowrap; }
-  /* line 332, ../sass/user-environ/_layout.scss */
-  .object-browse-bar .left {
-    padding-right: 20px; }
-    /* line 334, ../sass/user-environ/_layout.scss */
-    .object-browse-bar .left .l-back {
-      display: inline-block;
-      float: left;
-      margin-right: 10px; }
-
-/* line 342, ../sass/user-environ/_layout.scss */
-.l-flex {
-  display: flex;
-  display: -webkit-flex;
-  flex-flow: row nowrap;
-  -webkit-flex-flow: row nowrap; }
-  /* line 345, ../sass/user-environ/_layout.scss */
-  .l-flex .left {
-    flex: 1 1 0;
-    -webkit-flex: 1 1 0; }
-
-/* line 351, ../sass/user-environ/_layout.scss */
-.vscroll {
-  overflow-y: auto; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 26, ../sass/mobile/_layout.scss */
-  .browse-wrapper,
-  .pane {
-    top: 0 !important;
-    right: 0;
-    bottom: 0;
-    left: 0; }
-
-  /* line 31, ../sass/mobile/_layout.scss */
-  .pane.left.treeview {
-    background-color: #222; }
-
-  /* line 35, ../sass/mobile/_layout.scss */
-  .pane.right-repr {
-    -moz-transition-duration: 0.35s;
-    -o-transition-duration: 0.35s;
-    -webkit-transition-duration: 0.35s;
-    transition-duration: 0.35s;
-    transition-timing-function: ease;
-    backface-visibility: hidden;
-    margin-left: 0 !important; }
-    /* line 39, ../sass/mobile/_layout.scss */
-    .pane.right-repr #content-area {
-      -moz-transition-duration: 0.35s;
-      -o-transition-duration: 0.35s;
-      -webkit-transition-duration: 0.35s;
-      transition-duration: 0.35s;
-      transition-timing-function: ease;
-      backface-visibility: hidden;
-      opacity: 1; }
-
-  /* line 45, ../sass/mobile/_layout.scss */
-  .user-environ .browse-area,
-  .user-environ .edit-area,
-  .user-environ .editor {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 25px; }
-
-  /* line 51, ../sass/mobile/_layout.scss */
-  .holder.l-mobile {
-    top: 10px !important;
-    right: 10px !important;
-    bottom: 10px !important;
-    left: 10px !important; }
-
-  /* line 61, ../sass/mobile/_layout.scss */
-  .browse-hidetree {
-    -moz-user-select: -moz-none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none; }
-    /* line 65, ../sass/mobile/_layout.scss */
-    .browse-hidetree .pane.left.treeview {
-      opacity: 0;
-      right: 100% !important;
-      width: auto !important;
-      overflow-y: hidden;
-      overflow-x: hidden; }
-    /* line 74, ../sass/mobile/_layout.scss */
-    .browse-hidetree .pane.right-repr {
-      left: 0 !important; }
-
-  /* line 79, ../sass/mobile/_layout.scss */
-  .browse-showtree {
-    -moz-user-select: -moz-none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none; }
-    /* line 88, ../sass/mobile/_layout.scss */
-    .browse-showtree .pane.left.treeview {
-      -moz-transition-property: opacity;
-      -o-transition-property: opacity;
-      -webkit-transition-property: opacity;
-      transition-property: opacity;
-      -moz-transition-duration: 0.4s;
-      -o-transition-duration: 0.4s;
-      -webkit-transition-duration: 0.4s;
-      transition-duration: 0.4s;
-      -moz-transition-timing-function: ease-in-out;
-      -o-transition-timing-function: ease-in-out;
-      -webkit-transition-timing-function: ease-in-out;
-      transition-timing-function: ease-in-out;
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
-      background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
-      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
-      opacity: 1;
-      display: block !important;
-      right: auto !important;
-      width: 40% !important; }
-    /* line 98, ../sass/mobile/_layout.scss */
-    .browse-showtree .pane.right-repr {
-      left: 40% !important; }
-
-  /* line 107, ../sass/mobile/_layout.scss */
-  .mobile-menu-icon {
-    font-size: 110%;
-    position: absolute;
-    top: 12px;
-    left: 10px; }
-
-  /* line 114, ../sass/mobile/_layout.scss */
-  .object-browse-bar {
-    left: 30px !important; }
-    /* line 117, ../sass/mobile/_layout.scss */
-    .object-browse-bar .context-available {
-      opacity: 1 !important; }
-    /* line 120, ../sass/mobile/_layout.scss */
-    .object-browse-bar .view-switcher {
-      margin-right: 0 !important; }
-      /* line 122, ../sass/mobile/_layout.scss */
-      .object-browse-bar .view-switcher .name {
-        display: none; }
-
-  /* line 129, ../sass/mobile/_layout.scss */
-  .tree-holder {
-    overflow-x: hidden !important; }
-
-  /* line 133, ../sass/mobile/_layout.scss */
-  .mobile-disable-select {
-    -moz-user-select: -moz-none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none; }
-
-  /* line 138, ../sass/mobile/_layout.scss */
-  .mobile-hide,
-  .mobile-hide-important {
-    display: none !important; }
-
-  /* line 143, ../sass/mobile/_layout.scss */
-  .mobile-back-hide {
-    pointer-events: none;
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-property: opacity;
-    -moz-transition-duration: 0.4s;
-    -o-transition-duration: 0.4s;
-    -webkit-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    opacity: 0; }
-
-  /* line 148, ../sass/mobile/_layout.scss */
-  .mobile-back-unhide {
-    pointer-events: all;
-    -moz-transition-property: opacity;
-    -o-transition-property: opacity;
-    -webkit-transition-property: opacity;
-    transition-property: opacity;
-    -moz-transition-duration: 0.4s;
-    -o-transition-duration: 0.4s;
-    -webkit-transition-duration: 0.4s;
-    transition-duration: 0.4s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    opacity: 1; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 157, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane.left.treeview {
-    width: 90% !important; }
-  /* line 160, ../sass/mobile/_layout.scss */
-  .browse-showtree .pane.right-repr {
-    left: 0 !important;
-    transform: translateX(90%);
-    -webkit-transform: translateX(90%); }
-    /* line 163, ../sass/mobile/_layout.scss */
-    .browse-showtree .pane.right-repr #content-area {
-      opacity: 0; } }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 171, ../sass/mobile/_layout.scss */
-  .desktop-hide {
-    display: none; } }
-/*****************************************************************************
-* Open MCT Web, Copyright (c) 2014-2015, United States Government
-* as represented by the Administrator of the National Aeronautics and Space
-* Administration. All rights reserved.
-*
-* Open MCT Web is licensed under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
-* http://www.apache.org/licenses/LICENSE-2.0.
-*
-* Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
-* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
-* License for the specific language governing permissions and limitations
-* under the License.
-*
-* Open MCT Web includes source code licensed under additional open source
-* licenses. See the Open Source Licenses file (LICENSES.md) included with
-* this source code distribution or the Licensing information page available
-* at runtime from the About dialog for additional information.
-*****************************************************************************/
-/* line 23, ../sass/_fixed-position.scss */
-.t-fixed-position.l-fixed-position {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: auto;
-  height: auto; }
-  /* line 33, ../sass/_fixed-position.scss */
-  .t-fixed-position.l-fixed-position .l-grid-holder {
-    position: relative;
-    height: 100%;
-    width: 100%; }
-    /* line 37, ../sass/_fixed-position.scss */
-    .t-fixed-position.l-fixed-position .l-grid-holder .l-grid {
-      position: absolute;
-      height: 100%;
-      width: 100%;
-      pointer-events: none;
-      z-index: 0; }
-/* line 48, ../sass/_fixed-position.scss */
-.t-fixed-position .l-fixed-position-item {
-  position: absolute;
-  border: 1px solid transparent; }
-  /* line 52, ../sass/_fixed-position.scss */
-  .t-fixed-position .l-fixed-position-item.s-selected {
-    -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
-    box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
-    border-color: #0099cc;
-    cursor: move; }
-  /* line 57, ../sass/_fixed-position.scss */
-  .t-fixed-position .l-fixed-position-item.s-not-selected {
-    opacity: 0.8; }
-  /* line 61, ../sass/_fixed-position.scss */
-  .t-fixed-position .l-fixed-position-item .l-fixed-position-box,
-  .t-fixed-position .l-fixed-position-item .l-fixed-position-image,
-  .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    height: 100%;
-    width: 100%; }
-  /* line 72, ../sass/_fixed-position.scss */
-  .t-fixed-position .l-fixed-position-item .l-fixed-position-image {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center; }
-  /* line 78, ../sass/_fixed-position.scss */
-  .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
-    text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
-    border: 1px solid transparent;
-    font-size: 0.8rem;
-    line-height: 100%; }
-    /* line 84, ../sass/_fixed-position.scss */
-    .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text {
-      padding: 1px; }
-    /* line 89, ../sass/_fixed-position.scss */
-    .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem {
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      display: block;
-      padding: 2px; }
-      /* line 96, ../sass/_fixed-position.scss */
-      .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-title {
-        float: none;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: auto; }
-      /* line 105, ../sass/_fixed-position.scss */
-      .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value {
-        -moz-border-radius: 2px;
-        -webkit-border-radius: 2px;
-        border-radius: 2px;
-        float: right;
-        margin-left: 5px;
-        padding-left: 5px;
-        padding-right: 5px;
-        text-align: right; }
-        /* line 116, ../sass/_fixed-position.scss */
-        .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value.telem-only {
-          margin-left: 0;
-          width: 100%; }
-/* line 126, ../sass/_fixed-position.scss */
-.t-fixed-position .l-fixed-position-item-handle {
-  background: rgba(0, 153, 204, 0.5);
-  cursor: crosshair;
-  border: 1px solid #0099cc;
-  position: absolute; }
-
-/* line 140, ../sass/_fixed-position.scss */
-.edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-x {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
-  background-size: 100%;
-  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
-  background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
-  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
-  background-repeat: repeat-x; }
-/* line 144, ../sass/_fixed-position.scss */
-.edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-y {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
-  background-size: 100%;
-  background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
-  background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
-  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
-  background-repeat: repeat-y; }
-/* line 152, ../sass/_fixed-position.scss */
-.edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected) {
-  border: 1px dotted rgba(0, 153, 204, 0.75); }
-  /* line 154, ../sass/_fixed-position.scss */
-  .edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover {
-    border: 1px dotted #0099cc; }
-
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -1179,7 +530,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 26, ../sass/_about.scss */
-.l-about.abs, .btn-menu span.l-about.l-click-area {
+.l-about.abs, .s-menu span.l-about.l-click-area {
   overflow: auto; }
 /* line 31, ../sass/_about.scss */
 .l-about .l-logo-holder {
@@ -1229,8 +580,7 @@ mct-container {
   .s-about .s-logo-openmctweb {
     background-image: url("../images/logo-openmctweb-shdw.svg"); }
   /* line 81, ../sass/_about.scss */
-  .s-about .s-btn, .s-about .icon-btn,
-  .s-about .s-icon-btn {
+  .s-about .s-btn, .s-about .s-menu {
     line-height: 2em; }
   /* line 85, ../sass/_about.scss */
   .s-about .l-licenses-software .l-license-software {
@@ -1271,7 +621,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 24, ../sass/_text.scss */
-.abs.l-standalone, .btn-menu span.l-standalone.l-click-area {
+.abs.l-standalone, .s-menu span.l-standalone.l-click-area {
   padding: 5% 20%; }
 
 /* line 29, ../sass/_text.scss */
@@ -1356,7 +706,7 @@ mct-container {
   display: inline-block; }
 
 /* line 57, ../sass/_icons.scss */
-.btn-menu .invoke-menu,
+.s-menu .invoke-menu,
 .icon.major .invoke-menu {
   margin-left: 3px; }
 
@@ -1476,221 +826,486 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/lists/_tabular.scss */
-.w1, .w2 {
-  position: relative;
-  height: 100%; }
+/* line 24, ../sass/helpers/_bubbles.scss */
+.bubble-container {
+  pointer-events: none; }
 
-/* line 27, ../sass/lists/_tabular.scss */
-.tabular,
-table {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  border-spacing: 0;
-  border-collapse: collapse;
-  color: #fff;
-  display: table;
-  font-size: 0.75rem;
+/* line 31, ../sass/helpers/_bubbles.scss */
+.l-infobubble-wrapper {
+  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
+  box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
   position: relative;
-  width: 100%; }
-  /* line 38, ../sass/lists/_tabular.scss */
-  .tabular thead, .tabular .thead,
-  .tabular tbody tr, .tabular .tbody .tr,
-  table thead,
-  table .thead,
-  table tbody tr,
-  table .tbody .tr {
-    width: 100%; }
-  /* line 44, ../sass/lists/_tabular.scss */
-  .tabular thead, .tabular .thead,
-  table thead,
-  table .thead {
-    border-bottom: 1px solid #333; }
-  /* line 47, ../sass/lists/_tabular.scss */
-  .tabular tbody, .tabular .tbody,
-  table tbody,
-  table .tbody {
-    display: table-row-group; }
-    /* line 54, ../sass/lists/_tabular.scss */
-    .tabular tbody tr:hover, .tabular tbody .tr:hover, .tabular .tbody tr:hover, .tabular .tbody .tr:hover,
-    table tbody tr:hover,
-    table tbody .tr:hover,
-    table .tbody tr:hover,
-    table .tbody .tr:hover {
-      background: rgba(255, 255, 255, 0.1); }
-  /* line 59, ../sass/lists/_tabular.scss */
-  .tabular tr, .tabular .tr,
-  table tr,
-  table .tr {
-    display: table-row; }
-    /* line 61, ../sass/lists/_tabular.scss */
-    .tabular tr:first-child .td, .tabular .tr:first-child .td,
-    table tr:first-child .td,
-    table .tr:first-child .td {
-      border-top: none; }
-    /* line 65, ../sass/lists/_tabular.scss */
-    .tabular tr.group-header td, .tabular tr.group-header .td, .tabular .tr.group-header td, .tabular .tr.group-header .td,
-    table tr.group-header td,
-    table tr.group-header .td,
-    table .tr.group-header td,
-    table .tr.group-header .td {
-      background-color: #404040;
-      color: #a6a6a6; }
-    /* line 71, ../sass/lists/_tabular.scss */
-    .tabular tr th, .tabular tr .th, .tabular tr td, .tabular tr .td, .tabular .tr th, .tabular .tr .th, .tabular .tr td, .tabular .tr .td,
-    table tr th,
-    table tr .th,
-    table tr td,
-    table tr .td,
-    table .tr th,
-    table .tr .th,
-    table .tr td,
-    table .tr .td {
-      display: table-cell; }
-    /* line 74, ../sass/lists/_tabular.scss */
-    .tabular tr th, .tabular tr .th, .tabular .tr th, .tabular .tr .th,
-    table tr th,
-    table tr .th,
-    table .tr th,
-    table .tr .th {
-      background-color: #4d4d4d;
-      border-left: 1px solid #333;
-      color: #b3b3b3;
-      padding: 5px 5px;
-      white-space: nowrap;
-      vertical-align: middle; }
-      /* line 81, ../sass/lists/_tabular.scss */
-      .tabular tr th:first-child, .tabular tr .th:first-child, .tabular .tr th:first-child, .tabular .tr .th:first-child,
-      table tr th:first-child,
-      table tr .th:first-child,
-      table .tr th:first-child,
-      table .tr .th:first-child {
-        border-left: none; }
-      /* line 85, ../sass/lists/_tabular.scss */
-      .tabular tr th.sort.sort:after, .tabular tr .th.sort.sort:after, .tabular .tr th.sort.sort:after, .tabular .tr .th.sort.sort:after,
-      table tr th.sort.sort:after,
-      table tr .th.sort.sort:after,
-      table .tr th.sort.sort:after,
-      table .tr .th.sort.sort:after {
-        color: #49dedb;
-        font-family: symbolsfont;
-        font-size: 8px;
-        content: "\ed";
-        display: inline-block;
-        margin-left: 3px; }
-      /* line 93, ../sass/lists/_tabular.scss */
-      .tabular tr th.sort.sort.desc:after, .tabular tr .th.sort.sort.desc:after, .tabular .tr th.sort.sort.desc:after, .tabular .tr .th.sort.sort.desc:after,
-      table tr th.sort.sort.desc:after,
-      table tr .th.sort.sort.desc:after,
-      table .tr th.sort.sort.desc:after,
-      table .tr .th.sort.sort.desc:after {
-        content: "\ec"; }
-      /* line 97, ../sass/lists/_tabular.scss */
-      .tabular tr th.sortable, .tabular tr .th.sortable, .tabular .tr th.sortable, .tabular .tr .th.sortable,
-      table tr th.sortable,
-      table tr .th.sortable,
-      table .tr th.sortable,
-      table .tr .th.sortable {
-        cursor: pointer; }
-    /* line 101, ../sass/lists/_tabular.scss */
-    .tabular tr td, .tabular tr .td, .tabular .tr td, .tabular .tr .td,
-    table tr td,
-    table tr .td,
-    table .tr td,
-    table .tr .td {
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-      min-width: 20px;
-      color: #fff;
-      padding: 3px 5px;
-      word-wrap: break-word;
-      vertical-align: top; }
-      /* line 108, ../sass/lists/_tabular.scss */
-      .tabular tr td.numeric, .tabular tr .td.numeric, .tabular .tr td.numeric, .tabular .tr .td.numeric,
-      table tr td.numeric,
-      table tr .td.numeric,
-      table .tr td.numeric,
-      table .tr .td.numeric {
-        text-align: right; }
-      /* line 111, ../sass/lists/_tabular.scss */
-      .tabular tr td.s-cell-type-value, .tabular tr .td.s-cell-type-value, .tabular .tr td.s-cell-type-value, .tabular .tr .td.s-cell-type-value,
-      table tr td.s-cell-type-value,
-      table tr .td.s-cell-type-value,
-      table .tr td.s-cell-type-value,
-      table .tr .td.s-cell-type-value {
-        text-align: right; }
-        /* line 113, ../sass/lists/_tabular.scss */
-        .tabular tr td.s-cell-type-value .l-cell-contents, .tabular tr .td.s-cell-type-value .l-cell-contents, .tabular .tr td.s-cell-type-value .l-cell-contents, .tabular .tr .td.s-cell-type-value .l-cell-contents,
-        table tr td.s-cell-type-value .l-cell-contents,
-        table tr .td.s-cell-type-value .l-cell-contents,
-        table .tr td.s-cell-type-value .l-cell-contents,
-        table .tr .td.s-cell-type-value .l-cell-contents {
-          -moz-border-radius: 2px;
-          -webkit-border-radius: 2px;
-          border-radius: 2px;
-          padding-left: 5px;
-          padding-right: 5px; }
-  /* line 129, ../sass/lists/_tabular.scss */
-  .tabular.filterable tbody, .tabular.filterable .tbody,
-  table.filterable tbody,
-  table.filterable .tbody {
-    top: 44px; }
-  /* line 132, ../sass/lists/_tabular.scss */
-  .tabular.filterable input[type="text"],
-  table.filterable input[type="text"] {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    width: 100%; }
-  /* line 138, ../sass/lists/_tabular.scss */
-  .tabular.fixed-header,
-  table.fixed-header {
-    height: 100%; }
-    /* line 140, ../sass/lists/_tabular.scss */
-    .tabular.fixed-header thead, .tabular.fixed-header .thead,
-    .tabular.fixed-header tbody tr, .tabular.fixed-header .tbody .tr,
-    table.fixed-header thead,
-    table.fixed-header .thead,
-    table.fixed-header tbody tr,
-    table.fixed-header .tbody .tr {
-      display: table;
-      table-layout: fixed; }
-    /* line 145, ../sass/lists/_tabular.scss */
-    .tabular.fixed-header thead, .tabular.fixed-header .thead,
-    table.fixed-header thead,
-    table.fixed-header .thead {
-      width: calc(100% - 10px); }
-      /* line 147, ../sass/lists/_tabular.scss */
-      .tabular.fixed-header thead:before, .tabular.fixed-header .thead:before,
-      table.fixed-header thead:before,
-      table.fixed-header .thead:before {
-        content: "";
-        display: block;
-        z-index: 0;
-        position: absolute;
-        width: 100%;
-        height: 22px;
-        background: rgba(255, 255, 255, 0.15); }
-    /* line 157, ../sass/lists/_tabular.scss */
-    .tabular.fixed-header tbody, .tabular.fixed-header .tbody,
-    table.fixed-header tbody,
-    table.fixed-header .tbody {
-      overflow: hidden;
+  z-index: 50; }
+  /* line 36, ../sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper .l-infobubble {
+    display: inline-block;
+    min-width: 100px;
+    max-width: 300px;
+    padding: 5px 10px; }
+    /* line 41, ../sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper .l-infobubble:before {
+      content: "";
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      width: auto;
-      height: auto;
-      top: 22px;
+      width: 0;
+      height: 0; }
+    /* line 47, ../sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper .l-infobubble table {
+      width: 100%; }
+      /* line 50, ../sass/helpers/_bubbles.scss */
+      .l-infobubble-wrapper .l-infobubble table tr td {
+        padding: 2px 0;
+        vertical-align: top; }
+        /* line 53, ../sass/helpers/_bubbles.scss */
+        .l-infobubble-wrapper .l-infobubble table tr td.label {
+          padding-right: 10px;
+          white-space: nowrap; }
+        /* line 57, ../sass/helpers/_bubbles.scss */
+        .l-infobubble-wrapper .l-infobubble table tr td.value {
+          word-break: break-all; }
+        /* line 61, ../sass/helpers/_bubbles.scss */
+        .l-infobubble-wrapper .l-infobubble table tr td.align-wrap {
+          white-space: normal; }
+    /* line 67, ../sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper .l-infobubble .title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-bottom: 5px; }
+  /* line 74, ../sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-left {
+    margin-left: 20px; }
+    /* line 76, ../sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper.arw-left .l-infobubble::before {
+      right: 100%; }
+      @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+        /* line 76, ../sass/helpers/_bubbles.scss */
+        .l-infobubble-wrapper.arw-left .l-infobubble::before {
+          width: 0;
+          height: 0;
+          border-top: 6.66667px solid transparent;
+          border-bottom: 6.66667px solid transparent;
+          border-right: 10px solid #ddd; } }
+  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 88, ../sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper.arw-right {
+      margin-right: 20px; } }
+  /* line 95, ../sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-right .l-infobubble::before {
+    left: 100%; }
+    @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 95, ../sass/helpers/_bubbles.scss */
+      .l-infobubble-wrapper.arw-right .l-infobubble::before {
+        width: 0;
+        height: 0;
+        border-top: 6.66667px solid transparent;
+        border-bottom: 6.66667px solid transparent;
+        border-left: 10px solid #ddd; } }
+  /* line 108, ../sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-top .l-infobubble::before {
+    top: 20px; }
+  /* line 114, ../sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-btm .l-infobubble::before {
+    bottom: 20px; }
+  /* line 119, ../sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-down {
+    margin-bottom: 10px; }
+    /* line 121, ../sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper.arw-down .l-infobubble::before {
+      left: 50%;
+      top: 100%;
+      margin-left: -5px;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 7.5px solid #ddd; }
+  /* line 130, ../sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper .arw {
+    z-index: 2; }
+  /* line 133, ../sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-up .arw.arw-down, .l-infobubble-wrapper.arw-down .arw.arw-up {
+    display: none; }
+
+/* line 142, ../sass/helpers/_bubbles.scss */
+.l-thumbsbubble-wrapper .arw-up {
+  width: 0;
+  height: 0;
+  border-left: 6.66667px solid transparent;
+  border-right: 6.66667px solid transparent;
+  border-bottom: 10px solid #4d4d4d; }
+/* line 145, ../sass/helpers/_bubbles.scss */
+.l-thumbsbubble-wrapper .arw-down {
+  width: 0;
+  height: 0;
+  border-left: 6.66667px solid transparent;
+  border-right: 6.66667px solid transparent;
+  border-top: 10px solid #4d4d4d; }
+
+/* line 150, ../sass/helpers/_bubbles.scss */
+.s-infobubble {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
+  box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
+  background: #ddd;
+  color: #666;
+  font-size: 0.8rem; }
+  /* line 157, ../sass/helpers/_bubbles.scss */
+  .s-infobubble .title {
+    color: #333333;
+    font-weight: bold; }
+  /* line 163, ../sass/helpers/_bubbles.scss */
+  .s-infobubble table tr td {
+    border: none;
+    border-top: 1px solid #c4c4c4 !important;
+    font-size: 0.9em; }
+  /* line 169, ../sass/helpers/_bubbles.scss */
+  .s-infobubble table tr:first-child td {
+    border-top: none !important; }
+  /* line 174, ../sass/helpers/_bubbles.scss */
+  .s-infobubble:first-child td {
+    border-top: none; }
+  /* line 178, ../sass/helpers/_bubbles.scss */
+  .s-infobubble .label {
+    color: gray; }
+  /* line 182, ../sass/helpers/_bubbles.scss */
+  .s-infobubble .value {
+    color: #333333; }
+
+/* line 188, ../sass/helpers/_bubbles.scss */
+.s-thumbsbubble {
+  background: #4d4d4d;
+  color: #b3b3b3; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 29, ../sass/helpers/_splitter.scss */
+.split-layout .splitter {
+  background-color: #404040;
+  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
+  box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
+  overflow: hidden;
+  position: absolute;
+  z-index: 1; }
+/* line 36, ../sass/helpers/_splitter.scss */
+.split-layout.horizontal {
+  overflow: hidden; }
+  /* line 39, ../sass/helpers/_splitter.scss */
+  .split-layout.horizontal .pane {
+    left: 0;
+    right: 0; }
+    /* line 42, ../sass/helpers/_splitter.scss */
+    .split-layout.horizontal .pane.top {
+      bottom: auto; }
+    /* line 46, ../sass/helpers/_splitter.scss */
+    .split-layout.horizontal .pane.bottom {
+      top: auto; }
+  /* line 51, ../sass/helpers/_splitter.scss */
+  .split-layout.horizontal > .splitter {
+    cursor: row-resize;
+    left: 0;
+    right: 0;
+    width: auto;
+    height: 5px; }
+    /* line 185, ../sass/_mixins.scss */
+    .split-layout.horizontal > .splitter:before {
+      -moz-transition-property: "border-color";
+      -o-transition-property: "border-color";
+      -webkit-transition-property: "border-color";
+      transition-property: "border-color";
+      -moz-transition-duration: 0.75s;
+      -o-transition-duration: 0.75s;
+      -webkit-transition-duration: 0.75s;
+      transition-duration: 0.75s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      content: '';
       display: block;
-      overflow-y: scroll; }
-  /* line 165, ../sass/lists/_tabular.scss */
-  .tabular.t-event-messages td, .tabular.t-event-messages .td,
-  table.t-event-messages td,
-  table.t-event-messages .td {
-    min-width: 150px; }
+      height: auto;
+      pointer-events: none;
+      position: absolute;
+      z-index: 2;
+      border-top: 1px dotted #1a1a1a;
+      top: 2px;
+      left: 5px;
+      right: 5px; }
+    /* line 207, ../sass/_mixins.scss */
+    .split-layout.horizontal > .splitter:not(.disabled):hover:before {
+      -moz-transition-property: "border-color";
+      -o-transition-property: "border-color";
+      -webkit-transition-property: "border-color";
+      transition-property: "border-color";
+      -moz-transition-duration: 50ms;
+      -o-transition-duration: 50ms;
+      -webkit-transition-duration: 50ms;
+      transition-duration: 50ms;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      border-color: #0099cc; }
+/* line 63, ../sass/helpers/_splitter.scss */
+.split-layout.vertical .pane {
+  top: 0;
+  bottom: 0; }
+  /* line 66, ../sass/helpers/_splitter.scss */
+  .split-layout.vertical .pane.left {
+    right: auto; }
+  /* line 70, ../sass/helpers/_splitter.scss */
+  .split-layout.vertical .pane.right {
+    left: auto; }
+/* line 75, ../sass/helpers/_splitter.scss */
+.split-layout.vertical > .splitter {
+  bottom: 0;
+  cursor: col-resize;
+  width: 5px; }
+  /* line 185, ../sass/_mixins.scss */
+  .split-layout.vertical > .splitter:before {
+    -moz-transition-property: "border-color";
+    -o-transition-property: "border-color";
+    -webkit-transition-property: "border-color";
+    transition-property: "border-color";
+    -moz-transition-duration: 0.75s;
+    -o-transition-duration: 0.75s;
+    -webkit-transition-duration: 0.75s;
+    transition-duration: 0.75s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    content: '';
+    display: block;
+    height: auto;
+    pointer-events: none;
+    position: absolute;
+    z-index: 2;
+    border-left: 1px dotted #1a1a1a;
+    left: 2px;
+    bottom: 5px;
+    top: 5px; }
+  /* line 207, ../sass/_mixins.scss */
+  .split-layout.vertical > .splitter:not(.disabled):hover:before {
+    -moz-transition-property: "border-color";
+    -o-transition-property: "border-color";
+    -webkit-transition-property: "border-color";
+    transition-property: "border-color";
+    -moz-transition-duration: 50ms;
+    -o-transition-duration: 50ms;
+    -webkit-transition-duration: 50ms;
+    transition-duration: 50ms;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    border-color: #0099cc; }
+
+/* line 86, ../sass/helpers/_splitter.scss */
+.browse-area .splitter {
+  top: 34px; }
+
+/* line 90, ../sass/helpers/_splitter.scss */
+.edit-area .splitter {
+  top: 0; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@-webkit-keyframes rotation {
+  from {
+    -webkit-transform: rotate(0deg); }
+  to {
+    -webkit-transform: rotate(359deg); } }
+@-moz-keyframes rotation {
+  from {
+    -moz-transform: rotate(0deg); }
+  to {
+    -moz-transform: rotate(359deg); } }
+@-o-keyframes rotation {
+  from {
+    -o-transform: rotate(0deg); }
+  to {
+    -o-transform: rotate(359deg); } }
+@keyframes rotation {
+  from {
+    transform: rotate(0deg); }
+  to {
+    transform: rotate(359deg); } }
+/* line 42, ../sass/helpers/_wait-spinner.scss */
+.t-wait-spinner,
+.wait-spinner {
+  display: block;
+  position: absolute;
+  -webkit-animation: rotation .6s infinite linear;
+  -moz-animation: rotation .6s infinite linear;
+  -o-animation: rotation .6s infinite linear;
+  animation: rotation .6s infinite linear;
+  border-color: rgba(0, 153, 204, 0.25);
+  border-top-color: #0099cc;
+  border-style: solid;
+  border-width: 0.5em;
+  border-radius: 100%;
+  top: 50%;
+  left: 50%;
+  height: auto;
+  width: auto;
+  padding: 5%;
+  pointer-events: none;
+  margin-top: -5%;
+  margin-left: -5%;
+  z-index: 2; }
+  /* line 53, ../sass/helpers/_wait-spinner.scss */
+  .t-wait-spinner.inline,
+  .wait-spinner.inline {
+    display: inline-block !important;
+    margin-right: 5px;
+    position: relative !important;
+    vertical-align: middle; }
+
+/* line 61, ../sass/helpers/_wait-spinner.scss */
+.l-wait-spinner-holder {
+  pointer-events: none;
+  position: absolute; }
+  /* line 65, ../sass/helpers/_wait-spinner.scss */
+  .l-wait-spinner-holder.align-left .t-wait-spinner {
+    left: 0;
+    margin-left: 0; }
+  /* line 70, ../sass/helpers/_wait-spinner.scss */
+  .l-wait-spinner-holder.full-size {
+    display: inline-block;
+    height: 100%;
+    width: 100%; }
+    /* line 73, ../sass/helpers/_wait-spinner.scss */
+    .l-wait-spinner-holder.full-size .t-wait-spinner {
+      top: 0;
+      margin-top: 0;
+      padding: 30%; }
+
+/* line 82, ../sass/helpers/_wait-spinner.scss */
+.treeview .wait-spinner {
+  display: block;
+  position: absolute;
+  -webkit-animation: rotation .6s infinite linear;
+  -moz-animation: rotation .6s infinite linear;
+  -o-animation: rotation .6s infinite linear;
+  animation: rotation .6s infinite linear;
+  border-color: rgba(0, 153, 204, 0.25);
+  border-top-color: #0099cc;
+  border-style: solid;
+  border-width: 0.25em;
+  border-radius: 100%;
+  height: 10px;
+  width: 10px;
+  margin: 0 !important;
+  padding: 0 !important;
+  top: 2px;
+  left: 0; }
+
+/* line 91, ../sass/helpers/_wait-spinner.scss */
+.wait-spinner.sm {
+  display: block;
+  position: absolute;
+  -webkit-animation: rotation .6s infinite linear;
+  -moz-animation: rotation .6s infinite linear;
+  -o-animation: rotation .6s infinite linear;
+  animation: rotation .6s infinite linear;
+  border-color: rgba(0, 153, 204, 0.25);
+  border-top-color: #0099cc;
+  border-style: solid;
+  border-width: 0.25em;
+  border-radius: 100%;
+  height: 13px;
+  width: 13px;
+  margin-left: 0 !important;
+  margin-top: 0 !important;
+  padding: 0 !important;
+  top: 0;
+  left: 0; }
+
+/* Styles for messages */
+/* line 4, ../sass/_messages.scss */
+.message.block {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  padding: 10px; }
+/* line 8, ../sass/_messages.scss */
+.message.error {
+  background-color: rgba(255, 60, 0, 0.3);
+  color: #ff8a66; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* Classes to be used for lists of properties and values */
+/* line 25, ../sass/_properties.scss */
+.properties .s-row {
+  border-top: 1px solid #4d4d4d;
+  font-size: 0.8em; }
+  /* line 28, ../sass/_properties.scss */
+  .properties .s-row:first-child {
+    border: none; }
+  /* line 31, ../sass/_properties.scss */
+  .properties .s-row .s-value {
+    color: #fff; }
 
 /********************************* CONTROLS */
 /* line 1, ../sass/controls/_breadcrumb.scss */
@@ -1748,48 +1363,42 @@ table {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /******* LAYOUT AND SIZING */
-/* line 26, ../sass/controls/_buttons.scss */
-.btn,
-.l-btn {
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  line-height: 150%;
-  padding: 0 7.5px;
-  text-decoration: none; }
-  /* line 33, ../sass/controls/_buttons.scss */
-  .btn.lg, .btn.create-btn,
-  .l-btn.lg,
-  .l-btn.create-btn {
-    height: 24px;
-    line-height: 22px;
-    padding: 0 22.5px; }
-  /* line 42, ../sass/controls/_buttons.scss */
-  .btn.create-btn:before,
-  .l-btn.create-btn:before {
-    content: "+";
-    font-family: symbolsfont;
-    font-size: 0.8em; }
-  /* line 47, ../sass/controls/_buttons.scss */
-  .btn.create-btn .menu,
-  .l-btn.create-btn .menu {
-    margin-left: -7.5px; }
-  /* line 54, ../sass/controls/_buttons.scss */
-  .btn.sm,
-  .l-btn.sm {
-    padding: 0 5px; }
-  /* line 57, ../sass/controls/_buttons.scss */
-  .btn.vsm,
-  .l-btn.vsm {
-    padding: 0 2.5px; }
-
+/*.l-btn {
+	@include user-select(none);
+	//line-height: 1.5em; // Was 1.25em
+	line-height: 150%;
+	padding: 0 $pad;
+	text-decoration: none;
+	&.lg,
+	&.create-btn {
+		$h: $ueTopBarH; // - $interiorMargin;
+		height: $h;
+		line-height: $h - 2;
+		padding: 0 $pad * 3;
+	}
+	&.create-btn {
+		font-size: 1em;
+		&:before {
+			content:"+";
+			font-family: symbolsfont;
+		}
+		.menu {
+			margin-left: $pad * -1;
+		}
+		>.ui-symbol {
+			//font-size: 1.1em; // Normalizing for new icomoon symbols font
+		}
+	}
+	&.sm {
+		padding: 0 $pad / $baseRatio;
+	}
+	&.vsm {
+		padding: 0 ($pad / $baseRatio) / 2;
+	}
+}*/
 /*********************************** STYLE STYLES */
-/* line 63, ../sass/controls/_buttons.scss */
-.btn,
-.s-btn,
-.icon-btn,
-.s-icon-btn {
+/* line 61, ../sass/controls/_buttons.scss */
+.s-btn, .s-menu {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -1797,167 +1406,31 @@ table {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
   cursor: pointer;
-  text-decoration: none; }
-  /* line 72, ../sass/controls/_buttons.scss */
-  .btn.major,
-  .s-btn.major,
-  .major.icon-btn,
-  .major.s-icon-btn {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0ac2ff), color-stop(100%, #00b4f0));
-    background-image: -moz-linear-gradient(#0ac2ff, #00b4f0);
-    background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
-    background-image: linear-gradient(#0ac2ff, #00b4f0);
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border: none;
-    border-top: 1px solid #14c4ff;
-    color: #999;
-    display: inline-block;
-    color: #ccf2ff; }
-    /* line 167, ../sass/_mixins.scss */
-    .btn.major:not(.disabled):hover,
-    .s-btn.major:not(.disabled):hover,
-    .major.icon-btn:not(.disabled):hover,
-    .major.s-icon-btn:not(.disabled):hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ecbff), color-stop(100%, #14c4ff));
-      background-image: -moz-linear-gradient(#2ecbff, #14c4ff);
-      background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
-      background-image: linear-gradient(#2ecbff, #14c4ff);
-      color: #bdbdbd; }
-      /* line 170, ../sass/_mixins.scss */
-      .btn.major:not(.disabled):hover.btn-menu .invoke-menu,
-      .s-btn.major:not(.disabled):hover.btn-menu .invoke-menu,
-      .major.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
-      .major.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
-        color: #75ddff; }
-    /* line 175, ../sass/_mixins.scss */
-    .btn.major.btn-menu .invoke-menu,
-    .s-btn.major.btn-menu .invoke-menu,
-    .major.btn-menu.icon-btn .invoke-menu,
-    .major.btn-menu.s-icon-btn .invoke-menu {
-      color: #52d4ff; }
-    /* line 77, ../sass/controls/_buttons.scss */
-    .btn.major:hover,
-    .s-btn.major:hover,
-    .major.icon-btn:hover,
-    .major.s-icon-btn:hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzI0YzhmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #24c8ff), color-stop(100%, #0ac2ff));
-      background-image: -moz-linear-gradient(#24c8ff, #0ac2ff);
-      background-image: -webkit-linear-gradient(#24c8ff, #0ac2ff);
-      background-image: linear-gradient(#24c8ff, #0ac2ff);
-      -moz-border-radius: 3px;
-      -webkit-border-radius: 3px;
-      border-radius: 3px;
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      border: none;
-      border-top: 1px solid #2ecbff;
-      color: #ccf2ff;
-      display: inline-block; }
-      /* line 167, ../sass/_mixins.scss */
-      .btn.major:hover:not(.disabled):hover,
-      .s-btn.major:hover:not(.disabled):hover,
-      .major.icon-btn:hover:not(.disabled):hover,
-      .major.s-icon-btn:hover:not(.disabled):hover {
-        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ3ZDFmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-        background-size: 100%;
-        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #47d1ff), color-stop(100%, #2ecbff));
-        background-image: -moz-linear-gradient(#47d1ff, #2ecbff);
-        background-image: -webkit-linear-gradient(#47d1ff, #2ecbff);
-        background-image: linear-gradient(#47d1ff, #2ecbff);
-        color: white; }
-        /* line 170, ../sass/_mixins.scss */
-        .btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
-        .s-btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu,
-        .major.icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu,
-        .major.s-icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu {
-          color: #8fe3ff; }
-      /* line 175, ../sass/_mixins.scss */
-      .btn.major:hover.btn-menu .invoke-menu,
-      .s-btn.major:hover.btn-menu .invoke-menu,
-      .major.icon-btn:hover.btn-menu .invoke-menu,
-      .major.s-icon-btn:hover.btn-menu .invoke-menu {
-        color: #6bdaff; }
-    /* line 81, ../sass/controls/_buttons.scss */
-    .btn.major .invoke-menu,
-    .s-btn.major .invoke-menu,
-    .major.icon-btn .invoke-menu,
-    .major.s-icon-btn .invoke-menu {
-      color: #ccf2ff; }
-  /* line 85, ../sass/controls/_buttons.scss */
-  .btn.subtle,
-  .s-btn.subtle,
-  .subtle.icon-btn,
-  .subtle.s-icon-btn {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg1ODU4NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc4Nzg3OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #858585), color-stop(100%, #787878));
-    background-image: -moz-linear-gradient(#858585, #787878);
-    background-image: -webkit-linear-gradient(#858585, #787878);
-    background-image: linear-gradient(#858585, #787878);
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border: none;
-    border-top: 1px solid #8a8a8a;
-    color: #cccccc;
-    display: inline-block; }
-    /* line 167, ../sass/_mixins.scss */
-    .btn.subtle:not(.disabled):hover,
-    .s-btn.subtle:not(.disabled):hover,
-    .subtle.icon-btn:not(.disabled):hover,
-    .subtle.s-icon-btn:not(.disabled):hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk2OTY5NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhhOGE4YSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #969696), color-stop(100%, #8a8a8a));
-      background-image: -moz-linear-gradient(#969696, #8a8a8a);
-      background-image: -webkit-linear-gradient(#969696, #8a8a8a);
-      background-image: linear-gradient(#969696, #8a8a8a);
-      color: #f0f0f0; }
-      /* line 170, ../sass/_mixins.scss */
-      .btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
-      .s-btn.subtle:not(.disabled):hover.btn-menu .invoke-menu,
-      .subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
-      .subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
-        color: #bababa; }
-    /* line 175, ../sass/_mixins.scss */
-    .btn.subtle.btn-menu .invoke-menu,
-    .s-btn.subtle.btn-menu .invoke-menu,
-    .subtle.btn-menu.icon-btn .invoke-menu,
-    .subtle.btn-menu.s-icon-btn .invoke-menu {
-      color: #a8a8a8; }
-  /* line 88, ../sass/controls/_buttons.scss */
-  .btn.very-subtle, .btn.s-very-subtle,
-  .s-btn.very-subtle,
-  .very-subtle.icon-btn,
-  .very-subtle.s-icon-btn,
-  .s-btn.s-very-subtle,
-  .s-very-subtle.icon-btn,
-  .s-very-subtle.s-icon-btn {
+  text-decoration: none;
+  height: 25px;
+  line-height: 25px;
+  padding: 0 7.5px;
+  font-size: 0.7rem; }
+  /* line 75, ../sass/controls/_buttons.scss */
+  .s-btn .icon, .s-menu .icon {
+    font-size: 0.8rem;
+    color: #0099cc; }
+  /* line 80, ../sass/controls/_buttons.scss */
+  .s-btn .title-label, .s-menu .title-label {
+    vertical-align: top; }
+  /* line 84, ../sass/controls/_buttons.scss */
+  .s-btn.sm, .sm.s-menu {
+    padding: 0 5px; }
+  /* line 87, ../sass/controls/_buttons.scss */
+  .s-btn.vsm, .vsm.s-menu {
+    padding: 0 2.5px; }
+  /* line 91, ../sass/controls/_buttons.scss */
+  .s-btn:not(.major), .s-menu:not(.major) {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
@@ -1974,17 +1447,10 @@ table {
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border: none;
-    border-top: 1px solid #575757;
     color: #999;
     display: inline-block; }
     /* line 167, ../sass/_mixins.scss */
-    .btn.very-subtle:not(.disabled):hover, .btn.s-very-subtle:not(.disabled):hover,
-    .s-btn.very-subtle:not(.disabled):hover,
-    .very-subtle.icon-btn:not(.disabled):hover,
-    .very-subtle.s-icon-btn:not(.disabled):hover,
-    .s-btn.s-very-subtle:not(.disabled):hover,
-    .s-very-subtle.icon-btn:not(.disabled):hover,
-    .s-very-subtle.s-icon-btn:not(.disabled):hover {
+    .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
       background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #636363), color-stop(100%, #575757));
@@ -1992,147 +1458,140 @@ table {
       background-image: -webkit-linear-gradient(#636363, #575757);
       background-image: linear-gradient(#636363, #575757);
       color: #bdbdbd; }
-      /* line 170, ../sass/_mixins.scss */
-      .btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
-      .s-btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
-      .very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
-      .very-subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
-      .s-btn.s-very-subtle:not(.disabled):hover.btn-menu .invoke-menu,
-      .s-very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
-      .s-very-subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
-        color: #878787; }
-    /* line 175, ../sass/_mixins.scss */
-    .btn.very-subtle.btn-menu .invoke-menu, .btn.s-very-subtle.btn-menu .invoke-menu,
-    .s-btn.very-subtle.btn-menu .invoke-menu,
-    .very-subtle.btn-menu.icon-btn .invoke-menu,
-    .very-subtle.btn-menu.s-icon-btn .invoke-menu,
-    .s-btn.s-very-subtle.btn-menu .invoke-menu,
-    .s-very-subtle.btn-menu.icon-btn .invoke-menu,
-    .s-very-subtle.btn-menu.s-icon-btn .invoke-menu {
-      color: #757575; }
-    /* line 91, ../sass/controls/_buttons.scss */
-    .btn.very-subtle.paused, .btn.s-very-subtle.paused,
-    .s-btn.very-subtle.paused,
-    .very-subtle.paused.icon-btn,
-    .very-subtle.paused.s-icon-btn,
-    .s-btn.s-very-subtle.paused,
-    .s-very-subtle.paused.icon-btn,
-    .s-very-subtle.paused.s-icon-btn {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlOTEwNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5ODMwMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    /* line 216, ../sass/_mixins.scss */
+    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon {
+      color: #0099cc; }
+    /* line 222, ../sass/_mixins.scss */
+    .s-btn:not(.major):not(.disabled):not(.paused):hover .icon, .s-menu:not(.major):not(.disabled):not(.paused):hover .icon {
+      color: #33ccff; }
+  /* line 95, ../sass/controls/_buttons.scss */
+  .s-btn.major, .major.s-menu, .overlay .bottom-bar .s-btn.major, .overlay .bottom-bar .major.s-menu {
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-size: 100%;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0ac2ff), color-stop(100%, #00b4f0));
+    background-image: -moz-linear-gradient(#0ac2ff, #00b4f0);
+    background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
+    background-image: linear-gradient(#0ac2ff, #00b4f0);
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    border: none;
+    color: white;
+    display: inline-block; }
+    /* line 167, ../sass/_mixins.scss */
+    .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .overlay .bottom-bar .s-btn.major:not(.disabled):hover, .overlay .bottom-bar .major.s-menu:not(.disabled):hover {
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fe9105), color-stop(100%, #e98301));
-      background-image: -moz-linear-gradient(#fe9105, #e98301);
-      background-image: -webkit-linear-gradient(#fe9105, #e98301);
-      background-image: linear-gradient(#fe9105, #e98301);
-      -moz-border-radius: 3px;
-      -webkit-border-radius: 3px;
-      border-radius: 3px;
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      border: none;
-      border-top: 1px solid #fe9510;
-      color: #fff;
-      display: inline-block; }
-      /* line 167, ../sass/_mixins.scss */
-      .btn.very-subtle.paused:not(.disabled):hover, .btn.s-very-subtle.paused:not(.disabled):hover,
-      .s-btn.very-subtle.paused:not(.disabled):hover,
-      .very-subtle.paused.icon-btn:not(.disabled):hover,
-      .very-subtle.paused.s-icon-btn:not(.disabled):hover,
-      .s-btn.s-very-subtle.paused:not(.disabled):hover,
-      .s-very-subtle.paused.icon-btn:not(.disabled):hover,
-      .s-very-subtle.paused.s-icon-btn:not(.disabled):hover {
-        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlYTAyOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZlOTUxMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-        background-size: 100%;
-        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fea029), color-stop(100%, #fe9510));
-        background-image: -moz-linear-gradient(#fea029, #fe9510);
-        background-image: -webkit-linear-gradient(#fea029, #fe9510);
-        background-image: linear-gradient(#fea029, #fe9510);
-        color: white; }
-        /* line 170, ../sass/_mixins.scss */
-        .btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
-        .s-btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
-        .very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
-        .very-subtle.paused.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
-        .s-btn.s-very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu,
-        .s-very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu,
-        .s-very-subtle.paused.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu {
-          color: #fec070; }
-      /* line 175, ../sass/_mixins.scss */
-      .btn.very-subtle.paused.btn-menu .invoke-menu, .btn.s-very-subtle.paused.btn-menu .invoke-menu,
-      .s-btn.very-subtle.paused.btn-menu .invoke-menu,
-      .very-subtle.paused.btn-menu.icon-btn .invoke-menu,
-      .very-subtle.paused.btn-menu.s-icon-btn .invoke-menu,
-      .s-btn.s-very-subtle.paused.btn-menu .invoke-menu,
-      .s-very-subtle.paused.btn-menu.icon-btn .invoke-menu,
-      .s-very-subtle.paused.btn-menu.s-icon-btn .invoke-menu {
-        color: #feb04d; }
-      /* line 93, ../sass/controls/_buttons.scss */
-      .btn.very-subtle.paused .icon:before, .btn.s-very-subtle.paused .icon:before,
-      .s-btn.very-subtle.paused .icon:before,
-      .very-subtle.paused.icon-btn .icon:before,
-      .very-subtle.paused.s-icon-btn .icon:before,
-      .s-btn.s-very-subtle.paused .icon:before,
-      .s-very-subtle.paused.icon-btn .icon:before,
-      .s-very-subtle.paused.s-icon-btn .icon:before {
-        content: "\0000EF"; }
-
-/* line 100, ../sass/controls/_buttons.scss */
-.icon-btn,
-.s-icon-btn {
-  font-size: 1em; }
-  /* line 104, ../sass/controls/_buttons.scss */
-  .icon-btn .icon,
-  .s-icon-btn .icon {
-    color: #0099cc; }
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ecbff), color-stop(100%, #14c4ff));
+      background-image: -moz-linear-gradient(#2ecbff, #14c4ff);
+      background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
+      background-image: linear-gradient(#2ecbff, #14c4ff);
+      color: white; }
+    /* line 216, ../sass/_mixins.scss */
+    .s-btn.major .icon, .major.s-menu .icon, .overlay .bottom-bar .s-btn.major .icon, .overlay .bottom-bar .major.s-menu .icon {
+      color: white; }
+    /* line 222, ../sass/_mixins.scss */
+    .s-btn.major:not(.disabled):not(.paused):hover .icon, .major.s-menu:not(.disabled):not(.paused):hover .icon {
+      color: white; }
+  /* line 101, ../sass/controls/_buttons.scss */
+  .s-btn.paused, .paused.s-menu {
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlOTEwNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5ODMwMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-size: 100%;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fe9105), color-stop(100%, #e98301));
+    background-image: -moz-linear-gradient(#fe9105, #e98301);
+    background-image: -webkit-linear-gradient(#fe9105, #e98301);
+    background-image: linear-gradient(#fe9105, #e98301);
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    border: none;
+    color: #fff;
+    display: inline-block; }
+    /* line 167, ../sass/_mixins.scss */
+    .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover {
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlYTAyOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZlOTUxMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fea029), color-stop(100%, #fe9510));
+      background-image: -moz-linear-gradient(#fea029, #fe9510);
+      background-image: -webkit-linear-gradient(#fea029, #fe9510);
+      background-image: linear-gradient(#fea029, #fe9510);
+      color: white; }
+    /* line 216, ../sass/_mixins.scss */
+    .s-btn.paused .icon, .paused.s-menu .icon {
+      color: #fff; }
+    /* line 222, ../sass/_mixins.scss */
+    .s-btn.paused:not(.disabled):not(.paused):hover .icon, .paused.s-menu:not(.disabled):not(.paused):hover .icon {
+      color: white; }
+    /* line 103, ../sass/controls/_buttons.scss */
+    .s-btn.paused .icon:before, .paused.s-menu .icon:before {
+      content: "\0000EF"; }
   /* line 108, ../sass/controls/_buttons.scss */
-  .icon-btn.paused .icon,
-  .s-icon-btn.paused .icon {
-    color: #fff; }
-  /* line 116, ../sass/controls/_buttons.scss */
-  .icon-btn:not(.disabled):not(.paused):hover .icon,
-  .s-icon-btn:not(.disabled):not(.paused):hover .icon {
-    color: #33ccff; }
-  /* line 123, ../sass/controls/_buttons.scss */
-  .icon-btn.labeled,
-  .s-icon-btn.labeled {
-    padding: 0 3.75px; }
-    /* line 128, ../sass/controls/_buttons.scss */
-    .icon-btn.labeled .title-label,
-    .s-icon-btn.labeled .title-label {
-      margin-left: 5px; }
-  /* line 133, ../sass/controls/_buttons.scss */
-  .icon-btn.pause-play,
-  .s-icon-btn.pause-play {
-    /*		&.paused {
-    			.icon {
-    				@include pulse(500ms);
-    			}
-    		}*/ }
-    /* line 139, ../sass/controls/_buttons.scss */
-    .icon-btn.pause-play .icon:before,
-    .s-icon-btn.pause-play .icon:before {
+  .s-btn.pause-play, .pause-play.s-menu {
+    /*
+    	&.paused {
+    		.icon {
+    			@include pulse(500ms);
+    		}
+    	}
+    */ }
+    /* line 116, ../sass/controls/_buttons.scss */
+    .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before {
       content: "\0000F1"; }
-  /* line 145, ../sass/controls/_buttons.scss */
-  .icon-btn.show-thumbs .icon:before,
-  .s-icon-btn.show-thumbs .icon:before {
+  /* line 122, ../sass/controls/_buttons.scss */
+  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before {
     content: "\000039"; }
 
-/*********************************** LAYOUT STYLES */
-/* line 152, ../sass/controls/_buttons.scss */
-span.btn,
-span.btn span,
-span.l-btn,
-span.l-btn span,
-a.btn,
-a.btn span,
-a.l-btn,
-a.l-btn span {
-  display: inline-block; }
+/* line 128, ../sass/controls/_buttons.scss */
+.l-btn-set {
+  font-size: 0; }
+  /* line 134, ../sass/controls/_buttons.scss */
+  .l-btn-set .s-btn, .l-btn-set .s-menu {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    margin-left: 1px; }
+  /* line 140, ../sass/controls/_buttons.scss */
+  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu {
+    -moz-border-radius-topleft: 3px;
+    -webkit-border-top-left-radius: 3px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-bottomleft: 3px;
+    -webkit-border-bottom-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    margin-left: 0; }
+  /* line 147, ../sass/controls/_buttons.scss */
+  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu {
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+    -moz-border-radius-bottomright: 3px;
+    -webkit-border-bottom-right-radius: 3px;
+    border-bottom-right-radius: 3px; }
 
+/*********************************** LAYOUT STYLES */
+/*
+
+span.s-btn,
+span.s-btn span,
+a.s-btn,
+a.s-btn span,
+a.s-btn,
+a.s-btn span {
+	display: inline-block;
+}
+*/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -2316,28 +1775,13 @@ a.l-btn span {
     overflow-x: hidden; }
 
 /* line 103, ../sass/controls/_controls.scss */
-.btn-bar {
-  /*	.btn,
-  	.btn-set,
-  	.t-btn {
-  		display: inline-block;
-  		//		margin-left: $interiorMargin;
-  	}
-  	.btn,
-  	.t-btn {
-  		&:first-child {
-  			//			margin-left: 0;
-  		}
-  	}*/ }
-
-/* line 119, ../sass/controls/_controls.scss */
 .l-composite-control {
   vertical-align: middle; }
-  /* line 122, ../sass/controls/_controls.scss */
+  /* line 106, ../sass/controls/_controls.scss */
   .l-composite-control.l-checkbox .composite-control-label {
     line-height: 18px; }
 
-/* line 128, ../sass/controls/_controls.scss */
+/* line 112, ../sass/controls/_controls.scss */
 .l-control-group {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -2346,57 +1790,23 @@ a.l-btn span {
   display: inline-block;
   padding: 0 5px;
   position: relative; }
-  /* line 136, ../sass/controls/_controls.scss */
+  /* line 120, ../sass/controls/_controls.scss */
   .l-control-group:first-child {
     border-left: none;
     padding-left: 0; }
 
-/* line 142, ../sass/controls/_controls.scss */
+/* line 126, ../sass/controls/_controls.scss */
 .l-local-controls {
   position: absolute;
   top: 5px;
   right: 5px;
   z-index: 5; }
 
-/* line 152, ../sass/controls/_controls.scss */
+/* line 136, ../sass/controls/_controls.scss */
 .s-local-controls {
   font-size: 0.7rem; }
 
-/*
-.btn-set {
-	// Buttons that have a very tight conceptual grouping - no internal space between them.
-	display: inline-block;
-	position: relative;
-	.btn,
-	.t-btn {
-		@include border-radius(0);
-		border-left: 1px solid lighten($colorBodyBg, 20%);
-		margin-left: 0;
-		&:first-child {
-			border-left: none;
-			@include border-left-radius($controlCr);
-		}
-		&:last-child {
-			@include border-right-radius($controlCr);
-		}
-	}
-}
-*/
-/* line 177, ../sass/controls/_controls.scss */
-.object-browse-bar .btn,
-.object-browse-bar .t-btn,
-.object-browse-bar .view-switcher,
-.top-bar .buttons-main .btn,
-.top-bar .buttons-main .t-btn,
-.top-bar .view-switcher,
-.tool-bar .btn,
-.tool-bar .t-btn {
-  display: inline-block;
-  font-size: 11.25px;
-  line-height: 200%;
-  vertical-align: top; }
-
-/* line 192, ../sass/controls/_controls.scss */
+/* line 140, ../sass/controls/_controls.scss */
 label.checkbox.custom {
   cursor: pointer;
   display: inline-block;
@@ -2405,13 +1815,13 @@ label.checkbox.custom {
   padding-left: 19px;
   position: relative;
   vertical-align: middle; }
-  /* line 202, ../sass/controls/_controls.scss */
+  /* line 150, ../sass/controls/_controls.scss */
   label.checkbox.custom em {
     color: #999;
     display: inline-block;
     height: 14px;
     min-width: 14px; }
-    /* line 207, ../sass/controls/_controls.scss */
+    /* line 155, ../sass/controls/_controls.scss */
     label.checkbox.custom em:before {
       -moz-border-radius: 1.5px;
       -webkit-border-radius: 1.5px;
@@ -2430,146 +1840,58 @@ label.checkbox.custom {
       top: 0;
       position: absolute;
       text-align: center; }
-  /* line 225, ../sass/controls/_controls.scss */
+  /* line 173, ../sass/controls/_controls.scss */
   label.checkbox.custom.no-text {
     overflow: hidden;
     margin-right: 0;
     padding-left: 0;
     height: 14px;
     width: 14px; }
-    /* line 231, ../sass/controls/_controls.scss */
+    /* line 179, ../sass/controls/_controls.scss */
     label.checkbox.custom.no-text em {
       overflow: hidden; }
-  /* line 235, ../sass/controls/_controls.scss */
+  /* line 183, ../sass/controls/_controls.scss */
   label.checkbox.custom input {
     display: none; }
-    /* line 237, ../sass/controls/_controls.scss */
+    /* line 185, ../sass/controls/_controls.scss */
     label.checkbox.custom input:checked ~ em:before {
       background: #0099cc;
       color: #ccf2ff;
       content: "2"; }
 
-/* line 245, ../sass/controls/_controls.scss */
+/* line 193, ../sass/controls/_controls.scss */
 .input-labeled {
   margin-left: 5px; }
-  /* line 247, ../sass/controls/_controls.scss */
+  /* line 195, ../sass/controls/_controls.scss */
   .input-labeled label {
     display: inline-block;
     margin-right: 3px; }
-  /* line 251, ../sass/controls/_controls.scss */
+  /* line 199, ../sass/controls/_controls.scss */
   .input-labeled.inline {
     display: inline-block; }
-  /* line 254, ../sass/controls/_controls.scss */
+  /* line 202, ../sass/controls/_controls.scss */
   .input-labeled:first-child {
     margin-left: 0; }
 
-/* line 259, ../sass/controls/_controls.scss */
-.btn-menu label.checkbox.custom {
+/* line 207, ../sass/controls/_controls.scss */
+.s-menu label.checkbox.custom {
   margin-left: 5px; }
 
-/* line 264, ../sass/controls/_controls.scss */
+/* line 212, ../sass/controls/_controls.scss */
 .item .checkbox.checked label {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   border-bottom: none; }
 
-/* line 270, ../sass/controls/_controls.scss */
-.btn-menu {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
-  background-image: -moz-linear-gradient(#525252, #454545);
-  background-image: -webkit-linear-gradient(#525252, #454545);
-  background-image: linear-gradient(#525252, #454545);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  border: none;
-  border-top: 1px solid #575757;
-  color: #999;
-  display: inline-block;
-  /*	height: $h;
-  	line-height: $h;
-  	&.dropdown {
-  		padding-left: $p;
-  		padding-right: $p;
-  	}*/
-  /*	&.context-available {
-  		// An element like the invoke-menu triangle;
-  		// Indicates that this element has a dropdown menu available;
-  		// Currently unused
-  		$c: $colorKey;
-  		color: $c;
-  		padding: 0 5px;
-  		&:hover {
-  			color: lighten($c, 10%);
-  		}
-  	}*/ }
-  /* line 167, ../sass/_mixins.scss */
-  .btn-menu:not(.disabled):hover {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #636363), color-stop(100%, #575757));
-    background-image: -moz-linear-gradient(#636363, #575757);
-    background-image: -webkit-linear-gradient(#636363, #575757);
-    background-image: linear-gradient(#636363, #575757);
-    color: #bdbdbd; }
-    /* line 170, ../sass/_mixins.scss */
-    .btn-menu:not(.disabled):hover.btn-menu .invoke-menu {
-      color: #878787; }
-  /* line 175, ../sass/_mixins.scss */
-  .btn-menu.btn-menu .invoke-menu {
-    color: #757575; }
-  /* line 282, ../sass/controls/_controls.scss */
-  .btn-menu:not(.disabled):hover {
-    color: #cccccc; }
-  /* line 307, ../sass/controls/_controls.scss */
-  .btn-menu .name {
-    margin-left: 5px; }
-  /* line 310, ../sass/controls/_controls.scss */
-  .btn-menu .menu {
-    position: absolute;
-    left: 0;
-    text-align: left; }
-    /* line 315, ../sass/controls/_controls.scss */
-    .btn-menu .menu .ui-symbol.icon {
-      width: 12px; }
-
-/* line 329, ../sass/controls/_controls.scss */
-.top-bar .btn-menu.browse-btn {
-  margin-right: 5px;
-  padding-left: 25px; }
-  /* line 332, ../sass/controls/_controls.scss */
-  .top-bar .btn-menu.browse-btn .badge {
-    -moz-border-radius: 4.5px;
-    -webkit-border-radius: 4.5px;
-    border-radius: 4.5px;
-    display: block;
-    font-size: 1em;
-    line-height: 15px;
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    bottom: 5px;
-    right: auto;
-    width: 15px;
-    height: auto; }
-
-/* line 348, ../sass/controls/_controls.scss */
+/* line 218, ../sass/controls/_controls.scss */
 .context-available {
   color: #0099cc; }
-  /* line 351, ../sass/controls/_controls.scss */
+  /* line 221, ../sass/controls/_controls.scss */
   .context-available:hover {
     color: deepskyblue; }
 
-/* line 356, ../sass/controls/_controls.scss */
+/* line 226, ../sass/controls/_controls.scss */
 .view-switcher {
   -moz-transition-property: visibility, opacity, background-color, border-color;
   -o-transition-property: visibility, opacity, background-color, border-color;
@@ -2585,25 +1907,25 @@ label.checkbox.custom {
   transition-timing-function: ease-in-out; }
 
 /******************************************************** OBJECT-HEADER */
-/* line 364, ../sass/controls/_controls.scss */
+/* line 231, ../sass/controls/_controls.scss */
 .object-header {
   font-size: 1em; }
-  /* line 375, ../sass/controls/_controls.scss */
+  /* line 242, ../sass/controls/_controls.scss */
   .object-header > .type-icon {
     font-size: 120%;
     float: left;
     margin-right: 5px; }
-  /* line 381, ../sass/controls/_controls.scss */
+  /* line 248, ../sass/controls/_controls.scss */
   .object-header .l-elem-wrapper {
     justify-content: flex-start;
     -webkit-justify-content: flex-start; }
-    /* line 384, ../sass/controls/_controls.scss */
+    /* line 251, ../sass/controls/_controls.scss */
     .object-header .l-elem-wrapper mct-representation {
       min-width: 0.7em; }
-  /* line 392, ../sass/controls/_controls.scss */
+  /* line 259, ../sass/controls/_controls.scss */
   .object-header .action {
     margin-right: 5px; }
-  /* line 396, ../sass/controls/_controls.scss */
+  /* line 263, ../sass/controls/_controls.scss */
   .object-header .title-label {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -2612,13 +1934,13 @@ label.checkbox.custom {
     flex: 0 1 auto;
     -webkit-flex: 0 1 auto;
     padding-right: 0.35em; }
-  /* line 405, ../sass/controls/_controls.scss */
+  /* line 272, ../sass/controls/_controls.scss */
   .object-header .context-available {
     font-size: 0.7em;
     flex: 0 0 1;
     -webkit-flex: 0 0 1; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 412, ../sass/controls/_controls.scss */
+    /* line 279, ../sass/controls/_controls.scss */
     .object-header .context-available {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -2633,12 +1955,12 @@ label.checkbox.custom {
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       opacity: 0; }
-    /* line 417, ../sass/controls/_controls.scss */
+    /* line 284, ../sass/controls/_controls.scss */
     .object-header:hover .context-available {
       opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 430, ../sass/controls/_controls.scss */
+/* line 297, ../sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2659,7 +1981,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 441, ../sass/controls/_controls.scss */
+/* line 308, ../sass/controls/_controls.scss */
 .slider .knob {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -2677,7 +1999,6 @@ label.checkbox.custom {
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   border: none;
-  border-top: 1px solid #575757;
   color: #999;
   display: inline-block;
   cursor: ew-resize;
@@ -2697,13 +2018,13 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 170, ../sass/_mixins.scss */
-    .slider .knob:not(.disabled):hover.btn-menu .invoke-menu {
-      color: #878787; }
-  /* line 175, ../sass/_mixins.scss */
-  .slider .knob.btn-menu .invoke-menu {
-    color: #757575; }
-  /* line 191, ../sass/_mixins.scss */
+  /* line 216, ../sass/_mixins.scss */
+  .slider .knob .icon {
+    color: #0099cc; }
+  /* line 222, ../sass/_mixins.scss */
+  .slider .knob:not(.disabled):not(.paused):hover .icon {
+    color: #33ccff; }
+  /* line 185, ../sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2727,7 +2048,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 213, ../sass/_mixins.scss */
+  /* line 207, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2742,12 +2063,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 452, ../sass/controls/_controls.scss */
+  /* line 319, ../sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 459, ../sass/controls/_controls.scss */
+/* line 326, ../sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2758,13 +2079,13 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 469, ../sass/controls/_controls.scss */
+  /* line 336, ../sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 478, ../sass/controls/_controls.scss */
+  /* line 345, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2781,7 +2102,7 @@ label.checkbox.custom {
     height: 10px;
     width: 10px; }
 
-  /* line 484, ../sass/controls/_controls.scss */
+  /* line 351, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2799,7 +2120,7 @@ label.checkbox.custom {
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border-top: 1px solid gray; }
-    /* line 491, ../sass/controls/_controls.scss */
+    /* line 358, ../sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -2808,7 +2129,7 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#808080, #737373 20px);
       background-image: linear-gradient(#808080, #737373 20px); }
 
-  /* line 496, ../sass/controls/_controls.scss */
+  /* line 363, ../sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
@@ -2865,12 +2186,42 @@ label.checkbox.custom {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/******************************************************** MENUS */
-/* line 23, ../sass/controls/_menus.scss */
+/******************************************************** MENU BUTTONS */
+/* line 31, ../sass/controls/_menus.scss */
+.s-menu .icon {
+  font-size: 120%; }
+/* line 35, ../sass/controls/_menus.scss */
+.s-menu .title-label {
+  margin-left: 3px; }
+/* line 39, ../sass/controls/_menus.scss */
+.s-menu:after {
+  color: rgba(255, 255, 255, 0.2);
+  content: '\76';
+  display: inline-block;
+  font-family: 'symbolsfont';
+  margin-left: 3px;
+  text-shadow: none;
+  vertical-align: top; }
+/* line 50, ../sass/controls/_menus.scss */
+.s-menu.create-btn .title-label {
+  font-size: 1rem; }
+/* line 53, ../sass/controls/_menus.scss */
+.s-menu.create-btn:after {
+  color: rgba(255, 255, 255, 0.5); }
+/* line 58, ../sass/controls/_menus.scss */
+.s-menu .menu {
+  left: 0;
+  text-align: left; }
+  /* line 61, ../sass/controls/_menus.scss */
+  .s-menu .menu .ui-symbol.icon {
+    width: 12px; }
+
+/******************************************************** MENUS THEMSELVES */
+/* line 68, ../sass/controls/_menus.scss */
 .menu-element {
   cursor: pointer;
   position: relative; }
-  /* line 29, ../sass/controls/_menus.scss */
+  /* line 74, ../sass/controls/_menus.scss */
   .menu-element .menu {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2891,7 +2242,6 @@ label.checkbox.custom {
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border: none;
-    border-top: 1px solid #636363;
     color: #999;
     display: inline-block;
     text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
@@ -2899,19 +2249,16 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 175, ../sass/_mixins.scss */
-    .menu-element .menu.btn-menu .invoke-menu {
-      color: #828282; }
-    /* line 37, ../sass/controls/_menus.scss */
+    /* line 82, ../sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 314, ../sass/_mixins.scss */
+      /* line 312, ../sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
         padding: 0; }
-      /* line 39, ../sass/controls/_menus.scss */
+      /* line 84, ../sass/controls/_menus.scss */
       .menu-element .menu ul li {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
@@ -2922,20 +2269,20 @@ label.checkbox.custom {
         padding: 3px 10px 3px 30px;
         position: relative;
         white-space: nowrap; }
-        /* line 47, ../sass/controls/_menus.scss */
+        /* line 92, ../sass/controls/_menus.scss */
         .menu-element .menu ul li:first-child {
           border: none; }
-        /* line 50, ../sass/controls/_menus.scss */
+        /* line 95, ../sass/controls/_menus.scss */
         .menu-element .menu ul li:hover {
           background: #737373;
           color: #fff; }
-          /* line 56, ../sass/controls/_menus.scss */
+          /* line 101, ../sass/controls/_menus.scss */
           .menu-element .menu ul li:hover .icon {
             color: #33ccff; }
-        /* line 64, ../sass/controls/_menus.scss */
+        /* line 109, ../sass/controls/_menus.scss */
         .menu-element .menu ul li .type-icon {
           left: 10px; }
-  /* line 71, ../sass/controls/_menus.scss */
+  /* line 116, ../sass/controls/_menus.scss */
   .menu-element .context-menu, .menu-element .checkbox-menu,
   .menu-element .super-menu {
     pointer-events: auto;
@@ -2955,60 +2302,55 @@ label.checkbox.custom {
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border: none;
-    border-top: 1px solid #919191;
     color: #999;
     display: inline-block; }
-    /* line 175, ../sass/_mixins.scss */
-    .menu-element .context-menu.btn-menu .invoke-menu, .menu-element .btn-menu.checkbox-menu .invoke-menu,
-    .menu-element .super-menu.btn-menu .invoke-menu {
-      color: #b0b0b0; }
-    /* line 79, ../sass/controls/_menus.scss */
+    /* line 124, ../sass/controls/_menus.scss */
     .menu-element .context-menu ul li, .menu-element .checkbox-menu ul li,
     .menu-element .super-menu ul li {
       padding-left: 25px; }
-      /* line 81, ../sass/controls/_menus.scss */
+      /* line 126, ../sass/controls/_menus.scss */
       .menu-element .context-menu ul li a, .menu-element .checkbox-menu ul li a,
       .menu-element .super-menu ul li a {
         color: white; }
-      /* line 84, ../sass/controls/_menus.scss */
+      /* line 129, ../sass/controls/_menus.scss */
       .menu-element .context-menu ul li .icon, .menu-element .checkbox-menu ul li .icon,
       .menu-element .super-menu ul li .icon {
         color: #24c8ff; }
-      /* line 87, ../sass/controls/_menus.scss */
+      /* line 132, ../sass/controls/_menus.scss */
       .menu-element .context-menu ul li .type-icon, .menu-element .checkbox-menu ul li .type-icon,
       .menu-element .super-menu ul li .type-icon {
         left: 5px; }
-      /* line 90, ../sass/controls/_menus.scss */
+      /* line 135, ../sass/controls/_menus.scss */
       .menu-element .context-menu ul li:hover .icon, .menu-element .checkbox-menu ul li:hover .icon,
       .menu-element .super-menu ul li:hover .icon {
         color: #3dcfff; }
-  /* line 99, ../sass/controls/_menus.scss */
+  /* line 144, ../sass/controls/_menus.scss */
   .menu-element .checkbox-menu ul li {
     padding-left: 50px; }
-    /* line 101, ../sass/controls/_menus.scss */
+    /* line 146, ../sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .checkbox {
       position: absolute;
       left: 5px;
       top: 0.53333rem; }
-      /* line 106, ../sass/controls/_menus.scss */
+      /* line 151, ../sass/controls/_menus.scss */
       .menu-element .checkbox-menu ul li .checkbox em {
         height: 0.7rem;
         width: 0.7rem; }
-        /* line 109, ../sass/controls/_menus.scss */
+        /* line 154, ../sass/controls/_menus.scss */
         .menu-element .checkbox-menu ul li .checkbox em:before {
           font-size: 7px !important;
           height: 0.7rem;
           width: 0.7rem;
           line-height: 0.7rem; }
-    /* line 117, ../sass/controls/_menus.scss */
+    /* line 162, ../sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .type-icon {
       left: 25px; }
-  /* line 123, ../sass/controls/_menus.scss */
+  /* line 168, ../sass/controls/_menus.scss */
   .menu-element .super-menu {
     display: block;
     width: 500px;
     height: 480px; }
-    /* line 133, ../sass/controls/_menus.scss */
+    /* line 178, ../sass/controls/_menus.scss */
     .menu-element .super-menu .contents {
       overflow: hidden;
       position: absolute;
@@ -3018,12 +2360,12 @@ label.checkbox.custom {
       left: 5px;
       width: auto;
       height: auto; }
-    /* line 136, ../sass/controls/_menus.scss */
+    /* line 181, ../sass/controls/_menus.scss */
     .menu-element .super-menu .pane {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box; }
-      /* line 138, ../sass/controls/_menus.scss */
+      /* line 183, ../sass/controls/_menus.scss */
       .menu-element .super-menu .pane.left {
         border-right: 1px solid rgba(255, 255, 255, 0.2);
         left: 0;
@@ -3032,23 +2374,23 @@ label.checkbox.custom {
         width: 50%;
         overflow-x: hidden;
         overflow-y: auto; }
-        /* line 148, ../sass/controls/_menus.scss */
+        /* line 193, ../sass/controls/_menus.scss */
         .menu-element .super-menu .pane.left ul li {
           -moz-border-radius: 3px;
           -webkit-border-radius: 3px;
           border-radius: 3px;
           padding-left: 30px;
           border-top: none; }
-      /* line 155, ../sass/controls/_menus.scss */
+      /* line 200, ../sass/controls/_menus.scss */
       .menu-element .super-menu .pane.right {
         left: auto;
         right: 0;
         padding: 25px;
         width: 50%; }
-        /* line 161, ../sass/controls/_menus.scss */
+        /* line 206, ../sass/controls/_menus.scss */
         .menu-element .super-menu .pane.right .icon {
           color: #fff; }
-    /* line 168, ../sass/controls/_menus.scss */
+    /* line 213, ../sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.icon {
       position: relative;
       font-size: 8em;
@@ -3057,40 +2399,40 @@ label.checkbox.custom {
       line-height: 150px;
       margin-bottom: 25px;
       text-align: center; }
-    /* line 178, ../sass/controls/_menus.scss */
+    /* line 223, ../sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.title {
       color: #fff;
       font-size: 1.2em;
       margin-bottom: 0.5em; }
-    /* line 183, ../sass/controls/_menus.scss */
+    /* line 228, ../sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.description {
       color: #fff;
       font-size: 0.8em;
       line-height: 1.5em; }
-  /* line 192, ../sass/controls/_menus.scss */
+  /* line 237, ../sass/controls/_menus.scss */
   .menu-element .context-menu, .menu-element .checkbox-menu {
     font-size: 0.80rem; }
 
-/* line 197, ../sass/controls/_menus.scss */
+/* line 242, ../sass/controls/_menus.scss */
 .context-menu-holder {
   pointer-events: none;
   position: absolute;
   height: 200px;
   width: 170px;
   z-index: 70; }
-  /* line 203, ../sass/controls/_menus.scss */
+  /* line 248, ../sass/controls/_menus.scss */
   .context-menu-holder .context-menu-wrapper {
     position: absolute;
     height: 100%;
     width: 100%; }
-  /* line 210, ../sass/controls/_menus.scss */
+  /* line 255, ../sass/controls/_menus.scss */
   .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
     right: 0; }
-  /* line 213, ../sass/controls/_menus.scss */
+  /* line 258, ../sass/controls/_menus.scss */
   .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
     bottom: 0; }
 
-/* line 218, ../sass/controls/_menus.scss */
+/* line 263, ../sass/controls/_menus.scss */
 .btn-bar.right .menu,
 .menus-to-left .menu {
   left: auto;
@@ -3228,125 +2570,6 @@ label.checkbox.custom {
     /* line 37, ../sass/mobile/controls/_menus.scss */
     .menu-element .super-menu .pane.right {
       display: none; } }
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 26, ../sass/edit/_editor.scss */
-.edit-main .edit-corner,
-.edit-main .edit-handle {
-  position: absolute;
-  z-index: 2; }
-/* line 32, ../sass/edit/_editor.scss */
-.edit-main .edit-corner {
-  width: 15px;
-  height: 15px; }
-  /* line 35, ../sass/edit/_editor.scss */
-  .edit-main .edit-corner:hover {
-    z-index: 11; }
-  /* line 38, ../sass/edit/_editor.scss */
-  .edit-main .edit-corner.edit-resize-nw {
-    -moz-border-radius-bottomright: 5px;
-    -webkit-border-bottom-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-    cursor: nw-resize;
-    top: 0;
-    left: 0; }
-  /* line 43, ../sass/edit/_editor.scss */
-  .edit-main .edit-corner.edit-resize-ne {
-    -moz-border-radius-bottomleft: 5px;
-    -webkit-border-bottom-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-    cursor: ne-resize;
-    top: 0;
-    right: 0; }
-  /* line 48, ../sass/edit/_editor.scss */
-  .edit-main .edit-corner.edit-resize-se {
-    -moz-border-radius-topleft: 5px;
-    -webkit-border-top-left-radius: 5px;
-    border-top-left-radius: 5px;
-    cursor: se-resize;
-    bottom: 0;
-    right: 0; }
-  /* line 53, ../sass/edit/_editor.scss */
-  .edit-main .edit-corner.edit-resize-sw {
-    -moz-border-radius-topright: 5px;
-    -webkit-border-top-right-radius: 5px;
-    border-top-right-radius: 5px;
-    cursor: sw-resize;
-    bottom: 0;
-    left: 0; }
-/* line 61, ../sass/edit/_editor.scss */
-.edit-main .edit-handle {
-  top: 15px;
-  right: 15px;
-  bottom: 15px;
-  left: 15px; }
-  /* line 63, ../sass/edit/_editor.scss */
-  .edit-main .edit-handle.edit-move {
-    cursor: move;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 1; }
-  /* line 73, ../sass/edit/_editor.scss */
-  .edit-main .edit-handle.edit-resize-n {
-    top: 0px;
-    bottom: auto;
-    height: 15px;
-    cursor: n-resize; }
-  /* line 78, ../sass/edit/_editor.scss */
-  .edit-main .edit-handle.edit-resize-e {
-    right: 0px;
-    left: auto;
-    width: 15px;
-    cursor: e-resize; }
-  /* line 83, ../sass/edit/_editor.scss */
-  .edit-main .edit-handle.edit-resize-s {
-    bottom: 0px;
-    top: auto;
-    height: 15px;
-    cursor: s-resize; }
-  /* line 88, ../sass/edit/_editor.scss */
-  .edit-main .edit-handle.edit-resize-w {
-    left: 0px;
-    right: auto;
-    width: 15px;
-    cursor: w-resize; }
-/* line 97, ../sass/edit/_editor.scss */
-.edit-main .frame.child-frame.panel:hover {
-  -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
-  box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
-  border-color: #0099cc; }
-  /* line 101, ../sass/edit/_editor.scss */
-  .edit-main .frame.child-frame.panel:hover .view-switcher {
-    opacity: 1; }
-  /* line 104, ../sass/edit/_editor.scss */
-  .edit-main .frame.child-frame.panel:hover .edit-corner {
-    background-color: rgba(0, 153, 204, 0.8); }
-    /* line 106, ../sass/edit/_editor.scss */
-    .edit-main .frame.child-frame.panel:hover .edit-corner:hover {
-      background-color: #0099cc; }
-
 /********************************* FORMS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
@@ -3624,7 +2847,6 @@ input[type="text"] {
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   border: none;
-  border-top: 1px solid #575757;
   color: #999;
   display: inline-block;
   cursor: pointer;
@@ -3641,12 +2863,12 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#636363, #575757);
     background-image: linear-gradient(#636363, #575757);
     color: #bdbdbd; }
-    /* line 170, ../sass/_mixins.scss */
-    .form-control.select:not(.disabled):hover.btn-menu .invoke-menu {
-      color: #878787; }
-  /* line 175, ../sass/_mixins.scss */
-  .form-control.select.btn-menu .invoke-menu {
-    color: #757575; }
+  /* line 216, ../sass/_mixins.scss */
+  .form-control.select .icon {
+    color: #0099cc; }
+  /* line 222, ../sass/_mixins.scss */
+  .form-control.select:not(.disabled):not(.paused):hover .icon {
+    color: #33ccff; }
   /* line 29, ../sass/forms/_selects.scss */
   .form-control.select select {
     -moz-appearance: none;
@@ -3961,6 +3183,1875 @@ span.req {
 .top-bar .icon-filter {
   font-size: 1.4em; }
 
+/********************************* USER ENVIRON */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 32, ../sass/user-environ/_layout.scss */
+.holder-all {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+
+/* line 40, ../sass/user-environ/_layout.scss */
+.browse-area,
+.edit-area,
+.editor {
+  position: absolute; }
+
+/* line 46, ../sass/user-environ/_layout.scss */
+.editor {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px; }
+
+/* line 50, ../sass/user-environ/_layout.scss */
+.contents {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+  /* line 58, ../sass/user-environ/_layout.scss */
+  .contents.nomargin {
+    right: 0px;
+    bottom: 0px;
+    left: 0px; }
+
+/* line 67, ../sass/user-environ/_layout.scss */
+.bar .icon.major {
+  margin-right: 5px; }
+/* line 70, ../sass/user-environ/_layout.scss */
+.bar.abs, .s-menu span.bar.l-click-area {
+  text-wrap: none;
+  white-space: nowrap; }
+  /* line 73, ../sass/user-environ/_layout.scss */
+  .bar.abs.left, .s-menu span.bar.left.l-click-area,
+  .bar.abs .left,
+  .s-menu span.bar.l-click-area .left {
+    width: 45%;
+    right: auto; }
+  /* line 78, ../sass/user-environ/_layout.scss */
+  .bar.abs.right, .s-menu span.bar.right.l-click-area,
+  .bar.abs .right,
+  .s-menu span.bar.l-click-area .right {
+    width: 45%;
+    left: auto;
+    text-align: right; }
+    /* line 83, ../sass/user-environ/_layout.scss */
+    .bar.abs.right .icon.major, .s-menu span.bar.right.l-click-area .icon.major,
+    .bar.abs .right .icon.major,
+    .s-menu span.bar.l-click-area .right .icon.major {
+      margin-left: 15px; }
+  /* line 89, ../sass/user-environ/_layout.scss */
+  .bar.abs .l-flex .left, .s-menu span.bar.l-click-area .l-flex .left,
+  .bar.abs .l-flex .right,
+  .s-menu span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .s-menu span.bar.l-flex.l-click-area .left,
+  .bar.abs.l-flex .right,
+  .s-menu span.bar.l-flex.l-click-area .right {
+    width: auto; }
+
+/* line 98, ../sass/user-environ/_layout.scss */
+.user-environ .browse-area,
+.user-environ .edit-area,
+.user-environ .editor {
+  top: 39px;
+  right: 10px;
+  bottom: 35px;
+  left: 10px; }
+/* line 109, ../sass/user-environ/_layout.scss */
+.user-environ .browse-area > .contents,
+.user-environ .edit-area > .contents {
+  left: 0;
+  right: 0; }
+/* line 115, ../sass/user-environ/_layout.scss */
+.user-environ .edit-area {
+  top: 45px; }
+  /* line 118, ../sass/user-environ/_layout.scss */
+  .user-environ .edit-area .tool-bar {
+    bottom: auto;
+    height: 30px;
+    line-height: 25px; }
+  /* line 123, ../sass/user-environ/_layout.scss */
+  .user-environ .edit-area .work-area {
+    top: 40px; }
+/* line 128, ../sass/user-environ/_layout.scss */
+.user-environ .ue-bottom-bar {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  top: auto;
+  height: 25px; }
+  /* line 133, ../sass/user-environ/_layout.scss */
+  .user-environ .ue-bottom-bar .status-holder {
+    z-index: 1; }
+  /* line 137, ../sass/user-environ/_layout.scss */
+  .user-environ .ue-bottom-bar .app-logo {
+    left: auto;
+    width: 105px;
+    z-index: 2; }
+
+/* line 145, ../sass/user-environ/_layout.scss */
+.cols {
+  overflow: hidden;
+  *zoom: 1; }
+  /* line 147, ../sass/user-environ/_layout.scss */
+  .cols .col {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+    *zoom: 1;
+    float: left;
+    margin-left: 1.5%;
+    padding-left: 5px;
+    position: relative; }
+    /* line 155, ../sass/user-environ/_layout.scss */
+    .cols .col:first-child {
+      margin-left: 0;
+      padding-left: 0; }
+  /* line 162, ../sass/user-environ/_layout.scss */
+  .cols.cols-2 .col-1 {
+    min-width: 250px;
+    width: 48.5%; }
+  /* line 168, ../sass/user-environ/_layout.scss */
+  .cols.cols-2-ff .col-100px {
+    width: 100px; }
+  /* line 175, ../sass/user-environ/_layout.scss */
+  .cols.cols-6 .col-1 {
+    min-width: 83.33333px;
+    width: 15.16667%; }
+  /* line 181, ../sass/user-environ/_layout.scss */
+  .cols.cols-16 .col-1 {
+    min-width: 31.25px;
+    width: 4.75%; }
+  /* line 184, ../sass/user-environ/_layout.scss */
+  .cols.cols-16 .col-2 {
+    min-width: 62.5px;
+    width: 11%; }
+  /* line 187, ../sass/user-environ/_layout.scss */
+  .cols.cols-16 .col-7 {
+    min-width: 218.75px;
+    width: 42.25%; }
+  /* line 193, ../sass/user-environ/_layout.scss */
+  .cols.cols-32 .col-2 {
+    min-width: 31.25px;
+    width: 4.75%; }
+  /* line 196, ../sass/user-environ/_layout.scss */
+  .cols.cols-32 .col-15 {
+    min-width: 234.375px;
+    width: 45.375%; }
+  /* line 200, ../sass/user-environ/_layout.scss */
+  .cols .l-row {
+    overflow: hidden;
+    *zoom: 1;
+    padding: 5px 0; }
+
+/* line 208, ../sass/user-environ/_layout.scss */
+.browse-mode .split-layout .split-pane-component.pane.left {
+  min-width: 150px;
+  max-width: 800px;
+  width: 25%; }
+
+/* line 218, ../sass/user-environ/_layout.scss */
+.edit-mode .split-layout .split-pane-component.pane.right {
+  width: 15%; }
+  /* line 220, ../sass/user-environ/_layout.scss */
+  .edit-mode .split-layout .split-pane-component.pane.right .pane.bottom {
+    min-height: 50px;
+    height: 30%; }
+
+/* line 230, ../sass/user-environ/_layout.scss */
+.pane {
+  position: absolute; }
+  /* line 233, ../sass/user-environ/_layout.scss */
+  .pane.treeview.left .create-btn-holder {
+    bottom: auto;
+    top: 0;
+    height: 24px; }
+    /* line 236, ../sass/user-environ/_layout.scss */
+    .pane.treeview.left .create-btn-holder .wrapper.menu-element {
+      position: absolute;
+      bottom: 5px; }
+  /* line 241, ../sass/user-environ/_layout.scss */
+  .pane.treeview.left .search-holder {
+    top: 34px; }
+  /* line 244, ../sass/user-environ/_layout.scss */
+  .pane.treeview.left .tree-holder {
+    overflow: auto;
+    top: 64px; }
+  /* line 251, ../sass/user-environ/_layout.scss */
+  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area,
+  .pane.items .object-browse-bar .right.abs,
+  .pane.items .object-browse-bar .s-menu span.right.l-click-area,
+  .s-menu .pane.items .object-browse-bar span.right.l-click-area {
+    top: auto; }
+  /* line 262, ../sass/user-environ/_layout.scss */
+  .pane.items .object-holder {
+    top: 34px; }
+  /* line 266, ../sass/user-environ/_layout.scss */
+  .pane .object-holder {
+    overflow: auto; }
+
+/* line 274, ../sass/user-environ/_layout.scss */
+.split-layout.horizontal > .pane {
+  margin-top: 5px; }
+  /* line 277, ../sass/user-environ/_layout.scss */
+  .split-layout.horizontal > .pane:first-child {
+    margin-top: 0; }
+/* line 284, ../sass/user-environ/_layout.scss */
+.split-layout.vertical > .pane {
+  margin-left: 5px; }
+  /* line 287, ../sass/user-environ/_layout.scss */
+  .split-layout.vertical > .pane > .holder {
+    left: 0;
+    right: 0; }
+  /* line 291, ../sass/user-environ/_layout.scss */
+  .split-layout.vertical > .pane:first-child {
+    margin-left: 0; }
+    /* line 293, ../sass/user-environ/_layout.scss */
+    .split-layout.vertical > .pane:first-child .holder {
+      right: 3px; }
+
+/* line 302, ../sass/user-environ/_layout.scss */
+.object-browse-bar .s-btn, .object-browse-bar .s-menu,
+.top-bar .buttons-main .s-btn,
+.top-bar .buttons-main .s-menu,
+.top-bar .s-menu,
+.tool-bar .s-btn,
+.tool-bar .s-menu,
+.tool-bar .s-menu {
+  height: 25px;
+  line-height: 25px;
+  vertical-align: top; }
+
+/* line 315, ../sass/user-environ/_layout.scss */
+.object-browse-bar .view-switcher,
+.top-bar .view-switcher {
+  margin-right: 20px; }
+
+/* line 320, ../sass/user-environ/_layout.scss */
+.object-browse-bar {
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 24px;
+  line-height: 24px;
+  white-space: nowrap; }
+  /* line 328, ../sass/user-environ/_layout.scss */
+  .object-browse-bar .left {
+    padding-right: 20px; }
+    /* line 330, ../sass/user-environ/_layout.scss */
+    .object-browse-bar .left .l-back {
+      display: inline-block;
+      float: left;
+      margin-right: 10px; }
+
+/* line 338, ../sass/user-environ/_layout.scss */
+.l-flex {
+  display: flex;
+  display: -webkit-flex;
+  flex-flow: row nowrap;
+  -webkit-flex-flow: row nowrap; }
+  /* line 341, ../sass/user-environ/_layout.scss */
+  .l-flex .left {
+    flex: 1 1 0;
+    -webkit-flex: 1 1 0; }
+
+/* line 347, ../sass/user-environ/_layout.scss */
+.vscroll {
+  overflow-y: auto; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 26, ../sass/mobile/_layout.scss */
+  .browse-wrapper,
+  .pane {
+    top: 0 !important;
+    right: 0;
+    bottom: 0;
+    left: 0; }
+
+  /* line 31, ../sass/mobile/_layout.scss */
+  .pane.left.treeview {
+    background-color: #222; }
+
+  /* line 35, ../sass/mobile/_layout.scss */
+  .pane.right-repr {
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    transition-timing-function: ease;
+    backface-visibility: hidden;
+    margin-left: 0 !important; }
+    /* line 39, ../sass/mobile/_layout.scss */
+    .pane.right-repr #content-area {
+      -moz-transition-duration: 0.35s;
+      -o-transition-duration: 0.35s;
+      -webkit-transition-duration: 0.35s;
+      transition-duration: 0.35s;
+      transition-timing-function: ease;
+      backface-visibility: hidden;
+      opacity: 1; }
+
+  /* line 45, ../sass/mobile/_layout.scss */
+  .user-environ .browse-area,
+  .user-environ .edit-area,
+  .user-environ .editor {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 25px; }
+
+  /* line 51, ../sass/mobile/_layout.scss */
+  .holder.l-mobile {
+    top: 10px !important;
+    right: 10px !important;
+    bottom: 10px !important;
+    left: 10px !important; }
+
+  /* line 61, ../sass/mobile/_layout.scss */
+  .browse-hidetree {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; }
+    /* line 65, ../sass/mobile/_layout.scss */
+    .browse-hidetree .pane.left.treeview {
+      opacity: 0;
+      right: 100% !important;
+      width: auto !important;
+      overflow-y: hidden;
+      overflow-x: hidden; }
+    /* line 74, ../sass/mobile/_layout.scss */
+    .browse-hidetree .pane.right-repr {
+      left: 0 !important; }
+
+  /* line 79, ../sass/mobile/_layout.scss */
+  .browse-showtree {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; }
+    /* line 88, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane.left.treeview {
+      -moz-transition-property: opacity;
+      -o-transition-property: opacity;
+      -webkit-transition-property: opacity;
+      transition-property: opacity;
+      -moz-transition-duration: 0.4s;
+      -o-transition-duration: 0.4s;
+      -webkit-transition-duration: 0.4s;
+      transition-duration: 0.4s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+      background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+      opacity: 1;
+      display: block !important;
+      right: auto !important;
+      width: 40% !important; }
+    /* line 98, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane.right-repr {
+      left: 40% !important; }
+
+  /* line 107, ../sass/mobile/_layout.scss */
+  .mobile-menu-icon {
+    font-size: 110%;
+    position: absolute;
+    top: 12px;
+    left: 10px; }
+
+  /* line 114, ../sass/mobile/_layout.scss */
+  .object-browse-bar {
+    left: 30px !important; }
+    /* line 117, ../sass/mobile/_layout.scss */
+    .object-browse-bar .context-available {
+      opacity: 1 !important; }
+    /* line 120, ../sass/mobile/_layout.scss */
+    .object-browse-bar .view-switcher {
+      margin-right: 0 !important; }
+      /* line 122, ../sass/mobile/_layout.scss */
+      .object-browse-bar .view-switcher .title-label {
+        display: none; }
+
+  /* line 129, ../sass/mobile/_layout.scss */
+  .tree-holder {
+    overflow-x: hidden !important; }
+
+  /* line 133, ../sass/mobile/_layout.scss */
+  .mobile-disable-select {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; }
+
+  /* line 138, ../sass/mobile/_layout.scss */
+  .mobile-hide,
+  .mobile-hide-important {
+    display: none !important; }
+
+  /* line 143, ../sass/mobile/_layout.scss */
+  .mobile-back-hide {
+    pointer-events: none;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 0; }
+
+  /* line 148, ../sass/mobile/_layout.scss */
+  .mobile-back-unhide {
+    pointer-events: all;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 1; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 157, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane.left.treeview {
+    width: 90% !important; }
+  /* line 160, ../sass/mobile/_layout.scss */
+  .browse-showtree .pane.right-repr {
+    left: 0 !important;
+    transform: translateX(90%);
+    -webkit-transform: translateX(90%); }
+    /* line 163, ../sass/mobile/_layout.scss */
+    .browse-showtree .pane.right-repr #content-area {
+      opacity: 0; } }
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+  /* line 171, ../sass/mobile/_layout.scss */
+  .desktop-hide {
+    display: none; } }
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 26, ../sass/edit/_editor.scss */
+.edit-main .edit-corner,
+.edit-main .edit-handle {
+  position: absolute;
+  z-index: 2; }
+/* line 32, ../sass/edit/_editor.scss */
+.edit-main .edit-corner {
+  width: 15px;
+  height: 15px; }
+  /* line 35, ../sass/edit/_editor.scss */
+  .edit-main .edit-corner:hover {
+    z-index: 11; }
+  /* line 38, ../sass/edit/_editor.scss */
+  .edit-main .edit-corner.edit-resize-nw {
+    -moz-border-radius-bottomright: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    cursor: nw-resize;
+    top: 0;
+    left: 0; }
+  /* line 43, ../sass/edit/_editor.scss */
+  .edit-main .edit-corner.edit-resize-ne {
+    -moz-border-radius-bottomleft: 5px;
+    -webkit-border-bottom-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    cursor: ne-resize;
+    top: 0;
+    right: 0; }
+  /* line 48, ../sass/edit/_editor.scss */
+  .edit-main .edit-corner.edit-resize-se {
+    -moz-border-radius-topleft: 5px;
+    -webkit-border-top-left-radius: 5px;
+    border-top-left-radius: 5px;
+    cursor: se-resize;
+    bottom: 0;
+    right: 0; }
+  /* line 53, ../sass/edit/_editor.scss */
+  .edit-main .edit-corner.edit-resize-sw {
+    -moz-border-radius-topright: 5px;
+    -webkit-border-top-right-radius: 5px;
+    border-top-right-radius: 5px;
+    cursor: sw-resize;
+    bottom: 0;
+    left: 0; }
+/* line 61, ../sass/edit/_editor.scss */
+.edit-main .edit-handle {
+  top: 15px;
+  right: 15px;
+  bottom: 15px;
+  left: 15px; }
+  /* line 63, ../sass/edit/_editor.scss */
+  .edit-main .edit-handle.edit-move {
+    cursor: move;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 1; }
+  /* line 73, ../sass/edit/_editor.scss */
+  .edit-main .edit-handle.edit-resize-n {
+    top: 0px;
+    bottom: auto;
+    height: 15px;
+    cursor: n-resize; }
+  /* line 78, ../sass/edit/_editor.scss */
+  .edit-main .edit-handle.edit-resize-e {
+    right: 0px;
+    left: auto;
+    width: 15px;
+    cursor: e-resize; }
+  /* line 83, ../sass/edit/_editor.scss */
+  .edit-main .edit-handle.edit-resize-s {
+    bottom: 0px;
+    top: auto;
+    height: 15px;
+    cursor: s-resize; }
+  /* line 88, ../sass/edit/_editor.scss */
+  .edit-main .edit-handle.edit-resize-w {
+    left: 0px;
+    right: auto;
+    width: 15px;
+    cursor: w-resize; }
+/* line 97, ../sass/edit/_editor.scss */
+.edit-main .frame.child-frame.panel:hover {
+  -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+  box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+  border-color: #0099cc; }
+  /* line 101, ../sass/edit/_editor.scss */
+  .edit-main .frame.child-frame.panel:hover .view-switcher {
+    opacity: 1; }
+  /* line 104, ../sass/edit/_editor.scss */
+  .edit-main .frame.child-frame.panel:hover .edit-corner {
+    background-color: rgba(0, 153, 204, 0.8); }
+    /* line 106, ../sass/edit/_editor.scss */
+    .edit-main .frame.child-frame.panel:hover .edit-corner:hover {
+      background-color: #0099cc; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../sass/search/_search.scss */
+.abs.search-holder, .s-menu span.search-holder.l-click-area {
+  height: 25px;
+  bottom: 0;
+  top: 23px;
+  z-index: 5; }
+  /* line 27, ../sass/search/_search.scss */
+  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area {
+    height: auto;
+    bottom: 0; }
+
+/* line 38, ../sass/search/_search.scss */
+.search {
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: column;
+  -webkit-flex-direction: column;
+  height: 100%; }
+  /* line 48, ../sass/search/_search.scss */
+  .search .search-bar {
+    font-size: 0.8em;
+    max-width: 250px;
+    position: relative;
+    width: 100%; }
+    /* line 60, ../sass/search/_search.scss */
+    .search .search-bar .search-input {
+      height: 25px;
+      line-height: 25px;
+      padding-top: 0;
+      padding-bottom: 0; }
+    /* line 67, ../sass/search/_search.scss */
+    .search .search-bar .search-icon,
+    .search .search-bar .clear-icon,
+    .search .search-bar .menu-icon {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      color: #737373;
+      height: 17px;
+      width: 17px;
+      line-height: 17px;
+      position: absolute;
+      text-align: center;
+      top: 4px; }
+    /* line 80, ../sass/search/_search.scss */
+    .search .search-bar .clear-icon,
+    .search .search-bar .menu-icon {
+      cursor: pointer;
+      transition: color .25s; }
+    /* line 87, ../sass/search/_search.scss */
+    .search .search-bar .search-input {
+      position: relative;
+      width: 100%;
+      padding-left: 22px !important;
+      padding-right: 44px !important; }
+      /* line 94, ../sass/search/_search.scss */
+      .search .search-bar .search-input input {
+        width: 100%; }
+    /* line 99, ../sass/search/_search.scss */
+    .search .search-bar .search-icon {
+      color: #737373;
+      left: 3px;
+      transition: visibility .15s, opacity .15s, color .2s;
+      pointer-events: none; }
+    /* line 119, ../sass/search/_search.scss */
+    .search .search-bar .search-input:hover + div.search-icon {
+      color: #a6a6a6; }
+    /* line 123, ../sass/search/_search.scss */
+    .search .search-bar .clear-icon {
+      right: 22px;
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility .15s, opacity .15s, color .2s; }
+      /* line 132, ../sass/search/_search.scss */
+      .search .search-bar .clear-icon.content {
+        visibility: visible;
+        opacity: 1; }
+      /* line 137, ../sass/search/_search.scss */
+      .search .search-bar .clear-icon:hover {
+        color: #a6a6a6; }
+    /* line 142, ../sass/search/_search.scss */
+    .search .search-bar .menu-icon {
+      font-size: 0.8em;
+      padding-right: 4px;
+      right: 4px;
+      text-align: right; }
+      /* line 148, ../sass/search/_search.scss */
+      .search .search-bar .menu-icon:hover {
+        color: #a6a6a6; }
+    /* line 153, ../sass/search/_search.scss */
+    .search .search-bar .search-menu-holder {
+      float: right;
+      left: -20px;
+      z-index: 1;
+      transition: visibility .05s, opacity .05s; }
+      /* line 163, ../sass/search/_search.scss */
+      .search .search-bar .search-menu-holder.off {
+        visibility: hidden;
+        opacity: 0; }
+    /* line 170, ../sass/search/_search.scss */
+    .search .search-bar .menu-icon:hover + div.search-menu-holder {
+      visibility: visible; }
+    /* line 173, ../sass/search/_search.scss */
+    .search .search-bar div.search-menu-holder:hover {
+      visibility: visible; }
+  /* line 178, ../sass/search/_search.scss */
+  .search .active-filter-display {
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    line-height: 130%;
+    padding: 5px 0;
+    padding-left: 1.4625em;
+    font-size: 0.65em;
+    margin-top: 3px; }
+    /* line 193, ../sass/search/_search.scss */
+    .search .active-filter-display .clear-filters-icon {
+      opacity: 0.4;
+      font-size: 0.8em;
+      position: absolute;
+      left: 1px;
+      cursor: pointer; }
+    /* line 204, ../sass/search/_search.scss */
+    .search .active-filter-display.off {
+      visibility: hidden;
+      opacity: 0;
+      height: 0;
+      margin: 0;
+      padding: 0;
+      border: 0; }
+  /* line 214, ../sass/search/_search.scss */
+  .search .search-scroll {
+    order: 3;
+    margin-top: 4px;
+    overflow-y: auto;
+    top: auto;
+    height: auto;
+    max-height: 100%;
+    position: relative; }
+    /* line 227, ../sass/search/_search.scss */
+    .search .search-scroll .load-icon {
+      position: relative; }
+      /* line 229, ../sass/search/_search.scss */
+      .search .search-scroll .load-icon.loading {
+        pointer-events: none;
+        margin-left: 6px; }
+        /* line 233, ../sass/search/_search.scss */
+        .search .search-scroll .load-icon.loading .title-label {
+          font-style: italic;
+          font-size: .9em;
+          opacity: 0.5;
+          margin-left: 26px;
+          line-height: 24px; }
+        /* line 243, ../sass/search/_search.scss */
+        .search .search-scroll .load-icon.loading .wait-spinner {
+          margin-left: 6px; }
+      /* line 248, ../sass/search/_search.scss */
+      .search .search-scroll .load-icon:not(.loading) {
+        cursor: pointer; }
+    /* line 253, ../sass/search/_search.scss */
+    .search .search-scroll .load-more-button {
+      margin-top: 5px 0;
+      font-size: 0.8em;
+      position: relative;
+      left: 50%;
+      margin-left: -45px;
+      text-align: center;
+      width: 90px;
+      white-space: nowrap; }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 5, ../sass/mobile/search/_search.scss */
+  .search .search-bar .menu-icon {
+    display: none; }
+  /* line 8, ../sass/mobile/search/_search.scss */
+  .search .search-bar .clear-icon {
+    right: 5px; } }
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../sass/overlay/_overlay.scss */
+.overlay .blocker {
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 100; }
+/* line 27, ../sass/overlay/_overlay.scss */
+.overlay .clk-icon.close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  bottom: auto;
+  left: auto;
+  z-index: 100; }
+/* line 32, ../sass/overlay/_overlay.scss */
+.overlay > .holder {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
+  background-image: -moz-linear-gradient(#525252, #454545);
+  background-image: -webkit-linear-gradient(#525252, #454545);
+  background-image: linear-gradient(#525252, #454545);
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+  border: none;
+  color: #999;
+  display: inline-block;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  color: #999;
+  top: 15%;
+  right: 15%;
+  bottom: 15%;
+  left: 15%;
+  z-index: 101; }
+  /* line 39, ../sass/overlay/_overlay.scss */
+  .overlay > .holder > .contents {
+    top: 25px;
+    right: 25px;
+    bottom: 25px;
+    left: 25px; }
+/* line 44, ../sass/overlay/_overlay.scss */
+.overlay .title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 1.2em;
+  margin-bottom: 5px; }
+/* line 50, ../sass/overlay/_overlay.scss */
+.overlay .top-bar {
+  height: 60px; }
+/* line 54, ../sass/overlay/_overlay.scss */
+.overlay .editor {
+  top: 70px;
+  bottom: 40px;
+  left: 0;
+  right: 0; }
+/* line 60, ../sass/overlay/_overlay.scss */
+.overlay .bottom-bar {
+  top: auto;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: visible;
+  height: 30px;
+  text-align: right; }
+  /* line 66, ../sass/overlay/_overlay.scss */
+  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu {
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc4Nzg3OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZiNmI2YiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-size: 100%;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #787878), color-stop(100%, #6b6b6b));
+    background-image: -moz-linear-gradient(#787878, #6b6b6b);
+    background-image: -webkit-linear-gradient(#787878, #6b6b6b);
+    background-image: linear-gradient(#787878, #6b6b6b);
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    border: none;
+    color: #bfbfbf;
+    display: inline-block;
+    font-size: 95%;
+    height: 30px;
+    line-height: 30px;
+    margin-left: 5px;
+    padding: 0 15px; }
+    /* line 167, ../sass/_mixins.scss */
+    .overlay .bottom-bar .s-btn:not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.disabled):hover {
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhOGE4YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkN2Q3ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8a8a8a), color-stop(100%, #7d7d7d));
+      background-image: -moz-linear-gradient(#8a8a8a, #7d7d7d);
+      background-image: -webkit-linear-gradient(#8a8a8a, #7d7d7d);
+      background-image: linear-gradient(#8a8a8a, #7d7d7d);
+      color: #e3e3e3; }
+/* line 82, ../sass/overlay/_overlay.scss */
+.overlay .contents.l-dialog {
+  top: 5px;
+  right: 5px;
+  bottom: 5px;
+  left: 5px;
+  overflow: auto; }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 4, ../sass/mobile/overlay/_overlay.scss */
+  .overlay .clk-icon.close {
+    top: 10px;
+    right: 10px; }
+  /* line 8, ../sass/mobile/overlay/_overlay.scss */
+  .overlay > .holder {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0; }
+    /* line 14, ../sass/mobile/overlay/_overlay.scss */
+    .overlay > .holder > .contents {
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      left: 10px; }
+      /* line 21, ../sass/mobile/overlay/_overlay.scss */
+      .overlay > .holder > .contents .top-bar > .title {
+        margin-right: 1.2em; }
+      /* line 26, ../sass/mobile/overlay/_overlay.scss */
+      .overlay > .holder > .contents .form.editor {
+        border: none; }
+        /* line 29, ../sass/mobile/overlay/_overlay.scss */
+        .overlay > .holder > .contents .form.editor .contents {
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 43, ../sass/mobile/overlay/_overlay.scss */
+  .overlay > .holder > .contents .form.editor .contents .form-row > .label,
+  .overlay > .holder > .contents .form.editor .contents .form-row > .controls {
+    display: block;
+    float: none;
+    width: 100%; } }
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../sass/tree/_tree.scss */
+ul.tree {
+  margin: 0;
+  padding: 0; }
+  /* line 312, ../sass/_mixins.scss */
+  ul.tree li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0; }
+  /* line 25, ../sass/tree/_tree.scss */
+  ul.tree li {
+    display: block;
+    position: relative; }
+  /* line 29, ../sass/tree/_tree.scss */
+  ul.tree ul.tree {
+    margin-left: 15px; }
+
+/* line 34, ../sass/tree/_tree.scss */
+.tree-item,
+.search-result-item {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  -moz-transition: background-color 0.25s;
+  -o-transition: background-color 0.25s;
+  -webkit-transition: background-color 0.25s;
+  transition: background-color 0.25s;
+  display: block;
+  font-size: 0.8rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  margin-bottom: 3px;
+  position: relative; }
+  /* line 47, ../sass/tree/_tree.scss */
+  .tree-item .view-control,
+  .search-result-item .view-control {
+    display: inline-block;
+    margin-left: 5px;
+    font-size: 0.75em;
+    width: 10px; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 55, ../sass/tree/_tree.scss */
+      .tree-item .view-control:hover,
+      .search-result-item .view-control:hover {
+        color: #ffc700; } }
+  /* line 61, ../sass/tree/_tree.scss */
+  .tree-item .label,
+  .search-result-item .label {
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    width: auto;
+    height: auto;
+    line-height: 1.5rem; }
+    /* line 69, ../sass/tree/_tree.scss */
+    .tree-item .label .type-icon,
+    .search-result-item .label .type-icon {
+      text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
+      font-size: 16px;
+      color: #0099cc;
+      left: 5px;
+      position: absolute;
+      top: 4px;
+      bottom: auto;
+      height: 16px;
+      line-height: 100%;
+      right: auto;
+      width: 16px; }
+      /* line 82, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-alert {
+        text-shadow: black 0 1px 2px;
+        position: absolute;
+        z-index: 2; }
+      /* line 88, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-item .label .type-icon .icon.l-icon-alert {
+        color: #ff3c00;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        top: 1px;
+        right: -2px; }
+      /* line 94, ../sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-link {
+        color: #49dedb;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        left: -3px;
+        bottom: 0px; }
+    /* line 102, ../sass/tree/_tree.scss */
+    .tree-item .label .title-label,
+    .search-result-item .label .title-label {
+      overflow: hidden;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      width: auto;
+      height: auto;
+      display: block;
+      left: 30px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; }
+  /* line 113, ../sass/tree/_tree.scss */
+  .tree-item.loading,
+  .search-result-item.loading {
+    pointer-events: none; }
+    /* line 115, ../sass/tree/_tree.scss */
+    .tree-item.loading .label,
+    .search-result-item.loading .label {
+      opacity: 0.5; }
+      /* line 117, ../sass/tree/_tree.scss */
+      .tree-item.loading .label .title-label,
+      .search-result-item.loading .label .title-label {
+        font-style: italic; }
+    /* line 121, ../sass/tree/_tree.scss */
+    .tree-item.loading .wait-spinner,
+    .search-result-item.loading .wait-spinner {
+      margin-left: 14px; }
+  /* line 126, ../sass/tree/_tree.scss */
+  .tree-item.selected,
+  .search-result-item.selected {
+    background: #005177;
+    color: #fff; }
+    /* line 130, ../sass/tree/_tree.scss */
+    .tree-item.selected .view-control,
+    .search-result-item.selected .view-control {
+      color: #0099cc; }
+    /* line 133, ../sass/tree/_tree.scss */
+    .tree-item.selected .label .type-icon,
+    .search-result-item.selected .label .type-icon {
+      color: #fff; }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 141, ../sass/tree/_tree.scss */
+    .tree-item:not(.selected):hover,
+    .search-result-item:not(.selected):hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #cccccc; }
+      /* line 144, ../sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .context-trigger,
+      .search-result-item:not(.selected):hover .context-trigger {
+        display: block; }
+      /* line 147, ../sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .icon,
+      .search-result-item:not(.selected):hover .icon {
+        color: #33ccff; } }
+  /* line 154, ../sass/tree/_tree.scss */
+  .tree-item:not(.loading),
+  .search-result-item:not(.loading) {
+    cursor: pointer; }
+  /* line 158, ../sass/tree/_tree.scss */
+  .tree-item .context-trigger,
+  .search-result-item .context-trigger {
+    top: -1px;
+    position: absolute;
+    right: 3px; }
+    /* line 164, ../sass/tree/_tree.scss */
+    .tree-item .context-trigger .invoke-menu,
+    .search-result-item .context-trigger .invoke-menu {
+      font-size: 0.75em;
+      height: 0.9rem;
+      line-height: 0.9rem; }
+
+/* line 173, ../sass/tree/_tree.scss */
+.tree-item .label {
+  left: 15px; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 27, ../sass/mobile/_tree.scss */
+  ul.tree ul.tree {
+    margin-left: 20px; }
+
+  /* line 31, ../sass/mobile/_tree.scss */
+  .tree-item,
+  .search-result-item {
+    height: 35px;
+    line-height: 35px;
+    margin-bottom: 0px; }
+    /* line 36, ../sass/mobile/_tree.scss */
+    .tree-item .view-control,
+    .search-result-item .view-control {
+      position: absolute;
+      font-size: 1.1em;
+      right: 0px;
+      width: 30px;
+      text-align: center; }
+    /* line 45, ../sass/mobile/_tree.scss */
+    .tree-item .label,
+    .search-result-item .label {
+      left: 0;
+      right: 35px;
+      line-height: 35px; }
+      /* line 50, ../sass/mobile/_tree.scss */
+      .tree-item .label .type-icon,
+      .search-result-item .label .type-icon {
+        top: 9px;
+        bottom: auto;
+        height: 16px; } }
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 25, ../sass/user-environ/_frame.scss */
+.frame.child-frame.panel {
+  background: #333;
+  border: 1px solid #4d4d4d; }
+  /* line 28, ../sass/user-environ/_frame.scss */
+  .frame.child-frame.panel:hover {
+    border-color: #666666; }
+/* line 32, ../sass/user-environ/_frame.scss */
+.frame > .object-header.abs, .s-menu .frame > span.object-header.l-click-area {
+  font-size: 0.75em;
+  height: 16px;
+  line-height: 16px; }
+/* line 38, ../sass/user-environ/_frame.scss */
+.frame > .object-holder.abs, .s-menu .frame > span.object-holder.l-click-area {
+  top: 21px; }
+/* line 41, ../sass/user-environ/_frame.scss */
+.frame .contents {
+  top: 5px;
+  right: 5px;
+  bottom: 5px;
+  left: 5px; }
+/* line 49, ../sass/user-environ/_frame.scss */
+.frame.frame-template .view-switcher {
+  font-size: 80%;
+  height: 16px;
+  line-height: 16px;
+  z-index: 10; }
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+  /* line 58, ../sass/user-environ/_frame.scss */
+  .frame.frame-template .view-switcher {
+    opacity: 0; }
+  /* line 61, ../sass/user-environ/_frame.scss */
+  .frame.frame-template:hover .view-switcher {
+    opacity: 1; } }
+/* line 69, ../sass/user-environ/_frame.scss */
+.frame .view-switcher .title-label {
+  display: none; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../sass/user-environ/_top-bar.scss */
+.top-bar.browse, .top-bar.edit {
+  border-bottom: 1px solid #4d4d4d;
+  top: 10px;
+  right: 10px;
+  bottom: auto;
+  left: 10px;
+  height: 30px;
+  line-height: 24px; }
+/* line 31, ../sass/user-environ/_top-bar.scss */
+.top-bar .title {
+  color: #fff; }
+/* line 35, ../sass/user-environ/_top-bar.scss */
+.top-bar .buttons-main {
+  font-size: 0.8em;
+  left: auto;
+  text-align: right; }
+
+/* line 48, ../sass/user-environ/_top-bar.scss */
+.edit-mode .top-bar .buttons-main {
+  white-space: nowrap; }
+  /* line 52, ../sass/user-environ/_top-bar.scss */
+  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .s-menu span.buttons-main.l-click-area, .s-menu .edit-mode .top-bar span.buttons-main.l-click-area {
+    bottom: auto;
+    left: auto; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../sass/user-environ/_bottom-bar.scss */
+.ue-bottom-bar {
+  background: #000;
+  color: gray;
+  font-size: .7rem; }
+  /* line 28, ../sass/user-environ/_bottom-bar.scss */
+  .ue-bottom-bar .status-holder {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    bottom: 5px;
+    left: 5px;
+    width: auto;
+    height: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 15px;
+    right: 120px;
+    text-transform: uppercase; }
+  /* line 39, ../sass/user-environ/_bottom-bar.scss */
+  .ue-bottom-bar .app-logo {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    bottom: 5px;
+    left: 5px;
+    width: auto;
+    height: auto;
+    left: auto;
+    cursor: pointer; }
+    /* line 48, ../sass/user-environ/_bottom-bar.scss */
+    .ue-bottom-bar .app-logo.logo-openmctweb {
+      background: url("../images/logo-openmctweb.svg") no-repeat center center; }
+
+/* line 54, ../sass/user-environ/_bottom-bar.scss */
+.status.block {
+  display: inline;
+  margin-right: 10px; }
+  /* line 58, ../sass/user-environ/_bottom-bar.scss */
+  .status.block .status-indicator {
+    display: inline-block;
+    margin-right: 3px;
+    color: #0099cc; }
+    /* line 65, ../sass/user-environ/_bottom-bar.scss */
+    .status.block .status-indicator.ok {
+      color: #009900; }
+    /* line 68, ../sass/user-environ/_bottom-bar.scss */
+    .status.block .status-indicator.caution {
+      color: #ffaa00; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../sass/user-environ/_tool-bar.scss */
+.tool-bar {
+  border-bottom: 1px solid #4d4d4d; }
+  /* line 24, ../sass/user-environ/_tool-bar.scss */
+  .tool-bar .l-control-group {
+    height: 25px; }
+  /* line 27, ../sass/user-environ/_tool-bar.scss */
+  .tool-bar input[type="text"] {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    font-size: .9em;
+    height: 25px;
+    margin-bottom: 1px;
+    position: relative; }
+    /* line 33, ../sass/user-environ/_tool-bar.scss */
+    .tool-bar input[type="text"].sm {
+      width: 25px; }
+  /* line 37, ../sass/user-environ/_tool-bar.scss */
+  .tool-bar .input-labeled label {
+    font-size: 11.25px; }
+
+/********************************* VIEWS */
+/*****************************************************************************
+* Open MCT Web, Copyright (c) 2014-2015, United States Government
+* as represented by the Administrator of the National Aeronautics and Space
+* Administration. All rights reserved.
+*
+* Open MCT Web is licensed under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+* http://www.apache.org/licenses/LICENSE-2.0.
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*
+* Open MCT Web includes source code licensed under additional open source
+* licenses. See the Open Source Licenses file (LICENSES.md) included with
+* this source code distribution or the Licensing information page available
+* at runtime from the About dialog for additional information.
+*****************************************************************************/
+/* line 23, ../sass/_fixed-position.scss */
+.t-fixed-position.l-fixed-position {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto; }
+  /* line 33, ../sass/_fixed-position.scss */
+  .t-fixed-position.l-fixed-position .l-grid-holder {
+    position: relative;
+    height: 100%;
+    width: 100%; }
+    /* line 37, ../sass/_fixed-position.scss */
+    .t-fixed-position.l-fixed-position .l-grid-holder .l-grid {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      pointer-events: none;
+      z-index: 0; }
+/* line 48, ../sass/_fixed-position.scss */
+.t-fixed-position .l-fixed-position-item {
+  position: absolute;
+  border: 1px solid transparent; }
+  /* line 52, ../sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item.s-selected {
+    -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+    box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+    border-color: #0099cc;
+    cursor: move; }
+  /* line 57, ../sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item.s-not-selected {
+    opacity: 0.8; }
+  /* line 61, ../sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-box,
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-image,
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%; }
+  /* line 72, ../sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-image {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center; }
+  /* line 78, ../sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
+    text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
+    border: 1px solid transparent;
+    font-size: 0.8rem;
+    line-height: 100%; }
+    /* line 84, ../sass/_fixed-position.scss */
+    .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text {
+      padding: 1px; }
+    /* line 89, ../sass/_fixed-position.scss */
+    .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      display: block;
+      padding: 2px; }
+      /* line 96, ../sass/_fixed-position.scss */
+      .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-title {
+        float: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: auto; }
+      /* line 105, ../sass/_fixed-position.scss */
+      .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value {
+        -moz-border-radius: 2px;
+        -webkit-border-radius: 2px;
+        border-radius: 2px;
+        float: right;
+        margin-left: 5px;
+        padding-left: 5px;
+        padding-right: 5px;
+        text-align: right; }
+        /* line 116, ../sass/_fixed-position.scss */
+        .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value.telem-only {
+          margin-left: 0;
+          width: 100%; }
+/* line 126, ../sass/_fixed-position.scss */
+.t-fixed-position .l-fixed-position-item-handle {
+  background: rgba(0, 153, 204, 0.5);
+  cursor: crosshair;
+  border: 1px solid #0099cc;
+  position: absolute; }
+
+/* line 140, ../sass/_fixed-position.scss */
+.edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-x {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  background-size: 100%;
+  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-repeat: repeat-x; }
+/* line 144, ../sass/_fixed-position.scss */
+.edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-y {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  background-size: 100%;
+  background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-repeat: repeat-y; }
+/* line 152, ../sass/_fixed-position.scss */
+.edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected) {
+  border: 1px dotted rgba(0, 153, 204, 0.75); }
+  /* line 154, ../sass/_fixed-position.scss */
+  .edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover {
+    border: 1px dotted #0099cc; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../sass/lists/_tabular.scss */
+.w1, .w2 {
+  position: relative;
+  height: 100%; }
+
+/* line 27, ../sass/lists/_tabular.scss */
+.tabular,
+table {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-spacing: 0;
+  border-collapse: collapse;
+  color: #fff;
+  display: table;
+  font-size: 0.75rem;
+  position: relative;
+  width: 100%; }
+  /* line 38, ../sass/lists/_tabular.scss */
+  .tabular thead, .tabular .thead,
+  .tabular tbody tr, .tabular .tbody .tr,
+  table thead,
+  table .thead,
+  table tbody tr,
+  table .tbody .tr {
+    width: 100%; }
+  /* line 44, ../sass/lists/_tabular.scss */
+  .tabular thead, .tabular .thead,
+  table thead,
+  table .thead {
+    border-bottom: 1px solid #333; }
+  /* line 47, ../sass/lists/_tabular.scss */
+  .tabular tbody, .tabular .tbody,
+  table tbody,
+  table .tbody {
+    display: table-row-group; }
+    /* line 54, ../sass/lists/_tabular.scss */
+    .tabular tbody tr:hover, .tabular tbody .tr:hover, .tabular .tbody tr:hover, .tabular .tbody .tr:hover,
+    table tbody tr:hover,
+    table tbody .tr:hover,
+    table .tbody tr:hover,
+    table .tbody .tr:hover {
+      background: rgba(255, 255, 255, 0.1); }
+  /* line 59, ../sass/lists/_tabular.scss */
+  .tabular tr, .tabular .tr,
+  table tr,
+  table .tr {
+    display: table-row; }
+    /* line 61, ../sass/lists/_tabular.scss */
+    .tabular tr:first-child .td, .tabular .tr:first-child .td,
+    table tr:first-child .td,
+    table .tr:first-child .td {
+      border-top: none; }
+    /* line 65, ../sass/lists/_tabular.scss */
+    .tabular tr.group-header td, .tabular tr.group-header .td, .tabular .tr.group-header td, .tabular .tr.group-header .td,
+    table tr.group-header td,
+    table tr.group-header .td,
+    table .tr.group-header td,
+    table .tr.group-header .td {
+      background-color: #404040;
+      color: #a6a6a6; }
+    /* line 71, ../sass/lists/_tabular.scss */
+    .tabular tr th, .tabular tr .th, .tabular tr td, .tabular tr .td, .tabular .tr th, .tabular .tr .th, .tabular .tr td, .tabular .tr .td,
+    table tr th,
+    table tr .th,
+    table tr td,
+    table tr .td,
+    table .tr th,
+    table .tr .th,
+    table .tr td,
+    table .tr .td {
+      display: table-cell; }
+    /* line 74, ../sass/lists/_tabular.scss */
+    .tabular tr th, .tabular tr .th, .tabular .tr th, .tabular .tr .th,
+    table tr th,
+    table tr .th,
+    table .tr th,
+    table .tr .th {
+      background-color: #4d4d4d;
+      border-left: 1px solid #333;
+      color: #b3b3b3;
+      padding: 5px 5px;
+      white-space: nowrap;
+      vertical-align: middle; }
+      /* line 81, ../sass/lists/_tabular.scss */
+      .tabular tr th:first-child, .tabular tr .th:first-child, .tabular .tr th:first-child, .tabular .tr .th:first-child,
+      table tr th:first-child,
+      table tr .th:first-child,
+      table .tr th:first-child,
+      table .tr .th:first-child {
+        border-left: none; }
+      /* line 85, ../sass/lists/_tabular.scss */
+      .tabular tr th.sort.sort:after, .tabular tr .th.sort.sort:after, .tabular .tr th.sort.sort:after, .tabular .tr .th.sort.sort:after,
+      table tr th.sort.sort:after,
+      table tr .th.sort.sort:after,
+      table .tr th.sort.sort:after,
+      table .tr .th.sort.sort:after {
+        color: #49dedb;
+        font-family: symbolsfont;
+        font-size: 8px;
+        content: "\ed";
+        display: inline-block;
+        margin-left: 3px; }
+      /* line 93, ../sass/lists/_tabular.scss */
+      .tabular tr th.sort.sort.desc:after, .tabular tr .th.sort.sort.desc:after, .tabular .tr th.sort.sort.desc:after, .tabular .tr .th.sort.sort.desc:after,
+      table tr th.sort.sort.desc:after,
+      table tr .th.sort.sort.desc:after,
+      table .tr th.sort.sort.desc:after,
+      table .tr .th.sort.sort.desc:after {
+        content: "\ec"; }
+      /* line 97, ../sass/lists/_tabular.scss */
+      .tabular tr th.sortable, .tabular tr .th.sortable, .tabular .tr th.sortable, .tabular .tr .th.sortable,
+      table tr th.sortable,
+      table tr .th.sortable,
+      table .tr th.sortable,
+      table .tr .th.sortable {
+        cursor: pointer; }
+    /* line 101, ../sass/lists/_tabular.scss */
+    .tabular tr td, .tabular tr .td, .tabular .tr td, .tabular .tr .td,
+    table tr td,
+    table tr .td,
+    table .tr td,
+    table .tr .td {
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      min-width: 20px;
+      color: #fff;
+      padding: 3px 5px;
+      word-wrap: break-word;
+      vertical-align: top; }
+      /* line 108, ../sass/lists/_tabular.scss */
+      .tabular tr td.numeric, .tabular tr .td.numeric, .tabular .tr td.numeric, .tabular .tr .td.numeric,
+      table tr td.numeric,
+      table tr .td.numeric,
+      table .tr td.numeric,
+      table .tr .td.numeric {
+        text-align: right; }
+      /* line 111, ../sass/lists/_tabular.scss */
+      .tabular tr td.s-cell-type-value, .tabular tr .td.s-cell-type-value, .tabular .tr td.s-cell-type-value, .tabular .tr .td.s-cell-type-value,
+      table tr td.s-cell-type-value,
+      table tr .td.s-cell-type-value,
+      table .tr td.s-cell-type-value,
+      table .tr .td.s-cell-type-value {
+        text-align: right; }
+        /* line 113, ../sass/lists/_tabular.scss */
+        .tabular tr td.s-cell-type-value .l-cell-contents, .tabular tr .td.s-cell-type-value .l-cell-contents, .tabular .tr td.s-cell-type-value .l-cell-contents, .tabular .tr .td.s-cell-type-value .l-cell-contents,
+        table tr td.s-cell-type-value .l-cell-contents,
+        table tr .td.s-cell-type-value .l-cell-contents,
+        table .tr td.s-cell-type-value .l-cell-contents,
+        table .tr .td.s-cell-type-value .l-cell-contents {
+          -moz-border-radius: 2px;
+          -webkit-border-radius: 2px;
+          border-radius: 2px;
+          padding-left: 5px;
+          padding-right: 5px; }
+  /* line 129, ../sass/lists/_tabular.scss */
+  .tabular.filterable tbody, .tabular.filterable .tbody,
+  table.filterable tbody,
+  table.filterable .tbody {
+    top: 44px; }
+  /* line 132, ../sass/lists/_tabular.scss */
+  .tabular.filterable input[type="text"],
+  table.filterable input[type="text"] {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 100%; }
+  /* line 138, ../sass/lists/_tabular.scss */
+  .tabular.fixed-header,
+  table.fixed-header {
+    height: 100%; }
+    /* line 140, ../sass/lists/_tabular.scss */
+    .tabular.fixed-header thead, .tabular.fixed-header .thead,
+    .tabular.fixed-header tbody tr, .tabular.fixed-header .tbody .tr,
+    table.fixed-header thead,
+    table.fixed-header .thead,
+    table.fixed-header tbody tr,
+    table.fixed-header .tbody .tr {
+      display: table;
+      table-layout: fixed; }
+    /* line 145, ../sass/lists/_tabular.scss */
+    .tabular.fixed-header thead, .tabular.fixed-header .thead,
+    table.fixed-header thead,
+    table.fixed-header .thead {
+      width: calc(100% - 10px); }
+      /* line 147, ../sass/lists/_tabular.scss */
+      .tabular.fixed-header thead:before, .tabular.fixed-header .thead:before,
+      table.fixed-header thead:before,
+      table.fixed-header .thead:before {
+        content: "";
+        display: block;
+        z-index: 0;
+        position: absolute;
+        width: 100%;
+        height: 22px;
+        background: rgba(255, 255, 255, 0.15); }
+    /* line 157, ../sass/lists/_tabular.scss */
+    .tabular.fixed-header tbody, .tabular.fixed-header .tbody,
+    table.fixed-header tbody,
+    table.fixed-header .tbody {
+      overflow: hidden;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: auto;
+      height: auto;
+      top: 22px;
+      display: block;
+      overflow-y: scroll; }
+  /* line 165, ../sass/lists/_tabular.scss */
+  .tabular.t-event-messages td, .tabular.t-event-messages .td,
+  table.t-event-messages td,
+  table.t-event-messages .td {
+    min-width: 150px; }
+
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -4250,1341 +5341,6 @@ span.req {
   right: 0;
   left: 0; }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 23, ../sass/search/_search.scss */
-.abs.search-holder, .btn-menu span.search-holder.l-click-area {
-  height: 25px;
-  bottom: 0;
-  top: 23px;
-  z-index: 5; }
-  /* line 27, ../sass/search/_search.scss */
-  .abs.search-holder.active, .btn-menu span.search-holder.active.l-click-area {
-    height: auto;
-    bottom: 0; }
-
-/* line 38, ../sass/search/_search.scss */
-.search {
-  display: flex;
-  display: -webkit-flex;
-  flex-direction: column;
-  -webkit-flex-direction: column;
-  height: 100%; }
-  /* line 48, ../sass/search/_search.scss */
-  .search .search-bar {
-    font-size: 0.8em;
-    max-width: 250px;
-    position: relative;
-    width: 100%; }
-    /* line 60, ../sass/search/_search.scss */
-    .search .search-bar .search-input {
-      height: 25px;
-      line-height: 25px;
-      padding-top: 0;
-      padding-bottom: 0; }
-    /* line 67, ../sass/search/_search.scss */
-    .search .search-bar .search-icon,
-    .search .search-bar .clear-icon,
-    .search .search-bar .menu-icon {
-      -moz-box-sizing: border-box;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      color: #737373;
-      height: 17px;
-      width: 17px;
-      line-height: 17px;
-      position: absolute;
-      text-align: center;
-      top: 4px; }
-    /* line 80, ../sass/search/_search.scss */
-    .search .search-bar .clear-icon,
-    .search .search-bar .menu-icon {
-      cursor: pointer;
-      transition: color .25s; }
-    /* line 87, ../sass/search/_search.scss */
-    .search .search-bar .search-input {
-      position: relative;
-      width: 100%;
-      padding-left: 22px !important;
-      padding-right: 44px !important; }
-      /* line 94, ../sass/search/_search.scss */
-      .search .search-bar .search-input input {
-        width: 100%; }
-    /* line 99, ../sass/search/_search.scss */
-    .search .search-bar .search-icon {
-      color: #737373;
-      left: 3px;
-      transition: visibility .15s, opacity .15s, color .2s;
-      pointer-events: none; }
-    /* line 119, ../sass/search/_search.scss */
-    .search .search-bar .search-input:hover + div.search-icon {
-      color: #a6a6a6; }
-    /* line 123, ../sass/search/_search.scss */
-    .search .search-bar .clear-icon {
-      right: 22px;
-      visibility: hidden;
-      opacity: 0;
-      transition: visibility .15s, opacity .15s, color .2s; }
-      /* line 132, ../sass/search/_search.scss */
-      .search .search-bar .clear-icon.content {
-        visibility: visible;
-        opacity: 1; }
-      /* line 137, ../sass/search/_search.scss */
-      .search .search-bar .clear-icon:hover {
-        color: #a6a6a6; }
-    /* line 142, ../sass/search/_search.scss */
-    .search .search-bar .menu-icon {
-      font-size: 0.8em;
-      padding-right: 4px;
-      right: 4px;
-      text-align: right; }
-      /* line 148, ../sass/search/_search.scss */
-      .search .search-bar .menu-icon:hover {
-        color: #a6a6a6; }
-    /* line 153, ../sass/search/_search.scss */
-    .search .search-bar .search-menu-holder {
-      float: right;
-      left: -20px;
-      z-index: 1;
-      transition: visibility .05s, opacity .05s; }
-      /* line 163, ../sass/search/_search.scss */
-      .search .search-bar .search-menu-holder.off {
-        visibility: hidden;
-        opacity: 0; }
-    /* line 170, ../sass/search/_search.scss */
-    .search .search-bar .menu-icon:hover + div.search-menu-holder {
-      visibility: visible; }
-    /* line 173, ../sass/search/_search.scss */
-    .search .search-bar div.search-menu-holder:hover {
-      visibility: visible; }
-  /* line 178, ../sass/search/_search.scss */
-  .search .active-filter-display {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    line-height: 130%;
-    padding: 5px 0;
-    padding-left: 1.4625em;
-    font-size: 0.65em;
-    margin-top: 3px; }
-    /* line 193, ../sass/search/_search.scss */
-    .search .active-filter-display .clear-filters-icon {
-      opacity: 0.4;
-      font-size: 0.8em;
-      position: absolute;
-      left: 1px;
-      cursor: pointer; }
-    /* line 204, ../sass/search/_search.scss */
-    .search .active-filter-display.off {
-      visibility: hidden;
-      opacity: 0;
-      height: 0;
-      margin: 0;
-      padding: 0;
-      border: 0; }
-  /* line 214, ../sass/search/_search.scss */
-  .search .search-scroll {
-    order: 3;
-    margin-top: 4px;
-    overflow-y: auto;
-    top: auto;
-    height: auto;
-    max-height: 100%;
-    position: relative; }
-    /* line 227, ../sass/search/_search.scss */
-    .search .search-scroll .load-icon {
-      position: relative; }
-      /* line 229, ../sass/search/_search.scss */
-      .search .search-scroll .load-icon.loading {
-        pointer-events: none;
-        margin-left: 6px; }
-        /* line 233, ../sass/search/_search.scss */
-        .search .search-scroll .load-icon.loading .title-label {
-          font-style: italic;
-          font-size: .9em;
-          opacity: 0.5;
-          margin-left: 26px;
-          line-height: 24px; }
-        /* line 243, ../sass/search/_search.scss */
-        .search .search-scroll .load-icon.loading .wait-spinner {
-          margin-left: 6px; }
-      /* line 248, ../sass/search/_search.scss */
-      .search .search-scroll .load-icon:not(.loading) {
-        cursor: pointer; }
-    /* line 253, ../sass/search/_search.scss */
-    .search .search-scroll .load-more-button {
-      margin-top: 5px 0;
-      font-size: 0.8em;
-      position: relative;
-      left: 50%;
-      margin-left: -45px;
-      text-align: center;
-      width: 90px;
-      white-space: nowrap; }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 5, ../sass/mobile/search/_search.scss */
-  .search .search-bar .menu-icon {
-    display: none; }
-  /* line 8, ../sass/mobile/search/_search.scss */
-  .search .search-bar .clear-icon {
-    right: 5px; } }
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 23, ../sass/overlay/_overlay.scss */
-.overlay .blocker {
-  background: rgba(0, 0, 0, 0.7);
-  z-index: 100; }
-/* line 27, ../sass/overlay/_overlay.scss */
-.overlay .clk-icon.close {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  bottom: auto;
-  left: auto;
-  z-index: 100; }
-/* line 32, ../sass/overlay/_overlay.scss */
-.overlay > .holder {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
-  background-image: -moz-linear-gradient(#525252, #454545);
-  background-image: -webkit-linear-gradient(#525252, #454545);
-  background-image: linear-gradient(#525252, #454545);
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  border: none;
-  border-top: 1px solid #575757;
-  color: #999;
-  display: inline-block;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
-  border-radius: 6px;
-  color: #999;
-  top: 15%;
-  right: 15%;
-  bottom: 15%;
-  left: 15%;
-  z-index: 101; }
-  /* line 175, ../sass/_mixins.scss */
-  .overlay > .holder.btn-menu .invoke-menu {
-    color: #757575; }
-  /* line 39, ../sass/overlay/_overlay.scss */
-  .overlay > .holder > .contents {
-    top: 25px;
-    right: 25px;
-    bottom: 25px;
-    left: 25px; }
-/* line 44, ../sass/overlay/_overlay.scss */
-.overlay .title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 1.2em;
-  margin-bottom: 5px; }
-/* line 50, ../sass/overlay/_overlay.scss */
-.overlay .top-bar {
-  height: 60px; }
-/* line 54, ../sass/overlay/_overlay.scss */
-.overlay .editor {
-  top: 70px;
-  bottom: 50px;
-  left: 0;
-  right: 0; }
-/* line 60, ../sass/overlay/_overlay.scss */
-.overlay .bottom-bar {
-  top: auto;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  overflow: visible;
-  height: 40px;
-  text-align: right; }
-  /* line 66, ../sass/overlay/_overlay.scss */
-  .overlay .bottom-bar .btn {
-    margin-left: 10px; }
-/* line 70, ../sass/overlay/_overlay.scss */
-.overlay .contents.l-dialog {
-  top: 5px;
-  right: 5px;
-  bottom: 5px;
-  left: 5px;
-  overflow: auto; }
-
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 4, ../sass/mobile/overlay/_overlay.scss */
-  .overlay .clk-icon.close {
-    top: 10px;
-    right: 10px; }
-  /* line 8, ../sass/mobile/overlay/_overlay.scss */
-  .overlay > .holder {
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0; }
-    /* line 14, ../sass/mobile/overlay/_overlay.scss */
-    .overlay > .holder > .contents {
-      top: 10px;
-      right: 10px;
-      bottom: 10px;
-      left: 10px; }
-      /* line 21, ../sass/mobile/overlay/_overlay.scss */
-      .overlay > .holder > .contents .top-bar > .title {
-        margin-right: 1.2em; }
-      /* line 26, ../sass/mobile/overlay/_overlay.scss */
-      .overlay > .holder > .contents .form.editor {
-        border: none; }
-        /* line 29, ../sass/mobile/overlay/_overlay.scss */
-        .overlay > .holder > .contents .form.editor .contents {
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0; } }
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 43, ../sass/mobile/overlay/_overlay.scss */
-  .overlay > .holder > .contents .form.editor .contents .form-row > .label,
-  .overlay > .holder > .contents .form.editor .contents .form-row > .controls {
-    display: block;
-    float: none;
-    width: 100%; } }
-/********************************* USER ENVIRON */
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 23, ../sass/tree/_tree.scss */
-ul.tree {
-  margin: 0;
-  padding: 0; }
-  /* line 314, ../sass/_mixins.scss */
-  ul.tree li {
-    list-style-type: none;
-    margin: 0;
-    padding: 0; }
-  /* line 25, ../sass/tree/_tree.scss */
-  ul.tree li {
-    display: block;
-    position: relative; }
-  /* line 29, ../sass/tree/_tree.scss */
-  ul.tree ul.tree {
-    margin-left: 15px; }
-
-/* line 34, ../sass/tree/_tree.scss */
-.tree-item,
-.search-result-item {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-transition: background-color 0.25s;
-  -o-transition: background-color 0.25s;
-  -webkit-transition: background-color 0.25s;
-  transition: background-color 0.25s;
-  display: block;
-  font-size: 0.8rem;
-  height: 1.5rem;
-  line-height: 1.5rem;
-  margin-bottom: 3px;
-  position: relative; }
-  /* line 47, ../sass/tree/_tree.scss */
-  .tree-item .view-control,
-  .search-result-item .view-control {
-    display: inline-block;
-    margin-left: 5px;
-    font-size: 0.75em;
-    width: 10px; }
-    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 55, ../sass/tree/_tree.scss */
-      .tree-item .view-control:hover,
-      .search-result-item .view-control:hover {
-        color: #ffc700; } }
-  /* line 61, ../sass/tree/_tree.scss */
-  .tree-item .label,
-  .search-result-item .label {
-    display: block;
-    overflow: hidden;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    width: auto;
-    height: auto;
-    line-height: 1.5rem; }
-    /* line 69, ../sass/tree/_tree.scss */
-    .tree-item .label .type-icon,
-    .search-result-item .label .type-icon {
-      text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
-      font-size: 16px;
-      color: #0099cc;
-      left: 5px;
-      position: absolute;
-      top: 4px;
-      bottom: auto;
-      height: 16px;
-      line-height: 100%;
-      right: auto;
-      width: 16px; }
-      /* line 82, ../sass/tree/_tree.scss */
-      .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
-      .search-result-item .label .type-icon .icon.l-icon-link,
-      .search-result-item .label .type-icon .icon.l-icon-alert {
-        text-shadow: black 0 1px 2px;
-        position: absolute;
-        z-index: 2; }
-      /* line 88, ../sass/tree/_tree.scss */
-      .tree-item .label .type-icon .icon.l-icon-alert,
-      .search-result-item .label .type-icon .icon.l-icon-alert {
-        color: #ff3c00;
-        font-size: 8px;
-        line-height: 8px;
-        height: 8px;
-        width: 8px;
-        top: 1px;
-        right: -2px; }
-      /* line 94, ../sass/tree/_tree.scss */
-      .tree-item .label .type-icon .icon.l-icon-link,
-      .search-result-item .label .type-icon .icon.l-icon-link {
-        color: #49dedb;
-        font-size: 8px;
-        line-height: 8px;
-        height: 8px;
-        width: 8px;
-        left: -3px;
-        bottom: 0px; }
-    /* line 102, ../sass/tree/_tree.scss */
-    .tree-item .label .title-label,
-    .search-result-item .label .title-label {
-      overflow: hidden;
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      bottom: 0px;
-      left: 0px;
-      width: auto;
-      height: auto;
-      display: block;
-      left: 30px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap; }
-  /* line 113, ../sass/tree/_tree.scss */
-  .tree-item.loading,
-  .search-result-item.loading {
-    pointer-events: none; }
-    /* line 115, ../sass/tree/_tree.scss */
-    .tree-item.loading .label,
-    .search-result-item.loading .label {
-      opacity: 0.5; }
-      /* line 117, ../sass/tree/_tree.scss */
-      .tree-item.loading .label .title-label,
-      .search-result-item.loading .label .title-label {
-        font-style: italic; }
-    /* line 121, ../sass/tree/_tree.scss */
-    .tree-item.loading .wait-spinner,
-    .search-result-item.loading .wait-spinner {
-      margin-left: 14px; }
-  /* line 126, ../sass/tree/_tree.scss */
-  .tree-item.selected,
-  .search-result-item.selected {
-    background: #005177;
-    color: #fff; }
-    /* line 130, ../sass/tree/_tree.scss */
-    .tree-item.selected .view-control,
-    .search-result-item.selected .view-control {
-      color: #0099cc; }
-    /* line 133, ../sass/tree/_tree.scss */
-    .tree-item.selected .label .type-icon,
-    .search-result-item.selected .label .type-icon {
-      color: #fff; }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 141, ../sass/tree/_tree.scss */
-    .tree-item:not(.selected):hover,
-    .search-result-item:not(.selected):hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: #cccccc; }
-      /* line 144, ../sass/tree/_tree.scss */
-      .tree-item:not(.selected):hover .context-trigger,
-      .search-result-item:not(.selected):hover .context-trigger {
-        display: block; }
-      /* line 147, ../sass/tree/_tree.scss */
-      .tree-item:not(.selected):hover .icon,
-      .search-result-item:not(.selected):hover .icon {
-        color: #33ccff; } }
-  /* line 154, ../sass/tree/_tree.scss */
-  .tree-item:not(.loading),
-  .search-result-item:not(.loading) {
-    cursor: pointer; }
-  /* line 158, ../sass/tree/_tree.scss */
-  .tree-item .context-trigger,
-  .search-result-item .context-trigger {
-    top: -1px;
-    position: absolute;
-    right: 3px; }
-    /* line 164, ../sass/tree/_tree.scss */
-    .tree-item .context-trigger .invoke-menu,
-    .search-result-item .context-trigger .invoke-menu {
-      font-size: 0.75em;
-      height: 0.9rem;
-      line-height: 0.9rem; }
-
-/* line 173, ../sass/tree/_tree.scss */
-.tree-item .label {
-  left: 15px; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 27, ../sass/mobile/_tree.scss */
-  ul.tree ul.tree {
-    margin-left: 20px; }
-
-  /* line 31, ../sass/mobile/_tree.scss */
-  .tree-item,
-  .search-result-item {
-    height: 35px;
-    line-height: 35px;
-    margin-bottom: 0px; }
-    /* line 36, ../sass/mobile/_tree.scss */
-    .tree-item .view-control,
-    .search-result-item .view-control {
-      position: absolute;
-      font-size: 1.1em;
-      right: 0px;
-      width: 30px;
-      text-align: center; }
-    /* line 45, ../sass/mobile/_tree.scss */
-    .tree-item .label,
-    .search-result-item .label {
-      left: 0;
-      right: 35px;
-      line-height: 35px; }
-      /* line 50, ../sass/mobile/_tree.scss */
-      .tree-item .label .type-icon,
-      .search-result-item .label .type-icon {
-        top: 9px;
-        bottom: auto;
-        height: 16px; } }
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 25, ../sass/user-environ/_frame.scss */
-.frame.child-frame.panel {
-  background: #333;
-  border: 1px solid #4d4d4d; }
-  /* line 28, ../sass/user-environ/_frame.scss */
-  .frame.child-frame.panel:hover {
-    border-color: #666666; }
-/* line 32, ../sass/user-environ/_frame.scss */
-.frame > .object-header.abs, .btn-menu .frame > span.object-header.l-click-area {
-  font-size: 0.75em;
-  height: 16px;
-  line-height: 16px; }
-/* line 38, ../sass/user-environ/_frame.scss */
-.frame > .object-holder.abs, .btn-menu .frame > span.object-holder.l-click-area {
-  top: 21px; }
-/* line 41, ../sass/user-environ/_frame.scss */
-.frame .contents {
-  top: 5px;
-  right: 5px;
-  bottom: 5px;
-  left: 5px; }
-/* line 49, ../sass/user-environ/_frame.scss */
-.frame.frame-template .view-switcher {
-  line-height: 16px;
-  z-index: 10; }
-@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 56, ../sass/user-environ/_frame.scss */
-  .frame.frame-template .view-switcher {
-    opacity: 0; }
-  /* line 59, ../sass/user-environ/_frame.scss */
-  .frame.frame-template:hover .view-switcher {
-    opacity: 1; } }
-/* line 67, ../sass/user-environ/_frame.scss */
-.frame .view-switcher .name {
-  display: none; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 23, ../sass/user-environ/_top-bar.scss */
-.top-bar.browse, .top-bar.edit {
-  border-bottom: 1px solid #4d4d4d;
-  top: 10px;
-  right: 10px;
-  bottom: auto;
-  left: 10px;
-  height: 30px;
-  line-height: 24px; }
-/* line 31, ../sass/user-environ/_top-bar.scss */
-.top-bar .title {
-  color: #fff; }
-/* line 35, ../sass/user-environ/_top-bar.scss */
-.top-bar .buttons-main {
-  font-size: 0.8em;
-  left: auto;
-  text-align: right; }
-
-/* line 48, ../sass/user-environ/_top-bar.scss */
-.edit-mode .top-bar .buttons-main {
-  white-space: nowrap; }
-  /* line 52, ../sass/user-environ/_top-bar.scss */
-  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .btn-menu span.buttons-main.l-click-area, .btn-menu .edit-mode .top-bar span.buttons-main.l-click-area {
-    bottom: auto;
-    left: auto; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 22, ../sass/user-environ/_bottom-bar.scss */
-.ue-bottom-bar {
-  background: #000;
-  color: gray;
-  font-size: .7rem; }
-  /* line 28, ../sass/user-environ/_bottom-bar.scss */
-  .ue-bottom-bar .status-holder {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    overflow: hidden;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    bottom: 5px;
-    left: 5px;
-    width: auto;
-    height: auto;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 15px;
-    right: 120px;
-    text-transform: uppercase; }
-  /* line 39, ../sass/user-environ/_bottom-bar.scss */
-  .ue-bottom-bar .app-logo {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    overflow: hidden;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    bottom: 5px;
-    left: 5px;
-    width: auto;
-    height: auto;
-    left: auto;
-    cursor: pointer; }
-    /* line 48, ../sass/user-environ/_bottom-bar.scss */
-    .ue-bottom-bar .app-logo.logo-openmctweb {
-      background: url("../images/logo-openmctweb.svg") no-repeat center center; }
-
-/* line 54, ../sass/user-environ/_bottom-bar.scss */
-.status.block {
-  display: inline;
-  margin-right: 10px; }
-  /* line 58, ../sass/user-environ/_bottom-bar.scss */
-  .status.block .status-indicator {
-    display: inline-block;
-    margin-right: 3px;
-    color: #0099cc; }
-    /* line 65, ../sass/user-environ/_bottom-bar.scss */
-    .status.block .status-indicator.ok {
-      color: #009900; }
-    /* line 68, ../sass/user-environ/_bottom-bar.scss */
-    .status.block .status-indicator.caution {
-      color: #ffaa00; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 22, ../sass/user-environ/_tool-bar.scss */
-.tool-bar {
-  border-bottom: 1px solid #4d4d4d; }
-  /* line 24, ../sass/user-environ/_tool-bar.scss */
-  .tool-bar .l-control-group {
-    height: 25px; }
-  /* line 27, ../sass/user-environ/_tool-bar.scss */
-  .tool-bar input[type="text"] {
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    font-size: .9em;
-    height: 25px;
-    margin-bottom: 1px;
-    position: relative; }
-    /* line 33, ../sass/user-environ/_tool-bar.scss */
-    .tool-bar input[type="text"].sm {
-      width: 25px; }
-  /* line 37, ../sass/user-environ/_tool-bar.scss */
-  .tool-bar .input-labeled label {
-    font-size: 11.25px; }
-
-/********************************* HELPERS */
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 24, ../sass/helpers/_bubbles.scss */
-.bubble-container {
-  pointer-events: none; }
-
-/* line 31, ../sass/helpers/_bubbles.scss */
-.l-infobubble-wrapper {
-  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
-  box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
-  position: relative;
-  z-index: 50; }
-  /* line 36, ../sass/helpers/_bubbles.scss */
-  .l-infobubble-wrapper .l-infobubble {
-    display: inline-block;
-    min-width: 100px;
-    max-width: 300px;
-    padding: 5px 10px; }
-    /* line 41, ../sass/helpers/_bubbles.scss */
-    .l-infobubble-wrapper .l-infobubble:before {
-      content: "";
-      position: absolute;
-      width: 0;
-      height: 0; }
-    /* line 47, ../sass/helpers/_bubbles.scss */
-    .l-infobubble-wrapper .l-infobubble table {
-      width: 100%; }
-      /* line 50, ../sass/helpers/_bubbles.scss */
-      .l-infobubble-wrapper .l-infobubble table tr td {
-        padding: 2px 0;
-        vertical-align: top; }
-        /* line 53, ../sass/helpers/_bubbles.scss */
-        .l-infobubble-wrapper .l-infobubble table tr td.label {
-          padding-right: 10px;
-          white-space: nowrap; }
-        /* line 57, ../sass/helpers/_bubbles.scss */
-        .l-infobubble-wrapper .l-infobubble table tr td.value {
-          word-break: break-all; }
-        /* line 61, ../sass/helpers/_bubbles.scss */
-        .l-infobubble-wrapper .l-infobubble table tr td.align-wrap {
-          white-space: normal; }
-    /* line 67, ../sass/helpers/_bubbles.scss */
-    .l-infobubble-wrapper .l-infobubble .title {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      margin-bottom: 5px; }
-  /* line 74, ../sass/helpers/_bubbles.scss */
-  .l-infobubble-wrapper.arw-left {
-    margin-left: 20px; }
-    /* line 76, ../sass/helpers/_bubbles.scss */
-    .l-infobubble-wrapper.arw-left .l-infobubble::before {
-      right: 100%; }
-      @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 76, ../sass/helpers/_bubbles.scss */
-        .l-infobubble-wrapper.arw-left .l-infobubble::before {
-          width: 0;
-          height: 0;
-          border-top: 6.66667px solid transparent;
-          border-bottom: 6.66667px solid transparent;
-          border-right: 10px solid #ddd; } }
-  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 88, ../sass/helpers/_bubbles.scss */
-    .l-infobubble-wrapper.arw-right {
-      margin-right: 20px; } }
-  /* line 95, ../sass/helpers/_bubbles.scss */
-  .l-infobubble-wrapper.arw-right .l-infobubble::before {
-    left: 100%; }
-    @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 95, ../sass/helpers/_bubbles.scss */
-      .l-infobubble-wrapper.arw-right .l-infobubble::before {
-        width: 0;
-        height: 0;
-        border-top: 6.66667px solid transparent;
-        border-bottom: 6.66667px solid transparent;
-        border-left: 10px solid #ddd; } }
-  /* line 108, ../sass/helpers/_bubbles.scss */
-  .l-infobubble-wrapper.arw-top .l-infobubble::before {
-    top: 20px; }
-  /* line 114, ../sass/helpers/_bubbles.scss */
-  .l-infobubble-wrapper.arw-btm .l-infobubble::before {
-    bottom: 20px; }
-  /* line 119, ../sass/helpers/_bubbles.scss */
-  .l-infobubble-wrapper.arw-down {
-    margin-bottom: 10px; }
-    /* line 121, ../sass/helpers/_bubbles.scss */
-    .l-infobubble-wrapper.arw-down .l-infobubble::before {
-      left: 50%;
-      top: 100%;
-      margin-left: -5px;
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-top: 7.5px solid #ddd; }
-  /* line 130, ../sass/helpers/_bubbles.scss */
-  .l-infobubble-wrapper .arw {
-    z-index: 2; }
-  /* line 133, ../sass/helpers/_bubbles.scss */
-  .l-infobubble-wrapper.arw-up .arw.arw-down, .l-infobubble-wrapper.arw-down .arw.arw-up {
-    display: none; }
-
-/* line 142, ../sass/helpers/_bubbles.scss */
-.l-thumbsbubble-wrapper .arw-up {
-  width: 0;
-  height: 0;
-  border-left: 6.66667px solid transparent;
-  border-right: 6.66667px solid transparent;
-  border-bottom: 10px solid #4d4d4d; }
-/* line 145, ../sass/helpers/_bubbles.scss */
-.l-thumbsbubble-wrapper .arw-down {
-  width: 0;
-  height: 0;
-  border-left: 6.66667px solid transparent;
-  border-right: 6.66667px solid transparent;
-  border-top: 10px solid #4d4d4d; }
-
-/* line 150, ../sass/helpers/_bubbles.scss */
-.s-infobubble {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
-  box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
-  background: #ddd;
-  color: #666;
-  font-size: 0.8rem; }
-  /* line 157, ../sass/helpers/_bubbles.scss */
-  .s-infobubble .title {
-    color: #333333;
-    font-weight: bold; }
-  /* line 163, ../sass/helpers/_bubbles.scss */
-  .s-infobubble table tr td {
-    border: none;
-    border-top: 1px solid #c4c4c4 !important;
-    font-size: 0.9em; }
-  /* line 169, ../sass/helpers/_bubbles.scss */
-  .s-infobubble table tr:first-child td {
-    border-top: none !important; }
-  /* line 174, ../sass/helpers/_bubbles.scss */
-  .s-infobubble:first-child td {
-    border-top: none; }
-  /* line 178, ../sass/helpers/_bubbles.scss */
-  .s-infobubble .label {
-    color: gray; }
-  /* line 182, ../sass/helpers/_bubbles.scss */
-  .s-infobubble .value {
-    color: #333333; }
-
-/* line 188, ../sass/helpers/_bubbles.scss */
-.s-thumbsbubble {
-  background: #4d4d4d;
-  color: #b3b3b3; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 29, ../sass/helpers/_splitter.scss */
-.split-layout .splitter {
-  background-color: #404040;
-  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
-  box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
-  overflow: hidden;
-  position: absolute;
-  z-index: 1; }
-/* line 36, ../sass/helpers/_splitter.scss */
-.split-layout.horizontal {
-  overflow: hidden; }
-  /* line 39, ../sass/helpers/_splitter.scss */
-  .split-layout.horizontal .pane {
-    left: 0;
-    right: 0; }
-    /* line 42, ../sass/helpers/_splitter.scss */
-    .split-layout.horizontal .pane.top {
-      bottom: auto; }
-    /* line 46, ../sass/helpers/_splitter.scss */
-    .split-layout.horizontal .pane.bottom {
-      top: auto; }
-  /* line 51, ../sass/helpers/_splitter.scss */
-  .split-layout.horizontal > .splitter {
-    cursor: row-resize;
-    left: 0;
-    right: 0;
-    width: auto;
-    height: 5px; }
-    /* line 191, ../sass/_mixins.scss */
-    .split-layout.horizontal > .splitter:before {
-      -moz-transition-property: "border-color";
-      -o-transition-property: "border-color";
-      -webkit-transition-property: "border-color";
-      transition-property: "border-color";
-      -moz-transition-duration: 0.75s;
-      -o-transition-duration: 0.75s;
-      -webkit-transition-duration: 0.75s;
-      transition-duration: 0.75s;
-      -moz-transition-timing-function: ease-in-out;
-      -o-transition-timing-function: ease-in-out;
-      -webkit-transition-timing-function: ease-in-out;
-      transition-timing-function: ease-in-out;
-      content: '';
-      display: block;
-      height: auto;
-      pointer-events: none;
-      position: absolute;
-      z-index: 2;
-      border-top: 1px dotted #1a1a1a;
-      top: 2px;
-      left: 5px;
-      right: 5px; }
-    /* line 213, ../sass/_mixins.scss */
-    .split-layout.horizontal > .splitter:not(.disabled):hover:before {
-      -moz-transition-property: "border-color";
-      -o-transition-property: "border-color";
-      -webkit-transition-property: "border-color";
-      transition-property: "border-color";
-      -moz-transition-duration: 50ms;
-      -o-transition-duration: 50ms;
-      -webkit-transition-duration: 50ms;
-      transition-duration: 50ms;
-      -moz-transition-timing-function: ease-in-out;
-      -o-transition-timing-function: ease-in-out;
-      -webkit-transition-timing-function: ease-in-out;
-      transition-timing-function: ease-in-out;
-      border-color: #0099cc; }
-/* line 63, ../sass/helpers/_splitter.scss */
-.split-layout.vertical .pane {
-  top: 0;
-  bottom: 0; }
-  /* line 66, ../sass/helpers/_splitter.scss */
-  .split-layout.vertical .pane.left {
-    right: auto; }
-  /* line 70, ../sass/helpers/_splitter.scss */
-  .split-layout.vertical .pane.right {
-    left: auto; }
-/* line 75, ../sass/helpers/_splitter.scss */
-.split-layout.vertical > .splitter {
-  bottom: 0;
-  cursor: col-resize;
-  width: 5px; }
-  /* line 191, ../sass/_mixins.scss */
-  .split-layout.vertical > .splitter:before {
-    -moz-transition-property: "border-color";
-    -o-transition-property: "border-color";
-    -webkit-transition-property: "border-color";
-    transition-property: "border-color";
-    -moz-transition-duration: 0.75s;
-    -o-transition-duration: 0.75s;
-    -webkit-transition-duration: 0.75s;
-    transition-duration: 0.75s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    content: '';
-    display: block;
-    height: auto;
-    pointer-events: none;
-    position: absolute;
-    z-index: 2;
-    border-left: 1px dotted #1a1a1a;
-    left: 2px;
-    bottom: 5px;
-    top: 5px; }
-  /* line 213, ../sass/_mixins.scss */
-  .split-layout.vertical > .splitter:not(.disabled):hover:before {
-    -moz-transition-property: "border-color";
-    -o-transition-property: "border-color";
-    -webkit-transition-property: "border-color";
-    transition-property: "border-color";
-    -moz-transition-duration: 50ms;
-    -o-transition-duration: 50ms;
-    -webkit-transition-duration: 50ms;
-    transition-duration: 50ms;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    border-color: #0099cc; }
-
-/* line 86, ../sass/helpers/_splitter.scss */
-.browse-area .splitter {
-  top: 34px; }
-
-/* line 90, ../sass/helpers/_splitter.scss */
-.edit-area .splitter {
-  top: 0; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@-webkit-keyframes rotation {
-  from {
-    -webkit-transform: rotate(0deg); }
-  to {
-    -webkit-transform: rotate(359deg); } }
-@-moz-keyframes rotation {
-  from {
-    -moz-transform: rotate(0deg); }
-  to {
-    -moz-transform: rotate(359deg); } }
-@-o-keyframes rotation {
-  from {
-    -o-transform: rotate(0deg); }
-  to {
-    -o-transform: rotate(359deg); } }
-@keyframes rotation {
-  from {
-    transform: rotate(0deg); }
-  to {
-    transform: rotate(359deg); } }
-/* line 42, ../sass/helpers/_wait-spinner.scss */
-.t-wait-spinner,
-.wait-spinner {
-  display: block;
-  position: absolute;
-  -webkit-animation: rotation .6s infinite linear;
-  -moz-animation: rotation .6s infinite linear;
-  -o-animation: rotation .6s infinite linear;
-  animation: rotation .6s infinite linear;
-  border-color: rgba(0, 153, 204, 0.25);
-  border-top-color: #0099cc;
-  border-style: solid;
-  border-width: 0.5em;
-  border-radius: 100%;
-  top: 50%;
-  left: 50%;
-  height: auto;
-  width: auto;
-  padding: 5%;
-  pointer-events: none;
-  margin-top: -5%;
-  margin-left: -5%;
-  z-index: 2; }
-  /* line 53, ../sass/helpers/_wait-spinner.scss */
-  .t-wait-spinner.inline,
-  .wait-spinner.inline {
-    display: inline-block !important;
-    margin-right: 5px;
-    position: relative !important;
-    vertical-align: middle; }
-
-/* line 61, ../sass/helpers/_wait-spinner.scss */
-.l-wait-spinner-holder {
-  pointer-events: none;
-  position: absolute; }
-  /* line 65, ../sass/helpers/_wait-spinner.scss */
-  .l-wait-spinner-holder.align-left .t-wait-spinner {
-    left: 0;
-    margin-left: 0; }
-  /* line 70, ../sass/helpers/_wait-spinner.scss */
-  .l-wait-spinner-holder.full-size {
-    display: inline-block;
-    height: 100%;
-    width: 100%; }
-    /* line 73, ../sass/helpers/_wait-spinner.scss */
-    .l-wait-spinner-holder.full-size .t-wait-spinner {
-      top: 0;
-      margin-top: 0;
-      padding: 30%; }
-
-/* line 82, ../sass/helpers/_wait-spinner.scss */
-.treeview .wait-spinner {
-  display: block;
-  position: absolute;
-  -webkit-animation: rotation .6s infinite linear;
-  -moz-animation: rotation .6s infinite linear;
-  -o-animation: rotation .6s infinite linear;
-  animation: rotation .6s infinite linear;
-  border-color: rgba(0, 153, 204, 0.25);
-  border-top-color: #0099cc;
-  border-style: solid;
-  border-width: 0.25em;
-  border-radius: 100%;
-  height: 10px;
-  width: 10px;
-  margin: 0 !important;
-  padding: 0 !important;
-  top: 2px;
-  left: 0; }
-
-/* line 91, ../sass/helpers/_wait-spinner.scss */
-.wait-spinner.sm {
-  display: block;
-  position: absolute;
-  -webkit-animation: rotation .6s infinite linear;
-  -moz-animation: rotation .6s infinite linear;
-  -o-animation: rotation .6s infinite linear;
-  animation: rotation .6s infinite linear;
-  border-color: rgba(0, 153, 204, 0.25);
-  border-top-color: #0099cc;
-  border-style: solid;
-  border-width: 0.25em;
-  border-radius: 100%;
-  height: 13px;
-  width: 13px;
-  margin-left: 0 !important;
-  margin-top: 0 !important;
-  padding: 0 !important;
-  top: 0;
-  left: 0; }
-
-/* Styles for messages */
-/* line 4, ../sass/_messages.scss */
-.message.block {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  padding: 10px; }
-/* line 8, ../sass/_messages.scss */
-.message.error {
-  background-color: rgba(255, 60, 0, 0.3);
-  color: #ff8a66; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* Classes to be used for lists of properties and values */
-/* line 25, ../sass/_properties.scss */
-.properties .s-row {
-  border-top: 1px solid #4d4d4d;
-  font-size: 0.8em; }
-  /* line 28, ../sass/_properties.scss */
-  .properties .s-row:first-child {
-    border: none; }
-  /* line 31, ../sass/_properties.scss */
-  .properties .s-row .s-value {
-    color: #fff; }
-
-/********************************* VIEWS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -5717,7 +5473,6 @@ ul.tree {
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border: none;
-    border-top: 1px solid #636363;
     color: #999;
     display: inline-block;
     box-sizing: border-box;
@@ -5737,12 +5492,12 @@ ul.tree {
       background-image: -webkit-linear-gradient(#707070, #636363);
       background-image: linear-gradient(#707070, #636363);
       color: #bdbdbd; }
-      /* line 170, ../sass/_mixins.scss */
-      .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu {
-        color: #949494; }
-    /* line 175, ../sass/_mixins.scss */
-    .items-holder .item.grid-item.btn-menu .invoke-menu {
-      color: #828282; }
+    /* line 216, ../sass/_mixins.scss */
+    .items-holder .item.grid-item .icon {
+      color: #0099cc; }
+    /* line 222, ../sass/_mixins.scss */
+    .items-holder .item.grid-item:not(.disabled):not(.paused):hover .icon {
+      color: #33ccff; }
     /* line 46, ../sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: deepskyblue !important; }
@@ -5859,7 +5614,6 @@ ul.tree {
       -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       border: none;
-      border-top: 1px solid #14c4ff;
       color: #999;
       display: inline-block;
       color: #80dfff; }
@@ -5872,12 +5626,12 @@ ul.tree {
         background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
         background-image: linear-gradient(#2ecbff, #14c4ff);
         color: #bdbdbd; }
-        /* line 170, ../sass/_mixins.scss */
-        .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu {
-          color: #75ddff; }
-      /* line 175, ../sass/_mixins.scss */
-      .items-holder .item.grid-item.selected.btn-menu .invoke-menu {
-        color: #52d4ff; }
+      /* line 216, ../sass/_mixins.scss */
+      .items-holder .item.grid-item.selected .icon {
+        color: #0099cc; }
+      /* line 222, ../sass/_mixins.scss */
+      .items-holder .item.grid-item.selected:not(.disabled):not(.paused):hover .icon {
+        color: #33ccff; }
       /* line 142, ../sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
@@ -6019,7 +5773,7 @@ ul.tree {
 .autoflow {
   font-size: 0.75rem; }
   /* line 32, ../sass/_autoflow.scss */
-  .autoflow:hover .l-autoflow-header .l-btn.change-column-width {
+  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu {
     -moz-transition-property: visibility, opacity, background-color, border-color;
     -o-transition-property: visibility, opacity, background-color, border-color;
     -webkit-transition-property: visibility, opacity, background-color, border-color;
@@ -6043,7 +5797,7 @@ ul.tree {
     .autoflow .l-autoflow-header span {
       vertical-align: middle; }
     /* line 48, ../sass/_autoflow.scss */
-    .autoflow .l-autoflow-header .l-btn.change-column-width {
+    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu {
       -moz-transition-property: visibility, opacity, background-color, border-color;
       -o-transition-property: visibility, opacity, background-color, border-color;
       -webkit-transition-property: visibility, opacity, background-color, border-color;
@@ -6159,11 +5913,11 @@ ul.tree {
   /* line 16, ../sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main {
     background-color: rgba(255, 255, 255, 0.1);
-    bottom: 27px; }
+    bottom: 30px; }
   /* line 20, ../sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main-controlbar {
     top: auto;
-    height: 22px; }
+    height: 25px; }
 
 /* line 26, ../sass/features/_imagery.scss */
 .l-image-thumbs-wrapper {
@@ -6187,7 +5941,7 @@ ul.tree {
 /* line 51, ../sass/features/_imagery.scss */
 .l-image-main-controlbar {
   font-size: 0.8em;
-  line-height: 22px; }
+  line-height: 25px; }
   /* line 55, ../sass/features/_imagery.scss */
   .l-image-main-controlbar .left, .l-image-main-controlbar .right {
     direction: rtl;
diff --git a/platform/commonUI/general/res/sass/_autoflow.scss b/platform/commonUI/general/res/sass/_autoflow.scss
index 417ba3a699..16fe7251f4 100644
--- a/platform/commonUI/general/res/sass/_autoflow.scss
+++ b/platform/commonUI/general/res/sass/_autoflow.scss
@@ -29,7 +29,7 @@
 	font-size: 0.75rem;
 
 	&:hover {
-		.l-autoflow-header .l-btn.change-column-width {
+		.l-autoflow-header .s-btn.change-column-width {
 			@include trans-prop-nice-fade(50ms);
 			opacity: 1;
 		}
@@ -45,7 +45,7 @@
 		span {
 			vertical-align: middle;
 		}
-		.l-btn.change-column-width {
+		.s-btn.change-column-width {
 			@include trans-prop-nice-fade(500ms);
 			opacity: 0;
 		}
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 87583ecdf1..c4f0970500 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -49,6 +49,7 @@ $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
 $colorFormLines: rgba(#fff, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.2);
+$colorInvokeMenu: #fff;
 // Menu colors
 $colorMenuBg: lighten($colorBodyBg, 23%);
 $colorMenuFg: lighten($colorMenuBg, 70%);
@@ -105,7 +106,7 @@ $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
 // Overlay
 $ovrTopBarH: 60px;
-$ovrFooterH: 40px;
+$ovrFooterH: 30px;
 $overlayMargin: 25px;
 // Items
 $ueBrowseGridItemLg: 200px;
@@ -125,7 +126,7 @@ $tabularHeaderH: 22px; //18px
 $tabularTdPadLR: $itemPadLR;
 $tabularTdPadTB: 3px;
 // Imagery
-$imageMainControlBarH: 22px;
+$imageMainControlBarH: 25px;
 $imageThumbsD: 120px;
 $imageThumbsWrapperH: $imageThumbsD * 1.4;
 $imageThumbPad: 1px;
diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss
index 9c71b49331..27e48cc9ee 100644
--- a/platform/commonUI/general/res/sass/_icons.scss
+++ b/platform/commonUI/general/res/sass/_icons.scss
@@ -54,7 +54,7 @@
 	display: inline-block;
 }
 
-.btn-menu .invoke-menu,
+.s-menu .invoke-menu,
 .icon.major .invoke-menu {
 	margin-left: $interiorMarginSm;
 }
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 7f25dbf09c..279c6d713e 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -19,27 +19,19 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@import "compass";
-@import "compass/reset";
-@import "compass/css3";
-@import "compass/utilities";
-
-@import "mixins";
-@import "forms/mixins";
-@import "mobile/mixins";
-
 @import "effects";
 @import "global";
 @import "fonts";
-@import "user-environ/layout";
-@import "mobile/layout";
-@import "fixed-position";
 @import "about";
 @import "text";
 @import "icons";
 @import "limits";
 @import "data-status";
-@import "lists/tabular";
+@import "helpers/bubbles";
+@import "helpers/splitter";
+@import "helpers/wait-spinner";
+@import "messages";
+@import "properties";
 
 /********************************* CONTROLS */
 @import "controls/breadcrumb";
@@ -50,7 +42,6 @@
 @import "controls/menus";
 @import "controls/time-controller";
 @import "mobile/controls/menus";
-@import "edit/editor";
 
 /********************************* FORMS */
 @import "forms/elems";
@@ -62,13 +53,14 @@
 @import "forms/validation";
 @import "forms/filter";
 
-@import "plots/plots-main";
+/********************************* USER ENVIRON */
+@import "user-environ/layout";
+@import "mobile/layout";
+@import "edit/editor";
 @import "search/search";
 @import "mobile/search/search";
 @import "overlay/overlay";
 @import "mobile/overlay/overlay";
-
-/********************************* USER ENVIRON */
 @import "tree/tree";
 @import "mobile/tree";
 @import "user-environ/frame";
@@ -76,14 +68,10 @@
 @import "user-environ/bottom-bar";
 @import "user-environ/tool-bar";
 
-/********************************* HELPERS */
-@import "helpers/bubbles";
-@import "helpers/splitter";
-@import "helpers/wait-spinner";
-@import "messages";
-@import "properties";
-
 /********************************* VIEWS */
+@import "fixed-position";
+@import "lists/tabular";
+@import "plots/plots-main";
 @import "iframe";
 @import "hide-non-functional";
 @import "views";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 9625ed96af..8347e0a241 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -153,28 +153,22 @@
     $fgBase: lighten($fg, $ltnRatio);
     $gradC1: lighten($bgBase, $gradRatio);
     $gradC2: $bgBase;
-    $cInvokeBase: lighten($gradC1, $ltnRatio*2);
+    $cInvokeBase: #fff;
 
     @include background-image(linear-gradient($gradC1, $gradC2));
     @include border-radius($controlCr);
     @include box-sizing(border-box);
     @include boxShdwSubtle();
     border: none;
-    border-top: 1px solid lighten($gradC1, 2%);
+    //border-top: 1px solid lighten($gradC1, 2%);
     color: $fg;
     display: inline-block;
     @if $hover == true {
         &:not(.disabled):hover {
             @include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
             color: lighten($fgBase, $hovRatio);
-            &.btn-menu .invoke-menu {
-                color: lighten($cInvokeBase, $hovRatio);
-            }
         }
     }
-    &.btn-menu .invoke-menu {
-        color: $cInvokeBase;
-    }
 }
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
@@ -216,17 +210,21 @@
     }
 }
 
-@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
+@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorKey) {
+	// $ic: Icon color
     @include containerSubtle($bg, $fg, true);
-}
-
-@mixin btnNoticeable($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    // No longer should be used; use btnSubtle instead
-    //@include containerSubtle($bg, $fg, true);
-    //@include background-image(linear-gradient(lighten($bg, 20%), $bg));
-    /*	&:not(.disabled):hover {
-            @include background-image(linear-gradient(lighten($bg, 30%), lighten($bg, 10%)));
-        }*/
+	.icon {
+		color: $ic;
+	}
+	&:not(.disabled) {
+		&:not(.paused) {
+			&:hover {
+				.icon {
+					color: lighten($ic, $ltGamma);
+				}
+			}
+		}
+	}
 }
 
 @mixin boxIncised($sVal: 0.6) {
diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
index fcb168466a..0d31fee37c 100644
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -23,8 +23,7 @@ $baseRatio: 1.5;
 $pad: $interiorMargin * $baseRatio;
 
 /******* LAYOUT AND SIZING */
-.btn,
-.l-btn {
+/*.l-btn {
 	@include user-select(none);
 	//line-height: 1.5em; // Was 1.25em
 	line-height: 150%;
@@ -35,14 +34,13 @@ $pad: $interiorMargin * $baseRatio;
 		$h: $ueTopBarH; // - $interiorMargin;
 		height: $h;
 		line-height: $h - 2;
-		//padding: 0 $pad * 6 0 $pad;
 		padding: 0 $pad * 3;
 	}
 	&.create-btn {
+		font-size: 1em;
 		&:before {
 			content:"+";
 			font-family: symbolsfont;
-			font-size: 0.8em;
 		}
 		.menu {
 			margin-left: $pad * -1;
@@ -57,105 +55,109 @@ $pad: $interiorMargin * $baseRatio;
 	&.vsm {
 		padding: 0 ($pad / $baseRatio) / 2;
 	}
-}
+}*/
 
 /*********************************** STYLE STYLES */
-.btn,
 .s-btn {
-	$base: lighten($colorBodyBg, 20%); // Moved to s-btn
+	$base: lighten($colorBodyBg, 20%);
 	@include border-radius($controlCr);
 	@include box-sizing(border-box);
 	@include text-shadow(rgba(black, 0.3) 0 1px 1px);
+	@include user-select(none);
+	//@include containerSubtle($colorBodyBg, $colorBodyFg, true);
 	cursor: pointer;
-	//line-height: 1.2em;
 	text-decoration: none;
-	&.major {
-		$bg: $colorKey;
-		@include btnSubtle($bg);
-		$fg: lighten($bg, 50%);
-		color: $fg;
-		&:hover {
-			@include btnSubtle(lighten($bg, 5%), $fg);
-			//color: $fg;
-		}
-		.invoke-menu {
-			color: $fg;
-		}
-	}
-	&.subtle {
-		@include btnSubtle($base, lighten($base, 40%));
-	}
-	&.very-subtle,
-	&.s-very-subtle {
-		@include containerSubtle($colorBodyBg, $colorBodyFg, true);
-		&.paused {
-			@include containerSubtle($colorPausedBg, $colorPausedFg, true);
-			.icon:before {
-				content:"\0000EF";
-			}
-		}
-	}
-}
+	height: $btnStdH;
+	line-height: $btnStdH;
+	padding: 0 $pad;
 
-.icon-btn,
-.s-icon-btn {
-	@extend .s-btn;
-	font-size: 1em;
+		font-size: 0.7rem;
 	.icon {
+		font-size: 0.8rem;
 		color: $colorKey;
 	}
+
+	.title-label {
+		vertical-align: top;
+	}
+
+	&.sm {
+		padding: 0 $pad / $baseRatio;
+	}
+	&.vsm {
+		padding: 0 ($pad / $baseRatio) / 2;
+	}
+
+	&:not(.major) {
+		@include btnSubtle($colorBodyBg, $colorBodyFg, $colorKey);
+	}
+
+	&.major {
+		$bg: $colorKey;
+		$fg: lighten($bg, 70%);
+		@include btnSubtle($bg, $fg, $fg);
+	}
+
 	&.paused {
-		.icon {
-			color: $colorPausedFg;
-		}
-	}
-
-	&:not(.disabled) {
-		&:not(.paused) {
-			&:hover {
-				.icon {
-					color: lighten($colorKey, $ltGamma);
-				}
-			}
-		}
-	}
-
-	&.labeled {
-		padding: 0 $pad/2;
-		.icon {
-			//font-size: 1.5em;
-		}
-		.title-label {
-			margin-left: $interiorMargin;
+		@include btnSubtle($colorPausedBg, $colorPausedFg, $colorPausedFg);
+		.icon:before {
+			content: "\0000EF";
 		}
 	}
 
 	&.pause-play {
-/*		&.paused {
-			.icon {
-				@include pulse(500ms);
+		/*
+			&.paused {
+				.icon {
+					@include pulse(500ms);
+				}
 			}
-		}*/
+		*/
 		.icon:before {
-			content:"\0000F1";
+			content: "\0000F1";
 		}
 	}
 
 	&.show-thumbs {
 		.icon:before {
-			content:"\000039";
+			content: "\000039";
 		}
 	}
 }
 
+.l-btn-set {
+	// Buttons that have a very tight conceptual grouping - no internal space between them.
+	// Structure: .btn-set > mct-representation class=first|last > .s-btn
+	//@include test(red);
+	font-size: 0; // Remove space between s-btn elements due to white space in markup
+
+	.s-btn {
+		@include border-radius(0);
+		margin-left: 1px;
+	}
+
+	.first {
+		.s-btn {
+			@include border-left-radius($controlCr);
+			margin-left: 0;
+		}
+	}
+
+	.last {
+		.s-btn {
+			@include border-right-radius($controlCr);
+		}
+	}
+}
 /*********************************** LAYOUT STYLES */
-span.btn,
-span.btn span,
-span.l-btn,
-span.l-btn span,
-a.btn,
-a.btn span,
-a.l-btn,
-a.l-btn span {
+/*
+
+span.s-btn,
+span.s-btn span,
+a.s-btn,
+a.s-btn span,
+a.s-btn,
+a.s-btn span {
 	display: inline-block;
-}
\ No newline at end of file
+}
+*/
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 4fd66df059..a5102c26ea 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -100,22 +100,6 @@
 	}
 }
 
-.btn-bar {
-	//	position: relative;
-/*	.btn,
-	.btn-set,
-	.t-btn {
-		display: inline-block;
-		//		margin-left: $interiorMargin;
-	}
-	.btn,
-	.t-btn {
-		&:first-child {
-			//			margin-left: 0;
-		}
-	}*/
-}
-
 .l-composite-control {
 	vertical-align: middle;
 	&.l-checkbox {
@@ -153,42 +137,6 @@
 	font-size: 0.7rem;
 }
 
-/*
-.btn-set {
-	// Buttons that have a very tight conceptual grouping - no internal space between them.
-	display: inline-block;
-	position: relative;
-	.btn,
-	.t-btn {
-		@include border-radius(0);
-		border-left: 1px solid lighten($colorBodyBg, 20%);
-		margin-left: 0;
-		&:first-child {
-			border-left: none;
-			@include border-left-radius($controlCr);
-		}
-		&:last-child {
-			@include border-right-radius($controlCr);
-		}
-	}
-}
-*/
-
-.object-browse-bar .btn,
-.object-browse-bar .t-btn,
-.object-browse-bar .view-switcher,
-.top-bar .buttons-main .btn,
-.top-bar .buttons-main .t-btn,
-.top-bar .view-switcher,
-.tool-bar .btn,
-.tool-bar .t-btn {
-	$h: $btnToolbarH;
-	display: inline-block;
-	font-size: $h * $btnFontSizeToH;
-	line-height: 200%;
-	vertical-align: top;
-}
-
 label.checkbox.custom {
 	$bg: lighten($colorBodyBg, $ltGamma);
 	$d: $formRowCtrlsH;
@@ -256,7 +204,7 @@ label.checkbox.custom {
 	}
 }
 
-.btn-menu label.checkbox.custom {
+.s-menu label.checkbox.custom {
 	margin-left: 5px;
 }
 
@@ -267,84 +215,6 @@ label.checkbox.custom {
 	}
 }
 
-.btn-menu {
-	$h: 20px;
-	$p: $interiorMarginSm * 2;
-	$c: $colorBodyFg;
-	@include btnSubtle($colorBodyBg);
-	/*	height: $h;
-		line-height: $h;
-		&.dropdown {
-			padding-left: $p;
-			padding-right: $p;
-		}*/
-
-	&:not(.disabled):hover {
-		color: lighten($c, 20%);
-	}
-
-	/*	&.context-available {
-			// An element like the invoke-menu triangle;
-			// Indicates that this element has a dropdown menu available;
-			// Currently unused
-			$c: $colorKey;
-			color: $c;
-			padding: 0 5px;
-			&:hover {
-				color: lighten($c, 10%);
-			}
-		}*/
-
-	span.l-click-area {
-		// In markup, this element should not enclose anything.
-		@extend .abs;
-	}
-
-	.type-icon {
-		//margin-right: $interiorMargin;
-	}
-
-	.name {
-		margin-left: $interiorMargin;
-	}
-	.menu {
-		//		margin-left: (-1 * $p);
-		position: absolute;
-		left: 0;
-		text-align: left;
-		.ui-symbol.icon {
-			width: 12px;
-		}
-	}
-}
-
-.top-bar .btn-menu {
-	$h: $btnStdH; //$ueTopBarBtnH; // 35px
-	$p: 10px;
-	$badgeM: $interiorMargin;
-	$badgeD: $h - ($badgeM * 2);
-	//height: $h;
-	//line-height: $h;
-	//padding-right: 10px;
-	&.browse-btn {
-		margin-right: $interiorMargin;
-		padding-left: $badgeD + $badgeM * 2;
-		.badge {
-			@include border-radius($controlCr * 1.5);
-			display: block;
-			font-size: 1em;
-			line-height: $badgeD;
-			position: absolute;
-			top: $badgeM;
-			left: $badgeM;
-			bottom: $badgeM;
-			right: auto;
-			width: $badgeD;
-			height: auto;
-		}
-	}
-}
-
 .context-available {
 	$c: $colorKey;
 	color: $c;
@@ -355,9 +225,6 @@ label.checkbox.custom {
 
 .view-switcher {
 	@include trans-prop-nice-fade($controlFadeMs);
-	.type-icon {
-		//vertical-align: top;
-	}
 }
 
 /******************************************************** OBJECT-HEADER */
diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss
index 14210198ab..67e854091f 100644
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -19,7 +19,52 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/******************************************************** MENUS */
+/******************************************************** MENU BUTTONS */
+.s-menu {
+	// Formerly .btn-menu
+	@extend .s-btn;
+	span.l-click-area {
+		// In markup, this element should not enclose anything.
+		@extend .abs;
+	}
+
+	.icon {
+		font-size: 120%;
+	}
+
+	.title-label {
+		margin-left: $interiorMarginSm;
+	}
+
+	&:after {
+		// Adds the downward facing arrow element
+		color: rgba($colorInvokeMenu, 0.2);
+		content: '\76';
+		display: inline-block;
+		font-family: 'symbolsfont';
+		margin-left: $interiorMarginSm;
+		@include text-shadow(none);
+		vertical-align: top;
+	}
+	&.create-btn {
+		.title-label {
+			font-size: 1rem;
+		}
+		&:after {
+			color: rgba($colorInvokeMenu, 0.5);
+		}
+	}
+
+	.menu {
+		left: 0;
+		text-align: left;
+		.ui-symbol.icon {
+			width: 12px;
+		}
+	}
+}
+
+/******************************************************** MENUS THEMSELVES */
 .menu-element {
 	$bg: lighten($colorBodyBg, 5%);
 	$bgHover: lighten($bg, 20%);
diff --git a/platform/commonUI/general/res/sass/forms.scss b/platform/commonUI/general/res/sass/forms.scss
deleted file mode 100644
index 17d1a02c40..0000000000
--- a/platform/commonUI/general/res/sass/forms.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@import "compass";
-@import "compass/css3";
-    @import "compass/css3/border-radius";
-    @import "compass/css3/opacity";
-@import "compass/utilities";
-
-@import "constants";
-@import "mobile/constants";
-@import "mixins";
-@import "forms/mixins";
-@import "mobile/mixins";
-@import "forms/elems";
-@import "forms/textarea";
-@import "forms/text-input";
-@import "forms/selects";
-@import "forms/channel-selector";
-@import "forms/datetime";
-@import "forms/validation";
-@import "forms/filter";
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/items.scss b/platform/commonUI/general/res/sass/items.scss
deleted file mode 100644
index 0feb54cbae..0000000000
--- a/platform/commonUI/general/res/sass/items.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@import "compass";
-@import "compass/css3";
-@import "compass/css3/border-radius";
-@import "compass/css3/opacity";
-@import "compass/utilities";
-
-@import "constants";
-@import "mobile/constants";
-@import "mixins";
-@import "mobile/mixins";
-@import "items/item";
-@import "mobile/item";
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index d202ec0450..17ff8c4213 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -119,7 +119,7 @@
         }
         .view-switcher {
             margin-right: 0 !important;
-            .name {
+            .title-label {
                 // Hide the name in mobile
                 display: none;
             }
diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss
index f5c9cd477f..69ef092d7a 100644
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@@ -63,8 +63,20 @@
         //font-size: 1em;
         height: $ovrFooterH;
         text-align: right;
-        .btn {
-            margin-left: 10px;
+        .s-btn {
+	        $l: 15%;
+	        @include containerSubtle(lighten($colorBodyBg, $l), lighten($colorBodyFg, $l), true);
+	        font-size: 95%;
+	        height: $ovrFooterH;
+	        line-height: $ovrFooterH;
+            margin-left: $interiorMargin;
+	        padding: 0 $interiorMargin * 3;
+	        &.major {
+		        @extend .s-btn.major;
+		        &:hover {
+			        @extend .s-btn.major:hover;
+		        }
+	        }
         }
     }
     .contents.l-dialog {
diff --git a/platform/commonUI/general/res/sass/theme-espresso.scss b/platform/commonUI/general/res/sass/theme-espresso.scss
index 68961d8140..b7d020a01c 100644
--- a/platform/commonUI/general/res/sass/theme-espresso.scss
+++ b/platform/commonUI/general/res/sass/theme-espresso.scss
@@ -19,7 +19,18 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+
+@import "compass";
+@import "compass/reset";
+@import "compass/css3";
+@import "compass/utilities";
+
 @import "constants";
 @import "mobile/constants";
+
+@import "mixins";
+@import "forms/mixins";
+@import "mobile/mixins";
+
 @import "themes/theme-espresso";
 @import "main";
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/themes/_theme-espresso.scss b/platform/commonUI/general/res/sass/themes/_theme-espresso.scss
index edda0a1489..04ac0bc49c 100644
--- a/platform/commonUI/general/res/sass/themes/_theme-espresso.scss
+++ b/platform/commonUI/general/res/sass/themes/_theme-espresso.scss
@@ -21,4 +21,10 @@
  *****************************************************************************/
 /* CONSTANTS */
 //$colorBodyBg: #fff;
-//$colorBodyFg: #666;
\ No newline at end of file
+//$colorBodyFg: #666;
+
+/*
+@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
+	background: red;
+	display: inline-block;
+}*/
diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss
index f04071fa0e..d5217017ea 100644
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -47,6 +47,8 @@
 	}
 	&.frame-template {
 		.view-switcher {
+			font-size: 80%;
+			height: $ohH;
 			line-height: $ohH;
 			z-index: 10;
 		}
@@ -64,7 +66,7 @@
 	}
 	.view-switcher {
 		// Hide the name when the view switcher is in a frame context
-		.name {
+		.title-label {
 			display: none;
 		}
 	}
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 09f046042e..b304a8e8db 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -299,19 +299,15 @@
 	}
 }
 
-.object-browse-bar .btn,
-.object-browse-bar .t-btn,
-.object-browse-bar .view-switcher,
-.top-bar .buttons-main .btn,
-.top-bar .buttons-main .t-btn,
-.top-bar .view-switcher,
-.tool-bar .btn,
-.tool-bar .t-btn {
-    $h: $btnToolbarH;
-    display: inline-block;
-    font-size: $h * $btnFontSizeToH;
-    line-height: 200%;
-    vertical-align: top;
+.object-browse-bar .s-btn,
+.top-bar .buttons-main .s-btn,
+.top-bar .s-menu,
+.tool-bar .s-btn,
+.tool-bar .s-menu {
+	$h: $btnToolbarH;
+	height: $h;
+	line-height: $h;
+	vertical-align: top;
 }
 
 .object-browse-bar,
diff --git a/platform/commonUI/general/res/templates/controls/action-button.html b/platform/commonUI/general/res/templates/controls/action-button.html
index a0d1adf3a6..3697ba2b25 100644
--- a/platform/commonUI/general/res/templates/controls/action-button.html
+++ b/platform/commonUI/general/res/templates/controls/action-button.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<a class="btn s-btn s-icon-btn s-very-subtle key-{{parameters.action.getMetadata().key}}"
+<a class="s-btn key-{{parameters.action.getMetadata().key}}"
    ng-class="{ labeled: parameters.labeled }"
    title="{{parameters.action.getMetadata().description}}"
    ng-click="parameters.action.perform()">
diff --git a/platform/commonUI/general/res/templates/controls/action-group.html b/platform/commonUI/general/res/templates/controls/action-group.html
index 17ab4a147e..f1faa58b50 100644
--- a/platform/commonUI/general/res/templates/controls/action-group.html
+++ b/platform/commonUI/general/res/templates/controls/action-group.html
@@ -20,17 +20,16 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="ActionGroupController">
-
     <span ng-repeat="action in ungrouped">
-        <mct-include key="'action-button'" parameters="{ action: action }">
-        </mct-include>
+        <mct-include key="'action-button'" parameters="{ action: action }"></mct-include>
     </span>
-
-    <span class="btn-set" ng-repeat="group in groups">
+    <span class="l-btn-set" ng-repeat="group in groups">
         <span ng-repeat="action in group">
-            <mct-include key="'action-button'" parameters="{ action: action }">
+            <mct-include key="'action-button'"
+                         parameters="{ action: action }"
+                         ng-class="{ first:$index == 0, last:$index == group.length - 1 }"
+	            >
             </mct-include>
         </span>
     </span>
-
 </span>
\ No newline at end of file
diff --git a/platform/commonUI/general/res/templates/controls/switcher.html b/platform/commonUI/general/res/templates/controls/switcher.html
index beaf497709..c47263ddf2 100644
--- a/platform/commonUI/general/res/templates/controls/switcher.html
+++ b/platform/commonUI/general/res/templates/controls/switcher.html
@@ -21,7 +21,7 @@
 -->
 <span ng-controller="ViewSwitcherController">
     <div
-	    class="view-switcher menu-element s-btn l-btn btn-menu dropdown click-invoke"
+	    class="view-switcher menu-element s-menu"
 	    ng-if="view.length > 1"
 	    ng-controller="ClickAwayController as toggle"
 	    >
@@ -33,11 +33,9 @@
 	        ></span>
 
         <span class="ui-symbol icon type-icon">{{ngModel.selected.glyph}}</span>
-        <span class="name">{{ngModel.selected.name}}</span>
-        <span class='ui-symbol invoke-menu'>v</span>
+        <span class="title-label">{{ngModel.selected.name}}</span>
 
-
-        <div class="menu dropdown" ng-show="toggle.isActive()">
+        <div class="menu" ng-show="toggle.isActive()">
             <ul>
                 <li ng-repeat="option in view"
                     ng-click="ngModel.selected = option; toggle.setState(false)">
diff --git a/platform/commonUI/general/res/templates/menu/context-menu.html b/platform/commonUI/general/res/templates/menu/context-menu.html
index 467d8c9d20..6aa0fd3865 100644
--- a/platform/commonUI/general/res/templates/menu/context-menu.html
+++ b/platform/commonUI/general/res/templates/menu/context-menu.html
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="menu-element context-menu-wrapper mobile-disable-select" ng-controller="ContextMenuController">
-    <div class="menu context-menu dropdown">
+    <div class="menu context-menu">
         <ul>
 
             <li ng-repeat="menuAction in menuActions"
diff --git a/platform/features/imagery/res/templates/imagery.html b/platform/features/imagery/res/templates/imagery.html
index 2b1f8f969e..407efaf76f 100644
--- a/platform/features/imagery/res/templates/imagery.html
+++ b/platform/features/imagery/res/templates/imagery.html
@@ -10,7 +10,7 @@
             ng-show="false && showLocalControls"
              >
             <a
-               class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
+               class="s-btn"
                ng-click="plot.stepBackPanZoom()"
                ng-show="1"
                title="Restore previous pan/zoom">
@@ -18,7 +18,7 @@
             </a>
 
             <a
-               class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
+               class="s-btn"
                ng-click="plot.unzoom()"
                ng-show="1"
                title="Reset pan/zoom">
@@ -36,7 +36,7 @@
         <div class="l-image-main-controlbar l-flex bar">
             <div class="left">
                 <a
-                    class="t-btn l-btn s-btn s-icon-btn s-very-subtle show-thumbs sm"
+                    class="s-btn show-thumbs sm hidden"
                     ng-click="showThumbsBubble = (showThumbsBubble)? false:true"
                     ><span class="ui-symbol icon"></span></a>
                 <span class="l-timezone">{{imagery.getZone()}}</span>
@@ -45,7 +45,7 @@
             </div>
             <div class="right">
                 <a
-                    class="t-btn l-btn s-btn s-icon-btn s-very-subtle pause-play sm"
+                    class="s-btn pause-play"
                     ng-click="imagery.paused(!imagery.paused())"
                     ng-class="{ paused: imagery.paused() }"
                     ><span class="ui-symbol icon"></span></a>
@@ -53,10 +53,10 @@
                    ng-if="imagery.getImageUrl()"
                    target="_blank"
                    title="Open image in new tab."
-                   class="t-btn l-btn s-btn s-icon-btn s-very-subtle sm">
+                   class="s-btn">
                     <span class="ui-symbol icon">y</span></a>
                 <a href=""
-                    class="l-btn s-btn s-icon-btn l-mag s-mag ui-symbol vsm"
+                    class="s-btn l-mag s-mag ui-symbol vsm"
                     ng-click="clipped = false"
                     ng-show="clipped === true"
                     title="Not all of image is visible; click to reset."
diff --git a/platform/features/layout/bundle.json b/platform/features/layout/bundle.json
index f1006d67e8..c53ade93f2 100644
--- a/platform/features/layout/bundle.json
+++ b/platform/features/layout/bundle.json
@@ -85,7 +85,7 @@
                                 },
                                 {
                                     "property": "fill",
-                                    "glyph": "\u00E0",
+                                    "glyph": "\ue606",
                                     "control": "color"
                                 },
                                 {
diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html
index a7c382ea4b..3a689d460a 100644
--- a/platform/features/plot/res/templates/plot.html
+++ b/platform/features/plot/res/templates/plot.html
@@ -105,23 +105,21 @@
                  ng-show="representation.showControls"
                  style="position: absolute; top: 8px; right: 8px;">
 
-                <a href=""
-                   class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
+                <a class="s-btn"
                    ng-click="plot.stepBackPanZoom()"
                    ng-show="plot.isZoomed()"
                    title="Restore previous pan/zoom">
                     <span class="ui-symbol icon">&lt;</span>
                 </a>
 
-                <a href=""
-                   class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
+                <a class="s-btn"
                    ng-click="plot.unzoom()"
                    ng-show="plot.isZoomed()"
                    title="Reset pan/zoom">
                     <span class="ui-symbol icon">I</span>
                 </a>
 
-                <div class="menu-element btn s-very-subtle btn-menu dropdown menus-to-left"
+                <div class="menu-element s-menu menus-to-left"
                      ng-if="plot.getModeOptions().length > 1"
                      ng-controller="ClickAwayController as toggle">
 
@@ -129,9 +127,8 @@
 
                     <span class="ui-symbol icon type-icon">{{plot.getMode().glyph}}</span>
                     <span>{{plot.getMode().name}}</span>
-                    <span class='ui-symbol invoke-menu'>v</span>
 
-                    <div class="menu dropdown" ng-show="toggle.isActive()">
+                    <div class="menu" ng-show="toggle.isActive()">
                         <ul>
                             <li ng-repeat="option in plot.getModeOptions()">
                                 <a href="" ng-click="plot.setMode(option); toggle.setState(false)">
diff --git a/platform/forms/res/templates/controls/button.html b/platform/forms/res/templates/controls/button.html
index 4ec3c34a20..149fc0df67 100644
--- a/platform/forms/res/templates/controls/button.html
+++ b/platform/forms/res/templates/controls/button.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<a class="t-btn l-btn s-btn s-icon-btn s-very-subtle"
+<a class="s-btn"
    ng-class="{ labeled: structure.text }"
    ng-click="structure.click()">
     <span class="ui-symbol icon">
diff --git a/platform/forms/res/templates/controls/color.html b/platform/forms/res/templates/controls/color.html
index 9a6f00510f..903b30d064 100644
--- a/platform/forms/res/templates/controls/color.html
+++ b/platform/forms/res/templates/controls/color.html
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div
-	class="t-btn l-btn s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke t-color-palette"
+	class="t-btn l-btn s-btn s-icon-btn s-menu menu-element t-color-palette"
     ng-controller="ClickAwayController as toggle"
 	>
 
@@ -30,11 +30,9 @@
     <span class="title-label" ng-if="structure.text">
         {{structure.text}}
     </span>
-    <span class='ui-symbol invoke-menu' ng-if="!structure.text">v</span>
-
 
     <div
-	    class="menu dropdown l-color-palette"
+	    class="menu l-color-palette"
         ng-controller="ColorController as colors"
         ng-show="toggle.isActive()"
 	    >
diff --git a/platform/forms/res/templates/controls/menu-button.html b/platform/forms/res/templates/controls/menu-button.html
index 575084f35c..eb517c45e3 100644
--- a/platform/forms/res/templates/controls/menu-button.html
+++ b/platform/forms/res/templates/controls/menu-button.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="t-btn l-btn s-btn s-icon-btn s-very-subtle btn-menu menu-element dropdown click-invoke"
+<div class="s-menu menu-element"
      ng-controller="ClickAwayController as toggle">
 
     <span class="l-click-area" ng-click="toggle.toggle()"></span>
@@ -28,12 +28,8 @@
     <span class="title-label" ng-if="structure.text">
         {{structure.text}}
     </span>
-    <span class='ui-symbol invoke-menu'
-          ng-if="!structure.text">
-        v
-    </span>
 
-    <div class="menu dropdown" ng-show="toggle.isActive()">
+    <div class="menu" ng-show="toggle.isActive()">
         <ul>
             <li ng-click="structure.click(option.key); toggle.setState(false)" ng-repeat="option in structure.options">
                 <a href="">
diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html
index 5313cd12ed..e65ab072af 100644
--- a/platform/search/res/templates/search.html
+++ b/platform/search/res/templates/search.html
@@ -105,7 +105,7 @@
 
         <!-- Load more button --> 
         <div ng-if="controller.areMore()">
-            <a class="load-more-button btn very-subtle vsm"
+            <a class="load-more-button s-btn vsm"
                     ng-click="controller.loadMore()"> 
                 More Results
             </a>

From 37c34c668cdacbf1248f85711df1b00e164ff6cc Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 3 Sep 2015 15:34:39 -0700
Subject: [PATCH 196/266] [Frontend] IN-PROGRESS Major restructuring of
 /platform/commonUI/ to add themes structure

open #95
New themes bundle files, .scss and directories;
Moved constants definitions (mainly colors) from commonUI/.../_constants
to individual themes _constants files;
tweaks to mixins files;
changed pathways to font and images in commonUI/.../_constants;
---
 bundles.json                                  |    1 +
 platform/commonUI/general/bundle.json         |    4 -
 platform/commonUI/general/res/config.rb       |    2 +-
 .../commonUI/general/res/sass/_constants.scss |   65 +-
 .../commonUI/general/res/sass/_fonts.scss     |   38 -
 .../commonUI/general/res/sass/_global.scss    |   20 +
 .../commonUI/general/res/sass/_icons.scss     |    4 +-
 platform/commonUI/general/res/sass/_main.scss |    1 -
 .../commonUI/general/res/sass/_mixins.scss    |   22 +-
 .../general/res/sass/controls/_buttons.scss   |    8 +-
 .../general/res/sass/forms/_mixins.scss       |   52 -
 platform/commonUI/themes/espresso/bundle.json |   12 +
 .../commonUI/themes/espresso/res/config.rb    |   26 +
 .../espresso}/res/css/theme-espresso.css      | 1872 +++---
 .../themes/espresso/res/sass/_constants.scss  |   68 +
 .../themes/espresso/res/sass/_mixins.scss     |    9 +
 .../espresso}/res/sass/theme-espresso.scss    |   14 +-
 platform/commonUI/themes/snow/bundle.json     |   12 +
 platform/commonUI/themes/snow/res/config.rb   |   26 +
 .../themes/snow/res/css/theme-snow.css        | 5971 +++++++++++++++++
 .../themes/snow/res/sass/_constants.scss      |   68 +
 .../themes/snow/res/sass/_controls.scss       |    7 +
 .../themes/snow/res/sass/_mixins.scss         |   48 +
 .../snow/res/sass/theme-snow.scss}            |   32 +-
 24 files changed, 7237 insertions(+), 1145 deletions(-)
 delete mode 100644 platform/commonUI/general/res/sass/_fonts.scss
 delete mode 100644 platform/commonUI/general/res/sass/forms/_mixins.scss
 create mode 100644 platform/commonUI/themes/espresso/bundle.json
 create mode 100755 platform/commonUI/themes/espresso/res/config.rb
 rename platform/commonUI/{general => themes/espresso}/res/css/theme-espresso.css (77%)
 create mode 100644 platform/commonUI/themes/espresso/res/sass/_constants.scss
 create mode 100644 platform/commonUI/themes/espresso/res/sass/_mixins.scss
 rename platform/commonUI/{general => themes/espresso}/res/sass/theme-espresso.scss (84%)
 create mode 100644 platform/commonUI/themes/snow/bundle.json
 create mode 100755 platform/commonUI/themes/snow/res/config.rb
 create mode 100644 platform/commonUI/themes/snow/res/css/theme-snow.css
 create mode 100644 platform/commonUI/themes/snow/res/sass/_constants.scss
 create mode 100644 platform/commonUI/themes/snow/res/sass/_controls.scss
 create mode 100644 platform/commonUI/themes/snow/res/sass/_mixins.scss
 rename platform/commonUI/{general/res/sass/themes/_theme-espresso.scss => themes/snow/res/sass/theme-snow.scss} (74%)

diff --git a/bundles.json b/bundles.json
index 79ab2dd246..2860dbde5e 100644
--- a/bundles.json
+++ b/bundles.json
@@ -8,6 +8,7 @@
     "platform/commonUI/dialog",
     "platform/commonUI/general",
     "platform/commonUI/inspect",
+    "platform/commonUI/themes/espresso",
     "platform/containment",
     "platform/execution",
     "platform/telemetry",
diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 9f79f39fa7..bc62831627 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -24,10 +24,6 @@
             {
                 "stylesheetUrl": "css/normalize.min.css",
                 "priority": "mandatory"
-            },
-            {
-                "stylesheetUrl": "css/theme-espresso.css",
-                "priority": 1000
             }
         ],
         "templates": [
diff --git a/platform/commonUI/general/res/config.rb b/platform/commonUI/general/res/config.rb
index a5def82481..58843cd76e 100755
--- a/platform/commonUI/general/res/config.rb
+++ b/platform/commonUI/general/res/config.rb
@@ -13,7 +13,7 @@ javascripts_dir = "js"
 output_style = :nested
 
 # To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
+relative_assets = true
 
 # To disable debugging comments that display the original location of your selectors. Uncomment:
 # line_comments = false
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index c4f0970500..37ccbebe6b 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -33,62 +33,6 @@ $controlCr: 3px;
 $smallCr: 2px;
 $badgeW: 35px;
 
-/************************** COLORS AND SHADING */
-$colorBodyBg: #333;
-$colorBodyFg: #999;
-$colorFooterBg: #000;
-$colorKey: #0099cc;
-$colorKeySelectedBg: #005177;
-$colorKeyFg: #fff;
-$colorAlt1: #ffc700;
-$colorAlert: #ff3c00;
-$colorIconLink: #49dedb;
-$colorPausedBg: #c56f01;
-$colorPausedFg: #fff;
-$colorCreateBtn: $colorKey;
-$colorGridLines: rgba(#fff, 0.05);
-$colorFormLines: rgba(#fff, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.2);
-$colorInvokeMenu: #fff;
-// Menu colors
-$colorMenuBg: lighten($colorBodyBg, 23%);
-$colorMenuFg: lighten($colorMenuBg, 70%);
-$colorMenuIc: lighten($colorKey, 17%);
-$colorInteriorBorder: lighten($colorBodyBg, 10%);
-$colorObjFrameBg: darken($colorBodyBg, 5%);
-// Form colors
-$colorCheck: $colorKey;
-$colorFormRequired: #ffc700;
-$colorFormValid: #33cc33;
-$colorFormError: #cc0000;
-$colorFormInvalid: #ff9900;
-// Limits and staleness colors
-$colorLimitYellow: #9d7500;
-$colorLimitRed: #aa0000;
-$colorTelemFresh: #fff;
-$colorTelemStale: #888;
-$styleTelemStale: italic;
-// Bubble colors
-$colorInfoBubbleFg: #666;
-$colorInfoBubbleBg: #ddd;
-$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
-$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
-// Overlay
-$colorOvrBlocker: rgba(black, 0.7);
-$colorOvrBg: $colorBodyBg;
-$colorOvrFg: $colorBodyFg;
-// Items
-$colorItemBase: lighten($colorBodyBg, 5%);
-$colorItemFg: lighten($colorItemBase, 20%);
-$colorItemSelected: $colorKey;
-// Tabular
-$tabularColorBorder: rgba(white, 0.1);
-$tabularColorBodyBg: darken($colorBodyBg, 10%);
-$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
-$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
-$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
-$tabularColorHeaderBorder: $colorBodyBg;
-
 /************************** RATIOS */
 $ltGamma: 20%;
 $btnFontSizeToH: 0.45;
@@ -118,9 +62,6 @@ $treeVCW: 10px;
 $treeTypeIconH: 16px;
 $treeTypeIconW: 20px;
 $treeContextTriggerW: 20px;
-$colorItemTreeIcon: $colorKey;
-$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
-$colorItemTreeVCHover: $colorAlt1;
 // Tabular
 $tabularHeaderH: 22px; //18px
 $tabularTdPadLR: $itemPadLR;
@@ -157,13 +98,13 @@ $formLRPad: $interiorMargin;
 $menuLineH: 1.5rem;
 $menuLineHPx: 24px;
 $scrollbarTrackSize: 10px;
-$scrollbarTrackColorBg: rgba(#000, 0.4);
 $btnStdH: 25px;
 $btnToolbarH: $btnStdH;
 
 /************************** PATHS */
-$dirImgs: '../images/'; // Relative to platform/css/ directory
+// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
+$dirCommonRes: '../../../../general/res/';
+$dirImgs: $dirCommonRes + 'images/';
 
 /************************** TIMINGS */
 $controlFadeMs: 100ms;
-
diff --git a/platform/commonUI/general/res/sass/_fonts.scss b/platform/commonUI/general/res/sass/_fonts.scss
deleted file mode 100644
index c1fb408080..0000000000
--- a/platform/commonUI/general/res/sass/_fonts.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@font-face {
-	/*
-	* Use https://www.web-font-generator.com/ to gen fonts
-	*/
-	font-family: 'symbolsfont';
-	src: url('../fonts/symbols/wtdsymbols.eot');
-	src: url('../fonts/symbols/wtdsymbols.eot?#iefix') format('embedded-opentype'),
-	url('../fonts/symbols/wtdsymbols.woff') format('woff'),
-	url('../fonts/symbols/wtdsymbols.ttf') format('truetype'),
-	url('../fonts/symbols/wtdsymbols.svg#armataregular') format('svg');
-	font-weight: normal;
-	font-style: normal;
-}
-
-.ui-symbol {
-	font-family: 'symbolsfont';
-}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss
index a6b8ff63c8..6b7124a2be 100644
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -19,6 +19,26 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** FONTS */
+@font-face {
+	/*
+    * Use https://icomoon.io/app with /platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
+    */
+	font-family: 'symbolsfont';
+	src: url($dirCommonRes + 'fonts/symbols/wtdsymbols.eot');
+	src: url($dirCommonRes + 'fonts/symbols/wtdsymbols.eot?#iefix') format('embedded-opentype'),
+	url($dirCommonRes + 'fonts/symbols/wtdsymbols.woff') format('woff'),
+	url($dirCommonRes + 'fonts/symbols/wtdsymbols.ttf') format('truetype'),
+	url($dirCommonRes + 'fonts/symbols/wtdsymbols.svg#armataregular') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+.ui-symbol {
+	font-family: 'symbolsfont';
+}
+
+/************************** HTML ENTITIES */
 a {
 	color: #ccc;
 	cursor: pointer;
diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss
index 27e48cc9ee..1f6ec7a34e 100644
--- a/platform/commonUI/general/res/sass/_icons.scss
+++ b/platform/commonUI/general/res/sass/_icons.scss
@@ -29,10 +29,8 @@
 }
 
 .ui-symbol {
-	$c: $colorKey;
 	&.icon {
-		color: $c;
-		@include txtShdwSubtle();
+		color: $colorKey;
 		&.alert {
 			color: $colorAlert;
 			&:hover {
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 279c6d713e..4bc28019fe 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -21,7 +21,6 @@
  *****************************************************************************/
 @import "effects";
 @import "global";
-@import "fonts";
 @import "about";
 @import "text";
 @import "icons";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 8347e0a241..a64549a51f 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -149,9 +149,9 @@
     $ltnRatio: 7%;
     $gradRatio: 5%;
     $hovRatio: 7%;
-    $bgBase: lighten($bg, $ltnRatio);
-    $fgBase: lighten($fg, $ltnRatio);
-    $gradC1: lighten($bgBase, $gradRatio);
+    $bgBase: $bg; //pullForward($bg, $ltnRatio);
+    $fgBase: $fg; // pullForward($fg, $ltnRatio);
+    $gradC1: lighten($bgBase, $gradRatio); // Container should be lighter higher up
     $gradC2: $bgBase;
     $cInvokeBase: #fff;
 
@@ -165,8 +165,8 @@
     display: inline-block;
     @if $hover == true {
         &:not(.disabled):hover {
-            @include background-image(linear-gradient(lighten($gradC1, $hovRatio), lighten($gradC2, $hovRatio)));
-            color: lighten($fgBase, $hovRatio);
+            @include background-image(linear-gradient(pullForward($gradC1, $hovRatio), pullForward($gradC2, $hovRatio)));
+            color: pullForward($fgBase, $hovRatio);
         }
     }
 }
@@ -212,7 +212,9 @@
 
 @mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorKey) {
 	// $ic: Icon color
+    @include border-radius($controlCr);
     @include containerSubtle($bg, $fg, true);
+    @include text-shadow(rgba(black, 0.3) 0 1px 1px);
 	.icon {
 		color: $ic;
 	}
@@ -263,6 +265,16 @@
     @include text-shadow(rgba(black, $sVal) 0 3px 7px);
 }
 
+@function pullForward($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, lighter things come forward
+    @return lighten($c, $p);
+}
+
+@function pushBack($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, darker things move back
+    @return darken($c, $p);
+}
+
 /*********************************************** FORM ELEMENTS */
 @mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
     @include appearance(none);
diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
index 0d31fee37c..6079380d84 100644
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -59,19 +59,15 @@ $pad: $interiorMargin * $baseRatio;
 
 /*********************************** STYLE STYLES */
 .s-btn {
-	$base: lighten($colorBodyBg, 20%);
-	@include border-radius($controlCr);
 	@include box-sizing(border-box);
-	@include text-shadow(rgba(black, 0.3) 0 1px 1px);
 	@include user-select(none);
-	//@include containerSubtle($colorBodyBg, $colorBodyFg, true);
 	cursor: pointer;
 	text-decoration: none;
 	height: $btnStdH;
 	line-height: $btnStdH;
 	padding: 0 $pad;
+	font-size: 0.7rem;
 
-		font-size: 0.7rem;
 	.icon {
 		font-size: 0.8rem;
 		color: $colorKey;
@@ -89,7 +85,7 @@ $pad: $interiorMargin * $baseRatio;
 	}
 
 	&:not(.major) {
-		@include btnSubtle($colorBodyBg, $colorBodyFg, $colorKey);
+		@include btnSubtle($colorBtnBg, $colorBtnFg, $colorBtnIcon);
 	}
 
 	&.major {
diff --git a/platform/commonUI/general/res/sass/forms/_mixins.scss b/platform/commonUI/general/res/sass/forms/_mixins.scss
deleted file mode 100644
index e80999174c..0000000000
--- a/platform/commonUI/general/res/sass/forms/_mixins.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include appearance(none);
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
-	@include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
-//	background: lighten($bg, 20%);
-	background: rgba(#fff, 0.1);
-	border: none;
-	//border-bottom: 1px solid rgba(#fff, 0.1);
-	color: lighten($fg, 20%);
-	outline: none;
-	&.error {
-		background: rgba(red, 0.5);
-	}
-}
-
-@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include input-base($bg, $fg);
-	padding: 0 $interiorMarginSm;
-}
-
-@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include input-base($bg, $fg);
-	padding: $interiorMargin;
-}
-
-@mixin subdued-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	@include nice-input($bg, $fg);
-	background: lighten($bg, 3%);
-	border-bottom: 1px solid lighten($bg, 10%);
-}
\ No newline at end of file
diff --git a/platform/commonUI/themes/espresso/bundle.json b/platform/commonUI/themes/espresso/bundle.json
new file mode 100644
index 0000000000..37cab3e412
--- /dev/null
+++ b/platform/commonUI/themes/espresso/bundle.json
@@ -0,0 +1,12 @@
+{
+  "name": "Espresso",
+  "description": "Espresso theme: dark and rich",
+  "extensions": {
+    "stylesheets": [
+      {
+        "stylesheetUrl": "css/theme-espresso.css",
+        "priority": 1000
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/platform/commonUI/themes/espresso/res/config.rb b/platform/commonUI/themes/espresso/res/config.rb
new file mode 100755
index 0000000000..58843cd76e
--- /dev/null
+++ b/platform/commonUI/themes/espresso/res/config.rb
@@ -0,0 +1,26 @@
+# Require any additional compass plugins here.
+# require "compass-growl"
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# :expanded, :compressed, :nested
+output_style = :nested
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
similarity index 77%
rename from platform/commonUI/general/res/css/theme-espresso.css
rename to platform/commonUI/themes/espresso/res/css/theme-espresso.css
index c93867b483..52ce4616b9 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -76,63 +76,6 @@ a img {
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/************************** FEATURES */
-/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-/************************** COLORS AND SHADING */
-/************************** RATIOS */
-/************************** LAYOUT */
-/************************** CONTROLS */
-/************************** PATHS */
-/************************** TIMINGS */
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/************************** STYLE */
-/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
-/************************** MOBILE TREE MENU DIMENSIONS */
-/************************** WINDOW DIMENSIONS FOR RWD */
-/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -206,6 +149,13 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+/************************** FEATURES */
+/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** RATIOS */
+/************************** LAYOUT */
+/************************** CONTROLS */
+/************************** PATHS */
+/************************** TIMINGS */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -227,12 +177,14 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* CONSTANTS */
-/*
-@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	background: red;
-	display: inline-block;
-}*/
+/************************** STYLE */
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
+/************************** MOBILE TREE MENU DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
+/************************** COLORS AND SHADING */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -275,7 +227,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/_effects.scss */
+/* line 22, ../../../../general/res/sass/_effects.scss */
 .disabled,
 a.disabled {
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
@@ -283,18 +235,18 @@ a.disabled {
   pointer-events: none !important;
   cursor: default !important; }
 
-/* line 29, ../sass/_effects.scss */
+/* line 29, ../../../../general/res/sass/_effects.scss */
 .incised {
   -moz-box-shadow: inset rgba(0, 0, 0, 0.8) 0 1px 5px;
   -webkit-box-shadow: inset rgba(0, 0, 0, 0.8) 0 1px 5px;
   box-shadow: inset rgba(0, 0, 0, 0.8) 0 1px 5px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
 
-/* line 34, ../sass/_effects.scss */
+/* line 34, ../../../../general/res/sass/_effects.scss */
 .outline {
   border: 1px solid #666666; }
 
-/* line 38, ../sass/_effects.scss */
+/* line 38, ../../../../general/res/sass/_effects.scss */
 .test-stripes {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
@@ -304,7 +256,7 @@ a.disabled {
   background-repeat: repeat;
   background-size: 40px 40px; }
 
-/* line 42, ../sass/_effects.scss */
+/* line 42, ../../../../general/res/sass/_effects.scss */
 .test {
   background-color: rgba(255, 204, 0, 0.2); }
 
@@ -323,7 +275,7 @@ a.disabled {
     opacity: 0.2; }
   100% {
     opacity: 1; } }
-/* line 69, ../sass/_effects.scss */
+/* line 69, ../../../../general/res/sass/_effects.scss */
 .pulse {
   -moz-animation-name: pulse;
   -webkit-animation-name: pulse;
@@ -362,16 +314,31 @@ a.disabled {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/_global.scss */
+/************************** FONTS */
+@font-face {
+  	/*
+      * Use https://icomoon.io/app with /platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
+      */
+  font-family: 'symbolsfont';
+  src: url("../../../../general/res/fonts/symbols/wtdsymbols.eot");
+  src: url("../../../../general/res/fonts/symbols/wtdsymbols.eot?#iefix") format("embedded-opentype"), url("../../../../general/res/fonts/symbols/wtdsymbols.woff") format("woff"), url("../../../../general/res/fonts/symbols/wtdsymbols.ttf") format("truetype"), url("../../../../general/res/fonts/symbols/wtdsymbols.svg#armataregular") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+/* line 37, ../../../../general/res/sass/_global.scss */
+.ui-symbol {
+  font-family: 'symbolsfont'; }
+
+/************************** HTML ENTITIES */
+/* line 42, ../../../../general/res/sass/_global.scss */
 a {
   color: #ccc;
   cursor: pointer;
   text-decoration: none; }
-  /* line 26, ../sass/_global.scss */
+  /* line 46, ../../../../general/res/sass/_global.scss */
   a:hover {
     color: #fff; }
 
-/* line 31, ../sass/_global.scss */
+/* line 51, ../../../../general/res/sass/_global.scss */
 body, html {
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -383,24 +350,24 @@ body, html {
   width: 100%;
   overflow: hidden; }
 
-/* line 44, ../sass/_global.scss */
+/* line 64, ../../../../general/res/sass/_global.scss */
 em {
   font-style: normal; }
 
-/* line 49, ../sass/_global.scss */
+/* line 69, ../../../../general/res/sass/_global.scss */
 input, textarea {
   font-family: Helvetica, Arial, sans-serif; }
 
-/* line 53, ../sass/_global.scss */
+/* line 73, ../../../../general/res/sass/_global.scss */
 input[type="text"] {
   vertical-align: baseline;
   padding: 3px 5px !important; }
 
-/* line 58, ../sass/_global.scss */
+/* line 78, ../../../../general/res/sass/_global.scss */
 h1, h2, h3 {
   margin: 0; }
 
-/* line 62, ../sass/_global.scss */
+/* line 82, ../../../../general/res/sass/_global.scss */
 h1 {
   font-size: 1.7em;
   font-weight: normal !important;
@@ -408,15 +375,15 @@ h1 {
   margin-bottom: 20px;
   margin-top: 0; }
 
-/* line 70, ../sass/_global.scss */
+/* line 90, ../../../../general/res/sass/_global.scss */
 p {
   margin-bottom: 10px; }
 
-/* line 74, ../sass/_global.scss */
+/* line 94, ../../../../general/res/sass/_global.scss */
 mct-container {
   display: block; }
 
-/* line 78, ../sass/_global.scss */
+/* line 98, ../../../../general/res/sass/_global.scss */
 .abs, .s-menu span.l-click-area {
   position: absolute;
   top: 0;
@@ -426,51 +393,51 @@ mct-container {
   height: auto;
   width: auto; }
 
-/* line 88, ../sass/_global.scss */
+/* line 108, ../../../../general/res/sass/_global.scss */
 .code, .codehilite {
   font-family: "Lucida Console", monospace;
   font-size: 0.7em;
   line-height: 150%;
   white-space: pre; }
 
-/* line 95, ../sass/_global.scss */
+/* line 115, ../../../../general/res/sass/_global.scss */
 .codehilite {
   background-color: rgba(255, 255, 255, 0.1);
   padding: 1em; }
 
-/* line 101, ../sass/_global.scss */
+/* line 121, ../../../../general/res/sass/_global.scss */
 .align-right {
   text-align: right; }
 
-/* line 105, ../sass/_global.scss */
+/* line 125, ../../../../general/res/sass/_global.scss */
 .centered {
   text-align: center; }
 
-/* line 109, ../sass/_global.scss */
+/* line 129, ../../../../general/res/sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 113, ../sass/_global.scss */
+/* line 133, ../../../../general/res/sass/_global.scss */
 .colorKey {
   color: #0099cc; }
 
-/* line 117, ../sass/_global.scss */
+/* line 137, ../../../../general/res/sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 121, ../sass/_global.scss */
+/* line 141, ../../../../general/res/sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 127, ../sass/_global.scss */
+/* line 147, ../../../../general/res/sass/_global.scss */
 .paused:not(.s-btn):not(.s-menu) {
   border-color: #c56f01 !important;
   color: #c56f01 !important; }
 
-/* line 133, ../sass/_global.scss */
+/* line 153, ../../../../general/res/sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -495,59 +462,25 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-@font-face {
-  /*
-  * Use https://www.web-font-generator.com/ to gen fonts
-  */
-  font-family: 'symbolsfont';
-  src: url("../fonts/symbols/wtdsymbols.eot");
-  src: url("../fonts/symbols/wtdsymbols.eot?#iefix") format("embedded-opentype"), url("../fonts/symbols/wtdsymbols.woff") format("woff"), url("../fonts/symbols/wtdsymbols.ttf") format("truetype"), url("../fonts/symbols/wtdsymbols.svg#armataregular") format("svg");
-  font-weight: normal;
-  font-style: normal; }
-/* line 36, ../sass/_fonts.scss */
-.ui-symbol {
-  font-family: 'symbolsfont'; }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 26, ../sass/_about.scss */
+/* line 26, ../../../../general/res/sass/_about.scss */
 .l-about.abs, .s-menu span.l-about.l-click-area {
   overflow: auto; }
-/* line 31, ../sass/_about.scss */
+/* line 31, ../../../../general/res/sass/_about.scss */
 .l-about .l-logo-holder {
   position: relative;
   height: 45%; }
-  /* line 34, ../sass/_about.scss */
+  /* line 34, ../../../../general/res/sass/_about.scss */
   .l-about .l-logo-holder .l-logo {
     position: absolute; }
-    /* line 37, ../sass/_about.scss */
+    /* line 37, ../../../../general/res/sass/_about.scss */
     .l-about .l-logo-holder .l-logo.l-logo-app {
       top: 0;
       right: 15%;
       bottom: 0;
       left: 15%; }
-    /* line 41, ../sass/_about.scss */
+    /* line 41, ../../../../general/res/sass/_about.scss */
     .l-about .l-logo-holder .l-logo.s-logo-nasa {
-      background-image: url("../images/logo-nasa.svg");
+      background-image: url("../../../../general/res/images/logo-nasa.svg");
       top: 10px;
       right: auto;
       bottom: auto;
@@ -556,46 +489,46 @@ mct-container {
       height: auto;
       padding-bottom: 5%;
       padding-top: 5%; }
-/* line 50, ../sass/_about.scss */
+/* line 50, ../../../../general/res/sass/_about.scss */
 .l-about .l-content {
   position: relative;
   margin-top: 10px; }
 
-/* line 57, ../sass/_about.scss */
+/* line 57, ../../../../general/res/sass/_about.scss */
 .s-about {
   line-height: 120%; }
-  /* line 61, ../sass/_about.scss */
+  /* line 61, ../../../../general/res/sass/_about.scss */
   .s-about a {
     color: #84b3ff; }
-  /* line 68, ../sass/_about.scss */
+  /* line 68, ../../../../general/res/sass/_about.scss */
   .s-about .s-logo-holder {
-    background: url("../images/bg-about-openmctweb.jpg") no-repeat center;
+    background: url("../../../../general/res/images/bg-about-openmctweb.jpg") no-repeat center;
     background-size: cover; }
-  /* line 72, ../sass/_about.scss */
+  /* line 72, ../../../../general/res/sass/_about.scss */
   .s-about .s-logo {
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain; }
-  /* line 78, ../sass/_about.scss */
+  /* line 78, ../../../../general/res/sass/_about.scss */
   .s-about .s-logo-openmctweb {
-    background-image: url("../images/logo-openmctweb-shdw.svg"); }
-  /* line 81, ../sass/_about.scss */
+    background-image: url("../../../../general/res/images/logo-openmctweb-shdw.svg"); }
+  /* line 81, ../../../../general/res/sass/_about.scss */
   .s-about .s-btn, .s-about .s-menu {
     line-height: 2em; }
-  /* line 85, ../sass/_about.scss */
+  /* line 85, ../../../../general/res/sass/_about.scss */
   .s-about .l-licenses-software .l-license-software {
     border-top: 1px solid #4d4d4d;
     padding: 0.5em 0; }
-    /* line 88, ../sass/_about.scss */
+    /* line 88, ../../../../general/res/sass/_about.scss */
     .s-about .l-licenses-software .l-license-software:first-child {
       border-top: none; }
-    /* line 91, ../sass/_about.scss */
+    /* line 91, ../../../../general/res/sass/_about.scss */
     .s-about .l-licenses-software .l-license-software em {
       color: #666666; }
-    /* line 98, ../sass/_about.scss */
+    /* line 98, ../../../../general/res/sass/_about.scss */
     .s-about .l-licenses-software .l-license-software h3 {
       font-size: 1.25em; }
-    /* line 101, ../sass/_about.scss */
+    /* line 101, ../../../../general/res/sass/_about.scss */
     .s-about .l-licenses-software .l-license-software .s-license-text {
       font-size: 0.9em; }
 
@@ -620,29 +553,29 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 24, ../sass/_text.scss */
+/* line 24, ../../../../general/res/sass/_text.scss */
 .abs.l-standalone, .s-menu span.l-standalone.l-click-area {
   padding: 5% 20%; }
 
-/* line 29, ../sass/_text.scss */
+/* line 29, ../../../../general/res/sass/_text.scss */
 .s-text {
   font-size: 0.8em; }
-  /* line 31, ../sass/_text.scss */
+  /* line 31, ../../../../general/res/sass/_text.scss */
   .s-text ol, .s-text ul {
     list-style: square;
     margin-left: 1.5em; }
-  /* line 39, ../sass/_text.scss */
+  /* line 39, ../../../../general/res/sass/_text.scss */
   .s-text h1, .s-text h2, .s-text h3 {
     color: #fff;
     font-weight: normal !important;
     margin-bottom: 1em; }
-  /* line 45, ../sass/_text.scss */
+  /* line 45, ../../../../general/res/sass/_text.scss */
   .s-text h2 {
     border-top: 1px solid #4d4d4d;
     font-size: 1.5em;
     margin-top: 2em;
     padding-top: 1em; }
-  /* line 52, ../sass/_text.scss */
+  /* line 52, ../../../../general/res/sass/_text.scss */
   .s-text h3 {
     margin-top: 2em; }
 
@@ -667,14 +600,14 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/_icons.scss */
+/* line 22, ../../../../general/res/sass/_icons.scss */
 .triangle {
   width: 0;
   height: 0;
   border-top: 5px solid transparent;
   border-left: 5px solid #0099cc;
   border-bottom: 5px solid transparent; }
-  /* line 26, ../sass/_icons.scss */
+  /* line 26, ../../../../general/res/sass/_icons.scss */
   .triangle.triangle-down {
     width: 0;
     height: 0;
@@ -682,48 +615,47 @@ mct-container {
     border-top: 5px solid #0099cc;
     border-right: 5px solid transparent; }
 
-/* line 33, ../sass/_icons.scss */
+/* line 32, ../../../../general/res/sass/_icons.scss */
 .ui-symbol.icon {
-  color: #0099cc;
-  text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; }
-  /* line 36, ../sass/_icons.scss */
+  color: #0099cc; }
+  /* line 34, ../../../../general/res/sass/_icons.scss */
   .ui-symbol.icon.alert {
     color: #ff3c00; }
-    /* line 38, ../sass/_icons.scss */
+    /* line 36, ../../../../general/res/sass/_icons.scss */
     .ui-symbol.icon.alert:hover {
       color: #ff8a66; }
-  /* line 42, ../sass/_icons.scss */
+  /* line 40, ../../../../general/res/sass/_icons.scss */
   .ui-symbol.icon.major {
     font-size: 1.65em; }
 
-/* line 48, ../sass/_icons.scss */
+/* line 46, ../../../../general/res/sass/_icons.scss */
 .bar .ui-symbol {
   display: inline-block; }
 
-/* line 52, ../sass/_icons.scss */
+/* line 50, ../../../../general/res/sass/_icons.scss */
 .invoke-menu {
   text-shadow: none;
   display: inline-block; }
 
-/* line 57, ../sass/_icons.scss */
+/* line 55, ../../../../general/res/sass/_icons.scss */
 .s-menu .invoke-menu,
 .icon.major .invoke-menu {
   margin-left: 3px; }
 
-/* line 62, ../sass/_icons.scss */
+/* line 60, ../../../../general/res/sass/_icons.scss */
 .menu .type-icon,
 .tree-item .type-icon,
 .super-menu.menu .type-icon {
   position: absolute; }
 
-/* line 72, ../sass/_icons.scss */
+/* line 70, ../../../../general/res/sass/_icons.scss */
 .l-icon-link:before {
   content: "\f4"; }
 
-/* line 76, ../sass/_icons.scss */
+/* line 74, ../../../../general/res/sass/_icons.scss */
 .l-icon-alert {
   display: none !important; }
-  /* line 78, ../sass/_icons.scss */
+  /* line 76, ../../../../general/res/sass/_icons.scss */
   .l-icon-alert:before {
     color: #ff3c00;
     content: "!"; }
@@ -752,10 +684,10 @@ mct-container {
 	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ec"); }
 	&.s-limit-red { @include limit($colorLimitRed, "\0000ee"); }
 }*/
-/* line 35, ../sass/_limits.scss */
+/* line 35, ../../../../general/res/sass/_limits.scss */
 [class*="s-limit"] {
   white-space: nowrap; }
-  /* line 39, ../sass/_limits.scss */
+  /* line 39, ../../../../general/res/sass/_limits.scss */
   [class*="s-limit"]:before {
     display: inline-block;
     font-family: symbolsfont;
@@ -764,43 +696,43 @@ mct-container {
     margin-right: 3px;
     vertical-align: middle; }
 
-/* line 49, ../sass/_limits.scss */
+/* line 49, ../../../../general/res/sass/_limits.scss */
 .s-limit-upr-red {
   background: #aa0000; }
-  /* line 3, ../sass/_limits.scss */
+  /* line 3, ../../../../general/res/sass/_limits.scss */
   .s-limit-upr-red:before {
     color: #ff4444;
     content: "ë"; }
 
-/* line 50, ../sass/_limits.scss */
+/* line 50, ../../../../general/res/sass/_limits.scss */
 .s-limit-upr-yellow {
   background: #9d7500; }
-  /* line 3, ../sass/_limits.scss */
+  /* line 3, ../../../../general/res/sass/_limits.scss */
   .s-limit-upr-yellow:before {
     color: #ffcc37;
     content: "í"; }
 
-/* line 51, ../sass/_limits.scss */
+/* line 51, ../../../../general/res/sass/_limits.scss */
 .s-limit-lwr-yellow {
   background: #9d7500; }
-  /* line 3, ../sass/_limits.scss */
+  /* line 3, ../../../../general/res/sass/_limits.scss */
   .s-limit-lwr-yellow:before {
     color: #ffcc37;
     content: "ì"; }
 
-/* line 52, ../sass/_limits.scss */
+/* line 52, ../../../../general/res/sass/_limits.scss */
 .s-limit-lwr-red {
   background: #aa0000; }
-  /* line 3, ../sass/_limits.scss */
+  /* line 3, ../../../../general/res/sass/_limits.scss */
   .s-limit-lwr-red:before {
     color: #ff4444;
     content: "î"; }
 
-/* line 1, ../sass/_data-status.scss */
+/* line 1, ../../../../general/res/sass/_data-status.scss */
 .s-stale {
   color: rgba(255, 255, 255, 0.5) !important;
   font-style: italic; }
-  /* line 3, ../sass/_data-status.scss */
+  /* line 3, ../../../../general/res/sass/_data-status.scss */
   .s-stale .td {
     color: rgba(255, 255, 255, 0.5) !important;
     font-style: italic; }
@@ -826,60 +758,60 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 24, ../sass/helpers/_bubbles.scss */
+/* line 24, ../../../../general/res/sass/helpers/_bubbles.scss */
 .bubble-container {
   pointer-events: none; }
 
-/* line 31, ../sass/helpers/_bubbles.scss */
+/* line 31, ../../../../general/res/sass/helpers/_bubbles.scss */
 .l-infobubble-wrapper {
   -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
   box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
   position: relative;
   z-index: 50; }
-  /* line 36, ../sass/helpers/_bubbles.scss */
+  /* line 36, ../../../../general/res/sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper .l-infobubble {
     display: inline-block;
     min-width: 100px;
     max-width: 300px;
     padding: 5px 10px; }
-    /* line 41, ../sass/helpers/_bubbles.scss */
+    /* line 41, ../../../../general/res/sass/helpers/_bubbles.scss */
     .l-infobubble-wrapper .l-infobubble:before {
       content: "";
       position: absolute;
       width: 0;
       height: 0; }
-    /* line 47, ../sass/helpers/_bubbles.scss */
+    /* line 47, ../../../../general/res/sass/helpers/_bubbles.scss */
     .l-infobubble-wrapper .l-infobubble table {
       width: 100%; }
-      /* line 50, ../sass/helpers/_bubbles.scss */
+      /* line 50, ../../../../general/res/sass/helpers/_bubbles.scss */
       .l-infobubble-wrapper .l-infobubble table tr td {
         padding: 2px 0;
         vertical-align: top; }
-        /* line 53, ../sass/helpers/_bubbles.scss */
+        /* line 53, ../../../../general/res/sass/helpers/_bubbles.scss */
         .l-infobubble-wrapper .l-infobubble table tr td.label {
           padding-right: 10px;
           white-space: nowrap; }
-        /* line 57, ../sass/helpers/_bubbles.scss */
+        /* line 57, ../../../../general/res/sass/helpers/_bubbles.scss */
         .l-infobubble-wrapper .l-infobubble table tr td.value {
           word-break: break-all; }
-        /* line 61, ../sass/helpers/_bubbles.scss */
+        /* line 61, ../../../../general/res/sass/helpers/_bubbles.scss */
         .l-infobubble-wrapper .l-infobubble table tr td.align-wrap {
           white-space: normal; }
-    /* line 67, ../sass/helpers/_bubbles.scss */
+    /* line 67, ../../../../general/res/sass/helpers/_bubbles.scss */
     .l-infobubble-wrapper .l-infobubble .title {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       margin-bottom: 5px; }
-  /* line 74, ../sass/helpers/_bubbles.scss */
+  /* line 74, ../../../../general/res/sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-left {
     margin-left: 20px; }
-    /* line 76, ../sass/helpers/_bubbles.scss */
+    /* line 76, ../../../../general/res/sass/helpers/_bubbles.scss */
     .l-infobubble-wrapper.arw-left .l-infobubble::before {
       right: 100%; }
       @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 76, ../sass/helpers/_bubbles.scss */
+        /* line 76, ../../../../general/res/sass/helpers/_bubbles.scss */
         .l-infobubble-wrapper.arw-left .l-infobubble::before {
           width: 0;
           height: 0;
@@ -887,30 +819,30 @@ mct-container {
           border-bottom: 6.66667px solid transparent;
           border-right: 10px solid #ddd; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 88, ../sass/helpers/_bubbles.scss */
+    /* line 88, ../../../../general/res/sass/helpers/_bubbles.scss */
     .l-infobubble-wrapper.arw-right {
       margin-right: 20px; } }
-  /* line 95, ../sass/helpers/_bubbles.scss */
+  /* line 95, ../../../../general/res/sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-right .l-infobubble::before {
     left: 100%; }
     @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 95, ../sass/helpers/_bubbles.scss */
+      /* line 95, ../../../../general/res/sass/helpers/_bubbles.scss */
       .l-infobubble-wrapper.arw-right .l-infobubble::before {
         width: 0;
         height: 0;
         border-top: 6.66667px solid transparent;
         border-bottom: 6.66667px solid transparent;
         border-left: 10px solid #ddd; } }
-  /* line 108, ../sass/helpers/_bubbles.scss */
+  /* line 108, ../../../../general/res/sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-top .l-infobubble::before {
     top: 20px; }
-  /* line 114, ../sass/helpers/_bubbles.scss */
+  /* line 114, ../../../../general/res/sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-btm .l-infobubble::before {
     bottom: 20px; }
-  /* line 119, ../sass/helpers/_bubbles.scss */
+  /* line 119, ../../../../general/res/sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-down {
     margin-bottom: 10px; }
-    /* line 121, ../sass/helpers/_bubbles.scss */
+    /* line 121, ../../../../general/res/sass/helpers/_bubbles.scss */
     .l-infobubble-wrapper.arw-down .l-infobubble::before {
       left: 50%;
       top: 100%;
@@ -918,21 +850,21 @@ mct-container {
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
       border-top: 7.5px solid #ddd; }
-  /* line 130, ../sass/helpers/_bubbles.scss */
+  /* line 130, ../../../../general/res/sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper .arw {
     z-index: 2; }
-  /* line 133, ../sass/helpers/_bubbles.scss */
+  /* line 133, ../../../../general/res/sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-up .arw.arw-down, .l-infobubble-wrapper.arw-down .arw.arw-up {
     display: none; }
 
-/* line 142, ../sass/helpers/_bubbles.scss */
+/* line 142, ../../../../general/res/sass/helpers/_bubbles.scss */
 .l-thumbsbubble-wrapper .arw-up {
   width: 0;
   height: 0;
   border-left: 6.66667px solid transparent;
   border-right: 6.66667px solid transparent;
   border-bottom: 10px solid #4d4d4d; }
-/* line 145, ../sass/helpers/_bubbles.scss */
+/* line 145, ../../../../general/res/sass/helpers/_bubbles.scss */
 .l-thumbsbubble-wrapper .arw-down {
   width: 0;
   height: 0;
@@ -940,7 +872,7 @@ mct-container {
   border-right: 6.66667px solid transparent;
   border-top: 10px solid #4d4d4d; }
 
-/* line 150, ../sass/helpers/_bubbles.scss */
+/* line 150, ../../../../general/res/sass/helpers/_bubbles.scss */
 .s-infobubble {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -951,29 +883,29 @@ mct-container {
   background: #ddd;
   color: #666;
   font-size: 0.8rem; }
-  /* line 157, ../sass/helpers/_bubbles.scss */
+  /* line 157, ../../../../general/res/sass/helpers/_bubbles.scss */
   .s-infobubble .title {
     color: #333333;
     font-weight: bold; }
-  /* line 163, ../sass/helpers/_bubbles.scss */
+  /* line 163, ../../../../general/res/sass/helpers/_bubbles.scss */
   .s-infobubble table tr td {
     border: none;
     border-top: 1px solid #c4c4c4 !important;
     font-size: 0.9em; }
-  /* line 169, ../sass/helpers/_bubbles.scss */
+  /* line 169, ../../../../general/res/sass/helpers/_bubbles.scss */
   .s-infobubble table tr:first-child td {
     border-top: none !important; }
-  /* line 174, ../sass/helpers/_bubbles.scss */
+  /* line 174, ../../../../general/res/sass/helpers/_bubbles.scss */
   .s-infobubble:first-child td {
     border-top: none; }
-  /* line 178, ../sass/helpers/_bubbles.scss */
+  /* line 178, ../../../../general/res/sass/helpers/_bubbles.scss */
   .s-infobubble .label {
     color: gray; }
-  /* line 182, ../sass/helpers/_bubbles.scss */
+  /* line 182, ../../../../general/res/sass/helpers/_bubbles.scss */
   .s-infobubble .value {
     color: #333333; }
 
-/* line 188, ../sass/helpers/_bubbles.scss */
+/* line 188, ../../../../general/res/sass/helpers/_bubbles.scss */
 .s-thumbsbubble {
   background: #4d4d4d;
   color: #b3b3b3; }
@@ -999,7 +931,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 29, ../sass/helpers/_splitter.scss */
+/* line 29, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout .splitter {
   background-color: #404040;
   -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
@@ -1008,27 +940,27 @@ mct-container {
   overflow: hidden;
   position: absolute;
   z-index: 1; }
-/* line 36, ../sass/helpers/_splitter.scss */
+/* line 36, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.horizontal {
   overflow: hidden; }
-  /* line 39, ../sass/helpers/_splitter.scss */
+  /* line 39, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.horizontal .pane {
     left: 0;
     right: 0; }
-    /* line 42, ../sass/helpers/_splitter.scss */
+    /* line 42, ../../../../general/res/sass/helpers/_splitter.scss */
     .split-layout.horizontal .pane.top {
       bottom: auto; }
-    /* line 46, ../sass/helpers/_splitter.scss */
+    /* line 46, ../../../../general/res/sass/helpers/_splitter.scss */
     .split-layout.horizontal .pane.bottom {
       top: auto; }
-  /* line 51, ../sass/helpers/_splitter.scss */
+  /* line 51, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.horizontal > .splitter {
     cursor: row-resize;
     left: 0;
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 185, ../sass/_mixins.scss */
+    /* line 185, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -1052,7 +984,7 @@ mct-container {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 207, ../sass/_mixins.scss */
+    /* line 207, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -1067,22 +999,22 @@ mct-container {
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       border-color: #0099cc; }
-/* line 63, ../sass/helpers/_splitter.scss */
+/* line 63, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.vertical .pane {
   top: 0;
   bottom: 0; }
-  /* line 66, ../sass/helpers/_splitter.scss */
+  /* line 66, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.vertical .pane.left {
     right: auto; }
-  /* line 70, ../sass/helpers/_splitter.scss */
+  /* line 70, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.vertical .pane.right {
     left: auto; }
-/* line 75, ../sass/helpers/_splitter.scss */
+/* line 75, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.vertical > .splitter {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 185, ../sass/_mixins.scss */
+  /* line 185, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1106,7 +1038,7 @@ mct-container {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 207, ../sass/_mixins.scss */
+  /* line 207, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1122,11 +1054,11 @@ mct-container {
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
 
-/* line 86, ../sass/helpers/_splitter.scss */
+/* line 86, ../../../../general/res/sass/helpers/_splitter.scss */
 .browse-area .splitter {
   top: 34px; }
 
-/* line 90, ../sass/helpers/_splitter.scss */
+/* line 90, ../../../../general/res/sass/helpers/_splitter.scss */
 .edit-area .splitter {
   top: 0; }
 
@@ -1171,7 +1103,7 @@ mct-container {
     transform: rotate(0deg); }
   to {
     transform: rotate(359deg); } }
-/* line 42, ../sass/helpers/_wait-spinner.scss */
+/* line 42, ../../../../general/res/sass/helpers/_wait-spinner.scss */
 .t-wait-spinner,
 .wait-spinner {
   display: block;
@@ -1194,7 +1126,7 @@ mct-container {
   margin-top: -5%;
   margin-left: -5%;
   z-index: 2; }
-  /* line 53, ../sass/helpers/_wait-spinner.scss */
+  /* line 53, ../../../../general/res/sass/helpers/_wait-spinner.scss */
   .t-wait-spinner.inline,
   .wait-spinner.inline {
     display: inline-block !important;
@@ -1202,26 +1134,26 @@ mct-container {
     position: relative !important;
     vertical-align: middle; }
 
-/* line 61, ../sass/helpers/_wait-spinner.scss */
+/* line 61, ../../../../general/res/sass/helpers/_wait-spinner.scss */
 .l-wait-spinner-holder {
   pointer-events: none;
   position: absolute; }
-  /* line 65, ../sass/helpers/_wait-spinner.scss */
+  /* line 65, ../../../../general/res/sass/helpers/_wait-spinner.scss */
   .l-wait-spinner-holder.align-left .t-wait-spinner {
     left: 0;
     margin-left: 0; }
-  /* line 70, ../sass/helpers/_wait-spinner.scss */
+  /* line 70, ../../../../general/res/sass/helpers/_wait-spinner.scss */
   .l-wait-spinner-holder.full-size {
     display: inline-block;
     height: 100%;
     width: 100%; }
-    /* line 73, ../sass/helpers/_wait-spinner.scss */
+    /* line 73, ../../../../general/res/sass/helpers/_wait-spinner.scss */
     .l-wait-spinner-holder.full-size .t-wait-spinner {
       top: 0;
       margin-top: 0;
       padding: 30%; }
 
-/* line 82, ../sass/helpers/_wait-spinner.scss */
+/* line 82, ../../../../general/res/sass/helpers/_wait-spinner.scss */
 .treeview .wait-spinner {
   display: block;
   position: absolute;
@@ -1241,7 +1173,7 @@ mct-container {
   top: 2px;
   left: 0; }
 
-/* line 91, ../sass/helpers/_wait-spinner.scss */
+/* line 91, ../../../../general/res/sass/helpers/_wait-spinner.scss */
 .wait-spinner.sm {
   display: block;
   position: absolute;
@@ -1263,13 +1195,13 @@ mct-container {
   left: 0; }
 
 /* Styles for messages */
-/* line 4, ../sass/_messages.scss */
+/* line 4, ../../../../general/res/sass/_messages.scss */
 .message.block {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   padding: 10px; }
-/* line 8, ../sass/_messages.scss */
+/* line 8, ../../../../general/res/sass/_messages.scss */
 .message.error {
   background-color: rgba(255, 60, 0, 0.3);
   color: #ff8a66; }
@@ -1296,25 +1228,25 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* Classes to be used for lists of properties and values */
-/* line 25, ../sass/_properties.scss */
+/* line 25, ../../../../general/res/sass/_properties.scss */
 .properties .s-row {
   border-top: 1px solid #4d4d4d;
   font-size: 0.8em; }
-  /* line 28, ../sass/_properties.scss */
+  /* line 28, ../../../../general/res/sass/_properties.scss */
   .properties .s-row:first-child {
     border: none; }
-  /* line 31, ../sass/_properties.scss */
+  /* line 31, ../../../../general/res/sass/_properties.scss */
   .properties .s-row .s-value {
     color: #fff; }
 
 /********************************* CONTROLS */
-/* line 1, ../sass/controls/_breadcrumb.scss */
+/* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */
 .l-breadcrumb {
   font-size: 0.7rem;
   line-height: 1em;
   margin-bottom: 5px;
   margin-left: -4px; }
-  /* line 10, ../sass/controls/_breadcrumb.scss */
+  /* line 10, ../../../../general/res/sass/controls/_breadcrumb.scss */
   .l-breadcrumb .l-breadcrumb-item a {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -1329,15 +1261,15 @@ mct-container {
     color: #737373;
     display: inline-block;
     padding: 2px 4px; }
-    /* line 18, ../sass/controls/_breadcrumb.scss */
+    /* line 18, ../../../../general/res/sass/controls/_breadcrumb.scss */
     .l-breadcrumb .l-breadcrumb-item a .icon {
       color: #0099cc;
       margin-right: 5px; }
-    /* line 22, ../sass/controls/_breadcrumb.scss */
+    /* line 22, ../../../../general/res/sass/controls/_breadcrumb.scss */
     .l-breadcrumb .l-breadcrumb-item a:hover {
       background: #4d4d4d;
       color: #b3b3b3; }
-      /* line 25, ../sass/controls/_breadcrumb.scss */
+      /* line 25, ../../../../general/res/sass/controls/_breadcrumb.scss */
       .l-breadcrumb .l-breadcrumb-item a:hover .icon {
         color: #33ccff; }
 
@@ -1397,15 +1329,11 @@ mct-container {
 	}
 }*/
 /*********************************** STYLE STYLES */
-/* line 61, ../sass/controls/_buttons.scss */
+/* line 61, ../../../../general/res/sass/controls/_buttons.scss */
 .s-btn, .s-menu {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
   -moz-user-select: -moz-none;
   -ms-user-select: none;
   -webkit-user-select: none;
@@ -1416,21 +1344,24 @@ mct-container {
   line-height: 25px;
   padding: 0 7.5px;
   font-size: 0.7rem; }
-  /* line 75, ../sass/controls/_buttons.scss */
+  /* line 71, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn .icon, .s-menu .icon {
     font-size: 0.8rem;
     color: #0099cc; }
-  /* line 80, ../sass/controls/_buttons.scss */
+  /* line 76, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn .title-label, .s-menu .title-label {
     vertical-align: top; }
-  /* line 84, ../sass/controls/_buttons.scss */
+  /* line 80, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.sm, .sm.s-menu {
     padding: 0 5px; }
-  /* line 87, ../sass/controls/_buttons.scss */
+  /* line 83, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.vsm, .vsm.s-menu {
     padding: 0 2.5px; }
-  /* line 91, ../sass/controls/_buttons.scss */
+  /* line 87, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn:not(.major), .s-menu:not(.major) {
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
@@ -1448,8 +1379,9 @@ mct-container {
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border: none;
     color: #999;
-    display: inline-block; }
-    /* line 167, ../sass/_mixins.scss */
+    display: inline-block;
+    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
+    /* line 167, ../../../../general/res/sass/_mixins.scss */
     .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -1457,21 +1389,24 @@ mct-container {
       background-image: -moz-linear-gradient(#636363, #575757);
       background-image: -webkit-linear-gradient(#636363, #575757);
       background-image: linear-gradient(#636363, #575757);
-      color: #bdbdbd; }
-    /* line 216, ../sass/_mixins.scss */
+      color: #ababab; }
+    /* line 218, ../../../../general/res/sass/_mixins.scss */
     .s-btn:not(.major) .icon, .s-menu:not(.major) .icon {
       color: #0099cc; }
-    /* line 222, ../sass/_mixins.scss */
+    /* line 224, ../../../../general/res/sass/_mixins.scss */
     .s-btn:not(.major):not(.disabled):not(.paused):hover .icon, .s-menu:not(.major):not(.disabled):not(.paused):hover .icon {
       color: #33ccff; }
-  /* line 95, ../sass/controls/_buttons.scss */
+  /* line 91, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.major, .major.s-menu, .overlay .bottom-bar .s-btn.major, .overlay .bottom-bar .major.s-menu {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0ac2ff), color-stop(100%, #00b4f0));
-    background-image: -moz-linear-gradient(#0ac2ff, #00b4f0);
-    background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
-    background-image: linear-gradient(#0ac2ff, #00b4f0);
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00ace6), color-stop(100%, #0099cc));
+    background-image: -moz-linear-gradient(#00ace6, #0099cc);
+    background-image: -webkit-linear-gradient(#00ace6, #0099cc);
+    background-image: linear-gradient(#00ace6, #0099cc);
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -1483,30 +1418,34 @@ mct-container {
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border: none;
     color: white;
-    display: inline-block; }
-    /* line 167, ../sass/_mixins.scss */
+    display: inline-block;
+    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
+    /* line 167, ../../../../general/res/sass/_mixins.scss */
     .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .overlay .bottom-bar .s-btn.major:not(.disabled):hover, .overlay .bottom-bar .major.s-menu:not(.disabled):hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ecbff), color-stop(100%, #14c4ff));
-      background-image: -moz-linear-gradient(#2ecbff, #14c4ff);
-      background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
-      background-image: linear-gradient(#2ecbff, #14c4ff);
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0ac2ff), color-stop(100%, #00b4f0));
+      background-image: -moz-linear-gradient(#0ac2ff, #00b4f0);
+      background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
+      background-image: linear-gradient(#0ac2ff, #00b4f0);
       color: white; }
-    /* line 216, ../sass/_mixins.scss */
+    /* line 218, ../../../../general/res/sass/_mixins.scss */
     .s-btn.major .icon, .major.s-menu .icon, .overlay .bottom-bar .s-btn.major .icon, .overlay .bottom-bar .major.s-menu .icon {
       color: white; }
-    /* line 222, ../sass/_mixins.scss */
+    /* line 224, ../../../../general/res/sass/_mixins.scss */
     .s-btn.major:not(.disabled):not(.paused):hover .icon, .major.s-menu:not(.disabled):not(.paused):hover .icon {
       color: white; }
-  /* line 101, ../sass/controls/_buttons.scss */
+  /* line 97, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.paused, .paused.s-menu {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlOTEwNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5ODMwMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RlN2QwMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M1NmYwMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fe9105), color-stop(100%, #e98301));
-    background-image: -moz-linear-gradient(#fe9105, #e98301);
-    background-image: -webkit-linear-gradient(#fe9105, #e98301);
-    background-image: linear-gradient(#fe9105, #e98301);
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #de7d01), color-stop(100%, #c56f01));
+    background-image: -moz-linear-gradient(#de7d01, #c56f01);
+    background-image: -webkit-linear-gradient(#de7d01, #c56f01);
+    background-image: linear-gradient(#de7d01, #c56f01);
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -1518,26 +1457,27 @@ mct-container {
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border: none;
     color: #fff;
-    display: inline-block; }
-    /* line 167, ../sass/_mixins.scss */
+    display: inline-block;
+    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
+    /* line 167, ../../../../general/res/sass/_mixins.scss */
     .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlYTAyOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZlOTUxMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlOTEwNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5ODMwMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fea029), color-stop(100%, #fe9510));
-      background-image: -moz-linear-gradient(#fea029, #fe9510);
-      background-image: -webkit-linear-gradient(#fea029, #fe9510);
-      background-image: linear-gradient(#fea029, #fe9510);
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fe9105), color-stop(100%, #e98301));
+      background-image: -moz-linear-gradient(#fe9105, #e98301);
+      background-image: -webkit-linear-gradient(#fe9105, #e98301);
+      background-image: linear-gradient(#fe9105, #e98301);
       color: white; }
-    /* line 216, ../sass/_mixins.scss */
+    /* line 218, ../../../../general/res/sass/_mixins.scss */
     .s-btn.paused .icon, .paused.s-menu .icon {
       color: #fff; }
-    /* line 222, ../sass/_mixins.scss */
+    /* line 224, ../../../../general/res/sass/_mixins.scss */
     .s-btn.paused:not(.disabled):not(.paused):hover .icon, .paused.s-menu:not(.disabled):not(.paused):hover .icon {
       color: white; }
-    /* line 103, ../sass/controls/_buttons.scss */
+    /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
     .s-btn.paused .icon:before, .paused.s-menu .icon:before {
       content: "\0000EF"; }
-  /* line 108, ../sass/controls/_buttons.scss */
+  /* line 104, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.pause-play, .pause-play.s-menu {
     /*
     	&.paused {
@@ -1546,23 +1486,23 @@ mct-container {
     		}
     	}
     */ }
-    /* line 116, ../sass/controls/_buttons.scss */
+    /* line 112, ../../../../general/res/sass/controls/_buttons.scss */
     .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before {
       content: "\0000F1"; }
-  /* line 122, ../sass/controls/_buttons.scss */
+  /* line 118, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before {
     content: "\000039"; }
 
-/* line 128, ../sass/controls/_buttons.scss */
+/* line 124, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
-  /* line 134, ../sass/controls/_buttons.scss */
+  /* line 130, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .s-btn, .l-btn-set .s-menu {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
-  /* line 140, ../sass/controls/_buttons.scss */
+  /* line 136, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .first .s-btn, .l-btn-set .first .s-menu {
     -moz-border-radius-topleft: 3px;
     -webkit-border-top-left-radius: 3px;
@@ -1571,7 +1511,7 @@ mct-container {
     -webkit-border-bottom-left-radius: 3px;
     border-bottom-left-radius: 3px;
     margin-left: 0; }
-  /* line 147, ../sass/controls/_buttons.scss */
+  /* line 143, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .last .s-btn, .l-btn-set .last .s-menu {
     -moz-border-radius-topright: 3px;
     -webkit-border-top-right-radius: 3px;
@@ -1613,19 +1553,19 @@ a.s-btn span {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/controls/_color-palette.scss */
+/* line 22, ../../../../general/res/sass/controls/_color-palette.scss */
 .l-color-palette {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   padding: 5px !important; }
-  /* line 31, ../sass/controls/_color-palette.scss */
+  /* line 31, ../../../../general/res/sass/controls/_color-palette.scss */
   .l-color-palette .l-palette-row {
     overflow: hidden;
     *zoom: 1;
     line-height: 16px;
     width: 170px; }
-    /* line 36, ../sass/controls/_color-palette.scss */
+    /* line 36, ../../../../general/res/sass/controls/_color-palette.scss */
     .l-color-palette .l-palette-row .l-palette-item {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
@@ -1654,20 +1594,20 @@ a.s-btn span {
       margin: 0 1px 1px 0;
       text-align: center;
       vertical-align: middle; }
-    /* line 53, ../sass/controls/_color-palette.scss */
+    /* line 53, ../../../../general/res/sass/controls/_color-palette.scss */
     .l-color-palette .l-palette-row .s-palette-item:hover {
       -moz-transition-property: none;
       -o-transition-property: none;
       -webkit-transition-property: none;
       transition-property: none;
       border-color: #fff !important; }
-    /* line 59, ../sass/controls/_color-palette.scss */
+    /* line 59, ../../../../general/res/sass/controls/_color-palette.scss */
     .l-color-palette .l-palette-row .l-palette-item-label {
       margin-left: 5px; }
-    /* line 63, ../sass/controls/_color-palette.scss */
+    /* line 63, ../../../../general/res/sass/controls/_color-palette.scss */
     .l-color-palette .l-palette-row.l-option-row {
       margin-bottom: 5px; }
-      /* line 65, ../sass/controls/_color-palette.scss */
+      /* line 65, ../../../../general/res/sass/controls/_color-palette.scss */
       .l-color-palette .l-palette-row.l-option-row .s-palette-item {
         border-color: #999; }
 
@@ -1720,13 +1660,13 @@ a.s-btn span {
 		}
 	}
 }*/
-/* line 51, ../sass/controls/_controls.scss */
+/* line 51, ../../../../general/res/sass/controls/_controls.scss */
 .accordion {
   margin-top: 5px; }
-  /* line 54, ../sass/controls/_controls.scss */
+  /* line 54, ../../../../general/res/sass/controls/_controls.scss */
   .accordion:first-child {
     margin-top: 0; }
-  /* line 57, ../sass/controls/_controls.scss */
+  /* line 57, ../../../../general/res/sass/controls/_controls.scss */
   .accordion .accordion-head {
     -moz-border-radius: 1.5px;
     -webkit-border-radius: 1.5px;
@@ -1748,10 +1688,10 @@ a.s-btn span {
     width: auto;
     height: 18px;
     text-transform: uppercase; }
-    /* line 75, ../sass/controls/_controls.scss */
+    /* line 75, ../../../../general/res/sass/controls/_controls.scss */
     .accordion .accordion-head:hover {
       background: rgba(153, 153, 153, 0.4); }
-    /* line 78, ../sass/controls/_controls.scss */
+    /* line 78, ../../../../general/res/sass/controls/_controls.scss */
     .accordion .accordion-head:after {
       content: "^";
       display: block;
@@ -1761,10 +1701,10 @@ a.s-btn span {
       right: 5px;
       text-transform: none;
       top: 0; }
-    /* line 88, ../sass/controls/_controls.scss */
+    /* line 88, ../../../../general/res/sass/controls/_controls.scss */
     .accordion .accordion-head:not(.expanded):after {
       content: "v"; }
-  /* line 92, ../sass/controls/_controls.scss */
+  /* line 92, ../../../../general/res/sass/controls/_controls.scss */
   .accordion .accordion-contents {
     position: absolute;
     top: 23px;
@@ -1774,14 +1714,14 @@ a.s-btn span {
     overflow-y: auto;
     overflow-x: hidden; }
 
-/* line 103, ../sass/controls/_controls.scss */
+/* line 103, ../../../../general/res/sass/controls/_controls.scss */
 .l-composite-control {
   vertical-align: middle; }
-  /* line 106, ../sass/controls/_controls.scss */
+  /* line 106, ../../../../general/res/sass/controls/_controls.scss */
   .l-composite-control.l-checkbox .composite-control-label {
     line-height: 18px; }
 
-/* line 112, ../sass/controls/_controls.scss */
+/* line 112, ../../../../general/res/sass/controls/_controls.scss */
 .l-control-group {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -1790,23 +1730,23 @@ a.s-btn span {
   display: inline-block;
   padding: 0 5px;
   position: relative; }
-  /* line 120, ../sass/controls/_controls.scss */
+  /* line 120, ../../../../general/res/sass/controls/_controls.scss */
   .l-control-group:first-child {
     border-left: none;
     padding-left: 0; }
 
-/* line 126, ../sass/controls/_controls.scss */
+/* line 126, ../../../../general/res/sass/controls/_controls.scss */
 .l-local-controls {
   position: absolute;
   top: 5px;
   right: 5px;
   z-index: 5; }
 
-/* line 136, ../sass/controls/_controls.scss */
+/* line 136, ../../../../general/res/sass/controls/_controls.scss */
 .s-local-controls {
   font-size: 0.7rem; }
 
-/* line 140, ../sass/controls/_controls.scss */
+/* line 140, ../../../../general/res/sass/controls/_controls.scss */
 label.checkbox.custom {
   cursor: pointer;
   display: inline-block;
@@ -1815,13 +1755,13 @@ label.checkbox.custom {
   padding-left: 19px;
   position: relative;
   vertical-align: middle; }
-  /* line 150, ../sass/controls/_controls.scss */
+  /* line 150, ../../../../general/res/sass/controls/_controls.scss */
   label.checkbox.custom em {
     color: #999;
     display: inline-block;
     height: 14px;
     min-width: 14px; }
-    /* line 155, ../sass/controls/_controls.scss */
+    /* line 155, ../../../../general/res/sass/controls/_controls.scss */
     label.checkbox.custom em:before {
       -moz-border-radius: 1.5px;
       -webkit-border-radius: 1.5px;
@@ -1840,58 +1780,58 @@ label.checkbox.custom {
       top: 0;
       position: absolute;
       text-align: center; }
-  /* line 173, ../sass/controls/_controls.scss */
+  /* line 173, ../../../../general/res/sass/controls/_controls.scss */
   label.checkbox.custom.no-text {
     overflow: hidden;
     margin-right: 0;
     padding-left: 0;
     height: 14px;
     width: 14px; }
-    /* line 179, ../sass/controls/_controls.scss */
+    /* line 179, ../../../../general/res/sass/controls/_controls.scss */
     label.checkbox.custom.no-text em {
       overflow: hidden; }
-  /* line 183, ../sass/controls/_controls.scss */
+  /* line 183, ../../../../general/res/sass/controls/_controls.scss */
   label.checkbox.custom input {
     display: none; }
-    /* line 185, ../sass/controls/_controls.scss */
+    /* line 185, ../../../../general/res/sass/controls/_controls.scss */
     label.checkbox.custom input:checked ~ em:before {
       background: #0099cc;
       color: #ccf2ff;
       content: "2"; }
 
-/* line 193, ../sass/controls/_controls.scss */
+/* line 193, ../../../../general/res/sass/controls/_controls.scss */
 .input-labeled {
   margin-left: 5px; }
-  /* line 195, ../sass/controls/_controls.scss */
+  /* line 195, ../../../../general/res/sass/controls/_controls.scss */
   .input-labeled label {
     display: inline-block;
     margin-right: 3px; }
-  /* line 199, ../sass/controls/_controls.scss */
+  /* line 199, ../../../../general/res/sass/controls/_controls.scss */
   .input-labeled.inline {
     display: inline-block; }
-  /* line 202, ../sass/controls/_controls.scss */
+  /* line 202, ../../../../general/res/sass/controls/_controls.scss */
   .input-labeled:first-child {
     margin-left: 0; }
 
-/* line 207, ../sass/controls/_controls.scss */
+/* line 207, ../../../../general/res/sass/controls/_controls.scss */
 .s-menu label.checkbox.custom {
   margin-left: 5px; }
 
-/* line 212, ../sass/controls/_controls.scss */
+/* line 212, ../../../../general/res/sass/controls/_controls.scss */
 .item .checkbox.checked label {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   border-bottom: none; }
 
-/* line 218, ../sass/controls/_controls.scss */
+/* line 218, ../../../../general/res/sass/controls/_controls.scss */
 .context-available {
   color: #0099cc; }
-  /* line 221, ../sass/controls/_controls.scss */
+  /* line 221, ../../../../general/res/sass/controls/_controls.scss */
   .context-available:hover {
     color: deepskyblue; }
 
-/* line 226, ../sass/controls/_controls.scss */
+/* line 226, ../../../../general/res/sass/controls/_controls.scss */
 .view-switcher {
   -moz-transition-property: visibility, opacity, background-color, border-color;
   -o-transition-property: visibility, opacity, background-color, border-color;
@@ -1907,25 +1847,25 @@ label.checkbox.custom {
   transition-timing-function: ease-in-out; }
 
 /******************************************************** OBJECT-HEADER */
-/* line 231, ../sass/controls/_controls.scss */
+/* line 231, ../../../../general/res/sass/controls/_controls.scss */
 .object-header {
   font-size: 1em; }
-  /* line 242, ../sass/controls/_controls.scss */
+  /* line 242, ../../../../general/res/sass/controls/_controls.scss */
   .object-header > .type-icon {
     font-size: 120%;
     float: left;
     margin-right: 5px; }
-  /* line 248, ../sass/controls/_controls.scss */
+  /* line 248, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .l-elem-wrapper {
     justify-content: flex-start;
     -webkit-justify-content: flex-start; }
-    /* line 251, ../sass/controls/_controls.scss */
+    /* line 251, ../../../../general/res/sass/controls/_controls.scss */
     .object-header .l-elem-wrapper mct-representation {
       min-width: 0.7em; }
-  /* line 259, ../sass/controls/_controls.scss */
+  /* line 259, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .action {
     margin-right: 5px; }
-  /* line 263, ../sass/controls/_controls.scss */
+  /* line 263, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .title-label {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1934,13 +1874,13 @@ label.checkbox.custom {
     flex: 0 1 auto;
     -webkit-flex: 0 1 auto;
     padding-right: 0.35em; }
-  /* line 272, ../sass/controls/_controls.scss */
+  /* line 272, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .context-available {
     font-size: 0.7em;
     flex: 0 0 1;
     -webkit-flex: 0 0 1; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 279, ../sass/controls/_controls.scss */
+    /* line 279, ../../../../general/res/sass/controls/_controls.scss */
     .object-header .context-available {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -1955,12 +1895,12 @@ label.checkbox.custom {
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       opacity: 0; }
-    /* line 284, ../sass/controls/_controls.scss */
+    /* line 284, ../../../../general/res/sass/controls/_controls.scss */
     .object-header:hover .context-available {
       opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 297, ../sass/controls/_controls.scss */
+/* line 297, ../../../../general/res/sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -1981,14 +1921,17 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 308, ../sass/controls/_controls.scss */
+/* line 308, ../../../../general/res/sass/controls/_controls.scss */
 .slider .knob {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
-  background-image: -moz-linear-gradient(#525252, #454545);
-  background-image: -webkit-linear-gradient(#525252, #454545);
-  background-image: linear-gradient(#525252, #454545);
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #333333));
+  background-image: -moz-linear-gradient(#404040, #333333);
+  background-image: -webkit-linear-gradient(#404040, #333333);
+  background-image: linear-gradient(#404040, #333333);
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -2001,6 +1944,7 @@ label.checkbox.custom {
   border: none;
   color: #999;
   display: inline-block;
+  text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
   cursor: ew-resize;
   position: absolute;
   height: 100%;
@@ -2009,22 +1953,22 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 167, ../sass/_mixins.scss */
+  /* line 167, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:not(.disabled):hover {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #636363), color-stop(100%, #575757));
-    background-image: -moz-linear-gradient(#636363, #575757);
-    background-image: -webkit-linear-gradient(#636363, #575757);
-    background-image: linear-gradient(#636363, #575757);
-    color: #bdbdbd; }
-  /* line 216, ../sass/_mixins.scss */
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
+    background-image: -moz-linear-gradient(#525252, #454545);
+    background-image: -webkit-linear-gradient(#525252, #454545);
+    background-image: linear-gradient(#525252, #454545);
+    color: #ababab; }
+  /* line 218, ../../../../general/res/sass/_mixins.scss */
   .slider .knob .icon {
     color: #0099cc; }
-  /* line 222, ../sass/_mixins.scss */
+  /* line 224, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:not(.disabled):not(.paused):hover .icon {
     color: #33ccff; }
-  /* line 185, ../sass/_mixins.scss */
+  /* line 185, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2048,7 +1992,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 207, ../sass/_mixins.scss */
+  /* line 207, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2063,12 +2007,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 319, ../sass/controls/_controls.scss */
+  /* line 319, ../../../../general/res/sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 326, ../sass/controls/_controls.scss */
+/* line 326, ../../../../general/res/sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2079,13 +2023,13 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 336, ../sass/controls/_controls.scss */
+  /* line 336, ../../../../general/res/sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 345, ../sass/controls/_controls.scss */
+  /* line 345, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2102,7 +2046,7 @@ label.checkbox.custom {
     height: 10px;
     width: 10px; }
 
-  /* line 351, ../sass/controls/_controls.scss */
+  /* line 351, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2120,7 +2064,7 @@ label.checkbox.custom {
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border-top: 1px solid gray; }
-    /* line 358, ../sass/controls/_controls.scss */
+    /* line 358, ../../../../general/res/sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -2129,7 +2073,7 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#808080, #737373 20px);
       background-image: linear-gradient(#808080, #737373 20px); }
 
-  /* line 363, ../sass/controls/_controls.scss */
+  /* line 363, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
@@ -2153,15 +2097,15 @@ label.checkbox.custom {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 23, ../sass/controls/_lists.scss */
+/* line 23, ../../../../general/res/sass/controls/_lists.scss */
 .checkbox-list label.checkbox.custom {
   display: block;
   margin-bottom: 5px; }
-/* line 27, ../sass/controls/_lists.scss */
+/* line 27, ../../../../general/res/sass/controls/_lists.scss */
 .checkbox-list li {
   margin-bottom: 5px; }
 
-/* line 35, ../sass/controls/_lists.scss */
+/* line 35, ../../../../general/res/sass/controls/_lists.scss */
 .l-tree-item-flat-list .tree-item .label {
   left: 5px !important; }
 
@@ -2187,13 +2131,13 @@ label.checkbox.custom {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /******************************************************** MENU BUTTONS */
-/* line 31, ../sass/controls/_menus.scss */
+/* line 31, ../../../../general/res/sass/controls/_menus.scss */
 .s-menu .icon {
   font-size: 120%; }
-/* line 35, ../sass/controls/_menus.scss */
+/* line 35, ../../../../general/res/sass/controls/_menus.scss */
 .s-menu .title-label {
   margin-left: 3px; }
-/* line 39, ../sass/controls/_menus.scss */
+/* line 39, ../../../../general/res/sass/controls/_menus.scss */
 .s-menu:after {
   color: rgba(255, 255, 255, 0.2);
   content: '\76';
@@ -2202,36 +2146,36 @@ label.checkbox.custom {
   margin-left: 3px;
   text-shadow: none;
   vertical-align: top; }
-/* line 50, ../sass/controls/_menus.scss */
+/* line 50, ../../../../general/res/sass/controls/_menus.scss */
 .s-menu.create-btn .title-label {
   font-size: 1rem; }
-/* line 53, ../sass/controls/_menus.scss */
+/* line 53, ../../../../general/res/sass/controls/_menus.scss */
 .s-menu.create-btn:after {
   color: rgba(255, 255, 255, 0.5); }
-/* line 58, ../sass/controls/_menus.scss */
+/* line 58, ../../../../general/res/sass/controls/_menus.scss */
 .s-menu .menu {
   left: 0;
   text-align: left; }
-  /* line 61, ../sass/controls/_menus.scss */
+  /* line 61, ../../../../general/res/sass/controls/_menus.scss */
   .s-menu .menu .ui-symbol.icon {
     width: 12px; }
 
 /******************************************************** MENUS THEMSELVES */
-/* line 68, ../sass/controls/_menus.scss */
+/* line 68, ../../../../general/res/sass/controls/_menus.scss */
 .menu-element {
   cursor: pointer;
   position: relative; }
-  /* line 74, ../sass/controls/_menus.scss */
+  /* line 74, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .menu {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5e5e5e), color-stop(100%, #525252));
-    background-image: -moz-linear-gradient(#5e5e5e, #525252);
-    background-image: -webkit-linear-gradient(#5e5e5e, #525252);
-    background-image: linear-gradient(#5e5e5e, #525252);
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
+    background-image: -moz-linear-gradient(#4d4d4d, #404040);
+    background-image: -webkit-linear-gradient(#4d4d4d, #404040);
+    background-image: linear-gradient(#4d4d4d, #404040);
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -2249,16 +2193,16 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 82, ../sass/controls/_menus.scss */
+    /* line 82, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 312, ../sass/_mixins.scss */
+      /* line 324, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
         padding: 0; }
-      /* line 84, ../sass/controls/_menus.scss */
+      /* line 84, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .menu ul li {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
@@ -2269,29 +2213,29 @@ label.checkbox.custom {
         padding: 3px 10px 3px 30px;
         position: relative;
         white-space: nowrap; }
-        /* line 92, ../sass/controls/_menus.scss */
+        /* line 92, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li:first-child {
           border: none; }
-        /* line 95, ../sass/controls/_menus.scss */
+        /* line 95, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li:hover {
           background: #737373;
           color: #fff; }
-          /* line 101, ../sass/controls/_menus.scss */
+          /* line 101, ../../../../general/res/sass/controls/_menus.scss */
           .menu-element .menu ul li:hover .icon {
             color: #33ccff; }
-        /* line 109, ../sass/controls/_menus.scss */
+        /* line 109, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li .type-icon {
           left: 10px; }
-  /* line 116, ../sass/controls/_menus.scss */
+  /* line 116, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .context-menu, .menu-element .checkbox-menu,
   .menu-element .super-menu {
     pointer-events: auto;
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOGM4YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhN2E3YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZlNmU2ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c8c8c), color-stop(100%, #808080));
-    background-image: -moz-linear-gradient(#8c8c8c, #808080);
-    background-image: -webkit-linear-gradient(#8c8c8c, #808080);
-    background-image: linear-gradient(#8c8c8c, #808080);
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7a7a7a), color-stop(100%, #6e6e6e));
+    background-image: -moz-linear-gradient(#7a7a7a, #6e6e6e);
+    background-image: -webkit-linear-gradient(#7a7a7a, #6e6e6e);
+    background-image: linear-gradient(#7a7a7a, #6e6e6e);
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -2304,53 +2248,53 @@ label.checkbox.custom {
     border: none;
     color: #999;
     display: inline-block; }
-    /* line 124, ../sass/controls/_menus.scss */
+    /* line 124, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .context-menu ul li, .menu-element .checkbox-menu ul li,
     .menu-element .super-menu ul li {
       padding-left: 25px; }
-      /* line 126, ../sass/controls/_menus.scss */
+      /* line 126, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .context-menu ul li a, .menu-element .checkbox-menu ul li a,
       .menu-element .super-menu ul li a {
         color: white; }
-      /* line 129, ../sass/controls/_menus.scss */
+      /* line 129, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .context-menu ul li .icon, .menu-element .checkbox-menu ul li .icon,
       .menu-element .super-menu ul li .icon {
         color: #24c8ff; }
-      /* line 132, ../sass/controls/_menus.scss */
+      /* line 132, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .context-menu ul li .type-icon, .menu-element .checkbox-menu ul li .type-icon,
       .menu-element .super-menu ul li .type-icon {
         left: 5px; }
-      /* line 135, ../sass/controls/_menus.scss */
+      /* line 135, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .context-menu ul li:hover .icon, .menu-element .checkbox-menu ul li:hover .icon,
       .menu-element .super-menu ul li:hover .icon {
         color: #3dcfff; }
-  /* line 144, ../sass/controls/_menus.scss */
+  /* line 144, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .checkbox-menu ul li {
     padding-left: 50px; }
-    /* line 146, ../sass/controls/_menus.scss */
+    /* line 146, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .checkbox {
       position: absolute;
       left: 5px;
       top: 0.53333rem; }
-      /* line 151, ../sass/controls/_menus.scss */
+      /* line 151, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .checkbox-menu ul li .checkbox em {
         height: 0.7rem;
         width: 0.7rem; }
-        /* line 154, ../sass/controls/_menus.scss */
+        /* line 154, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .checkbox-menu ul li .checkbox em:before {
           font-size: 7px !important;
           height: 0.7rem;
           width: 0.7rem;
           line-height: 0.7rem; }
-    /* line 162, ../sass/controls/_menus.scss */
+    /* line 162, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .type-icon {
       left: 25px; }
-  /* line 168, ../sass/controls/_menus.scss */
+  /* line 168, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .super-menu {
     display: block;
     width: 500px;
     height: 480px; }
-    /* line 178, ../sass/controls/_menus.scss */
+    /* line 178, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .contents {
       overflow: hidden;
       position: absolute;
@@ -2360,12 +2304,12 @@ label.checkbox.custom {
       left: 5px;
       width: auto;
       height: auto; }
-    /* line 181, ../sass/controls/_menus.scss */
+    /* line 181, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .pane {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box; }
-      /* line 183, ../sass/controls/_menus.scss */
+      /* line 183, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.left {
         border-right: 1px solid rgba(255, 255, 255, 0.2);
         left: 0;
@@ -2374,23 +2318,23 @@ label.checkbox.custom {
         width: 50%;
         overflow-x: hidden;
         overflow-y: auto; }
-        /* line 193, ../sass/controls/_menus.scss */
+        /* line 193, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .super-menu .pane.left ul li {
           -moz-border-radius: 3px;
           -webkit-border-radius: 3px;
           border-radius: 3px;
           padding-left: 30px;
           border-top: none; }
-      /* line 200, ../sass/controls/_menus.scss */
+      /* line 200, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.right {
         left: auto;
         right: 0;
         padding: 25px;
         width: 50%; }
-        /* line 206, ../sass/controls/_menus.scss */
+        /* line 206, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .super-menu .pane.right .icon {
           color: #fff; }
-    /* line 213, ../sass/controls/_menus.scss */
+    /* line 213, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.icon {
       position: relative;
       font-size: 8em;
@@ -2399,62 +2343,62 @@ label.checkbox.custom {
       line-height: 150px;
       margin-bottom: 25px;
       text-align: center; }
-    /* line 223, ../sass/controls/_menus.scss */
+    /* line 223, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.title {
       color: #fff;
       font-size: 1.2em;
       margin-bottom: 0.5em; }
-    /* line 228, ../sass/controls/_menus.scss */
+    /* line 228, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.description {
       color: #fff;
       font-size: 0.8em;
       line-height: 1.5em; }
-  /* line 237, ../sass/controls/_menus.scss */
+  /* line 237, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .context-menu, .menu-element .checkbox-menu {
     font-size: 0.80rem; }
 
-/* line 242, ../sass/controls/_menus.scss */
+/* line 242, ../../../../general/res/sass/controls/_menus.scss */
 .context-menu-holder {
   pointer-events: none;
   position: absolute;
   height: 200px;
   width: 170px;
   z-index: 70; }
-  /* line 248, ../sass/controls/_menus.scss */
+  /* line 248, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder .context-menu-wrapper {
     position: absolute;
     height: 100%;
     width: 100%; }
-  /* line 255, ../sass/controls/_menus.scss */
+  /* line 255, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
     right: 0; }
-  /* line 258, ../sass/controls/_menus.scss */
+  /* line 258, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
     bottom: 0; }
 
-/* line 263, ../sass/controls/_menus.scss */
+/* line 263, ../../../../general/res/sass/controls/_menus.scss */
 .btn-bar.right .menu,
 .menus-to-left .menu {
   left: auto;
   right: 0;
   width: auto; }
 
-/* line 1, ../sass/controls/_time-controller.scss */
+/* line 1, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller {
   position: relative;
   margin: 10px 0;
   min-width: 400px; }
-  /* line 12, ../sass/controls/_time-controller.scss */
+  /* line 12, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-inputs-holder,
   .l-time-controller .l-time-range-slider {
     font-size: 0.8em; }
-  /* line 17, ../sass/controls/_time-controller.scss */
+  /* line 17, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-inputs-holder,
   .l-time-controller .l-time-range-slider-holder,
   .l-time-controller .l-time-range-ticks-holder {
     margin-bottom: 5px;
     position: relative; }
-  /* line 24, ../sass/controls/_time-controller.scss */
+  /* line 24, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-slider,
   .l-time-controller .l-time-range-ticks {
     overflow: visible;
@@ -2465,18 +2409,18 @@ label.checkbox.custom {
     left: 0;
     width: auto;
     height: auto; }
-  /* line 30, ../sass/controls/_time-controller.scss */
+  /* line 30, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-inputs-holder {
     height: 20px; }
-  /* line 34, ../sass/controls/_time-controller.scss */
+  /* line 34, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-slider,
   .l-time-controller .l-time-range-ticks {
     left: 90px;
     right: 90px; }
-  /* line 40, ../sass/controls/_time-controller.scss */
+  /* line 40, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-slider-holder {
     height: 30px; }
-    /* line 42, ../sass/controls/_time-controller.scss */
+    /* line 42, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-slider-holder .range-holder {
       -moz-box-shadow: none;
       -webkit-box-shadow: none;
@@ -2484,22 +2428,22 @@ label.checkbox.custom {
       background: none;
       border: none;
       height: 75%; }
-  /* line 50, ../sass/controls/_time-controller.scss */
+  /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-ticks-holder {
     height: 10px; }
-    /* line 52, ../sass/controls/_time-controller.scss */
+    /* line 52, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
       border-top: 1px solid #4d4d4d; }
-      /* line 54, ../sass/controls/_time-controller.scss */
+      /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
         background-color: #4d4d4d;
         border: none;
         width: 1px;
         margin-left: -1px; }
-        /* line 59, ../sass/controls/_time-controller.scss */
+        /* line 59, ../../../../general/res/sass/controls/_time-controller.scss */
         .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
           margin-left: 0; }
-        /* line 62, ../sass/controls/_time-controller.scss */
+        /* line 62, ../../../../general/res/sass/controls/_time-controller.scss */
         .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
           color: gray;
           font-size: 0.7em;
@@ -2509,30 +2453,30 @@ label.checkbox.custom {
           top: 10px;
           width: 50px;
           z-index: 2; }
-  /* line 76, ../sass/controls/_time-controller.scss */
+  /* line 76, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob {
     width: 9px; }
-    /* line 78, ../sass/controls/_time-controller.scss */
+    /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob .range-value {
       position: absolute;
       top: 50%;
       margin-top: -7px;
       white-space: nowrap;
       width: 75px; }
-    /* line 87, ../sass/controls/_time-controller.scss */
+    /* line 87, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob:hover .range-value {
       color: #0099cc; }
-    /* line 90, ../sass/controls/_time-controller.scss */
+    /* line 90, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-l {
       margin-left: -4.5px; }
-      /* line 92, ../sass/controls/_time-controller.scss */
+      /* line 92, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .knob.knob-l .range-value {
         text-align: right;
         right: 14px; }
-    /* line 97, ../sass/controls/_time-controller.scss */
+    /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-r {
       margin-right: -4.5px; }
-      /* line 99, ../sass/controls/_time-controller.scss */
+      /* line 99, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .knob.knob-r .range-value {
         left: 14px; }
 
@@ -2558,16 +2502,16 @@ label.checkbox.custom {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 26, ../sass/mobile/controls/_menus.scss */
+  /* line 26, ../../../../general/res/sass/mobile/controls/_menus.scss */
   .menu-element .super-menu {
     width: 250px;
     height: 250px; }
-    /* line 32, ../sass/mobile/controls/_menus.scss */
+    /* line 32, ../../../../general/res/sass/mobile/controls/_menus.scss */
     .menu-element .super-menu .pane.left {
       border-right: none;
       padding-right: 0;
       width: 100%; }
-    /* line 37, ../sass/mobile/controls/_menus.scss */
+    /* line 37, ../../../../general/res/sass/mobile/controls/_menus.scss */
     .menu-element .super-menu .pane.right {
       display: none; } }
 /********************************* FORMS */
@@ -2592,7 +2536,7 @@ label.checkbox.custom {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/forms/_elems.scss */
+/* line 22, ../../../../general/res/sass/forms/_elems.scss */
 .section-header {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -2603,11 +2547,11 @@ label.checkbox.custom {
   padding: 5px 5px;
   text-transform: uppercase; }
 
-/* line 35, ../sass/forms/_elems.scss */
+/* line 35, ../../../../general/res/sass/forms/_elems.scss */
 .form .form-section {
   position: relative;
   margin-bottom: 20px; }
-/* line 40, ../sass/forms/_elems.scss */
+/* line 40, ../../../../general/res/sass/forms/_elems.scss */
 .form .form-row {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -2618,10 +2562,10 @@ label.checkbox.custom {
   margin-top: 5px;
   padding: 5px 0;
   position: relative; }
-  /* line 48, ../sass/forms/_elems.scss */
+  /* line 48, ../../../../general/res/sass/forms/_elems.scss */
   .form .form-row.first {
     border-top: none; }
-  /* line 52, ../sass/forms/_elems.scss */
+  /* line 52, ../../../../general/res/sass/forms/_elems.scss */
   .form .form-row > .label,
   .form .form-row > .controls {
     -moz-box-sizing: border-box;
@@ -2632,42 +2576,42 @@ label.checkbox.custom {
     font-size: 0.8rem;
     line-height: 22px;
     min-height: 22px; }
-  /* line 61, ../sass/forms/_elems.scss */
+  /* line 61, ../../../../general/res/sass/forms/_elems.scss */
   .form .form-row > .label {
     float: left;
     min-width: 120px;
     position: relative;
     white-space: nowrap;
     width: 30%; }
-  /* line 71, ../sass/forms/_elems.scss */
+  /* line 71, ../../../../general/res/sass/forms/_elems.scss */
   .form .form-row .value {
     color: #cccccc; }
-  /* line 75, ../sass/forms/_elems.scss */
+  /* line 75, ../../../../general/res/sass/forms/_elems.scss */
   .form .form-row .controls {
     float: left;
     position: relative;
     width: 69.9%; }
-    /* line 82, ../sass/forms/_elems.scss */
+    /* line 82, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .controls .l-composite-control.l-checkbox {
       display: inline-block;
       line-height: 14px;
       margin-right: 5px; }
-    /* line 91, ../sass/forms/_elems.scss */
+    /* line 91, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .controls .l-med input[type="text"] {
       width: 200px; }
-    /* line 95, ../sass/forms/_elems.scss */
+    /* line 95, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .controls .l-small input[type="text"] {
       width: 50px; }
-    /* line 99, ../sass/forms/_elems.scss */
+    /* line 99, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .controls .l-numeric input[type="text"] {
       text-align: right; }
-    /* line 103, ../sass/forms/_elems.scss */
+    /* line 103, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .controls .select {
       margin-right: 5px; }
-  /* line 108, ../sass/forms/_elems.scss */
+  /* line 108, ../../../../general/res/sass/forms/_elems.scss */
   .form .form-row .field-hints {
     color: #666666; }
-  /* line 112, ../sass/forms/_elems.scss */
+  /* line 112, ../../../../general/res/sass/forms/_elems.scss */
   .form .form-row .selector-list {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2680,7 +2624,7 @@ label.checkbox.custom {
     position: relative;
     height: 150px;
     overflow: auto; }
-    /* line 123, ../sass/forms/_elems.scss */
+    /* line 123, ../../../../general/res/sass/forms/_elems.scss */
     .form .form-row .selector-list .wrapper {
       overflow-y: auto;
       position: absolute;
@@ -2689,24 +2633,24 @@ label.checkbox.custom {
       bottom: 5px;
       left: 5px; }
 
-/* line 137, ../sass/forms/_elems.scss */
+/* line 137, ../../../../general/res/sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 143, ../sass/forms/_elems.scss */
+/* line 143, ../../../../general/res/sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 148, ../sass/forms/_elems.scss */
+/* line 148, ../../../../general/res/sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 155, ../sass/forms/_elems.scss */
+  /* line 155, ../../../../general/res/sass/forms/_elems.scss */
   .l-result div.s-hint {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2737,7 +2681,7 @@ label.form-control.checkbox input {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/forms/_textarea.scss */
+/* line 22, ../../../../general/res/sass/forms/_textarea.scss */
 .edit-main textarea {
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -2758,7 +2702,7 @@ label.form-control.checkbox input {
   position: absolute;
   height: 100%;
   width: 100%; }
-  /* line 33, ../sass/forms/_mixins.scss */
+  /* line 290, ../../../../general/res/sass/_mixins.scss */
   .edit-main textarea.error {
     background: rgba(255, 0, 0, 0.5); }
 
@@ -2783,7 +2727,7 @@ label.form-control.checkbox input {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/forms/_text-input.scss */
+/* line 22, ../../../../general/res/sass/forms/_text-input.scss */
 input[type="text"] {
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -2801,10 +2745,10 @@ input[type="text"] {
   color: #cccccc;
   outline: none;
   padding: 0 3px; }
-  /* line 33, ../sass/forms/_mixins.scss */
+  /* line 290, ../../../../general/res/sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
-  /* line 29, ../sass/forms/_text-input.scss */
+  /* line 29, ../../../../general/res/sass/forms/_text-input.scss */
   input[type="text"].numeric {
     text-align: right; }
 
@@ -2829,14 +2773,17 @@ input[type="text"] {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/forms/_selects.scss */
+/* line 22, ../../../../general/res/sass/forms/_selects.scss */
 .form-control.select {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
-  background-image: -moz-linear-gradient(#525252, #454545);
-  background-image: -webkit-linear-gradient(#525252, #454545);
-  background-image: linear-gradient(#525252, #454545);
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #333333));
+  background-image: -moz-linear-gradient(#404040, #333333);
+  background-image: -webkit-linear-gradient(#404040, #333333);
+  background-image: linear-gradient(#404040, #333333);
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -2849,27 +2796,28 @@ input[type="text"] {
   border: none;
   color: #999;
   display: inline-block;
+  text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
   cursor: pointer;
   display: inline-block;
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 167, ../sass/_mixins.scss */
+  /* line 167, ../../../../general/res/sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #636363), color-stop(100%, #575757));
-    background-image: -moz-linear-gradient(#636363, #575757);
-    background-image: -webkit-linear-gradient(#636363, #575757);
-    background-image: linear-gradient(#636363, #575757);
-    color: #bdbdbd; }
-  /* line 216, ../sass/_mixins.scss */
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
+    background-image: -moz-linear-gradient(#525252, #454545);
+    background-image: -webkit-linear-gradient(#525252, #454545);
+    background-image: linear-gradient(#525252, #454545);
+    color: #ababab; }
+  /* line 218, ../../../../general/res/sass/_mixins.scss */
   .form-control.select .icon {
     color: #0099cc; }
-  /* line 222, ../sass/_mixins.scss */
+  /* line 224, ../../../../general/res/sass/_mixins.scss */
   .form-control.select:not(.disabled):not(.paused):hover .icon {
     color: #33ccff; }
-  /* line 29, ../sass/forms/_selects.scss */
+  /* line 29, ../../../../general/res/sass/forms/_selects.scss */
   .form-control.select select {
     -moz-appearance: none;
     -webkit-appearance: none;
@@ -2882,10 +2830,10 @@ input[type="text"] {
     cursor: pointer;
     padding: 4px 25px 2px 5px;
     width: 120%; }
-    /* line 38, ../sass/forms/_selects.scss */
+    /* line 38, ../../../../general/res/sass/forms/_selects.scss */
     .form-control.select select option {
       margin: 5px 0; }
-  /* line 42, ../sass/forms/_selects.scss */
+  /* line 42, ../../../../general/res/sass/forms/_selects.scss */
   .form-control.select:after {
     color: #0099cc;
     content: "v";
@@ -2917,11 +2865,11 @@ input[type="text"] {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 23, ../sass/forms/_channel-selector.scss */
+/* line 23, ../../../../general/res/sass/forms/_channel-selector.scss */
 .channel-selector .line {
   margin-bottom: 5px;
   min-height: 22px; }
-/* line 27, ../sass/forms/_channel-selector.scss */
+/* line 27, ../../../../general/res/sass/forms/_channel-selector.scss */
 .channel-selector .treeview {
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -2945,13 +2893,13 @@ input[type="text"] {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 33, ../sass/forms/_mixins.scss */
+  /* line 290, ../../../../general/res/sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
-/* line 36, ../sass/forms/_channel-selector.scss */
+/* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
 .channel-selector .btns-add-remove {
   margin-top: 150px; }
-  /* line 39, ../sass/forms/_channel-selector.scss */
+  /* line 39, ../../../../general/res/sass/forms/_channel-selector.scss */
   .channel-selector .btns-add-remove .btn {
     display: block;
     font-size: 1.5em;
@@ -2980,24 +2928,24 @@ input[type="text"] {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 23, ../sass/forms/_datetime.scss */
+/* line 23, ../../../../general/res/sass/forms/_datetime.scss */
 .complex.datetime span {
   display: inline-block;
   margin-right: 5px; }
-/* line 36, ../sass/forms/_datetime.scss */
+/* line 36, ../../../../general/res/sass/forms/_datetime.scss */
 .complex.datetime .fields {
   margin-top: 3px 0;
   padding: 3px 0; }
-/* line 41, ../sass/forms/_datetime.scss */
+/* line 41, ../../../../general/res/sass/forms/_datetime.scss */
 .complex.datetime .date {
   width: 85px; }
-  /* line 44, ../sass/forms/_datetime.scss */
+  /* line 44, ../../../../general/res/sass/forms/_datetime.scss */
   .complex.datetime .date input {
     width: 80px; }
-/* line 50, ../sass/forms/_datetime.scss */
+/* line 50, ../../../../general/res/sass/forms/_datetime.scss */
 .complex.datetime .time.sm {
   width: 45px; }
-  /* line 53, ../sass/forms/_datetime.scss */
+  /* line 53, ../../../../general/res/sass/forms/_datetime.scss */
   .complex.datetime .time.sm input {
     width: 40px; }
 
@@ -3022,10 +2970,10 @@ input[type="text"] {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 23, ../sass/forms/_validation.scss */
+/* line 23, ../../../../general/res/sass/forms/_validation.scss */
 .validates > .label {
   padding-right: 25px; }
-  /* line 26, ../sass/forms/_validation.scss */
+  /* line 26, ../../../../general/res/sass/forms/_validation.scss */
   .validates > .label::after {
     /*            display: block;
                 position: absolute;
@@ -3037,24 +2985,24 @@ input[type="text"] {
                 width: $reqSymbolW;*/
     font-family: symbolsfont;
     font-size: 0.7em; }
-/* line 44, ../sass/forms/_validation.scss */
+/* line 44, ../../../../general/res/sass/forms/_validation.scss */
 .validates.invalid > .label::after, .validates.invalid.req > .label::after {
   color: #ff9900;
   content: "x"; }
-/* line 51, ../sass/forms/_validation.scss */
+/* line 51, ../../../../general/res/sass/forms/_validation.scss */
 .validates.valid > .label::after, .validates.valid.req > .label::after {
   color: #33cc33;
   content: "2"; }
-/* line 57, ../sass/forms/_validation.scss */
+/* line 57, ../../../../general/res/sass/forms/_validation.scss */
 .validates.req > .label::after {
   color: #ffc700;
   content: "*"; }
 
-/* line 63, ../sass/forms/_validation.scss */
+/* line 63, ../../../../general/res/sass/forms/_validation.scss */
 .req {
   font-size: 0.7em; }
 
-/* line 66, ../sass/forms/_validation.scss */
+/* line 66, ../../../../general/res/sass/forms/_validation.scss */
 span.req {
   color: #ffc700; }
 
@@ -3079,7 +3027,7 @@ span.req {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 24, ../sass/forms/_filter.scss */
+/* line 24, ../../../../general/res/sass/forms/_filter.scss */
 .filter input.filter,
 .filter input.t-filter-input,
 .t-filter input.filter,
@@ -3102,22 +3050,22 @@ span.req {
   padding: 0 3px;
   background: #3b3b3b;
   border-bottom: 1px solid #4d4d4d; }
-  /* line 33, ../sass/forms/_mixins.scss */
+  /* line 290, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
   .t-filter input.t-filter-input.error {
     background: rgba(255, 0, 0, 0.5); }
-/* line 28, ../sass/forms/_filter.scss */
+/* line 28, ../../../../general/res/sass/forms/_filter.scss */
 .filter input.t-filter-input,
 .t-filter input.t-filter-input {
   height: 22px;
   width: 200px; }
-  /* line 38, ../sass/forms/_filter.scss */
+  /* line 38, ../../../../general/res/sass/forms/_filter.scss */
   .filter input.t-filter-input:not(.ng-dirty) + .t-a-clear,
   .t-filter input.t-filter-input:not(.ng-dirty) + .t-a-clear {
     display: none; }
-/* line 42, ../sass/forms/_filter.scss */
+/* line 42, ../../../../general/res/sass/forms/_filter.scss */
 .filter .icon.ui-symbol,
 .t-filter .icon.ui-symbol {
   -moz-border-radius: 3px;
@@ -3129,11 +3077,11 @@ span.req {
   line-height: 22px;
   padding: 0px 5px;
   vertical-align: middle; }
-  /* line 50, ../sass/forms/_filter.scss */
+  /* line 50, ../../../../general/res/sass/forms/_filter.scss */
   .filter .icon.ui-symbol:hover,
   .t-filter .icon.ui-symbol:hover {
     background: rgba(255, 255, 255, 0.1); }
-/* line 54, ../sass/forms/_filter.scss */
+/* line 54, ../../../../general/res/sass/forms/_filter.scss */
 .filter .s-a-clear.ui-symbol,
 .t-filter .s-a-clear.ui-symbol {
   -moz-border-radius: 3px;
@@ -3158,19 +3106,19 @@ span.req {
   top: 50%;
   text-align: center;
   z-index: 5; }
-  /* line 74, ../sass/forms/_filter.scss */
+  /* line 74, ../../../../general/res/sass/forms/_filter.scss */
   .filter .s-a-clear.ui-symbol:hover,
   .t-filter .s-a-clear.ui-symbol:hover {
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
     opacity: 0.6;
     background-color: #0099cc; }
 
-/* line 82, ../sass/forms/_filter.scss */
+/* line 82, ../../../../general/res/sass/forms/_filter.scss */
 .l-filter {
   display: inline-block;
   position: relative; }
 
-/* line 89, ../sass/forms/_filter.scss */
+/* line 89, ../../../../general/res/sass/forms/_filter.scss */
 .top-bar input.filter {
   font-size: .9em;
   height: 24px;
@@ -3179,7 +3127,7 @@ span.req {
   padding-left: 10px;
   padding-right: 10px;
   vertical-align: top; }
-/* line 100, ../sass/forms/_filter.scss */
+/* line 100, ../../../../general/res/sass/forms/_filter.scss */
 .top-bar .icon-filter {
   font-size: 1.4em; }
 
@@ -3205,26 +3153,26 @@ span.req {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 32, ../sass/user-environ/_layout.scss */
+/* line 32, ../../../../general/res/sass/user-environ/_layout.scss */
 .holder-all {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0; }
 
-/* line 40, ../sass/user-environ/_layout.scss */
+/* line 40, ../../../../general/res/sass/user-environ/_layout.scss */
 .browse-area,
 .edit-area,
 .editor {
   position: absolute; }
 
-/* line 46, ../sass/user-environ/_layout.scss */
+/* line 46, ../../../../general/res/sass/user-environ/_layout.scss */
 .editor {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px; }
 
-/* line 50, ../sass/user-environ/_layout.scss */
+/* line 50, ../../../../general/res/sass/user-environ/_layout.scss */
 .contents {
   box-sizing: border-box;
   position: absolute;
@@ -3232,38 +3180,38 @@ span.req {
   right: 0;
   bottom: 0;
   left: 0; }
-  /* line 58, ../sass/user-environ/_layout.scss */
+  /* line 58, ../../../../general/res/sass/user-environ/_layout.scss */
   .contents.nomargin {
     right: 0px;
     bottom: 0px;
     left: 0px; }
 
-/* line 67, ../sass/user-environ/_layout.scss */
+/* line 67, ../../../../general/res/sass/user-environ/_layout.scss */
 .bar .icon.major {
   margin-right: 5px; }
-/* line 70, ../sass/user-environ/_layout.scss */
+/* line 70, ../../../../general/res/sass/user-environ/_layout.scss */
 .bar.abs, .s-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
-  /* line 73, ../sass/user-environ/_layout.scss */
+  /* line 73, ../../../../general/res/sass/user-environ/_layout.scss */
   .bar.abs.left, .s-menu span.bar.left.l-click-area,
   .bar.abs .left,
   .s-menu span.bar.l-click-area .left {
     width: 45%;
     right: auto; }
-  /* line 78, ../sass/user-environ/_layout.scss */
+  /* line 78, ../../../../general/res/sass/user-environ/_layout.scss */
   .bar.abs.right, .s-menu span.bar.right.l-click-area,
   .bar.abs .right,
   .s-menu span.bar.l-click-area .right {
     width: 45%;
     left: auto;
     text-align: right; }
-    /* line 83, ../sass/user-environ/_layout.scss */
+    /* line 83, ../../../../general/res/sass/user-environ/_layout.scss */
     .bar.abs.right .icon.major, .s-menu span.bar.right.l-click-area .icon.major,
     .bar.abs .right .icon.major,
     .s-menu span.bar.l-click-area .right .icon.major {
       margin-left: 15px; }
-  /* line 89, ../sass/user-environ/_layout.scss */
+  /* line 89, ../../../../general/res/sass/user-environ/_layout.scss */
   .bar.abs .l-flex .left, .s-menu span.bar.l-click-area .l-flex .left,
   .bar.abs .l-flex .right,
   .s-menu span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .s-menu span.bar.l-flex.l-click-area .left,
@@ -3271,7 +3219,7 @@ span.req {
   .s-menu span.bar.l-flex.l-click-area .right {
     width: auto; }
 
-/* line 98, ../sass/user-environ/_layout.scss */
+/* line 98, ../../../../general/res/sass/user-environ/_layout.scss */
 .user-environ .browse-area,
 .user-environ .edit-area,
 .user-environ .editor {
@@ -3279,23 +3227,23 @@ span.req {
   right: 10px;
   bottom: 35px;
   left: 10px; }
-/* line 109, ../sass/user-environ/_layout.scss */
+/* line 109, ../../../../general/res/sass/user-environ/_layout.scss */
 .user-environ .browse-area > .contents,
 .user-environ .edit-area > .contents {
   left: 0;
   right: 0; }
-/* line 115, ../sass/user-environ/_layout.scss */
+/* line 115, ../../../../general/res/sass/user-environ/_layout.scss */
 .user-environ .edit-area {
   top: 45px; }
-  /* line 118, ../sass/user-environ/_layout.scss */
+  /* line 118, ../../../../general/res/sass/user-environ/_layout.scss */
   .user-environ .edit-area .tool-bar {
     bottom: auto;
     height: 30px;
     line-height: 25px; }
-  /* line 123, ../sass/user-environ/_layout.scss */
+  /* line 123, ../../../../general/res/sass/user-environ/_layout.scss */
   .user-environ .edit-area .work-area {
     top: 40px; }
-/* line 128, ../sass/user-environ/_layout.scss */
+/* line 128, ../../../../general/res/sass/user-environ/_layout.scss */
 .user-environ .ue-bottom-bar {
   overflow: hidden;
   position: absolute;
@@ -3307,20 +3255,20 @@ span.req {
   height: auto;
   top: auto;
   height: 25px; }
-  /* line 133, ../sass/user-environ/_layout.scss */
+  /* line 133, ../../../../general/res/sass/user-environ/_layout.scss */
   .user-environ .ue-bottom-bar .status-holder {
     z-index: 1; }
-  /* line 137, ../sass/user-environ/_layout.scss */
+  /* line 137, ../../../../general/res/sass/user-environ/_layout.scss */
   .user-environ .ue-bottom-bar .app-logo {
     left: auto;
     width: 105px;
     z-index: 2; }
 
-/* line 145, ../sass/user-environ/_layout.scss */
+/* line 145, ../../../../general/res/sass/user-environ/_layout.scss */
 .cols {
   overflow: hidden;
   *zoom: 1; }
-  /* line 147, ../sass/user-environ/_layout.scss */
+  /* line 147, ../../../../general/res/sass/user-environ/_layout.scss */
   .cols .col {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -3331,114 +3279,114 @@ span.req {
     margin-left: 1.5%;
     padding-left: 5px;
     position: relative; }
-    /* line 155, ../sass/user-environ/_layout.scss */
+    /* line 155, ../../../../general/res/sass/user-environ/_layout.scss */
     .cols .col:first-child {
       margin-left: 0;
       padding-left: 0; }
-  /* line 162, ../sass/user-environ/_layout.scss */
+  /* line 162, ../../../../general/res/sass/user-environ/_layout.scss */
   .cols.cols-2 .col-1 {
     min-width: 250px;
     width: 48.5%; }
-  /* line 168, ../sass/user-environ/_layout.scss */
+  /* line 168, ../../../../general/res/sass/user-environ/_layout.scss */
   .cols.cols-2-ff .col-100px {
     width: 100px; }
-  /* line 175, ../sass/user-environ/_layout.scss */
+  /* line 175, ../../../../general/res/sass/user-environ/_layout.scss */
   .cols.cols-6 .col-1 {
     min-width: 83.33333px;
     width: 15.16667%; }
-  /* line 181, ../sass/user-environ/_layout.scss */
+  /* line 181, ../../../../general/res/sass/user-environ/_layout.scss */
   .cols.cols-16 .col-1 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 184, ../sass/user-environ/_layout.scss */
+  /* line 184, ../../../../general/res/sass/user-environ/_layout.scss */
   .cols.cols-16 .col-2 {
     min-width: 62.5px;
     width: 11%; }
-  /* line 187, ../sass/user-environ/_layout.scss */
+  /* line 187, ../../../../general/res/sass/user-environ/_layout.scss */
   .cols.cols-16 .col-7 {
     min-width: 218.75px;
     width: 42.25%; }
-  /* line 193, ../sass/user-environ/_layout.scss */
+  /* line 193, ../../../../general/res/sass/user-environ/_layout.scss */
   .cols.cols-32 .col-2 {
     min-width: 31.25px;
     width: 4.75%; }
-  /* line 196, ../sass/user-environ/_layout.scss */
+  /* line 196, ../../../../general/res/sass/user-environ/_layout.scss */
   .cols.cols-32 .col-15 {
     min-width: 234.375px;
     width: 45.375%; }
-  /* line 200, ../sass/user-environ/_layout.scss */
+  /* line 200, ../../../../general/res/sass/user-environ/_layout.scss */
   .cols .l-row {
     overflow: hidden;
     *zoom: 1;
     padding: 5px 0; }
 
-/* line 208, ../sass/user-environ/_layout.scss */
+/* line 208, ../../../../general/res/sass/user-environ/_layout.scss */
 .browse-mode .split-layout .split-pane-component.pane.left {
   min-width: 150px;
   max-width: 800px;
   width: 25%; }
 
-/* line 218, ../sass/user-environ/_layout.scss */
+/* line 218, ../../../../general/res/sass/user-environ/_layout.scss */
 .edit-mode .split-layout .split-pane-component.pane.right {
   width: 15%; }
-  /* line 220, ../sass/user-environ/_layout.scss */
+  /* line 220, ../../../../general/res/sass/user-environ/_layout.scss */
   .edit-mode .split-layout .split-pane-component.pane.right .pane.bottom {
     min-height: 50px;
     height: 30%; }
 
-/* line 230, ../sass/user-environ/_layout.scss */
+/* line 230, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 233, ../sass/user-environ/_layout.scss */
+  /* line 233, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 236, ../sass/user-environ/_layout.scss */
+    /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 241, ../sass/user-environ/_layout.scss */
+  /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .search-holder {
     top: 34px; }
-  /* line 244, ../sass/user-environ/_layout.scss */
+  /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 64px; }
-  /* line 251, ../sass/user-environ/_layout.scss */
+  /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .s-menu span.right.l-click-area,
   .s-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 262, ../sass/user-environ/_layout.scss */
+  /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-holder {
     top: 34px; }
-  /* line 266, ../sass/user-environ/_layout.scss */
+  /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane .object-holder {
     overflow: auto; }
 
-/* line 274, ../sass/user-environ/_layout.scss */
+/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 277, ../sass/user-environ/_layout.scss */
+  /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 284, ../sass/user-environ/_layout.scss */
+/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 287, ../sass/user-environ/_layout.scss */
+  /* line 287, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 291, ../sass/user-environ/_layout.scss */
+  /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 293, ../sass/user-environ/_layout.scss */
+    /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 302, ../sass/user-environ/_layout.scss */
+/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .s-btn, .object-browse-bar .s-menu,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu,
@@ -3450,12 +3398,12 @@ span.req {
   line-height: 25px;
   vertical-align: top; }
 
-/* line 315, ../sass/user-environ/_layout.scss */
+/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 320, ../sass/user-environ/_layout.scss */
+/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -3471,27 +3419,27 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 328, ../sass/user-environ/_layout.scss */
+  /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 330, ../sass/user-environ/_layout.scss */
+    /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/* line 338, ../sass/user-environ/_layout.scss */
+/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
   display: -webkit-flex;
   flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap; }
-  /* line 341, ../sass/user-environ/_layout.scss */
+  /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
     -webkit-flex: 1 1 0; }
 
-/* line 347, ../sass/user-environ/_layout.scss */
+/* line 347, ../../../../general/res/sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -3517,7 +3465,7 @@ span.req {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 26, ../sass/mobile/_layout.scss */
+  /* line 26, ../../../../general/res/sass/mobile/_layout.scss */
   .browse-wrapper,
   .pane {
     top: 0 !important;
@@ -3525,11 +3473,11 @@ span.req {
     bottom: 0;
     left: 0; }
 
-  /* line 31, ../sass/mobile/_layout.scss */
+  /* line 31, ../../../../general/res/sass/mobile/_layout.scss */
   .pane.left.treeview {
     background-color: #222; }
 
-  /* line 35, ../sass/mobile/_layout.scss */
+  /* line 35, ../../../../general/res/sass/mobile/_layout.scss */
   .pane.right-repr {
     -moz-transition-duration: 0.35s;
     -o-transition-duration: 0.35s;
@@ -3538,7 +3486,7 @@ span.req {
     transition-timing-function: ease;
     backface-visibility: hidden;
     margin-left: 0 !important; }
-    /* line 39, ../sass/mobile/_layout.scss */
+    /* line 39, ../../../../general/res/sass/mobile/_layout.scss */
     .pane.right-repr #content-area {
       -moz-transition-duration: 0.35s;
       -o-transition-duration: 0.35s;
@@ -3548,7 +3496,7 @@ span.req {
       backface-visibility: hidden;
       opacity: 1; }
 
-  /* line 45, ../sass/mobile/_layout.scss */
+  /* line 45, ../../../../general/res/sass/mobile/_layout.scss */
   .user-environ .browse-area,
   .user-environ .edit-area,
   .user-environ .editor {
@@ -3557,37 +3505,37 @@ span.req {
     right: 0;
     bottom: 25px; }
 
-  /* line 51, ../sass/mobile/_layout.scss */
+  /* line 51, ../../../../general/res/sass/mobile/_layout.scss */
   .holder.l-mobile {
     top: 10px !important;
     right: 10px !important;
     bottom: 10px !important;
     left: 10px !important; }
 
-  /* line 61, ../sass/mobile/_layout.scss */
+  /* line 61, ../../../../general/res/sass/mobile/_layout.scss */
   .browse-hidetree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 65, ../sass/mobile/_layout.scss */
+    /* line 65, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-hidetree .pane.left.treeview {
       opacity: 0;
       right: 100% !important;
       width: auto !important;
       overflow-y: hidden;
       overflow-x: hidden; }
-    /* line 74, ../sass/mobile/_layout.scss */
+    /* line 74, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-hidetree .pane.right-repr {
       left: 0 !important; }
 
-  /* line 79, ../sass/mobile/_layout.scss */
+  /* line 79, ../../../../general/res/sass/mobile/_layout.scss */
   .browse-showtree {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 88, ../sass/mobile/_layout.scss */
+    /* line 88, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-showtree .pane.left.treeview {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -3610,47 +3558,47 @@ span.req {
       display: block !important;
       right: auto !important;
       width: 40% !important; }
-    /* line 98, ../sass/mobile/_layout.scss */
+    /* line 98, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-showtree .pane.right-repr {
       left: 40% !important; }
 
-  /* line 107, ../sass/mobile/_layout.scss */
+  /* line 107, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-menu-icon {
     font-size: 110%;
     position: absolute;
     top: 12px;
     left: 10px; }
 
-  /* line 114, ../sass/mobile/_layout.scss */
+  /* line 114, ../../../../general/res/sass/mobile/_layout.scss */
   .object-browse-bar {
     left: 30px !important; }
-    /* line 117, ../sass/mobile/_layout.scss */
+    /* line 117, ../../../../general/res/sass/mobile/_layout.scss */
     .object-browse-bar .context-available {
       opacity: 1 !important; }
-    /* line 120, ../sass/mobile/_layout.scss */
+    /* line 120, ../../../../general/res/sass/mobile/_layout.scss */
     .object-browse-bar .view-switcher {
       margin-right: 0 !important; }
-      /* line 122, ../sass/mobile/_layout.scss */
+      /* line 122, ../../../../general/res/sass/mobile/_layout.scss */
       .object-browse-bar .view-switcher .title-label {
         display: none; }
 
-  /* line 129, ../sass/mobile/_layout.scss */
+  /* line 129, ../../../../general/res/sass/mobile/_layout.scss */
   .tree-holder {
     overflow-x: hidden !important; }
 
-  /* line 133, ../sass/mobile/_layout.scss */
+  /* line 133, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-disable-select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
 
-  /* line 138, ../sass/mobile/_layout.scss */
+  /* line 138, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-hide,
   .mobile-hide-important {
     display: none !important; }
 
-  /* line 143, ../sass/mobile/_layout.scss */
+  /* line 143, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-back-hide {
     pointer-events: none;
     -moz-transition-property: opacity;
@@ -3667,7 +3615,7 @@ span.req {
     transition-timing-function: ease-in-out;
     opacity: 0; }
 
-  /* line 148, ../sass/mobile/_layout.scss */
+  /* line 148, ../../../../general/res/sass/mobile/_layout.scss */
   .mobile-back-unhide {
     pointer-events: all;
     -moz-transition-property: opacity;
@@ -3684,19 +3632,19 @@ span.req {
     transition-timing-function: ease-in-out;
     opacity: 1; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
-  /* line 157, ../sass/mobile/_layout.scss */
+  /* line 157, ../../../../general/res/sass/mobile/_layout.scss */
   .browse-showtree .pane.left.treeview {
     width: 90% !important; }
-  /* line 160, ../sass/mobile/_layout.scss */
+  /* line 160, ../../../../general/res/sass/mobile/_layout.scss */
   .browse-showtree .pane.right-repr {
     left: 0 !important;
     transform: translateX(90%);
     -webkit-transform: translateX(90%); }
-    /* line 163, ../sass/mobile/_layout.scss */
+    /* line 163, ../../../../general/res/sass/mobile/_layout.scss */
     .browse-showtree .pane.right-repr #content-area {
       opacity: 0; } }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 171, ../sass/mobile/_layout.scss */
+  /* line 171, ../../../../general/res/sass/mobile/_layout.scss */
   .desktop-hide {
     display: none; } }
 /*****************************************************************************
@@ -3720,19 +3668,19 @@ span.req {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 26, ../sass/edit/_editor.scss */
+/* line 26, ../../../../general/res/sass/edit/_editor.scss */
 .edit-main .edit-corner,
 .edit-main .edit-handle {
   position: absolute;
   z-index: 2; }
-/* line 32, ../sass/edit/_editor.scss */
+/* line 32, ../../../../general/res/sass/edit/_editor.scss */
 .edit-main .edit-corner {
   width: 15px;
   height: 15px; }
-  /* line 35, ../sass/edit/_editor.scss */
+  /* line 35, ../../../../general/res/sass/edit/_editor.scss */
   .edit-main .edit-corner:hover {
     z-index: 11; }
-  /* line 38, ../sass/edit/_editor.scss */
+  /* line 38, ../../../../general/res/sass/edit/_editor.scss */
   .edit-main .edit-corner.edit-resize-nw {
     -moz-border-radius-bottomright: 5px;
     -webkit-border-bottom-right-radius: 5px;
@@ -3740,7 +3688,7 @@ span.req {
     cursor: nw-resize;
     top: 0;
     left: 0; }
-  /* line 43, ../sass/edit/_editor.scss */
+  /* line 43, ../../../../general/res/sass/edit/_editor.scss */
   .edit-main .edit-corner.edit-resize-ne {
     -moz-border-radius-bottomleft: 5px;
     -webkit-border-bottom-left-radius: 5px;
@@ -3748,7 +3696,7 @@ span.req {
     cursor: ne-resize;
     top: 0;
     right: 0; }
-  /* line 48, ../sass/edit/_editor.scss */
+  /* line 48, ../../../../general/res/sass/edit/_editor.scss */
   .edit-main .edit-corner.edit-resize-se {
     -moz-border-radius-topleft: 5px;
     -webkit-border-top-left-radius: 5px;
@@ -3756,7 +3704,7 @@ span.req {
     cursor: se-resize;
     bottom: 0;
     right: 0; }
-  /* line 53, ../sass/edit/_editor.scss */
+  /* line 53, ../../../../general/res/sass/edit/_editor.scss */
   .edit-main .edit-corner.edit-resize-sw {
     -moz-border-radius-topright: 5px;
     -webkit-border-top-right-radius: 5px;
@@ -3764,13 +3712,13 @@ span.req {
     cursor: sw-resize;
     bottom: 0;
     left: 0; }
-/* line 61, ../sass/edit/_editor.scss */
+/* line 61, ../../../../general/res/sass/edit/_editor.scss */
 .edit-main .edit-handle {
   top: 15px;
   right: 15px;
   bottom: 15px;
   left: 15px; }
-  /* line 63, ../sass/edit/_editor.scss */
+  /* line 63, ../../../../general/res/sass/edit/_editor.scss */
   .edit-main .edit-handle.edit-move {
     cursor: move;
     left: 0;
@@ -3778,43 +3726,43 @@ span.req {
     top: 0;
     bottom: 0;
     z-index: 1; }
-  /* line 73, ../sass/edit/_editor.scss */
+  /* line 73, ../../../../general/res/sass/edit/_editor.scss */
   .edit-main .edit-handle.edit-resize-n {
     top: 0px;
     bottom: auto;
     height: 15px;
     cursor: n-resize; }
-  /* line 78, ../sass/edit/_editor.scss */
+  /* line 78, ../../../../general/res/sass/edit/_editor.scss */
   .edit-main .edit-handle.edit-resize-e {
     right: 0px;
     left: auto;
     width: 15px;
     cursor: e-resize; }
-  /* line 83, ../sass/edit/_editor.scss */
+  /* line 83, ../../../../general/res/sass/edit/_editor.scss */
   .edit-main .edit-handle.edit-resize-s {
     bottom: 0px;
     top: auto;
     height: 15px;
     cursor: s-resize; }
-  /* line 88, ../sass/edit/_editor.scss */
+  /* line 88, ../../../../general/res/sass/edit/_editor.scss */
   .edit-main .edit-handle.edit-resize-w {
     left: 0px;
     right: auto;
     width: 15px;
     cursor: w-resize; }
-/* line 97, ../sass/edit/_editor.scss */
+/* line 97, ../../../../general/res/sass/edit/_editor.scss */
 .edit-main .frame.child-frame.panel:hover {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
   border-color: #0099cc; }
-  /* line 101, ../sass/edit/_editor.scss */
+  /* line 101, ../../../../general/res/sass/edit/_editor.scss */
   .edit-main .frame.child-frame.panel:hover .view-switcher {
     opacity: 1; }
-  /* line 104, ../sass/edit/_editor.scss */
+  /* line 104, ../../../../general/res/sass/edit/_editor.scss */
   .edit-main .frame.child-frame.panel:hover .edit-corner {
     background-color: rgba(0, 153, 204, 0.8); }
-    /* line 106, ../sass/edit/_editor.scss */
+    /* line 106, ../../../../general/res/sass/edit/_editor.scss */
     .edit-main .frame.child-frame.panel:hover .edit-corner:hover {
       background-color: #0099cc; }
 
@@ -3839,37 +3787,37 @@ span.req {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 23, ../sass/search/_search.scss */
+/* line 23, ../../../../general/res/sass/search/_search.scss */
 .abs.search-holder, .s-menu span.search-holder.l-click-area {
   height: 25px;
   bottom: 0;
   top: 23px;
   z-index: 5; }
-  /* line 27, ../sass/search/_search.scss */
+  /* line 27, ../../../../general/res/sass/search/_search.scss */
   .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area {
     height: auto;
     bottom: 0; }
 
-/* line 38, ../sass/search/_search.scss */
+/* line 38, ../../../../general/res/sass/search/_search.scss */
 .search {
   display: flex;
   display: -webkit-flex;
   flex-direction: column;
   -webkit-flex-direction: column;
   height: 100%; }
-  /* line 48, ../sass/search/_search.scss */
+  /* line 48, ../../../../general/res/sass/search/_search.scss */
   .search .search-bar {
     font-size: 0.8em;
     max-width: 250px;
     position: relative;
     width: 100%; }
-    /* line 60, ../sass/search/_search.scss */
+    /* line 60, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input {
       height: 25px;
       line-height: 25px;
       padding-top: 0;
       padding-bottom: 0; }
-    /* line 67, ../sass/search/_search.scss */
+    /* line 67, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-icon,
     .search .search-bar .clear-icon,
     .search .search-bar .menu-icon {
@@ -3883,68 +3831,68 @@ span.req {
       position: absolute;
       text-align: center;
       top: 4px; }
-    /* line 80, ../sass/search/_search.scss */
+    /* line 80, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .clear-icon,
     .search .search-bar .menu-icon {
       cursor: pointer;
       transition: color .25s; }
-    /* line 87, ../sass/search/_search.scss */
+    /* line 87, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input {
       position: relative;
       width: 100%;
       padding-left: 22px !important;
       padding-right: 44px !important; }
-      /* line 94, ../sass/search/_search.scss */
+      /* line 94, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .search-input input {
         width: 100%; }
-    /* line 99, ../sass/search/_search.scss */
+    /* line 99, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-icon {
       color: #737373;
       left: 3px;
       transition: visibility .15s, opacity .15s, color .2s;
       pointer-events: none; }
-    /* line 119, ../sass/search/_search.scss */
+    /* line 119, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input:hover + div.search-icon {
       color: #a6a6a6; }
-    /* line 123, ../sass/search/_search.scss */
+    /* line 123, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .clear-icon {
       right: 22px;
       visibility: hidden;
       opacity: 0;
       transition: visibility .15s, opacity .15s, color .2s; }
-      /* line 132, ../sass/search/_search.scss */
+      /* line 132, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .clear-icon.content {
         visibility: visible;
         opacity: 1; }
-      /* line 137, ../sass/search/_search.scss */
+      /* line 137, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .clear-icon:hover {
         color: #a6a6a6; }
-    /* line 142, ../sass/search/_search.scss */
+    /* line 142, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .menu-icon {
       font-size: 0.8em;
       padding-right: 4px;
       right: 4px;
       text-align: right; }
-      /* line 148, ../sass/search/_search.scss */
+      /* line 148, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .menu-icon:hover {
         color: #a6a6a6; }
-    /* line 153, ../sass/search/_search.scss */
+    /* line 153, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-menu-holder {
       float: right;
       left: -20px;
       z-index: 1;
       transition: visibility .05s, opacity .05s; }
-      /* line 163, ../sass/search/_search.scss */
+      /* line 163, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .search-menu-holder.off {
         visibility: hidden;
         opacity: 0; }
-    /* line 170, ../sass/search/_search.scss */
+    /* line 170, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .menu-icon:hover + div.search-menu-holder {
       visibility: visible; }
-    /* line 173, ../sass/search/_search.scss */
+    /* line 173, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar div.search-menu-holder:hover {
       visibility: visible; }
-  /* line 178, ../sass/search/_search.scss */
+  /* line 178, ../../../../general/res/sass/search/_search.scss */
   .search .active-filter-display {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -3957,14 +3905,14 @@ span.req {
     padding-left: 1.4625em;
     font-size: 0.65em;
     margin-top: 3px; }
-    /* line 193, ../sass/search/_search.scss */
+    /* line 193, ../../../../general/res/sass/search/_search.scss */
     .search .active-filter-display .clear-filters-icon {
       opacity: 0.4;
       font-size: 0.8em;
       position: absolute;
       left: 1px;
       cursor: pointer; }
-    /* line 204, ../sass/search/_search.scss */
+    /* line 204, ../../../../general/res/sass/search/_search.scss */
     .search .active-filter-display.off {
       visibility: hidden;
       opacity: 0;
@@ -3972,7 +3920,7 @@ span.req {
       margin: 0;
       padding: 0;
       border: 0; }
-  /* line 214, ../sass/search/_search.scss */
+  /* line 214, ../../../../general/res/sass/search/_search.scss */
   .search .search-scroll {
     order: 3;
     margin-top: 4px;
@@ -3981,27 +3929,27 @@ span.req {
     height: auto;
     max-height: 100%;
     position: relative; }
-    /* line 227, ../sass/search/_search.scss */
+    /* line 227, ../../../../general/res/sass/search/_search.scss */
     .search .search-scroll .load-icon {
       position: relative; }
-      /* line 229, ../sass/search/_search.scss */
+      /* line 229, ../../../../general/res/sass/search/_search.scss */
       .search .search-scroll .load-icon.loading {
         pointer-events: none;
         margin-left: 6px; }
-        /* line 233, ../sass/search/_search.scss */
+        /* line 233, ../../../../general/res/sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .title-label {
           font-style: italic;
           font-size: .9em;
           opacity: 0.5;
           margin-left: 26px;
           line-height: 24px; }
-        /* line 243, ../sass/search/_search.scss */
+        /* line 243, ../../../../general/res/sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .wait-spinner {
           margin-left: 6px; }
-      /* line 248, ../sass/search/_search.scss */
+      /* line 248, ../../../../general/res/sass/search/_search.scss */
       .search .search-scroll .load-icon:not(.loading) {
         cursor: pointer; }
-    /* line 253, ../sass/search/_search.scss */
+    /* line 253, ../../../../general/res/sass/search/_search.scss */
     .search .search-scroll .load-more-button {
       margin-top: 5px 0;
       font-size: 0.8em;
@@ -4013,10 +3961,10 @@ span.req {
       white-space: nowrap; }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 5, ../sass/mobile/search/_search.scss */
+  /* line 5, ../../../../general/res/sass/mobile/search/_search.scss */
   .search .search-bar .menu-icon {
     display: none; }
-  /* line 8, ../sass/mobile/search/_search.scss */
+  /* line 8, ../../../../general/res/sass/mobile/search/_search.scss */
   .search .search-bar .clear-icon {
     right: 5px; } }
 /*****************************************************************************
@@ -4040,11 +3988,11 @@ span.req {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 23, ../sass/overlay/_overlay.scss */
+/* line 23, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .blocker {
   background: rgba(0, 0, 0, 0.7);
   z-index: 100; }
-/* line 27, ../sass/overlay/_overlay.scss */
+/* line 27, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .clk-icon.close {
   position: absolute;
   top: 10px;
@@ -4052,14 +4000,14 @@ span.req {
   bottom: auto;
   left: auto;
   z-index: 100; }
-/* line 32, ../sass/overlay/_overlay.scss */
+/* line 32, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay > .holder {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
-  background-image: -moz-linear-gradient(#525252, #454545);
-  background-image: -webkit-linear-gradient(#525252, #454545);
-  background-image: linear-gradient(#525252, #454545);
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #333333));
+  background-image: -moz-linear-gradient(#404040, #333333);
+  background-image: -webkit-linear-gradient(#404040, #333333);
+  background-image: linear-gradient(#404040, #333333);
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -4081,29 +4029,29 @@ span.req {
   bottom: 15%;
   left: 15%;
   z-index: 101; }
-  /* line 39, ../sass/overlay/_overlay.scss */
+  /* line 39, ../../../../general/res/sass/overlay/_overlay.scss */
   .overlay > .holder > .contents {
     top: 25px;
     right: 25px;
     bottom: 25px;
     left: 25px; }
-/* line 44, ../sass/overlay/_overlay.scss */
+/* line 44, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 1.2em;
   margin-bottom: 5px; }
-/* line 50, ../sass/overlay/_overlay.scss */
+/* line 50, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .top-bar {
   height: 60px; }
-/* line 54, ../sass/overlay/_overlay.scss */
+/* line 54, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .editor {
   top: 70px;
   bottom: 40px;
   left: 0;
   right: 0; }
-/* line 60, ../sass/overlay/_overlay.scss */
+/* line 60, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .bottom-bar {
   top: auto;
   right: 0;
@@ -4112,14 +4060,14 @@ span.req {
   overflow: visible;
   height: 30px;
   text-align: right; }
-  /* line 66, ../sass/overlay/_overlay.scss */
+  /* line 66, ../../../../general/res/sass/overlay/_overlay.scss */
   .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc4Nzg3OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZiNmI2YiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #787878), color-stop(100%, #6b6b6b));
-    background-image: -moz-linear-gradient(#787878, #6b6b6b);
-    background-image: -webkit-linear-gradient(#787878, #6b6b6b);
-    background-image: linear-gradient(#787878, #6b6b6b);
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #595959));
+    background-image: -moz-linear-gradient(#666666, #595959);
+    background-image: -webkit-linear-gradient(#666666, #595959);
+    background-image: linear-gradient(#666666, #595959);
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -4137,16 +4085,16 @@ span.req {
     line-height: 30px;
     margin-left: 5px;
     padding: 0 15px; }
-    /* line 167, ../sass/_mixins.scss */
+    /* line 167, ../../../../general/res/sass/_mixins.scss */
     .overlay .bottom-bar .s-btn:not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.disabled):hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhhOGE4YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkN2Q3ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc4Nzg3OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZiNmI2YiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8a8a8a), color-stop(100%, #7d7d7d));
-      background-image: -moz-linear-gradient(#8a8a8a, #7d7d7d);
-      background-image: -webkit-linear-gradient(#8a8a8a, #7d7d7d);
-      background-image: linear-gradient(#8a8a8a, #7d7d7d);
-      color: #e3e3e3; }
-/* line 82, ../sass/overlay/_overlay.scss */
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #787878), color-stop(100%, #6b6b6b));
+      background-image: -moz-linear-gradient(#787878, #6b6b6b);
+      background-image: -webkit-linear-gradient(#787878, #6b6b6b);
+      background-image: linear-gradient(#787878, #6b6b6b);
+      color: #d1d1d1; }
+/* line 82, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
   top: 5px;
   right: 5px;
@@ -4155,11 +4103,11 @@ span.req {
   overflow: auto; }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 4, ../sass/mobile/overlay/_overlay.scss */
+  /* line 4, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
   .overlay .clk-icon.close {
     top: 10px;
     right: 10px; }
-  /* line 8, ../sass/mobile/overlay/_overlay.scss */
+  /* line 8, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
   .overlay > .holder {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
@@ -4168,26 +4116,26 @@ span.req {
     right: 0;
     bottom: 0;
     left: 0; }
-    /* line 14, ../sass/mobile/overlay/_overlay.scss */
+    /* line 14, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
     .overlay > .holder > .contents {
       top: 10px;
       right: 10px;
       bottom: 10px;
       left: 10px; }
-      /* line 21, ../sass/mobile/overlay/_overlay.scss */
+      /* line 21, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
       .overlay > .holder > .contents .top-bar > .title {
         margin-right: 1.2em; }
-      /* line 26, ../sass/mobile/overlay/_overlay.scss */
+      /* line 26, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
       .overlay > .holder > .contents .form.editor {
         border: none; }
-        /* line 29, ../sass/mobile/overlay/_overlay.scss */
+        /* line 29, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
         .overlay > .holder > .contents .form.editor .contents {
           top: 0;
           right: 0;
           bottom: 0;
           left: 0; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 43, ../sass/mobile/overlay/_overlay.scss */
+  /* line 43, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
   .overlay > .holder > .contents .form.editor .contents .form-row > .label,
   .overlay > .holder > .contents .form.editor .contents .form-row > .controls {
     display: block;
@@ -4214,24 +4162,24 @@ span.req {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 23, ../sass/tree/_tree.scss */
+/* line 23, ../../../../general/res/sass/tree/_tree.scss */
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 312, ../sass/_mixins.scss */
+  /* line 324, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
     padding: 0; }
-  /* line 25, ../sass/tree/_tree.scss */
+  /* line 25, ../../../../general/res/sass/tree/_tree.scss */
   ul.tree li {
     display: block;
     position: relative; }
-  /* line 29, ../sass/tree/_tree.scss */
+  /* line 29, ../../../../general/res/sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
-/* line 34, ../sass/tree/_tree.scss */
+/* line 34, ../../../../general/res/sass/tree/_tree.scss */
 .tree-item,
 .search-result-item {
   -moz-box-sizing: border-box;
@@ -4250,7 +4198,7 @@ ul.tree {
   line-height: 1.5rem;
   margin-bottom: 3px;
   position: relative; }
-  /* line 47, ../sass/tree/_tree.scss */
+  /* line 47, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item .view-control,
   .search-result-item .view-control {
     display: inline-block;
@@ -4258,11 +4206,11 @@ ul.tree {
     font-size: 0.75em;
     width: 10px; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 55, ../sass/tree/_tree.scss */
+      /* line 55, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .view-control:hover,
       .search-result-item .view-control:hover {
         color: #ffc700; } }
-  /* line 61, ../sass/tree/_tree.scss */
+  /* line 61, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item .label,
   .search-result-item .label {
     display: block;
@@ -4275,7 +4223,7 @@ ul.tree {
     width: auto;
     height: auto;
     line-height: 1.5rem; }
-    /* line 69, ../sass/tree/_tree.scss */
+    /* line 69, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item .label .type-icon,
     .search-result-item .label .type-icon {
       text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
@@ -4289,14 +4237,14 @@ ul.tree {
       line-height: 100%;
       right: auto;
       width: 16px; }
-      /* line 82, ../sass/tree/_tree.scss */
+      /* line 82, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
       .search-result-item .label .type-icon .icon.l-icon-link,
       .search-result-item .label .type-icon .icon.l-icon-alert {
         text-shadow: black 0 1px 2px;
         position: absolute;
         z-index: 2; }
-      /* line 88, ../sass/tree/_tree.scss */
+      /* line 88, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .label .type-icon .icon.l-icon-alert,
       .search-result-item .label .type-icon .icon.l-icon-alert {
         color: #ff3c00;
@@ -4306,7 +4254,7 @@ ul.tree {
         width: 8px;
         top: 1px;
         right: -2px; }
-      /* line 94, ../sass/tree/_tree.scss */
+      /* line 94, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .label .type-icon .icon.l-icon-link,
       .search-result-item .label .type-icon .icon.l-icon-link {
         color: #49dedb;
@@ -4316,7 +4264,7 @@ ul.tree {
         width: 8px;
         left: -3px;
         bottom: 0px; }
-    /* line 102, ../sass/tree/_tree.scss */
+    /* line 102, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item .label .title-label,
     .search-result-item .label .title-label {
       overflow: hidden;
@@ -4332,67 +4280,67 @@ ul.tree {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap; }
-  /* line 113, ../sass/tree/_tree.scss */
+  /* line 113, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item.loading,
   .search-result-item.loading {
     pointer-events: none; }
-    /* line 115, ../sass/tree/_tree.scss */
+    /* line 115, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.loading .label,
     .search-result-item.loading .label {
       opacity: 0.5; }
-      /* line 117, ../sass/tree/_tree.scss */
+      /* line 117, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item.loading .label .title-label,
       .search-result-item.loading .label .title-label {
         font-style: italic; }
-    /* line 121, ../sass/tree/_tree.scss */
+    /* line 121, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.loading .wait-spinner,
     .search-result-item.loading .wait-spinner {
       margin-left: 14px; }
-  /* line 126, ../sass/tree/_tree.scss */
+  /* line 126, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item.selected,
   .search-result-item.selected {
     background: #005177;
     color: #fff; }
-    /* line 130, ../sass/tree/_tree.scss */
+    /* line 130, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.selected .view-control,
     .search-result-item.selected .view-control {
       color: #0099cc; }
-    /* line 133, ../sass/tree/_tree.scss */
+    /* line 133, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.selected .label .type-icon,
     .search-result-item.selected .label .type-icon {
       color: #fff; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 141, ../sass/tree/_tree.scss */
+    /* line 141, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item:not(.selected):hover,
     .search-result-item:not(.selected):hover {
       background: rgba(255, 255, 255, 0.1);
       color: #cccccc; }
-      /* line 144, ../sass/tree/_tree.scss */
+      /* line 144, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item:not(.selected):hover .context-trigger,
       .search-result-item:not(.selected):hover .context-trigger {
         display: block; }
-      /* line 147, ../sass/tree/_tree.scss */
+      /* line 147, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item:not(.selected):hover .icon,
       .search-result-item:not(.selected):hover .icon {
         color: #33ccff; } }
-  /* line 154, ../sass/tree/_tree.scss */
+  /* line 154, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item:not(.loading),
   .search-result-item:not(.loading) {
     cursor: pointer; }
-  /* line 158, ../sass/tree/_tree.scss */
+  /* line 158, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item .context-trigger,
   .search-result-item .context-trigger {
     top: -1px;
     position: absolute;
     right: 3px; }
-    /* line 164, ../sass/tree/_tree.scss */
+    /* line 164, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item .context-trigger .invoke-menu,
     .search-result-item .context-trigger .invoke-menu {
       font-size: 0.75em;
       height: 0.9rem;
       line-height: 0.9rem; }
 
-/* line 173, ../sass/tree/_tree.scss */
+/* line 173, ../../../../general/res/sass/tree/_tree.scss */
 .tree-item .label {
   left: 15px; }
 
@@ -4418,17 +4366,17 @@ ul.tree {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 27, ../sass/mobile/_tree.scss */
+  /* line 27, ../../../../general/res/sass/mobile/_tree.scss */
   ul.tree ul.tree {
     margin-left: 20px; }
 
-  /* line 31, ../sass/mobile/_tree.scss */
+  /* line 31, ../../../../general/res/sass/mobile/_tree.scss */
   .tree-item,
   .search-result-item {
     height: 35px;
     line-height: 35px;
     margin-bottom: 0px; }
-    /* line 36, ../sass/mobile/_tree.scss */
+    /* line 36, ../../../../general/res/sass/mobile/_tree.scss */
     .tree-item .view-control,
     .search-result-item .view-control {
       position: absolute;
@@ -4436,13 +4384,13 @@ ul.tree {
       right: 0px;
       width: 30px;
       text-align: center; }
-    /* line 45, ../sass/mobile/_tree.scss */
+    /* line 45, ../../../../general/res/sass/mobile/_tree.scss */
     .tree-item .label,
     .search-result-item .label {
       left: 0;
       right: 35px;
       line-height: 35px; }
-      /* line 50, ../sass/mobile/_tree.scss */
+      /* line 50, ../../../../general/res/sass/mobile/_tree.scss */
       .tree-item .label .type-icon,
       .search-result-item .label .type-icon {
         top: 9px;
@@ -4469,41 +4417,41 @@ ul.tree {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 25, ../sass/user-environ/_frame.scss */
+/* line 25, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame.child-frame.panel {
   background: #333;
   border: 1px solid #4d4d4d; }
-  /* line 28, ../sass/user-environ/_frame.scss */
+  /* line 28, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.child-frame.panel:hover {
     border-color: #666666; }
-/* line 32, ../sass/user-environ/_frame.scss */
+/* line 32, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame > .object-header.abs, .s-menu .frame > span.object-header.l-click-area {
   font-size: 0.75em;
   height: 16px;
   line-height: 16px; }
-/* line 38, ../sass/user-environ/_frame.scss */
+/* line 38, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame > .object-holder.abs, .s-menu .frame > span.object-holder.l-click-area {
   top: 21px; }
-/* line 41, ../sass/user-environ/_frame.scss */
+/* line 41, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame .contents {
   top: 5px;
   right: 5px;
   bottom: 5px;
   left: 5px; }
-/* line 49, ../sass/user-environ/_frame.scss */
+/* line 49, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame.frame-template .view-switcher {
   font-size: 80%;
   height: 16px;
   line-height: 16px;
   z-index: 10; }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 58, ../sass/user-environ/_frame.scss */
+  /* line 58, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.frame-template .view-switcher {
     opacity: 0; }
-  /* line 61, ../sass/user-environ/_frame.scss */
+  /* line 61, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.frame-template:hover .view-switcher {
     opacity: 1; } }
-/* line 69, ../sass/user-environ/_frame.scss */
+/* line 69, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame .view-switcher .title-label {
   display: none; }
 
@@ -4528,7 +4476,7 @@ ul.tree {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 23, ../sass/user-environ/_top-bar.scss */
+/* line 23, ../../../../general/res/sass/user-environ/_top-bar.scss */
 .top-bar.browse, .top-bar.edit {
   border-bottom: 1px solid #4d4d4d;
   top: 10px;
@@ -4537,19 +4485,19 @@ ul.tree {
   left: 10px;
   height: 30px;
   line-height: 24px; }
-/* line 31, ../sass/user-environ/_top-bar.scss */
+/* line 31, ../../../../general/res/sass/user-environ/_top-bar.scss */
 .top-bar .title {
   color: #fff; }
-/* line 35, ../sass/user-environ/_top-bar.scss */
+/* line 35, ../../../../general/res/sass/user-environ/_top-bar.scss */
 .top-bar .buttons-main {
   font-size: 0.8em;
   left: auto;
   text-align: right; }
 
-/* line 48, ../sass/user-environ/_top-bar.scss */
+/* line 48, ../../../../general/res/sass/user-environ/_top-bar.scss */
 .edit-mode .top-bar .buttons-main {
   white-space: nowrap; }
-  /* line 52, ../sass/user-environ/_top-bar.scss */
+  /* line 52, ../../../../general/res/sass/user-environ/_top-bar.scss */
   .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .s-menu span.buttons-main.l-click-area, .s-menu .edit-mode .top-bar span.buttons-main.l-click-area {
     bottom: auto;
     left: auto; }
@@ -4575,12 +4523,12 @@ ul.tree {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/user-environ/_bottom-bar.scss */
+/* line 22, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
 .ue-bottom-bar {
   background: #000;
   color: gray;
   font-size: .7rem; }
-  /* line 28, ../sass/user-environ/_bottom-bar.scss */
+  /* line 28, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
   .ue-bottom-bar .status-holder {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -4599,7 +4547,7 @@ ul.tree {
     line-height: 15px;
     right: 120px;
     text-transform: uppercase; }
-  /* line 39, ../sass/user-environ/_bottom-bar.scss */
+  /* line 39, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
   .ue-bottom-bar .app-logo {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -4614,23 +4562,23 @@ ul.tree {
     height: auto;
     left: auto;
     cursor: pointer; }
-    /* line 48, ../sass/user-environ/_bottom-bar.scss */
+    /* line 48, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
     .ue-bottom-bar .app-logo.logo-openmctweb {
-      background: url("../images/logo-openmctweb.svg") no-repeat center center; }
+      background: url("../../../../general/res/images/logo-openmctweb.svg") no-repeat center center; }
 
-/* line 54, ../sass/user-environ/_bottom-bar.scss */
+/* line 54, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
 .status.block {
   display: inline;
   margin-right: 10px; }
-  /* line 58, ../sass/user-environ/_bottom-bar.scss */
+  /* line 58, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
   .status.block .status-indicator {
     display: inline-block;
     margin-right: 3px;
     color: #0099cc; }
-    /* line 65, ../sass/user-environ/_bottom-bar.scss */
+    /* line 65, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
     .status.block .status-indicator.ok {
       color: #009900; }
-    /* line 68, ../sass/user-environ/_bottom-bar.scss */
+    /* line 68, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
     .status.block .status-indicator.caution {
       color: #ffaa00; }
 
@@ -4655,13 +4603,13 @@ ul.tree {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/user-environ/_tool-bar.scss */
+/* line 22, ../../../../general/res/sass/user-environ/_tool-bar.scss */
 .tool-bar {
   border-bottom: 1px solid #4d4d4d; }
-  /* line 24, ../sass/user-environ/_tool-bar.scss */
+  /* line 24, ../../../../general/res/sass/user-environ/_tool-bar.scss */
   .tool-bar .l-control-group {
     height: 25px; }
-  /* line 27, ../sass/user-environ/_tool-bar.scss */
+  /* line 27, ../../../../general/res/sass/user-environ/_tool-bar.scss */
   .tool-bar input[type="text"] {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -4670,10 +4618,10 @@ ul.tree {
     height: 25px;
     margin-bottom: 1px;
     position: relative; }
-    /* line 33, ../sass/user-environ/_tool-bar.scss */
+    /* line 33, ../../../../general/res/sass/user-environ/_tool-bar.scss */
     .tool-bar input[type="text"].sm {
       width: 25px; }
-  /* line 37, ../sass/user-environ/_tool-bar.scss */
+  /* line 37, ../../../../general/res/sass/user-environ/_tool-bar.scss */
   .tool-bar .input-labeled label {
     font-size: 11.25px; }
 
@@ -4699,7 +4647,7 @@ ul.tree {
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/
-/* line 23, ../sass/_fixed-position.scss */
+/* line 23, ../../../../general/res/sass/_fixed-position.scss */
 .t-fixed-position.l-fixed-position {
   position: absolute;
   top: 0;
@@ -4708,33 +4656,33 @@ ul.tree {
   left: 0;
   width: auto;
   height: auto; }
-  /* line 33, ../sass/_fixed-position.scss */
+  /* line 33, ../../../../general/res/sass/_fixed-position.scss */
   .t-fixed-position.l-fixed-position .l-grid-holder {
     position: relative;
     height: 100%;
     width: 100%; }
-    /* line 37, ../sass/_fixed-position.scss */
+    /* line 37, ../../../../general/res/sass/_fixed-position.scss */
     .t-fixed-position.l-fixed-position .l-grid-holder .l-grid {
       position: absolute;
       height: 100%;
       width: 100%;
       pointer-events: none;
       z-index: 0; }
-/* line 48, ../sass/_fixed-position.scss */
+/* line 48, ../../../../general/res/sass/_fixed-position.scss */
 .t-fixed-position .l-fixed-position-item {
   position: absolute;
   border: 1px solid transparent; }
-  /* line 52, ../sass/_fixed-position.scss */
+  /* line 52, ../../../../general/res/sass/_fixed-position.scss */
   .t-fixed-position .l-fixed-position-item.s-selected {
     -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
     -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
     box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
     border-color: #0099cc;
     cursor: move; }
-  /* line 57, ../sass/_fixed-position.scss */
+  /* line 57, ../../../../general/res/sass/_fixed-position.scss */
   .t-fixed-position .l-fixed-position-item.s-not-selected {
     opacity: 0.8; }
-  /* line 61, ../sass/_fixed-position.scss */
+  /* line 61, ../../../../general/res/sass/_fixed-position.scss */
   .t-fixed-position .l-fixed-position-item .l-fixed-position-box,
   .t-fixed-position .l-fixed-position-item .l-fixed-position-image,
   .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
@@ -4743,35 +4691,35 @@ ul.tree {
     box-sizing: border-box;
     height: 100%;
     width: 100%; }
-  /* line 72, ../sass/_fixed-position.scss */
+  /* line 72, ../../../../general/res/sass/_fixed-position.scss */
   .t-fixed-position .l-fixed-position-item .l-fixed-position-image {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center; }
-  /* line 78, ../sass/_fixed-position.scss */
+  /* line 78, ../../../../general/res/sass/_fixed-position.scss */
   .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
     text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
     border: 1px solid transparent;
     font-size: 0.8rem;
     line-height: 100%; }
-    /* line 84, ../sass/_fixed-position.scss */
+    /* line 84, ../../../../general/res/sass/_fixed-position.scss */
     .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text {
       padding: 1px; }
-    /* line 89, ../sass/_fixed-position.scss */
+    /* line 89, ../../../../general/res/sass/_fixed-position.scss */
     .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
       display: block;
       padding: 2px; }
-      /* line 96, ../sass/_fixed-position.scss */
+      /* line 96, ../../../../general/res/sass/_fixed-position.scss */
       .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-title {
         float: none;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         width: auto; }
-      /* line 105, ../sass/_fixed-position.scss */
+      /* line 105, ../../../../general/res/sass/_fixed-position.scss */
       .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value {
         -moz-border-radius: 2px;
         -webkit-border-radius: 2px;
@@ -4781,18 +4729,18 @@ ul.tree {
         padding-left: 5px;
         padding-right: 5px;
         text-align: right; }
-        /* line 116, ../sass/_fixed-position.scss */
+        /* line 116, ../../../../general/res/sass/_fixed-position.scss */
         .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value.telem-only {
           margin-left: 0;
           width: 100%; }
-/* line 126, ../sass/_fixed-position.scss */
+/* line 126, ../../../../general/res/sass/_fixed-position.scss */
 .t-fixed-position .l-fixed-position-item-handle {
   background: rgba(0, 153, 204, 0.5);
   cursor: crosshair;
   border: 1px solid #0099cc;
   position: absolute; }
 
-/* line 140, ../sass/_fixed-position.scss */
+/* line 140, ../../../../general/res/sass/_fixed-position.scss */
 .edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-x {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
   background-size: 100%;
@@ -4800,7 +4748,7 @@ ul.tree {
   background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
   background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
   background-repeat: repeat-x; }
-/* line 144, ../sass/_fixed-position.scss */
+/* line 144, ../../../../general/res/sass/_fixed-position.scss */
 .edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-y {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
   background-size: 100%;
@@ -4808,10 +4756,10 @@ ul.tree {
   background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
   background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
   background-repeat: repeat-y; }
-/* line 152, ../sass/_fixed-position.scss */
+/* line 152, ../../../../general/res/sass/_fixed-position.scss */
 .edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected) {
   border: 1px dotted rgba(0, 153, 204, 0.75); }
-  /* line 154, ../sass/_fixed-position.scss */
+  /* line 154, ../../../../general/res/sass/_fixed-position.scss */
   .edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover {
     border: 1px dotted #0099cc; }
 
@@ -4836,12 +4784,12 @@ ul.tree {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/lists/_tabular.scss */
+/* line 22, ../../../../general/res/sass/lists/_tabular.scss */
 .w1, .w2 {
   position: relative;
   height: 100%; }
 
-/* line 27, ../sass/lists/_tabular.scss */
+/* line 27, ../../../../general/res/sass/lists/_tabular.scss */
 .tabular,
 table {
   -moz-box-sizing: border-box;
@@ -4854,7 +4802,7 @@ table {
   font-size: 0.75rem;
   position: relative;
   width: 100%; }
-  /* line 38, ../sass/lists/_tabular.scss */
+  /* line 38, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular thead, .tabular .thead,
   .tabular tbody tr, .tabular .tbody .tr,
   table thead,
@@ -4862,34 +4810,34 @@ table {
   table tbody tr,
   table .tbody .tr {
     width: 100%; }
-  /* line 44, ../sass/lists/_tabular.scss */
+  /* line 44, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular thead, .tabular .thead,
   table thead,
   table .thead {
     border-bottom: 1px solid #333; }
-  /* line 47, ../sass/lists/_tabular.scss */
+  /* line 47, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular tbody, .tabular .tbody,
   table tbody,
   table .tbody {
     display: table-row-group; }
-    /* line 54, ../sass/lists/_tabular.scss */
+    /* line 54, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tbody tr:hover, .tabular tbody .tr:hover, .tabular .tbody tr:hover, .tabular .tbody .tr:hover,
     table tbody tr:hover,
     table tbody .tr:hover,
     table .tbody tr:hover,
     table .tbody .tr:hover {
       background: rgba(255, 255, 255, 0.1); }
-  /* line 59, ../sass/lists/_tabular.scss */
+  /* line 59, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular tr, .tabular .tr,
   table tr,
   table .tr {
     display: table-row; }
-    /* line 61, ../sass/lists/_tabular.scss */
+    /* line 61, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr:first-child .td, .tabular .tr:first-child .td,
     table tr:first-child .td,
     table .tr:first-child .td {
       border-top: none; }
-    /* line 65, ../sass/lists/_tabular.scss */
+    /* line 65, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr.group-header td, .tabular tr.group-header .td, .tabular .tr.group-header td, .tabular .tr.group-header .td,
     table tr.group-header td,
     table tr.group-header .td,
@@ -4897,7 +4845,7 @@ table {
     table .tr.group-header .td {
       background-color: #404040;
       color: #a6a6a6; }
-    /* line 71, ../sass/lists/_tabular.scss */
+    /* line 71, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr th, .tabular tr .th, .tabular tr td, .tabular tr .td, .tabular .tr th, .tabular .tr .th, .tabular .tr td, .tabular .tr .td,
     table tr th,
     table tr .th,
@@ -4908,7 +4856,7 @@ table {
     table .tr td,
     table .tr .td {
       display: table-cell; }
-    /* line 74, ../sass/lists/_tabular.scss */
+    /* line 74, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr th, .tabular tr .th, .tabular .tr th, .tabular .tr .th,
     table tr th,
     table tr .th,
@@ -4920,14 +4868,14 @@ table {
       padding: 5px 5px;
       white-space: nowrap;
       vertical-align: middle; }
-      /* line 81, ../sass/lists/_tabular.scss */
+      /* line 81, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th:first-child, .tabular tr .th:first-child, .tabular .tr th:first-child, .tabular .tr .th:first-child,
       table tr th:first-child,
       table tr .th:first-child,
       table .tr th:first-child,
       table .tr .th:first-child {
         border-left: none; }
-      /* line 85, ../sass/lists/_tabular.scss */
+      /* line 85, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sort.sort:after, .tabular tr .th.sort.sort:after, .tabular .tr th.sort.sort:after, .tabular .tr .th.sort.sort:after,
       table tr th.sort.sort:after,
       table tr .th.sort.sort:after,
@@ -4939,21 +4887,21 @@ table {
         content: "\ed";
         display: inline-block;
         margin-left: 3px; }
-      /* line 93, ../sass/lists/_tabular.scss */
+      /* line 93, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sort.sort.desc:after, .tabular tr .th.sort.sort.desc:after, .tabular .tr th.sort.sort.desc:after, .tabular .tr .th.sort.sort.desc:after,
       table tr th.sort.sort.desc:after,
       table tr .th.sort.sort.desc:after,
       table .tr th.sort.sort.desc:after,
       table .tr .th.sort.sort.desc:after {
         content: "\ec"; }
-      /* line 97, ../sass/lists/_tabular.scss */
+      /* line 97, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sortable, .tabular tr .th.sortable, .tabular .tr th.sortable, .tabular .tr .th.sortable,
       table tr th.sortable,
       table tr .th.sortable,
       table .tr th.sortable,
       table .tr .th.sortable {
         cursor: pointer; }
-    /* line 101, ../sass/lists/_tabular.scss */
+    /* line 101, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr td, .tabular tr .td, .tabular .tr td, .tabular .tr .td,
     table tr td,
     table tr .td,
@@ -4965,21 +4913,21 @@ table {
       padding: 3px 5px;
       word-wrap: break-word;
       vertical-align: top; }
-      /* line 108, ../sass/lists/_tabular.scss */
+      /* line 108, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr td.numeric, .tabular tr .td.numeric, .tabular .tr td.numeric, .tabular .tr .td.numeric,
       table tr td.numeric,
       table tr .td.numeric,
       table .tr td.numeric,
       table .tr .td.numeric {
         text-align: right; }
-      /* line 111, ../sass/lists/_tabular.scss */
+      /* line 111, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr td.s-cell-type-value, .tabular tr .td.s-cell-type-value, .tabular .tr td.s-cell-type-value, .tabular .tr .td.s-cell-type-value,
       table tr td.s-cell-type-value,
       table tr .td.s-cell-type-value,
       table .tr td.s-cell-type-value,
       table .tr .td.s-cell-type-value {
         text-align: right; }
-        /* line 113, ../sass/lists/_tabular.scss */
+        /* line 113, ../../../../general/res/sass/lists/_tabular.scss */
         .tabular tr td.s-cell-type-value .l-cell-contents, .tabular tr .td.s-cell-type-value .l-cell-contents, .tabular .tr td.s-cell-type-value .l-cell-contents, .tabular .tr .td.s-cell-type-value .l-cell-contents,
         table tr td.s-cell-type-value .l-cell-contents,
         table tr .td.s-cell-type-value .l-cell-contents,
@@ -4990,23 +4938,23 @@ table {
           border-radius: 2px;
           padding-left: 5px;
           padding-right: 5px; }
-  /* line 129, ../sass/lists/_tabular.scss */
+  /* line 129, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.filterable tbody, .tabular.filterable .tbody,
   table.filterable tbody,
   table.filterable .tbody {
     top: 44px; }
-  /* line 132, ../sass/lists/_tabular.scss */
+  /* line 132, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.filterable input[type="text"],
   table.filterable input[type="text"] {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     width: 100%; }
-  /* line 138, ../sass/lists/_tabular.scss */
+  /* line 138, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.fixed-header,
   table.fixed-header {
     height: 100%; }
-    /* line 140, ../sass/lists/_tabular.scss */
+    /* line 140, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead,
     .tabular.fixed-header tbody tr, .tabular.fixed-header .tbody .tr,
     table.fixed-header thead,
@@ -5015,12 +4963,12 @@ table {
     table.fixed-header .tbody .tr {
       display: table;
       table-layout: fixed; }
-    /* line 145, ../sass/lists/_tabular.scss */
+    /* line 145, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead,
     table.fixed-header thead,
     table.fixed-header .thead {
       width: calc(100% - 10px); }
-      /* line 147, ../sass/lists/_tabular.scss */
+      /* line 147, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular.fixed-header thead:before, .tabular.fixed-header .thead:before,
       table.fixed-header thead:before,
       table.fixed-header .thead:before {
@@ -5031,7 +4979,7 @@ table {
         width: 100%;
         height: 22px;
         background: rgba(255, 255, 255, 0.15); }
-    /* line 157, ../sass/lists/_tabular.scss */
+    /* line 157, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header tbody, .tabular.fixed-header .tbody,
     table.fixed-header tbody,
     table.fixed-header .tbody {
@@ -5046,7 +4994,7 @@ table {
       top: 22px;
       display: block;
       overflow-y: scroll; }
-  /* line 165, ../sass/lists/_tabular.scss */
+  /* line 165, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.t-event-messages td, .tabular.t-event-messages .td,
   table.t-event-messages td,
   table.t-event-messages .td {
@@ -5073,7 +5021,7 @@ table {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 31, ../sass/plots/_plots-main.scss */
+/* line 31, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot {
   color: #999;
   font-size: 0.7rem;
@@ -5081,10 +5029,10 @@ table {
   width: 100%;
   height: 100%;
   /****************************** Limits and Out-of-Bounds data */ }
-  /* line 38, ../sass/plots/_plots-main.scss */
+  /* line 38, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-axis-area {
     position: absolute; }
-    /* line 41, ../sass/plots/_plots-main.scss */
+    /* line 41, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-axis-area.gl-plot-x {
       top: auto;
       right: 0;
@@ -5093,14 +5041,14 @@ table {
       height: 32px;
       width: auto;
       overflow: hidden; }
-    /* line 50, ../sass/plots/_plots-main.scss */
+    /* line 50, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-axis-area.gl-plot-y {
       top: 25px;
       right: auto;
       bottom: 37px;
       left: 0;
       width: 60px; }
-  /* line 59, ../sass/plots/_plots-main.scss */
+  /* line 59, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-coords {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -5117,10 +5065,10 @@ table {
     bottom: auto;
     left: 70px;
     z-index: 10; }
-    /* line 71, ../sass/plots/_plots-main.scss */
+    /* line 71, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-coords:empty {
       display: none; }
-  /* line 76, ../sass/plots/_plots-main.scss */
+  /* line 76, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-display-area {
     position: absolute;
     top: 25px;
@@ -5129,13 +5077,13 @@ table {
     left: 60px;
     cursor: crosshair;
     border: 1px solid #4d4d4d; }
-  /* line 86, ../sass/plots/_plots-main.scss */
+  /* line 86, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-label,
   .gl-plot .l-plot-label {
     color: #cccccc;
     position: absolute;
     text-align: center; }
-    /* line 94, ../sass/plots/_plots-main.scss */
+    /* line 94, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-label.gl-plot-x-label, .gl-plot .gl-plot-label.l-plot-x-label,
     .gl-plot .l-plot-label.gl-plot-x-label,
     .gl-plot .l-plot-label.l-plot-x-label {
@@ -5144,7 +5092,7 @@ table {
       bottom: 0;
       left: 0;
       height: auto; }
-    /* line 103, ../sass/plots/_plots-main.scss */
+    /* line 103, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-label.gl-plot-y-label, .gl-plot .gl-plot-label.l-plot-y-label,
     .gl-plot .l-plot-label.gl-plot-y-label,
     .gl-plot .l-plot-label.l-plot-y-label {
@@ -5161,7 +5109,7 @@ table {
       left: 0;
       top: 50%;
       white-space: nowrap; }
-  /* line 117, ../sass/plots/_plots-main.scss */
+  /* line 117, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-y-options {
     position: absolute;
     top: 50%;
@@ -5172,19 +5120,19 @@ table {
     height: auto;
     min-height: 32px;
     width: 32px; }
-  /* line 131, ../sass/plots/_plots-main.scss */
+  /* line 131, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-hash {
     position: absolute;
     border: 0 rgba(255, 255, 255, 0.3) dashed; }
-    /* line 134, ../sass/plots/_plots-main.scss */
+    /* line 134, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-hash.hash-v {
       border-right-width: 1px;
       height: 100%; }
-    /* line 138, ../sass/plots/_plots-main.scss */
+    /* line 138, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-hash.hash-h {
       border-bottom-width: 1px;
       width: 100%; }
-  /* line 144, ../sass/plots/_plots-main.scss */
+  /* line 144, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-legend {
     position: absolute;
     top: 0;
@@ -5194,24 +5142,24 @@ table {
     height: 20px;
     overflow-x: hidden;
     overflow-y: auto; }
-  /* line 157, ../sass/plots/_plots-main.scss */
+  /* line 157, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .l-limit-bar,
   .gl-plot .l-oob-data {
     position: absolute;
     left: 0;
     right: 0;
     width: auto; }
-  /* line 165, ../sass/plots/_plots-main.scss */
+  /* line 165, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .l-limit-bar {
     height: auto;
     z-index: 0; }
-    /* line 173, ../sass/plots/_plots-main.scss */
+    /* line 173, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-limit-bar.s-limit-yellow {
       background: rgba(157, 117, 0, 0.2); }
-    /* line 174, ../sass/plots/_plots-main.scss */
+    /* line 174, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-limit-bar.s-limit-red {
       background: rgba(170, 0, 0, 0.2); }
-  /* line 177, ../sass/plots/_plots-main.scss */
+  /* line 177, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .l-oob-data {
     overflow: hidden;
     position: absolute;
@@ -5224,7 +5172,7 @@ table {
     pointer-events: none;
     height: 10px;
     z-index: 1; }
-    /* line 185, ../sass/plots/_plots-main.scss */
+    /* line 185, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-oob-data.l-oob-data-up {
       top: 0;
       bottom: auto;
@@ -5233,7 +5181,7 @@ table {
       background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
       background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
       background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
-    /* line 190, ../sass/plots/_plots-main.scss */
+    /* line 190, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-oob-data.l-oob-data-dwn {
       bottom: 0;
       top: auto;
@@ -5243,7 +5191,7 @@ table {
       background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
       background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
 
-/* line 200, ../sass/plots/_plots-main.scss */
+/* line 200, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-legend .plot-legend-item,
 .gl-plot-legend .legend-item,
 .legend .plot-legend-item,
@@ -5251,13 +5199,13 @@ table {
   display: inline-block;
   margin-right: 10px;
   margin-bottom: 3px; }
-  /* line 205, ../sass/plots/_plots-main.scss */
+  /* line 205, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-legend .plot-legend-item span,
   .gl-plot-legend .legend-item span,
   .legend .plot-legend-item span,
   .legend .legend-item span {
     vertical-align: middle; }
-  /* line 208, ../sass/plots/_plots-main.scss */
+  /* line 208, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-legend .plot-legend-item .plot-color-swatch,
   .gl-plot-legend .plot-legend-item .color-swatch,
   .gl-plot-legend .legend-item .plot-color-swatch,
@@ -5273,7 +5221,7 @@ table {
     height: 8px;
     width: 8px; }
 
-/* line 221, ../sass/plots/_plots-main.scss */
+/* line 221, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-legend .plot-legend-item {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -5281,22 +5229,22 @@ table {
   color: #fff;
   line-height: 1.5em;
   padding: 0px 5px; }
-  /* line 227, ../sass/plots/_plots-main.scss */
+  /* line 227, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-legend .plot-legend-item .plot-color-swatch {
     border: 1px solid #333;
     height: 9px;
     width: 9px; }
 
-/* line 235, ../sass/plots/_plots-main.scss */
+/* line 235, ../../../../general/res/sass/plots/_plots-main.scss */
 .tick {
   position: absolute;
   border: 0 rgba(255, 255, 255, 0.3) solid; }
-  /* line 238, ../sass/plots/_plots-main.scss */
+  /* line 238, ../../../../general/res/sass/plots/_plots-main.scss */
   .tick.tick-x {
     border-right-width: 1px;
     height: 100%; }
 
-/* line 244, ../sass/plots/_plots-main.scss */
+/* line 244, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-tick,
 .tick-label {
   font-size: 0.7rem;
@@ -5304,7 +5252,7 @@ table {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis; }
-  /* line 252, ../sass/plots/_plots-main.scss */
+  /* line 252, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x,
   .tick-label.gl-plot-x-tick-label,
   .tick-label.tick-label-x {
@@ -5315,7 +5263,7 @@ table {
     width: 20%;
     margin-left: -10%;
     text-align: center; }
-  /* line 262, ../sass/plots/_plots-main.scss */
+  /* line 262, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y,
   .tick-label.gl-plot-y-tick-label,
   .tick-label.tick-label-y {
@@ -5325,18 +5273,18 @@ table {
     margin-bottom: -0.5em;
     text-align: right; }
 
-/* line 274, ../sass/plots/_plots-main.scss */
+/* line 274, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-tick.gl-plot-x-tick-label {
   top: 5px; }
-/* line 277, ../sass/plots/_plots-main.scss */
+/* line 277, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-tick.gl-plot-y-tick-label {
   right: 5px;
   left: 5px; }
 
-/* line 284, ../sass/plots/_plots-main.scss */
+/* line 284, ../../../../general/res/sass/plots/_plots-main.scss */
 .tick-label.tick-label-x {
   top: 0; }
-/* line 287, ../sass/plots/_plots-main.scss */
+/* line 287, ../../../../general/res/sass/plots/_plots-main.scss */
 .tick-label.tick-label-y {
   right: 0;
   left: 0; }
@@ -5363,7 +5311,7 @@ table {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* Styles for the iframe EmbeddedPageController element */
-/* line 25, ../sass/_iframe.scss */
+/* line 25, ../../../../general/res/sass/_iframe.scss */
 .l-iframe iframe {
   display: block;
   height: 100%;
@@ -5391,15 +5339,15 @@ table {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /******************************** BROWSE */
-/* line 27, ../sass/_hide-non-functional.scss */
+/* line 27, ../../../../general/res/sass/_hide-non-functional.scss */
 .browse-mode .browse.top-bar {
   display: none; }
-/* line 32, ../sass/_hide-non-functional.scss */
+/* line 32, ../../../../general/res/sass/_hide-non-functional.scss */
 .browse-mode .browse-area.holder {
   top: 10px; }
 
 /* Styles for sub-dividing views generically */
-/* line 3, ../sass/_views.scss */
+/* line 3, ../../../../general/res/sass/_views.scss */
 .l-view-section {
   overflow: hidden;
   position: absolute;
@@ -5410,17 +5358,17 @@ table {
   width: auto;
   height: auto;
   font-size: 0.8rem; }
-  /* line 6, ../sass/_views.scss */
+  /* line 6, ../../../../general/res/sass/_views.scss */
   .l-view-section h2 {
     color: #fff;
     margin-bottom: 5px; }
-  /* line 10, ../sass/_views.scss */
+  /* line 10, ../../../../general/res/sass/_views.scss */
   .l-view-section.fixed {
     font-size: 0.8em; }
-  /* line 13, ../sass/_views.scss */
+  /* line 13, ../../../../general/res/sass/_views.scss */
   .l-view-section.scrolling {
     overflow: auto; }
-  /* line 16, ../sass/_views.scss */
+  /* line 16, ../../../../general/res/sass/_views.scss */
   .l-view-section .controls,
   .l-view-section label,
   .l-view-section .inline-block {
@@ -5447,22 +5395,25 @@ table {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/items/_item.scss */
+/* line 22, ../../../../general/res/sass/items/_item.scss */
 .items-holder {
   overflow: hidden;
   *zoom: 1;
   overflow-y: auto; }
-  /* line 25, ../sass/items/_item.scss */
+  /* line 25, ../../../../general/res/sass/items/_item.scss */
   .items-holder .contents {
     top: 0; }
-  /* line 29, ../sass/items/_item.scss */
+  /* line 29, ../../../../general/res/sass/items/_item.scss */
   .items-holder .item.grid-item {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5e5e5e), color-stop(100%, #525252));
-    background-image: -moz-linear-gradient(#5e5e5e, #525252);
-    background-image: -webkit-linear-gradient(#5e5e5e, #525252);
-    background-image: linear-gradient(#5e5e5e, #525252);
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
+    background-image: -moz-linear-gradient(#4d4d4d, #404040);
+    background-image: -webkit-linear-gradient(#4d4d4d, #404040);
+    background-image: linear-gradient(#4d4d4d, #404040);
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -5475,6 +5426,7 @@ table {
     border: none;
     color: #999;
     display: inline-block;
+    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
     box-sizing: border-box;
     cursor: pointer;
     float: left;
@@ -5483,61 +5435,61 @@ table {
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 167, ../sass/_mixins.scss */
+    /* line 167, ../../../../general/res/sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #707070), color-stop(100%, #636363));
-      background-image: -moz-linear-gradient(#707070, #636363);
-      background-image: -webkit-linear-gradient(#707070, #636363);
-      background-image: linear-gradient(#707070, #636363);
-      color: #bdbdbd; }
-    /* line 216, ../sass/_mixins.scss */
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5e5e5e), color-stop(100%, #525252));
+      background-image: -moz-linear-gradient(#5e5e5e, #525252);
+      background-image: -webkit-linear-gradient(#5e5e5e, #525252);
+      background-image: linear-gradient(#5e5e5e, #525252);
+      color: #ababab; }
+    /* line 218, ../../../../general/res/sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
       color: #0099cc; }
-    /* line 222, ../sass/_mixins.scss */
+    /* line 224, ../../../../general/res/sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):not(.paused):hover .icon {
       color: #33ccff; }
-    /* line 46, ../sass/items/_item.scss */
+    /* line 46, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: deepskyblue !important; }
-      /* line 48, ../sass/items/_item.scss */
+      /* line 48, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
         color: #49dedb; }
-    /* line 52, ../sass/items/_item.scss */
+    /* line 52, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-open {
       opacity: 1; }
-    /* line 57, ../sass/items/_item.scss */
+    /* line 57, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
       top: 10px;
       right: 10px;
       bottom: 10px;
       left: 10px; }
-    /* line 63, ../sass/items/_item.scss */
+    /* line 63, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar {
       bottom: auto;
       height: 20px;
       line-height: 20px;
       text-align: right;
       z-index: 5; }
-      /* line 69, ../sass/items/_item.scss */
+      /* line 69, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
         width: auto; }
-        /* line 71, ../sass/items/_item.scss */
+        /* line 71, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
           margin-left: 3px; }
-          /* line 73, ../sass/items/_item.scss */
+          /* line 73, ../../../../general/res/sass/items/_item.scss */
           .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
             color: #49dedb; }
-    /* line 79, ../sass/items/_item.scss */
+    /* line 79, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
       top: auto;
       line-height: 110%; }
-    /* line 85, ../sass/items/_item.scss */
+    /* line 85, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 91, ../sass/items/_item.scss */
+      /* line 91, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         overflow: false;
         position: absolute;
@@ -5553,7 +5505,7 @@ table {
         bottom: auto;
         height: 102px;
         top: 30px; }
-        /* line 103, ../sass/items/_item.scss */
+        /* line 103, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .item-main .item-type .l-icon-link {
           color: #49dedb;
           height: auto;
@@ -5563,7 +5515,7 @@ table {
           left: 0px;
           bottom: 10px;
           z-index: 2; }
-      /* line 116, ../sass/items/_item.scss */
+      /* line 116, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -5583,27 +5535,30 @@ table {
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 128, ../sass/items/_item.scss */
+    /* line 128, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: #cccccc; }
-    /* line 133, ../sass/items/_item.scss */
+    /* line 133, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       font-size: 0.8em; }
-    /* line 137, ../sass/items/_item.scss */
+    /* line 137, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      -moz-border-radius: 3px;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0ac2ff), color-stop(100%, #00b4f0));
-      background-image: -moz-linear-gradient(#0ac2ff, #00b4f0);
-      background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
-      background-image: linear-gradient(#0ac2ff, #00b4f0);
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00ace6), color-stop(100%, #0099cc));
+      background-image: -moz-linear-gradient(#00ace6, #0099cc);
+      background-image: -webkit-linear-gradient(#00ace6, #0099cc);
+      background-image: linear-gradient(#00ace6, #0099cc);
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
@@ -5616,32 +5571,33 @@ table {
       border: none;
       color: #999;
       display: inline-block;
+      text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
       color: #80dfff; }
-      /* line 167, ../sass/_mixins.scss */
+      /* line 167, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):hover {
-        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
-        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2ecbff), color-stop(100%, #14c4ff));
-        background-image: -moz-linear-gradient(#2ecbff, #14c4ff);
-        background-image: -webkit-linear-gradient(#2ecbff, #14c4ff);
-        background-image: linear-gradient(#2ecbff, #14c4ff);
-        color: #bdbdbd; }
-      /* line 216, ../sass/_mixins.scss */
+        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0ac2ff), color-stop(100%, #00b4f0));
+        background-image: -moz-linear-gradient(#0ac2ff, #00b4f0);
+        background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
+        background-image: linear-gradient(#0ac2ff, #00b4f0);
+        color: #ababab; }
+      /* line 218, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
         color: #0099cc; }
-      /* line 222, ../sass/_mixins.scss */
+      /* line 224, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):not(.paused):hover .icon {
         color: #33ccff; }
-      /* line 142, ../sass/items/_item.scss */
+      /* line 142, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 143, ../sass/items/_item.scss */
+      /* line 143, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 144, ../sass/items/_item.scss */
+      /* line 144, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 146, ../sass/items/_item.scss */
+      /* line 146, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 
@@ -5667,16 +5623,16 @@ table {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 29, ../sass/mobile/_item.scss */
+  /* line 29, ../../../../general/res/sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     width: 100%; }
-    /* line 33, ../sass/mobile/_item.scss */
+    /* line 33, ../../../../general/res/sass/mobile/_item.scss */
     .items-holder .item.grid-item > .contents {
       top: 0px;
       right: 10px;
       bottom: 0px;
       left: 10px; }
-    /* line 37, ../sass/mobile/_item.scss */
+    /* line 37, ../../../../general/res/sass/mobile/_item.scss */
     .items-holder .item.grid-item .bar.top-bar {
       bottom: 0 !important;
       left: auto !important;
@@ -5684,11 +5640,11 @@ table {
       width: 40px !important;
       height: auto !important;
       text-align: right; }
-    /* line 44, ../sass/mobile/_item.scss */
+    /* line 44, ../../../../general/res/sass/mobile/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
       left: 40px;
       right: 60px; }
-    /* line 52, ../sass/mobile/_item.scss */
+    /* line 52, ../../../../general/res/sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       font-size: 30px;
       right: auto;
@@ -5697,53 +5653,53 @@ table {
       line-height: 100%;
       text-align: left;
       width: 30px; }
-      /* line 61, ../sass/mobile/_item.scss */
+      /* line 61, ../../../../general/res/sass/mobile/_item.scss */
       .items-holder .item.grid-item .item-main .item-type .l-icon-link {
         bottom: 0; }
-    /* line 65, ../sass/mobile/_item.scss */
+    /* line 65, ../../../../general/res/sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-open {
       display: block;
       opacity: 1;
       font-size: 1em;
       width: auto; } }
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 29, ../sass/mobile/_item.scss */
+  /* line 29, ../../../../general/res/sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     height: 50px; }
-    /* line 78, ../sass/mobile/_item.scss */
+    /* line 78, ../../../../general/res/sass/mobile/_item.scss */
     .items-holder .item.grid-item .bar.top-bar {
       line-height: 50px !important; }
-    /* line 82, ../sass/mobile/_item.scss */
+    /* line 82, ../../../../general/res/sass/mobile/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
       top: 7px;
       bottom: auto;
       height: 35px; }
-    /* line 87, ../sass/mobile/_item.scss */
+    /* line 87, ../../../../general/res/sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       top: 10px;
       bottom: auto;
       height: 30px; }
-    /* line 90, ../sass/mobile/_item.scss */
+    /* line 90, ../../../../general/res/sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-open {
       line-height: 50px; } }
 @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
-  /* line 29, ../sass/mobile/_item.scss */
+  /* line 29, ../../../../general/res/sass/mobile/_item.scss */
   .items-holder .item.grid-item {
     height: 66px; }
-    /* line 100, ../sass/mobile/_item.scss */
+    /* line 100, ../../../../general/res/sass/mobile/_item.scss */
     .items-holder .item.grid-item .bar.top-bar {
       line-height: 66px !important; }
-    /* line 104, ../sass/mobile/_item.scss */
+    /* line 104, ../../../../general/res/sass/mobile/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
       top: 15px;
       bottom: auto;
       height: 35px; }
-    /* line 109, ../sass/mobile/_item.scss */
+    /* line 109, ../../../../general/res/sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-type {
       top: 18px;
       bottom: auto;
       height: 30px; }
-    /* line 112, ../sass/mobile/_item.scss */
+    /* line 112, ../../../../general/res/sass/mobile/_item.scss */
     .items-holder .item.grid-item .item-main .item-open {
       line-height: 66px; } }
 
@@ -5769,10 +5725,10 @@ table {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 22, ../sass/_autoflow.scss */
+/* line 22, ../../../../general/res/sass/_autoflow.scss */
 .autoflow {
   font-size: 0.75rem; }
-  /* line 32, ../sass/_autoflow.scss */
+  /* line 32, ../../../../general/res/sass/_autoflow.scss */
   .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu {
     -moz-transition-property: visibility, opacity, background-color, border-color;
     -o-transition-property: visibility, opacity, background-color, border-color;
@@ -5787,16 +5743,16 @@ table {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     opacity: 1; }
-  /* line 40, ../sass/_autoflow.scss */
+  /* line 40, ../../../../general/res/sass/_autoflow.scss */
   .autoflow .l-autoflow-header {
     bottom: auto;
     height: 22px;
     line-height: 22px;
     min-width: 225px; }
-    /* line 45, ../sass/_autoflow.scss */
+    /* line 45, ../../../../general/res/sass/_autoflow.scss */
     .autoflow .l-autoflow-header span {
       vertical-align: middle; }
-    /* line 48, ../sass/_autoflow.scss */
+    /* line 48, ../../../../general/res/sass/_autoflow.scss */
     .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu {
       -moz-transition-property: visibility, opacity, background-color, border-color;
       -o-transition-property: visibility, opacity, background-color, border-color;
@@ -5811,19 +5767,19 @@ table {
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       opacity: 0; }
-    /* line 52, ../sass/_autoflow.scss */
+    /* line 52, ../../../../general/res/sass/_autoflow.scss */
     .autoflow .l-autoflow-header .l-filter {
       margin-left: 5px; }
-      /* line 54, ../sass/_autoflow.scss */
+      /* line 54, ../../../../general/res/sass/_autoflow.scss */
       .autoflow .l-autoflow-header .l-filter input.t-filter-input {
         width: 100px; }
-  /* line 60, ../sass/_autoflow.scss */
+  /* line 60, ../../../../general/res/sass/_autoflow.scss */
   .autoflow .l-autoflow-items {
     overflow-x: scroll;
     overflow-y: hidden;
     top: 32px;
     white-space: nowrap; }
-    /* line 66, ../sass/_autoflow.scss */
+    /* line 66, ../../../../general/res/sass/_autoflow.scss */
     .autoflow .l-autoflow-items .l-autoflow-col {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
@@ -5834,7 +5790,7 @@ table {
       padding-right: 5px;
       vertical-align: top;
       width: 225px; }
-      /* line 76, ../sass/_autoflow.scss */
+      /* line 76, ../../../../general/res/sass/_autoflow.scss */
       .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
@@ -5846,37 +5802,37 @@ table {
         margin-bottom: 1px;
         margin-top: 1px;
         position: relative; }
-        /* line 85, ../sass/_autoflow.scss */
+        /* line 85, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:first-child {
           border-top: none; }
-        /* line 88, ../sass/_autoflow.scss */
+        /* line 88, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:hover {
           background: rgba(255, 255, 255, 0.1); }
-        /* line 93, ../sass/_autoflow.scss */
+        /* line 93, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.s-stale .l-autoflow-item.l {
           color: rgba(255, 255, 255, 0.3) !important;
           font-style: italic; }
-        /* line 94, ../sass/_autoflow.scss */
+        /* line 94, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.s-stale .l-autoflow-item.r {
           color: rgba(255, 255, 255, 0.5) !important;
           font-style: italic; }
-        /* line 97, ../sass/_autoflow.scss */
+        /* line 97, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:not(.s-stale) .l-autoflow-item.r {
           color: #b3b3b3; }
-        /* line 101, ../sass/_autoflow.scss */
+        /* line 101, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.first-in-group {
           border-top: 1px solid gray; }
-        /* line 104, ../sass/_autoflow.scss */
+        /* line 104, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item {
           display: block; }
-          /* line 106, ../sass/_autoflow.scss */
+          /* line 106, ../../../../general/res/sass/_autoflow.scss */
           .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item.l {
             float: none;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
             width: auto; }
-          /* line 113, ../sass/_autoflow.scss */
+          /* line 113, ../../../../general/res/sass/_autoflow.scss */
           .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item.r {
             -moz-border-radius: 2px;
             -webkit-border-radius: 2px;
@@ -5886,12 +5842,12 @@ table {
             padding-left: 5px;
             padding-right: 5px;
             text-align: right; }
-      /* line 124, ../sass/_autoflow.scss */
+      /* line 124, ../../../../general/res/sass/_autoflow.scss */
       .autoflow .l-autoflow-items .l-autoflow-col:first-child {
         border-left: none;
         padding-left: 0; }
 
-/* line 1, ../sass/features/_imagery.scss */
+/* line 1, ../../../../general/res/sass/features/_imagery.scss */
 .l-image-main-wrapper,
 .l-image-main,
 .l-image-main-controlbar,
@@ -5906,79 +5862,79 @@ table {
   height: auto; }
 
 /*************************************** MAIN LAYOUT */
-/* line 9, ../sass/features/_imagery.scss */
+/* line 9, ../../../../general/res/sass/features/_imagery.scss */
 .l-image-main-wrapper {
   min-height: 100px;
   min-width: 150px; }
-  /* line 16, ../sass/features/_imagery.scss */
+  /* line 16, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main {
     background-color: rgba(255, 255, 255, 0.1);
     bottom: 30px; }
-  /* line 20, ../sass/features/_imagery.scss */
+  /* line 20, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main-controlbar {
     top: auto;
     height: 25px; }
 
-/* line 26, ../sass/features/_imagery.scss */
+/* line 26, ../../../../general/res/sass/features/_imagery.scss */
 .l-image-thumbs-wrapper {
   top: auto;
   height: 168px; }
 
-/* line 32, ../sass/features/_imagery.scss */
+/* line 32, ../../../../general/res/sass/features/_imagery.scss */
 .l-date,
 .l-time,
 .l-timezone {
   display: inline-block; }
 
 /*************************************** MAIN IMAGE */
-/* line 40, ../sass/features/_imagery.scss */
+/* line 40, ../../../../general/res/sass/features/_imagery.scss */
 .l-image-main,
 .l-image-thumb-item .l-thumb {
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat; }
 
-/* line 51, ../sass/features/_imagery.scss */
+/* line 51, ../../../../general/res/sass/features/_imagery.scss */
 .l-image-main-controlbar {
   font-size: 0.8em;
   line-height: 25px; }
-  /* line 55, ../sass/features/_imagery.scss */
+  /* line 55, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-controlbar .left, .l-image-main-controlbar .right {
     direction: rtl;
     overflow: hidden; }
-  /* line 59, ../sass/features/_imagery.scss */
+  /* line 59, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-controlbar .left {
     text-align: left; }
-  /* line 63, ../sass/features/_imagery.scss */
+  /* line 63, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-controlbar .right {
     z-index: 2; }
-  /* line 67, ../sass/features/_imagery.scss */
+  /* line 67, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-controlbar .l-date,
   .l-image-main-controlbar .l-time {
     color: #fff; }
-  /* line 71, ../sass/features/_imagery.scss */
+  /* line 71, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-controlbar .l-mag {
     direction: ltr;
     display: inline-block; }
-    /* line 75, ../sass/features/_imagery.scss */
+    /* line 75, ../../../../general/res/sass/features/_imagery.scss */
     .l-image-main-controlbar .l-mag:before {
       content: "\000049"; }
-  /* line 79, ../sass/features/_imagery.scss */
+  /* line 79, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-controlbar .s-mag {
     color: #666666; }
-  /* line 82, ../sass/features/_imagery.scss */
+  /* line 82, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-controlbar .l-btn.show-thumbs {
     display: none; }
 
-/* line 87, ../sass/features/_imagery.scss */
+/* line 87, ../../../../general/res/sass/features/_imagery.scss */
 .s-image-main {
   border: 1px solid transparent; }
-  /* line 89, ../sass/features/_imagery.scss */
+  /* line 89, ../../../../general/res/sass/features/_imagery.scss */
   .s-image-main.paused {
     border-color: #c56f01; }
 
 /*************************************** THUMBS */
-/* line 96, ../sass/features/_imagery.scss */
+/* line 96, ../../../../general/res/sass/features/_imagery.scss */
 .l-image-thumbs-wrapper {
   direction: rtl;
   overflow-x: auto;
@@ -5987,7 +5943,7 @@ table {
   white-space: nowrap;
   z-index: 70; }
 
-/* line 106, ../sass/features/_imagery.scss */
+/* line 106, ../../../../general/res/sass/features/_imagery.scss */
 .l-image-thumb-item {
   -moz-transition: background-color 0.25s;
   -o-transition: background-color 0.25s;
@@ -6006,30 +5962,30 @@ table {
   text-align: left;
   width: 122px;
   white-space: normal; }
-  /* line 111, ../sass/features/_imagery.scss */
+  /* line 111, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-thumb-item .l-thumb,
   .l-image-thumb-item .l-date,
   .l-image-thumb-item .l-time {
     display: inline-block; }
-  /* line 116, ../sass/features/_imagery.scss */
+  /* line 116, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-thumb-item .l-date,
   .l-image-thumb-item .l-time {
     padding: 2px 3px; }
-  /* line 128, ../sass/features/_imagery.scss */
+  /* line 128, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-thumb-item:hover {
     background: rgba(255, 255, 255, 0.2); }
-    /* line 130, ../sass/features/_imagery.scss */
+    /* line 130, ../../../../general/res/sass/features/_imagery.scss */
     .l-image-thumb-item:hover .l-date,
     .l-image-thumb-item:hover .l-time {
       color: #fff; }
-  /* line 135, ../sass/features/_imagery.scss */
+  /* line 135, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-thumb-item.selected {
     background: #005177; }
-    /* line 137, ../sass/features/_imagery.scss */
+    /* line 137, ../../../../general/res/sass/features/_imagery.scss */
     .l-image-thumb-item.selected .l-date,
     .l-image-thumb-item.selected .l-time {
       color: #fff; }
-  /* line 142, ../sass/features/_imagery.scss */
+  /* line 142, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-thumb-item .l-thumb {
     background-color: rgba(255, 255, 255, 0.1);
     height: 120px;
@@ -6037,26 +5993,26 @@ table {
     margin-top: 0; }
 
 /*************************************** WHEN IN FRAME */
-/* line 152, ../sass/features/_imagery.scss */
+/* line 152, ../../../../general/res/sass/features/_imagery.scss */
 .frame .t-imagery .l-image-main-wrapper {
   bottom: 0; }
-  /* line 154, ../sass/features/_imagery.scss */
+  /* line 154, ../../../../general/res/sass/features/_imagery.scss */
   .frame .t-imagery .l-image-main-wrapper .l-image-main-controlbar {
     font-size: 0.7em; }
-/* line 163, ../sass/features/_imagery.scss */
+/* line 163, ../../../../general/res/sass/features/_imagery.scss */
 .frame .t-imagery .l-image-thumbs-wrapper {
   display: none; }
 
-/* line 5, ../sass/features/_time-display.scss */
+/* line 5, ../../../../general/res/sass/features/_time-display.scss */
 .l-time-display:hover .l-btn.control {
   opacity: 1; }
-/* line 9, ../sass/features/_time-display.scss */
+/* line 9, ../../../../general/res/sass/features/_time-display.scss */
 .l-time-display .l-elem-wrapper {
   position: relative; }
-/* line 12, ../sass/features/_time-display.scss */
+/* line 12, ../../../../general/res/sass/features/_time-display.scss */
 .l-time-display .l-elem {
   display: inline-block; }
-/* line 17, ../sass/features/_time-display.scss */
+/* line 17, ../../../../general/res/sass/features/_time-display.scss */
 .l-time-display.l-timer .l-elem.l-value {
   -moz-transition-property: left;
   -o-transition-property: left;
@@ -6073,16 +6029,16 @@ table {
   position: absolute;
   left: 0;
   z-index: 1; }
-  /* line 22, ../sass/features/_time-display.scss */
+  /* line 22, ../../../../general/res/sass/features/_time-display.scss */
   .l-time-display.l-timer .l-elem.l-value .ui-symbol.direction {
     font-size: 0.8em; }
-/* line 26, ../sass/features/_time-display.scss */
+/* line 26, ../../../../general/res/sass/features/_time-display.scss */
 .l-time-display.l-timer:hover .l-elem.l-value {
   left: 20px; }
-/* line 33, ../sass/features/_time-display.scss */
+/* line 33, ../../../../general/res/sass/features/_time-display.scss */
 .l-time-display .l-elem .value.active, .l-time-display .l-elem.value.active {
   color: #fff; }
-/* line 38, ../sass/features/_time-display.scss */
+/* line 38, ../../../../general/res/sass/features/_time-display.scss */
 .l-time-display .l-btn.control {
   -moz-transition-property: visibility, opacity, background-color, border-color;
   -o-transition-property: visibility, opacity, background-color, border-color;
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
new file mode 100644
index 0000000000..835d76133e
--- /dev/null
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -0,0 +1,68 @@
+/************************** COLORS AND SHADING */
+$colorBodyBg: #333;
+$colorBodyFg: #999;
+$colorFooterBg: #000;
+$colorKey: #0099cc;
+$colorKeySelectedBg: #005177;
+$colorKeyFg: #fff;
+
+$contrastRatio: 7%;
+$colorBtnBg: pullForward($colorBodyBg, $contrastRatio);
+$colorBtnFg: $colorBodyFg;
+$colorBtnIcon: $colorKey;
+$colorInvokeMenu: #fff;
+
+$colorAlt1: #ffc700;
+$colorAlert: #ff3c00;
+$colorIconLink: #49dedb;
+$colorPausedBg: #c56f01;
+$colorPausedFg: #fff;
+$colorCreateBtn: $colorKey;
+$colorGridLines: rgba(#fff, 0.05);
+$colorFormLines: rgba(#fff, 0.1);
+$colorFormSectionHeader: rgba(#000, 0.2);
+$colorInvokeMenu: #fff;
+// Menu colors
+$colorMenuBg: lighten($colorBodyBg, 23%);
+$colorMenuFg: lighten($colorMenuBg, 70%);
+$colorMenuIc: lighten($colorKey, 17%);
+$colorInteriorBorder: lighten($colorBodyBg, 10%);
+$colorObjFrameBg: darken($colorBodyBg, 5%);
+// Form colors
+$colorCheck: $colorKey;
+$colorFormRequired: #ffc700;
+$colorFormValid: #33cc33;
+$colorFormError: #cc0000;
+$colorFormInvalid: #ff9900;
+// Limits and staleness colors
+$colorLimitYellow: #9d7500;
+$colorLimitRed: #aa0000;
+$colorTelemFresh: #fff;
+$colorTelemStale: #888;
+$styleTelemStale: italic;
+// Bubble colors
+$colorInfoBubbleFg: #666;
+$colorInfoBubbleBg: #ddd;
+$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
+$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
+// Overlay
+$colorOvrBlocker: rgba(black, 0.7);
+$colorOvrBg: $colorBodyBg;
+$colorOvrFg: $colorBodyFg;
+// Items
+$colorItemBase: lighten($colorBodyBg, 5%);
+$colorItemFg: lighten($colorItemBase, 20%);
+$colorItemSelected: $colorKey;
+// Tabular
+$tabularColorBorder: rgba(white, 0.1);
+$tabularColorBodyBg: darken($colorBodyBg, 10%);
+$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
+$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
+$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
+$tabularColorHeaderBorder: $colorBodyBg;
+// Tree
+$colorItemTreeIcon: $colorKey;
+$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
+$colorItemTreeVCHover: $colorAlt1;
+// Scrollbar
+$scrollbarTrackColorBg: rgba(#000, 0.4);
\ No newline at end of file
diff --git a/platform/commonUI/themes/espresso/res/sass/_mixins.scss b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
new file mode 100644
index 0000000000..37a056def6
--- /dev/null
+++ b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
@@ -0,0 +1,9 @@
+@function pullForward($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, lighter things come forward - opposite for light interfaces
+    @return lighten($c, $p);
+}
+
+@function pushBack($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, darker things move back - opposite for light interfaces
+    @return darken($c, $p);
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/theme-espresso.scss b/platform/commonUI/themes/espresso/res/sass/theme-espresso.scss
similarity index 84%
rename from platform/commonUI/general/res/sass/theme-espresso.scss
rename to platform/commonUI/themes/espresso/res/sass/theme-espresso.scss
index b7d020a01c..74d213adf9 100644
--- a/platform/commonUI/general/res/sass/theme-espresso.scss
+++ b/platform/commonUI/themes/espresso/res/sass/theme-espresso.scss
@@ -25,12 +25,12 @@
 @import "compass/css3";
 @import "compass/utilities";
 
-@import "constants";
-@import "mobile/constants";
-
+@import "../../../../general/res/sass/_mixins";
+@import "../../../../general/res/sass/mobile/mixins";
 @import "mixins";
-@import "forms/mixins";
-@import "mobile/mixins";
 
-@import "themes/theme-espresso";
-@import "main";
\ No newline at end of file
+@import "../../../../general/res/sass/constants";
+@import "../../../../general/res/sass/mobile/constants";
+@import "constants";
+
+@import "../../../../general/res/sass/main";
\ No newline at end of file
diff --git a/platform/commonUI/themes/snow/bundle.json b/platform/commonUI/themes/snow/bundle.json
new file mode 100644
index 0000000000..6db1ba21c1
--- /dev/null
+++ b/platform/commonUI/themes/snow/bundle.json
@@ -0,0 +1,12 @@
+{
+  "name": "Sonw",
+  "description": "Snow theme: light and cool",
+  "extensions": {
+    "stylesheets": [
+      {
+        "stylesheetUrl": "css/theme-snow.css",
+        "priority": 1000
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/platform/commonUI/themes/snow/res/config.rb b/platform/commonUI/themes/snow/res/config.rb
new file mode 100755
index 0000000000..58843cd76e
--- /dev/null
+++ b/platform/commonUI/themes/snow/res/config.rb
@@ -0,0 +1,26 @@
+# Require any additional compass plugins here.
+# require "compass-growl"
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# :expanded, :compressed, :nested
+output_style = :nested
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
new file mode 100644
index 0000000000..c036576283
--- /dev/null
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -0,0 +1,5971 @@
+@charset "UTF-8";
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline; }
+
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html {
+  line-height: 1; }
+
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+ol, ul {
+  list-style: none; }
+
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+table {
+  border-collapse: collapse;
+  border-spacing: 0; }
+
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle; }
+
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q, blockquote {
+  quotes: none; }
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  q:before, q:after, blockquote:before, blockquote:after {
+    content: "";
+    content: none; }
+
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+a img {
+  border: none; }
+
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+  display: block; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*********************************************** FORM ELEMENTS */
+/*
+@mixin invokeMenu($baseColor: $colorBodyFg) {
+	$c: $baseColor;
+	color: $c;
+	&:hover {
+		color: lighten($c, $ltGamma);
+	}
+}
+*/
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/************************** FEATURES */
+/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
+/************************** RATIOS */
+/************************** LAYOUT */
+/************************** CONTROLS */
+/************************** PATHS */
+/************************** TIMINGS */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/************************** STYLE */
+/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
+/************************** MOBILE TREE MENU DIMENSIONS */
+/************************** WINDOW DIMENSIONS FOR RWD */
+/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
+/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
+/************************** COLORS AND SHADING */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../../../../general/res/sass/_effects.scss */
+.disabled,
+a.disabled {
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
+  opacity: 0.3;
+  pointer-events: none !important;
+  cursor: default !important; }
+
+/* line 29, ../../../../general/res/sass/_effects.scss */
+.incised {
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.8) 0 1px 5px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.8) 0 1px 5px;
+  box-shadow: inset rgba(0, 0, 0, 0.8) 0 1px 5px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
+
+/* line 34, ../../../../general/res/sass/_effects.scss */
+.outline {
+  border: 1px solid white; }
+
+/* line 38, ../../../../general/res/sass/_effects.scss */
+.test-stripes {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjEuMCIgeDI9IjAuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PHN0b3Agb2Zmc2V0PSIyNSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiNmZmZmMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -moz-linear-gradient(135deg, rgba(255, 255, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 0, 0.1) 50%, rgba(255, 255, 0, 0.1) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
+  background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 0, 0.1) 50%, rgba(255, 255, 0, 0.1) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
+  background-image: linear-gradient(-45deg, rgba(255, 255, 0, 0.1) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 0, 0.1) 50%, rgba(255, 255, 0, 0.1) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
+  background-repeat: repeat;
+  background-size: 40px 40px; }
+
+/* line 42, ../../../../general/res/sass/_effects.scss */
+.test {
+  background-color: rgba(255, 204, 0, 0.2); }
+
+@-moz-keyframes pulse {
+  0% {
+    opacity: 0.2; }
+  100% {
+    opacity: 1; } }
+@-webkit-keyframes pulse {
+  0% {
+    opacity: 0.2; }
+  100% {
+    opacity: 1; } }
+@keyframes pulse {
+  0% {
+    opacity: 0.2; }
+  100% {
+    opacity: 1; } }
+/* line 69, ../../../../general/res/sass/_effects.scss */
+.pulse {
+  -moz-animation-name: pulse;
+  -webkit-animation-name: pulse;
+  animation-name: pulse;
+  -moz-animation-duration: 750ms;
+  -webkit-animation-duration: 750ms;
+  animation-duration: 750ms;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+  -moz-animation-iteration-count: infinite;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  -moz-animation-timing-function: ease-in-out;
+  -webkit-animation-timing-function: ease-in-out;
+  animation-timing-function: ease-in-out; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/************************** FONTS */
+@font-face {
+  	/*
+      * Use https://icomoon.io/app with /platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
+      */
+  font-family: 'symbolsfont';
+  src: url("../../../../general/res/fonts/symbols/wtdsymbols.eot");
+  src: url("../../../../general/res/fonts/symbols/wtdsymbols.eot?#iefix") format("embedded-opentype"), url("../../../../general/res/fonts/symbols/wtdsymbols.woff") format("woff"), url("../../../../general/res/fonts/symbols/wtdsymbols.ttf") format("truetype"), url("../../../../general/res/fonts/symbols/wtdsymbols.svg#armataregular") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+/* line 37, ../../../../general/res/sass/_global.scss */
+.ui-symbol {
+  font-family: 'symbolsfont'; }
+
+/************************** HTML ENTITIES */
+/* line 42, ../../../../general/res/sass/_global.scss */
+a {
+  color: #ccc;
+  cursor: pointer;
+  text-decoration: none; }
+  /* line 46, ../../../../general/res/sass/_global.scss */
+  a:hover {
+    color: #fff; }
+
+/* line 51, ../../../../general/res/sass/_global.scss */
+body, html {
+  -webkit-font-smoothing: subpixel-antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #fff;
+  color: #666;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 100%;
+  height: 100%;
+  width: 100%;
+  overflow: hidden; }
+
+/* line 64, ../../../../general/res/sass/_global.scss */
+em {
+  font-style: normal; }
+
+/* line 69, ../../../../general/res/sass/_global.scss */
+input, textarea {
+  font-family: Helvetica, Arial, sans-serif; }
+
+/* line 73, ../../../../general/res/sass/_global.scss */
+input[type="text"] {
+  vertical-align: baseline;
+  padding: 3px 5px !important; }
+
+/* line 78, ../../../../general/res/sass/_global.scss */
+h1, h2, h3 {
+  margin: 0; }
+
+/* line 82, ../../../../general/res/sass/_global.scss */
+h1 {
+  font-size: 1.7em;
+  font-weight: normal !important;
+  line-height: 120%;
+  margin-bottom: 20px;
+  margin-top: 0; }
+
+/* line 90, ../../../../general/res/sass/_global.scss */
+p {
+  margin-bottom: 10px; }
+
+/* line 94, ../../../../general/res/sass/_global.scss */
+mct-container {
+  display: block; }
+
+/* line 98, ../../../../general/res/sass/_global.scss */
+.abs, .s-menu span.l-click-area {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: auto;
+  width: auto; }
+
+/* line 108, ../../../../general/res/sass/_global.scss */
+.code, .codehilite {
+  font-family: "Lucida Console", monospace;
+  font-size: 0.7em;
+  line-height: 150%;
+  white-space: pre; }
+
+/* line 115, ../../../../general/res/sass/_global.scss */
+.codehilite {
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 1em; }
+
+/* line 121, ../../../../general/res/sass/_global.scss */
+.align-right {
+  text-align: right; }
+
+/* line 125, ../../../../general/res/sass/_global.scss */
+.centered {
+  text-align: center; }
+
+/* line 129, ../../../../general/res/sass/_global.scss */
+.no-margin {
+  margin: 0; }
+
+/* line 133, ../../../../general/res/sass/_global.scss */
+.colorKey {
+  color: #0099cc; }
+
+/* line 137, ../../../../general/res/sass/_global.scss */
+.ds {
+  -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
+  box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
+
+/* line 141, ../../../../general/res/sass/_global.scss */
+.hide,
+.hidden {
+  display: none !important; }
+
+/* line 147, ../../../../general/res/sass/_global.scss */
+.paused:not(.s-btn):not(.s-menu) {
+  border-color: #c56f01 !important;
+  color: #c56f01 !important; }
+
+/* line 153, ../../../../general/res/sass/_global.scss */
+.sep {
+  color: rgba(255, 255, 255, 0.2); }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 26, ../../../../general/res/sass/_about.scss */
+.l-about.abs, .s-menu span.l-about.l-click-area {
+  overflow: auto; }
+/* line 31, ../../../../general/res/sass/_about.scss */
+.l-about .l-logo-holder {
+  position: relative;
+  height: 45%; }
+  /* line 34, ../../../../general/res/sass/_about.scss */
+  .l-about .l-logo-holder .l-logo {
+    position: absolute; }
+    /* line 37, ../../../../general/res/sass/_about.scss */
+    .l-about .l-logo-holder .l-logo.l-logo-app {
+      top: 0;
+      right: 15%;
+      bottom: 0;
+      left: 15%; }
+    /* line 41, ../../../../general/res/sass/_about.scss */
+    .l-about .l-logo-holder .l-logo.s-logo-nasa {
+      background-image: url("../../../../general/res/images/logo-nasa.svg");
+      top: 10px;
+      right: auto;
+      bottom: auto;
+      left: 10px;
+      width: 10%;
+      height: auto;
+      padding-bottom: 5%;
+      padding-top: 5%; }
+/* line 50, ../../../../general/res/sass/_about.scss */
+.l-about .l-content {
+  position: relative;
+  margin-top: 10px; }
+
+/* line 57, ../../../../general/res/sass/_about.scss */
+.s-about {
+  line-height: 120%; }
+  /* line 61, ../../../../general/res/sass/_about.scss */
+  .s-about a {
+    color: #84b3ff; }
+  /* line 68, ../../../../general/res/sass/_about.scss */
+  .s-about .s-logo-holder {
+    background: url("../../../../general/res/images/bg-about-openmctweb.jpg") no-repeat center;
+    background-size: cover; }
+  /* line 72, ../../../../general/res/sass/_about.scss */
+  .s-about .s-logo {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain; }
+  /* line 78, ../../../../general/res/sass/_about.scss */
+  .s-about .s-logo-openmctweb {
+    background-image: url("../../../../general/res/images/logo-openmctweb-shdw.svg"); }
+  /* line 81, ../../../../general/res/sass/_about.scss */
+  .s-about .s-btn, .s-about .s-menu {
+    line-height: 2em; }
+  /* line 85, ../../../../general/res/sass/_about.scss */
+  .s-about .l-licenses-software .l-license-software {
+    border-top: 1px solid white;
+    padding: 0.5em 0; }
+    /* line 88, ../../../../general/res/sass/_about.scss */
+    .s-about .l-licenses-software .l-license-software:first-child {
+      border-top: none; }
+    /* line 91, ../../../../general/res/sass/_about.scss */
+    .s-about .l-licenses-software .l-license-software em {
+      color: #333333; }
+    /* line 98, ../../../../general/res/sass/_about.scss */
+    .s-about .l-licenses-software .l-license-software h3 {
+      font-size: 1.25em; }
+    /* line 101, ../../../../general/res/sass/_about.scss */
+    .s-about .l-licenses-software .l-license-software .s-license-text {
+      font-size: 0.9em; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 24, ../../../../general/res/sass/_text.scss */
+.abs.l-standalone, .s-menu span.l-standalone.l-click-area {
+  padding: 5% 20%; }
+
+/* line 29, ../../../../general/res/sass/_text.scss */
+.s-text {
+  font-size: 0.8em; }
+  /* line 31, ../../../../general/res/sass/_text.scss */
+  .s-text ol, .s-text ul {
+    list-style: square;
+    margin-left: 1.5em; }
+  /* line 39, ../../../../general/res/sass/_text.scss */
+  .s-text h1, .s-text h2, .s-text h3 {
+    color: #fff;
+    font-weight: normal !important;
+    margin-bottom: 1em; }
+  /* line 45, ../../../../general/res/sass/_text.scss */
+  .s-text h2 {
+    border-top: 1px solid white;
+    font-size: 1.5em;
+    margin-top: 2em;
+    padding-top: 1em; }
+  /* line 52, ../../../../general/res/sass/_text.scss */
+  .s-text h3 {
+    margin-top: 2em; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../../../../general/res/sass/_icons.scss */
+.triangle {
+  width: 0;
+  height: 0;
+  border-top: 5px solid transparent;
+  border-left: 5px solid #0099cc;
+  border-bottom: 5px solid transparent; }
+  /* line 26, ../../../../general/res/sass/_icons.scss */
+  .triangle.triangle-down {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-top: 5px solid #0099cc;
+    border-right: 5px solid transparent; }
+
+/* line 32, ../../../../general/res/sass/_icons.scss */
+.ui-symbol.icon {
+  color: #0099cc; }
+  /* line 34, ../../../../general/res/sass/_icons.scss */
+  .ui-symbol.icon.alert {
+    color: #ff3c00; }
+    /* line 36, ../../../../general/res/sass/_icons.scss */
+    .ui-symbol.icon.alert:hover {
+      color: #ff8a66; }
+  /* line 40, ../../../../general/res/sass/_icons.scss */
+  .ui-symbol.icon.major {
+    font-size: 1.65em; }
+
+/* line 46, ../../../../general/res/sass/_icons.scss */
+.bar .ui-symbol {
+  display: inline-block; }
+
+/* line 50, ../../../../general/res/sass/_icons.scss */
+.invoke-menu {
+  text-shadow: none;
+  display: inline-block; }
+
+/* line 55, ../../../../general/res/sass/_icons.scss */
+.s-menu .invoke-menu,
+.icon.major .invoke-menu {
+  margin-left: 3px; }
+
+/* line 60, ../../../../general/res/sass/_icons.scss */
+.menu .type-icon,
+.tree-item .type-icon,
+.super-menu.menu .type-icon {
+  position: absolute; }
+
+/* line 70, ../../../../general/res/sass/_icons.scss */
+.l-icon-link:before {
+  content: "\f4"; }
+
+/* line 74, ../../../../general/res/sass/_icons.scss */
+.l-icon-alert {
+  display: none !important; }
+  /* line 76, ../../../../general/res/sass/_icons.scss */
+  .l-icon-alert:before {
+    color: #ff3c00;
+    content: "!"; }
+
+/*.s-limit-upr,
+.s-limit-lwr {
+	$a: 0.5;
+	$l: 30%;
+	white-space: nowrap;
+	&:before {
+		display: inline-block;
+		font-family: symbolsfont;
+		font-size: 0.85em;
+		font-style: normal !important;
+		margin-right: $interiorMarginSm;
+		vertical-align: middle;
+	}
+}
+
+.s-limit-upr {
+	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ed"); }
+	&.s-limit-red { @include limit($colorLimitRed, "\0000eb"); }
+}
+
+.s-limit-lwr {
+	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ec"); }
+	&.s-limit-red { @include limit($colorLimitRed, "\0000ee"); }
+}*/
+/* line 35, ../../../../general/res/sass/_limits.scss */
+[class*="s-limit"] {
+  white-space: nowrap; }
+  /* line 39, ../../../../general/res/sass/_limits.scss */
+  [class*="s-limit"]:before {
+    display: inline-block;
+    font-family: symbolsfont;
+    font-size: 0.85em;
+    font-style: normal !important;
+    margin-right: 3px;
+    vertical-align: middle; }
+
+/* line 49, ../../../../general/res/sass/_limits.scss */
+.s-limit-upr-red {
+  background: #aa0000; }
+  /* line 3, ../../../../general/res/sass/_limits.scss */
+  .s-limit-upr-red:before {
+    color: #ff4444;
+    content: "ë"; }
+
+/* line 50, ../../../../general/res/sass/_limits.scss */
+.s-limit-upr-yellow {
+  background: #9d7500; }
+  /* line 3, ../../../../general/res/sass/_limits.scss */
+  .s-limit-upr-yellow:before {
+    color: #ffcc37;
+    content: "í"; }
+
+/* line 51, ../../../../general/res/sass/_limits.scss */
+.s-limit-lwr-yellow {
+  background: #9d7500; }
+  /* line 3, ../../../../general/res/sass/_limits.scss */
+  .s-limit-lwr-yellow:before {
+    color: #ffcc37;
+    content: "ì"; }
+
+/* line 52, ../../../../general/res/sass/_limits.scss */
+.s-limit-lwr-red {
+  background: #aa0000; }
+  /* line 3, ../../../../general/res/sass/_limits.scss */
+  .s-limit-lwr-red:before {
+    color: #ff4444;
+    content: "î"; }
+
+/* line 1, ../../../../general/res/sass/_data-status.scss */
+.s-stale {
+  color: rgba(255, 255, 255, 0.5) !important;
+  font-style: italic; }
+  /* line 3, ../../../../general/res/sass/_data-status.scss */
+  .s-stale .td {
+    color: rgba(255, 255, 255, 0.5) !important;
+    font-style: italic; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 24, ../../../../general/res/sass/helpers/_bubbles.scss */
+.bubble-container {
+  pointer-events: none; }
+
+/* line 31, ../../../../general/res/sass/helpers/_bubbles.scss */
+.l-infobubble-wrapper {
+  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
+  box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
+  position: relative;
+  z-index: 50; }
+  /* line 36, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper .l-infobubble {
+    display: inline-block;
+    min-width: 100px;
+    max-width: 300px;
+    padding: 5px 10px; }
+    /* line 41, ../../../../general/res/sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper .l-infobubble:before {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0; }
+    /* line 47, ../../../../general/res/sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper .l-infobubble table {
+      width: 100%; }
+      /* line 50, ../../../../general/res/sass/helpers/_bubbles.scss */
+      .l-infobubble-wrapper .l-infobubble table tr td {
+        padding: 2px 0;
+        vertical-align: top; }
+        /* line 53, ../../../../general/res/sass/helpers/_bubbles.scss */
+        .l-infobubble-wrapper .l-infobubble table tr td.label {
+          padding-right: 10px;
+          white-space: nowrap; }
+        /* line 57, ../../../../general/res/sass/helpers/_bubbles.scss */
+        .l-infobubble-wrapper .l-infobubble table tr td.value {
+          word-break: break-all; }
+        /* line 61, ../../../../general/res/sass/helpers/_bubbles.scss */
+        .l-infobubble-wrapper .l-infobubble table tr td.align-wrap {
+          white-space: normal; }
+    /* line 67, ../../../../general/res/sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper .l-infobubble .title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-bottom: 5px; }
+  /* line 74, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-left {
+    margin-left: 20px; }
+    /* line 76, ../../../../general/res/sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper.arw-left .l-infobubble::before {
+      right: 100%; }
+      @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+        /* line 76, ../../../../general/res/sass/helpers/_bubbles.scss */
+        .l-infobubble-wrapper.arw-left .l-infobubble::before {
+          width: 0;
+          height: 0;
+          border-top: 6.66667px solid transparent;
+          border-bottom: 6.66667px solid transparent;
+          border-right: 10px solid #ddd; } }
+  @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 88, ../../../../general/res/sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper.arw-right {
+      margin-right: 20px; } }
+  /* line 95, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-right .l-infobubble::before {
+    left: 100%; }
+    @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 95, ../../../../general/res/sass/helpers/_bubbles.scss */
+      .l-infobubble-wrapper.arw-right .l-infobubble::before {
+        width: 0;
+        height: 0;
+        border-top: 6.66667px solid transparent;
+        border-bottom: 6.66667px solid transparent;
+        border-left: 10px solid #ddd; } }
+  /* line 108, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-top .l-infobubble::before {
+    top: 20px; }
+  /* line 114, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-btm .l-infobubble::before {
+    bottom: 20px; }
+  /* line 119, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-down {
+    margin-bottom: 10px; }
+    /* line 121, ../../../../general/res/sass/helpers/_bubbles.scss */
+    .l-infobubble-wrapper.arw-down .l-infobubble::before {
+      left: 50%;
+      top: 100%;
+      margin-left: -5px;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 7.5px solid #ddd; }
+  /* line 130, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper .arw {
+    z-index: 2; }
+  /* line 133, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .l-infobubble-wrapper.arw-up .arw.arw-down, .l-infobubble-wrapper.arw-down .arw.arw-up {
+    display: none; }
+
+/* line 142, ../../../../general/res/sass/helpers/_bubbles.scss */
+.l-thumbsbubble-wrapper .arw-up {
+  width: 0;
+  height: 0;
+  border-left: 6.66667px solid transparent;
+  border-right: 6.66667px solid transparent;
+  border-bottom: 10px solid white; }
+/* line 145, ../../../../general/res/sass/helpers/_bubbles.scss */
+.l-thumbsbubble-wrapper .arw-down {
+  width: 0;
+  height: 0;
+  border-left: 6.66667px solid transparent;
+  border-right: 6.66667px solid transparent;
+  border-top: 10px solid white; }
+
+/* line 150, ../../../../general/res/sass/helpers/_bubbles.scss */
+.s-infobubble {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
+  box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
+  background: #ddd;
+  color: #666;
+  font-size: 0.8rem; }
+  /* line 157, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .s-infobubble .title {
+    color: #333333;
+    font-weight: bold; }
+  /* line 163, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .s-infobubble table tr td {
+    border: none;
+    border-top: 1px solid #c4c4c4 !important;
+    font-size: 0.9em; }
+  /* line 169, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .s-infobubble table tr:first-child td {
+    border-top: none !important; }
+  /* line 174, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .s-infobubble:first-child td {
+    border-top: none; }
+  /* line 178, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .s-infobubble .label {
+    color: gray; }
+  /* line 182, ../../../../general/res/sass/helpers/_bubbles.scss */
+  .s-infobubble .value {
+    color: #333333; }
+
+/* line 188, ../../../../general/res/sass/helpers/_bubbles.scss */
+.s-thumbsbubble {
+  background: white;
+  color: gray; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 29, ../../../../general/res/sass/helpers/_splitter.scss */
+.split-layout .splitter {
+  background-color: white;
+  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
+  box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
+  overflow: hidden;
+  position: absolute;
+  z-index: 1; }
+/* line 36, ../../../../general/res/sass/helpers/_splitter.scss */
+.split-layout.horizontal {
+  overflow: hidden; }
+  /* line 39, ../../../../general/res/sass/helpers/_splitter.scss */
+  .split-layout.horizontal .pane {
+    left: 0;
+    right: 0; }
+    /* line 42, ../../../../general/res/sass/helpers/_splitter.scss */
+    .split-layout.horizontal .pane.top {
+      bottom: auto; }
+    /* line 46, ../../../../general/res/sass/helpers/_splitter.scss */
+    .split-layout.horizontal .pane.bottom {
+      top: auto; }
+  /* line 51, ../../../../general/res/sass/helpers/_splitter.scss */
+  .split-layout.horizontal > .splitter {
+    cursor: row-resize;
+    left: 0;
+    right: 0;
+    width: auto;
+    height: 5px; }
+    /* line 185, ../../../../general/res/sass/_mixins.scss */
+    .split-layout.horizontal > .splitter:before {
+      -moz-transition-property: "border-color";
+      -o-transition-property: "border-color";
+      -webkit-transition-property: "border-color";
+      transition-property: "border-color";
+      -moz-transition-duration: 0.75s;
+      -o-transition-duration: 0.75s;
+      -webkit-transition-duration: 0.75s;
+      transition-duration: 0.75s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      content: '';
+      display: block;
+      height: auto;
+      pointer-events: none;
+      position: absolute;
+      z-index: 2;
+      border-top: 1px dotted #d9d9d9;
+      top: 2px;
+      left: 5px;
+      right: 5px; }
+    /* line 207, ../../../../general/res/sass/_mixins.scss */
+    .split-layout.horizontal > .splitter:not(.disabled):hover:before {
+      -moz-transition-property: "border-color";
+      -o-transition-property: "border-color";
+      -webkit-transition-property: "border-color";
+      transition-property: "border-color";
+      -moz-transition-duration: 50ms;
+      -o-transition-duration: 50ms;
+      -webkit-transition-duration: 50ms;
+      transition-duration: 50ms;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      border-color: #0099cc; }
+/* line 63, ../../../../general/res/sass/helpers/_splitter.scss */
+.split-layout.vertical .pane {
+  top: 0;
+  bottom: 0; }
+  /* line 66, ../../../../general/res/sass/helpers/_splitter.scss */
+  .split-layout.vertical .pane.left {
+    right: auto; }
+  /* line 70, ../../../../general/res/sass/helpers/_splitter.scss */
+  .split-layout.vertical .pane.right {
+    left: auto; }
+/* line 75, ../../../../general/res/sass/helpers/_splitter.scss */
+.split-layout.vertical > .splitter {
+  bottom: 0;
+  cursor: col-resize;
+  width: 5px; }
+  /* line 185, ../../../../general/res/sass/_mixins.scss */
+  .split-layout.vertical > .splitter:before {
+    -moz-transition-property: "border-color";
+    -o-transition-property: "border-color";
+    -webkit-transition-property: "border-color";
+    transition-property: "border-color";
+    -moz-transition-duration: 0.75s;
+    -o-transition-duration: 0.75s;
+    -webkit-transition-duration: 0.75s;
+    transition-duration: 0.75s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    content: '';
+    display: block;
+    height: auto;
+    pointer-events: none;
+    position: absolute;
+    z-index: 2;
+    border-left: 1px dotted #d9d9d9;
+    left: 2px;
+    bottom: 5px;
+    top: 5px; }
+  /* line 207, ../../../../general/res/sass/_mixins.scss */
+  .split-layout.vertical > .splitter:not(.disabled):hover:before {
+    -moz-transition-property: "border-color";
+    -o-transition-property: "border-color";
+    -webkit-transition-property: "border-color";
+    transition-property: "border-color";
+    -moz-transition-duration: 50ms;
+    -o-transition-duration: 50ms;
+    -webkit-transition-duration: 50ms;
+    transition-duration: 50ms;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    border-color: #0099cc; }
+
+/* line 86, ../../../../general/res/sass/helpers/_splitter.scss */
+.browse-area .splitter {
+  top: 34px; }
+
+/* line 90, ../../../../general/res/sass/helpers/_splitter.scss */
+.edit-area .splitter {
+  top: 0; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@-webkit-keyframes rotation {
+  from {
+    -webkit-transform: rotate(0deg); }
+  to {
+    -webkit-transform: rotate(359deg); } }
+@-moz-keyframes rotation {
+  from {
+    -moz-transform: rotate(0deg); }
+  to {
+    -moz-transform: rotate(359deg); } }
+@-o-keyframes rotation {
+  from {
+    -o-transform: rotate(0deg); }
+  to {
+    -o-transform: rotate(359deg); } }
+@keyframes rotation {
+  from {
+    transform: rotate(0deg); }
+  to {
+    transform: rotate(359deg); } }
+/* line 42, ../../../../general/res/sass/helpers/_wait-spinner.scss */
+.t-wait-spinner,
+.wait-spinner {
+  display: block;
+  position: absolute;
+  -webkit-animation: rotation .6s infinite linear;
+  -moz-animation: rotation .6s infinite linear;
+  -o-animation: rotation .6s infinite linear;
+  animation: rotation .6s infinite linear;
+  border-color: rgba(0, 153, 204, 0.25);
+  border-top-color: #0099cc;
+  border-style: solid;
+  border-width: 0.5em;
+  border-radius: 100%;
+  top: 50%;
+  left: 50%;
+  height: auto;
+  width: auto;
+  padding: 5%;
+  pointer-events: none;
+  margin-top: -5%;
+  margin-left: -5%;
+  z-index: 2; }
+  /* line 53, ../../../../general/res/sass/helpers/_wait-spinner.scss */
+  .t-wait-spinner.inline,
+  .wait-spinner.inline {
+    display: inline-block !important;
+    margin-right: 5px;
+    position: relative !important;
+    vertical-align: middle; }
+
+/* line 61, ../../../../general/res/sass/helpers/_wait-spinner.scss */
+.l-wait-spinner-holder {
+  pointer-events: none;
+  position: absolute; }
+  /* line 65, ../../../../general/res/sass/helpers/_wait-spinner.scss */
+  .l-wait-spinner-holder.align-left .t-wait-spinner {
+    left: 0;
+    margin-left: 0; }
+  /* line 70, ../../../../general/res/sass/helpers/_wait-spinner.scss */
+  .l-wait-spinner-holder.full-size {
+    display: inline-block;
+    height: 100%;
+    width: 100%; }
+    /* line 73, ../../../../general/res/sass/helpers/_wait-spinner.scss */
+    .l-wait-spinner-holder.full-size .t-wait-spinner {
+      top: 0;
+      margin-top: 0;
+      padding: 30%; }
+
+/* line 82, ../../../../general/res/sass/helpers/_wait-spinner.scss */
+.treeview .wait-spinner {
+  display: block;
+  position: absolute;
+  -webkit-animation: rotation .6s infinite linear;
+  -moz-animation: rotation .6s infinite linear;
+  -o-animation: rotation .6s infinite linear;
+  animation: rotation .6s infinite linear;
+  border-color: rgba(0, 153, 204, 0.25);
+  border-top-color: #0099cc;
+  border-style: solid;
+  border-width: 0.25em;
+  border-radius: 100%;
+  height: 10px;
+  width: 10px;
+  margin: 0 !important;
+  padding: 0 !important;
+  top: 2px;
+  left: 0; }
+
+/* line 91, ../../../../general/res/sass/helpers/_wait-spinner.scss */
+.wait-spinner.sm {
+  display: block;
+  position: absolute;
+  -webkit-animation: rotation .6s infinite linear;
+  -moz-animation: rotation .6s infinite linear;
+  -o-animation: rotation .6s infinite linear;
+  animation: rotation .6s infinite linear;
+  border-color: rgba(0, 153, 204, 0.25);
+  border-top-color: #0099cc;
+  border-style: solid;
+  border-width: 0.25em;
+  border-radius: 100%;
+  height: 13px;
+  width: 13px;
+  margin-left: 0 !important;
+  margin-top: 0 !important;
+  padding: 0 !important;
+  top: 0;
+  left: 0; }
+
+/* Styles for messages */
+/* line 4, ../../../../general/res/sass/_messages.scss */
+.message.block {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  padding: 10px; }
+/* line 8, ../../../../general/res/sass/_messages.scss */
+.message.error {
+  background-color: rgba(255, 60, 0, 0.3);
+  color: #ff8a66; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* Classes to be used for lists of properties and values */
+/* line 25, ../../../../general/res/sass/_properties.scss */
+.properties .s-row {
+  border-top: 1px solid white;
+  font-size: 0.8em; }
+  /* line 28, ../../../../general/res/sass/_properties.scss */
+  .properties .s-row:first-child {
+    border: none; }
+  /* line 31, ../../../../general/res/sass/_properties.scss */
+  .properties .s-row .s-value {
+    color: #fff; }
+
+/********************************* CONTROLS */
+/* line 1, ../../../../general/res/sass/controls/_breadcrumb.scss */
+.l-breadcrumb {
+  font-size: 0.7rem;
+  line-height: 1em;
+  margin-bottom: 5px;
+  margin-left: -4px; }
+  /* line 10, ../../../../general/res/sass/controls/_breadcrumb.scss */
+  .l-breadcrumb .l-breadcrumb-item a {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-border-radius: 1.5px;
+    -webkit-border-radius: 1.5px;
+    border-radius: 1.5px;
+    -moz-transition: background-color 0.25s;
+    -o-transition: background-color 0.25s;
+    -webkit-transition: background-color 0.25s;
+    transition: background-color 0.25s;
+    color: #404040;
+    display: inline-block;
+    padding: 2px 4px; }
+    /* line 18, ../../../../general/res/sass/controls/_breadcrumb.scss */
+    .l-breadcrumb .l-breadcrumb-item a .icon {
+      color: #0099cc;
+      margin-right: 5px; }
+    /* line 22, ../../../../general/res/sass/controls/_breadcrumb.scss */
+    .l-breadcrumb .l-breadcrumb-item a:hover {
+      background: white;
+      color: gray; }
+      /* line 25, ../../../../general/res/sass/controls/_breadcrumb.scss */
+      .l-breadcrumb .l-breadcrumb-item a:hover .icon {
+        color: #33ccff; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/******* LAYOUT AND SIZING */
+/*.l-btn {
+	@include user-select(none);
+	//line-height: 1.5em; // Was 1.25em
+	line-height: 150%;
+	padding: 0 $pad;
+	text-decoration: none;
+	&.lg,
+	&.create-btn {
+		$h: $ueTopBarH; // - $interiorMargin;
+		height: $h;
+		line-height: $h - 2;
+		padding: 0 $pad * 3;
+	}
+	&.create-btn {
+		font-size: 1em;
+		&:before {
+			content:"+";
+			font-family: symbolsfont;
+		}
+		.menu {
+			margin-left: $pad * -1;
+		}
+		>.ui-symbol {
+			//font-size: 1.1em; // Normalizing for new icomoon symbols font
+		}
+	}
+	&.sm {
+		padding: 0 $pad / $baseRatio;
+	}
+	&.vsm {
+		padding: 0 ($pad / $baseRatio) / 2;
+	}
+}*/
+/*********************************** STYLE STYLES */
+/* line 61, ../../../../general/res/sass/controls/_buttons.scss */
+.s-btn, .s-menu {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: pointer;
+  text-decoration: none;
+  height: 25px;
+  line-height: 25px;
+  padding: 0 7.5px;
+  font-size: 0.7rem; }
+  /* line 71, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn .icon, .s-menu .icon {
+    font-size: 0.8rem;
+    color: #0099cc; }
+  /* line 76, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn .title-label, .s-menu .title-label {
+    vertical-align: top; }
+  /* line 80, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.sm, .sm.s-menu {
+    padding: 0 5px; }
+  /* line 83, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.vsm, .vsm.s-menu {
+    padding: 0 2.5px; }
+  /* line 87, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn:not(.major), .s-menu:not(.major) {
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #bfbfbf;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block;
+    color: #fff;
+    /*    &:not(.disabled) {
+            &:not(.paused) {
+                &:hover {
+                    .icon {
+                        color: pullForward($ic, $ltGamma);
+                    }
+                }
+            }
+        }*/ }
+    /* line 14, ../sass/_mixins.scss */
+    .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover {
+      background-color: #0099cc; }
+    /* line 26, ../sass/_mixins.scss */
+    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon {
+      color: #fff; }
+  /* line 91, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.major, .major.s-menu, .overlay .bottom-bar .s-btn.major, .overlay .bottom-bar .major.s-menu {
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #0099cc;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block;
+    color: white;
+    /*    &:not(.disabled) {
+            &:not(.paused) {
+                &:hover {
+                    .icon {
+                        color: pullForward($ic, $ltGamma);
+                    }
+                }
+            }
+        }*/ }
+    /* line 14, ../sass/_mixins.scss */
+    .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .overlay .bottom-bar .s-btn.major:not(.disabled):hover, .overlay .bottom-bar .major.s-menu:not(.disabled):hover {
+      background-color: #0099cc; }
+    /* line 26, ../sass/_mixins.scss */
+    .s-btn.major .icon, .major.s-menu .icon, .overlay .bottom-bar .s-btn.major .icon, .overlay .bottom-bar .major.s-menu .icon {
+      color: white; }
+  /* line 97, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.paused, .paused.s-menu {
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    background-color: #c56f01;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block;
+    color: #fff;
+    /*    &:not(.disabled) {
+            &:not(.paused) {
+                &:hover {
+                    .icon {
+                        color: pullForward($ic, $ltGamma);
+                    }
+                }
+            }
+        }*/ }
+    /* line 14, ../sass/_mixins.scss */
+    .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover {
+      background-color: #0099cc; }
+    /* line 26, ../sass/_mixins.scss */
+    .s-btn.paused .icon, .paused.s-menu .icon {
+      color: #fff; }
+    /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
+    .s-btn.paused .icon:before, .paused.s-menu .icon:before {
+      content: "\0000EF"; }
+  /* line 104, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.pause-play, .pause-play.s-menu {
+    /*
+    	&.paused {
+    		.icon {
+    			@include pulse(500ms);
+    		}
+    	}
+    */ }
+    /* line 112, ../../../../general/res/sass/controls/_buttons.scss */
+    .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before {
+      content: "\0000F1"; }
+  /* line 118, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before {
+    content: "\000039"; }
+
+/* line 124, ../../../../general/res/sass/controls/_buttons.scss */
+.l-btn-set {
+  font-size: 0; }
+  /* line 130, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .s-btn, .l-btn-set .s-menu {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    margin-left: 1px; }
+  /* line 136, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu {
+    -moz-border-radius-topleft: 3px;
+    -webkit-border-top-left-radius: 3px;
+    border-top-left-radius: 3px;
+    -moz-border-radius-bottomleft: 3px;
+    -webkit-border-bottom-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+    margin-left: 0; }
+  /* line 143, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu {
+    -moz-border-radius-topright: 3px;
+    -webkit-border-top-right-radius: 3px;
+    border-top-right-radius: 3px;
+    -moz-border-radius-bottomright: 3px;
+    -webkit-border-bottom-right-radius: 3px;
+    border-bottom-right-radius: 3px; }
+
+/*********************************** LAYOUT STYLES */
+/*
+
+span.s-btn,
+span.s-btn span,
+a.s-btn,
+a.s-btn span,
+a.s-btn,
+a.s-btn span {
+	display: inline-block;
+}
+*/
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../../../../general/res/sass/controls/_color-palette.scss */
+.l-color-palette {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 5px !important; }
+  /* line 31, ../../../../general/res/sass/controls/_color-palette.scss */
+  .l-color-palette .l-palette-row {
+    overflow: hidden;
+    *zoom: 1;
+    line-height: 16px;
+    width: 170px; }
+    /* line 36, ../../../../general/res/sass/controls/_color-palette.scss */
+    .l-color-palette .l-palette-row .l-palette-item {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      text-shadow: rgba(0, 0, 0, 0.8) 0 1px 2px;
+      -moz-transition-property: visibility, opacity, background-color, border-color;
+      -o-transition-property: visibility, opacity, background-color, border-color;
+      -webkit-transition-property: visibility, opacity, background-color, border-color;
+      transition-property: visibility, opacity, background-color, border-color;
+      -moz-transition-duration: 0.25s;
+      -o-transition-duration: 0.25s;
+      -webkit-transition-duration: 0.25s;
+      transition-duration: 0.25s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      border: 1px solid transparent;
+      color: #fff;
+      display: block;
+      font-family: 'symbolsfont';
+      float: left;
+      height: 16px;
+      width: 16px;
+      line-height: 16px;
+      margin: 0 1px 1px 0;
+      text-align: center;
+      vertical-align: middle; }
+    /* line 53, ../../../../general/res/sass/controls/_color-palette.scss */
+    .l-color-palette .l-palette-row .s-palette-item:hover {
+      -moz-transition-property: none;
+      -o-transition-property: none;
+      -webkit-transition-property: none;
+      transition-property: none;
+      border-color: #fff !important; }
+    /* line 59, ../../../../general/res/sass/controls/_color-palette.scss */
+    .l-color-palette .l-palette-row .l-palette-item-label {
+      margin-left: 5px; }
+    /* line 63, ../../../../general/res/sass/controls/_color-palette.scss */
+    .l-color-palette .l-palette-row.l-option-row {
+      margin-bottom: 5px; }
+      /* line 65, ../../../../general/res/sass/controls/_color-palette.scss */
+      .l-color-palette .l-palette-row.l-option-row .s-palette-item {
+        border-color: #666; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*.control {
+	// UNUSED?
+	&.view-control {
+		.icon {
+			display: inline-block;
+			margin: -1px 5px 1px 2px;
+			vertical-align: middle;
+			&.triangle-down {
+				margin: 2px 2px -2px 0px;
+			}
+		}
+
+		.label {
+			display: inline-block;
+			font-size: 11px;
+			vertical-align: middle;
+		}
+
+		.toggle {
+			@include border-radius(3px);
+			display: inline-block;
+			padding: 1px 6px 4px 4px;
+			&:hover {
+				background: rgba(white, 0.1);
+			}
+		}
+	}
+}*/
+/* line 51, ../../../../general/res/sass/controls/_controls.scss */
+.accordion {
+  margin-top: 5px; }
+  /* line 54, ../../../../general/res/sass/controls/_controls.scss */
+  .accordion:first-child {
+    margin-top: 0; }
+  /* line 57, ../../../../general/res/sass/controls/_controls.scss */
+  .accordion .accordion-head {
+    -moz-border-radius: 1.5px;
+    -webkit-border-radius: 1.5px;
+    border-radius: 1.5px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background: rgba(102, 102, 102, 0.2);
+    cursor: pointer;
+    font-size: 0.75em;
+    line-height: 18px;
+    margin-bottom: 5px;
+    padding: 0 5px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: auto;
+    left: 0;
+    width: auto;
+    height: 18px;
+    text-transform: uppercase; }
+    /* line 75, ../../../../general/res/sass/controls/_controls.scss */
+    .accordion .accordion-head:hover {
+      background: rgba(102, 102, 102, 0.4); }
+    /* line 78, ../../../../general/res/sass/controls/_controls.scss */
+    .accordion .accordion-head:after {
+      content: "^";
+      display: block;
+      font-family: 'symbolsfont';
+      font-size: 0.9em;
+      position: absolute;
+      right: 5px;
+      text-transform: none;
+      top: 0; }
+    /* line 88, ../../../../general/res/sass/controls/_controls.scss */
+    .accordion .accordion-head:not(.expanded):after {
+      content: "v"; }
+  /* line 92, ../../../../general/res/sass/controls/_controls.scss */
+  .accordion .accordion-contents {
+    position: absolute;
+    top: 23px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    overflow-y: auto;
+    overflow-x: hidden; }
+
+/* line 103, ../../../../general/res/sass/controls/_controls.scss */
+.l-composite-control {
+  vertical-align: middle; }
+  /* line 106, ../../../../general/res/sass/controls/_controls.scss */
+  .l-composite-control.l-checkbox .composite-control-label {
+    line-height: 18px; }
+
+/* line 112, ../../../../general/res/sass/controls/_controls.scss */
+.l-control-group {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-left: 1px solid white;
+  display: inline-block;
+  padding: 0 5px;
+  position: relative; }
+  /* line 120, ../../../../general/res/sass/controls/_controls.scss */
+  .l-control-group:first-child {
+    border-left: none;
+    padding-left: 0; }
+
+/* line 126, ../../../../general/res/sass/controls/_controls.scss */
+.l-local-controls {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  z-index: 5; }
+
+/* line 136, ../../../../general/res/sass/controls/_controls.scss */
+.s-local-controls {
+  font-size: 0.7rem; }
+
+/* line 140, ../../../../general/res/sass/controls/_controls.scss */
+label.checkbox.custom {
+  cursor: pointer;
+  display: inline-block;
+  line-height: 14px;
+  margin-right: 20px;
+  padding-left: 19px;
+  position: relative;
+  vertical-align: middle; }
+  /* line 150, ../../../../general/res/sass/controls/_controls.scss */
+  label.checkbox.custom em {
+    color: #666;
+    display: inline-block;
+    height: 14px;
+    min-width: 14px; }
+    /* line 155, ../../../../general/res/sass/controls/_controls.scss */
+    label.checkbox.custom em:before {
+      -moz-border-radius: 1.5px;
+      -webkit-border-radius: 1.5px;
+      border-radius: 1.5px;
+      background: white;
+      border-bottom: 1px solid white;
+      box-sizing: border-box;
+      content: " ";
+      font-family: 'symbolsfont';
+      font-size: 0.8em;
+      display: inline-block;
+      margin-right: 5px;
+      height: 14px;
+      width: 14px;
+      left: 0;
+      top: 0;
+      position: absolute;
+      text-align: center; }
+  /* line 173, ../../../../general/res/sass/controls/_controls.scss */
+  label.checkbox.custom.no-text {
+    overflow: hidden;
+    margin-right: 0;
+    padding-left: 0;
+    height: 14px;
+    width: 14px; }
+    /* line 179, ../../../../general/res/sass/controls/_controls.scss */
+    label.checkbox.custom.no-text em {
+      overflow: hidden; }
+  /* line 183, ../../../../general/res/sass/controls/_controls.scss */
+  label.checkbox.custom input {
+    display: none; }
+    /* line 185, ../../../../general/res/sass/controls/_controls.scss */
+    label.checkbox.custom input:checked ~ em:before {
+      background: #0099cc;
+      color: #ccf2ff;
+      content: "2"; }
+
+/* line 193, ../../../../general/res/sass/controls/_controls.scss */
+.input-labeled {
+  margin-left: 5px; }
+  /* line 195, ../../../../general/res/sass/controls/_controls.scss */
+  .input-labeled label {
+    display: inline-block;
+    margin-right: 3px; }
+  /* line 199, ../../../../general/res/sass/controls/_controls.scss */
+  .input-labeled.inline {
+    display: inline-block; }
+  /* line 202, ../../../../general/res/sass/controls/_controls.scss */
+  .input-labeled:first-child {
+    margin-left: 0; }
+
+/* line 207, ../../../../general/res/sass/controls/_controls.scss */
+.s-menu label.checkbox.custom {
+  margin-left: 5px; }
+
+/* line 212, ../../../../general/res/sass/controls/_controls.scss */
+.item .checkbox.checked label {
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-bottom: none; }
+
+/* line 218, ../../../../general/res/sass/controls/_controls.scss */
+.context-available {
+  color: #0099cc; }
+  /* line 221, ../../../../general/res/sass/controls/_controls.scss */
+  .context-available:hover {
+    color: deepskyblue; }
+
+/* line 226, ../../../../general/res/sass/controls/_controls.scss */
+.view-switcher {
+  -moz-transition-property: visibility, opacity, background-color, border-color;
+  -o-transition-property: visibility, opacity, background-color, border-color;
+  -webkit-transition-property: visibility, opacity, background-color, border-color;
+  transition-property: visibility, opacity, background-color, border-color;
+  -moz-transition-duration: 100ms;
+  -o-transition-duration: 100ms;
+  -webkit-transition-duration: 100ms;
+  transition-duration: 100ms;
+  -moz-transition-timing-function: ease-in-out;
+  -o-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out; }
+
+/******************************************************** OBJECT-HEADER */
+/* line 231, ../../../../general/res/sass/controls/_controls.scss */
+.object-header {
+  font-size: 1em; }
+  /* line 242, ../../../../general/res/sass/controls/_controls.scss */
+  .object-header > .type-icon {
+    font-size: 120%;
+    float: left;
+    margin-right: 5px; }
+  /* line 248, ../../../../general/res/sass/controls/_controls.scss */
+  .object-header .l-elem-wrapper {
+    justify-content: flex-start;
+    -webkit-justify-content: flex-start; }
+    /* line 251, ../../../../general/res/sass/controls/_controls.scss */
+    .object-header .l-elem-wrapper mct-representation {
+      min-width: 0.7em; }
+  /* line 259, ../../../../general/res/sass/controls/_controls.scss */
+  .object-header .action {
+    margin-right: 5px; }
+  /* line 263, ../../../../general/res/sass/controls/_controls.scss */
+  .object-header .title-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #cccccc;
+    flex: 0 1 auto;
+    -webkit-flex: 0 1 auto;
+    padding-right: 0.35em; }
+  /* line 272, ../../../../general/res/sass/controls/_controls.scss */
+  .object-header .context-available {
+    font-size: 0.7em;
+    flex: 0 0 1;
+    -webkit-flex: 0 0 1; }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 279, ../../../../general/res/sass/controls/_controls.scss */
+    .object-header .context-available {
+      -moz-transition-property: opacity;
+      -o-transition-property: opacity;
+      -webkit-transition-property: opacity;
+      transition-property: opacity;
+      -moz-transition-duration: 0.25s;
+      -o-transition-duration: 0.25s;
+      -webkit-transition-duration: 0.25s;
+      transition-duration: 0.25s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      opacity: 0; }
+    /* line 284, ../../../../general/res/sass/controls/_controls.scss */
+    .object-header:hover .context-available {
+      opacity: 1; } }
+
+/******************************************************** SLIDERS */
+/* line 297, ../../../../general/res/sass/controls/_controls.scss */
+.slider .slot {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
+  box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-bottom: 1px solid rgba(77, 77, 77, 0.4);
+  border-right: 1px solid rgba(77, 77, 77, 0.4);
+  height: 50%;
+  width: auto;
+  position: absolute;
+  top: 25%;
+  right: 0;
+  bottom: auto;
+  left: 0; }
+/* line 308, ../../../../general/res/sass/controls/_controls.scss */
+.slider .knob {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background-color: #fff;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-block;
+  color: #fff;
+  /*    &:not(.disabled) {
+          &:not(.paused) {
+              &:hover {
+                  .icon {
+                      color: pullForward($ic, $ltGamma);
+                  }
+              }
+          }
+      }*/
+  cursor: ew-resize;
+  position: absolute;
+  height: 100%;
+  width: 12px;
+  top: 0;
+  auto: 0;
+  bottom: auto;
+  left: auto; }
+  /* line 14, ../sass/_mixins.scss */
+  .slider .knob:not(.disabled):hover {
+    background-color: #0099cc; }
+  /* line 26, ../sass/_mixins.scss */
+  .slider .knob .icon {
+    color: #fff; }
+  /* line 185, ../../../../general/res/sass/_mixins.scss */
+  .slider .knob:before {
+    -moz-transition-property: "border-color";
+    -o-transition-property: "border-color";
+    -webkit-transition-property: "border-color";
+    transition-property: "border-color";
+    -moz-transition-duration: 0.75s;
+    -o-transition-duration: 0.75s;
+    -webkit-transition-duration: 0.75s;
+    transition-duration: 0.75s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    content: '';
+    display: block;
+    height: auto;
+    pointer-events: none;
+    position: absolute;
+    z-index: 2;
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
+    left: 2px;
+    bottom: 5px;
+    top: 5px; }
+  /* line 207, ../../../../general/res/sass/_mixins.scss */
+  .slider .knob:not(.disabled):hover:before {
+    -moz-transition-property: "border-color";
+    -o-transition-property: "border-color";
+    -webkit-transition-property: "border-color";
+    transition-property: "border-color";
+    -moz-transition-duration: 50ms;
+    -o-transition-duration: 50ms;
+    -webkit-transition-duration: 50ms;
+    transition-duration: 50ms;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    border-color: #0099cc; }
+  /* line 319, ../../../../general/res/sass/controls/_controls.scss */
+  .slider .knob:before {
+    top: 1px;
+    bottom: 3px;
+    left: 5px; }
+/* line 326, ../../../../general/res/sass/controls/_controls.scss */
+.slider .range {
+  background: rgba(0, 153, 204, 0.6);
+  cursor: ew-resize;
+  position: absolute;
+  top: 0;
+  right: auto;
+  bottom: 0;
+  left: auto;
+  height: auto;
+  width: auto; }
+  /* line 336, ../../../../general/res/sass/controls/_controls.scss */
+  .slider .range:hover {
+    background: rgba(0, 153, 204, 0.7); }
+
+/******************************************************** BROWSER ELEMENTS */
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+  /* line 345, ../../../../general/res/sass/controls/_controls.scss */
+  ::-webkit-scrollbar {
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
+    -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
+    box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
+    background-color: rgba(0, 0, 0, 0.4);
+    border-bottom: 1px solid rgba(77, 77, 77, 0.4);
+    border-right: 1px solid rgba(77, 77, 77, 0.4);
+    height: 10px;
+    width: 10px; }
+
+  /* line 351, ../../../../general/res/sass/controls/_controls.scss */
+  ::-webkit-scrollbar-thumb {
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-size: 100%;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #ffffff), color-stop(100%, #ffffff));
+    background-image: -moz-linear-gradient(#ffffff, #ffffff 20px);
+    background-image: -webkit-linear-gradient(#ffffff, #ffffff 20px);
+    background-image: linear-gradient(#ffffff, #ffffff 20px);
+    -moz-border-radius: 1px;
+    -webkit-border-radius: 1px;
+    border-radius: 1px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    border-top: 1px solid white; }
+    /* line 358, ../../../../general/res/sass/controls/_controls.scss */
+    ::-webkit-scrollbar-thumb:hover {
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #ffffff), color-stop(100%, #ffffff));
+      background-image: -moz-linear-gradient(#ffffff, #ffffff 20px);
+      background-image: -webkit-linear-gradient(#ffffff, #ffffff 20px);
+      background-image: linear-gradient(#ffffff, #ffffff 20px); }
+
+  /* line 363, ../../../../general/res/sass/controls/_controls.scss */
+  ::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0.4); } }
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../../../../general/res/sass/controls/_lists.scss */
+.checkbox-list label.checkbox.custom {
+  display: block;
+  margin-bottom: 5px; }
+/* line 27, ../../../../general/res/sass/controls/_lists.scss */
+.checkbox-list li {
+  margin-bottom: 5px; }
+
+/* line 35, ../../../../general/res/sass/controls/_lists.scss */
+.l-tree-item-flat-list .tree-item .label {
+  left: 5px !important; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/******************************************************** MENU BUTTONS */
+/* line 31, ../../../../general/res/sass/controls/_menus.scss */
+.s-menu .icon {
+  font-size: 120%; }
+/* line 35, ../../../../general/res/sass/controls/_menus.scss */
+.s-menu .title-label {
+  margin-left: 3px; }
+/* line 39, ../../../../general/res/sass/controls/_menus.scss */
+.s-menu:after {
+  color: rgba(255, 255, 255, 0.2);
+  content: '\76';
+  display: inline-block;
+  font-family: 'symbolsfont';
+  margin-left: 3px;
+  text-shadow: none;
+  vertical-align: top; }
+/* line 50, ../../../../general/res/sass/controls/_menus.scss */
+.s-menu.create-btn .title-label {
+  font-size: 1rem; }
+/* line 53, ../../../../general/res/sass/controls/_menus.scss */
+.s-menu.create-btn:after {
+  color: rgba(255, 255, 255, 0.5); }
+/* line 58, ../../../../general/res/sass/controls/_menus.scss */
+.s-menu .menu {
+  left: 0;
+  text-align: left; }
+  /* line 61, ../../../../general/res/sass/controls/_menus.scss */
+  .s-menu .menu .ui-symbol.icon {
+    width: 12px; }
+
+/******************************************************** MENUS THEMSELVES */
+/* line 68, ../../../../general/res/sass/controls/_menus.scss */
+.menu-element {
+  cursor: pointer;
+  position: relative; }
+  /* line 74, ../../../../general/res/sass/controls/_menus.scss */
+  .menu-element .menu {
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    background-color: white;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block;
+    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    display: block;
+    padding: 3px 0;
+    position: absolute;
+    z-index: 10; }
+    /* line 82, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .menu ul {
+      margin: 0;
+      padding: 0; }
+      /* line 324, ../../../../general/res/sass/_mixins.scss */
+      .menu-element .menu ul li {
+        list-style-type: none;
+        margin: 0;
+        padding: 0; }
+      /* line 84, ../../../../general/res/sass/controls/_menus.scss */
+      .menu-element .menu ul li {
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        border-top: 1px solid white;
+        color: white;
+        line-height: 1.5rem;
+        padding: 3px 10px 3px 30px;
+        position: relative;
+        white-space: nowrap; }
+        /* line 92, ../../../../general/res/sass/controls/_menus.scss */
+        .menu-element .menu ul li:first-child {
+          border: none; }
+        /* line 95, ../../../../general/res/sass/controls/_menus.scss */
+        .menu-element .menu ul li:hover {
+          background: white;
+          color: #fff; }
+          /* line 101, ../../../../general/res/sass/controls/_menus.scss */
+          .menu-element .menu ul li:hover .icon {
+            color: #33ccff; }
+        /* line 109, ../../../../general/res/sass/controls/_menus.scss */
+        .menu-element .menu ul li .type-icon {
+          left: 10px; }
+  /* line 116, ../../../../general/res/sass/controls/_menus.scss */
+  .menu-element .context-menu, .menu-element .checkbox-menu,
+  .menu-element .super-menu {
+    pointer-events: auto;
+    background-color: white;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block; }
+    /* line 124, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .context-menu ul li, .menu-element .checkbox-menu ul li,
+    .menu-element .super-menu ul li {
+      padding-left: 25px; }
+      /* line 126, ../../../../general/res/sass/controls/_menus.scss */
+      .menu-element .context-menu ul li a, .menu-element .checkbox-menu ul li a,
+      .menu-element .super-menu ul li a {
+        color: white; }
+      /* line 129, ../../../../general/res/sass/controls/_menus.scss */
+      .menu-element .context-menu ul li .icon, .menu-element .checkbox-menu ul li .icon,
+      .menu-element .super-menu ul li .icon {
+        color: #24c8ff; }
+      /* line 132, ../../../../general/res/sass/controls/_menus.scss */
+      .menu-element .context-menu ul li .type-icon, .menu-element .checkbox-menu ul li .type-icon,
+      .menu-element .super-menu ul li .type-icon {
+        left: 5px; }
+      /* line 135, ../../../../general/res/sass/controls/_menus.scss */
+      .menu-element .context-menu ul li:hover .icon, .menu-element .checkbox-menu ul li:hover .icon,
+      .menu-element .super-menu ul li:hover .icon {
+        color: #3dcfff; }
+  /* line 144, ../../../../general/res/sass/controls/_menus.scss */
+  .menu-element .checkbox-menu ul li {
+    padding-left: 50px; }
+    /* line 146, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .checkbox-menu ul li .checkbox {
+      position: absolute;
+      left: 5px;
+      top: 0.53333rem; }
+      /* line 151, ../../../../general/res/sass/controls/_menus.scss */
+      .menu-element .checkbox-menu ul li .checkbox em {
+        height: 0.7rem;
+        width: 0.7rem; }
+        /* line 154, ../../../../general/res/sass/controls/_menus.scss */
+        .menu-element .checkbox-menu ul li .checkbox em:before {
+          font-size: 7px !important;
+          height: 0.7rem;
+          width: 0.7rem;
+          line-height: 0.7rem; }
+    /* line 162, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .checkbox-menu ul li .type-icon {
+      left: 25px; }
+  /* line 168, ../../../../general/res/sass/controls/_menus.scss */
+  .menu-element .super-menu {
+    display: block;
+    width: 500px;
+    height: 480px; }
+    /* line 178, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .super-menu .contents {
+      overflow: hidden;
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      bottom: 5px;
+      left: 5px;
+      width: auto;
+      height: auto; }
+    /* line 181, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .super-menu .pane {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box; }
+      /* line 183, ../../../../general/res/sass/controls/_menus.scss */
+      .menu-element .super-menu .pane.left {
+        border-right: 1px solid rgba(255, 255, 255, 0.2);
+        left: 0;
+        padding-right: 5px;
+        right: auto;
+        width: 50%;
+        overflow-x: hidden;
+        overflow-y: auto; }
+        /* line 193, ../../../../general/res/sass/controls/_menus.scss */
+        .menu-element .super-menu .pane.left ul li {
+          -moz-border-radius: 3px;
+          -webkit-border-radius: 3px;
+          border-radius: 3px;
+          padding-left: 30px;
+          border-top: none; }
+      /* line 200, ../../../../general/res/sass/controls/_menus.scss */
+      .menu-element .super-menu .pane.right {
+        left: auto;
+        right: 0;
+        padding: 25px;
+        width: 50%; }
+        /* line 206, ../../../../general/res/sass/controls/_menus.scss */
+        .menu-element .super-menu .pane.right .icon {
+          color: #fff; }
+    /* line 213, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .super-menu .menu-item-description .desc-area.icon {
+      position: relative;
+      font-size: 8em;
+      left: 0;
+      height: 150px;
+      line-height: 150px;
+      margin-bottom: 25px;
+      text-align: center; }
+    /* line 223, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .super-menu .menu-item-description .desc-area.title {
+      color: #fff;
+      font-size: 1.2em;
+      margin-bottom: 0.5em; }
+    /* line 228, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .super-menu .menu-item-description .desc-area.description {
+      color: #fff;
+      font-size: 0.8em;
+      line-height: 1.5em; }
+  /* line 237, ../../../../general/res/sass/controls/_menus.scss */
+  .menu-element .context-menu, .menu-element .checkbox-menu {
+    font-size: 0.80rem; }
+
+/* line 242, ../../../../general/res/sass/controls/_menus.scss */
+.context-menu-holder {
+  pointer-events: none;
+  position: absolute;
+  height: 200px;
+  width: 170px;
+  z-index: 70; }
+  /* line 248, ../../../../general/res/sass/controls/_menus.scss */
+  .context-menu-holder .context-menu-wrapper {
+    position: absolute;
+    height: 100%;
+    width: 100%; }
+  /* line 255, ../../../../general/res/sass/controls/_menus.scss */
+  .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
+    right: 0; }
+  /* line 258, ../../../../general/res/sass/controls/_menus.scss */
+  .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
+    bottom: 0; }
+
+/* line 263, ../../../../general/res/sass/controls/_menus.scss */
+.btn-bar.right .menu,
+.menus-to-left .menu {
+  left: auto;
+  right: 0;
+  width: auto; }
+
+/* line 1, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller {
+  position: relative;
+  margin: 10px 0;
+  min-width: 400px; }
+  /* line 12, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-inputs-holder,
+  .l-time-controller .l-time-range-slider {
+    font-size: 0.8em; }
+  /* line 17, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-inputs-holder,
+  .l-time-controller .l-time-range-slider-holder,
+  .l-time-controller .l-time-range-ticks-holder {
+    margin-bottom: 5px;
+    position: relative; }
+  /* line 24, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-slider,
+  .l-time-controller .l-time-range-ticks {
+    overflow: visible;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    height: auto; }
+  /* line 30, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-inputs-holder {
+    height: 20px; }
+  /* line 34, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-slider,
+  .l-time-controller .l-time-range-ticks {
+    left: 90px;
+    right: 90px; }
+  /* line 40, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-slider-holder {
+    height: 30px; }
+    /* line 42, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .l-time-range-slider-holder .range-holder {
+      -moz-box-shadow: none;
+      -webkit-box-shadow: none;
+      box-shadow: none;
+      background: none;
+      border: none;
+      height: 75%; }
+  /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-ticks-holder {
+    height: 10px; }
+    /* line 52, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
+      border-top: 1px solid white; }
+      /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
+      .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
+        background-color: white;
+        border: none;
+        width: 1px;
+        margin-left: -1px; }
+        /* line 59, ../../../../general/res/sass/controls/_time-controller.scss */
+        .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
+          margin-left: 0; }
+        /* line 62, ../../../../general/res/sass/controls/_time-controller.scss */
+        .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
+          color: white;
+          font-size: 0.7em;
+          position: absolute;
+          margin-left: -25px;
+          text-align: center;
+          top: 10px;
+          width: 50px;
+          z-index: 2; }
+  /* line 76, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .knob {
+    width: 9px; }
+    /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .knob .range-value {
+      position: absolute;
+      top: 50%;
+      margin-top: -7px;
+      white-space: nowrap;
+      width: 75px; }
+    /* line 87, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .knob:hover .range-value {
+      color: #0099cc; }
+    /* line 90, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .knob.knob-l {
+      margin-left: -4.5px; }
+      /* line 92, ../../../../general/res/sass/controls/_time-controller.scss */
+      .l-time-controller .knob.knob-l .range-value {
+        text-align: right;
+        right: 14px; }
+    /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .knob.knob-r {
+      margin-right: -4.5px; }
+      /* line 99, ../../../../general/res/sass/controls/_time-controller.scss */
+      .l-time-controller .knob.knob-r .range-value {
+        left: 14px; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 26, ../../../../general/res/sass/mobile/controls/_menus.scss */
+  .menu-element .super-menu {
+    width: 250px;
+    height: 250px; }
+    /* line 32, ../../../../general/res/sass/mobile/controls/_menus.scss */
+    .menu-element .super-menu .pane.left {
+      border-right: none;
+      padding-right: 0;
+      width: 100%; }
+    /* line 37, ../../../../general/res/sass/mobile/controls/_menus.scss */
+    .menu-element .super-menu .pane.right {
+      display: none; } }
+/********************************* FORMS */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../../../../general/res/sass/forms/_elems.scss */
+.section-header {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.1);
+  color: #999999;
+  font-size: 0.8em;
+  padding: 5px 5px;
+  text-transform: uppercase; }
+
+/* line 35, ../../../../general/res/sass/forms/_elems.scss */
+.form .form-section {
+  position: relative;
+  margin-bottom: 20px; }
+/* line 40, ../../../../general/res/sass/forms/_elems.scss */
+.form .form-row {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  overflow: hidden;
+  *zoom: 1;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  margin-top: 5px;
+  padding: 5px 0;
+  position: relative; }
+  /* line 48, ../../../../general/res/sass/forms/_elems.scss */
+  .form .form-row.first {
+    border-top: none; }
+  /* line 52, ../../../../general/res/sass/forms/_elems.scss */
+  .form .form-row > .label,
+  .form .form-row > .controls {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+    *zoom: 1;
+    font-size: 0.8rem;
+    line-height: 22px;
+    min-height: 22px; }
+  /* line 61, ../../../../general/res/sass/forms/_elems.scss */
+  .form .form-row > .label {
+    float: left;
+    min-width: 120px;
+    position: relative;
+    white-space: nowrap;
+    width: 30%; }
+  /* line 71, ../../../../general/res/sass/forms/_elems.scss */
+  .form .form-row .value {
+    color: #999999; }
+  /* line 75, ../../../../general/res/sass/forms/_elems.scss */
+  .form .form-row .controls {
+    float: left;
+    position: relative;
+    width: 69.9%; }
+    /* line 82, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .controls .l-composite-control.l-checkbox {
+      display: inline-block;
+      line-height: 14px;
+      margin-right: 5px; }
+    /* line 91, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .controls .l-med input[type="text"] {
+      width: 200px; }
+    /* line 95, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .controls .l-small input[type="text"] {
+      width: 50px; }
+    /* line 99, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .controls .l-numeric input[type="text"] {
+      text-align: right; }
+    /* line 103, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .controls .select {
+      margin-right: 5px; }
+  /* line 108, ../../../../general/res/sass/forms/_elems.scss */
+  .form .form-row .field-hints {
+    color: #333333; }
+  /* line 112, ../../../../general/res/sass/forms/_elems.scss */
+  .form .form-row .selector-list {
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background: rgba(0, 0, 0, 0.2);
+    padding: 5px;
+    position: relative;
+    height: 150px;
+    overflow: auto; }
+    /* line 123, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .selector-list .wrapper {
+      overflow-y: auto;
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      bottom: 5px;
+      left: 5px; }
+
+/* line 137, ../../../../general/res/sass/forms/_elems.scss */
+label.form-control.checkbox input {
+  margin-right: 5px;
+  vertical-align: top; }
+
+/* line 143, ../../../../general/res/sass/forms/_elems.scss */
+.hint,
+.s-hint {
+  font-size: 0.9em; }
+
+/* line 148, ../../../../general/res/sass/forms/_elems.scss */
+.l-result {
+  display: inline-block;
+  min-width: 32px;
+  min-height: 32px;
+  position: relative;
+  vertical-align: top; }
+  /* line 155, ../../../../general/res/sass/forms/_elems.scss */
+  .l-result div.s-hint {
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    background: rgba(255, 153, 0, 0.8);
+    display: block;
+    color: #ffd699;
+    padding: 5px; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../../../../general/res/sass/forms/_textarea.scss */
+.edit-main textarea {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: #999999;
+  outline: none;
+  padding: 5px;
+  position: absolute;
+  height: 100%;
+  width: 100%; }
+  /* line 290, ../../../../general/res/sass/_mixins.scss */
+  .edit-main textarea.error {
+    background: rgba(255, 0, 0, 0.5); }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../../../../general/res/sass/forms/_text-input.scss */
+input[type="text"] {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: #999999;
+  outline: none;
+  padding: 0 3px; }
+  /* line 290, ../../../../general/res/sass/_mixins.scss */
+  input[type="text"].error {
+    background: rgba(255, 0, 0, 0.5); }
+  /* line 29, ../../../../general/res/sass/forms/_text-input.scss */
+  input[type="text"].numeric {
+    text-align: right; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../../../../general/res/sass/forms/_selects.scss */
+.form-control.select {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background-color: #fff;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-block;
+  color: #fff;
+  /*    &:not(.disabled) {
+          &:not(.paused) {
+              &:hover {
+                  .icon {
+                      color: pullForward($ic, $ltGamma);
+                  }
+              }
+          }
+      }*/
+  cursor: pointer;
+  display: inline-block;
+  margin: 0 0 2px 2px;
+  overflow: hidden;
+  position: relative; }
+  /* line 14, ../sass/_mixins.scss */
+  .form-control.select:not(.disabled):hover {
+    background-color: #0099cc; }
+  /* line 26, ../sass/_mixins.scss */
+  .form-control.select .icon {
+    color: #fff; }
+  /* line 29, ../../../../general/res/sass/forms/_selects.scss */
+  .form-control.select select {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background: none;
+    color: #666;
+    border: none !important;
+    cursor: pointer;
+    padding: 4px 25px 2px 5px;
+    width: 120%; }
+    /* line 38, ../../../../general/res/sass/forms/_selects.scss */
+    .form-control.select select option {
+      margin: 5px 0; }
+  /* line 42, ../../../../general/res/sass/forms/_selects.scss */
+  .form-control.select:after {
+    color: #0099cc;
+    content: "v";
+    display: block;
+    font-family: 'symbolsfont';
+    pointer-events: none;
+    position: absolute;
+    right: 5px;
+    top: 0; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../../../../general/res/sass/forms/_channel-selector.scss */
+.channel-selector .line {
+  margin-bottom: 5px;
+  min-height: 22px; }
+/* line 27, ../../../../general/res/sass/forms/_channel-selector.scss */
+.channel-selector .treeview {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: #999999;
+  outline: none;
+  padding: 0 3px;
+  background: white;
+  border-bottom: 1px solid white;
+  min-height: 300px;
+  max-height: 400px;
+  overflow: auto;
+  padding: 5px; }
+  /* line 290, ../../../../general/res/sass/_mixins.scss */
+  .channel-selector .treeview.error {
+    background: rgba(255, 0, 0, 0.5); }
+/* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
+.channel-selector .btns-add-remove {
+  margin-top: 150px; }
+  /* line 39, ../../../../general/res/sass/forms/_channel-selector.scss */
+  .channel-selector .btns-add-remove .btn {
+    display: block;
+    font-size: 1.5em;
+    margin-bottom: 5px;
+    padding: 10px;
+    text-align: center; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../../../../general/res/sass/forms/_datetime.scss */
+.complex.datetime span {
+  display: inline-block;
+  margin-right: 5px; }
+/* line 36, ../../../../general/res/sass/forms/_datetime.scss */
+.complex.datetime .fields {
+  margin-top: 3px 0;
+  padding: 3px 0; }
+/* line 41, ../../../../general/res/sass/forms/_datetime.scss */
+.complex.datetime .date {
+  width: 85px; }
+  /* line 44, ../../../../general/res/sass/forms/_datetime.scss */
+  .complex.datetime .date input {
+    width: 80px; }
+/* line 50, ../../../../general/res/sass/forms/_datetime.scss */
+.complex.datetime .time.sm {
+  width: 45px; }
+  /* line 53, ../../../../general/res/sass/forms/_datetime.scss */
+  .complex.datetime .time.sm input {
+    width: 40px; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../../../../general/res/sass/forms/_validation.scss */
+.validates > .label {
+  padding-right: 25px; }
+  /* line 26, ../../../../general/res/sass/forms/_validation.scss */
+  .validates > .label::after {
+    /*            display: block;
+                position: absolute;
+                top: 0;
+                right: $reqSymbolM;
+                bottom: 0;
+                left: auto;
+                height: auto;
+                width: $reqSymbolW;*/
+    font-family: symbolsfont;
+    font-size: 0.7em; }
+/* line 44, ../../../../general/res/sass/forms/_validation.scss */
+.validates.invalid > .label::after, .validates.invalid.req > .label::after {
+  color: #ff9900;
+  content: "x"; }
+/* line 51, ../../../../general/res/sass/forms/_validation.scss */
+.validates.valid > .label::after, .validates.valid.req > .label::after {
+  color: #33cc33;
+  content: "2"; }
+/* line 57, ../../../../general/res/sass/forms/_validation.scss */
+.validates.req > .label::after {
+  color: #ffc700;
+  content: "*"; }
+
+/* line 63, ../../../../general/res/sass/forms/_validation.scss */
+.req {
+  font-size: 0.7em; }
+
+/* line 66, ../../../../general/res/sass/forms/_validation.scss */
+span.req {
+  color: #ffc700; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 24, ../../../../general/res/sass/forms/_filter.scss */
+.filter input.filter,
+.filter input.t-filter-input,
+.t-filter input.filter,
+.t-filter input.t-filter-input {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: #999999;
+  outline: none;
+  padding: 0 3px;
+  background: white;
+  border-bottom: 1px solid white; }
+  /* line 290, ../../../../general/res/sass/_mixins.scss */
+  .filter input.filter.error,
+  .filter input.t-filter-input.error,
+  .t-filter input.filter.error,
+  .t-filter input.t-filter-input.error {
+    background: rgba(255, 0, 0, 0.5); }
+/* line 28, ../../../../general/res/sass/forms/_filter.scss */
+.filter input.t-filter-input,
+.t-filter input.t-filter-input {
+  height: 22px;
+  width: 200px; }
+  /* line 38, ../../../../general/res/sass/forms/_filter.scss */
+  .filter input.t-filter-input:not(.ng-dirty) + .t-a-clear,
+  .t-filter input.t-filter-input:not(.ng-dirty) + .t-a-clear {
+    display: none; }
+/* line 42, ../../../../general/res/sass/forms/_filter.scss */
+.filter .icon.ui-symbol,
+.t-filter .icon.ui-symbol {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  display: inline-block;
+  font-size: 1.3em;
+  height: 22px;
+  line-height: 22px;
+  padding: 0px 5px;
+  vertical-align: middle; }
+  /* line 50, ../../../../general/res/sass/forms/_filter.scss */
+  .filter .icon.ui-symbol:hover,
+  .t-filter .icon.ui-symbol:hover {
+    background: rgba(255, 255, 255, 0.1); }
+/* line 54, ../../../../general/res/sass/forms/_filter.scss */
+.filter .s-a-clear.ui-symbol,
+.t-filter .s-a-clear.ui-symbol {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
+  opacity: 0.2;
+  background: #fff;
+  color: #333;
+  display: block;
+  position: absolute;
+  height: 13px;
+  width: 13px;
+  line-height: 13px;
+  margin-top: -6.5px;
+  overflow: hidden;
+  padding-top: 1px;
+  right: 4.5px;
+  top: 50%;
+  text-align: center;
+  z-index: 5; }
+  /* line 74, ../../../../general/res/sass/forms/_filter.scss */
+  .filter .s-a-clear.ui-symbol:hover,
+  .t-filter .s-a-clear.ui-symbol:hover {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
+    opacity: 0.6;
+    background-color: #0099cc; }
+
+/* line 82, ../../../../general/res/sass/forms/_filter.scss */
+.l-filter {
+  display: inline-block;
+  position: relative; }
+
+/* line 89, ../../../../general/res/sass/forms/_filter.scss */
+.top-bar input.filter {
+  font-size: .9em;
+  height: 24px;
+  line-height: 24px;
+  margin-right: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+  vertical-align: top; }
+/* line 100, ../../../../general/res/sass/forms/_filter.scss */
+.top-bar .icon-filter {
+  font-size: 1.4em; }
+
+/********************************* USER ENVIRON */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 32, ../../../../general/res/sass/user-environ/_layout.scss */
+.holder-all {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+
+/* line 40, ../../../../general/res/sass/user-environ/_layout.scss */
+.browse-area,
+.edit-area,
+.editor {
+  position: absolute; }
+
+/* line 46, ../../../../general/res/sass/user-environ/_layout.scss */
+.editor {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px; }
+
+/* line 50, ../../../../general/res/sass/user-environ/_layout.scss */
+.contents {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0; }
+  /* line 58, ../../../../general/res/sass/user-environ/_layout.scss */
+  .contents.nomargin {
+    right: 0px;
+    bottom: 0px;
+    left: 0px; }
+
+/* line 67, ../../../../general/res/sass/user-environ/_layout.scss */
+.bar .icon.major {
+  margin-right: 5px; }
+/* line 70, ../../../../general/res/sass/user-environ/_layout.scss */
+.bar.abs, .s-menu span.bar.l-click-area {
+  text-wrap: none;
+  white-space: nowrap; }
+  /* line 73, ../../../../general/res/sass/user-environ/_layout.scss */
+  .bar.abs.left, .s-menu span.bar.left.l-click-area,
+  .bar.abs .left,
+  .s-menu span.bar.l-click-area .left {
+    width: 45%;
+    right: auto; }
+  /* line 78, ../../../../general/res/sass/user-environ/_layout.scss */
+  .bar.abs.right, .s-menu span.bar.right.l-click-area,
+  .bar.abs .right,
+  .s-menu span.bar.l-click-area .right {
+    width: 45%;
+    left: auto;
+    text-align: right; }
+    /* line 83, ../../../../general/res/sass/user-environ/_layout.scss */
+    .bar.abs.right .icon.major, .s-menu span.bar.right.l-click-area .icon.major,
+    .bar.abs .right .icon.major,
+    .s-menu span.bar.l-click-area .right .icon.major {
+      margin-left: 15px; }
+  /* line 89, ../../../../general/res/sass/user-environ/_layout.scss */
+  .bar.abs .l-flex .left, .s-menu span.bar.l-click-area .l-flex .left,
+  .bar.abs .l-flex .right,
+  .s-menu span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .s-menu span.bar.l-flex.l-click-area .left,
+  .bar.abs.l-flex .right,
+  .s-menu span.bar.l-flex.l-click-area .right {
+    width: auto; }
+
+/* line 98, ../../../../general/res/sass/user-environ/_layout.scss */
+.user-environ .browse-area,
+.user-environ .edit-area,
+.user-environ .editor {
+  top: 39px;
+  right: 10px;
+  bottom: 35px;
+  left: 10px; }
+/* line 109, ../../../../general/res/sass/user-environ/_layout.scss */
+.user-environ .browse-area > .contents,
+.user-environ .edit-area > .contents {
+  left: 0;
+  right: 0; }
+/* line 115, ../../../../general/res/sass/user-environ/_layout.scss */
+.user-environ .edit-area {
+  top: 45px; }
+  /* line 118, ../../../../general/res/sass/user-environ/_layout.scss */
+  .user-environ .edit-area .tool-bar {
+    bottom: auto;
+    height: 30px;
+    line-height: 25px; }
+  /* line 123, ../../../../general/res/sass/user-environ/_layout.scss */
+  .user-environ .edit-area .work-area {
+    top: 40px; }
+/* line 128, ../../../../general/res/sass/user-environ/_layout.scss */
+.user-environ .ue-bottom-bar {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  top: auto;
+  height: 25px; }
+  /* line 133, ../../../../general/res/sass/user-environ/_layout.scss */
+  .user-environ .ue-bottom-bar .status-holder {
+    z-index: 1; }
+  /* line 137, ../../../../general/res/sass/user-environ/_layout.scss */
+  .user-environ .ue-bottom-bar .app-logo {
+    left: auto;
+    width: 105px;
+    z-index: 2; }
+
+/* line 145, ../../../../general/res/sass/user-environ/_layout.scss */
+.cols {
+  overflow: hidden;
+  *zoom: 1; }
+  /* line 147, ../../../../general/res/sass/user-environ/_layout.scss */
+  .cols .col {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+    *zoom: 1;
+    float: left;
+    margin-left: 1.5%;
+    padding-left: 5px;
+    position: relative; }
+    /* line 155, ../../../../general/res/sass/user-environ/_layout.scss */
+    .cols .col:first-child {
+      margin-left: 0;
+      padding-left: 0; }
+  /* line 162, ../../../../general/res/sass/user-environ/_layout.scss */
+  .cols.cols-2 .col-1 {
+    min-width: 250px;
+    width: 48.5%; }
+  /* line 168, ../../../../general/res/sass/user-environ/_layout.scss */
+  .cols.cols-2-ff .col-100px {
+    width: 100px; }
+  /* line 175, ../../../../general/res/sass/user-environ/_layout.scss */
+  .cols.cols-6 .col-1 {
+    min-width: 83.33333px;
+    width: 15.16667%; }
+  /* line 181, ../../../../general/res/sass/user-environ/_layout.scss */
+  .cols.cols-16 .col-1 {
+    min-width: 31.25px;
+    width: 4.75%; }
+  /* line 184, ../../../../general/res/sass/user-environ/_layout.scss */
+  .cols.cols-16 .col-2 {
+    min-width: 62.5px;
+    width: 11%; }
+  /* line 187, ../../../../general/res/sass/user-environ/_layout.scss */
+  .cols.cols-16 .col-7 {
+    min-width: 218.75px;
+    width: 42.25%; }
+  /* line 193, ../../../../general/res/sass/user-environ/_layout.scss */
+  .cols.cols-32 .col-2 {
+    min-width: 31.25px;
+    width: 4.75%; }
+  /* line 196, ../../../../general/res/sass/user-environ/_layout.scss */
+  .cols.cols-32 .col-15 {
+    min-width: 234.375px;
+    width: 45.375%; }
+  /* line 200, ../../../../general/res/sass/user-environ/_layout.scss */
+  .cols .l-row {
+    overflow: hidden;
+    *zoom: 1;
+    padding: 5px 0; }
+
+/* line 208, ../../../../general/res/sass/user-environ/_layout.scss */
+.browse-mode .split-layout .split-pane-component.pane.left {
+  min-width: 150px;
+  max-width: 800px;
+  width: 25%; }
+
+/* line 218, ../../../../general/res/sass/user-environ/_layout.scss */
+.edit-mode .split-layout .split-pane-component.pane.right {
+  width: 15%; }
+  /* line 220, ../../../../general/res/sass/user-environ/_layout.scss */
+  .edit-mode .split-layout .split-pane-component.pane.right .pane.bottom {
+    min-height: 50px;
+    height: 30%; }
+
+/* line 230, ../../../../general/res/sass/user-environ/_layout.scss */
+.pane {
+  position: absolute; }
+  /* line 233, ../../../../general/res/sass/user-environ/_layout.scss */
+  .pane.treeview.left .create-btn-holder {
+    bottom: auto;
+    top: 0;
+    height: 24px; }
+    /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */
+    .pane.treeview.left .create-btn-holder .wrapper.menu-element {
+      position: absolute;
+      bottom: 5px; }
+  /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */
+  .pane.treeview.left .search-holder {
+    top: 34px; }
+  /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */
+  .pane.treeview.left .tree-holder {
+    overflow: auto;
+    top: 64px; }
+  /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
+  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area,
+  .pane.items .object-browse-bar .right.abs,
+  .pane.items .object-browse-bar .s-menu span.right.l-click-area,
+  .s-menu .pane.items .object-browse-bar span.right.l-click-area {
+    top: auto; }
+  /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
+  .pane.items .object-holder {
+    top: 34px; }
+  /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */
+  .pane .object-holder {
+    overflow: auto; }
+
+/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
+.split-layout.horizontal > .pane {
+  margin-top: 5px; }
+  /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
+  .split-layout.horizontal > .pane:first-child {
+    margin-top: 0; }
+/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */
+.split-layout.vertical > .pane {
+  margin-left: 5px; }
+  /* line 287, ../../../../general/res/sass/user-environ/_layout.scss */
+  .split-layout.vertical > .pane > .holder {
+    left: 0;
+    right: 0; }
+  /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
+  .split-layout.vertical > .pane:first-child {
+    margin-left: 0; }
+    /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */
+    .split-layout.vertical > .pane:first-child .holder {
+      right: 3px; }
+
+/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
+.object-browse-bar .s-btn, .object-browse-bar .s-menu,
+.top-bar .buttons-main .s-btn,
+.top-bar .buttons-main .s-menu,
+.top-bar .s-menu,
+.tool-bar .s-btn,
+.tool-bar .s-menu,
+.tool-bar .s-menu {
+  height: 25px;
+  line-height: 25px;
+  vertical-align: top; }
+
+/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */
+.object-browse-bar .view-switcher,
+.top-bar .view-switcher {
+  margin-right: 20px; }
+
+/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */
+.object-browse-bar {
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  height: 24px;
+  line-height: 24px;
+  white-space: nowrap; }
+  /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
+  .object-browse-bar .left {
+    padding-right: 20px; }
+    /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
+    .object-browse-bar .left .l-back {
+      display: inline-block;
+      float: left;
+      margin-right: 10px; }
+
+/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */
+.l-flex {
+  display: flex;
+  display: -webkit-flex;
+  flex-flow: row nowrap;
+  -webkit-flex-flow: row nowrap; }
+  /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
+  .l-flex .left {
+    flex: 1 1 0;
+    -webkit-flex: 1 1 0; }
+
+/* line 347, ../../../../general/res/sass/user-environ/_layout.scss */
+.vscroll {
+  overflow-y: auto; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 26, ../../../../general/res/sass/mobile/_layout.scss */
+  .browse-wrapper,
+  .pane {
+    top: 0 !important;
+    right: 0;
+    bottom: 0;
+    left: 0; }
+
+  /* line 31, ../../../../general/res/sass/mobile/_layout.scss */
+  .pane.left.treeview {
+    background-color: #222; }
+
+  /* line 35, ../../../../general/res/sass/mobile/_layout.scss */
+  .pane.right-repr {
+    -moz-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    -webkit-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    transition-timing-function: ease;
+    backface-visibility: hidden;
+    margin-left: 0 !important; }
+    /* line 39, ../../../../general/res/sass/mobile/_layout.scss */
+    .pane.right-repr #content-area {
+      -moz-transition-duration: 0.35s;
+      -o-transition-duration: 0.35s;
+      -webkit-transition-duration: 0.35s;
+      transition-duration: 0.35s;
+      transition-timing-function: ease;
+      backface-visibility: hidden;
+      opacity: 1; }
+
+  /* line 45, ../../../../general/res/sass/mobile/_layout.scss */
+  .user-environ .browse-area,
+  .user-environ .edit-area,
+  .user-environ .editor {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 25px; }
+
+  /* line 51, ../../../../general/res/sass/mobile/_layout.scss */
+  .holder.l-mobile {
+    top: 10px !important;
+    right: 10px !important;
+    bottom: 10px !important;
+    left: 10px !important; }
+
+  /* line 61, ../../../../general/res/sass/mobile/_layout.scss */
+  .browse-hidetree {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; }
+    /* line 65, ../../../../general/res/sass/mobile/_layout.scss */
+    .browse-hidetree .pane.left.treeview {
+      opacity: 0;
+      right: 100% !important;
+      width: auto !important;
+      overflow-y: hidden;
+      overflow-x: hidden; }
+    /* line 74, ../../../../general/res/sass/mobile/_layout.scss */
+    .browse-hidetree .pane.right-repr {
+      left: 0 !important; }
+
+  /* line 79, ../../../../general/res/sass/mobile/_layout.scss */
+  .browse-showtree {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; }
+    /* line 88, ../../../../general/res/sass/mobile/_layout.scss */
+    .browse-showtree .pane.left.treeview {
+      -moz-transition-property: opacity;
+      -o-transition-property: opacity;
+      -webkit-transition-property: opacity;
+      transition-property: opacity;
+      -moz-transition-duration: 0.4s;
+      -o-transition-duration: 0.4s;
+      -webkit-transition-duration: 0.4s;
+      transition-duration: 0.4s;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+      background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%);
+      opacity: 1;
+      display: block !important;
+      right: auto !important;
+      width: 40% !important; }
+    /* line 98, ../../../../general/res/sass/mobile/_layout.scss */
+    .browse-showtree .pane.right-repr {
+      left: 40% !important; }
+
+  /* line 107, ../../../../general/res/sass/mobile/_layout.scss */
+  .mobile-menu-icon {
+    font-size: 110%;
+    position: absolute;
+    top: 12px;
+    left: 10px; }
+
+  /* line 114, ../../../../general/res/sass/mobile/_layout.scss */
+  .object-browse-bar {
+    left: 30px !important; }
+    /* line 117, ../../../../general/res/sass/mobile/_layout.scss */
+    .object-browse-bar .context-available {
+      opacity: 1 !important; }
+    /* line 120, ../../../../general/res/sass/mobile/_layout.scss */
+    .object-browse-bar .view-switcher {
+      margin-right: 0 !important; }
+      /* line 122, ../../../../general/res/sass/mobile/_layout.scss */
+      .object-browse-bar .view-switcher .title-label {
+        display: none; }
+
+  /* line 129, ../../../../general/res/sass/mobile/_layout.scss */
+  .tree-holder {
+    overflow-x: hidden !important; }
+
+  /* line 133, ../../../../general/res/sass/mobile/_layout.scss */
+  .mobile-disable-select {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; }
+
+  /* line 138, ../../../../general/res/sass/mobile/_layout.scss */
+  .mobile-hide,
+  .mobile-hide-important {
+    display: none !important; }
+
+  /* line 143, ../../../../general/res/sass/mobile/_layout.scss */
+  .mobile-back-hide {
+    pointer-events: none;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 0; }
+
+  /* line 148, ../../../../general/res/sass/mobile/_layout.scss */
+  .mobile-back-unhide {
+    pointer-events: all;
+    -moz-transition-property: opacity;
+    -o-transition-property: opacity;
+    -webkit-transition-property: opacity;
+    transition-property: opacity;
+    -moz-transition-duration: 0.4s;
+    -o-transition-duration: 0.4s;
+    -webkit-transition-duration: 0.4s;
+    transition-duration: 0.4s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 1; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) {
+  /* line 157, ../../../../general/res/sass/mobile/_layout.scss */
+  .browse-showtree .pane.left.treeview {
+    width: 90% !important; }
+  /* line 160, ../../../../general/res/sass/mobile/_layout.scss */
+  .browse-showtree .pane.right-repr {
+    left: 0 !important;
+    transform: translateX(90%);
+    -webkit-transform: translateX(90%); }
+    /* line 163, ../../../../general/res/sass/mobile/_layout.scss */
+    .browse-showtree .pane.right-repr #content-area {
+      opacity: 0; } }
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+  /* line 171, ../../../../general/res/sass/mobile/_layout.scss */
+  .desktop-hide {
+    display: none; } }
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 26, ../../../../general/res/sass/edit/_editor.scss */
+.edit-main .edit-corner,
+.edit-main .edit-handle {
+  position: absolute;
+  z-index: 2; }
+/* line 32, ../../../../general/res/sass/edit/_editor.scss */
+.edit-main .edit-corner {
+  width: 15px;
+  height: 15px; }
+  /* line 35, ../../../../general/res/sass/edit/_editor.scss */
+  .edit-main .edit-corner:hover {
+    z-index: 11; }
+  /* line 38, ../../../../general/res/sass/edit/_editor.scss */
+  .edit-main .edit-corner.edit-resize-nw {
+    -moz-border-radius-bottomright: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    cursor: nw-resize;
+    top: 0;
+    left: 0; }
+  /* line 43, ../../../../general/res/sass/edit/_editor.scss */
+  .edit-main .edit-corner.edit-resize-ne {
+    -moz-border-radius-bottomleft: 5px;
+    -webkit-border-bottom-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    cursor: ne-resize;
+    top: 0;
+    right: 0; }
+  /* line 48, ../../../../general/res/sass/edit/_editor.scss */
+  .edit-main .edit-corner.edit-resize-se {
+    -moz-border-radius-topleft: 5px;
+    -webkit-border-top-left-radius: 5px;
+    border-top-left-radius: 5px;
+    cursor: se-resize;
+    bottom: 0;
+    right: 0; }
+  /* line 53, ../../../../general/res/sass/edit/_editor.scss */
+  .edit-main .edit-corner.edit-resize-sw {
+    -moz-border-radius-topright: 5px;
+    -webkit-border-top-right-radius: 5px;
+    border-top-right-radius: 5px;
+    cursor: sw-resize;
+    bottom: 0;
+    left: 0; }
+/* line 61, ../../../../general/res/sass/edit/_editor.scss */
+.edit-main .edit-handle {
+  top: 15px;
+  right: 15px;
+  bottom: 15px;
+  left: 15px; }
+  /* line 63, ../../../../general/res/sass/edit/_editor.scss */
+  .edit-main .edit-handle.edit-move {
+    cursor: move;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 1; }
+  /* line 73, ../../../../general/res/sass/edit/_editor.scss */
+  .edit-main .edit-handle.edit-resize-n {
+    top: 0px;
+    bottom: auto;
+    height: 15px;
+    cursor: n-resize; }
+  /* line 78, ../../../../general/res/sass/edit/_editor.scss */
+  .edit-main .edit-handle.edit-resize-e {
+    right: 0px;
+    left: auto;
+    width: 15px;
+    cursor: e-resize; }
+  /* line 83, ../../../../general/res/sass/edit/_editor.scss */
+  .edit-main .edit-handle.edit-resize-s {
+    bottom: 0px;
+    top: auto;
+    height: 15px;
+    cursor: s-resize; }
+  /* line 88, ../../../../general/res/sass/edit/_editor.scss */
+  .edit-main .edit-handle.edit-resize-w {
+    left: 0px;
+    right: auto;
+    width: 15px;
+    cursor: w-resize; }
+/* line 97, ../../../../general/res/sass/edit/_editor.scss */
+.edit-main .frame.child-frame.panel:hover {
+  -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+  box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+  border-color: #0099cc; }
+  /* line 101, ../../../../general/res/sass/edit/_editor.scss */
+  .edit-main .frame.child-frame.panel:hover .view-switcher {
+    opacity: 1; }
+  /* line 104, ../../../../general/res/sass/edit/_editor.scss */
+  .edit-main .frame.child-frame.panel:hover .edit-corner {
+    background-color: rgba(0, 153, 204, 0.8); }
+    /* line 106, ../../../../general/res/sass/edit/_editor.scss */
+    .edit-main .frame.child-frame.panel:hover .edit-corner:hover {
+      background-color: #0099cc; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../../../../general/res/sass/search/_search.scss */
+.abs.search-holder, .s-menu span.search-holder.l-click-area {
+  height: 25px;
+  bottom: 0;
+  top: 23px;
+  z-index: 5; }
+  /* line 27, ../../../../general/res/sass/search/_search.scss */
+  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area {
+    height: auto;
+    bottom: 0; }
+
+/* line 38, ../../../../general/res/sass/search/_search.scss */
+.search {
+  display: flex;
+  display: -webkit-flex;
+  flex-direction: column;
+  -webkit-flex-direction: column;
+  height: 100%; }
+  /* line 48, ../../../../general/res/sass/search/_search.scss */
+  .search .search-bar {
+    font-size: 0.8em;
+    max-width: 250px;
+    position: relative;
+    width: 100%; }
+    /* line 60, ../../../../general/res/sass/search/_search.scss */
+    .search .search-bar .search-input {
+      height: 25px;
+      line-height: 25px;
+      padding-top: 0;
+      padding-bottom: 0; }
+    /* line 67, ../../../../general/res/sass/search/_search.scss */
+    .search .search-bar .search-icon,
+    .search .search-bar .clear-icon,
+    .search .search-bar .menu-icon {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      color: white;
+      height: 17px;
+      width: 17px;
+      line-height: 17px;
+      position: absolute;
+      text-align: center;
+      top: 4px; }
+    /* line 80, ../../../../general/res/sass/search/_search.scss */
+    .search .search-bar .clear-icon,
+    .search .search-bar .menu-icon {
+      cursor: pointer;
+      transition: color .25s; }
+    /* line 87, ../../../../general/res/sass/search/_search.scss */
+    .search .search-bar .search-input {
+      position: relative;
+      width: 100%;
+      padding-left: 22px !important;
+      padding-right: 44px !important; }
+      /* line 94, ../../../../general/res/sass/search/_search.scss */
+      .search .search-bar .search-input input {
+        width: 100%; }
+    /* line 99, ../../../../general/res/sass/search/_search.scss */
+    .search .search-bar .search-icon {
+      color: white;
+      left: 3px;
+      transition: visibility .15s, opacity .15s, color .2s;
+      pointer-events: none; }
+    /* line 119, ../../../../general/res/sass/search/_search.scss */
+    .search .search-bar .search-input:hover + div.search-icon {
+      color: white; }
+    /* line 123, ../../../../general/res/sass/search/_search.scss */
+    .search .search-bar .clear-icon {
+      right: 22px;
+      visibility: hidden;
+      opacity: 0;
+      transition: visibility .15s, opacity .15s, color .2s; }
+      /* line 132, ../../../../general/res/sass/search/_search.scss */
+      .search .search-bar .clear-icon.content {
+        visibility: visible;
+        opacity: 1; }
+      /* line 137, ../../../../general/res/sass/search/_search.scss */
+      .search .search-bar .clear-icon:hover {
+        color: white; }
+    /* line 142, ../../../../general/res/sass/search/_search.scss */
+    .search .search-bar .menu-icon {
+      font-size: 0.8em;
+      padding-right: 4px;
+      right: 4px;
+      text-align: right; }
+      /* line 148, ../../../../general/res/sass/search/_search.scss */
+      .search .search-bar .menu-icon:hover {
+        color: white; }
+    /* line 153, ../../../../general/res/sass/search/_search.scss */
+    .search .search-bar .search-menu-holder {
+      float: right;
+      left: -20px;
+      z-index: 1;
+      transition: visibility .05s, opacity .05s; }
+      /* line 163, ../../../../general/res/sass/search/_search.scss */
+      .search .search-bar .search-menu-holder.off {
+        visibility: hidden;
+        opacity: 0; }
+    /* line 170, ../../../../general/res/sass/search/_search.scss */
+    .search .search-bar .menu-icon:hover + div.search-menu-holder {
+      visibility: visible; }
+    /* line 173, ../../../../general/res/sass/search/_search.scss */
+    .search .search-bar div.search-menu-holder:hover {
+      visibility: visible; }
+  /* line 178, ../../../../general/res/sass/search/_search.scss */
+  .search .active-filter-display {
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    line-height: 130%;
+    padding: 5px 0;
+    padding-left: 1.4625em;
+    font-size: 0.65em;
+    margin-top: 3px; }
+    /* line 193, ../../../../general/res/sass/search/_search.scss */
+    .search .active-filter-display .clear-filters-icon {
+      opacity: 0.4;
+      font-size: 0.8em;
+      position: absolute;
+      left: 1px;
+      cursor: pointer; }
+    /* line 204, ../../../../general/res/sass/search/_search.scss */
+    .search .active-filter-display.off {
+      visibility: hidden;
+      opacity: 0;
+      height: 0;
+      margin: 0;
+      padding: 0;
+      border: 0; }
+  /* line 214, ../../../../general/res/sass/search/_search.scss */
+  .search .search-scroll {
+    order: 3;
+    margin-top: 4px;
+    overflow-y: auto;
+    top: auto;
+    height: auto;
+    max-height: 100%;
+    position: relative; }
+    /* line 227, ../../../../general/res/sass/search/_search.scss */
+    .search .search-scroll .load-icon {
+      position: relative; }
+      /* line 229, ../../../../general/res/sass/search/_search.scss */
+      .search .search-scroll .load-icon.loading {
+        pointer-events: none;
+        margin-left: 6px; }
+        /* line 233, ../../../../general/res/sass/search/_search.scss */
+        .search .search-scroll .load-icon.loading .title-label {
+          font-style: italic;
+          font-size: .9em;
+          opacity: 0.5;
+          margin-left: 26px;
+          line-height: 24px; }
+        /* line 243, ../../../../general/res/sass/search/_search.scss */
+        .search .search-scroll .load-icon.loading .wait-spinner {
+          margin-left: 6px; }
+      /* line 248, ../../../../general/res/sass/search/_search.scss */
+      .search .search-scroll .load-icon:not(.loading) {
+        cursor: pointer; }
+    /* line 253, ../../../../general/res/sass/search/_search.scss */
+    .search .search-scroll .load-more-button {
+      margin-top: 5px 0;
+      font-size: 0.8em;
+      position: relative;
+      left: 50%;
+      margin-left: -45px;
+      text-align: center;
+      width: 90px;
+      white-space: nowrap; }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 5, ../../../../general/res/sass/mobile/search/_search.scss */
+  .search .search-bar .menu-icon {
+    display: none; }
+  /* line 8, ../../../../general/res/sass/mobile/search/_search.scss */
+  .search .search-bar .clear-icon {
+    right: 5px; } }
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../../../../general/res/sass/overlay/_overlay.scss */
+.overlay .blocker {
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 100; }
+/* line 27, ../../../../general/res/sass/overlay/_overlay.scss */
+.overlay .clk-icon.close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  bottom: auto;
+  left: auto;
+  z-index: 100; }
+/* line 32, ../../../../general/res/sass/overlay/_overlay.scss */
+.overlay > .holder {
+  background-color: #fff;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-block;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  color: #666;
+  top: 15%;
+  right: 15%;
+  bottom: 15%;
+  left: 15%;
+  z-index: 101; }
+  /* line 39, ../../../../general/res/sass/overlay/_overlay.scss */
+  .overlay > .holder > .contents {
+    top: 25px;
+    right: 25px;
+    bottom: 25px;
+    left: 25px; }
+/* line 44, ../../../../general/res/sass/overlay/_overlay.scss */
+.overlay .title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 1.2em;
+  margin-bottom: 5px; }
+/* line 50, ../../../../general/res/sass/overlay/_overlay.scss */
+.overlay .top-bar {
+  height: 60px; }
+/* line 54, ../../../../general/res/sass/overlay/_overlay.scss */
+.overlay .editor {
+  top: 70px;
+  bottom: 40px;
+  left: 0;
+  right: 0; }
+/* line 60, ../../../../general/res/sass/overlay/_overlay.scss */
+.overlay .bottom-bar {
+  top: auto;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: visible;
+  height: 30px;
+  text-align: right; }
+  /* line 66, ../../../../general/res/sass/overlay/_overlay.scss */
+  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu {
+    background-color: white;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block;
+    font-size: 95%;
+    height: 30px;
+    line-height: 30px;
+    margin-left: 5px;
+    padding: 0 15px; }
+    /* line 14, ../sass/_mixins.scss */
+    .overlay .bottom-bar .s-btn:not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.disabled):hover {
+      background-color: #0099cc; }
+/* line 82, ../../../../general/res/sass/overlay/_overlay.scss */
+.overlay .contents.l-dialog {
+  top: 5px;
+  right: 5px;
+  bottom: 5px;
+  left: 5px;
+  overflow: auto; }
+
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 4, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
+  .overlay .clk-icon.close {
+    top: 10px;
+    right: 10px; }
+  /* line 8, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
+  .overlay > .holder {
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0;
+    border-radius: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0; }
+    /* line 14, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
+    .overlay > .holder > .contents {
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      left: 10px; }
+      /* line 21, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
+      .overlay > .holder > .contents .top-bar > .title {
+        margin-right: 1.2em; }
+      /* line 26, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
+      .overlay > .holder > .contents .form.editor {
+        border: none; }
+        /* line 29, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
+        .overlay > .holder > .contents .form.editor .contents {
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 43, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
+  .overlay > .holder > .contents .form.editor .contents .form-row > .label,
+  .overlay > .holder > .contents .form.editor .contents .form-row > .controls {
+    display: block;
+    float: none;
+    width: 100%; } }
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../../../../general/res/sass/tree/_tree.scss */
+ul.tree {
+  margin: 0;
+  padding: 0; }
+  /* line 324, ../../../../general/res/sass/_mixins.scss */
+  ul.tree li {
+    list-style-type: none;
+    margin: 0;
+    padding: 0; }
+  /* line 25, ../../../../general/res/sass/tree/_tree.scss */
+  ul.tree li {
+    display: block;
+    position: relative; }
+  /* line 29, ../../../../general/res/sass/tree/_tree.scss */
+  ul.tree ul.tree {
+    margin-left: 15px; }
+
+/* line 34, ../../../../general/res/sass/tree/_tree.scss */
+.tree-item,
+.search-result-item {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  -moz-transition: background-color 0.25s;
+  -o-transition: background-color 0.25s;
+  -webkit-transition: background-color 0.25s;
+  transition: background-color 0.25s;
+  display: block;
+  font-size: 0.8rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  margin-bottom: 3px;
+  position: relative; }
+  /* line 47, ../../../../general/res/sass/tree/_tree.scss */
+  .tree-item .view-control,
+  .search-result-item .view-control {
+    display: inline-block;
+    margin-left: 5px;
+    font-size: 0.75em;
+    width: 10px; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 55, ../../../../general/res/sass/tree/_tree.scss */
+      .tree-item .view-control:hover,
+      .search-result-item .view-control:hover {
+        color: #ffc700; } }
+  /* line 61, ../../../../general/res/sass/tree/_tree.scss */
+  .tree-item .label,
+  .search-result-item .label {
+    display: block;
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    width: auto;
+    height: auto;
+    line-height: 1.5rem; }
+    /* line 69, ../../../../general/res/sass/tree/_tree.scss */
+    .tree-item .label .type-icon,
+    .search-result-item .label .type-icon {
+      text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
+      font-size: 16px;
+      color: #0099cc;
+      left: 5px;
+      position: absolute;
+      top: 4px;
+      bottom: auto;
+      height: 16px;
+      line-height: 100%;
+      right: auto;
+      width: 16px; }
+      /* line 82, ../../../../general/res/sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-alert {
+        text-shadow: black 0 1px 2px;
+        position: absolute;
+        z-index: 2; }
+      /* line 88, ../../../../general/res/sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-alert,
+      .search-result-item .label .type-icon .icon.l-icon-alert {
+        color: #ff3c00;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        top: 1px;
+        right: -2px; }
+      /* line 94, ../../../../general/res/sass/tree/_tree.scss */
+      .tree-item .label .type-icon .icon.l-icon-link,
+      .search-result-item .label .type-icon .icon.l-icon-link {
+        color: #49dedb;
+        font-size: 8px;
+        line-height: 8px;
+        height: 8px;
+        width: 8px;
+        left: -3px;
+        bottom: 0px; }
+    /* line 102, ../../../../general/res/sass/tree/_tree.scss */
+    .tree-item .label .title-label,
+    .search-result-item .label .title-label {
+      overflow: hidden;
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      bottom: 0px;
+      left: 0px;
+      width: auto;
+      height: auto;
+      display: block;
+      left: 30px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; }
+  /* line 113, ../../../../general/res/sass/tree/_tree.scss */
+  .tree-item.loading,
+  .search-result-item.loading {
+    pointer-events: none; }
+    /* line 115, ../../../../general/res/sass/tree/_tree.scss */
+    .tree-item.loading .label,
+    .search-result-item.loading .label {
+      opacity: 0.5; }
+      /* line 117, ../../../../general/res/sass/tree/_tree.scss */
+      .tree-item.loading .label .title-label,
+      .search-result-item.loading .label .title-label {
+        font-style: italic; }
+    /* line 121, ../../../../general/res/sass/tree/_tree.scss */
+    .tree-item.loading .wait-spinner,
+    .search-result-item.loading .wait-spinner {
+      margin-left: 14px; }
+  /* line 126, ../../../../general/res/sass/tree/_tree.scss */
+  .tree-item.selected,
+  .search-result-item.selected {
+    background: #005177;
+    color: #fff; }
+    /* line 130, ../../../../general/res/sass/tree/_tree.scss */
+    .tree-item.selected .view-control,
+    .search-result-item.selected .view-control {
+      color: #0099cc; }
+    /* line 133, ../../../../general/res/sass/tree/_tree.scss */
+    .tree-item.selected .label .type-icon,
+    .search-result-item.selected .label .type-icon {
+      color: #fff; }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 141, ../../../../general/res/sass/tree/_tree.scss */
+    .tree-item:not(.selected):hover,
+    .search-result-item:not(.selected):hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: #999999; }
+      /* line 144, ../../../../general/res/sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .context-trigger,
+      .search-result-item:not(.selected):hover .context-trigger {
+        display: block; }
+      /* line 147, ../../../../general/res/sass/tree/_tree.scss */
+      .tree-item:not(.selected):hover .icon,
+      .search-result-item:not(.selected):hover .icon {
+        color: #33ccff; } }
+  /* line 154, ../../../../general/res/sass/tree/_tree.scss */
+  .tree-item:not(.loading),
+  .search-result-item:not(.loading) {
+    cursor: pointer; }
+  /* line 158, ../../../../general/res/sass/tree/_tree.scss */
+  .tree-item .context-trigger,
+  .search-result-item .context-trigger {
+    top: -1px;
+    position: absolute;
+    right: 3px; }
+    /* line 164, ../../../../general/res/sass/tree/_tree.scss */
+    .tree-item .context-trigger .invoke-menu,
+    .search-result-item .context-trigger .invoke-menu {
+      font-size: 0.75em;
+      height: 0.9rem;
+      line-height: 0.9rem; }
+
+/* line 173, ../../../../general/res/sass/tree/_tree.scss */
+.tree-item .label {
+  left: 15px; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 27, ../../../../general/res/sass/mobile/_tree.scss */
+  ul.tree ul.tree {
+    margin-left: 20px; }
+
+  /* line 31, ../../../../general/res/sass/mobile/_tree.scss */
+  .tree-item,
+  .search-result-item {
+    height: 35px;
+    line-height: 35px;
+    margin-bottom: 0px; }
+    /* line 36, ../../../../general/res/sass/mobile/_tree.scss */
+    .tree-item .view-control,
+    .search-result-item .view-control {
+      position: absolute;
+      font-size: 1.1em;
+      right: 0px;
+      width: 30px;
+      text-align: center; }
+    /* line 45, ../../../../general/res/sass/mobile/_tree.scss */
+    .tree-item .label,
+    .search-result-item .label {
+      left: 0;
+      right: 35px;
+      line-height: 35px; }
+      /* line 50, ../../../../general/res/sass/mobile/_tree.scss */
+      .tree-item .label .type-icon,
+      .search-result-item .label .type-icon {
+        top: 9px;
+        bottom: auto;
+        height: 16px; } }
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 25, ../../../../general/res/sass/user-environ/_frame.scss */
+.frame.child-frame.panel {
+  background: #fff;
+  border: 1px solid white; }
+  /* line 28, ../../../../general/res/sass/user-environ/_frame.scss */
+  .frame.child-frame.panel:hover {
+    border-color: white; }
+/* line 32, ../../../../general/res/sass/user-environ/_frame.scss */
+.frame > .object-header.abs, .s-menu .frame > span.object-header.l-click-area {
+  font-size: 0.75em;
+  height: 16px;
+  line-height: 16px; }
+/* line 38, ../../../../general/res/sass/user-environ/_frame.scss */
+.frame > .object-holder.abs, .s-menu .frame > span.object-holder.l-click-area {
+  top: 21px; }
+/* line 41, ../../../../general/res/sass/user-environ/_frame.scss */
+.frame .contents {
+  top: 5px;
+  right: 5px;
+  bottom: 5px;
+  left: 5px; }
+/* line 49, ../../../../general/res/sass/user-environ/_frame.scss */
+.frame.frame-template .view-switcher {
+  font-size: 80%;
+  height: 16px;
+  line-height: 16px;
+  z-index: 10; }
+@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+  /* line 58, ../../../../general/res/sass/user-environ/_frame.scss */
+  .frame.frame-template .view-switcher {
+    opacity: 0; }
+  /* line 61, ../../../../general/res/sass/user-environ/_frame.scss */
+  .frame.frame-template:hover .view-switcher {
+    opacity: 1; } }
+/* line 69, ../../../../general/res/sass/user-environ/_frame.scss */
+.frame .view-switcher .title-label {
+  display: none; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 23, ../../../../general/res/sass/user-environ/_top-bar.scss */
+.top-bar.browse, .top-bar.edit {
+  border-bottom: 1px solid white;
+  top: 10px;
+  right: 10px;
+  bottom: auto;
+  left: 10px;
+  height: 30px;
+  line-height: 24px; }
+/* line 31, ../../../../general/res/sass/user-environ/_top-bar.scss */
+.top-bar .title {
+  color: #fff; }
+/* line 35, ../../../../general/res/sass/user-environ/_top-bar.scss */
+.top-bar .buttons-main {
+  font-size: 0.8em;
+  left: auto;
+  text-align: right; }
+
+/* line 48, ../../../../general/res/sass/user-environ/_top-bar.scss */
+.edit-mode .top-bar .buttons-main {
+  white-space: nowrap; }
+  /* line 52, ../../../../general/res/sass/user-environ/_top-bar.scss */
+  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .s-menu span.buttons-main.l-click-area, .s-menu .edit-mode .top-bar span.buttons-main.l-click-area {
+    bottom: auto;
+    left: auto; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
+.ue-bottom-bar {
+  background: #000;
+  color: white;
+  font-size: .7rem; }
+  /* line 28, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
+  .ue-bottom-bar .status-holder {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    bottom: 5px;
+    left: 5px;
+    width: auto;
+    height: auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 15px;
+    right: 120px;
+    text-transform: uppercase; }
+  /* line 39, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
+  .ue-bottom-bar .app-logo {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    bottom: 5px;
+    left: 5px;
+    width: auto;
+    height: auto;
+    left: auto;
+    cursor: pointer; }
+    /* line 48, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
+    .ue-bottom-bar .app-logo.logo-openmctweb {
+      background: url("../../../../general/res/images/logo-openmctweb.svg") no-repeat center center; }
+
+/* line 54, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
+.status.block {
+  display: inline;
+  margin-right: 10px; }
+  /* line 58, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
+  .status.block .status-indicator {
+    display: inline-block;
+    margin-right: 3px;
+    color: #0099cc; }
+    /* line 65, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
+    .status.block .status-indicator.ok {
+      color: #009900; }
+    /* line 68, ../../../../general/res/sass/user-environ/_bottom-bar.scss */
+    .status.block .status-indicator.caution {
+      color: #ffaa00; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../../../../general/res/sass/user-environ/_tool-bar.scss */
+.tool-bar {
+  border-bottom: 1px solid white; }
+  /* line 24, ../../../../general/res/sass/user-environ/_tool-bar.scss */
+  .tool-bar .l-control-group {
+    height: 25px; }
+  /* line 27, ../../../../general/res/sass/user-environ/_tool-bar.scss */
+  .tool-bar input[type="text"] {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    font-size: .9em;
+    height: 25px;
+    margin-bottom: 1px;
+    position: relative; }
+    /* line 33, ../../../../general/res/sass/user-environ/_tool-bar.scss */
+    .tool-bar input[type="text"].sm {
+      width: 25px; }
+  /* line 37, ../../../../general/res/sass/user-environ/_tool-bar.scss */
+  .tool-bar .input-labeled label {
+    font-size: 11.25px; }
+
+/********************************* VIEWS */
+/*****************************************************************************
+* Open MCT Web, Copyright (c) 2014-2015, United States Government
+* as represented by the Administrator of the National Aeronautics and Space
+* Administration. All rights reserved.
+*
+* Open MCT Web is licensed under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+* http://www.apache.org/licenses/LICENSE-2.0.
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations
+* under the License.
+*
+* Open MCT Web includes source code licensed under additional open source
+* licenses. See the Open Source Licenses file (LICENSES.md) included with
+* this source code distribution or the Licensing information page available
+* at runtime from the About dialog for additional information.
+*****************************************************************************/
+/* line 23, ../../../../general/res/sass/_fixed-position.scss */
+.t-fixed-position.l-fixed-position {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto; }
+  /* line 33, ../../../../general/res/sass/_fixed-position.scss */
+  .t-fixed-position.l-fixed-position .l-grid-holder {
+    position: relative;
+    height: 100%;
+    width: 100%; }
+    /* line 37, ../../../../general/res/sass/_fixed-position.scss */
+    .t-fixed-position.l-fixed-position .l-grid-holder .l-grid {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      pointer-events: none;
+      z-index: 0; }
+/* line 48, ../../../../general/res/sass/_fixed-position.scss */
+.t-fixed-position .l-fixed-position-item {
+  position: absolute;
+  border: 1px solid transparent; }
+  /* line 52, ../../../../general/res/sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item.s-selected {
+    -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+    box-shadow: rgba(0, 0, 0, 0.7) 0 3px 10px;
+    border-color: #0099cc;
+    cursor: move; }
+  /* line 57, ../../../../general/res/sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item.s-not-selected {
+    opacity: 0.8; }
+  /* line 61, ../../../../general/res/sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-box,
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-image,
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%; }
+  /* line 72, ../../../../general/res/sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-image {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center; }
+  /* line 78, ../../../../general/res/sass/_fixed-position.scss */
+  .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
+    text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
+    border: 1px solid transparent;
+    font-size: 0.8rem;
+    line-height: 100%; }
+    /* line 84, ../../../../general/res/sass/_fixed-position.scss */
+    .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-static-text {
+      padding: 1px; }
+    /* line 89, ../../../../general/res/sass/_fixed-position.scss */
+    .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      display: block;
+      padding: 2px; }
+      /* line 96, ../../../../general/res/sass/_fixed-position.scss */
+      .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-title {
+        float: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        width: auto; }
+      /* line 105, ../../../../general/res/sass/_fixed-position.scss */
+      .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value {
+        -moz-border-radius: 2px;
+        -webkit-border-radius: 2px;
+        border-radius: 2px;
+        float: right;
+        margin-left: 5px;
+        padding-left: 5px;
+        padding-right: 5px;
+        text-align: right; }
+        /* line 116, ../../../../general/res/sass/_fixed-position.scss */
+        .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value.telem-only {
+          margin-left: 0;
+          width: 100%; }
+/* line 126, ../../../../general/res/sass/_fixed-position.scss */
+.t-fixed-position .l-fixed-position-item-handle {
+  background: rgba(0, 153, 204, 0.5);
+  cursor: crosshair;
+  border: 1px solid #0099cc;
+  position: absolute; }
+
+/* line 140, ../../../../general/res/sass/_fixed-position.scss */
+.edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-x {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  background-size: 100%;
+  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-repeat: repeat-x; }
+/* line 144, ../../../../general/res/sass/_fixed-position.scss */
+.edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-y {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  background-size: 100%;
+  background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-repeat: repeat-y; }
+/* line 152, ../../../../general/res/sass/_fixed-position.scss */
+.edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected) {
+  border: 1px dotted rgba(0, 153, 204, 0.75); }
+  /* line 154, ../../../../general/res/sass/_fixed-position.scss */
+  .edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected):hover {
+    border: 1px dotted #0099cc; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../../../../general/res/sass/lists/_tabular.scss */
+.w1, .w2 {
+  position: relative;
+  height: 100%; }
+
+/* line 27, ../../../../general/res/sass/lists/_tabular.scss */
+.tabular,
+table {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-spacing: 0;
+  border-collapse: collapse;
+  color: #fff;
+  display: table;
+  font-size: 0.75rem;
+  position: relative;
+  width: 100%; }
+  /* line 38, ../../../../general/res/sass/lists/_tabular.scss */
+  .tabular thead, .tabular .thead,
+  .tabular tbody tr, .tabular .tbody .tr,
+  table thead,
+  table .thead,
+  table tbody tr,
+  table .tbody .tr {
+    width: 100%; }
+  /* line 44, ../../../../general/res/sass/lists/_tabular.scss */
+  .tabular thead, .tabular .thead,
+  table thead,
+  table .thead {
+    border-bottom: 1px solid #fff; }
+  /* line 47, ../../../../general/res/sass/lists/_tabular.scss */
+  .tabular tbody, .tabular .tbody,
+  table tbody,
+  table .tbody {
+    display: table-row-group; }
+    /* line 54, ../../../../general/res/sass/lists/_tabular.scss */
+    .tabular tbody tr:hover, .tabular tbody .tr:hover, .tabular .tbody tr:hover, .tabular .tbody .tr:hover,
+    table tbody tr:hover,
+    table tbody .tr:hover,
+    table .tbody tr:hover,
+    table .tbody .tr:hover {
+      background: rgba(255, 255, 255, 0.1); }
+  /* line 59, ../../../../general/res/sass/lists/_tabular.scss */
+  .tabular tr, .tabular .tr,
+  table tr,
+  table .tr {
+    display: table-row; }
+    /* line 61, ../../../../general/res/sass/lists/_tabular.scss */
+    .tabular tr:first-child .td, .tabular .tr:first-child .td,
+    table tr:first-child .td,
+    table .tr:first-child .td {
+      border-top: none; }
+    /* line 65, ../../../../general/res/sass/lists/_tabular.scss */
+    .tabular tr.group-header td, .tabular tr.group-header .td, .tabular .tr.group-header td, .tabular .tr.group-header .td,
+    table tr.group-header td,
+    table tr.group-header .td,
+    table .tr.group-header td,
+    table .tr.group-header .td {
+      background-color: #f2f2f2;
+      color: #f2f2f2; }
+    /* line 71, ../../../../general/res/sass/lists/_tabular.scss */
+    .tabular tr th, .tabular tr .th, .tabular tr td, .tabular tr .td, .tabular .tr th, .tabular .tr .th, .tabular .tr td, .tabular .tr .td,
+    table tr th,
+    table tr .th,
+    table tr td,
+    table tr .td,
+    table .tr th,
+    table .tr .th,
+    table .tr td,
+    table .tr .td {
+      display: table-cell; }
+    /* line 74, ../../../../general/res/sass/lists/_tabular.scss */
+    .tabular tr th, .tabular tr .th, .tabular .tr th, .tabular .tr .th,
+    table tr th,
+    table tr .th,
+    table .tr th,
+    table .tr .th {
+      background-color: white;
+      border-left: 1px solid #fff;
+      color: white;
+      padding: 5px 5px;
+      white-space: nowrap;
+      vertical-align: middle; }
+      /* line 81, ../../../../general/res/sass/lists/_tabular.scss */
+      .tabular tr th:first-child, .tabular tr .th:first-child, .tabular .tr th:first-child, .tabular .tr .th:first-child,
+      table tr th:first-child,
+      table tr .th:first-child,
+      table .tr th:first-child,
+      table .tr .th:first-child {
+        border-left: none; }
+      /* line 85, ../../../../general/res/sass/lists/_tabular.scss */
+      .tabular tr th.sort.sort:after, .tabular tr .th.sort.sort:after, .tabular .tr th.sort.sort:after, .tabular .tr .th.sort.sort:after,
+      table tr th.sort.sort:after,
+      table tr .th.sort.sort:after,
+      table .tr th.sort.sort:after,
+      table .tr .th.sort.sort:after {
+        color: #49dedb;
+        font-family: symbolsfont;
+        font-size: 8px;
+        content: "\ed";
+        display: inline-block;
+        margin-left: 3px; }
+      /* line 93, ../../../../general/res/sass/lists/_tabular.scss */
+      .tabular tr th.sort.sort.desc:after, .tabular tr .th.sort.sort.desc:after, .tabular .tr th.sort.sort.desc:after, .tabular .tr .th.sort.sort.desc:after,
+      table tr th.sort.sort.desc:after,
+      table tr .th.sort.sort.desc:after,
+      table .tr th.sort.sort.desc:after,
+      table .tr .th.sort.sort.desc:after {
+        content: "\ec"; }
+      /* line 97, ../../../../general/res/sass/lists/_tabular.scss */
+      .tabular tr th.sortable, .tabular tr .th.sortable, .tabular .tr th.sortable, .tabular .tr .th.sortable,
+      table tr th.sortable,
+      table tr .th.sortable,
+      table .tr th.sortable,
+      table .tr .th.sortable {
+        cursor: pointer; }
+    /* line 101, ../../../../general/res/sass/lists/_tabular.scss */
+    .tabular tr td, .tabular tr .td, .tabular .tr td, .tabular .tr .td,
+    table tr td,
+    table tr .td,
+    table .tr td,
+    table .tr .td {
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      min-width: 20px;
+      color: #fff;
+      padding: 3px 5px;
+      word-wrap: break-word;
+      vertical-align: top; }
+      /* line 108, ../../../../general/res/sass/lists/_tabular.scss */
+      .tabular tr td.numeric, .tabular tr .td.numeric, .tabular .tr td.numeric, .tabular .tr .td.numeric,
+      table tr td.numeric,
+      table tr .td.numeric,
+      table .tr td.numeric,
+      table .tr .td.numeric {
+        text-align: right; }
+      /* line 111, ../../../../general/res/sass/lists/_tabular.scss */
+      .tabular tr td.s-cell-type-value, .tabular tr .td.s-cell-type-value, .tabular .tr td.s-cell-type-value, .tabular .tr .td.s-cell-type-value,
+      table tr td.s-cell-type-value,
+      table tr .td.s-cell-type-value,
+      table .tr td.s-cell-type-value,
+      table .tr .td.s-cell-type-value {
+        text-align: right; }
+        /* line 113, ../../../../general/res/sass/lists/_tabular.scss */
+        .tabular tr td.s-cell-type-value .l-cell-contents, .tabular tr .td.s-cell-type-value .l-cell-contents, .tabular .tr td.s-cell-type-value .l-cell-contents, .tabular .tr .td.s-cell-type-value .l-cell-contents,
+        table tr td.s-cell-type-value .l-cell-contents,
+        table tr .td.s-cell-type-value .l-cell-contents,
+        table .tr td.s-cell-type-value .l-cell-contents,
+        table .tr .td.s-cell-type-value .l-cell-contents {
+          -moz-border-radius: 2px;
+          -webkit-border-radius: 2px;
+          border-radius: 2px;
+          padding-left: 5px;
+          padding-right: 5px; }
+  /* line 129, ../../../../general/res/sass/lists/_tabular.scss */
+  .tabular.filterable tbody, .tabular.filterable .tbody,
+  table.filterable tbody,
+  table.filterable .tbody {
+    top: 44px; }
+  /* line 132, ../../../../general/res/sass/lists/_tabular.scss */
+  .tabular.filterable input[type="text"],
+  table.filterable input[type="text"] {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    width: 100%; }
+  /* line 138, ../../../../general/res/sass/lists/_tabular.scss */
+  .tabular.fixed-header,
+  table.fixed-header {
+    height: 100%; }
+    /* line 140, ../../../../general/res/sass/lists/_tabular.scss */
+    .tabular.fixed-header thead, .tabular.fixed-header .thead,
+    .tabular.fixed-header tbody tr, .tabular.fixed-header .tbody .tr,
+    table.fixed-header thead,
+    table.fixed-header .thead,
+    table.fixed-header tbody tr,
+    table.fixed-header .tbody .tr {
+      display: table;
+      table-layout: fixed; }
+    /* line 145, ../../../../general/res/sass/lists/_tabular.scss */
+    .tabular.fixed-header thead, .tabular.fixed-header .thead,
+    table.fixed-header thead,
+    table.fixed-header .thead {
+      width: calc(100% - 10px); }
+      /* line 147, ../../../../general/res/sass/lists/_tabular.scss */
+      .tabular.fixed-header thead:before, .tabular.fixed-header .thead:before,
+      table.fixed-header thead:before,
+      table.fixed-header .thead:before {
+        content: "";
+        display: block;
+        z-index: 0;
+        position: absolute;
+        width: 100%;
+        height: 22px;
+        background: rgba(255, 255, 255, 0.15); }
+    /* line 157, ../../../../general/res/sass/lists/_tabular.scss */
+    .tabular.fixed-header tbody, .tabular.fixed-header .tbody,
+    table.fixed-header tbody,
+    table.fixed-header .tbody {
+      overflow: hidden;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      width: auto;
+      height: auto;
+      top: 22px;
+      display: block;
+      overflow-y: scroll; }
+  /* line 165, ../../../../general/res/sass/lists/_tabular.scss */
+  .tabular.t-event-messages td, .tabular.t-event-messages .td,
+  table.t-event-messages td,
+  table.t-event-messages .td {
+    min-width: 150px; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 31, ../../../../general/res/sass/plots/_plots-main.scss */
+.gl-plot {
+  color: #666;
+  font-size: 0.7rem;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  /****************************** Limits and Out-of-Bounds data */ }
+  /* line 38, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot .gl-plot-axis-area {
+    position: absolute; }
+    /* line 41, ../../../../general/res/sass/plots/_plots-main.scss */
+    .gl-plot .gl-plot-axis-area.gl-plot-x {
+      top: auto;
+      right: 0;
+      bottom: 5px;
+      left: 60px;
+      height: 32px;
+      width: auto;
+      overflow: hidden; }
+    /* line 50, ../../../../general/res/sass/plots/_plots-main.scss */
+    .gl-plot .gl-plot-axis-area.gl-plot-y {
+      top: 25px;
+      right: auto;
+      bottom: 37px;
+      left: 0;
+      width: 60px; }
+  /* line 59, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot .gl-plot-coords {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    background: black;
+    color: #b3b3b3;
+    padding: 2px 5px;
+    position: absolute;
+    top: 35px;
+    right: auto;
+    bottom: auto;
+    left: 70px;
+    z-index: 10; }
+    /* line 71, ../../../../general/res/sass/plots/_plots-main.scss */
+    .gl-plot .gl-plot-coords:empty {
+      display: none; }
+  /* line 76, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot .gl-plot-display-area {
+    position: absolute;
+    top: 25px;
+    right: 0;
+    bottom: 37px;
+    left: 60px;
+    cursor: crosshair;
+    border: 1px solid white; }
+  /* line 86, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot .gl-plot-label,
+  .gl-plot .l-plot-label {
+    color: #999999;
+    position: absolute;
+    text-align: center; }
+    /* line 94, ../../../../general/res/sass/plots/_plots-main.scss */
+    .gl-plot .gl-plot-label.gl-plot-x-label, .gl-plot .gl-plot-label.l-plot-x-label,
+    .gl-plot .l-plot-label.gl-plot-x-label,
+    .gl-plot .l-plot-label.l-plot-x-label {
+      top: auto;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      height: auto; }
+    /* line 103, ../../../../general/res/sass/plots/_plots-main.scss */
+    .gl-plot .gl-plot-label.gl-plot-y-label, .gl-plot .gl-plot-label.l-plot-y-label,
+    .gl-plot .l-plot-label.gl-plot-y-label,
+    .gl-plot .l-plot-label.l-plot-y-label {
+      -moz-transform-origin: 50% 0;
+      -ms-transform-origin: 50% 0;
+      -webkit-transform-origin: 50% 0;
+      transform-origin: 50% 0;
+      -moz-transform: translateX(-50%) rotate(-90deg);
+      -ms-transform: translateX(-50%) rotate(-90deg);
+      -webkit-transform: translateX(-50%) rotate(-90deg);
+      transform: translateX(-50%) rotate(-90deg);
+      display: inline-block;
+      margin-left: 5px;
+      left: 0;
+      top: 50%;
+      white-space: nowrap; }
+  /* line 117, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot .gl-plot-y-options {
+    position: absolute;
+    top: 50%;
+    right: auto;
+    bottom: auto;
+    left: auto5px;
+    margin-top: -16px;
+    height: auto;
+    min-height: 32px;
+    width: 32px; }
+  /* line 131, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot .gl-plot-hash {
+    position: absolute;
+    border: 0 rgba(255, 255, 255, 0.3) dashed; }
+    /* line 134, ../../../../general/res/sass/plots/_plots-main.scss */
+    .gl-plot .gl-plot-hash.hash-v {
+      border-right-width: 1px;
+      height: 100%; }
+    /* line 138, ../../../../general/res/sass/plots/_plots-main.scss */
+    .gl-plot .gl-plot-hash.hash-h {
+      border-bottom-width: 1px;
+      width: 100%; }
+  /* line 144, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot .gl-plot-legend {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: auto;
+    left: 0;
+    height: 20px;
+    overflow-x: hidden;
+    overflow-y: auto; }
+  /* line 157, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot .l-limit-bar,
+  .gl-plot .l-oob-data {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: auto; }
+  /* line 165, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot .l-limit-bar {
+    height: auto;
+    z-index: 0; }
+    /* line 173, ../../../../general/res/sass/plots/_plots-main.scss */
+    .gl-plot .l-limit-bar.s-limit-yellow {
+      background: rgba(157, 117, 0, 0.2); }
+    /* line 174, ../../../../general/res/sass/plots/_plots-main.scss */
+    .gl-plot .l-limit-bar.s-limit-red {
+      background: rgba(170, 0, 0, 0.2); }
+  /* line 177, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot .l-oob-data {
+    overflow: hidden;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    width: auto;
+    height: auto;
+    pointer-events: none;
+    height: 10px;
+    z-index: 1; }
+    /* line 185, ../../../../general/res/sass/plots/_plots-main.scss */
+    .gl-plot .l-oob-data.l-oob-data-up {
+      top: 0;
+      bottom: auto;
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3NDhkNiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NzQ4ZDYiIHN0b3Atb3BhY2l0eT0iMC41Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+      background-size: 100%;
+      background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
+      background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
+      background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
+    /* line 190, ../../../../general/res/sass/plots/_plots-main.scss */
+    .gl-plot .l-oob-data.l-oob-data-dwn {
+      bottom: 0;
+      top: auto;
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc3NDhkNiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NzQ4ZDYiIHN0b3Atb3BhY2l0eT0iMC41Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
+      background-size: 100%;
+      background-image: -moz-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
+      background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
+      background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
+
+/* line 200, ../../../../general/res/sass/plots/_plots-main.scss */
+.gl-plot-legend .plot-legend-item,
+.gl-plot-legend .legend-item,
+.legend .plot-legend-item,
+.legend .legend-item {
+  display: inline-block;
+  margin-right: 10px;
+  margin-bottom: 3px; }
+  /* line 205, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot-legend .plot-legend-item span,
+  .gl-plot-legend .legend-item span,
+  .legend .plot-legend-item span,
+  .legend .legend-item span {
+    vertical-align: middle; }
+  /* line 208, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot-legend .plot-legend-item .plot-color-swatch,
+  .gl-plot-legend .plot-legend-item .color-swatch,
+  .gl-plot-legend .legend-item .plot-color-swatch,
+  .gl-plot-legend .legend-item .color-swatch,
+  .legend .plot-legend-item .plot-color-swatch,
+  .legend .plot-legend-item .color-swatch,
+  .legend .legend-item .plot-color-swatch,
+  .legend .legend-item .color-swatch {
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    display: inline-block;
+    height: 8px;
+    width: 8px; }
+
+/* line 221, ../../../../general/res/sass/plots/_plots-main.scss */
+.gl-plot-legend .plot-legend-item {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  color: #fff;
+  line-height: 1.5em;
+  padding: 0px 5px; }
+  /* line 227, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot-legend .plot-legend-item .plot-color-swatch {
+    border: 1px solid #fff;
+    height: 9px;
+    width: 9px; }
+
+/* line 235, ../../../../general/res/sass/plots/_plots-main.scss */
+.tick {
+  position: absolute;
+  border: 0 rgba(255, 255, 255, 0.3) solid; }
+  /* line 238, ../../../../general/res/sass/plots/_plots-main.scss */
+  .tick.tick-x {
+    border-right-width: 1px;
+    height: 100%; }
+
+/* line 244, ../../../../general/res/sass/plots/_plots-main.scss */
+.gl-plot-tick,
+.tick-label {
+  font-size: 0.7rem;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis; }
+  /* line 252, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x,
+  .tick-label.gl-plot-x-tick-label,
+  .tick-label.tick-label-x {
+    right: auto;
+    bottom: auto;
+    left: auto;
+    height: auto;
+    width: 20%;
+    margin-left: -10%;
+    text-align: center; }
+  /* line 262, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y,
+  .tick-label.gl-plot-y-tick-label,
+  .tick-label.tick-label-y {
+    top: auto;
+    height: 1em;
+    width: auto;
+    margin-bottom: -0.5em;
+    text-align: right; }
+
+/* line 274, ../../../../general/res/sass/plots/_plots-main.scss */
+.gl-plot-tick.gl-plot-x-tick-label {
+  top: 5px; }
+/* line 277, ../../../../general/res/sass/plots/_plots-main.scss */
+.gl-plot-tick.gl-plot-y-tick-label {
+  right: 5px;
+  left: 5px; }
+
+/* line 284, ../../../../general/res/sass/plots/_plots-main.scss */
+.tick-label.tick-label-x {
+  top: 0; }
+/* line 287, ../../../../general/res/sass/plots/_plots-main.scss */
+.tick-label.tick-label-y {
+  right: 0;
+  left: 0; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* Styles for the iframe EmbeddedPageController element */
+/* line 25, ../../../../general/res/sass/_iframe.scss */
+.l-iframe iframe {
+  display: block;
+  height: 100%;
+  width: 100%; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/******************************** BROWSE */
+/* line 27, ../../../../general/res/sass/_hide-non-functional.scss */
+.browse-mode .browse.top-bar {
+  display: none; }
+/* line 32, ../../../../general/res/sass/_hide-non-functional.scss */
+.browse-mode .browse-area.holder {
+  top: 10px; }
+
+/* Styles for sub-dividing views generically */
+/* line 3, ../../../../general/res/sass/_views.scss */
+.l-view-section {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  font-size: 0.8rem; }
+  /* line 6, ../../../../general/res/sass/_views.scss */
+  .l-view-section h2 {
+    color: #fff;
+    margin-bottom: 5px; }
+  /* line 10, ../../../../general/res/sass/_views.scss */
+  .l-view-section.fixed {
+    font-size: 0.8em; }
+  /* line 13, ../../../../general/res/sass/_views.scss */
+  .l-view-section.scrolling {
+    overflow: auto; }
+  /* line 16, ../../../../general/res/sass/_views.scss */
+  .l-view-section .controls,
+  .l-view-section label,
+  .l-view-section .inline-block {
+    display: inline-block; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../../../../general/res/sass/items/_item.scss */
+.items-holder {
+  overflow: hidden;
+  *zoom: 1;
+  overflow-y: auto; }
+  /* line 25, ../../../../general/res/sass/items/_item.scss */
+  .items-holder .contents {
+    top: 0; }
+  /* line 29, ../../../../general/res/sass/items/_item.scss */
+  .items-holder .item.grid-item {
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    background-color: white;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block;
+    color: #fff;
+    /*    &:not(.disabled) {
+            &:not(.paused) {
+                &:hover {
+                    .icon {
+                        color: pullForward($ic, $ltGamma);
+                    }
+                }
+            }
+        }*/
+    box-sizing: border-box;
+    cursor: pointer;
+    float: left;
+    height: 200px;
+    width: 200px;
+    margin-bottom: 3px;
+    margin-right: 3px;
+    position: relative; }
+    /* line 14, ../sass/_mixins.scss */
+    .items-holder .item.grid-item:not(.disabled):hover {
+      background-color: #0099cc; }
+    /* line 26, ../sass/_mixins.scss */
+    .items-holder .item.grid-item .icon {
+      color: #fff; }
+    /* line 46, ../../../../general/res/sass/items/_item.scss */
+    .items-holder .item.grid-item:hover .item-main .item-type {
+      color: deepskyblue !important; }
+      /* line 48, ../../../../general/res/sass/items/_item.scss */
+      .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
+        color: #49dedb; }
+    /* line 52, ../../../../general/res/sass/items/_item.scss */
+    .items-holder .item.grid-item:hover .item-main .item-open {
+      opacity: 1; }
+    /* line 57, ../../../../general/res/sass/items/_item.scss */
+    .items-holder .item.grid-item .contents {
+      top: 10px;
+      right: 10px;
+      bottom: 10px;
+      left: 10px; }
+    /* line 63, ../../../../general/res/sass/items/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      bottom: auto;
+      height: 20px;
+      line-height: 20px;
+      text-align: right;
+      z-index: 5; }
+      /* line 69, ../../../../general/res/sass/items/_item.scss */
+      .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
+        width: auto; }
+        /* line 71, ../../../../general/res/sass/items/_item.scss */
+        .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
+          margin-left: 3px; }
+          /* line 73, ../../../../general/res/sass/items/_item.scss */
+          .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
+            color: #49dedb; }
+    /* line 79, ../../../../general/res/sass/items/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: auto;
+      line-height: 110%; }
+    /* line 85, ../../../../general/res/sass/items/_item.scss */
+    .items-holder .item.grid-item .item-main {
+      line-height: 160px;
+      z-index: 1; }
+      /* line 91, ../../../../general/res/sass/items/_item.scss */
+      .items-holder .item.grid-item .item-main .item-type {
+        overflow: false;
+        position: absolute;
+        top: 40px;
+        right: 40px;
+        bottom: 40px;
+        left: 40px;
+        width: auto;
+        height: auto;
+        text-align: center;
+        font-size: 96.9px;
+        line-height: 102px;
+        bottom: auto;
+        height: 102px;
+        top: 30px; }
+        /* line 103, ../../../../general/res/sass/items/_item.scss */
+        .items-holder .item.grid-item .item-main .item-type .l-icon-link {
+          color: #49dedb;
+          height: auto;
+          line-height: 100%;
+          position: absolute;
+          font-size: 0.3em;
+          left: 0px;
+          bottom: 10px;
+          z-index: 2; }
+      /* line 116, ../../../../general/res/sass/items/_item.scss */
+      .items-holder .item.grid-item .item-main .item-open {
+        -moz-transition-property: "opacity";
+        -o-transition-property: "opacity";
+        -webkit-transition-property: "opacity";
+        transition-property: "opacity";
+        -moz-transition-duration: 200ms;
+        -o-transition-duration: 200ms;
+        -webkit-transition-duration: 200ms;
+        transition-duration: 200ms;
+        -moz-transition-timing-function: ease-in-out;
+        -o-transition-timing-function: ease-in-out;
+        -webkit-transition-timing-function: ease-in-out;
+        transition-timing-function: ease-in-out;
+        opacity: 0;
+        font-size: 3em;
+        left: auto;
+        width: 50px;
+        pointer-events: none;
+        text-align: right; }
+    /* line 128, ../../../../general/res/sass/items/_item.scss */
+    .items-holder .item.grid-item .title {
+      text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: #999999; }
+    /* line 133, ../../../../general/res/sass/items/_item.scss */
+    .items-holder .item.grid-item .details {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 0.8em; }
+    /* line 137, ../../../../general/res/sass/items/_item.scss */
+    .items-holder .item.grid-item.selected {
+      -moz-border-radius: 3px;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+      background-color: #0099cc;
+      -moz-border-radius: 3px;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      display: inline-block;
+      color: #fff;
+      /*    &:not(.disabled) {
+              &:not(.paused) {
+                  &:hover {
+                      .icon {
+                          color: pullForward($ic, $ltGamma);
+                      }
+                  }
+              }
+          }*/
+      color: #80dfff; }
+      /* line 14, ../sass/_mixins.scss */
+      .items-holder .item.grid-item.selected:not(.disabled):hover {
+        background-color: #0099cc; }
+      /* line 26, ../sass/_mixins.scss */
+      .items-holder .item.grid-item.selected .icon {
+        color: #fff; }
+      /* line 142, ../../../../general/res/sass/items/_item.scss */
+      .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
+        color: #80dfff; }
+      /* line 143, ../../../../general/res/sass/items/_item.scss */
+      .items-holder .item.grid-item.selected .item-main .item-open {
+        color: #80dfff; }
+      /* line 144, ../../../../general/res/sass/items/_item.scss */
+      .items-holder .item.grid-item.selected .title {
+        color: white; }
+      /* line 146, ../../../../general/res/sass/items/_item.scss */
+      .items-holder .item.grid-item.selected:hover .item-main .item-type {
+        color: white !important; }
+
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 29, ../../../../general/res/sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    width: 100%; }
+    /* line 33, ../../../../general/res/sass/mobile/_item.scss */
+    .items-holder .item.grid-item > .contents {
+      top: 0px;
+      right: 10px;
+      bottom: 0px;
+      left: 10px; }
+    /* line 37, ../../../../general/res/sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      bottom: 0 !important;
+      left: auto !important;
+      right: 20px !important;
+      width: 40px !important;
+      height: auto !important;
+      text-align: right; }
+    /* line 44, ../../../../general/res/sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      left: 40px;
+      right: 60px; }
+    /* line 52, ../../../../general/res/sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      font-size: 30px;
+      right: auto;
+      bottom: auto;
+      left: 0;
+      line-height: 100%;
+      text-align: left;
+      width: 30px; }
+      /* line 61, ../../../../general/res/sass/mobile/_item.scss */
+      .items-holder .item.grid-item .item-main .item-type .l-icon-link {
+        bottom: 0; }
+    /* line 65, ../../../../general/res/sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      display: block;
+      opacity: 1;
+      font-size: 1em;
+      width: auto; } }
+@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 29, ../../../../general/res/sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    height: 50px; }
+    /* line 78, ../../../../general/res/sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      line-height: 50px !important; }
+    /* line 82, ../../../../general/res/sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: 7px;
+      bottom: auto;
+      height: 35px; }
+    /* line 87, ../../../../general/res/sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      top: 10px;
+      bottom: auto;
+      height: 30px; }
+    /* line 90, ../../../../general/res/sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      line-height: 50px; } }
+@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
+  /* line 29, ../../../../general/res/sass/mobile/_item.scss */
+  .items-holder .item.grid-item {
+    height: 66px; }
+    /* line 100, ../../../../general/res/sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.top-bar {
+      line-height: 66px !important; }
+    /* line 104, ../../../../general/res/sass/mobile/_item.scss */
+    .items-holder .item.grid-item .bar.bottom-bar {
+      top: 15px;
+      bottom: auto;
+      height: 35px; }
+    /* line 109, ../../../../general/res/sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-type {
+      top: 18px;
+      bottom: auto;
+      height: 30px; }
+    /* line 112, ../../../../general/res/sass/mobile/_item.scss */
+    .items-holder .item.grid-item .item-main .item-open {
+      line-height: 66px; } }
+
+/********************************* TO BE MOVED */
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/* line 22, ../../../../general/res/sass/_autoflow.scss */
+.autoflow {
+  font-size: 0.75rem; }
+  /* line 32, ../../../../general/res/sass/_autoflow.scss */
+  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu {
+    -moz-transition-property: visibility, opacity, background-color, border-color;
+    -o-transition-property: visibility, opacity, background-color, border-color;
+    -webkit-transition-property: visibility, opacity, background-color, border-color;
+    transition-property: visibility, opacity, background-color, border-color;
+    -moz-transition-duration: 50ms;
+    -o-transition-duration: 50ms;
+    -webkit-transition-duration: 50ms;
+    transition-duration: 50ms;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    opacity: 1; }
+  /* line 40, ../../../../general/res/sass/_autoflow.scss */
+  .autoflow .l-autoflow-header {
+    bottom: auto;
+    height: 22px;
+    line-height: 22px;
+    min-width: 225px; }
+    /* line 45, ../../../../general/res/sass/_autoflow.scss */
+    .autoflow .l-autoflow-header span {
+      vertical-align: middle; }
+    /* line 48, ../../../../general/res/sass/_autoflow.scss */
+    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu {
+      -moz-transition-property: visibility, opacity, background-color, border-color;
+      -o-transition-property: visibility, opacity, background-color, border-color;
+      -webkit-transition-property: visibility, opacity, background-color, border-color;
+      transition-property: visibility, opacity, background-color, border-color;
+      -moz-transition-duration: 500ms;
+      -o-transition-duration: 500ms;
+      -webkit-transition-duration: 500ms;
+      transition-duration: 500ms;
+      -moz-transition-timing-function: ease-in-out;
+      -o-transition-timing-function: ease-in-out;
+      -webkit-transition-timing-function: ease-in-out;
+      transition-timing-function: ease-in-out;
+      opacity: 0; }
+    /* line 52, ../../../../general/res/sass/_autoflow.scss */
+    .autoflow .l-autoflow-header .l-filter {
+      margin-left: 5px; }
+      /* line 54, ../../../../general/res/sass/_autoflow.scss */
+      .autoflow .l-autoflow-header .l-filter input.t-filter-input {
+        width: 100px; }
+  /* line 60, ../../../../general/res/sass/_autoflow.scss */
+  .autoflow .l-autoflow-items {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    top: 32px;
+    white-space: nowrap; }
+    /* line 66, ../../../../general/res/sass/_autoflow.scss */
+    .autoflow .l-autoflow-items .l-autoflow-col {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      border-left: 1px solid white;
+      display: inline-block;
+      padding-left: 5px;
+      padding-right: 5px;
+      vertical-align: top;
+      width: 225px; }
+      /* line 76, ../../../../general/res/sass/_autoflow.scss */
+      .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row {
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        display: block;
+        height: 15px;
+        line-height: 15px;
+        margin-bottom: 1px;
+        margin-top: 1px;
+        position: relative; }
+        /* line 85, ../../../../general/res/sass/_autoflow.scss */
+        .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:first-child {
+          border-top: none; }
+        /* line 88, ../../../../general/res/sass/_autoflow.scss */
+        .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:hover {
+          background: rgba(255, 255, 255, 0.1); }
+        /* line 93, ../../../../general/res/sass/_autoflow.scss */
+        .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.s-stale .l-autoflow-item.l {
+          color: rgba(255, 255, 255, 0.3) !important;
+          font-style: italic; }
+        /* line 94, ../../../../general/res/sass/_autoflow.scss */
+        .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.s-stale .l-autoflow-item.r {
+          color: rgba(255, 255, 255, 0.5) !important;
+          font-style: italic; }
+        /* line 97, ../../../../general/res/sass/_autoflow.scss */
+        .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:not(.s-stale) .l-autoflow-item.r {
+          color: gray; }
+        /* line 101, ../../../../general/res/sass/_autoflow.scss */
+        .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.first-in-group {
+          border-top: 1px solid white; }
+        /* line 104, ../../../../general/res/sass/_autoflow.scss */
+        .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item {
+          display: block; }
+          /* line 106, ../../../../general/res/sass/_autoflow.scss */
+          .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item.l {
+            float: none;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: auto; }
+          /* line 113, ../../../../general/res/sass/_autoflow.scss */
+          .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item.r {
+            -moz-border-radius: 2px;
+            -webkit-border-radius: 2px;
+            border-radius: 2px;
+            float: right;
+            margin-left: 5px;
+            padding-left: 5px;
+            padding-right: 5px;
+            text-align: right; }
+      /* line 124, ../../../../general/res/sass/_autoflow.scss */
+      .autoflow .l-autoflow-items .l-autoflow-col:first-child {
+        border-left: none;
+        padding-left: 0; }
+
+/* line 1, ../../../../general/res/sass/features/_imagery.scss */
+.l-image-main-wrapper,
+.l-image-main,
+.l-image-main-controlbar,
+.l-image-thumbs-wrapper {
+  overflow: false;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto; }
+
+/*************************************** MAIN LAYOUT */
+/* line 9, ../../../../general/res/sass/features/_imagery.scss */
+.l-image-main-wrapper {
+  min-height: 100px;
+  min-width: 150px; }
+  /* line 16, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-main-wrapper .l-image-main {
+    background-color: rgba(255, 255, 255, 0.1);
+    bottom: 30px; }
+  /* line 20, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-main-wrapper .l-image-main-controlbar {
+    top: auto;
+    height: 25px; }
+
+/* line 26, ../../../../general/res/sass/features/_imagery.scss */
+.l-image-thumbs-wrapper {
+  top: auto;
+  height: 168px; }
+
+/* line 32, ../../../../general/res/sass/features/_imagery.scss */
+.l-date,
+.l-time,
+.l-timezone {
+  display: inline-block; }
+
+/*************************************** MAIN IMAGE */
+/* line 40, ../../../../general/res/sass/features/_imagery.scss */
+.l-image-main,
+.l-image-thumb-item .l-thumb {
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat; }
+
+/* line 51, ../../../../general/res/sass/features/_imagery.scss */
+.l-image-main-controlbar {
+  font-size: 0.8em;
+  line-height: 25px; }
+  /* line 55, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-main-controlbar .left, .l-image-main-controlbar .right {
+    direction: rtl;
+    overflow: hidden; }
+  /* line 59, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-main-controlbar .left {
+    text-align: left; }
+  /* line 63, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-main-controlbar .right {
+    z-index: 2; }
+  /* line 67, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-main-controlbar .l-date,
+  .l-image-main-controlbar .l-time {
+    color: #fff; }
+  /* line 71, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-main-controlbar .l-mag {
+    direction: ltr;
+    display: inline-block; }
+    /* line 75, ../../../../general/res/sass/features/_imagery.scss */
+    .l-image-main-controlbar .l-mag:before {
+      content: "\000049"; }
+  /* line 79, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-main-controlbar .s-mag {
+    color: #333333; }
+  /* line 82, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-main-controlbar .l-btn.show-thumbs {
+    display: none; }
+
+/* line 87, ../../../../general/res/sass/features/_imagery.scss */
+.s-image-main {
+  border: 1px solid transparent; }
+  /* line 89, ../../../../general/res/sass/features/_imagery.scss */
+  .s-image-main.paused {
+    border-color: #c56f01; }
+
+/*************************************** THUMBS */
+/* line 96, ../../../../general/res/sass/features/_imagery.scss */
+.l-image-thumbs-wrapper {
+  direction: rtl;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 5px;
+  white-space: nowrap;
+  z-index: 70; }
+
+/* line 106, ../../../../general/res/sass/features/_imagery.scss */
+.l-image-thumb-item {
+  -moz-transition: background-color 0.25s;
+  -o-transition: background-color 0.25s;
+  -webkit-transition: background-color 0.25s;
+  transition: background-color 0.25s;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 1px;
+  position: relative;
+  cursor: pointer;
+  direction: ltr;
+  display: inline-block;
+  font-size: 0.8em;
+  margin-left: 3px;
+  text-align: left;
+  width: 122px;
+  white-space: normal; }
+  /* line 111, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-thumb-item .l-thumb,
+  .l-image-thumb-item .l-date,
+  .l-image-thumb-item .l-time {
+    display: inline-block; }
+  /* line 116, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-thumb-item .l-date,
+  .l-image-thumb-item .l-time {
+    padding: 2px 3px; }
+  /* line 128, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-thumb-item:hover {
+    background: rgba(255, 255, 255, 0.2); }
+    /* line 130, ../../../../general/res/sass/features/_imagery.scss */
+    .l-image-thumb-item:hover .l-date,
+    .l-image-thumb-item:hover .l-time {
+      color: #fff; }
+  /* line 135, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-thumb-item.selected {
+    background: #005177; }
+    /* line 137, ../../../../general/res/sass/features/_imagery.scss */
+    .l-image-thumb-item.selected .l-date,
+    .l-image-thumb-item.selected .l-time {
+      color: #fff; }
+  /* line 142, ../../../../general/res/sass/features/_imagery.scss */
+  .l-image-thumb-item .l-thumb {
+    background-color: rgba(255, 255, 255, 0.1);
+    height: 120px;
+    width: 120px;
+    margin-top: 0; }
+
+/*************************************** WHEN IN FRAME */
+/* line 152, ../../../../general/res/sass/features/_imagery.scss */
+.frame .t-imagery .l-image-main-wrapper {
+  bottom: 0; }
+  /* line 154, ../../../../general/res/sass/features/_imagery.scss */
+  .frame .t-imagery .l-image-main-wrapper .l-image-main-controlbar {
+    font-size: 0.7em; }
+/* line 163, ../../../../general/res/sass/features/_imagery.scss */
+.frame .t-imagery .l-image-thumbs-wrapper {
+  display: none; }
+
+/* line 5, ../../../../general/res/sass/features/_time-display.scss */
+.l-time-display:hover .l-btn.control {
+  opacity: 1; }
+/* line 9, ../../../../general/res/sass/features/_time-display.scss */
+.l-time-display .l-elem-wrapper {
+  position: relative; }
+/* line 12, ../../../../general/res/sass/features/_time-display.scss */
+.l-time-display .l-elem {
+  display: inline-block; }
+/* line 17, ../../../../general/res/sass/features/_time-display.scss */
+.l-time-display.l-timer .l-elem.l-value {
+  -moz-transition-property: left;
+  -o-transition-property: left;
+  -webkit-transition-property: left;
+  transition-property: left;
+  -moz-transition-duration: 200ms;
+  -o-transition-duration: 200ms;
+  -webkit-transition-duration: 200ms;
+  transition-duration: 200ms;
+  -moz-transition-timing-function: ease-in-out;
+  -o-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  position: absolute;
+  left: 0;
+  z-index: 1; }
+  /* line 22, ../../../../general/res/sass/features/_time-display.scss */
+  .l-time-display.l-timer .l-elem.l-value .ui-symbol.direction {
+    font-size: 0.8em; }
+/* line 26, ../../../../general/res/sass/features/_time-display.scss */
+.l-time-display.l-timer:hover .l-elem.l-value {
+  left: 20px; }
+/* line 33, ../../../../general/res/sass/features/_time-display.scss */
+.l-time-display .l-elem .value.active, .l-time-display .l-elem.value.active {
+  color: #fff; }
+/* line 38, ../../../../general/res/sass/features/_time-display.scss */
+.l-time-display .l-btn.control {
+  -moz-transition-property: visibility, opacity, background-color, border-color;
+  -o-transition-property: visibility, opacity, background-color, border-color;
+  -webkit-transition-property: visibility, opacity, background-color, border-color;
+  transition-property: visibility, opacity, background-color, border-color;
+  -moz-transition-duration: 200ms;
+  -o-transition-duration: 200ms;
+  -webkit-transition-duration: 200ms;
+  transition-duration: 200ms;
+  -moz-transition-timing-function: ease-in-out;
+  -o-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  opacity: 0;
+  font-size: 0.65em;
+  vertical-align: top; }
+
+/* line 2, ../sass/_controls.scss */
+.s-btn.major, .major.s-menu, .overlay .bottom-bar .s-btn.major, .overlay .bottom-bar .major.s-menu {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background-color: #0099cc;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: inline-block;
+  color: white;
+  /*    &:not(.disabled) {
+          &:not(.paused) {
+              &:hover {
+                  .icon {
+                      color: pullForward($ic, $ltGamma);
+                  }
+              }
+          }
+      }*/ }
+  /* line 14, ../sass/_mixins.scss */
+  .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .overlay .bottom-bar .s-btn.major:not(.disabled):hover, .overlay .bottom-bar .major.s-menu:not(.disabled):hover {
+    background-color: #0099cc; }
+  /* line 26, ../sass/_mixins.scss */
+  .s-btn.major .icon, .major.s-menu .icon, .overlay .bottom-bar .s-btn.major .icon, .overlay .bottom-bar .major.s-menu .icon {
+    color: white; }
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
new file mode 100644
index 0000000000..c399a474df
--- /dev/null
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -0,0 +1,68 @@
+/************************** COLORS AND SHADING */
+$colorBodyBg: #fff;
+$colorBodyFg: #666;
+$colorFooterBg: #000;
+$colorKey: #0099cc;
+$colorKeySelectedBg: #005177;
+$colorKeyFg: #fff;
+
+$contrastRatio: 25%;
+$colorBtnBg: pullForward($colorBodyBg, $contrastRatio);
+$colorBtnFg: $colorBodyBg;
+$colorBtnIcon: $colorBtnFg;
+$colorInvokeMenu: #fff;
+
+$colorAlt1: #ffc700;
+$colorAlert: #ff3c00;
+$colorIconLink: #49dedb;
+$colorPausedBg: #c56f01;
+$colorPausedFg: #fff;
+$colorCreateBtn: $colorKey;
+$colorGridLines: rgba(#fff, 0.05);
+$colorFormLines: rgba(#fff, 0.1);
+$colorFormSectionHeader: rgba(#000, 0.2);
+$colorInvokeMenu: #fff;
+// Menu colors
+$colorMenuBg: lighten($colorBodyBg, 23%);
+$colorMenuFg: lighten($colorMenuBg, 70%);
+$colorMenuIc: lighten($colorKey, 17%);
+$colorInteriorBorder: lighten($colorBodyBg, 10%);
+$colorObjFrameBg: darken($colorBodyBg, 5%);
+// Form colors
+$colorCheck: $colorKey;
+$colorFormRequired: #ffc700;
+$colorFormValid: #33cc33;
+$colorFormError: #cc0000;
+$colorFormInvalid: #ff9900;
+// Limits and staleness colors
+$colorLimitYellow: #9d7500;
+$colorLimitRed: #aa0000;
+$colorTelemFresh: #fff;
+$colorTelemStale: #888;
+$styleTelemStale: italic;
+// Bubble colors
+$colorInfoBubbleFg: #666;
+$colorInfoBubbleBg: #ddd;
+$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
+$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
+// Overlay
+$colorOvrBlocker: rgba(black, 0.7);
+$colorOvrBg: $colorBodyBg;
+$colorOvrFg: $colorBodyFg;
+// Items
+$colorItemBase: lighten($colorBodyBg, 5%);
+$colorItemFg: lighten($colorItemBase, 20%);
+$colorItemSelected: $colorKey;
+// Tabular
+$tabularColorBorder: rgba(white, 0.1);
+$tabularColorBodyBg: darken($colorBodyBg, 10%);
+$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
+$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
+$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
+$tabularColorHeaderBorder: $colorBodyBg;
+// Tree
+$colorItemTreeIcon: $colorKey;
+$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
+$colorItemTreeVCHover: $colorAlt1;
+// Scrollbar
+$scrollbarTrackColorBg: rgba(#000, 0.4);
\ No newline at end of file
diff --git a/platform/commonUI/themes/snow/res/sass/_controls.scss b/platform/commonUI/themes/snow/res/sass/_controls.scss
new file mode 100644
index 0000000000..08f52b64f5
--- /dev/null
+++ b/platform/commonUI/themes/snow/res/sass/_controls.scss
@@ -0,0 +1,7 @@
+.s-btn {
+    &.major {
+        $bg: $colorKey;
+        $fg: lighten($bg, 70%);
+        @include btnSubtle($bg, $fg, $fg, 0);
+    }
+}
\ No newline at end of file
diff --git a/platform/commonUI/themes/snow/res/sass/_mixins.scss b/platform/commonUI/themes/snow/res/sass/_mixins.scss
new file mode 100644
index 0000000000..404ddbdf5d
--- /dev/null
+++ b/platform/commonUI/themes/snow/res/sass/_mixins.scss
@@ -0,0 +1,48 @@
+@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false, $contrastRatio: 20%) {
+    $hovRatio: 5%;
+    $bgBase: $bg; //pullForward($bg, $contrastRatio);
+    $fgBase: $fg; //pushBack($bg, $contrastRatio);
+
+    background-color: $bgBase;
+    @include border-radius($controlCr);
+    @include box-sizing(border-box);
+    //@include boxShdwSubtle();
+    //border: none;
+    //border-top: 1px solid lighten($gradC1, 2%);
+    display: inline-block;
+    @if $hover == true {
+        &:not(.disabled):hover {
+            background-color: $colorKey; //pullForward($bgBase, $hovRatio);
+            //color: pushBack($fgBase, $hovRatio);
+        }
+    }
+}
+
+@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorBtnIcon, $contrastRatio: 20%) {
+    // $ic: Icon color
+    @include border-radius($controlCr);
+    @include containerSubtle($bg, $fg, true, 30%);
+    color: $ic;
+    .icon {
+        color: $ic;
+    }
+/*    &:not(.disabled) {
+        &:not(.paused) {
+            &:hover {
+                .icon {
+                    color: pullForward($ic, $ltGamma);
+                }
+            }
+        }
+    }*/
+}
+
+@function pullForward($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, lighter things come forward - opposite for light interfaces
+    @return darken($c, $p);
+}
+
+@function pushBack($c: $colorBodyBg, $p: 20%) {
+    // For dark interfaces, darker things move back - opposite for light interfaces
+    @return lighten($c, $p);
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/themes/_theme-espresso.scss b/platform/commonUI/themes/snow/res/sass/theme-snow.scss
similarity index 74%
rename from platform/commonUI/general/res/sass/themes/_theme-espresso.scss
rename to platform/commonUI/themes/snow/res/sass/theme-snow.scss
index 04ac0bc49c..703db6bed9 100644
--- a/platform/commonUI/general/res/sass/themes/_theme-espresso.scss
+++ b/platform/commonUI/themes/snow/res/sass/theme-snow.scss
@@ -19,12 +19,28 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* CONSTANTS */
-//$colorBodyBg: #fff;
-//$colorBodyFg: #666;
 
-/*
-@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	background: red;
-	display: inline-block;
-}*/
+@import "compass";
+@import "compass/reset";
+@import "compass/css3";
+@import "compass/utilities";
+
+@import "../../../../general/res/sass/_mixins";
+@import "../../../../general/res/sass/mobile/mixins";
+@import "mixins";
+
+@import "../../../../general/res/sass/constants";
+@import "../../../../general/res/sass/mobile/constants";
+@import "constants";
+
+@import "../../../../general/res/sass/main";
+@import "controls";
+
+
+
+
+
+
+
+
+

From ac41ed7d64ef1426b07098862fb8e523b404e1ca Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 4 Sep 2015 16:39:16 -0700
Subject: [PATCH 197/266] [Frontend] IN-PROGRESS Theme changes continuing

open #95
Splitter styles updated;
Tree styles updated;
---
 .gitignore                                    |   1 +
 example/imagery/src/ImageTelemetry.js         |   9 +-
 .../commonUI/general/res/sass/COMPILE.scss    |   1 +
 .../commonUI/general/res/sass/_mixins.scss    |  46 +++--
 .../general/res/sass/controls/_menus.scss     |  10 +-
 .../general/res/sass/helpers/_splitter.scss   |  24 +--
 .../commonUI/general/res/sass/tree/_tree.scss |  25 +--
 .../espresso/res/css/theme-espresso.css       | 148 +++++++-------
 .../themes/espresso/res/sass/_constants.scss  |  20 +-
 .../themes/snow/res/css/theme-snow.css        | 185 +++++++++---------
 .../themes/snow/res/sass/_constants.scss      |  31 ++-
 .../themes/snow/res/sass/_controls.scss       |  13 +-
 .../themes/snow/res/sass/_mixins.scss         |   8 +-
 13 files changed, 265 insertions(+), 256 deletions(-)
 create mode 100644 platform/commonUI/general/res/sass/COMPILE.scss

diff --git a/.gitignore b/.gitignore
index 6d8ee7e58b..26932aec64 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,7 @@
 *.DS_Store
 
 *.sass-cache
+*COMPILE.css
 
 # Intellij project configuration files
 *.idea
diff --git a/example/imagery/src/ImageTelemetry.js b/example/imagery/src/ImageTelemetry.js
index 127b65deba..c0e1e2bd1d 100644
--- a/example/imagery/src/ImageTelemetry.js
+++ b/example/imagery/src/ImageTelemetry.js
@@ -31,10 +31,11 @@ define(
 
         var firstObservedTime = Date.now(),
             images = [
-                "http://www.nasa.gov/393811main_Palomar_ao_bouchez_10s_after_impact_4x3_946-710.png",
-                "http://www.nasa.gov/393821main_Palomar_ao_bouchez_15s_after_impact_4x3_946-710.png",
-                "http://www.nasa.gov/images/content/393801main_CfhtVeillet2_4x3_516-387.jpg",
-                "http://www.nasa.gov/images/content/392790main_1024_768_GeminiNorth_NightBeforeImpact_946-710.jpg"
+                "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2015/01/comet_on_16_january_2015_navcam/15205508-1-eng-GB/Comet_on_16_January_2015_NavCam.jpg",
+                "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2014/08/comet_on_7_august_a/14721226-1-eng-GB/Comet_on_7_August_a_node_full_image_2.jpg",
+                "http://http://resources0.news.com.au/images/2014/10/26/1227102/619948-e62d0d0c-5cb3-11e4-9c68-d403f5dcc36d.jpg",
+                "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2014/08/comet_on_16_august_a/14735866-1-eng-GB/Comet_on_16_August_a_node_full_image_2.jpg",
+			  	"http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2015/08/year_at_a_comet_may_2015/15549436-1-eng-GB/Year_at_a_comet_May_2015_node_full_image_2.jpg"
             ].map(function (url, index) {
                 return {
                     timestamp: firstObservedTime + 1000 * index,
diff --git a/platform/commonUI/general/res/sass/COMPILE.scss b/platform/commonUI/general/res/sass/COMPILE.scss
new file mode 100644
index 0000000000..8c0ed50ef8
--- /dev/null
+++ b/platform/commonUI/general/res/sass/COMPILE.scss
@@ -0,0 +1 @@
+// This file exists only to force compass to compile in this directory with watch .
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index a64549a51f..a5b6834187 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -205,8 +205,8 @@
         }
     }
     &:not(.disabled):hover:before {
-        @include trans-prop-nice("border-color", 50ms);
-        border-color: $colorKey;
+        @include trans-prop-nice("border-color", 25ms);
+        border-color: $colorGrippyInteriorHover;
     }
 }
 
@@ -237,12 +237,22 @@
     border: 1px solid $c;
 }
 
+@mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) {
+	@if $sVal != 'none' {
+		@include box-shadow($sVal);
+	}
+}
+
 @mixin boxShdwSubtle($sVal: 0.2) {
-    @include box-shadow(rgba(black, $sVal) 0 1px 2px);
+	@if $sVal != 'none' {
+		@include box-shadow(rgba(black, $sVal) 0 1px 2px);
+	}
 }
 
 @mixin boxShdwLarge($sVal: 0.7) {
-    @include box-shadow(rgba(black, $sVal) 0 3px 10px);
+	@if $sVal != 'none' {
+		@include box-shadow(rgba(black, $sVal) 0 3px 10px);
+	}
 }
 
 @mixin outerGlow($color: #fff, $sVal: 0.3) {
@@ -258,33 +268,41 @@
 }
 
 @mixin txtShdwSubtle($sVal: 0.1) {
-    @include text-shadow(rgba(black, $sVal) 0 1px 2px);
+	@if $sVal != 'none' {
+	    @include text-shadow(rgba(black, $sVal) 0 1px 2px);
+	}
 }
 
 @mixin txtShdwLarge($sVal: 0.7) {
     @include text-shadow(rgba(black, $sVal) 0 3px 7px);
 }
 
-@function pullForward($c: $colorBodyBg, $p: 20%) {
+@function pullForward($c, $p: 20%) {
     // For dark interfaces, lighter things come forward
     @return lighten($c, $p);
 }
 
-@function pushBack($c: $colorBodyBg, $p: 20%) {
+@function pushBack($c, $p: 20%) {
     // For dark interfaces, darker things move back
     @return darken($c, $p);
 }
 
+@function percentToDecimal($p) {
+	@return $p / 100%;
+}
+
+@function decimalToPercent($d) {
+	@return percentage($d);
+}
+
 /*********************************************** FORM ELEMENTS */
 @mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
     @include appearance(none);
     @include border-radius($controlCr);
     @include box-sizing(border-box);
     @include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
-    //	background: lighten($bg, 20%);
     background: rgba(#fff, 0.1);
     border: none;
-    //border-bottom: 1px solid rgba(#fff, 0.1);
     color: lighten($fg, 20%);
     outline: none;
     &.error {
@@ -308,16 +326,6 @@
     border-bottom: 1px solid lighten($bg, 10%);
 }
 
-/*
-@mixin invokeMenu($baseColor: $colorBodyFg) {
-	$c: $baseColor;
-	color: $c;
-	&:hover {
-		color: lighten($c, $ltGamma);
-	}
-}
-*/
-
 @mixin menuUlReset() {
     margin: 0;
     padding: 0;
diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss
index 67e854091f..203761092f 100644
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -37,8 +37,8 @@
 	}
 
 	&:after {
-		// Adds the downward facing arrow element
-		color: rgba($colorInvokeMenu, 0.2);
+		// Adds the downward facing 'context available / invoke menu' arrow element
+		color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
 		content: '\76';
 		display: inline-block;
 		font-family: 'symbolsfont';
@@ -50,9 +50,9 @@
 		.title-label {
 			font-size: 1rem;
 		}
-		&:after {
-			color: rgba($colorInvokeMenu, 0.5);
-		}
+		//&:after {
+		//	color: rgba($colorInvokeMenu, 0.5);
+		//}
 	}
 
 	.menu {
diff --git a/platform/commonUI/general/res/sass/helpers/_splitter.scss b/platform/commonUI/general/res/sass/helpers/_splitter.scss
index f1adebce9a..3a344696ad 100644
--- a/platform/commonUI/general/res/sass/helpers/_splitter.scss
+++ b/platform/commonUI/general/res/sass/helpers/_splitter.scss
@@ -20,18 +20,20 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .split-layout {
-	$b: lighten($colorBodyBg, 5%);
+	$b: pullForward($colorBodyBg, $contrastRatioPercent);
 	$splitterD: 5px;
-	// TEMP VAlS - this will need to be redone when we implement a draggable splitter
-	$splitL: 85%;
-	$splitT: 70%;
 
 	.splitter {
 		background-color: $b;
-		@include box-shadow(rgba(black, 0.4) 0 0 3px);
+		@include boxShdw($splitterShdw);
 		overflow: hidden;
 		position: absolute;
 		z-index: 1;
+		//@if $colorSplitterHover != 'none' {
+			&:hover {
+				background-color: $colorSplitterHover;
+			}
+		//}
 	}
 	&.horizontal {
 		// Slides vertically up and down, splitting the element horizontally
@@ -41,21 +43,17 @@
 			right: 0;
 			&.top {
 				bottom: auto;
-//				height: $splitT;
 			}
 			&.bottom {
 				top: auto;
-//				height: 100% - $splitT;
 			}
 		}
 		>.splitter {
-			@include controlGrippy($b, horizontal);
+			@include controlGrippy($colorSplitterInterior, horizontal);
 			cursor: row-resize;
 			left: 0; right: 0;
 			width: auto;
 			height: $splitterD;
-//			margin-top: ($splitterD + 2) * -1;  // Controlled by splitter
-//			top: $splitT;  // Controlled by splitter
 		}
 	}
 	&.vertical {
@@ -65,20 +63,16 @@
 			bottom: 0;
 			&.left {
 				right: auto;
-//				width: $splitL - 1%; // Controlled by splitter
 			}
 			&.right {
 				left: auto;
-//				width: 100% - $splitL; // Controlled by splitter
 			}
 		}
 		>.splitter {
-			@include controlGrippy($b, vertical);
+			@include controlGrippy($colorBodyBg, vertical);
 			bottom: 0;
 			cursor: col-resize;
 			width: $splitterD;
-//			margin-left: ($splitterD + 2) * -1;  // Controlled by splitter
-//			left: $splitL;  // Controlled by splitter
 		}
 	}
 }
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index 8a0c4c1e2a..17261cd136 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -22,6 +22,7 @@
 
 ul.tree {
 	@include menuUlReset();
+	@include user-select(none);
 	li {
 		display: block;
 		position: relative;
@@ -45,6 +46,7 @@ ul.tree {
 	position: relative;
 
 	.view-control {
+		color: $colorItemTreeVC;
 		display: inline-block;
 		margin-left: $interiorMargin;
 		font-size: 0.75em;
@@ -53,7 +55,7 @@ ul.tree {
 		// NOTE: [Mobile] Removed Hover on Mobile
 		@include desktop {
 			&:hover {
-				color: $colorItemTreeVCHover;
+				color: $colorItemTreeVCHover !important;
 			}
 		}
 	}
@@ -69,7 +71,7 @@ ul.tree {
 		.type-icon {
 			//@include absPosDefault(0, false);
 			$d: $treeTypeIconH; // 16px is crisp size
-			@include txtShdwSubtle(0.6);
+			@include txtShdwSubtle($shdwItemTreeIcon);
 			font-size: $d;
 			color: $colorItemTreeIcon;
 			left: $interiorMargin;
@@ -124,14 +126,13 @@ ul.tree {
 	}
 
 	&.selected {
-		$c: #fff;
-		background: $colorKeySelectedBg;
-		color: $c;
+		background: $colorItemTreeSelectedBg;
+		color: $colorItemTreeSelectedFg;
 		.view-control {
-			color: $colorItemTreeIcon;
+			color: $colorItemTreeSelectedVC;
 		}
 		.label .type-icon {
-			color: #fff; //$colorItemTreeIconHover;
+			color: $colorItemTreeSelectedFg; //$colorItemTreeIconHover;
 		}
 	}
 
@@ -139,11 +140,11 @@ ul.tree {
 		// NOTE: [Mobile] Removed Hover on Mobile
 		@include desktop {
 			&:hover {
-				background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%);
-				color: lighten($colorBodyFg, 20%);
-				.context-trigger {
-					display: block;
-				}
+				background: rgba($colorBodyFg, 0.1); //lighten($colorBodyBg, 5%);
+				color: pullForward($colorBodyFg, 20%);
+				//.context-trigger {
+				//	display: block;
+				//}
 				.icon {
 					color: $colorItemTreeIconHover;
 				}
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 52ce4616b9..cb6e719737 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -98,15 +98,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /*********************************************** FORM ELEMENTS */
-/*
-@mixin invokeMenu($baseColor: $colorBodyFg) {
-	$c: $baseColor;
-	color: $c;
-	&:hover {
-		color: lighten($c, $ltGamma);
-	}
-}
-*/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -931,26 +922,29 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 29, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 26, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout .splitter {
-  background-color: #404040;
+  background-color: #454545;
   -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
   box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
   overflow: hidden;
   position: absolute;
   z-index: 1; }
-/* line 36, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 33, ../../../../general/res/sass/helpers/_splitter.scss */
+  .split-layout .splitter:hover {
+    background-color: none; }
+/* line 38, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.horizontal {
   overflow: hidden; }
-  /* line 39, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 41, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.horizontal .pane {
     left: 0;
     right: 0; }
-    /* line 42, ../../../../general/res/sass/helpers/_splitter.scss */
+    /* line 44, ../../../../general/res/sass/helpers/_splitter.scss */
     .split-layout.horizontal .pane.top {
       bottom: auto; }
-    /* line 46, ../../../../general/res/sass/helpers/_splitter.scss */
+    /* line 47, ../../../../general/res/sass/helpers/_splitter.scss */
     .split-layout.horizontal .pane.bottom {
       top: auto; }
   /* line 51, ../../../../general/res/sass/helpers/_splitter.scss */
@@ -980,7 +974,7 @@ mct-container {
       pointer-events: none;
       position: absolute;
       z-index: 2;
-      border-top: 1px dotted #1a1a1a;
+      border-top: 1px dotted #0d0d0d;
       top: 2px;
       left: 5px;
       right: 5px; }
@@ -990,26 +984,26 @@ mct-container {
       -o-transition-property: "border-color";
       -webkit-transition-property: "border-color";
       transition-property: "border-color";
-      -moz-transition-duration: 50ms;
-      -o-transition-duration: 50ms;
-      -webkit-transition-duration: 50ms;
-      transition-duration: 50ms;
+      -moz-transition-duration: 25ms;
+      -o-transition-duration: 25ms;
+      -webkit-transition-duration: 25ms;
+      transition-duration: 25ms;
       -moz-transition-timing-function: ease-in-out;
       -o-transition-timing-function: ease-in-out;
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       border-color: #0099cc; }
-/* line 63, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 61, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.vertical .pane {
   top: 0;
   bottom: 0; }
-  /* line 66, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 64, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.vertical .pane.left {
     right: auto; }
-  /* line 70, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 67, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.vertical .pane.right {
     left: auto; }
-/* line 75, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 71, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.vertical > .splitter {
   bottom: 0;
   cursor: col-resize;
@@ -1034,7 +1028,7 @@ mct-container {
     pointer-events: none;
     position: absolute;
     z-index: 2;
-    border-left: 1px dotted #1a1a1a;
+    border-left: 1px dotted #0d0d0d;
     left: 2px;
     bottom: 5px;
     top: 5px; }
@@ -1044,21 +1038,21 @@ mct-container {
     -o-transition-property: "border-color";
     -webkit-transition-property: "border-color";
     transition-property: "border-color";
-    -moz-transition-duration: 50ms;
-    -o-transition-duration: 50ms;
-    -webkit-transition-duration: 50ms;
-    transition-duration: 50ms;
+    -moz-transition-duration: 25ms;
+    -o-transition-duration: 25ms;
+    -webkit-transition-duration: 25ms;
+    transition-duration: 25ms;
     -moz-transition-timing-function: ease-in-out;
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
 
-/* line 86, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 80, ../../../../general/res/sass/helpers/_splitter.scss */
 .browse-area .splitter {
   top: 34px; }
 
-/* line 90, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 84, ../../../../general/res/sass/helpers/_splitter.scss */
 .edit-area .splitter {
   top: 0; }
 
@@ -1998,10 +1992,10 @@ label.checkbox.custom {
     -o-transition-property: "border-color";
     -webkit-transition-property: "border-color";
     transition-property: "border-color";
-    -moz-transition-duration: 50ms;
-    -o-transition-duration: 50ms;
-    -webkit-transition-duration: 50ms;
-    transition-duration: 50ms;
+    -moz-transition-duration: 25ms;
+    -o-transition-duration: 25ms;
+    -webkit-transition-duration: 25ms;
+    transition-duration: 25ms;
     -moz-transition-timing-function: ease-in-out;
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
@@ -2149,9 +2143,6 @@ label.checkbox.custom {
 /* line 50, ../../../../general/res/sass/controls/_menus.scss */
 .s-menu.create-btn .title-label {
   font-size: 1rem; }
-/* line 53, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu.create-btn:after {
-  color: rgba(255, 255, 255, 0.5); }
 /* line 58, ../../../../general/res/sass/controls/_menus.scss */
 .s-menu .menu {
   left: 0;
@@ -2197,7 +2188,7 @@ label.checkbox.custom {
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 324, ../../../../general/res/sass/_mixins.scss */
+      /* line 332, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2702,7 +2693,7 @@ label.form-control.checkbox input {
   position: absolute;
   height: 100%;
   width: 100%; }
-  /* line 290, ../../../../general/res/sass/_mixins.scss */
+  /* line 308, ../../../../general/res/sass/_mixins.scss */
   .edit-main textarea.error {
     background: rgba(255, 0, 0, 0.5); }
 
@@ -2745,7 +2736,7 @@ input[type="text"] {
   color: #cccccc;
   outline: none;
   padding: 0 3px; }
-  /* line 290, ../../../../general/res/sass/_mixins.scss */
+  /* line 308, ../../../../general/res/sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
   /* line 29, ../../../../general/res/sass/forms/_text-input.scss */
@@ -2893,7 +2884,7 @@ input[type="text"] {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 290, ../../../../general/res/sass/_mixins.scss */
+  /* line 308, ../../../../general/res/sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -3050,7 +3041,7 @@ span.req {
   padding: 0 3px;
   background: #3b3b3b;
   border-bottom: 1px solid #4d4d4d; }
-  /* line 290, ../../../../general/res/sass/_mixins.scss */
+  /* line 308, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -4166,7 +4157,7 @@ span.req {
 ul.tree {
   margin: 0;
   padding: 0; }
-  /* line 324, ../../../../general/res/sass/_mixins.scss */
+  /* line 332, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -4201,16 +4192,17 @@ ul.tree {
   /* line 47, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item .view-control,
   .search-result-item .view-control {
+    color: rgba(255, 255, 255, 0.3);
     display: inline-block;
     margin-left: 5px;
     font-size: 0.75em;
     width: 10px; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 55, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 56, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .view-control:hover,
       .search-result-item .view-control:hover {
         color: #ffc700; } }
-  /* line 61, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 62, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item .label,
   .search-result-item .label {
     display: block;
@@ -4223,7 +4215,7 @@ ul.tree {
     width: auto;
     height: auto;
     line-height: 1.5rem; }
-    /* line 69, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 70, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item .label .type-icon,
     .search-result-item .label .type-icon {
       text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
@@ -4237,14 +4229,14 @@ ul.tree {
       line-height: 100%;
       right: auto;
       width: 16px; }
-      /* line 82, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 83, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
       .search-result-item .label .type-icon .icon.l-icon-link,
       .search-result-item .label .type-icon .icon.l-icon-alert {
         text-shadow: black 0 1px 2px;
         position: absolute;
         z-index: 2; }
-      /* line 88, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 89, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .label .type-icon .icon.l-icon-alert,
       .search-result-item .label .type-icon .icon.l-icon-alert {
         color: #ff3c00;
@@ -4254,7 +4246,7 @@ ul.tree {
         width: 8px;
         top: 1px;
         right: -2px; }
-      /* line 94, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 95, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .label .type-icon .icon.l-icon-link,
       .search-result-item .label .type-icon .icon.l-icon-link {
         color: #49dedb;
@@ -4264,7 +4256,7 @@ ul.tree {
         width: 8px;
         left: -3px;
         bottom: 0px; }
-    /* line 102, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 103, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item .label .title-label,
     .search-result-item .label .title-label {
       overflow: hidden;
@@ -4280,67 +4272,59 @@ ul.tree {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap; }
-  /* line 113, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 114, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item.loading,
   .search-result-item.loading {
     pointer-events: none; }
-    /* line 115, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 116, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.loading .label,
     .search-result-item.loading .label {
       opacity: 0.5; }
-      /* line 117, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 118, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item.loading .label .title-label,
       .search-result-item.loading .label .title-label {
         font-style: italic; }
-    /* line 121, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 122, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.loading .wait-spinner,
     .search-result-item.loading .wait-spinner {
       margin-left: 14px; }
-  /* line 126, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 127, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item.selected,
   .search-result-item.selected {
-    background: #005177;
-    color: #fff; }
+    background: #006080;
+    color: #cccccc; }
     /* line 130, ../../../../general/res/sass/tree/_tree.scss */
-    .tree-item.selected .view-control,
-    .search-result-item.selected .view-control {
-      color: #0099cc; }
-    /* line 133, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.selected .label .type-icon,
     .search-result-item.selected .label .type-icon {
-      color: #fff; }
+      color: #cccccc; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 141, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 138, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item:not(.selected):hover,
     .search-result-item:not(.selected):hover {
-      background: rgba(255, 255, 255, 0.1);
+      background: rgba(153, 153, 153, 0.1);
       color: #cccccc; }
       /* line 144, ../../../../general/res/sass/tree/_tree.scss */
-      .tree-item:not(.selected):hover .context-trigger,
-      .search-result-item:not(.selected):hover .context-trigger {
-        display: block; }
-      /* line 147, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item:not(.selected):hover .icon,
       .search-result-item:not(.selected):hover .icon {
         color: #33ccff; } }
-  /* line 154, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 151, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item:not(.loading),
   .search-result-item:not(.loading) {
     cursor: pointer; }
-  /* line 158, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 155, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item .context-trigger,
   .search-result-item .context-trigger {
     top: -1px;
     position: absolute;
     right: 3px; }
-    /* line 164, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 161, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item .context-trigger .invoke-menu,
     .search-result-item .context-trigger .invoke-menu {
       font-size: 0.75em;
       height: 0.9rem;
       line-height: 0.9rem; }
 
-/* line 173, ../../../../general/res/sass/tree/_tree.scss */
+/* line 170, ../../../../general/res/sass/tree/_tree.scss */
 .tree-item .label {
   left: 15px; }
 
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 835d76133e..28fb94f121 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -6,11 +6,12 @@ $colorKey: #0099cc;
 $colorKeySelectedBg: #005177;
 $colorKeyFg: #fff;
 
-$contrastRatio: 7%;
-$colorBtnBg: pullForward($colorBodyBg, $contrastRatio);
+$contrastRatioPercent: 7%;
+$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
 $colorBtnFg: $colorBodyFg;
 $colorBtnIcon: $colorKey;
 $colorInvokeMenu: #fff;
+$contrastInvokeMenuPercent: 20%;
 
 $colorAlt1: #ffc700;
 $colorAlert: #ff3c00;
@@ -47,7 +48,7 @@ $colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
 $colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
-$colorOvrBg: $colorBodyBg;
+$colorOvrBg: pullForward($colorBodyBg, 10%);
 $colorOvrFg: $colorBodyFg;
 // Items
 $colorItemBase: lighten($colorBodyBg, 5%);
@@ -63,6 +64,17 @@ $tabularColorHeaderBorder: $colorBodyBg;
 // Tree
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
+$colorItemTreeFg: $colorBodyFg;
+$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
+$colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
+$colorItemTreeVC: rgba(#fff, 0.3);
+$colorItemTreeSelectedVC: $colorItemTreeVC;
 $colorItemTreeVCHover: $colorAlt1;
+$shdwItemTreeIcon: 0.6;
 // Scrollbar
-$scrollbarTrackColorBg: rgba(#000, 0.4);
\ No newline at end of file
+$scrollbarTrackColorBg: rgba(#000, 0.4);
+// Splitter
+$splitterShdw: rgba(black, 0.4) 0 0 3px;
+$colorSplitterInterior: $colorBodyBg;
+$colorSplitterHover: none;
+$colorGrippyInteriorHover: $colorKey;
\ No newline at end of file
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index c036576283..1227a93b0a 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -98,15 +98,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /*********************************************** FORM ELEMENTS */
-/*
-@mixin invokeMenu($baseColor: $colorBodyFg) {
-	$c: $baseColor;
-	color: $c;
-	&:hover {
-		color: lighten($c, $ltGamma);
-	}
-}
-*/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -931,26 +922,26 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 29, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 26, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout .splitter {
-  background-color: white;
-  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
-  box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
+  background-color: #b3b3b3;
   overflow: hidden;
   position: absolute;
   z-index: 1; }
-/* line 36, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 33, ../../../../general/res/sass/helpers/_splitter.scss */
+  .split-layout .splitter:hover {
+    background-color: #0099cc; }
+/* line 38, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.horizontal {
   overflow: hidden; }
-  /* line 39, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 41, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.horizontal .pane {
     left: 0;
     right: 0; }
-    /* line 42, ../../../../general/res/sass/helpers/_splitter.scss */
+    /* line 44, ../../../../general/res/sass/helpers/_splitter.scss */
     .split-layout.horizontal .pane.top {
       bottom: auto; }
-    /* line 46, ../../../../general/res/sass/helpers/_splitter.scss */
+    /* line 47, ../../../../general/res/sass/helpers/_splitter.scss */
     .split-layout.horizontal .pane.bottom {
       top: auto; }
   /* line 51, ../../../../general/res/sass/helpers/_splitter.scss */
@@ -990,26 +981,26 @@ mct-container {
       -o-transition-property: "border-color";
       -webkit-transition-property: "border-color";
       transition-property: "border-color";
-      -moz-transition-duration: 50ms;
-      -o-transition-duration: 50ms;
-      -webkit-transition-duration: 50ms;
-      transition-duration: 50ms;
+      -moz-transition-duration: 25ms;
+      -o-transition-duration: 25ms;
+      -webkit-transition-duration: 25ms;
+      transition-duration: 25ms;
       -moz-transition-timing-function: ease-in-out;
       -o-transition-timing-function: ease-in-out;
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
-      border-color: #0099cc; }
-/* line 63, ../../../../general/res/sass/helpers/_splitter.scss */
+      border-color: #fff; }
+/* line 61, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.vertical .pane {
   top: 0;
   bottom: 0; }
-  /* line 66, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 64, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.vertical .pane.left {
     right: auto; }
-  /* line 70, ../../../../general/res/sass/helpers/_splitter.scss */
+  /* line 67, ../../../../general/res/sass/helpers/_splitter.scss */
   .split-layout.vertical .pane.right {
     left: auto; }
-/* line 75, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 71, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.vertical > .splitter {
   bottom: 0;
   cursor: col-resize;
@@ -1044,21 +1035,21 @@ mct-container {
     -o-transition-property: "border-color";
     -webkit-transition-property: "border-color";
     transition-property: "border-color";
-    -moz-transition-duration: 50ms;
-    -o-transition-duration: 50ms;
-    -webkit-transition-duration: 50ms;
-    transition-duration: 50ms;
+    -moz-transition-duration: 25ms;
+    -o-transition-duration: 25ms;
+    -webkit-transition-duration: 25ms;
+    transition-duration: 25ms;
     -moz-transition-timing-function: ease-in-out;
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
-    border-color: #0099cc; }
+    border-color: #fff; }
 
-/* line 86, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 80, ../../../../general/res/sass/helpers/_splitter.scss */
 .browse-area .splitter {
   top: 34px; }
 
-/* line 90, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 84, ../../../../general/res/sass/helpers/_splitter.scss */
 .edit-area .splitter {
   top: 0; }
 
@@ -1271,7 +1262,7 @@ mct-container {
       color: gray; }
       /* line 25, ../../../../general/res/sass/controls/_breadcrumb.scss */
       .l-breadcrumb .l-breadcrumb-item a:hover .icon {
-        color: #33ccff; }
+        color: #0099cc; }
 
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
@@ -1362,7 +1353,7 @@ mct-container {
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
-    background-color: #bfbfbf;
+    background-color: #b3b3b3;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -1958,15 +1949,15 @@ label.checkbox.custom {
     -o-transition-property: "border-color";
     -webkit-transition-property: "border-color";
     transition-property: "border-color";
-    -moz-transition-duration: 50ms;
-    -o-transition-duration: 50ms;
-    -webkit-transition-duration: 50ms;
-    transition-duration: 50ms;
+    -moz-transition-duration: 25ms;
+    -o-transition-duration: 25ms;
+    -webkit-transition-duration: 25ms;
+    transition-duration: 25ms;
     -moz-transition-timing-function: ease-in-out;
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
-    border-color: #0099cc; }
+    border-color: #fff; }
   /* line 319, ../../../../general/res/sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
@@ -2099,7 +2090,7 @@ label.checkbox.custom {
   margin-left: 3px; }
 /* line 39, ../../../../general/res/sass/controls/_menus.scss */
 .s-menu:after {
-  color: rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.5);
   content: '\76';
   display: inline-block;
   font-family: 'symbolsfont';
@@ -2109,9 +2100,6 @@ label.checkbox.custom {
 /* line 50, ../../../../general/res/sass/controls/_menus.scss */
 .s-menu.create-btn .title-label {
   font-size: 1rem; }
-/* line 53, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu.create-btn:after {
-  color: rgba(255, 255, 255, 0.5); }
 /* line 58, ../../../../general/res/sass/controls/_menus.scss */
 .s-menu .menu {
   left: 0;
@@ -2147,7 +2135,7 @@ label.checkbox.custom {
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 324, ../../../../general/res/sass/_mixins.scss */
+      /* line 332, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2642,7 +2630,7 @@ label.form-control.checkbox input {
   position: absolute;
   height: 100%;
   width: 100%; }
-  /* line 290, ../../../../general/res/sass/_mixins.scss */
+  /* line 308, ../../../../general/res/sass/_mixins.scss */
   .edit-main textarea.error {
     background: rgba(255, 0, 0, 0.5); }
 
@@ -2685,7 +2673,7 @@ input[type="text"] {
   color: #999999;
   outline: none;
   padding: 0 3px; }
-  /* line 290, ../../../../general/res/sass/_mixins.scss */
+  /* line 308, ../../../../general/res/sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
   /* line 29, ../../../../general/res/sass/forms/_text-input.scss */
@@ -2823,7 +2811,7 @@ input[type="text"] {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 290, ../../../../general/res/sass/_mixins.scss */
+  /* line 308, ../../../../general/res/sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -2980,7 +2968,7 @@ span.req {
   padding: 0 3px;
   background: white;
   border-bottom: 1px solid white; }
-  /* line 290, ../../../../general/res/sass/_mixins.scss */
+  /* line 308, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -4069,21 +4057,25 @@ span.req {
 /* line 23, ../../../../general/res/sass/tree/_tree.scss */
 ul.tree {
   margin: 0;
-  padding: 0; }
-  /* line 324, ../../../../general/res/sass/_mixins.scss */
+  padding: 0;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none; }
+  /* line 332, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
     padding: 0; }
-  /* line 25, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 26, ../../../../general/res/sass/tree/_tree.scss */
   ul.tree li {
     display: block;
     position: relative; }
-  /* line 29, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 30, ../../../../general/res/sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
-/* line 34, ../../../../general/res/sass/tree/_tree.scss */
+/* line 35, ../../../../general/res/sass/tree/_tree.scss */
 .tree-item,
 .search-result-item {
   -moz-box-sizing: border-box;
@@ -4102,19 +4094,20 @@ ul.tree {
   line-height: 1.5rem;
   margin-bottom: 3px;
   position: relative; }
-  /* line 47, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 48, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item .view-control,
   .search-result-item .view-control {
+    color: #666;
     display: inline-block;
     margin-left: 5px;
     font-size: 0.75em;
     width: 10px; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 55, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 57, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .view-control:hover,
       .search-result-item .view-control:hover {
-        color: #ffc700; } }
-  /* line 61, ../../../../general/res/sass/tree/_tree.scss */
+        color: #0099cc !important; } }
+  /* line 63, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item .label,
   .search-result-item .label {
     display: block;
@@ -4127,10 +4120,9 @@ ul.tree {
     width: auto;
     height: auto;
     line-height: 1.5rem; }
-    /* line 69, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 71, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item .label .type-icon,
     .search-result-item .label .type-icon {
-      text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
       font-size: 16px;
       color: #0099cc;
       left: 5px;
@@ -4141,14 +4133,14 @@ ul.tree {
       line-height: 100%;
       right: auto;
       width: 16px; }
-      /* line 82, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 84, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
       .search-result-item .label .type-icon .icon.l-icon-link,
       .search-result-item .label .type-icon .icon.l-icon-alert {
         text-shadow: black 0 1px 2px;
         position: absolute;
         z-index: 2; }
-      /* line 88, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 90, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .label .type-icon .icon.l-icon-alert,
       .search-result-item .label .type-icon .icon.l-icon-alert {
         color: #ff3c00;
@@ -4158,7 +4150,7 @@ ul.tree {
         width: 8px;
         top: 1px;
         right: -2px; }
-      /* line 94, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 96, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .label .type-icon .icon.l-icon-link,
       .search-result-item .label .type-icon .icon.l-icon-link {
         color: #49dedb;
@@ -4168,7 +4160,7 @@ ul.tree {
         width: 8px;
         left: -3px;
         bottom: 0px; }
-    /* line 102, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 104, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item .label .title-label,
     .search-result-item .label .title-label {
       overflow: hidden;
@@ -4184,67 +4176,63 @@ ul.tree {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap; }
-  /* line 113, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 115, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item.loading,
   .search-result-item.loading {
     pointer-events: none; }
-    /* line 115, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 117, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.loading .label,
     .search-result-item.loading .label {
       opacity: 0.5; }
-      /* line 117, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 119, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item.loading .label .title-label,
       .search-result-item.loading .label .title-label {
         font-style: italic; }
-    /* line 121, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 123, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.loading .wait-spinner,
     .search-result-item.loading .wait-spinner {
       margin-left: 14px; }
-  /* line 126, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 128, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item.selected,
   .search-result-item.selected {
-    background: #005177;
+    background: #1ac6ff;
     color: #fff; }
-    /* line 130, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 131, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.selected .view-control,
     .search-result-item.selected .view-control {
-      color: #0099cc; }
-    /* line 133, ../../../../general/res/sass/tree/_tree.scss */
+      color: #fff; }
+    /* line 134, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.selected .label .type-icon,
     .search-result-item.selected .label .type-icon {
       color: #fff; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 141, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 142, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item:not(.selected):hover,
     .search-result-item:not(.selected):hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: #999999; }
-      /* line 144, ../../../../general/res/sass/tree/_tree.scss */
-      .tree-item:not(.selected):hover .context-trigger,
-      .search-result-item:not(.selected):hover .context-trigger {
-        display: block; }
-      /* line 147, ../../../../general/res/sass/tree/_tree.scss */
+      background: rgba(102, 102, 102, 0.1);
+      color: #333333; }
+      /* line 148, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item:not(.selected):hover .icon,
       .search-result-item:not(.selected):hover .icon {
-        color: #33ccff; } }
-  /* line 154, ../../../../general/res/sass/tree/_tree.scss */
+        color: #0099cc; } }
+  /* line 155, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item:not(.loading),
   .search-result-item:not(.loading) {
     cursor: pointer; }
-  /* line 158, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 159, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item .context-trigger,
   .search-result-item .context-trigger {
     top: -1px;
     position: absolute;
     right: 3px; }
-    /* line 164, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 165, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item .context-trigger .invoke-menu,
     .search-result-item .context-trigger .invoke-menu {
       font-size: 0.75em;
       height: 0.9rem;
       line-height: 0.9rem; }
 
-/* line 173, ../../../../general/res/sass/tree/_tree.scss */
+/* line 174, ../../../../general/res/sass/tree/_tree.scss */
 .tree-item .label {
   left: 15px; }
 
@@ -5864,7 +5852,7 @@ table {
       color: #fff; }
   /* line 135, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-thumb-item.selected {
-    background: #005177; }
+    background: #0099cc; }
     /* line 137, ../../../../general/res/sass/features/_imagery.scss */
     .l-image-thumb-item.selected .l-date,
     .l-image-thumb-item.selected .l-time {
@@ -5969,3 +5957,6 @@ table {
   /* line 26, ../sass/_mixins.scss */
   .s-btn.major .icon, .major.s-menu .icon, .overlay .bottom-bar .s-btn.major .icon, .overlay .bottom-bar .major.s-menu .icon {
     color: white; }
+  /* line 6, ../sass/_controls.scss */
+  .s-btn.major .title-label, .major.s-menu .title-label, .overlay .bottom-bar .s-btn.major .title-label, .overlay .bottom-bar .major.s-menu .title-label {
+    text-transform: uppercase; }
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index c399a474df..a337d4b3cc 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -3,14 +3,16 @@ $colorBodyBg: #fff;
 $colorBodyFg: #666;
 $colorFooterBg: #000;
 $colorKey: #0099cc;
-$colorKeySelectedBg: #005177;
+$colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
+$contrastRatioPercent: 30%;
 
-$contrastRatio: 25%;
-$colorBtnBg: pullForward($colorBodyBg, $contrastRatio);
-$colorBtnFg: $colorBodyBg;
+// Buttons
+$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
+$colorBtnFg: $colorBodyBg; //pullForward($colorBodyFg, $contrastRatioPercent);
 $colorBtnIcon: $colorBtnFg;
-$colorInvokeMenu: #fff;
+$colorInvokeMenu: #000;
+$contrastInvokeMenuPercent: 50%;
 
 $colorAlt1: #ffc700;
 $colorAlert: #ff3c00;
@@ -47,7 +49,7 @@ $colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
 $colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
-$colorOvrBg: $colorBodyBg;
+$colorOvrBg: pullForward($colorBodyBg, 10%);
 $colorOvrFg: $colorBodyFg;
 // Items
 $colorItemBase: lighten($colorBodyBg, 5%);
@@ -62,7 +64,18 @@ $tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
 $tabularColorHeaderBorder: $colorBodyBg;
 // Tree
 $colorItemTreeIcon: $colorKey;
-$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
-$colorItemTreeVCHover: $colorAlt1;
+$colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
+$colorItemTreeVCHover: $colorKey;
+$colorItemTreeFg: $colorBodyFg;
+$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
+$colorItemTreeSelectedFg: $colorBodyBg;
+$colorItemTreeVC: $colorBodyFg;
+$colorItemTreeSelectedVC: $colorBodyBg;
+$shdwItemTreeIcon: none;
 // Scrollbar
-$scrollbarTrackColorBg: rgba(#000, 0.4);
\ No newline at end of file
+$scrollbarTrackColorBg: rgba(#000, 0.4);
+// Splitter
+$splitterShdw: none;
+$colorSplitterInterior: $colorBodyBg;
+$colorSplitterHover: $colorKey;
+$colorGrippyInteriorHover: $colorBodyBg;
\ No newline at end of file
diff --git a/platform/commonUI/themes/snow/res/sass/_controls.scss b/platform/commonUI/themes/snow/res/sass/_controls.scss
index 08f52b64f5..e06fbf1046 100644
--- a/platform/commonUI/themes/snow/res/sass/_controls.scss
+++ b/platform/commonUI/themes/snow/res/sass/_controls.scss
@@ -1,7 +1,10 @@
 .s-btn {
-    &.major {
-        $bg: $colorKey;
-        $fg: lighten($bg, 70%);
-        @include btnSubtle($bg, $fg, $fg, 0);
-    }
+	&.major {
+		$bg: $colorKey;
+		$fg: lighten($bg, 70%);
+		@include btnSubtle($bg, $fg, $fg, 0);
+		.title-label {
+			text-transform: uppercase;
+		}
+	}
 }
\ No newline at end of file
diff --git a/platform/commonUI/themes/snow/res/sass/_mixins.scss b/platform/commonUI/themes/snow/res/sass/_mixins.scss
index 404ddbdf5d..5da0a0d4f9 100644
--- a/platform/commonUI/themes/snow/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/snow/res/sass/_mixins.scss
@@ -1,7 +1,7 @@
-@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false, $contrastRatio: 20%) {
+@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false, $contrastRatioPercent: 20%) {
     $hovRatio: 5%;
-    $bgBase: $bg; //pullForward($bg, $contrastRatio);
-    $fgBase: $fg; //pushBack($bg, $contrastRatio);
+    $bgBase: $bg; //pullForward($bg, $contrastRatioPercent);
+    $fgBase: $fg; //pushBack($bg, $contrastRatioPercent);
 
     background-color: $bgBase;
     @include border-radius($controlCr);
@@ -18,7 +18,7 @@
     }
 }
 
-@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorBtnIcon, $contrastRatio: 20%) {
+@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorBtnIcon, $contrastRatioPercent: 20%) {
     // $ic: Icon color
     @include border-radius($controlCr);
     @include containerSubtle($bg, $fg, true, 30%);

From 86deec6364b613e5b2b2aa3045cd63dbf995bf7d Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 4 Sep 2015 18:06:18 -0700
Subject: [PATCH 198/266] [Frontend] IN-PROGRESS Theme changes continuing

open #95
Grid items;
---
 .../commonUI/general/res/sass/_mixins.scss    |  51 +----
 .../general/res/sass/items/_item.scss         |  23 +--
 .../espresso/res/css/theme-espresso.css       | 184 ++++++++++--------
 .../themes/espresso/res/sass/_constants.scss  |  13 +-
 .../themes/espresso/res/sass/_mixins.scss     |  45 +++++
 .../themes/snow/res/css/theme-snow.css        |  75 +++----
 .../themes/snow/res/sass/_constants.scss      |  11 +-
 7 files changed, 218 insertions(+), 184 deletions(-)

diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index a5b6834187..c071f515b3 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -145,32 +145,6 @@
     background-repeat: $repeatDir;
 }
 
-@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
-    $ltnRatio: 7%;
-    $gradRatio: 5%;
-    $hovRatio: 7%;
-    $bgBase: $bg; //pullForward($bg, $ltnRatio);
-    $fgBase: $fg; // pullForward($fg, $ltnRatio);
-    $gradC1: lighten($bgBase, $gradRatio); // Container should be lighter higher up
-    $gradC2: $bgBase;
-    $cInvokeBase: #fff;
-
-    @include background-image(linear-gradient($gradC1, $gradC2));
-    @include border-radius($controlCr);
-    @include box-sizing(border-box);
-    @include boxShdwSubtle();
-    border: none;
-    //border-top: 1px solid lighten($gradC1, 2%);
-    color: $fg;
-    display: inline-block;
-    @if $hover == true {
-        &:not(.disabled):hover {
-            @include background-image(linear-gradient(pullForward($gradC1, $hovRatio), pullForward($gradC2, $hovRatio)));
-            color: pullForward($fgBase, $hovRatio);
-        }
-    }
-}
-
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
     $b: 1px solid lighten($bg, 30%);
     @include border-radius(2px);
@@ -210,25 +184,6 @@
     }
 }
 
-@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorKey) {
-	// $ic: Icon color
-    @include border-radius($controlCr);
-    @include containerSubtle($bg, $fg, true);
-    @include text-shadow(rgba(black, 0.3) 0 1px 1px);
-	.icon {
-		color: $ic;
-	}
-	&:not(.disabled) {
-		&:not(.paused) {
-			&:hover {
-				.icon {
-					color: lighten($ic, $ltGamma);
-				}
-			}
-		}
-	}
-}
-
 @mixin boxIncised($sVal: 0.6) {
     @include box-shadow(inset rgba(black, $sVal) 0 1px 5px);
 }
@@ -267,6 +222,12 @@
     @include background-image(linear-gradient($deg, rgba($c, $a0), rgba($c, $a1) 100%));
 }
 
+@mixin txtShdw($sVal) {
+	@if $sVal != 'none' {
+		@include text-shadow($sVal);
+	}
+}
+
 @mixin txtShdwSubtle($sVal: 0.1) {
 	@if $sVal != 'none' {
 	    @include text-shadow(rgba(black, $sVal) 0 1px 2px);
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 55c37b2884..fdf59c2b9c 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -33,7 +33,8 @@
             $iconMargin: 40px;
             $iconD: ($d - ($iconMargin * 2)) * 0.85;
             $transTime: 200ms;
-            @include btnSubtle($colorItemBase);
+            //@include btnSubtle($colorItemBg);
+            @include btnSubtle($colorItemBg, $colorItemFg, $colorItemIcon);
             box-sizing: border-box;
             cursor: pointer;
             float: left;
@@ -44,7 +45,7 @@
             position: relative;
             &:hover .item-main {
 	            .item-type {
-		            color: lighten($colorKey, 10%) !important;
+		            color: lighten($colorKey, 10%);
                     .l-icon-link {
                         color: $colorIconLink;
                     }
@@ -62,6 +63,7 @@
             .bar {
                 &.top-bar {
                     bottom: auto;
+	                color: $colorItemSubIcons;
                     height: $ueBrowseGridItemTopBarH;
                     line-height: $ueBrowseGridItemTopBarH;
                     text-align: right;
@@ -85,14 +87,14 @@
             .item-main {
 	            $h: $ueBrowseGridItemLg;
 	            $lh: $h * 0.8;
-                //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH;
+                //top: $ueBrowseGridItemTopBarH; bottom: $ueBrowseGridItemBottomBarH; //
                 line-height: $lh;
 	            z-index: 1;
                 .item-type {
                     //@include trans-prop-nice("color", $transTime);
                     @include absPosDefault($iconMargin, false);
                     //@include test(red);
-                    //color: $colorItemFg;
+                    color: $colorItemIcon;
                     text-align: center;
                     font-size: $iconD * 0.95; //6em;
                     line-height: $iconD;
@@ -102,7 +104,6 @@
                     //line-height: $lh;
                     .l-icon-link {
                         // When the link icon is in the item-type icon holder
-                        //color: darken($colorIconLink, 25%);
                         color: $colorIconLink;
                         height: auto;
                         line-height: 100%;
@@ -117,27 +118,27 @@
                     //@include test();
                     @include trans-prop-nice("opacity", $transTime);
                     opacity: 0;
-	                //display: none;
+	                color: $colorItemOpenIcon;
                     font-size: 3em;
-                    //line-height: $lh;
                     left: auto; width: 50px;
                     pointer-events: none;
                     text-align: right;
                 }
             }
             .title {
-	            @include txtShdwSubtle();
+	            @include txtShdw($shdwItemText);
                 @include ellipsize();
-                color: lighten($colorBodyFg, 20%);
+                color: $colorItemFg;
             }
             .details {
                 @include ellipsize();
+	            color: $colorItemFgDetails;
                 font-size: 0.8em;
             }
 	        &.selected {
-		        $cfg: lighten($colorItemSelected, 35%);
+		        $cfg: lighten($colorItemBgSelected, 35%);
 		        $cfgh: lighten($cfg, 30%);
-		        @include btnSubtle($colorItemSelected);
+		        @include btnSubtle($colorItemBgSelected);
 		        color: $cfg;
 		        .item-type, .top-bar .icon:not(.alert) { color: $cfg }
 		        .item-main .item-open { color: $cfg }
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index cb6e719737..f9cca25112 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -954,7 +954,7 @@ mct-container {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 185, ../../../../general/res/sass/_mixins.scss */
+    /* line 159, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -978,7 +978,7 @@ mct-container {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 207, ../../../../general/res/sass/_mixins.scss */
+    /* line 181, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -1008,7 +1008,7 @@ mct-container {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 185, ../../../../general/res/sass/_mixins.scss */
+  /* line 159, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1032,7 +1032,7 @@ mct-container {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 207, ../../../../general/res/sass/_mixins.scss */
+  /* line 181, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1375,7 +1375,7 @@ mct-container {
     color: #999;
     display: inline-block;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-    /* line 167, ../../../../general/res/sass/_mixins.scss */
+    /* line 20, ../sass/_mixins.scss */
     .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -1384,10 +1384,10 @@ mct-container {
       background-image: -webkit-linear-gradient(#636363, #575757);
       background-image: linear-gradient(#636363, #575757);
       color: #ababab; }
-    /* line 218, ../../../../general/res/sass/_mixins.scss */
+    /* line 32, ../sass/_mixins.scss */
     .s-btn:not(.major) .icon, .s-menu:not(.major) .icon {
       color: #0099cc; }
-    /* line 224, ../../../../general/res/sass/_mixins.scss */
+    /* line 38, ../sass/_mixins.scss */
     .s-btn:not(.major):not(.disabled):not(.paused):hover .icon, .s-menu:not(.major):not(.disabled):not(.paused):hover .icon {
       color: #33ccff; }
   /* line 91, ../../../../general/res/sass/controls/_buttons.scss */
@@ -1414,7 +1414,7 @@ mct-container {
     color: white;
     display: inline-block;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-    /* line 167, ../../../../general/res/sass/_mixins.scss */
+    /* line 20, ../sass/_mixins.scss */
     .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .overlay .bottom-bar .s-btn.major:not(.disabled):hover, .overlay .bottom-bar .major.s-menu:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -1423,10 +1423,10 @@ mct-container {
       background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
       background-image: linear-gradient(#0ac2ff, #00b4f0);
       color: white; }
-    /* line 218, ../../../../general/res/sass/_mixins.scss */
+    /* line 32, ../sass/_mixins.scss */
     .s-btn.major .icon, .major.s-menu .icon, .overlay .bottom-bar .s-btn.major .icon, .overlay .bottom-bar .major.s-menu .icon {
       color: white; }
-    /* line 224, ../../../../general/res/sass/_mixins.scss */
+    /* line 38, ../sass/_mixins.scss */
     .s-btn.major:not(.disabled):not(.paused):hover .icon, .major.s-menu:not(.disabled):not(.paused):hover .icon {
       color: white; }
   /* line 97, ../../../../general/res/sass/controls/_buttons.scss */
@@ -1453,7 +1453,7 @@ mct-container {
     color: #fff;
     display: inline-block;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-    /* line 167, ../../../../general/res/sass/_mixins.scss */
+    /* line 20, ../sass/_mixins.scss */
     .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlOTEwNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5ODMwMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -1462,10 +1462,10 @@ mct-container {
       background-image: -webkit-linear-gradient(#fe9105, #e98301);
       background-image: linear-gradient(#fe9105, #e98301);
       color: white; }
-    /* line 218, ../../../../general/res/sass/_mixins.scss */
+    /* line 32, ../sass/_mixins.scss */
     .s-btn.paused .icon, .paused.s-menu .icon {
       color: #fff; }
-    /* line 224, ../../../../general/res/sass/_mixins.scss */
+    /* line 38, ../sass/_mixins.scss */
     .s-btn.paused:not(.disabled):not(.paused):hover .icon, .paused.s-menu:not(.disabled):not(.paused):hover .icon {
       color: white; }
     /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
@@ -1947,7 +1947,7 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 167, ../../../../general/res/sass/_mixins.scss */
+  /* line 20, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -1956,13 +1956,13 @@ label.checkbox.custom {
     background-image: -webkit-linear-gradient(#525252, #454545);
     background-image: linear-gradient(#525252, #454545);
     color: #ababab; }
-  /* line 218, ../../../../general/res/sass/_mixins.scss */
+  /* line 32, ../sass/_mixins.scss */
   .slider .knob .icon {
     color: #0099cc; }
-  /* line 224, ../../../../general/res/sass/_mixins.scss */
+  /* line 38, ../sass/_mixins.scss */
   .slider .knob:not(.disabled):not(.paused):hover .icon {
     color: #33ccff; }
-  /* line 185, ../../../../general/res/sass/_mixins.scss */
+  /* line 159, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1986,7 +1986,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 207, ../../../../general/res/sass/_mixins.scss */
+  /* line 181, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2188,7 +2188,7 @@ label.checkbox.custom {
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 332, ../../../../general/res/sass/_mixins.scss */
+      /* line 293, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2693,7 +2693,7 @@ label.form-control.checkbox input {
   position: absolute;
   height: 100%;
   width: 100%; }
-  /* line 308, ../../../../general/res/sass/_mixins.scss */
+  /* line 269, ../../../../general/res/sass/_mixins.scss */
   .edit-main textarea.error {
     background: rgba(255, 0, 0, 0.5); }
 
@@ -2736,7 +2736,7 @@ input[type="text"] {
   color: #cccccc;
   outline: none;
   padding: 0 3px; }
-  /* line 308, ../../../../general/res/sass/_mixins.scss */
+  /* line 269, ../../../../general/res/sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
   /* line 29, ../../../../general/res/sass/forms/_text-input.scss */
@@ -2793,7 +2793,7 @@ input[type="text"] {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 167, ../../../../general/res/sass/_mixins.scss */
+  /* line 20, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):hover {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2802,10 +2802,10 @@ input[type="text"] {
     background-image: -webkit-linear-gradient(#525252, #454545);
     background-image: linear-gradient(#525252, #454545);
     color: #ababab; }
-  /* line 218, ../../../../general/res/sass/_mixins.scss */
+  /* line 32, ../sass/_mixins.scss */
   .form-control.select .icon {
     color: #0099cc; }
-  /* line 224, ../../../../general/res/sass/_mixins.scss */
+  /* line 38, ../sass/_mixins.scss */
   .form-control.select:not(.disabled):not(.paused):hover .icon {
     color: #33ccff; }
   /* line 29, ../../../../general/res/sass/forms/_selects.scss */
@@ -2884,7 +2884,7 @@ input[type="text"] {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 308, ../../../../general/res/sass/_mixins.scss */
+  /* line 269, ../../../../general/res/sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -3041,7 +3041,7 @@ span.req {
   padding: 0 3px;
   background: #3b3b3b;
   border-bottom: 1px solid #4d4d4d; }
-  /* line 308, ../../../../general/res/sass/_mixins.scss */
+  /* line 269, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -3815,7 +3815,7 @@ span.req {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
-      color: #737373;
+      color: #bfbfbf;
       height: 17px;
       width: 17px;
       line-height: 17px;
@@ -3838,13 +3838,13 @@ span.req {
         width: 100%; }
     /* line 99, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-icon {
-      color: #737373;
+      color: #bfbfbf;
       left: 3px;
       transition: visibility .15s, opacity .15s, color .2s;
       pointer-events: none; }
     /* line 119, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input:hover + div.search-icon {
-      color: #a6a6a6; }
+      color: #f2f2f2; }
     /* line 123, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .clear-icon {
       right: 22px;
@@ -3857,7 +3857,7 @@ span.req {
         opacity: 1; }
       /* line 137, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .clear-icon:hover {
-        color: #a6a6a6; }
+        color: #f2f2f2; }
     /* line 142, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .menu-icon {
       font-size: 0.8em;
@@ -3866,7 +3866,7 @@ span.req {
       text-align: right; }
       /* line 148, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .menu-icon:hover {
-        color: #a6a6a6; }
+        color: #f2f2f2; }
     /* line 153, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-menu-holder {
       float: right;
@@ -4076,7 +4076,7 @@ span.req {
     line-height: 30px;
     margin-left: 5px;
     padding: 0 15px; }
-    /* line 167, ../../../../general/res/sass/_mixins.scss */
+    /* line 20, ../sass/_mixins.scss */
     .overlay .bottom-bar .s-btn:not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc4Nzg3OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZiNmI2YiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -4156,21 +4156,25 @@ span.req {
 /* line 23, ../../../../general/res/sass/tree/_tree.scss */
 ul.tree {
   margin: 0;
-  padding: 0; }
-  /* line 332, ../../../../general/res/sass/_mixins.scss */
+  padding: 0;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none; }
+  /* line 293, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
     padding: 0; }
-  /* line 25, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 26, ../../../../general/res/sass/tree/_tree.scss */
   ul.tree li {
     display: block;
     position: relative; }
-  /* line 29, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 30, ../../../../general/res/sass/tree/_tree.scss */
   ul.tree ul.tree {
     margin-left: 15px; }
 
-/* line 34, ../../../../general/res/sass/tree/_tree.scss */
+/* line 35, ../../../../general/res/sass/tree/_tree.scss */
 .tree-item,
 .search-result-item {
   -moz-box-sizing: border-box;
@@ -4189,7 +4193,7 @@ ul.tree {
   line-height: 1.5rem;
   margin-bottom: 3px;
   position: relative; }
-  /* line 47, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 48, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item .view-control,
   .search-result-item .view-control {
     color: rgba(255, 255, 255, 0.3);
@@ -4198,11 +4202,11 @@ ul.tree {
     font-size: 0.75em;
     width: 10px; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 56, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 57, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .view-control:hover,
       .search-result-item .view-control:hover {
-        color: #ffc700; } }
-  /* line 62, ../../../../general/res/sass/tree/_tree.scss */
+        color: #ffc700 !important; } }
+  /* line 63, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item .label,
   .search-result-item .label {
     display: block;
@@ -4215,7 +4219,7 @@ ul.tree {
     width: auto;
     height: auto;
     line-height: 1.5rem; }
-    /* line 70, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 71, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item .label .type-icon,
     .search-result-item .label .type-icon {
       text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px;
@@ -4229,14 +4233,14 @@ ul.tree {
       line-height: 100%;
       right: auto;
       width: 16px; }
-      /* line 83, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 84, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
       .search-result-item .label .type-icon .icon.l-icon-link,
       .search-result-item .label .type-icon .icon.l-icon-alert {
         text-shadow: black 0 1px 2px;
         position: absolute;
         z-index: 2; }
-      /* line 89, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 90, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .label .type-icon .icon.l-icon-alert,
       .search-result-item .label .type-icon .icon.l-icon-alert {
         color: #ff3c00;
@@ -4246,7 +4250,7 @@ ul.tree {
         width: 8px;
         top: 1px;
         right: -2px; }
-      /* line 95, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 96, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item .label .type-icon .icon.l-icon-link,
       .search-result-item .label .type-icon .icon.l-icon-link {
         color: #49dedb;
@@ -4256,7 +4260,7 @@ ul.tree {
         width: 8px;
         left: -3px;
         bottom: 0px; }
-    /* line 103, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 104, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item .label .title-label,
     .search-result-item .label .title-label {
       overflow: hidden;
@@ -4272,59 +4276,63 @@ ul.tree {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap; }
-  /* line 114, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 115, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item.loading,
   .search-result-item.loading {
     pointer-events: none; }
-    /* line 116, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 117, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.loading .label,
     .search-result-item.loading .label {
       opacity: 0.5; }
-      /* line 118, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 119, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item.loading .label .title-label,
       .search-result-item.loading .label .title-label {
         font-style: italic; }
-    /* line 122, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 123, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.loading .wait-spinner,
     .search-result-item.loading .wait-spinner {
       margin-left: 14px; }
-  /* line 127, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 128, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item.selected,
   .search-result-item.selected {
     background: #006080;
     color: #cccccc; }
-    /* line 130, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 131, ../../../../general/res/sass/tree/_tree.scss */
+    .tree-item.selected .view-control,
+    .search-result-item.selected .view-control {
+      color: rgba(255, 255, 255, 0.3); }
+    /* line 134, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.selected .label .type-icon,
     .search-result-item.selected .label .type-icon {
       color: #cccccc; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 138, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 142, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item:not(.selected):hover,
     .search-result-item:not(.selected):hover {
       background: rgba(153, 153, 153, 0.1);
       color: #cccccc; }
-      /* line 144, ../../../../general/res/sass/tree/_tree.scss */
+      /* line 148, ../../../../general/res/sass/tree/_tree.scss */
       .tree-item:not(.selected):hover .icon,
       .search-result-item:not(.selected):hover .icon {
         color: #33ccff; } }
-  /* line 151, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 155, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item:not(.loading),
   .search-result-item:not(.loading) {
     cursor: pointer; }
-  /* line 155, ../../../../general/res/sass/tree/_tree.scss */
+  /* line 159, ../../../../general/res/sass/tree/_tree.scss */
   .tree-item .context-trigger,
   .search-result-item .context-trigger {
     top: -1px;
     position: absolute;
     right: 3px; }
-    /* line 161, ../../../../general/res/sass/tree/_tree.scss */
+    /* line 165, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item .context-trigger .invoke-menu,
     .search-result-item .context-trigger .invoke-menu {
       font-size: 0.75em;
       height: 0.9rem;
       line-height: 0.9rem; }
 
-/* line 170, ../../../../general/res/sass/tree/_tree.scss */
+/* line 174, ../../../../general/res/sass/tree/_tree.scss */
 .tree-item .label {
   left: 15px; }
 
@@ -5408,7 +5416,7 @@ table {
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border: none;
-    color: #999;
+    color: #bfbfbf;
     display: inline-block;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
     box-sizing: border-box;
@@ -5419,7 +5427,7 @@ table {
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 167, ../../../../general/res/sass/_mixins.scss */
+    /* line 20, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -5427,53 +5435,54 @@ table {
       background-image: -moz-linear-gradient(#5e5e5e, #525252);
       background-image: -webkit-linear-gradient(#5e5e5e, #525252);
       background-image: linear-gradient(#5e5e5e, #525252);
-      color: #ababab; }
-    /* line 218, ../../../../general/res/sass/_mixins.scss */
+      color: #d1d1d1; }
+    /* line 32, ../sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
       color: #0099cc; }
-    /* line 224, ../../../../general/res/sass/_mixins.scss */
+    /* line 38, ../sass/_mixins.scss */
     .items-holder .item.grid-item:not(.disabled):not(.paused):hover .icon {
       color: #33ccff; }
-    /* line 46, ../../../../general/res/sass/items/_item.scss */
+    /* line 47, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
-      color: deepskyblue !important; }
-      /* line 48, ../../../../general/res/sass/items/_item.scss */
+      color: deepskyblue; }
+      /* line 49, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
         color: #49dedb; }
-    /* line 52, ../../../../general/res/sass/items/_item.scss */
+    /* line 53, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-open {
       opacity: 1; }
-    /* line 57, ../../../../general/res/sass/items/_item.scss */
+    /* line 58, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
       top: 10px;
       right: 10px;
       bottom: 10px;
       left: 10px; }
-    /* line 63, ../../../../general/res/sass/items/_item.scss */
+    /* line 64, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar {
       bottom: auto;
+      color: #8c8c8c;
       height: 20px;
       line-height: 20px;
       text-align: right;
       z-index: 5; }
-      /* line 69, ../../../../general/res/sass/items/_item.scss */
+      /* line 71, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
         width: auto; }
-        /* line 71, ../../../../general/res/sass/items/_item.scss */
+        /* line 73, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
           margin-left: 3px; }
-          /* line 73, ../../../../general/res/sass/items/_item.scss */
+          /* line 75, ../../../../general/res/sass/items/_item.scss */
           .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
             color: #49dedb; }
-    /* line 79, ../../../../general/res/sass/items/_item.scss */
+    /* line 81, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
       top: auto;
       line-height: 110%; }
-    /* line 85, ../../../../general/res/sass/items/_item.scss */
+    /* line 87, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 91, ../../../../general/res/sass/items/_item.scss */
+      /* line 93, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         overflow: false;
         position: absolute;
@@ -5483,13 +5492,14 @@ table {
         left: 40px;
         width: auto;
         height: auto;
+        color: #0099cc;
         text-align: center;
         font-size: 96.9px;
         line-height: 102px;
         bottom: auto;
         height: 102px;
         top: 30px; }
-        /* line 103, ../../../../general/res/sass/items/_item.scss */
+        /* line 105, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .item-main .item-type .l-icon-link {
           color: #49dedb;
           height: auto;
@@ -5499,7 +5509,7 @@ table {
           left: 0px;
           bottom: 10px;
           z-index: 2; }
-      /* line 116, ../../../../general/res/sass/items/_item.scss */
+      /* line 117, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -5514,6 +5524,7 @@ table {
         -webkit-transition-timing-function: ease-in-out;
         transition-timing-function: ease-in-out;
         opacity: 0;
+        color: #8c8c8c;
         font-size: 3em;
         left: auto;
         width: 50px;
@@ -5525,14 +5536,15 @@ table {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      color: #cccccc; }
+      color: #bfbfbf; }
     /* line 133, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      color: #8c8c8c;
       font-size: 0.8em; }
-    /* line 137, ../../../../general/res/sass/items/_item.scss */
+    /* line 138, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
@@ -5557,7 +5569,7 @@ table {
       display: inline-block;
       text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
       color: #80dfff; }
-      /* line 167, ../../../../general/res/sass/_mixins.scss */
+      /* line 20, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):hover {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
@@ -5566,22 +5578,22 @@ table {
         background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
         background-image: linear-gradient(#0ac2ff, #00b4f0);
         color: #ababab; }
-      /* line 218, ../../../../general/res/sass/_mixins.scss */
+      /* line 32, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
         color: #0099cc; }
-      /* line 224, ../../../../general/res/sass/_mixins.scss */
+      /* line 38, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected:not(.disabled):not(.paused):hover .icon {
         color: #33ccff; }
-      /* line 142, ../../../../general/res/sass/items/_item.scss */
+      /* line 143, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 143, ../../../../general/res/sass/items/_item.scss */
+      /* line 144, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 144, ../../../../general/res/sass/items/_item.scss */
+      /* line 145, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 146, ../../../../general/res/sass/items/_item.scss */
+      /* line 147, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 28fb94f121..f3e83d7c4c 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -50,10 +50,17 @@ $colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
 $colorOvrBlocker: rgba(black, 0.7);
 $colorOvrBg: pullForward($colorBodyBg, 10%);
 $colorOvrFg: $colorBodyFg;
+
 // Items
-$colorItemBase: lighten($colorBodyBg, 5%);
-$colorItemFg: lighten($colorItemBase, 20%);
-$colorItemSelected: $colorKey;
+$colorItemBg: lighten($colorBodyBg, 5%);
+$colorItemFg: lighten($colorItemBg, 50%);
+$colorItemFgDetails: lighten($colorItemBg, 30%);
+$colorItemIcon: $colorKey; //pullForward($colorItemFg, 20%);
+$colorItemSubIcons: $colorItemFgDetails;
+$colorItemOpenIcon: $colorItemFgDetails;
+$shdwItemText: rgba(black, 0.1) 0 1px 2px;
+$colorItemBgSelected: $colorKey;
+
 // Tabular
 $tabularColorBorder: rgba(white, 0.1);
 $tabularColorBodyBg: darken($colorBodyBg, 10%);
diff --git a/platform/commonUI/themes/espresso/res/sass/_mixins.scss b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
index 37a056def6..1d4c34473e 100644
--- a/platform/commonUI/themes/espresso/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
@@ -1,3 +1,48 @@
+@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
+	$ltnRatio: 7%;
+	$gradRatio: 5%;
+	$hovRatio: 7%;
+	$bgBase: $bg; //pullForward($bg, $ltnRatio);
+	$fgBase: $fg; // pullForward($fg, $ltnRatio);
+	$gradC1: lighten($bgBase, $gradRatio); // Container should be lighter higher up
+	$gradC2: $bgBase;
+	$cInvokeBase: #fff;
+
+	@include background-image(linear-gradient($gradC1, $gradC2));
+	@include border-radius($controlCr);
+	@include box-sizing(border-box);
+	@include boxShdwSubtle();
+	border: none;
+	//border-top: 1px solid lighten($gradC1, 2%);
+	color: $fg;
+	display: inline-block;
+	@if $hover == true {
+		&:not(.disabled):hover {
+			@include background-image(linear-gradient(pullForward($gradC1, $hovRatio), pullForward($gradC2, $hovRatio)));
+			color: pullForward($fgBase, $hovRatio);
+		}
+	}
+}
+
+@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorKey) {
+	// $ic: Icon color
+	@include border-radius($controlCr);
+	@include containerSubtle($bg, $fg, true);
+	@include text-shadow(rgba(black, 0.3) 0 1px 1px);
+	.icon {
+		color: $ic;
+	}
+	&:not(.disabled) {
+		&:not(.paused) {
+			&:hover {
+				.icon {
+					color: lighten($ic, $ltGamma);
+				}
+			}
+		}
+	}
+}
+
 @function pullForward($c: $colorBodyBg, $p: 20%) {
     // For dark interfaces, lighter things come forward - opposite for light interfaces
     @return lighten($c, $p);
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 1227a93b0a..df52a77fff 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -951,7 +951,7 @@ mct-container {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 185, ../../../../general/res/sass/_mixins.scss */
+    /* line 159, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -975,7 +975,7 @@ mct-container {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 207, ../../../../general/res/sass/_mixins.scss */
+    /* line 181, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -1005,7 +1005,7 @@ mct-container {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 185, ../../../../general/res/sass/_mixins.scss */
+  /* line 159, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1029,7 +1029,7 @@ mct-container {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 207, ../../../../general/res/sass/_mixins.scss */
+  /* line 181, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1919,7 +1919,7 @@ label.checkbox.custom {
   /* line 26, ../sass/_mixins.scss */
   .slider .knob .icon {
     color: #fff; }
-  /* line 185, ../../../../general/res/sass/_mixins.scss */
+  /* line 159, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1943,7 +1943,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 207, ../../../../general/res/sass/_mixins.scss */
+  /* line 181, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2135,7 +2135,7 @@ label.checkbox.custom {
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 332, ../../../../general/res/sass/_mixins.scss */
+      /* line 293, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2630,7 +2630,7 @@ label.form-control.checkbox input {
   position: absolute;
   height: 100%;
   width: 100%; }
-  /* line 308, ../../../../general/res/sass/_mixins.scss */
+  /* line 269, ../../../../general/res/sass/_mixins.scss */
   .edit-main textarea.error {
     background: rgba(255, 0, 0, 0.5); }
 
@@ -2673,7 +2673,7 @@ input[type="text"] {
   color: #999999;
   outline: none;
   padding: 0 3px; }
-  /* line 308, ../../../../general/res/sass/_mixins.scss */
+  /* line 269, ../../../../general/res/sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
   /* line 29, ../../../../general/res/sass/forms/_text-input.scss */
@@ -2811,7 +2811,7 @@ input[type="text"] {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 308, ../../../../general/res/sass/_mixins.scss */
+  /* line 269, ../../../../general/res/sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -2968,7 +2968,7 @@ span.req {
   padding: 0 3px;
   background: white;
   border-bottom: 1px solid white; }
-  /* line 308, ../../../../general/res/sass/_mixins.scss */
+  /* line 269, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -3742,7 +3742,7 @@ span.req {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
-      color: white;
+      color: #fff;
       height: 17px;
       width: 17px;
       line-height: 17px;
@@ -3765,7 +3765,7 @@ span.req {
         width: 100%; }
     /* line 99, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-icon {
-      color: white;
+      color: #fff;
       left: 3px;
       transition: visibility .15s, opacity .15s, color .2s;
       pointer-events: none; }
@@ -4062,7 +4062,7 @@ ul.tree {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none; }
-  /* line 332, ../../../../general/res/sass/_mixins.scss */
+  /* line 293, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -5300,7 +5300,7 @@ table {
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
-    background-color: white;
+    background-color: #b3b3b3;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -5332,46 +5332,47 @@ table {
     /* line 26, ../sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
       color: #fff; }
-    /* line 46, ../../../../general/res/sass/items/_item.scss */
+    /* line 47, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
-      color: deepskyblue !important; }
-      /* line 48, ../../../../general/res/sass/items/_item.scss */
+      color: deepskyblue; }
+      /* line 49, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
         color: #49dedb; }
-    /* line 52, ../../../../general/res/sass/items/_item.scss */
+    /* line 53, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-open {
       opacity: 1; }
-    /* line 57, ../../../../general/res/sass/items/_item.scss */
+    /* line 58, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
       top: 10px;
       right: 10px;
       bottom: 10px;
       left: 10px; }
-    /* line 63, ../../../../general/res/sass/items/_item.scss */
+    /* line 64, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar {
       bottom: auto;
+      color: #d9d9d9;
       height: 20px;
       line-height: 20px;
       text-align: right;
       z-index: 5; }
-      /* line 69, ../../../../general/res/sass/items/_item.scss */
+      /* line 71, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
         width: auto; }
-        /* line 71, ../../../../general/res/sass/items/_item.scss */
+        /* line 73, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
           margin-left: 3px; }
-          /* line 73, ../../../../general/res/sass/items/_item.scss */
+          /* line 75, ../../../../general/res/sass/items/_item.scss */
           .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
             color: #49dedb; }
-    /* line 79, ../../../../general/res/sass/items/_item.scss */
+    /* line 81, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
       top: auto;
       line-height: 110%; }
-    /* line 85, ../../../../general/res/sass/items/_item.scss */
+    /* line 87, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 91, ../../../../general/res/sass/items/_item.scss */
+      /* line 93, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         overflow: false;
         position: absolute;
@@ -5381,13 +5382,14 @@ table {
         left: 40px;
         width: auto;
         height: auto;
+        color: #fff;
         text-align: center;
         font-size: 96.9px;
         line-height: 102px;
         bottom: auto;
         height: 102px;
         top: 30px; }
-        /* line 103, ../../../../general/res/sass/items/_item.scss */
+        /* line 105, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .item-main .item-type .l-icon-link {
           color: #49dedb;
           height: auto;
@@ -5397,7 +5399,7 @@ table {
           left: 0px;
           bottom: 10px;
           z-index: 2; }
-      /* line 116, ../../../../general/res/sass/items/_item.scss */
+      /* line 117, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -5412,6 +5414,7 @@ table {
         -webkit-transition-timing-function: ease-in-out;
         transition-timing-function: ease-in-out;
         opacity: 0;
+        color: #d9d9d9;
         font-size: 3em;
         left: auto;
         width: 50px;
@@ -5419,18 +5422,18 @@ table {
         text-align: right; }
     /* line 128, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .title {
-      text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      color: #999999; }
+      color: #fff; }
     /* line 133, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      color: #d9d9d9;
       font-size: 0.8em; }
-    /* line 137, ../../../../general/res/sass/items/_item.scss */
+    /* line 138, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
@@ -5460,16 +5463,16 @@ table {
       /* line 26, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
         color: #fff; }
-      /* line 142, ../../../../general/res/sass/items/_item.scss */
+      /* line 143, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 143, ../../../../general/res/sass/items/_item.scss */
+      /* line 144, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 144, ../../../../general/res/sass/items/_item.scss */
+      /* line 145, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 146, ../../../../general/res/sass/items/_item.scss */
+      /* line 147, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index a337d4b3cc..e8c2dc4663 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -52,9 +52,14 @@ $colorOvrBlocker: rgba(black, 0.7);
 $colorOvrBg: pullForward($colorBodyBg, 10%);
 $colorOvrFg: $colorBodyFg;
 // Items
-$colorItemBase: lighten($colorBodyBg, 5%);
-$colorItemFg: lighten($colorItemBase, 20%);
-$colorItemSelected: $colorKey;
+$colorItemBg: $colorBtnBg; //pullForward($colorBodyBg, 15%);
+$colorItemFg: $colorBtnFg; //lighten($colorItemBg, 20%);
+$colorItemFgDetails: darken($colorItemFg, 15%);
+$colorItemIcon: $colorItemFg;
+$colorItemSubIcons: $colorItemFgDetails;
+$colorItemOpenIcon: $colorItemFgDetails;
+$shdwItemText: none;
+$colorItemBgSelected: $colorKey;
 // Tabular
 $tabularColorBorder: rgba(white, 0.1);
 $tabularColorBodyBg: darken($colorBodyBg, 10%);

From 4db48afab0b4f42ab790463e4ab525e08c1b79a1 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 9 Sep 2015 15:55:12 -0700
Subject: [PATCH 199/266] [Frontend] IN-PROGRESS Theme changes continuing

open #95
Mostly about the overlay and forms;
Buttons, menus, selects tweaks continued;
Initial check and tweaks in mobile;
---
 .../browse/res/templates/create/locator.html  |    2 +-
 .../commonUI/general/res/sass/_constants.scss |    1 -
 platform/commonUI/general/res/sass/_main.scss |    2 -
 .../commonUI/general/res/sass/_mixins.scss    |   36 +-
 .../general/res/sass/controls/_buttons.scss   |   16 +-
 .../general/res/sass/controls/_controls.scss  |   16 +-
 .../general/res/sass/controls/_menus.scss     |   36 +-
 .../general/res/sass/forms/_elems.scss        |   39 +-
 .../general/res/sass/forms/_selects.scss      |   25 +-
 .../general/res/sass/forms/_text-input.scss   |   32 -
 .../general/res/sass/forms/_textarea.scss     |   28 -
 .../general/res/sass/mobile/_constants.scss   |    3 -
 .../general/res/sass/overlay/_overlay.scss    |   20 +-
 .../res/sass/user-environ/_top-bar.scss       |    4 +-
 .../espresso/res/css/theme-espresso.css       | 1067 +++++++-------
 .../themes/espresso/res/sass/_constants.scss  |   41 +-
 .../themes/espresso/res/sass/_mixins.scss     |   28 +-
 .../themes/snow/res/css/theme-snow.css        | 1243 ++++++++---------
 .../themes/snow/res/sass/_constants.scss      |   52 +-
 .../themes/snow/res/sass/_controls.scss       |    3 -
 .../themes/snow/res/sass/_mixins.scss         |   31 +-
 21 files changed, 1295 insertions(+), 1430 deletions(-)
 delete mode 100644 platform/commonUI/general/res/sass/forms/_text-input.scss
 delete mode 100644 platform/commonUI/general/res/sass/forms/_textarea.scss

diff --git a/platform/commonUI/browse/res/templates/create/locator.html b/platform/commonUI/browse/res/templates/create/locator.html
index 790096af5b..4b40f37885 100644
--- a/platform/commonUI/browse/res/templates/create/locator.html
+++ b/platform/commonUI/browse/res/templates/create/locator.html
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="LocatorController" class="selector-list">
-    <div>
+    <div class="wrapper">
         <mct-representation key="'tree'"
                             mct-object="rootObject"
                             ng-model="treeModel">
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 37ccbebe6b..1c2d9eddc0 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -97,7 +97,6 @@ $formTBPad: $interiorMargin;
 $formLRPad: $interiorMargin;
 $menuLineH: 1.5rem;
 $menuLineHPx: 24px;
-$scrollbarTrackSize: 10px;
 $btnStdH: 25px;
 $btnToolbarH: $btnStdH;
 
diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss
index 4bc28019fe..80023f55ac 100644
--- a/platform/commonUI/general/res/sass/_main.scss
+++ b/platform/commonUI/general/res/sass/_main.scss
@@ -44,8 +44,6 @@
 
 /********************************* FORMS */
 @import "forms/elems";
-@import "forms/textarea";
-@import "forms/text-input";
 @import "forms/selects";
 @import "forms/channel-selector";
 @import "forms/datetime";
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index c071f515b3..1987619527 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -146,13 +146,13 @@
 }
 
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
-    $b: 1px solid lighten($bg, 30%);
+    //$b: 1px solid lighten($bg, 30%);
     @include border-radius(2px);
     @include box-sizing(border-box);
     @include boxIncised(0.7);
     background-color: $bg;
-    border-bottom: $b;
-    border-right: $b;
+    //border-bottom: $b;
+    //border-right: $b;
 }
 
 @mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
@@ -184,8 +184,8 @@
     }
 }
 
-@mixin boxIncised($sVal: 0.6) {
-    @include box-shadow(inset rgba(black, $sVal) 0 1px 5px);
+@mixin boxIncised($sVal: 0.6, $inset: 5px) {
+    @include box-shadow(inset rgba(black, $sVal) 0 1px $inset);
 }
 
 @mixin boxOutline($c: lighten($colorBodyBg, 20%)) {
@@ -257,6 +257,30 @@
 }
 
 /*********************************************** FORM ELEMENTS */
+
+@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
+	@include appearance(none);
+	@include border-radius($controlCr);
+	@include box-sizing(border-box);
+	@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
+	background: $bg;
+	border: none;
+	color: $fg;
+	outline: none;
+	&.error {
+		background: rgba(red, 0.5);
+	}
+}
+
+@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
+	@include input-base($bg, $fg);
+	padding: 0 $interiorMarginSm;
+}
+
+
+
+/*
+
 @mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
     @include appearance(none);
     @include border-radius($controlCr);
@@ -275,6 +299,8 @@
     @include input-base($bg, $fg);
     padding: 0 $interiorMarginSm;
 }
+*/
+
 
 @mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
     @include input-base($bg, $fg);
diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
index 6079380d84..5d97d9b0e0 100644
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -80,22 +80,24 @@ $pad: $interiorMargin * $baseRatio;
 	&.sm {
 		padding: 0 $pad / $baseRatio;
 	}
+
 	&.vsm {
 		padding: 0 ($pad / $baseRatio) / 2;
 	}
 
-	&:not(.major) {
-		@include btnSubtle($colorBtnBg, $colorBtnFg, $colorBtnIcon);
+	&.major {
+		$bg: $colorBtnMajorBg;
+		$hc: lighten($bg, 10%);
+		@include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
 	}
 
-	&.major {
-		$bg: $colorKey;
-		$fg: lighten($bg, 70%);
-		@include btnSubtle($bg, $fg, $fg);
+	&:not(.major) {
+		// bg, bgHov, fg, ic
+		@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
 	}
 
 	&.paused {
-		@include btnSubtle($colorPausedBg, $colorPausedFg, $colorPausedFg);
+		@include btnSubtle($colorPausedBg, lighten($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
 		.icon:before {
 			content: "\0000EF";
 		}
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index a5102c26ea..b2f98860e9 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -349,18 +349,20 @@ label.checkbox.custom {
 	}
 
 	::-webkit-scrollbar-thumb {
-		$bg: lighten($colorBodyBg, 10%);
-		@include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px));
-		@include border-radius(1px);
+		$bg: $scrollbarThumbColor;
+		$hc: $scrollbarThumbColorHov;
+		$gr: 5%;
+		@include background-image(linear-gradient(lighten($bg, $gr), $bg 20px));
+		@include border-radius(2px);
 		@include box-sizing(border-box);
-		@include boxShdwSubtle();
-		border-top: 1px solid lighten($bg, 20%);
+		//@include boxShdwSubtle();
+		//border-top: 1px solid lighten($bg, 20%);
 		&:hover {
-			@include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px));
+			@include background-image(linear-gradient(lighten($hc, $gr), $hc 20px));
 		}
 	}
 
 	::-webkit-scrollbar-corner {
-		background: rgba(#000, 0.4);
+		background: $scrollbarTrackColorBg;
 	}
 }
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss
index 203761092f..f53cf93a84 100644
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -66,15 +66,18 @@
 
 /******************************************************** MENUS THEMSELVES */
 .menu-element {
-	$bg: lighten($colorBodyBg, 5%);
-	$bgHover: lighten($bg, 20%);
+	$bg: $colorMenuBg;
+	$fg: $colorMenuFg;
+	$ic: $colorMenuIc;
+	$bgHover: $colorMenuHov;
 	$iconColor: $colorKey;
 	cursor: pointer;
 	position: relative;
 	.menu {
 		@include border-radius($basicCr);
-		@include containerSubtle($bg);
-		@include txtShdwSubtle(0.2);
+		@include containerSubtle($bg, $fg);
+		@include boxShdw($shdwMenu);
+		@include txtShdw($shdwMenuText);
 		display: block; // set to block via jQuery
 		padding: $interiorMarginSm 0;
 		position: absolute;
@@ -84,7 +87,7 @@
 			li {
 				@include box-sizing(border-box);
 				border-top: 1px solid lighten($bg, 20%);
-				color: lighten($bg, 60%);
+				color: pullForward($bg, 60%);
 				line-height: $menuLineH;
 				padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
 				position: relative;
@@ -95,17 +98,10 @@
 				&:hover {
 					background: $bgHover;
 					color: $colorKeyFg;
-					//a {
-					//	color: $colorKeyFg;
-					//}
 					.icon {
 						color: lighten($iconColor, 20%);
 					}
 				}
-				//a {
-				//	color: lighten($bg, 60%);
-				//	display: block;
-				//}
 				.type-icon {
 					left: $interiorMargin * 2;
 				}
@@ -115,12 +111,7 @@
 
 	.context-menu,
 	.super-menu {
-		$bg: $colorMenuBg;
-		$fg: $colorMenuFg;
-		$ic: $colorMenuIc;
-		//font-size: 0.80rem;
 		pointer-events: auto;
-		@include containerSubtle($bg);
 		ul li {
 			padding-left: 25px;
 			a {
@@ -170,8 +161,7 @@
 		$h: $w - 20;
 		$plw: 50%; //$w * 0.5;
 		$prw: 50%; //$w - $plw;
-		$fg: #fff; //lighten($colorBodyFg, 40%);
-		$bgHover: $colorKey; //$bg;
+		//$fg: #fff; //lighten($colorBodyFg, 40%);
 		display: block;
 		width: $w;
 		height: $h;
@@ -203,15 +193,13 @@
 				right: 0;
 				padding: $interiorMargin * 5;
 				width: $prw;
-				.icon {
-					color: $fg;
-				}
 			}
 		}
 		.menu-item-description {
 			.desc-area {
 				&.icon {
 					$h: 150px;
+					color: $colorCreateMenuLgIcon;
 					position: relative;
 					font-size: 8em;
 					left: 0;
@@ -221,13 +209,13 @@
 					text-align: center;
 				}
 				&.title {
-					color: $fg;
+					color: $colorCreateMenuText;
 					font-size: 1.2em;
 					margin-bottom: 0.5em;
 				}
 				&.description {
 					//color: lighten($bg, 30%);
-					color: $fg;
+					color: $colorCreateMenuText;
 					font-size: 0.8em;
 					line-height: 1.5em;
 				}
diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss
index 0f430c2391..8ffdce8df8 100644
--- a/platform/commonUI/general/res/sass/forms/_elems.scss
+++ b/platform/commonUI/general/res/sass/forms/_elems.scss
@@ -21,7 +21,7 @@
  *****************************************************************************/
 .section-header {
 	@include border-radius($basicCr);
-	background: rgba(#fff, 0.1);
+	background: $colorFormSectionHeader;
 	$c: lighten($colorBodyFg, 20%);
 	//border-bottom: 1px solid rgba(#fff, 0.3);
 	color: $c;
@@ -32,6 +32,7 @@
 
 .form {
 //	@include test(orange);
+	color: $colorFormText;
 	.form-section {
 		position: relative;
 		margin-bottom: $interiorMarginLg * 2;
@@ -69,7 +70,7 @@
 		}
 
 		.value {
-			color: lighten($colorBodyFg, 20%);
+			color: $colorInputFg; //lighten($colorBodyFg, 20%);
 		}
 
 		.controls {
@@ -111,18 +112,18 @@
 
 		.selector-list {
 			// Used in create overlay to display tree view
+			@include nice-input($colorInputBg, $colorInputFg);
 			$h: 150px;
-			@include border-radius($basicCr);
-			@include box-sizing(border-box);
-			background: rgba(black, 0.2);
-			padding: $interiorMargin;
+			//@include border-radius($basicCr);
+			//@include box-sizing(border-box);
+			//background: rgba(black, 0.2);
+			//padding: $interiorMargin;
 			position: relative;
 			height: $h;
-			overflow: auto;
 //			max-width: 50%;
-			.wrapper {
+			>.wrapper {
 				$p: $interiorMargin;
-				overflow-y: auto;
+				overflow: auto;
 				position: absolute;
 				top: $p;
 				right: $p;
@@ -159,4 +160,24 @@ label.form-control.checkbox {
 		color: lighten($colorFormInvalid, 30%);
 		padding: $interiorMargin;
 	}
+}
+
+input[type="text"] {
+	@include nice-input($colorInputBg, $colorInputFg);
+	&.filter {
+		&.ng-dirty {
+			//            background: red;
+		}
+	}
+	&.numeric {
+		text-align: right;
+	}
+}
+
+textarea {
+	@include nice-textarea($colorInputBg, $colorInputFg);
+	//	font-size: 0.9em;
+	position: absolute;
+	height: 100%;
+	width: 100%;
 }
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/forms/_selects.scss b/platform/commonUI/general/res/sass/forms/_selects.scss
index f92c4eb9a1..3f283c04e7 100644
--- a/platform/commonUI/general/res/sass/forms/_selects.scss
+++ b/platform/commonUI/general/res/sass/forms/_selects.scss
@@ -19,10 +19,11 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-.form-control.select {
-	@include btnSubtle($colorBodyBg);
-	cursor: pointer;
-	display: inline-block;
+.select {
+	@include btnSubtle();
+	@extend .s-menu;
+	//cursor: pointer;
+	//display: inline-block;
 	margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
     overflow: hidden;
 	position: relative;
@@ -30,21 +31,21 @@
 		@include appearance(none);
 		@include box-sizing(border-box);
 		background: none;
-		color: $colorBodyFg;
+		color: $colorBtnFg;
 		border: none !important;
-		cursor: pointer;
-		padding: 4px 25px 2px 5px;
+		//cursor: pointer;
+		padding: 4px 25px 2px 0px;
         width: 120%;
         option {
             margin: $interiorMargin 0; // Firefox
         }
 	}
 	&:after {
-		color: $colorKey;
-		content:"v";
-		display: block;
-		font-family: 'symbolsfont';
-		pointer-events: none;
+		//color: $colorKey;
+		//content:"v";
+		//display: block;
+		//font-family: 'symbolsfont';
+		//pointer-events: none;
 		position: absolute;
 		right: $interiorMargin; top: 0;
 	}
diff --git a/platform/commonUI/general/res/sass/forms/_text-input.scss b/platform/commonUI/general/res/sass/forms/_text-input.scss
deleted file mode 100644
index f445b43aa0..0000000000
--- a/platform/commonUI/general/res/sass/forms/_text-input.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-input[type="text"] {
-	@include nice-input();
-    &.filter {
-        &.ng-dirty {
-//            background: red;
-        }
-    }
-	&.numeric {
-		text-align: right;
-	}
-}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/forms/_textarea.scss b/platform/commonUI/general/res/sass/forms/_textarea.scss
deleted file mode 100644
index 145446e933..0000000000
--- a/platform/commonUI/general/res/sass/forms/_textarea.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-.edit-main textarea {
-	@include nice-textarea();
-//	font-size: 0.9em;
-	position: absolute;
-	height: 100%;
-	width: 100%;
-}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss
index f4fe4ceaad..bd9443cc50 100644
--- a/platform/commonUI/general/res/sass/mobile/_constants.scss
+++ b/platform/commonUI/general/res/sass/mobile/_constants.scss
@@ -20,9 +20,6 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-/************************** STYLE */
-$colorMobilePaneLeft: #222;
-
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss
index 69ef092d7a..22175da777 100644
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@@ -31,7 +31,7 @@
     }
 	>.holder {
 		$i: 15%;
-		@include containerSubtle();
+		@include containerSubtle($colorOvrBg, $colorOvrFg);
 		@include border-radius($basicCr * 3);
 		color: $colorOvrFg;
 		top: $i; right: $i; bottom: $i; left: $i;
@@ -64,19 +64,21 @@
         height: $ovrFooterH;
         text-align: right;
         .s-btn {
-	        $l: 15%;
-	        @include containerSubtle(lighten($colorBodyBg, $l), lighten($colorBodyFg, $l), true);
+	        $bg: $colorOvrBtnBg;
+	        &:not(.major) {
+	            @include btnSubtle($bg, pullForward($bg, 10%), $colorOvrBtnFg, $colorOvrBtnFg);
+	        }
 	        font-size: 95%;
 	        height: $ovrFooterH;
 	        line-height: $ovrFooterH;
             margin-left: $interiorMargin;
 	        padding: 0 $interiorMargin * 3;
-	        &.major {
-		        @extend .s-btn.major;
-		        &:hover {
-			        @extend .s-btn.major:hover;
-		        }
-	        }
+	        //&.major {
+		     //   @extend .s-btn.major;
+		     //   &:hover {
+			 //       @extend .s-btn.major:hover;
+		     //   }
+	        //}
         }
     }
     .contents.l-dialog {
diff --git a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
index 7bb5ecd852..33e5ddbcaf 100644
--- a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss
@@ -28,9 +28,9 @@
 		line-height: $ueTopBarH;
     }
 	
-	.title {
+/*	.title {
 		color: #fff;
-	}
+	}*/
 	
 	.buttons-main {
 		font-size: 0.8em;
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index f9cca25112..47ac9bdafb 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -98,6 +98,27 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /*********************************************** FORM ELEMENTS */
+/*
+
+@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
+    @include appearance(none);
+    @include border-radius($controlCr);
+    @include box-sizing(border-box);
+    @include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
+    background: rgba(#fff, 0.1);
+    border: none;
+    color: lighten($fg, 20%);
+    outline: none;
+    &.error {
+        background: rgba(red, 0.5);
+    }
+}
+
+@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
+    @include input-base($bg, $fg);
+    padding: 0 $interiorMarginSm;
+}
+*/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -168,7 +189,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/************************** STYLE */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
@@ -176,6 +196,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /************************** COLORS AND SHADING */
+/********************************* MOBILE */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -375,7 +396,7 @@ mct-container {
   display: block; }
 
 /* line 98, ../../../../general/res/sass/_global.scss */
-.abs, .s-menu span.l-click-area {
+.abs, .s-menu span.l-click-area, .select span.l-click-area {
   position: absolute;
   top: 0;
   right: 0;
@@ -424,7 +445,7 @@ mct-container {
   display: none !important; }
 
 /* line 147, ../../../../general/res/sass/_global.scss */
-.paused:not(.s-btn):not(.s-menu) {
+.paused:not(.s-btn):not(.s-menu):not(.select) {
   border-color: #c56f01 !important;
   color: #c56f01 !important; }
 
@@ -454,7 +475,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 26, ../../../../general/res/sass/_about.scss */
-.l-about.abs, .s-menu span.l-about.l-click-area {
+.l-about.abs, .s-menu span.l-about.l-click-area, .select span.l-about.l-click-area {
   overflow: auto; }
 /* line 31, ../../../../general/res/sass/_about.scss */
 .l-about .l-logo-holder {
@@ -504,11 +525,11 @@ mct-container {
   .s-about .s-logo-openmctweb {
     background-image: url("../../../../general/res/images/logo-openmctweb-shdw.svg"); }
   /* line 81, ../../../../general/res/sass/_about.scss */
-  .s-about .s-btn, .s-about .s-menu {
+  .s-about .s-btn, .s-about .s-menu, .s-about .select {
     line-height: 2em; }
   /* line 85, ../../../../general/res/sass/_about.scss */
   .s-about .l-licenses-software .l-license-software {
-    border-top: 1px solid #4d4d4d;
+    border-top: 1px solid rgba(153, 153, 153, 0.1);
     padding: 0.5em 0; }
     /* line 88, ../../../../general/res/sass/_about.scss */
     .s-about .l-licenses-software .l-license-software:first-child {
@@ -545,7 +566,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 24, ../../../../general/res/sass/_text.scss */
-.abs.l-standalone, .s-menu span.l-standalone.l-click-area {
+.abs.l-standalone, .s-menu span.l-standalone.l-click-area, .select span.l-standalone.l-click-area {
   padding: 5% 20%; }
 
 /* line 29, ../../../../general/res/sass/_text.scss */
@@ -562,7 +583,7 @@ mct-container {
     margin-bottom: 1em; }
   /* line 45, ../../../../general/res/sass/_text.scss */
   .s-text h2 {
-    border-top: 1px solid #4d4d4d;
+    border-top: 1px solid rgba(153, 153, 153, 0.1);
     font-size: 1.5em;
     margin-top: 2em;
     padding-top: 1em; }
@@ -629,7 +650,7 @@ mct-container {
   display: inline-block; }
 
 /* line 55, ../../../../general/res/sass/_icons.scss */
-.s-menu .invoke-menu,
+.s-menu .invoke-menu, .select .invoke-menu,
 .icon.major .invoke-menu {
   margin-left: 3px; }
 
@@ -1224,7 +1245,7 @@ mct-container {
 /* Classes to be used for lists of properties and values */
 /* line 25, ../../../../general/res/sass/_properties.scss */
 .properties .s-row {
-  border-top: 1px solid #4d4d4d;
+  border-top: 1px solid rgba(153, 153, 153, 0.1);
   font-size: 0.8em; }
   /* line 28, ../../../../general/res/sass/_properties.scss */
   .properties .s-row:first-child {
@@ -1324,7 +1345,7 @@ mct-container {
 }*/
 /*********************************** STYLE STYLES */
 /* line 61, ../../../../general/res/sass/controls/_buttons.scss */
-.s-btn, .s-menu {
+.s-btn, .s-menu, .select {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -1339,20 +1360,62 @@ mct-container {
   padding: 0 7.5px;
   font-size: 0.7rem; }
   /* line 71, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn .icon, .s-menu .icon {
+  .s-btn .icon, .s-menu .icon, .select .icon {
     font-size: 0.8rem;
     color: #0099cc; }
   /* line 76, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn .title-label, .s-menu .title-label {
+  .s-btn .title-label, .s-menu .title-label, .select .title-label {
     vertical-align: top; }
   /* line 80, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.sm, .sm.s-menu {
+  .s-btn.sm, .sm.s-menu, .sm.select {
     padding: 0 5px; }
-  /* line 83, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.vsm, .vsm.s-menu {
+  /* line 84, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.vsm, .vsm.s-menu, .vsm.select {
     padding: 0 2.5px; }
-  /* line 87, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn:not(.major), .s-menu:not(.major) {
+  /* line 88, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.major, .major.s-menu, .major.select {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-size: 100%;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00ace6), color-stop(100%, #0099cc));
+    background-image: -moz-linear-gradient(#00ace6, #0099cc);
+    background-image: -webkit-linear-gradient(#00ace6, #0099cc);
+    background-image: linear-gradient(#00ace6, #0099cc);
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    border: none;
+    color: #fff;
+    display: inline-block;
+    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
+    color: #fff; }
+    /* line 27, ../sass/_mixins.scss */
+    .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
+      color: #fff; }
+    /* line 31, ../sass/_mixins.scss */
+    .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
+      background-color: deepskyblue; }
+      /* line 33, ../sass/_mixins.scss */
+      .s-btn.major:not(.disabled):hover .icon, .major.s-menu:not(.disabled):hover .icon, .major.select:not(.disabled):hover .icon {
+        color: white; }
+  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -1374,63 +1437,23 @@ mct-container {
     border: none;
     color: #999;
     display: inline-block;
-    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-    /* line 20, ../sass/_mixins.scss */
-    .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #636363), color-stop(100%, #575757));
-      background-image: -moz-linear-gradient(#636363, #575757);
-      background-image: -webkit-linear-gradient(#636363, #575757);
-      background-image: linear-gradient(#636363, #575757);
-      color: #ababab; }
-    /* line 32, ../sass/_mixins.scss */
-    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon {
+    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
+    color: #999; }
+    /* line 27, ../sass/_mixins.scss */
+    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
       color: #0099cc; }
-    /* line 38, ../sass/_mixins.scss */
-    .s-btn:not(.major):not(.disabled):not(.paused):hover .icon, .s-menu:not(.major):not(.disabled):not(.paused):hover .icon {
-      color: #33ccff; }
-  /* line 91, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.major, .major.s-menu, .overlay .bottom-bar .s-btn.major, .overlay .bottom-bar .major.s-menu {
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00ace6), color-stop(100%, #0099cc));
-    background-image: -moz-linear-gradient(#00ace6, #0099cc);
-    background-image: -webkit-linear-gradient(#00ace6, #0099cc);
-    background-image: linear-gradient(#00ace6, #0099cc);
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border: none;
-    color: white;
-    display: inline-block;
-    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-    /* line 20, ../sass/_mixins.scss */
-    .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .overlay .bottom-bar .s-btn.major:not(.disabled):hover, .overlay .bottom-bar .major.s-menu:not(.disabled):hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0ac2ff), color-stop(100%, #00b4f0));
-      background-image: -moz-linear-gradient(#0ac2ff, #00b4f0);
-      background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
-      background-image: linear-gradient(#0ac2ff, #00b4f0);
-      color: white; }
-    /* line 32, ../sass/_mixins.scss */
-    .s-btn.major .icon, .major.s-menu .icon, .overlay .bottom-bar .s-btn.major .icon, .overlay .bottom-bar .major.s-menu .icon {
-      color: white; }
-    /* line 38, ../sass/_mixins.scss */
-    .s-btn.major:not(.disabled):not(.paused):hover .icon, .major.s-menu:not(.disabled):not(.paused):hover .icon {
-      color: white; }
-  /* line 97, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.paused, .paused.s-menu {
+    /* line 31, ../sass/_mixins.scss */
+    .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
+      background-color: #0099cc; }
+      /* line 33, ../sass/_mixins.scss */
+      .s-btn:not(.major):not(.disabled):hover .icon, .s-menu:not(.major):not(.disabled):hover .icon, .select:not(.major):not(.disabled):hover .icon {
+        color: #33ccff; }
+  /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.paused, .paused.s-menu, .paused.select {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -1452,27 +1475,22 @@ mct-container {
     border: none;
     color: #fff;
     display: inline-block;
-    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-    /* line 20, ../sass/_mixins.scss */
-    .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlOTEwNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U5ODMwMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fe9105), color-stop(100%, #e98301));
-      background-image: -moz-linear-gradient(#fe9105, #e98301);
-      background-image: -webkit-linear-gradient(#fe9105, #e98301);
-      background-image: linear-gradient(#fe9105, #e98301);
-      color: white; }
-    /* line 32, ../sass/_mixins.scss */
-    .s-btn.paused .icon, .paused.s-menu .icon {
+    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
+    color: #fff; }
+    /* line 27, ../sass/_mixins.scss */
+    .s-btn.paused .icon, .paused.s-menu .icon, .paused.select .icon {
       color: #fff; }
-    /* line 38, ../sass/_mixins.scss */
-    .s-btn.paused:not(.disabled):not(.paused):hover .icon, .paused.s-menu:not(.disabled):not(.paused):hover .icon {
-      color: white; }
-    /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
-    .s-btn.paused .icon:before, .paused.s-menu .icon:before {
+    /* line 31, ../sass/_mixins.scss */
+    .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover, .paused.select:not(.disabled):hover {
+      background-color: #f88c01; }
+      /* line 33, ../sass/_mixins.scss */
+      .s-btn.paused:not(.disabled):hover .icon, .paused.s-menu:not(.disabled):hover .icon, .paused.select:not(.disabled):hover .icon {
+        color: white; }
+    /* line 101, ../../../../general/res/sass/controls/_buttons.scss */
+    .s-btn.paused .icon:before, .paused.s-menu .icon:before, .paused.select .icon:before {
       content: "\0000EF"; }
-  /* line 104, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.pause-play, .pause-play.s-menu {
+  /* line 106, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.pause-play, .pause-play.s-menu, .pause-play.select {
     /*
     	&.paused {
     		.icon {
@@ -1480,24 +1498,24 @@ mct-container {
     		}
     	}
     */ }
-    /* line 112, ../../../../general/res/sass/controls/_buttons.scss */
-    .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before {
+    /* line 114, ../../../../general/res/sass/controls/_buttons.scss */
+    .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before, .pause-play.select .icon:before {
       content: "\0000F1"; }
-  /* line 118, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before {
+  /* line 120, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before, .show-thumbs.select .icon:before {
     content: "\000039"; }
 
-/* line 124, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 126, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
-  /* line 130, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .s-btn, .l-btn-set .s-menu {
+  /* line 132, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .s-btn, .l-btn-set .s-menu, .l-btn-set .select {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
-  /* line 136, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu {
+  /* line 138, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu, .l-btn-set .first .select {
     -moz-border-radius-topleft: 3px;
     -webkit-border-top-left-radius: 3px;
     border-top-left-radius: 3px;
@@ -1505,8 +1523,8 @@ mct-container {
     -webkit-border-bottom-left-radius: 3px;
     border-bottom-left-radius: 3px;
     margin-left: 0; }
-  /* line 143, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu {
+  /* line 145, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu, .l-btn-set .last .select {
     -moz-border-radius-topright: 3px;
     -webkit-border-top-right-radius: 3px;
     border-top-right-radius: 3px;
@@ -1720,7 +1738,7 @@ a.s-btn span {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  border-left: 1px solid #4d4d4d;
+  border-left: 1px solid rgba(153, 153, 153, 0.1);
   display: inline-block;
   padding: 0 5px;
   position: relative; }
@@ -1808,7 +1826,7 @@ label.checkbox.custom {
     margin-left: 0; }
 
 /* line 207, ../../../../general/res/sass/controls/_controls.scss */
-.s-menu label.checkbox.custom {
+.s-menu label.checkbox.custom, .select label.checkbox.custom {
   margin-left: 5px; }
 
 /* line 212, ../../../../general/res/sass/controls/_controls.scss */
@@ -1906,8 +1924,6 @@ label.checkbox.custom {
   -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
   box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
   background-color: rgba(0, 0, 0, 0.4);
-  border-bottom: 1px solid rgba(77, 77, 77, 0.4);
-  border-right: 1px solid rgba(77, 77, 77, 0.4);
   height: 50%;
   width: auto;
   position: absolute;
@@ -1917,6 +1933,10 @@ label.checkbox.custom {
   left: 0; }
 /* line 308, ../../../../general/res/sass/controls/_controls.scss */
 .slider .knob {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -1939,6 +1959,7 @@ label.checkbox.custom {
   color: #999;
   display: inline-block;
   text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
+  color: #999;
   cursor: ew-resize;
   position: absolute;
   height: 100%;
@@ -1947,21 +1968,9 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 20, ../sass/_mixins.scss */
-  .slider .knob:not(.disabled):hover {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
-    background-image: -moz-linear-gradient(#525252, #454545);
-    background-image: -webkit-linear-gradient(#525252, #454545);
-    background-image: linear-gradient(#525252, #454545);
-    color: #ababab; }
-  /* line 32, ../sass/_mixins.scss */
+  /* line 27, ../sass/_mixins.scss */
   .slider .knob .icon {
     color: #0099cc; }
-  /* line 38, ../sass/_mixins.scss */
-  .slider .knob:not(.disabled):not(.paused):hover .icon {
-    color: #33ccff; }
   /* line 159, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
@@ -2035,39 +2044,33 @@ label.checkbox.custom {
     -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
     box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
     background-color: rgba(0, 0, 0, 0.4);
-    border-bottom: 1px solid rgba(77, 77, 77, 0.4);
-    border-right: 1px solid rgba(77, 77, 77, 0.4);
     height: 10px;
     width: 10px; }
 
   /* line 351, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #666666), color-stop(100%, #595959));
-    background-image: -moz-linear-gradient(#666666, #595959 20px);
-    background-image: -webkit-linear-gradient(#666666, #595959 20px);
-    background-image: linear-gradient(#666666, #595959 20px);
-    -moz-border-radius: 1px;
-    -webkit-border-radius: 1px;
-    border-radius: 1px;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #595959), color-stop(100%, #4d4d4d));
+    background-image: -moz-linear-gradient(#595959, #4d4d4d 20px);
+    background-image: -webkit-linear-gradient(#595959, #4d4d4d 20px);
+    background-image: linear-gradient(#595959, #4d4d4d 20px);
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border-top: 1px solid gray; }
-    /* line 358, ../../../../general/res/sass/controls/_controls.scss */
+    box-sizing: border-box; }
+    /* line 360, ../../../../general/res/sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #808080), color-stop(100%, #737373));
-      background-image: -moz-linear-gradient(#808080, #737373 20px);
-      background-image: -webkit-linear-gradient(#808080, #737373 20px);
-      background-image: linear-gradient(#808080, #737373 20px); }
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #5e5e5e), color-stop(100%, #525252));
+      background-image: -moz-linear-gradient(#5e5e5e, #525252 20px);
+      background-image: -webkit-linear-gradient(#5e5e5e, #525252 20px);
+      background-image: linear-gradient(#5e5e5e, #525252 20px); }
 
-  /* line 363, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 365, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
@@ -2126,13 +2129,13 @@ label.checkbox.custom {
  *****************************************************************************/
 /******************************************************** MENU BUTTONS */
 /* line 31, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .icon {
+.s-menu .icon, .select .icon {
   font-size: 120%; }
 /* line 35, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .title-label {
+.s-menu .title-label, .select .title-label {
   margin-left: 3px; }
 /* line 39, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu:after {
+.s-menu:after, .select:after {
   color: rgba(255, 255, 255, 0.2);
   content: '\76';
   display: inline-block;
@@ -2141,14 +2144,14 @@ label.checkbox.custom {
   text-shadow: none;
   vertical-align: top; }
 /* line 50, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu.create-btn .title-label {
+.s-menu.create-btn .title-label, .create-btn.select .title-label {
   font-size: 1rem; }
 /* line 58, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .menu {
+.s-menu .menu, .select .menu {
   left: 0;
   text-align: left; }
   /* line 61, ../../../../general/res/sass/controls/_menus.scss */
-  .s-menu .menu .ui-symbol.icon {
+  .s-menu .menu .ui-symbol.icon, .select .menu .ui-symbol.icon {
     width: 12px; }
 
 /******************************************************** MENUS THEMSELVES */
@@ -2156,71 +2159,11 @@ label.checkbox.custom {
 .menu-element {
   cursor: pointer;
   position: relative; }
-  /* line 74, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 76, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .menu {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
-    background-image: -moz-linear-gradient(#4d4d4d, #404040);
-    background-image: -webkit-linear-gradient(#4d4d4d, #404040);
-    background-image: linear-gradient(#4d4d4d, #404040);
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border: none;
-    color: #999;
-    display: inline-block;
-    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    display: block;
-    padding: 3px 0;
-    position: absolute;
-    z-index: 10; }
-    /* line 82, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .menu ul {
-      margin: 0;
-      padding: 0; }
-      /* line 293, ../../../../general/res/sass/_mixins.scss */
-      .menu-element .menu ul li {
-        list-style-type: none;
-        margin: 0;
-        padding: 0; }
-      /* line 84, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .menu ul li {
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        border-top: 1px solid #737373;
-        color: #d9d9d9;
-        line-height: 1.5rem;
-        padding: 3px 10px 3px 30px;
-        position: relative;
-        white-space: nowrap; }
-        /* line 92, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .menu ul li:first-child {
-          border: none; }
-        /* line 95, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .menu ul li:hover {
-          background: #737373;
-          color: #fff; }
-          /* line 101, ../../../../general/res/sass/controls/_menus.scss */
-          .menu-element .menu ul li:hover .icon {
-            color: #33ccff; }
-        /* line 109, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .menu ul li .type-icon {
-          left: 10px; }
-  /* line 116, ../../../../general/res/sass/controls/_menus.scss */
-  .menu-element .context-menu, .menu-element .checkbox-menu,
-  .menu-element .super-menu {
-    pointer-events: auto;
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhN2E3YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZlNmU2ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7a7a7a), color-stop(100%, #6e6e6e));
@@ -2237,55 +2180,97 @@ label.checkbox.custom {
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border: none;
-    color: #999;
-    display: inline-block; }
-    /* line 124, ../../../../general/res/sass/controls/_menus.scss */
+    color: white;
+    display: inline-block;
+    text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
+    display: block;
+    padding: 3px 0;
+    position: absolute;
+    z-index: 10; }
+    /* line 85, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .menu ul {
+      margin: 0;
+      padding: 0; }
+      /* line 319, ../../../../general/res/sass/_mixins.scss */
+      .menu-element .menu ul li {
+        list-style-type: none;
+        margin: 0;
+        padding: 0; }
+      /* line 87, ../../../../general/res/sass/controls/_menus.scss */
+      .menu-element .menu ul li {
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        border-top: 1px solid #a1a1a1;
+        color: white;
+        line-height: 1.5rem;
+        padding: 3px 10px 3px 30px;
+        position: relative;
+        white-space: nowrap; }
+        /* line 95, ../../../../general/res/sass/controls/_menus.scss */
+        .menu-element .menu ul li:first-child {
+          border: none; }
+        /* line 98, ../../../../general/res/sass/controls/_menus.scss */
+        .menu-element .menu ul li:hover {
+          background: #878787;
+          color: #fff; }
+          /* line 101, ../../../../general/res/sass/controls/_menus.scss */
+          .menu-element .menu ul li:hover .icon {
+            color: #33ccff; }
+        /* line 105, ../../../../general/res/sass/controls/_menus.scss */
+        .menu-element .menu ul li .type-icon {
+          left: 10px; }
+  /* line 112, ../../../../general/res/sass/controls/_menus.scss */
+  .menu-element .context-menu, .menu-element .checkbox-menu,
+  .menu-element .super-menu {
+    pointer-events: auto; }
+    /* line 115, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .context-menu ul li, .menu-element .checkbox-menu ul li,
     .menu-element .super-menu ul li {
       padding-left: 25px; }
-      /* line 126, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 117, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .context-menu ul li a, .menu-element .checkbox-menu ul li a,
       .menu-element .super-menu ul li a {
         color: white; }
-      /* line 129, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 120, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .context-menu ul li .icon, .menu-element .checkbox-menu ul li .icon,
       .menu-element .super-menu ul li .icon {
         color: #24c8ff; }
-      /* line 132, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 123, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .context-menu ul li .type-icon, .menu-element .checkbox-menu ul li .type-icon,
       .menu-element .super-menu ul li .type-icon {
         left: 5px; }
-      /* line 135, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 126, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .context-menu ul li:hover .icon, .menu-element .checkbox-menu ul li:hover .icon,
       .menu-element .super-menu ul li:hover .icon {
         color: #3dcfff; }
-  /* line 144, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 135, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .checkbox-menu ul li {
     padding-left: 50px; }
-    /* line 146, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 137, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .checkbox {
       position: absolute;
       left: 5px;
       top: 0.53333rem; }
-      /* line 151, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 142, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .checkbox-menu ul li .checkbox em {
         height: 0.7rem;
         width: 0.7rem; }
-        /* line 154, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 145, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .checkbox-menu ul li .checkbox em:before {
           font-size: 7px !important;
           height: 0.7rem;
           width: 0.7rem;
           line-height: 0.7rem; }
-    /* line 162, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 153, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .type-icon {
       left: 25px; }
-  /* line 168, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 159, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .super-menu {
     display: block;
     width: 500px;
     height: 480px; }
-    /* line 178, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 168, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .contents {
       overflow: hidden;
       position: absolute;
@@ -2295,12 +2280,12 @@ label.checkbox.custom {
       left: 5px;
       width: auto;
       height: auto; }
-    /* line 181, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 171, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .pane {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box; }
-      /* line 183, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 173, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.left {
         border-right: 1px solid rgba(255, 255, 255, 0.2);
         left: 0;
@@ -2309,24 +2294,22 @@ label.checkbox.custom {
         width: 50%;
         overflow-x: hidden;
         overflow-y: auto; }
-        /* line 193, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 183, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .super-menu .pane.left ul li {
           -moz-border-radius: 3px;
           -webkit-border-radius: 3px;
           border-radius: 3px;
           padding-left: 30px;
           border-top: none; }
-      /* line 200, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 190, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.right {
         left: auto;
         right: 0;
         padding: 25px;
         width: 50%; }
-        /* line 206, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .super-menu .pane.right .icon {
-          color: #fff; }
-    /* line 213, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 200, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.icon {
+      color: white;
       position: relative;
       font-size: 8em;
       left: 0;
@@ -2334,40 +2317,40 @@ label.checkbox.custom {
       line-height: 150px;
       margin-bottom: 25px;
       text-align: center; }
-    /* line 223, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 211, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.title {
-      color: #fff;
+      color: white;
       font-size: 1.2em;
       margin-bottom: 0.5em; }
-    /* line 228, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 216, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.description {
-      color: #fff;
+      color: white;
       font-size: 0.8em;
       line-height: 1.5em; }
-  /* line 237, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 225, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .context-menu, .menu-element .checkbox-menu {
     font-size: 0.80rem; }
 
-/* line 242, ../../../../general/res/sass/controls/_menus.scss */
+/* line 230, ../../../../general/res/sass/controls/_menus.scss */
 .context-menu-holder {
   pointer-events: none;
   position: absolute;
   height: 200px;
   width: 170px;
   z-index: 70; }
-  /* line 248, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 236, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder .context-menu-wrapper {
     position: absolute;
     height: 100%;
     width: 100%; }
-  /* line 255, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 243, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
     right: 0; }
-  /* line 258, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 246, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
     bottom: 0; }
 
-/* line 263, ../../../../general/res/sass/controls/_menus.scss */
+/* line 251, ../../../../general/res/sass/controls/_menus.scss */
 .btn-bar.right .menu,
 .menus-to-left .menu {
   left: auto;
@@ -2424,10 +2407,10 @@ label.checkbox.custom {
     height: 10px; }
     /* line 52, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
-      border-top: 1px solid #4d4d4d; }
+      border-top: 1px solid rgba(153, 153, 153, 0.1); }
       /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
-        background-color: #4d4d4d;
+        background-color: rgba(153, 153, 153, 0.1);
         border: none;
         width: 1px;
         margin-left: -1px; }
@@ -2436,7 +2419,7 @@ label.checkbox.custom {
           margin-left: 0; }
         /* line 62, ../../../../general/res/sass/controls/_time-controller.scss */
         .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
-          color: gray;
+          color: rgba(204, 204, 204, 0.1);
           font-size: 0.7em;
           position: absolute;
           margin-left: -25px;
@@ -2532,193 +2515,139 @@ label.checkbox.custom {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(0, 0, 0, 0.2);
   color: #cccccc;
   font-size: 0.8em;
   padding: 5px 5px;
   text-transform: uppercase; }
 
-/* line 35, ../../../../general/res/sass/forms/_elems.scss */
-.form .form-section {
-  position: relative;
-  margin-bottom: 20px; }
-/* line 40, ../../../../general/res/sass/forms/_elems.scss */
-.form .form-row {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  overflow: hidden;
-  *zoom: 1;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  margin-top: 5px;
-  padding: 5px 0;
-  position: relative; }
-  /* line 48, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row.first {
-    border-top: none; }
-  /* line 52, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row > .label,
-  .form .form-row > .controls {
+/* line 33, ../../../../general/res/sass/forms/_elems.scss */
+.form {
+  color: rgba(255, 255, 255, 0.5); }
+  /* line 36, ../../../../general/res/sass/forms/_elems.scss */
+  .form .form-section {
+    position: relative;
+    margin-bottom: 20px; }
+  /* line 41, ../../../../general/res/sass/forms/_elems.scss */
+  .form .form-row {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     overflow: hidden;
     *zoom: 1;
-    font-size: 0.8rem;
-    line-height: 22px;
-    min-height: 22px; }
-  /* line 61, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row > .label {
-    float: left;
-    min-width: 120px;
-    position: relative;
-    white-space: nowrap;
-    width: 30%; }
-  /* line 71, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row .value {
-    color: #cccccc; }
-  /* line 75, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row .controls {
-    float: left;
-    position: relative;
-    width: 69.9%; }
-    /* line 82, ../../../../general/res/sass/forms/_elems.scss */
-    .form .form-row .controls .l-composite-control.l-checkbox {
-      display: inline-block;
-      line-height: 14px;
-      margin-right: 5px; }
-    /* line 91, ../../../../general/res/sass/forms/_elems.scss */
-    .form .form-row .controls .l-med input[type="text"] {
-      width: 200px; }
-    /* line 95, ../../../../general/res/sass/forms/_elems.scss */
-    .form .form-row .controls .l-small input[type="text"] {
-      width: 50px; }
-    /* line 99, ../../../../general/res/sass/forms/_elems.scss */
-    .form .form-row .controls .l-numeric input[type="text"] {
-      text-align: right; }
-    /* line 103, ../../../../general/res/sass/forms/_elems.scss */
-    .form .form-row .controls .select {
-      margin-right: 5px; }
-  /* line 108, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row .field-hints {
-    color: #666666; }
-  /* line 112, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row .selector-list {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 5px;
-    position: relative;
-    height: 150px;
-    overflow: auto; }
-    /* line 123, ../../../../general/res/sass/forms/_elems.scss */
-    .form .form-row .selector-list .wrapper {
-      overflow-y: auto;
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      bottom: 5px;
-      left: 5px; }
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    margin-top: 5px;
+    padding: 5px 0;
+    position: relative; }
+    /* line 49, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row.first {
+      border-top: none; }
+    /* line 53, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row > .label,
+    .form .form-row > .controls {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      overflow: hidden;
+      *zoom: 1;
+      font-size: 0.8rem;
+      line-height: 22px;
+      min-height: 22px; }
+    /* line 62, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row > .label {
+      float: left;
+      min-width: 120px;
+      position: relative;
+      white-space: nowrap;
+      width: 30%; }
+    /* line 72, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .value {
+      color: #cccccc; }
+    /* line 76, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .controls {
+      float: left;
+      position: relative;
+      width: 69.9%; }
+      /* line 83, ../../../../general/res/sass/forms/_elems.scss */
+      .form .form-row .controls .l-composite-control.l-checkbox {
+        display: inline-block;
+        line-height: 14px;
+        margin-right: 5px; }
+      /* line 92, ../../../../general/res/sass/forms/_elems.scss */
+      .form .form-row .controls .l-med input[type="text"] {
+        width: 200px; }
+      /* line 96, ../../../../general/res/sass/forms/_elems.scss */
+      .form .form-row .controls .l-small input[type="text"] {
+        width: 50px; }
+      /* line 100, ../../../../general/res/sass/forms/_elems.scss */
+      .form .form-row .controls .l-numeric input[type="text"] {
+        text-align: right; }
+      /* line 104, ../../../../general/res/sass/forms/_elems.scss */
+      .form .form-row .controls .select {
+        margin-right: 5px; }
+    /* line 109, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .field-hints {
+      color: #666666; }
+    /* line 113, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .selector-list {
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      -moz-border-radius: 3px;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+      -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+      box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+      background: rgba(255, 255, 255, 0.1);
+      border: none;
+      color: #cccccc;
+      outline: none;
+      padding: 0 3px;
+      position: relative;
+      height: 150px; }
+      /* line 270, ../../../../general/res/sass/_mixins.scss */
+      .form .form-row .selector-list.error {
+        background: rgba(255, 0, 0, 0.5); }
+      /* line 124, ../../../../general/res/sass/forms/_elems.scss */
+      .form .form-row .selector-list > .wrapper {
+        overflow: auto;
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        bottom: 5px;
+        left: 5px; }
 
-/* line 137, ../../../../general/res/sass/forms/_elems.scss */
+/* line 138, ../../../../general/res/sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 143, ../../../../general/res/sass/forms/_elems.scss */
+/* line 144, ../../../../general/res/sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 148, ../../../../general/res/sass/forms/_elems.scss */
+/* line 149, ../../../../general/res/sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 155, ../../../../general/res/sass/forms/_elems.scss */
+  /* line 156, ../../../../general/res/sass/forms/_elems.scss */
   .l-result div.s-hint {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
-    background: rgba(255, 153, 0, 0.8);
+    background: rgba(255, 51, 0, 0.8);
     display: block;
-    color: #ffd699;
+    color: #ffad99;
     padding: 5px; }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 22, ../../../../general/res/sass/forms/_textarea.scss */
-.edit-main textarea {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  color: #cccccc;
-  outline: none;
-  padding: 5px;
-  position: absolute;
-  height: 100%;
-  width: 100%; }
-  /* line 269, ../../../../general/res/sass/_mixins.scss */
-  .edit-main textarea.error {
-    background: rgba(255, 0, 0, 0.5); }
-
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 22, ../../../../general/res/sass/forms/_text-input.scss */
+/* line 165, ../../../../general/res/sass/forms/_elems.scss */
 input[type="text"] {
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -2728,21 +2657,46 @@ input[type="text"] {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
   background: rgba(255, 255, 255, 0.1);
   border: none;
   color: #cccccc;
   outline: none;
   padding: 0 3px; }
-  /* line 269, ../../../../general/res/sass/_mixins.scss */
+  /* line 270, ../../../../general/res/sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
-  /* line 29, ../../../../general/res/sass/forms/_text-input.scss */
+  /* line 172, ../../../../general/res/sass/forms/_elems.scss */
   input[type="text"].numeric {
     text-align: right; }
 
+/* line 177, ../../../../general/res/sass/forms/_elems.scss */
+textarea {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  color: #cccccc;
+  outline: none;
+  padding: 5px;
+  position: absolute;
+  height: 100%;
+  width: 100%; }
+  /* line 270, ../../../../general/res/sass/_mixins.scss */
+  textarea.error {
+    background: rgba(255, 0, 0, 0.5); }
+
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -2765,7 +2719,11 @@ input[type="text"] {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 22, ../../../../general/res/sass/forms/_selects.scss */
-.form-control.select {
+.select {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -2788,28 +2746,15 @@ input[type="text"] {
   color: #999;
   display: inline-block;
   text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
-  cursor: pointer;
-  display: inline-block;
+  color: #999;
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 20, ../sass/_mixins.scss */
-  .form-control.select:not(.disabled):hover {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
-    background-image: -moz-linear-gradient(#525252, #454545);
-    background-image: -webkit-linear-gradient(#525252, #454545);
-    background-image: linear-gradient(#525252, #454545);
-    color: #ababab; }
-  /* line 32, ../sass/_mixins.scss */
-  .form-control.select .icon {
+  /* line 27, ../sass/_mixins.scss */
+  .select .icon {
     color: #0099cc; }
-  /* line 38, ../sass/_mixins.scss */
-  .form-control.select:not(.disabled):not(.paused):hover .icon {
-    color: #33ccff; }
-  /* line 29, ../../../../general/res/sass/forms/_selects.scss */
-  .form-control.select select {
+  /* line 30, ../../../../general/res/sass/forms/_selects.scss */
+  .select select {
     -moz-appearance: none;
     -webkit-appearance: none;
     -moz-box-sizing: border-box;
@@ -2818,19 +2763,13 @@ input[type="text"] {
     background: none;
     color: #999;
     border: none !important;
-    cursor: pointer;
-    padding: 4px 25px 2px 5px;
+    padding: 4px 25px 2px 0px;
     width: 120%; }
-    /* line 38, ../../../../general/res/sass/forms/_selects.scss */
-    .form-control.select select option {
+    /* line 39, ../../../../general/res/sass/forms/_selects.scss */
+    .select select option {
       margin: 5px 0; }
-  /* line 42, ../../../../general/res/sass/forms/_selects.scss */
-  .form-control.select:after {
-    color: #0099cc;
-    content: "v";
-    display: block;
-    font-family: 'symbolsfont';
-    pointer-events: none;
+  /* line 43, ../../../../general/res/sass/forms/_selects.scss */
+  .select:after {
     position: absolute;
     right: 5px;
     top: 0; }
@@ -2870,12 +2809,12 @@ input[type="text"] {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  background: rgba(255, 255, 255, 0.1);
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  background: #333;
   border: none;
-  color: #cccccc;
+  color: #999;
   outline: none;
   padding: 0 3px;
   background: #3b3b3b;
@@ -2884,7 +2823,7 @@ input[type="text"] {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 269, ../../../../general/res/sass/_mixins.scss */
+  /* line 270, ../../../../general/res/sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -2978,7 +2917,7 @@ input[type="text"] {
     font-size: 0.7em; }
 /* line 44, ../../../../general/res/sass/forms/_validation.scss */
 .validates.invalid > .label::after, .validates.invalid.req > .label::after {
-  color: #ff9900;
+  color: #ff3300;
   content: "x"; }
 /* line 51, ../../../../general/res/sass/forms/_validation.scss */
 .validates.valid > .label::after, .validates.valid.req > .label::after {
@@ -3031,17 +2970,17 @@ span.req {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  background: rgba(255, 255, 255, 0.1);
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  background: #333;
   border: none;
-  color: #cccccc;
+  color: #999;
   outline: none;
   padding: 0 3px;
   background: #3b3b3b;
   border-bottom: 1px solid #4d4d4d; }
-  /* line 269, ../../../../general/res/sass/_mixins.scss */
+  /* line 270, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -3181,33 +3120,38 @@ span.req {
 .bar .icon.major {
   margin-right: 5px; }
 /* line 70, ../../../../general/res/sass/user-environ/_layout.scss */
-.bar.abs, .s-menu span.bar.l-click-area {
+.bar.abs, .s-menu span.bar.l-click-area, .select span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
   /* line 73, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs.left, .s-menu span.bar.left.l-click-area,
+  .bar.abs.left, .s-menu span.bar.left.l-click-area, .select span.bar.left.l-click-area,
   .bar.abs .left,
-  .s-menu span.bar.l-click-area .left {
+  .s-menu span.bar.l-click-area .left,
+  .select span.bar.l-click-area .left {
     width: 45%;
     right: auto; }
   /* line 78, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs.right, .s-menu span.bar.right.l-click-area,
+  .bar.abs.right, .s-menu span.bar.right.l-click-area, .select span.bar.right.l-click-area,
   .bar.abs .right,
-  .s-menu span.bar.l-click-area .right {
+  .s-menu span.bar.l-click-area .right,
+  .select span.bar.l-click-area .right {
     width: 45%;
     left: auto;
     text-align: right; }
     /* line 83, ../../../../general/res/sass/user-environ/_layout.scss */
-    .bar.abs.right .icon.major, .s-menu span.bar.right.l-click-area .icon.major,
+    .bar.abs.right .icon.major, .s-menu span.bar.right.l-click-area .icon.major, .select span.bar.right.l-click-area .icon.major,
     .bar.abs .right .icon.major,
-    .s-menu span.bar.l-click-area .right .icon.major {
+    .s-menu span.bar.l-click-area .right .icon.major,
+    .select span.bar.l-click-area .right .icon.major {
       margin-left: 15px; }
   /* line 89, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs .l-flex .left, .s-menu span.bar.l-click-area .l-flex .left,
+  .bar.abs .l-flex .left, .s-menu span.bar.l-click-area .l-flex .left, .select span.bar.l-click-area .l-flex .left,
   .bar.abs .l-flex .right,
-  .s-menu span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .s-menu span.bar.l-flex.l-click-area .left,
+  .s-menu span.bar.l-click-area .l-flex .right,
+  .select span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .s-menu span.bar.l-flex.l-click-area .left, .select span.bar.l-flex.l-click-area .left,
   .bar.abs.l-flex .right,
-  .s-menu span.bar.l-flex.l-click-area .right {
+  .s-menu span.bar.l-flex.l-click-area .right,
+  .select span.bar.l-flex.l-click-area .right {
     width: auto; }
 
 /* line 98, ../../../../general/res/sass/user-environ/_layout.scss */
@@ -3345,10 +3289,12 @@ span.req {
     overflow: auto;
     top: 64px; }
   /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area,
+  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area, .pane.items .object-browse-bar .select span.left.l-click-area, .select .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .s-menu span.right.l-click-area,
-  .s-menu .pane.items .object-browse-bar span.right.l-click-area {
+  .s-menu .pane.items .object-browse-bar span.right.l-click-area,
+  .pane.items .object-browse-bar .select span.right.l-click-area,
+  .select .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
   /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-holder {
@@ -3378,13 +3324,17 @@ span.req {
       right: 3px; }
 
 /* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
-.object-browse-bar .s-btn, .object-browse-bar .s-menu,
+.object-browse-bar .s-btn, .object-browse-bar .s-menu, .object-browse-bar .select,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu,
+.top-bar .buttons-main .select,
 .top-bar .s-menu,
+.top-bar .select,
 .tool-bar .s-btn,
 .tool-bar .s-menu,
-.tool-bar .s-menu {
+.tool-bar .select,
+.tool-bar .s-menu,
+.tool-bar .select {
   height: 25px;
   line-height: 25px;
   vertical-align: top; }
@@ -3466,7 +3416,7 @@ span.req {
 
   /* line 31, ../../../../general/res/sass/mobile/_layout.scss */
   .pane.left.treeview {
-    background-color: #222; }
+    background-color: #262626; }
 
   /* line 35, ../../../../general/res/sass/mobile/_layout.scss */
   .pane.right-repr {
@@ -3779,13 +3729,13 @@ span.req {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 23, ../../../../general/res/sass/search/_search.scss */
-.abs.search-holder, .s-menu span.search-holder.l-click-area {
+.abs.search-holder, .s-menu span.search-holder.l-click-area, .select span.search-holder.l-click-area {
   height: 25px;
   bottom: 0;
   top: 23px;
   z-index: 5; }
   /* line 27, ../../../../general/res/sass/search/_search.scss */
-  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area {
+  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area, .select span.search-holder.active.l-click-area {
     height: auto;
     bottom: 0; }
 
@@ -3993,12 +3943,12 @@ span.req {
   z-index: 100; }
 /* line 32, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay > .holder {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #333333));
-  background-image: -moz-linear-gradient(#404040, #333333);
-  background-image: -webkit-linear-gradient(#404040, #333333);
-  background-image: linear-gradient(#404040, #333333);
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #595959), color-stop(100%, #4d4d4d));
+  background-image: -moz-linear-gradient(#595959, #4d4d4d);
+  background-image: -webkit-linear-gradient(#595959, #4d4d4d);
+  background-image: linear-gradient(#595959, #4d4d4d);
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -4009,12 +3959,12 @@ span.req {
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   border: none;
-  color: #999;
+  color: #e6e6e6;
   display: inline-block;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px;
-  color: #999;
+  color: #e6e6e6;
   top: 15%;
   right: 15%;
   bottom: 15%;
@@ -4052,40 +4002,51 @@ span.req {
   height: 30px;
   text-align: right; }
   /* line 66, ../../../../general/res/sass/overlay/_overlay.scss */
-  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #666666), color-stop(100%, #595959));
-    background-image: -moz-linear-gradient(#666666, #595959);
-    background-image: -webkit-linear-gradient(#666666, #595959);
-    background-image: linear-gradient(#666666, #595959);
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border: none;
-    color: #bfbfbf;
-    display: inline-block;
+  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu, .overlay .bottom-bar .select {
     font-size: 95%;
     height: 30px;
     line-height: 30px;
     margin-left: 5px;
     padding: 0 15px; }
-    /* line 20, ../sass/_mixins.scss */
-    .overlay .bottom-bar .s-btn:not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.disabled):hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzc4Nzg3OCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZiNmI2YiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    /* line 68, ../../../../general/res/sass/overlay/_overlay.scss */
+    .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major), .overlay .bottom-bar .select:not(.major) {
+      -moz-user-select: -moz-none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+      -moz-border-radius: 3px;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOGM4YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #787878), color-stop(100%, #6b6b6b));
-      background-image: -moz-linear-gradient(#787878, #6b6b6b);
-      background-image: -webkit-linear-gradient(#787878, #6b6b6b);
-      background-image: linear-gradient(#787878, #6b6b6b);
-      color: #d1d1d1; }
-/* line 82, ../../../../general/res/sass/overlay/_overlay.scss */
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c8c8c), color-stop(100%, #808080));
+      background-image: -moz-linear-gradient(#8c8c8c, #808080);
+      background-image: -webkit-linear-gradient(#8c8c8c, #808080);
+      background-image: linear-gradient(#8c8c8c, #808080);
+      -moz-border-radius: 3px;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+      -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+      box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+      border: none;
+      color: #fff;
+      display: inline-block;
+      text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
+      color: #fff; }
+      /* line 27, ../sass/_mixins.scss */
+      .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon, .overlay .bottom-bar .select:not(.major) .icon {
+        color: #fff; }
+      /* line 31, ../sass/_mixins.scss */
+      .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
+        background-color: #999999; }
+        /* line 33, ../sass/_mixins.scss */
+        .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover .icon {
+          color: white; }
+/* line 84, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
   top: 5px;
   right: 5px;
@@ -4161,7 +4122,7 @@ ul.tree {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none; }
-  /* line 293, ../../../../general/res/sass/_mixins.scss */
+  /* line 319, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -4412,17 +4373,17 @@ ul.tree {
 /* line 25, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame.child-frame.panel {
   background: #333;
-  border: 1px solid #4d4d4d; }
+  border: 1px solid rgba(153, 153, 153, 0.1); }
   /* line 28, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.child-frame.panel:hover {
-    border-color: #666666; }
+    border-color: rgba(179, 179, 179, 0.1); }
 /* line 32, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame > .object-header.abs, .s-menu .frame > span.object-header.l-click-area {
+.frame > .object-header.abs, .s-menu .frame > span.object-header.l-click-area, .select .frame > span.object-header.l-click-area {
   font-size: 0.75em;
   height: 16px;
   line-height: 16px; }
 /* line 38, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame > .object-holder.abs, .s-menu .frame > span.object-holder.l-click-area {
+.frame > .object-holder.abs, .s-menu .frame > span.object-holder.l-click-area, .select .frame > span.object-holder.l-click-area {
   top: 21px; }
 /* line 41, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame .contents {
@@ -4468,29 +4429,31 @@ ul.tree {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 23, ../../../../general/res/sass/user-environ/_top-bar.scss */
-.top-bar.browse, .top-bar.edit {
-  border-bottom: 1px solid #4d4d4d;
-  top: 10px;
-  right: 10px;
-  bottom: auto;
-  left: 10px;
-  height: 30px;
-  line-height: 24px; }
-/* line 31, ../../../../general/res/sass/user-environ/_top-bar.scss */
-.top-bar .title {
-  color: #fff; }
-/* line 35, ../../../../general/res/sass/user-environ/_top-bar.scss */
-.top-bar .buttons-main {
-  font-size: 0.8em;
-  left: auto;
-  text-align: right; }
+/* line 22, ../../../../general/res/sass/user-environ/_top-bar.scss */
+.top-bar {
+  /*	.title {
+  		color: #fff;
+  	}*/ }
+  /* line 23, ../../../../general/res/sass/user-environ/_top-bar.scss */
+  .top-bar.browse, .top-bar.edit {
+    border-bottom: 1px solid rgba(153, 153, 153, 0.1);
+    top: 10px;
+    right: 10px;
+    bottom: auto;
+    left: 10px;
+    height: 30px;
+    line-height: 24px; }
+  /* line 35, ../../../../general/res/sass/user-environ/_top-bar.scss */
+  .top-bar .buttons-main {
+    font-size: 0.8em;
+    left: auto;
+    text-align: right; }
 
 /* line 48, ../../../../general/res/sass/user-environ/_top-bar.scss */
 .edit-mode .top-bar .buttons-main {
   white-space: nowrap; }
   /* line 52, ../../../../general/res/sass/user-environ/_top-bar.scss */
-  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .s-menu span.buttons-main.l-click-area, .s-menu .edit-mode .top-bar span.buttons-main.l-click-area {
+  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .s-menu span.buttons-main.l-click-area, .s-menu .edit-mode .top-bar span.buttons-main.l-click-area, .edit-mode .top-bar .select span.buttons-main.l-click-area, .select .edit-mode .top-bar span.buttons-main.l-click-area {
     bottom: auto;
     left: auto; }
 
@@ -4597,7 +4560,7 @@ ul.tree {
  *****************************************************************************/
 /* line 22, ../../../../general/res/sass/user-environ/_tool-bar.scss */
 .tool-bar {
-  border-bottom: 1px solid #4d4d4d; }
+  border-bottom: 1px solid rgba(153, 153, 153, 0.1); }
   /* line 24, ../../../../general/res/sass/user-environ/_tool-bar.scss */
   .tool-bar .l-control-group {
     height: 25px; }
@@ -5068,7 +5031,7 @@ table {
     bottom: 37px;
     left: 60px;
     cursor: crosshair;
-    border: 1px solid #4d4d4d; }
+    border: 1px solid rgba(153, 153, 153, 0.1); }
   /* line 86, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-label,
   .gl-plot .l-plot-label {
@@ -5397,6 +5360,10 @@ table {
     top: 0; }
   /* line 29, ../../../../general/res/sass/items/_item.scss */
   .items-holder .item.grid-item {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
@@ -5416,9 +5383,10 @@ table {
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     border: none;
-    color: #bfbfbf;
+    color: #0099cc;
     display: inline-block;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
+    color: #0099cc;
     box-sizing: border-box;
     cursor: pointer;
     float: left;
@@ -5427,21 +5395,15 @@ table {
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 20, ../sass/_mixins.scss */
-    .items-holder .item.grid-item:not(.disabled):hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5e5e5e), color-stop(100%, #525252));
-      background-image: -moz-linear-gradient(#5e5e5e, #525252);
-      background-image: -webkit-linear-gradient(#5e5e5e, #525252);
-      background-image: linear-gradient(#5e5e5e, #525252);
-      color: #d1d1d1; }
-    /* line 32, ../sass/_mixins.scss */
+    /* line 27, ../sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
       color: #0099cc; }
-    /* line 38, ../sass/_mixins.scss */
-    .items-holder .item.grid-item:not(.disabled):not(.paused):hover .icon {
-      color: #33ccff; }
+    /* line 31, ../sass/_mixins.scss */
+    .items-holder .item.grid-item:not(.disabled):hover {
+      background-color: #bfbfbf; }
+      /* line 33, ../sass/_mixins.scss */
+      .items-holder .item.grid-item:not(.disabled):hover .icon {
+        color: #33ccff; }
     /* line 47, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: deepskyblue; }
@@ -5546,6 +5508,10 @@ table {
       font-size: 0.8em; }
     /* line 138, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
+      -moz-user-select: -moz-none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
@@ -5568,22 +5534,11 @@ table {
       color: #999;
       display: inline-block;
       text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
+      color: #999;
       color: #80dfff; }
-      /* line 20, ../sass/_mixins.scss */
-      .items-holder .item.grid-item.selected:not(.disabled):hover {
-        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-        background-size: 100%;
-        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0ac2ff), color-stop(100%, #00b4f0));
-        background-image: -moz-linear-gradient(#0ac2ff, #00b4f0);
-        background-image: -webkit-linear-gradient(#0ac2ff, #00b4f0);
-        background-image: linear-gradient(#0ac2ff, #00b4f0);
-        color: #ababab; }
-      /* line 32, ../sass/_mixins.scss */
+      /* line 27, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
         color: #0099cc; }
-      /* line 38, ../sass/_mixins.scss */
-      .items-holder .item.grid-item.selected:not(.disabled):not(.paused):hover .icon {
-        color: #33ccff; }
       /* line 143, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
@@ -5725,7 +5680,7 @@ table {
 .autoflow {
   font-size: 0.75rem; }
   /* line 32, ../../../../general/res/sass/_autoflow.scss */
-  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu {
+  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu, .autoflow:hover .l-autoflow-header .change-column-width.select {
     -moz-transition-property: visibility, opacity, background-color, border-color;
     -o-transition-property: visibility, opacity, background-color, border-color;
     -webkit-transition-property: visibility, opacity, background-color, border-color;
@@ -5749,7 +5704,7 @@ table {
     .autoflow .l-autoflow-header span {
       vertical-align: middle; }
     /* line 48, ../../../../general/res/sass/_autoflow.scss */
-    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu {
+    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu, .autoflow .l-autoflow-header .change-column-width.select {
       -moz-transition-property: visibility, opacity, background-color, border-color;
       -o-transition-property: visibility, opacity, background-color, border-color;
       -webkit-transition-property: visibility, opacity, background-color, border-color;
@@ -5780,7 +5735,7 @@ table {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
-      border-left: 1px solid #4d4d4d;
+      border-left: 1px solid rgba(153, 153, 153, 0.1);
       display: inline-block;
       padding-left: 5px;
       padding-right: 5px;
@@ -5817,7 +5772,7 @@ table {
           color: #b3b3b3; }
         /* line 101, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.first-in-group {
-          border-top: 1px solid gray; }
+          border-top: 1px solid rgba(204, 204, 204, 0.1); }
         /* line 104, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item {
           display: block; }
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index f3e83d7c4c..b009666884 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -1,14 +1,17 @@
 /************************** COLORS AND SHADING */
 $colorBodyBg: #333;
+$colorGenBg: #222;
 $colorBodyFg: #999;
 $colorFooterBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: #005177;
 $colorKeyFg: #fff;
-
+$colorInteriorBorder: rgba($colorBodyFg, 0.1);
 $contrastRatioPercent: 7%;
-$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
+$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); //
 $colorBtnFg: $colorBodyFg;
+$colorBtnMajorBg: $colorKey;
+$colorBtnMajorFg: $colorKeyFg;
 $colorBtnIcon: $colorKey;
 $colorInvokeMenu: #fff;
 $contrastInvokeMenuPercent: 20%;
@@ -24,17 +27,23 @@ $colorFormLines: rgba(#fff, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.2);
 $colorInvokeMenu: #fff;
 // Menu colors
-$colorMenuBg: lighten($colorBodyBg, 23%);
-$colorMenuFg: lighten($colorMenuBg, 70%);
-$colorMenuIc: lighten($colorKey, 17%);
-$colorInteriorBorder: lighten($colorBodyBg, 10%);
-$colorObjFrameBg: darken($colorBodyBg, 5%);
+$colorMenuBg: pullForward($colorBodyBg, 23%);
+$colorMenuFg: pullForward($colorMenuBg, 70%);
+$colorMenuIc: pullForward($colorKey, 17%);
+$colorMenuHov: pullForward($colorMenuBg, 10%);//
+$shdwMenu: none;
+$shdwMenuText: rgba(black, 0.1) 0 1px 2px;
+$colorCreateMenuLgIcon: $colorMenuFg;
+$colorCreateMenuText: $colorMenuFg;//
 // Form colors
 $colorCheck: $colorKey;
-$colorFormRequired: #ffc700;
+$colorFormRequired: $colorAlt1;
 $colorFormValid: #33cc33;
 $colorFormError: #cc0000;
-$colorFormInvalid: #ff9900;
+$colorFormInvalid: #ff3300;
+$colorInputBg: rgba(#fff, 0.1);
+$colorInputFg: pullForward($colorBodyFg, 20%);
+$colorFormText: rgba(#fff, 0.5);
 // Limits and staleness colors
 $colorLimitYellow: #9d7500;
 $colorLimitRed: #aa0000;
@@ -49,8 +58,9 @@ $colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
 $colorOvrBg: pullForward($colorBodyBg, 10%);
-$colorOvrFg: $colorBodyFg;
-
+$colorOvrFg: pullForward($colorBodyFg, 30%);
+$colorOvrBtnBg: pullForward($colorOvrBg, 20%);
+$colorOvrBtnFg: #fff;
 // Items
 $colorItemBg: lighten($colorBodyBg, 5%);
 $colorItemFg: lighten($colorItemBg, 50%);
@@ -60,7 +70,6 @@ $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
 $shdwItemText: rgba(black, 0.1) 0 1px 2px;
 $colorItemBgSelected: $colorKey;
-
 // Tabular
 $tabularColorBorder: rgba(white, 0.1);
 $tabularColorBodyBg: darken($colorBodyBg, 10%);
@@ -79,9 +88,15 @@ $colorItemTreeSelectedVC: $colorItemTreeVC;
 $colorItemTreeVCHover: $colorAlt1;
 $shdwItemTreeIcon: 0.6;
 // Scrollbar
+$scrollbarTrackSize: 10px;
 $scrollbarTrackColorBg: rgba(#000, 0.4);
+$scrollbarThumbColor: lighten($colorBodyBg, 10%);
+$scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
 // Splitter
 $splitterShdw: rgba(black, 0.4) 0 0 3px;
 $colorSplitterInterior: $colorBodyBg;
 $colorSplitterHover: none;
-$colorGrippyInteriorHover: $colorKey;
\ No newline at end of file
+$colorGrippyInteriorHover: $colorKey;
+
+/********************************* MOBILE */
+$colorMobilePaneLeft: darken($colorBodyBg, 5%);
\ No newline at end of file
diff --git a/platform/commonUI/themes/espresso/res/sass/_mixins.scss b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
index 1d4c34473e..53baf97e3c 100644
--- a/platform/commonUI/themes/espresso/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
@@ -15,33 +15,27 @@
 	border: none;
 	//border-top: 1px solid lighten($gradC1, 2%);
 	color: $fg;
-	display: inline-block;
-	@if $hover == true {
-		&:not(.disabled):hover {
-			@include background-image(linear-gradient(pullForward($gradC1, $hovRatio), pullForward($gradC2, $hovRatio)));
-			color: pullForward($fgBase, $hovRatio);
-		}
-	}
+	display: inline-block;//
 }
 
-@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorKey) {
-	// $ic: Icon color
+@mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
+	@include user-select(none);
 	@include border-radius($controlCr);
-	@include containerSubtle($bg, $fg, true);
+	@include containerSubtle($bg, $fg);
 	@include text-shadow(rgba(black, 0.3) 0 1px 1px);
+	color: $fg;
 	.icon {
 		color: $ic;
 	}
-	&:not(.disabled) {
-		&:not(.paused) {
-			&:hover {
-				.icon {
-					color: lighten($ic, $ltGamma);
-				}
+	@if $bgHov != none {
+		&:not(.disabled):hover {
+			background-color: $bgHov;
+			.icon {
+				color: lighten($ic, $ltGamma);
 			}
 		}
 	}
-}
+}//
 
 @function pullForward($c: $colorBodyBg, $p: 20%) {
     // For dark interfaces, lighter things come forward - opposite for light interfaces
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index df52a77fff..2dedabb03a 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -98,6 +98,27 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /*********************************************** FORM ELEMENTS */
+/*
+
+@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
+    @include appearance(none);
+    @include border-radius($controlCr);
+    @include box-sizing(border-box);
+    @include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
+    background: rgba(#fff, 0.1);
+    border: none;
+    color: lighten($fg, 20%);
+    outline: none;
+    &.error {
+        background: rgba(red, 0.5);
+    }
+}
+
+@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
+    @include input-base($bg, $fg);
+    padding: 0 $interiorMarginSm;
+}
+*/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -168,7 +189,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/************************** STYLE */
 /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
 /************************** MOBILE TREE MENU DIMENSIONS */
 /************************** WINDOW DIMENSIONS FOR RWD */
@@ -176,6 +196,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
 /************************** COLORS AND SHADING */
+/********************************* MOBILE */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -333,7 +354,7 @@ a {
 body, html {
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #fff;
+  background-color: #efefef;
   color: #666;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 100%;
@@ -375,7 +396,7 @@ mct-container {
   display: block; }
 
 /* line 98, ../../../../general/res/sass/_global.scss */
-.abs, .s-menu span.l-click-area {
+.abs, .s-menu span.l-click-area, .select span.l-click-area {
   position: absolute;
   top: 0;
   right: 0;
@@ -424,7 +445,7 @@ mct-container {
   display: none !important; }
 
 /* line 147, ../../../../general/res/sass/_global.scss */
-.paused:not(.s-btn):not(.s-menu) {
+.paused:not(.s-btn):not(.s-menu):not(.select) {
   border-color: #c56f01 !important;
   color: #c56f01 !important; }
 
@@ -454,7 +475,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 26, ../../../../general/res/sass/_about.scss */
-.l-about.abs, .s-menu span.l-about.l-click-area {
+.l-about.abs, .s-menu span.l-about.l-click-area, .select span.l-about.l-click-area {
   overflow: auto; }
 /* line 31, ../../../../general/res/sass/_about.scss */
 .l-about .l-logo-holder {
@@ -504,11 +525,11 @@ mct-container {
   .s-about .s-logo-openmctweb {
     background-image: url("../../../../general/res/images/logo-openmctweb-shdw.svg"); }
   /* line 81, ../../../../general/res/sass/_about.scss */
-  .s-about .s-btn, .s-about .s-menu {
+  .s-about .s-btn, .s-about .s-menu, .s-about .select {
     line-height: 2em; }
   /* line 85, ../../../../general/res/sass/_about.scss */
   .s-about .l-licenses-software .l-license-software {
-    border-top: 1px solid white;
+    border-top: 1px solid rgba(102, 102, 102, 0.2);
     padding: 0.5em 0; }
     /* line 88, ../../../../general/res/sass/_about.scss */
     .s-about .l-licenses-software .l-license-software:first-child {
@@ -545,7 +566,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 24, ../../../../general/res/sass/_text.scss */
-.abs.l-standalone, .s-menu span.l-standalone.l-click-area {
+.abs.l-standalone, .s-menu span.l-standalone.l-click-area, .select span.l-standalone.l-click-area {
   padding: 5% 20%; }
 
 /* line 29, ../../../../general/res/sass/_text.scss */
@@ -562,7 +583,7 @@ mct-container {
     margin-bottom: 1em; }
   /* line 45, ../../../../general/res/sass/_text.scss */
   .s-text h2 {
-    border-top: 1px solid white;
+    border-top: 1px solid rgba(102, 102, 102, 0.2);
     font-size: 1.5em;
     margin-top: 2em;
     padding-top: 1em; }
@@ -629,7 +650,7 @@ mct-container {
   display: inline-block; }
 
 /* line 55, ../../../../general/res/sass/_icons.scss */
-.s-menu .invoke-menu,
+.s-menu .invoke-menu, .select .invoke-menu,
 .icon.major .invoke-menu {
   margin-left: 3px; }
 
@@ -865,9 +886,9 @@ mct-container {
 
 /* line 150, ../../../../general/res/sass/helpers/_bubbles.scss */
 .s-infobubble {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
   -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
   box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
@@ -924,7 +945,7 @@ mct-container {
  *****************************************************************************/
 /* line 26, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout .splitter {
-  background-color: #b3b3b3;
+  background-color: #a3a3a3;
   overflow: hidden;
   position: absolute;
   z-index: 1; }
@@ -971,7 +992,7 @@ mct-container {
       pointer-events: none;
       position: absolute;
       z-index: 2;
-      border-top: 1px dotted #d9d9d9;
+      border-top: 1px dotted #c9c9c9;
       top: 2px;
       left: 5px;
       right: 5px; }
@@ -989,7 +1010,7 @@ mct-container {
       -o-transition-timing-function: ease-in-out;
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
-      border-color: #fff; }
+      border-color: #efefef; }
 /* line 61, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.vertical .pane {
   top: 0;
@@ -1025,7 +1046,7 @@ mct-container {
     pointer-events: none;
     position: absolute;
     z-index: 2;
-    border-left: 1px dotted #d9d9d9;
+    border-left: 1px dotted #c9c9c9;
     left: 2px;
     bottom: 5px;
     top: 5px; }
@@ -1043,7 +1064,7 @@ mct-container {
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
-    border-color: #fff; }
+    border-color: #efefef; }
 
 /* line 80, ../../../../general/res/sass/helpers/_splitter.scss */
 .browse-area .splitter {
@@ -1188,9 +1209,9 @@ mct-container {
 /* Styles for messages */
 /* line 4, ../../../../general/res/sass/_messages.scss */
 .message.block {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
   padding: 10px; }
 /* line 8, ../../../../general/res/sass/_messages.scss */
 .message.error {
@@ -1221,7 +1242,7 @@ mct-container {
 /* Classes to be used for lists of properties and values */
 /* line 25, ../../../../general/res/sass/_properties.scss */
 .properties .s-row {
-  border-top: 1px solid white;
+  border-top: 1px solid rgba(102, 102, 102, 0.2);
   font-size: 0.8em; }
   /* line 28, ../../../../general/res/sass/_properties.scss */
   .properties .s-row:first-child {
@@ -1242,9 +1263,9 @@ mct-container {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    -moz-border-radius: 1.5px;
-    -webkit-border-radius: 1.5px;
-    border-radius: 1.5px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
     -moz-transition: background-color 0.25s;
     -o-transition: background-color 0.25s;
     -webkit-transition: background-color 0.25s;
@@ -1321,7 +1342,7 @@ mct-container {
 }*/
 /*********************************** STYLE STYLES */
 /* line 61, ../../../../general/res/sass/controls/_buttons.scss */
-.s-btn, .s-menu {
+.s-btn, .s-menu, .select {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -1336,110 +1357,95 @@ mct-container {
   padding: 0 7.5px;
   font-size: 0.7rem; }
   /* line 71, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn .icon, .s-menu .icon {
+  .s-btn .icon, .s-menu .icon, .select .icon {
     font-size: 0.8rem;
     color: #0099cc; }
   /* line 76, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn .title-label, .s-menu .title-label {
+  .s-btn .title-label, .s-menu .title-label, .select .title-label {
     vertical-align: top; }
   /* line 80, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.sm, .sm.s-menu {
+  .s-btn.sm, .sm.s-menu, .sm.select {
     padding: 0 5px; }
-  /* line 83, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.vsm, .vsm.s-menu {
+  /* line 84, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.vsm, .vsm.s-menu, .vsm.select {
     padding: 0 2.5px; }
-  /* line 87, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn:not(.major), .s-menu:not(.major) {
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    background-color: #b3b3b3;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    display: inline-block;
-    color: #fff;
-    /*    &:not(.disabled) {
-            &:not(.paused) {
-                &:hover {
-                    .icon {
-                        color: pullForward($ic, $ltGamma);
-                    }
-                }
-            }
-        }*/ }
-    /* line 14, ../sass/_mixins.scss */
-    .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover {
-      background-color: #0099cc; }
-    /* line 26, ../sass/_mixins.scss */
-    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon {
-      color: #fff; }
-  /* line 91, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.major, .major.s-menu, .overlay .bottom-bar .s-btn.major, .overlay .bottom-bar .major.s-menu {
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
+  /* line 88, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.major, .major.s-menu, .major.select {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
     background-color: #0099cc;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     display: inline-block;
-    color: white;
-    /*    &:not(.disabled) {
-            &:not(.paused) {
-                &:hover {
-                    .icon {
-                        color: pullForward($ic, $ltGamma);
-                    }
-                }
-            }
-        }*/ }
-    /* line 14, ../sass/_mixins.scss */
-    .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .overlay .bottom-bar .s-btn.major:not(.disabled):hover, .overlay .bottom-bar .major.s-menu:not(.disabled):hover {
-      background-color: #0099cc; }
-    /* line 26, ../sass/_mixins.scss */
-    .s-btn.major .icon, .major.s-menu .icon, .overlay .bottom-bar .s-btn.major .icon, .overlay .bottom-bar .major.s-menu .icon {
-      color: white; }
-  /* line 97, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.paused, .paused.s-menu {
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    background-color: #c56f01;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    display: inline-block;
-    color: #fff;
-    /*    &:not(.disabled) {
-            &:not(.paused) {
-                &:hover {
-                    .icon {
-                        color: pullForward($ic, $ltGamma);
-                    }
-                }
-            }
-        }*/ }
-    /* line 14, ../sass/_mixins.scss */
-    .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover {
-      background-color: #0099cc; }
-    /* line 26, ../sass/_mixins.scss */
-    .s-btn.paused .icon, .paused.s-menu .icon {
+    color: #fff; }
+    /* line 17, ../sass/_mixins.scss */
+    .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
       color: #fff; }
-    /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
-    .s-btn.paused .icon:before, .paused.s-menu .icon:before {
+    /* line 21, ../sass/_mixins.scss */
+    .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
+      background-color: deepskyblue; }
+  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    background-color: #a3a3a3;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block;
+    color: #fff; }
+    /* line 17, ../sass/_mixins.scss */
+    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
+      color: #fff; }
+    /* line 21, ../sass/_mixins.scss */
+    .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
+      background-color: #0099cc; }
+  /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.paused, .paused.s-menu, .paused.select {
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    background-color: #c56f01;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block;
+    color: #fff; }
+    /* line 17, ../sass/_mixins.scss */
+    .s-btn.paused .icon, .paused.s-menu .icon, .paused.select .icon {
+      color: #fff; }
+    /* line 21, ../sass/_mixins.scss */
+    .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover, .paused.select:not(.disabled):hover {
+      background-color: #f88c01; }
+    /* line 101, ../../../../general/res/sass/controls/_buttons.scss */
+    .s-btn.paused .icon:before, .paused.s-menu .icon:before, .paused.select .icon:before {
       content: "\0000EF"; }
-  /* line 104, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.pause-play, .pause-play.s-menu {
+  /* line 106, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.pause-play, .pause-play.s-menu, .pause-play.select {
     /*
     	&.paused {
     		.icon {
@@ -1447,39 +1453,39 @@ mct-container {
     		}
     	}
     */ }
-    /* line 112, ../../../../general/res/sass/controls/_buttons.scss */
-    .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before {
+    /* line 114, ../../../../general/res/sass/controls/_buttons.scss */
+    .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before, .pause-play.select .icon:before {
       content: "\0000F1"; }
-  /* line 118, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before {
+  /* line 120, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before, .show-thumbs.select .icon:before {
     content: "\000039"; }
 
-/* line 124, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 126, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
-  /* line 130, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .s-btn, .l-btn-set .s-menu {
+  /* line 132, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .s-btn, .l-btn-set .s-menu, .l-btn-set .select {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
-  /* line 136, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu {
-    -moz-border-radius-topleft: 3px;
-    -webkit-border-top-left-radius: 3px;
-    border-top-left-radius: 3px;
-    -moz-border-radius-bottomleft: 3px;
-    -webkit-border-bottom-left-radius: 3px;
-    border-bottom-left-radius: 3px;
+  /* line 138, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu, .l-btn-set .first .select {
+    -moz-border-radius-topleft: 4px;
+    -webkit-border-top-left-radius: 4px;
+    border-top-left-radius: 4px;
+    -moz-border-radius-bottomleft: 4px;
+    -webkit-border-bottom-left-radius: 4px;
+    border-bottom-left-radius: 4px;
     margin-left: 0; }
-  /* line 143, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu {
-    -moz-border-radius-topright: 3px;
-    -webkit-border-top-right-radius: 3px;
-    border-top-right-radius: 3px;
-    -moz-border-radius-bottomright: 3px;
-    -webkit-border-bottom-right-radius: 3px;
-    border-bottom-right-radius: 3px; }
+  /* line 145, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu, .l-btn-set .last .select {
+    -moz-border-radius-topright: 4px;
+    -webkit-border-top-right-radius: 4px;
+    border-top-right-radius: 4px;
+    -moz-border-radius-bottomright: 4px;
+    -webkit-border-bottom-right-radius: 4px;
+    border-bottom-right-radius: 4px; }
 
 /*********************************** LAYOUT STYLES */
 /*
@@ -1629,9 +1635,9 @@ a.s-btn span {
     margin-top: 0; }
   /* line 57, ../../../../general/res/sass/controls/_controls.scss */
   .accordion .accordion-head {
-    -moz-border-radius: 1.5px;
-    -webkit-border-radius: 1.5px;
-    border-radius: 1.5px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -1687,7 +1693,7 @@ a.s-btn span {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  border-left: 1px solid white;
+  border-left: 1px solid rgba(102, 102, 102, 0.2);
   display: inline-block;
   padding: 0 5px;
   position: relative; }
@@ -1724,9 +1730,9 @@ label.checkbox.custom {
     min-width: 14px; }
     /* line 155, ../../../../general/res/sass/controls/_controls.scss */
     label.checkbox.custom em:before {
-      -moz-border-radius: 1.5px;
-      -webkit-border-radius: 1.5px;
-      border-radius: 1.5px;
+      -moz-border-radius: 3px;
+      -webkit-border-radius: 3px;
+      border-radius: 3px;
       background: white;
       border-bottom: 1px solid white;
       box-sizing: border-box;
@@ -1775,7 +1781,7 @@ label.checkbox.custom {
     margin-left: 0; }
 
 /* line 207, ../../../../general/res/sass/controls/_controls.scss */
-.s-menu label.checkbox.custom {
+.s-menu label.checkbox.custom, .select label.checkbox.custom {
   margin-left: 5px; }
 
 /* line 212, ../../../../general/res/sass/controls/_controls.scss */
@@ -1872,9 +1878,7 @@ label.checkbox.custom {
   -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
   -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
   box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  background-color: rgba(0, 0, 0, 0.4);
-  border-bottom: 1px solid rgba(77, 77, 77, 0.4);
-  border-right: 1px solid rgba(77, 77, 77, 0.4);
+  background-color: rgba(0, 0, 0, 0.5);
   height: 50%;
   width: auto;
   position: absolute;
@@ -1884,27 +1888,22 @@ label.checkbox.custom {
   left: 0; }
 /* line 308, ../../../../general/res/sass/controls/_controls.scss */
 .slider .knob {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  background-color: #fff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  background-color: #a3a3a3;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: inline-block;
   color: #fff;
-  /*    &:not(.disabled) {
-          &:not(.paused) {
-              &:hover {
-                  .icon {
-                      color: pullForward($ic, $ltGamma);
-                  }
-              }
-          }
-      }*/
   cursor: ew-resize;
   position: absolute;
   height: 100%;
@@ -1913,10 +1912,7 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 14, ../sass/_mixins.scss */
-  .slider .knob:not(.disabled):hover {
-    background-color: #0099cc; }
-  /* line 26, ../sass/_mixins.scss */
+  /* line 17, ../sass/_mixins.scss */
   .slider .knob .icon {
     color: #fff; }
   /* line 159, ../../../../general/res/sass/_mixins.scss */
@@ -1957,7 +1953,7 @@ label.checkbox.custom {
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
-    border-color: #fff; }
+    border-color: #efefef; }
   /* line 319, ../../../../general/res/sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
@@ -1991,42 +1987,36 @@ label.checkbox.custom {
     -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
     -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
     box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-    background-color: rgba(0, 0, 0, 0.4);
-    border-bottom: 1px solid rgba(77, 77, 77, 0.4);
-    border-right: 1px solid rgba(77, 77, 77, 0.4);
+    background-color: rgba(0, 0, 0, 0.5);
     height: 10px;
     width: 10px; }
 
   /* line 351, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JjYmNiYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FmYWZhZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #ffffff), color-stop(100%, #ffffff));
-    background-image: -moz-linear-gradient(#ffffff, #ffffff 20px);
-    background-image: -webkit-linear-gradient(#ffffff, #ffffff 20px);
-    background-image: linear-gradient(#ffffff, #ffffff 20px);
-    -moz-border-radius: 1px;
-    -webkit-border-radius: 1px;
-    border-radius: 1px;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #bcbcbc), color-stop(100%, #afafaf));
+    background-image: -moz-linear-gradient(#bcbcbc, #afafaf 20px);
+    background-image: -webkit-linear-gradient(#bcbcbc, #afafaf 20px);
+    background-image: linear-gradient(#bcbcbc, #afafaf 20px);
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border-top: 1px solid white; }
-    /* line 358, ../../../../general/res/sass/controls/_controls.scss */
+    box-sizing: border-box; }
+    /* line 360, ../../../../general/res/sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #ffffff), color-stop(100%, #ffffff));
-      background-image: -moz-linear-gradient(#ffffff, #ffffff 20px);
-      background-image: -webkit-linear-gradient(#ffffff, #ffffff 20px);
-      background-image: linear-gradient(#ffffff, #ffffff 20px); }
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #00ace6), color-stop(100%, #0099cc));
+      background-image: -moz-linear-gradient(#00ace6, #0099cc 20px);
+      background-image: -webkit-linear-gradient(#00ace6, #0099cc 20px);
+      background-image: linear-gradient(#00ace6, #0099cc 20px); }
 
-  /* line 363, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 365, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
-    background: rgba(0, 0, 0, 0.4); } }
+    background: rgba(0, 0, 0, 0.5); } }
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -2083,13 +2073,13 @@ label.checkbox.custom {
  *****************************************************************************/
 /******************************************************** MENU BUTTONS */
 /* line 31, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .icon {
+.s-menu .icon, .select .icon {
   font-size: 120%; }
 /* line 35, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .title-label {
+.s-menu .title-label, .select .title-label {
   margin-left: 3px; }
 /* line 39, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu:after {
+.s-menu:after, .select:after {
   color: rgba(255, 255, 255, 0.5);
   content: '\76';
   display: inline-block;
@@ -2098,14 +2088,14 @@ label.checkbox.custom {
   text-shadow: none;
   vertical-align: top; }
 /* line 50, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu.create-btn .title-label {
+.s-menu.create-btn .title-label, .create-btn.select .title-label {
   font-size: 1rem; }
 /* line 58, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .menu {
+.s-menu .menu, .select .menu {
   left: 0;
   text-align: left; }
   /* line 61, ../../../../general/res/sass/controls/_menus.scss */
-  .s-menu .menu .ui-symbol.icon {
+  .s-menu .menu .ui-symbol.icon, .select .menu .ui-symbol.icon {
     width: 12px; }
 
 /******************************************************** MENUS THEMSELVES */
@@ -2113,116 +2103,110 @@ label.checkbox.custom {
 .menu-element {
   cursor: pointer;
   position: relative; }
-  /* line 74, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 76, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .menu {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
     background-color: white;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     display: inline-block;
-    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
+    box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
     display: block;
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 82, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 85, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 293, ../../../../general/res/sass/_mixins.scss */
+      /* line 319, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
         padding: 0; }
-      /* line 84, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 87, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .menu ul li {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         border-top: 1px solid white;
-        color: white;
+        color: #666666;
         line-height: 1.5rem;
         padding: 3px 10px 3px 30px;
         position: relative;
         white-space: nowrap; }
-        /* line 92, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 95, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li:first-child {
           border: none; }
-        /* line 95, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 98, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li:hover {
-          background: white;
+          background: #e6e6e6;
           color: #fff; }
           /* line 101, ../../../../general/res/sass/controls/_menus.scss */
           .menu-element .menu ul li:hover .icon {
             color: #33ccff; }
-        /* line 109, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 105, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li .type-icon {
           left: 10px; }
-  /* line 116, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 112, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .context-menu, .menu-element .checkbox-menu,
   .menu-element .super-menu {
-    pointer-events: auto;
-    background-color: white;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    display: inline-block; }
-    /* line 124, ../../../../general/res/sass/controls/_menus.scss */
+    pointer-events: auto; }
+    /* line 115, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .context-menu ul li, .menu-element .checkbox-menu ul li,
     .menu-element .super-menu ul li {
       padding-left: 25px; }
-      /* line 126, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 117, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .context-menu ul li a, .menu-element .checkbox-menu ul li a,
       .menu-element .super-menu ul li a {
-        color: white; }
-      /* line 129, ../../../../general/res/sass/controls/_menus.scss */
+        color: #4d4d4d; }
+      /* line 120, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .context-menu ul li .icon, .menu-element .checkbox-menu ul li .icon,
       .menu-element .super-menu ul li .icon {
-        color: #24c8ff; }
-      /* line 132, ../../../../general/res/sass/controls/_menus.scss */
+        color: #0099cc; }
+      /* line 123, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .context-menu ul li .type-icon, .menu-element .checkbox-menu ul li .type-icon,
       .menu-element .super-menu ul li .type-icon {
         left: 5px; }
-      /* line 135, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 126, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .context-menu ul li:hover .icon, .menu-element .checkbox-menu ul li:hover .icon,
       .menu-element .super-menu ul li:hover .icon {
-        color: #3dcfff; }
-  /* line 144, ../../../../general/res/sass/controls/_menus.scss */
+        color: #00ace6; }
+  /* line 135, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .checkbox-menu ul li {
     padding-left: 50px; }
-    /* line 146, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 137, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .checkbox {
       position: absolute;
       left: 5px;
       top: 0.53333rem; }
-      /* line 151, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 142, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .checkbox-menu ul li .checkbox em {
         height: 0.7rem;
         width: 0.7rem; }
-        /* line 154, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 145, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .checkbox-menu ul li .checkbox em:before {
           font-size: 7px !important;
           height: 0.7rem;
           width: 0.7rem;
           line-height: 0.7rem; }
-    /* line 162, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 153, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .type-icon {
       left: 25px; }
-  /* line 168, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 159, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .super-menu {
     display: block;
     width: 500px;
     height: 480px; }
-    /* line 178, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 168, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .contents {
       overflow: hidden;
       position: absolute;
@@ -2232,12 +2216,12 @@ label.checkbox.custom {
       left: 5px;
       width: auto;
       height: auto; }
-    /* line 181, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 171, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .pane {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box; }
-      /* line 183, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 173, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.left {
         border-right: 1px solid rgba(255, 255, 255, 0.2);
         left: 0;
@@ -2246,24 +2230,22 @@ label.checkbox.custom {
         width: 50%;
         overflow-x: hidden;
         overflow-y: auto; }
-        /* line 193, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 183, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .super-menu .pane.left ul li {
-          -moz-border-radius: 3px;
-          -webkit-border-radius: 3px;
-          border-radius: 3px;
+          -moz-border-radius: 4px;
+          -webkit-border-radius: 4px;
+          border-radius: 4px;
           padding-left: 30px;
           border-top: none; }
-      /* line 200, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 190, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.right {
         left: auto;
         right: 0;
         padding: 25px;
         width: 50%; }
-        /* line 206, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .super-menu .pane.right .icon {
-          color: #fff; }
-    /* line 213, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 200, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.icon {
+      color: #0099cc;
       position: relative;
       font-size: 8em;
       left: 0;
@@ -2271,40 +2253,40 @@ label.checkbox.custom {
       line-height: 150px;
       margin-bottom: 25px;
       text-align: center; }
-    /* line 223, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 211, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.title {
-      color: #fff;
+      color: #666;
       font-size: 1.2em;
       margin-bottom: 0.5em; }
-    /* line 228, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 216, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.description {
-      color: #fff;
+      color: #666;
       font-size: 0.8em;
       line-height: 1.5em; }
-  /* line 237, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 225, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .context-menu, .menu-element .checkbox-menu {
     font-size: 0.80rem; }
 
-/* line 242, ../../../../general/res/sass/controls/_menus.scss */
+/* line 230, ../../../../general/res/sass/controls/_menus.scss */
 .context-menu-holder {
   pointer-events: none;
   position: absolute;
   height: 200px;
   width: 170px;
   z-index: 70; }
-  /* line 248, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 236, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder .context-menu-wrapper {
     position: absolute;
     height: 100%;
     width: 100%; }
-  /* line 255, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 243, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
     right: 0; }
-  /* line 258, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 246, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
     bottom: 0; }
 
-/* line 263, ../../../../general/res/sass/controls/_menus.scss */
+/* line 251, ../../../../general/res/sass/controls/_menus.scss */
 .btn-bar.right .menu,
 .menus-to-left .menu {
   left: auto;
@@ -2361,10 +2343,10 @@ label.checkbox.custom {
     height: 10px; }
     /* line 52, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
-      border-top: 1px solid white; }
+      border-top: 1px solid rgba(102, 102, 102, 0.2); }
       /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
-        background-color: white;
+        background-color: rgba(102, 102, 102, 0.2);
         border: none;
         width: 1px;
         margin-left: -1px; }
@@ -2373,7 +2355,7 @@ label.checkbox.custom {
           margin-left: 0; }
         /* line 62, ../../../../general/res/sass/controls/_time-controller.scss */
         .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
-          color: white;
+          color: rgba(153, 153, 153, 0.2);
           font-size: 0.7em;
           position: absolute;
           margin-left: -25px;
@@ -2466,220 +2448,191 @@ label.checkbox.custom {
  *****************************************************************************/
 /* line 22, ../../../../general/res/sass/forms/_elems.scss */
 .section-header {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  background: rgba(255, 255, 255, 0.1);
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.1);
   color: #999999;
   font-size: 0.8em;
   padding: 5px 5px;
   text-transform: uppercase; }
 
-/* line 35, ../../../../general/res/sass/forms/_elems.scss */
-.form .form-section {
-  position: relative;
-  margin-bottom: 20px; }
-/* line 40, ../../../../general/res/sass/forms/_elems.scss */
-.form .form-row {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  overflow: hidden;
-  *zoom: 1;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  margin-top: 5px;
-  padding: 5px 0;
-  position: relative; }
-  /* line 48, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row.first {
-    border-top: none; }
-  /* line 52, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row > .label,
-  .form .form-row > .controls {
+/* line 33, ../../../../general/res/sass/forms/_elems.scss */
+.form {
+  color: gray; }
+  /* line 36, ../../../../general/res/sass/forms/_elems.scss */
+  .form .form-section {
+    position: relative;
+    margin-bottom: 20px; }
+  /* line 41, ../../../../general/res/sass/forms/_elems.scss */
+  .form .form-row {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     overflow: hidden;
     *zoom: 1;
-    font-size: 0.8rem;
-    line-height: 22px;
-    min-height: 22px; }
-  /* line 61, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row > .label {
-    float: left;
-    min-width: 120px;
-    position: relative;
-    white-space: nowrap;
-    width: 30%; }
-  /* line 71, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row .value {
-    color: #999999; }
-  /* line 75, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row .controls {
-    float: left;
-    position: relative;
-    width: 69.9%; }
-    /* line 82, ../../../../general/res/sass/forms/_elems.scss */
-    .form .form-row .controls .l-composite-control.l-checkbox {
-      display: inline-block;
-      line-height: 14px;
-      margin-right: 5px; }
-    /* line 91, ../../../../general/res/sass/forms/_elems.scss */
-    .form .form-row .controls .l-med input[type="text"] {
-      width: 200px; }
-    /* line 95, ../../../../general/res/sass/forms/_elems.scss */
-    .form .form-row .controls .l-small input[type="text"] {
-      width: 50px; }
-    /* line 99, ../../../../general/res/sass/forms/_elems.scss */
-    .form .form-row .controls .l-numeric input[type="text"] {
-      text-align: right; }
-    /* line 103, ../../../../general/res/sass/forms/_elems.scss */
-    .form .form-row .controls .select {
-      margin-right: 5px; }
-  /* line 108, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row .field-hints {
-    color: #333333; }
-  /* line 112, ../../../../general/res/sass/forms/_elems.scss */
-  .form .form-row .selector-list {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 5px;
-    position: relative;
-    height: 150px;
-    overflow: auto; }
-    /* line 123, ../../../../general/res/sass/forms/_elems.scss */
-    .form .form-row .selector-list .wrapper {
-      overflow-y: auto;
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      bottom: 5px;
-      left: 5px; }
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    margin-top: 5px;
+    padding: 5px 0;
+    position: relative; }
+    /* line 49, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row.first {
+      border-top: none; }
+    /* line 53, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row > .label,
+    .form .form-row > .controls {
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      overflow: hidden;
+      *zoom: 1;
+      font-size: 0.8rem;
+      line-height: 22px;
+      min-height: 22px; }
+    /* line 62, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row > .label {
+      float: left;
+      min-width: 120px;
+      position: relative;
+      white-space: nowrap;
+      width: 30%; }
+    /* line 72, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .value {
+      color: #666; }
+    /* line 76, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .controls {
+      float: left;
+      position: relative;
+      width: 69.9%; }
+      /* line 83, ../../../../general/res/sass/forms/_elems.scss */
+      .form .form-row .controls .l-composite-control.l-checkbox {
+        display: inline-block;
+        line-height: 14px;
+        margin-right: 5px; }
+      /* line 92, ../../../../general/res/sass/forms/_elems.scss */
+      .form .form-row .controls .l-med input[type="text"] {
+        width: 200px; }
+      /* line 96, ../../../../general/res/sass/forms/_elems.scss */
+      .form .form-row .controls .l-small input[type="text"] {
+        width: 50px; }
+      /* line 100, ../../../../general/res/sass/forms/_elems.scss */
+      .form .form-row .controls .l-numeric input[type="text"] {
+        text-align: right; }
+      /* line 104, ../../../../general/res/sass/forms/_elems.scss */
+      .form .form-row .controls .select {
+        margin-right: 5px; }
+    /* line 109, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .field-hints {
+      color: #333333; }
+    /* line 113, ../../../../general/res/sass/forms/_elems.scss */
+    .form .form-row .selector-list {
+      -moz-appearance: none;
+      -webkit-appearance: none;
+      -moz-border-radius: 4px;
+      -webkit-border-radius: 4px;
+      border-radius: 4px;
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+      -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+      box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+      background: #fff;
+      border: none;
+      color: #666;
+      outline: none;
+      padding: 0 3px;
+      position: relative;
+      height: 150px; }
+      /* line 270, ../../../../general/res/sass/_mixins.scss */
+      .form .form-row .selector-list.error {
+        background: rgba(255, 0, 0, 0.5); }
+      /* line 124, ../../../../general/res/sass/forms/_elems.scss */
+      .form .form-row .selector-list > .wrapper {
+        overflow: auto;
+        position: absolute;
+        top: 5px;
+        right: 5px;
+        bottom: 5px;
+        left: 5px; }
 
-/* line 137, ../../../../general/res/sass/forms/_elems.scss */
+/* line 138, ../../../../general/res/sass/forms/_elems.scss */
 label.form-control.checkbox input {
   margin-right: 5px;
   vertical-align: top; }
 
-/* line 143, ../../../../general/res/sass/forms/_elems.scss */
+/* line 144, ../../../../general/res/sass/forms/_elems.scss */
 .hint,
 .s-hint {
   font-size: 0.9em; }
 
-/* line 148, ../../../../general/res/sass/forms/_elems.scss */
+/* line 149, ../../../../general/res/sass/forms/_elems.scss */
 .l-result {
   display: inline-block;
   min-width: 32px;
   min-height: 32px;
   position: relative;
   vertical-align: top; }
-  /* line 155, ../../../../general/res/sass/forms/_elems.scss */
+  /* line 156, ../../../../general/res/sass/forms/_elems.scss */
   .l-result div.s-hint {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    background: rgba(255, 153, 0, 0.8);
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    background: rgba(255, 34, 0, 0.8);
     display: block;
-    color: #ffd699;
+    color: #ffa799;
     padding: 5px; }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 22, ../../../../general/res/sass/forms/_textarea.scss */
-.edit-main textarea {
+/* line 165, ../../../../general/res/sass/forms/_elems.scss */
+input[type="text"] {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  background: rgba(255, 255, 255, 0.1);
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  background: #fff;
   border: none;
-  color: #999999;
+  color: #666;
+  outline: none;
+  padding: 0 3px; }
+  /* line 270, ../../../../general/res/sass/_mixins.scss */
+  input[type="text"].error {
+    background: rgba(255, 0, 0, 0.5); }
+  /* line 172, ../../../../general/res/sass/forms/_elems.scss */
+  input[type="text"].numeric {
+    text-align: right; }
+
+/* line 177, ../../../../general/res/sass/forms/_elems.scss */
+textarea {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  background: #fff;
+  border: none;
+  color: #666;
   outline: none;
   padding: 5px;
   position: absolute;
   height: 100%;
   width: 100%; }
-  /* line 269, ../../../../general/res/sass/_mixins.scss */
-  .edit-main textarea.error {
+  /* line 270, ../../../../general/res/sass/_mixins.scss */
+  textarea.error {
     background: rgba(255, 0, 0, 0.5); }
 
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/* line 22, ../../../../general/res/sass/forms/_text-input.scss */
-input[type="text"] {
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  color: #999999;
-  outline: none;
-  padding: 0 3px; }
-  /* line 269, ../../../../general/res/sass/_mixins.scss */
-  input[type="text"].error {
-    background: rgba(255, 0, 0, 0.5); }
-  /* line 29, ../../../../general/res/sass/forms/_text-input.scss */
-  input[type="text"].numeric {
-    text-align: right; }
-
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -2702,62 +2655,46 @@ input[type="text"] {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 22, ../../../../general/res/sass/forms/_selects.scss */
-.form-control.select {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  background-color: #fff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+.select {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  background-color: #a3a3a3;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: inline-block;
   color: #fff;
-  /*    &:not(.disabled) {
-          &:not(.paused) {
-              &:hover {
-                  .icon {
-                      color: pullForward($ic, $ltGamma);
-                  }
-              }
-          }
-      }*/
-  cursor: pointer;
-  display: inline-block;
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 14, ../sass/_mixins.scss */
-  .form-control.select:not(.disabled):hover {
-    background-color: #0099cc; }
-  /* line 26, ../sass/_mixins.scss */
-  .form-control.select .icon {
+  /* line 17, ../sass/_mixins.scss */
+  .select .icon {
     color: #fff; }
-  /* line 29, ../../../../general/res/sass/forms/_selects.scss */
-  .form-control.select select {
+  /* line 30, ../../../../general/res/sass/forms/_selects.scss */
+  .select select {
     -moz-appearance: none;
     -webkit-appearance: none;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     background: none;
-    color: #666;
+    color: #fff;
     border: none !important;
-    cursor: pointer;
-    padding: 4px 25px 2px 5px;
+    padding: 4px 25px 2px 0px;
     width: 120%; }
-    /* line 38, ../../../../general/res/sass/forms/_selects.scss */
-    .form-control.select select option {
+    /* line 39, ../../../../general/res/sass/forms/_selects.scss */
+    .select select option {
       margin: 5px 0; }
-  /* line 42, ../../../../general/res/sass/forms/_selects.scss */
-  .form-control.select:after {
-    color: #0099cc;
-    content: "v";
-    display: block;
-    font-family: 'symbolsfont';
-    pointer-events: none;
+  /* line 43, ../../../../general/res/sass/forms/_selects.scss */
+  .select:after {
     position: absolute;
     right: 5px;
     top: 0; }
@@ -2791,27 +2728,27 @@ input[type="text"] {
 .channel-selector .treeview {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  background: rgba(255, 255, 255, 0.1);
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  background: #efefef;
   border: none;
-  color: #999999;
+  color: #666;
   outline: none;
   padding: 0 3px;
-  background: white;
+  background: #f7f7f7;
   border-bottom: 1px solid white;
   min-height: 300px;
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 269, ../../../../general/res/sass/_mixins.scss */
+  /* line 270, ../../../../general/res/sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -2905,7 +2842,7 @@ input[type="text"] {
     font-size: 0.7em; }
 /* line 44, ../../../../general/res/sass/forms/_validation.scss */
 .validates.invalid > .label::after, .validates.invalid.req > .label::after {
-  color: #ff9900;
+  color: #ff2200;
   content: "x"; }
 /* line 51, ../../../../general/res/sass/forms/_validation.scss */
 .validates.valid > .label::after, .validates.valid.req > .label::after {
@@ -2913,7 +2850,7 @@ input[type="text"] {
   content: "2"; }
 /* line 57, ../../../../general/res/sass/forms/_validation.scss */
 .validates.req > .label::after {
-  color: #ffc700;
+  color: #0099cc;
   content: "*"; }
 
 /* line 63, ../../../../general/res/sass/forms/_validation.scss */
@@ -2922,7 +2859,7 @@ input[type="text"] {
 
 /* line 66, ../../../../general/res/sass/forms/_validation.scss */
 span.req {
-  color: #ffc700; }
+  color: #0099cc; }
 
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
@@ -2952,23 +2889,23 @@ span.req {
 .t-filter input.t-filter-input {
   -moz-appearance: none;
   -webkit-appearance: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  box-shadow: inset rgba(0, 0, 0, 0.65) 0 1px 4px;
-  background: rgba(255, 255, 255, 0.1);
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  background: #efefef;
   border: none;
-  color: #999999;
+  color: #666;
   outline: none;
   padding: 0 3px;
-  background: white;
+  background: #f7f7f7;
   border-bottom: 1px solid white; }
-  /* line 269, ../../../../general/res/sass/_mixins.scss */
+  /* line 270, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -2986,9 +2923,9 @@ span.req {
 /* line 42, ../../../../general/res/sass/forms/_filter.scss */
 .filter .icon.ui-symbol,
 .t-filter .icon.ui-symbol {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
   display: inline-block;
   font-size: 1.3em;
   height: 22px;
@@ -3002,9 +2939,9 @@ span.req {
 /* line 54, ../../../../general/res/sass/forms/_filter.scss */
 .filter .s-a-clear.ui-symbol,
 .t-filter .s-a-clear.ui-symbol {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -3086,9 +3023,9 @@ span.req {
 
 /* line 46, ../../../../general/res/sass/user-environ/_layout.scss */
 .editor {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px; }
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px; }
 
 /* line 50, ../../../../general/res/sass/user-environ/_layout.scss */
 .contents {
@@ -3108,33 +3045,38 @@ span.req {
 .bar .icon.major {
   margin-right: 5px; }
 /* line 70, ../../../../general/res/sass/user-environ/_layout.scss */
-.bar.abs, .s-menu span.bar.l-click-area {
+.bar.abs, .s-menu span.bar.l-click-area, .select span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
   /* line 73, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs.left, .s-menu span.bar.left.l-click-area,
+  .bar.abs.left, .s-menu span.bar.left.l-click-area, .select span.bar.left.l-click-area,
   .bar.abs .left,
-  .s-menu span.bar.l-click-area .left {
+  .s-menu span.bar.l-click-area .left,
+  .select span.bar.l-click-area .left {
     width: 45%;
     right: auto; }
   /* line 78, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs.right, .s-menu span.bar.right.l-click-area,
+  .bar.abs.right, .s-menu span.bar.right.l-click-area, .select span.bar.right.l-click-area,
   .bar.abs .right,
-  .s-menu span.bar.l-click-area .right {
+  .s-menu span.bar.l-click-area .right,
+  .select span.bar.l-click-area .right {
     width: 45%;
     left: auto;
     text-align: right; }
     /* line 83, ../../../../general/res/sass/user-environ/_layout.scss */
-    .bar.abs.right .icon.major, .s-menu span.bar.right.l-click-area .icon.major,
+    .bar.abs.right .icon.major, .s-menu span.bar.right.l-click-area .icon.major, .select span.bar.right.l-click-area .icon.major,
     .bar.abs .right .icon.major,
-    .s-menu span.bar.l-click-area .right .icon.major {
+    .s-menu span.bar.l-click-area .right .icon.major,
+    .select span.bar.l-click-area .right .icon.major {
       margin-left: 15px; }
   /* line 89, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs .l-flex .left, .s-menu span.bar.l-click-area .l-flex .left,
+  .bar.abs .l-flex .left, .s-menu span.bar.l-click-area .l-flex .left, .select span.bar.l-click-area .l-flex .left,
   .bar.abs .l-flex .right,
-  .s-menu span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .s-menu span.bar.l-flex.l-click-area .left,
+  .s-menu span.bar.l-click-area .l-flex .right,
+  .select span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .s-menu span.bar.l-flex.l-click-area .left, .select span.bar.l-flex.l-click-area .left,
   .bar.abs.l-flex .right,
-  .s-menu span.bar.l-flex.l-click-area .right {
+  .s-menu span.bar.l-flex.l-click-area .right,
+  .select span.bar.l-flex.l-click-area .right {
     width: auto; }
 
 /* line 98, ../../../../general/res/sass/user-environ/_layout.scss */
@@ -3272,10 +3214,12 @@ span.req {
     overflow: auto;
     top: 64px; }
   /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area,
+  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area, .pane.items .object-browse-bar .select span.left.l-click-area, .select .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .s-menu span.right.l-click-area,
-  .s-menu .pane.items .object-browse-bar span.right.l-click-area {
+  .s-menu .pane.items .object-browse-bar span.right.l-click-area,
+  .pane.items .object-browse-bar .select span.right.l-click-area,
+  .select .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
   /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-holder {
@@ -3305,13 +3249,17 @@ span.req {
       right: 3px; }
 
 /* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
-.object-browse-bar .s-btn, .object-browse-bar .s-menu,
+.object-browse-bar .s-btn, .object-browse-bar .s-menu, .object-browse-bar .select,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu,
+.top-bar .buttons-main .select,
 .top-bar .s-menu,
+.top-bar .select,
 .tool-bar .s-btn,
 .tool-bar .s-menu,
-.tool-bar .s-menu {
+.tool-bar .select,
+.tool-bar .s-menu,
+.tool-bar .select {
   height: 25px;
   line-height: 25px;
   vertical-align: top; }
@@ -3393,7 +3341,7 @@ span.req {
 
   /* line 31, ../../../../general/res/sass/mobile/_layout.scss */
   .pane.left.treeview {
-    background-color: #222; }
+    background-color: #eaeaea; }
 
   /* line 35, ../../../../general/res/sass/mobile/_layout.scss */
   .pane.right-repr {
@@ -3706,13 +3654,13 @@ span.req {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 23, ../../../../general/res/sass/search/_search.scss */
-.abs.search-holder, .s-menu span.search-holder.l-click-area {
+.abs.search-holder, .s-menu span.search-holder.l-click-area, .select span.search-holder.l-click-area {
   height: 25px;
   bottom: 0;
   top: 23px;
   z-index: 5; }
   /* line 27, ../../../../general/res/sass/search/_search.scss */
-  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area {
+  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area, .select span.search-holder.active.l-click-area {
     height: auto;
     bottom: 0; }
 
@@ -3812,9 +3760,9 @@ span.req {
       visibility: visible; }
   /* line 178, ../../../../general/res/sass/search/_search.scss */
   .search .active-filter-display {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
@@ -3920,17 +3868,17 @@ span.req {
   z-index: 100; }
 /* line 32, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay > .holder {
-  background-color: #fff;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
+  background-color: #efefef;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: inline-block;
-  -moz-border-radius: 6px;
-  -webkit-border-radius: 6px;
-  border-radius: 6px;
+  -moz-border-radius: 12px;
+  -webkit-border-radius: 12px;
+  border-radius: 12px;
   color: #666;
   top: 15%;
   right: 15%;
@@ -3969,24 +3917,37 @@ span.req {
   height: 30px;
   text-align: right; }
   /* line 66, ../../../../general/res/sass/overlay/_overlay.scss */
-  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu {
-    background-color: white;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    display: inline-block;
+  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu, .overlay .bottom-bar .select {
     font-size: 95%;
     height: 30px;
     line-height: 30px;
     margin-left: 5px;
     padding: 0 15px; }
-    /* line 14, ../sass/_mixins.scss */
-    .overlay .bottom-bar .s-btn:not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.disabled):hover {
-      background-color: #0099cc; }
-/* line 82, ../../../../general/res/sass/overlay/_overlay.scss */
+    /* line 68, ../../../../general/res/sass/overlay/_overlay.scss */
+    .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major), .overlay .bottom-bar .select:not(.major) {
+      -moz-user-select: -moz-none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+      -moz-border-radius: 4px;
+      -webkit-border-radius: 4px;
+      border-radius: 4px;
+      background-color: #898989;
+      -moz-border-radius: 4px;
+      -webkit-border-radius: 4px;
+      border-radius: 4px;
+      -moz-box-sizing: border-box;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      display: inline-block;
+      color: #fff; }
+      /* line 17, ../sass/_mixins.scss */
+      .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon, .overlay .bottom-bar .select:not(.major) .icon {
+        color: #fff; }
+      /* line 21, ../sass/_mixins.scss */
+      .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
+        background-color: #6f6f6f; }
+/* line 84, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
   top: 5px;
   right: 5px;
@@ -4062,7 +4023,7 @@ ul.tree {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none; }
-  /* line 293, ../../../../general/res/sass/_mixins.scss */
+  /* line 319, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -4081,9 +4042,9 @@ ul.tree {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
   -moz-transition: background-color 0.25s;
   -o-transition: background-color 0.25s;
   -webkit-transition: background-color 0.25s;
@@ -4196,15 +4157,15 @@ ul.tree {
   .tree-item.selected,
   .search-result-item.selected {
     background: #1ac6ff;
-    color: #fff; }
+    color: #efefef; }
     /* line 131, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.selected .view-control,
     .search-result-item.selected .view-control {
-      color: #fff; }
+      color: #efefef; }
     /* line 134, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.selected .label .type-icon,
     .search-result-item.selected .label .type-icon {
-      color: #fff; }
+      color: #efefef; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 142, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item:not(.selected):hover,
@@ -4311,18 +4272,18 @@ ul.tree {
  *****************************************************************************/
 /* line 25, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame.child-frame.panel {
-  background: #fff;
-  border: 1px solid white; }
+  background: #efefef;
+  border: 1px solid rgba(102, 102, 102, 0.2); }
   /* line 28, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.child-frame.panel:hover {
-    border-color: white; }
+    border-color: rgba(128, 128, 128, 0.2); }
 /* line 32, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame > .object-header.abs, .s-menu .frame > span.object-header.l-click-area {
+.frame > .object-header.abs, .s-menu .frame > span.object-header.l-click-area, .select .frame > span.object-header.l-click-area {
   font-size: 0.75em;
   height: 16px;
   line-height: 16px; }
 /* line 38, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame > .object-holder.abs, .s-menu .frame > span.object-holder.l-click-area {
+.frame > .object-holder.abs, .s-menu .frame > span.object-holder.l-click-area, .select .frame > span.object-holder.l-click-area {
   top: 21px; }
 /* line 41, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame .contents {
@@ -4368,29 +4329,31 @@ ul.tree {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 23, ../../../../general/res/sass/user-environ/_top-bar.scss */
-.top-bar.browse, .top-bar.edit {
-  border-bottom: 1px solid white;
-  top: 10px;
-  right: 10px;
-  bottom: auto;
-  left: 10px;
-  height: 30px;
-  line-height: 24px; }
-/* line 31, ../../../../general/res/sass/user-environ/_top-bar.scss */
-.top-bar .title {
-  color: #fff; }
-/* line 35, ../../../../general/res/sass/user-environ/_top-bar.scss */
-.top-bar .buttons-main {
-  font-size: 0.8em;
-  left: auto;
-  text-align: right; }
+/* line 22, ../../../../general/res/sass/user-environ/_top-bar.scss */
+.top-bar {
+  /*	.title {
+  		color: #fff;
+  	}*/ }
+  /* line 23, ../../../../general/res/sass/user-environ/_top-bar.scss */
+  .top-bar.browse, .top-bar.edit {
+    border-bottom: 1px solid rgba(102, 102, 102, 0.2);
+    top: 10px;
+    right: 10px;
+    bottom: auto;
+    left: 10px;
+    height: 30px;
+    line-height: 24px; }
+  /* line 35, ../../../../general/res/sass/user-environ/_top-bar.scss */
+  .top-bar .buttons-main {
+    font-size: 0.8em;
+    left: auto;
+    text-align: right; }
 
 /* line 48, ../../../../general/res/sass/user-environ/_top-bar.scss */
 .edit-mode .top-bar .buttons-main {
   white-space: nowrap; }
   /* line 52, ../../../../general/res/sass/user-environ/_top-bar.scss */
-  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .s-menu span.buttons-main.l-click-area, .s-menu .edit-mode .top-bar span.buttons-main.l-click-area {
+  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .s-menu span.buttons-main.l-click-area, .s-menu .edit-mode .top-bar span.buttons-main.l-click-area, .edit-mode .top-bar .select span.buttons-main.l-click-area, .select .edit-mode .top-bar span.buttons-main.l-click-area {
     bottom: auto;
     left: auto; }
 
@@ -4497,7 +4460,7 @@ ul.tree {
  *****************************************************************************/
 /* line 22, ../../../../general/res/sass/user-environ/_tool-bar.scss */
 .tool-bar {
-  border-bottom: 1px solid white; }
+  border-bottom: 1px solid rgba(102, 102, 102, 0.2); }
   /* line 24, ../../../../general/res/sass/user-environ/_tool-bar.scss */
   .tool-bar .l-control-group {
     height: 25px; }
@@ -4706,7 +4669,7 @@ table {
   .tabular thead, .tabular .thead,
   table thead,
   table .thead {
-    border-bottom: 1px solid #fff; }
+    border-bottom: 1px solid #efefef; }
   /* line 47, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular tbody, .tabular .tbody,
   table tbody,
@@ -4755,7 +4718,7 @@ table {
     table .tr th,
     table .tr .th {
       background-color: white;
-      border-left: 1px solid #fff;
+      border-left: 1px solid #efefef;
       color: white;
       padding: 5px 5px;
       white-space: nowrap;
@@ -4945,9 +4908,9 @@ table {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
     background: black;
     color: #b3b3b3;
     padding: 2px 5px;
@@ -4968,7 +4931,7 @@ table {
     bottom: 37px;
     left: 60px;
     cursor: crosshair;
-    border: 1px solid white; }
+    border: 1px solid rgba(102, 102, 102, 0.2); }
   /* line 86, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-label,
   .gl-plot .l-plot-label {
@@ -5123,7 +5086,7 @@ table {
   padding: 0px 5px; }
   /* line 227, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-legend .plot-legend-item .plot-color-swatch {
-    border: 1px solid #fff;
+    border: 1px solid #efefef;
     height: 9px;
     width: 9px; }
 
@@ -5297,27 +5260,22 @@ table {
     top: 0; }
   /* line 29, ../../../../general/res/sass/items/_item.scss */
   .items-holder .item.grid-item {
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    background-color: #b3b3b3;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    background-color: #a3a3a3;
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     display: inline-block;
     color: #fff;
-    /*    &:not(.disabled) {
-            &:not(.paused) {
-                &:hover {
-                    .icon {
-                        color: pullForward($ic, $ltGamma);
-                    }
-                }
-            }
-        }*/
     box-sizing: border-box;
     cursor: pointer;
     float: left;
@@ -5326,12 +5284,12 @@ table {
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 14, ../sass/_mixins.scss */
-    .items-holder .item.grid-item:not(.disabled):hover {
-      background-color: #0099cc; }
-    /* line 26, ../sass/_mixins.scss */
+    /* line 17, ../sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
       color: #fff; }
+    /* line 21, ../sass/_mixins.scss */
+    .items-holder .item.grid-item:not(.disabled):hover {
+      background-color: #fff; }
     /* line 47, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: deepskyblue; }
@@ -5435,32 +5393,24 @@ table {
       font-size: 0.8em; }
     /* line 138, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
-      -moz-border-radius: 3px;
-      -webkit-border-radius: 3px;
-      border-radius: 3px;
+      -moz-user-select: -moz-none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+      -moz-border-radius: 4px;
+      -webkit-border-radius: 4px;
+      border-radius: 4px;
       background-color: #0099cc;
-      -moz-border-radius: 3px;
-      -webkit-border-radius: 3px;
-      border-radius: 3px;
+      -moz-border-radius: 4px;
+      -webkit-border-radius: 4px;
+      border-radius: 4px;
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
       display: inline-block;
       color: #fff;
-      /*    &:not(.disabled) {
-              &:not(.paused) {
-                  &:hover {
-                      .icon {
-                          color: pullForward($ic, $ltGamma);
-                      }
-                  }
-              }
-          }*/
       color: #80dfff; }
-      /* line 14, ../sass/_mixins.scss */
-      .items-holder .item.grid-item.selected:not(.disabled):hover {
-        background-color: #0099cc; }
-      /* line 26, ../sass/_mixins.scss */
+      /* line 17, ../sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
         color: #fff; }
       /* line 143, ../../../../general/res/sass/items/_item.scss */
@@ -5604,7 +5554,7 @@ table {
 .autoflow {
   font-size: 0.75rem; }
   /* line 32, ../../../../general/res/sass/_autoflow.scss */
-  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu {
+  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu, .autoflow:hover .l-autoflow-header .change-column-width.select {
     -moz-transition-property: visibility, opacity, background-color, border-color;
     -o-transition-property: visibility, opacity, background-color, border-color;
     -webkit-transition-property: visibility, opacity, background-color, border-color;
@@ -5628,7 +5578,7 @@ table {
     .autoflow .l-autoflow-header span {
       vertical-align: middle; }
     /* line 48, ../../../../general/res/sass/_autoflow.scss */
-    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu {
+    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu, .autoflow .l-autoflow-header .change-column-width.select {
       -moz-transition-property: visibility, opacity, background-color, border-color;
       -o-transition-property: visibility, opacity, background-color, border-color;
       -webkit-transition-property: visibility, opacity, background-color, border-color;
@@ -5659,7 +5609,7 @@ table {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
-      border-left: 1px solid white;
+      border-left: 1px solid rgba(102, 102, 102, 0.2);
       display: inline-block;
       padding-left: 5px;
       padding-right: 5px;
@@ -5696,7 +5646,7 @@ table {
           color: gray; }
         /* line 101, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.first-in-group {
-          border-top: 1px solid white; }
+          border-top: 1px solid rgba(153, 153, 153, 0.2); }
         /* line 104, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item {
           display: block; }
@@ -5931,35 +5881,6 @@ table {
   font-size: 0.65em;
   vertical-align: top; }
 
-/* line 2, ../sass/_controls.scss */
-.s-btn.major, .major.s-menu, .overlay .bottom-bar .s-btn.major, .overlay .bottom-bar .major.s-menu {
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  background-color: #0099cc;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  display: inline-block;
-  color: white;
-  /*    &:not(.disabled) {
-          &:not(.paused) {
-              &:hover {
-                  .icon {
-                      color: pullForward($ic, $ltGamma);
-                  }
-              }
-          }
-      }*/ }
-  /* line 14, ../sass/_mixins.scss */
-  .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .overlay .bottom-bar .s-btn.major:not(.disabled):hover, .overlay .bottom-bar .major.s-menu:not(.disabled):hover {
-    background-color: #0099cc; }
-  /* line 26, ../sass/_mixins.scss */
-  .s-btn.major .icon, .major.s-menu .icon, .overlay .bottom-bar .s-btn.major .icon, .overlay .bottom-bar .major.s-menu .icon {
-    color: white; }
-  /* line 6, ../sass/_controls.scss */
-  .s-btn.major .title-label, .major.s-menu .title-label, .overlay .bottom-bar .s-btn.major .title-label, .overlay .bottom-bar .major.s-menu .title-label {
-    text-transform: uppercase; }
+/* line 3, ../sass/_controls.scss */
+.s-btn.major .title-label, .major.s-menu .title-label, .major.select .title-label {
+  text-transform: uppercase; }
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index e8c2dc4663..b779ea10fc 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -1,41 +1,53 @@
+$basicCr: 4px;
+$controlCr: $basicCr;
 /************************** COLORS AND SHADING */
-$colorBodyBg: #fff;
+$colorBodyBg: #efefef;
+$colorGenBg: #fff; // NEW
 $colorBodyFg: #666;
 $colorFooterBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
+$colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $contrastRatioPercent: 30%;
 
 // Buttons
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
-$colorBtnFg: $colorBodyBg; //pullForward($colorBodyFg, $contrastRatioPercent);
+$colorBtnFg: #fff;
+$colorBtnMajorBg: $colorKey;
+$colorBtnMajorFg: $colorKeyFg;
 $colorBtnIcon: $colorBtnFg;
 $colorInvokeMenu: #000;
 $contrastInvokeMenuPercent: 50%;
 
-$colorAlt1: #ffc700;
+$colorAlt1: #ff6600;
 $colorAlert: #ff3c00;
 $colorIconLink: #49dedb;
 $colorPausedBg: #c56f01;
 $colorPausedFg: #fff;
 $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#fff, 0.05);
-$colorFormLines: rgba(#fff, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.2);
 $colorInvokeMenu: #fff;
 // Menu colors
-$colorMenuBg: lighten($colorBodyBg, 23%);
-$colorMenuFg: lighten($colorMenuBg, 70%);
-$colorMenuIc: lighten($colorKey, 17%);
-$colorInteriorBorder: lighten($colorBodyBg, 10%);
-$colorObjFrameBg: darken($colorBodyBg, 5%);
+$colorMenuBg: pushBack($colorBodyBg, 10%);
+$colorMenuFg: pullForward($colorMenuBg, 70%);
+$colorMenuIc: $colorKey;
+$colorMenuHov: pullForward($colorMenuBg, 10%);
+$colorCreateMenuLgIcon: $colorKey;
+$colorCreateMenuText: $colorBodyFg;
+$shdwMenu: rgba(black, 0.5) 0 1px 5px;
+$shdwMenuText: none;
 // Form colors
 $colorCheck: $colorKey;
-$colorFormRequired: #ffc700;
+$colorFormRequired: $colorKey;
 $colorFormValid: #33cc33;
 $colorFormError: #cc0000;
-$colorFormInvalid: #ff9900;
+$colorFormInvalid: #ff2200;
+$colorFormLines: rgba(#fff, 0.1); // MOVED
+$colorFormSectionHeader: rgba(#000, 0.1);
+$colorInputBg: $colorGenBg;
+$colorInputFg: $colorBodyFg;
+$colorFormText: pushBack($colorBodyFg, 10%);
 // Limits and staleness colors
 $colorLimitYellow: #9d7500;
 $colorLimitRed: #aa0000;
@@ -48,9 +60,11 @@ $colorInfoBubbleBg: #ddd;
 $colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
 $colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
 // Overlay
-$colorOvrBlocker: rgba(black, 0.7);
-$colorOvrBg: pullForward($colorBodyBg, 10%);
+$colorOvrBlocker: rgba(black, 0.7);//
+$colorOvrBg: $colorBodyBg;
 $colorOvrFg: $colorBodyFg;
+$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
+$colorOvrBtnFg: #fff;
 // Items
 $colorItemBg: $colorBtnBg; //pullForward($colorBodyBg, 15%);
 $colorItemFg: $colorBtnFg; //lighten($colorItemBg, 20%);
@@ -78,9 +92,15 @@ $colorItemTreeVC: $colorBodyFg;
 $colorItemTreeSelectedVC: $colorBodyBg;
 $shdwItemTreeIcon: none;
 // Scrollbar
-$scrollbarTrackColorBg: rgba(#000, 0.4);
+$scrollbarTrackSize: 10px;
+$scrollbarTrackColorBg: rgba(#000, 0.5);
+$scrollbarThumbColor: darken($colorBodyBg, 25%);//
+$scrollbarThumbColorHov: $colorKey;
 // Splitter
 $splitterShdw: none;
 $colorSplitterInterior: $colorBodyBg;
 $colorSplitterHover: $colorKey;
-$colorGrippyInteriorHover: $colorBodyBg;
\ No newline at end of file
+$colorGrippyInteriorHover: $colorBodyBg;
+
+/********************************* MOBILE */
+$colorMobilePaneLeft: darken($colorBodyBg, 2%);
\ No newline at end of file
diff --git a/platform/commonUI/themes/snow/res/sass/_controls.scss b/platform/commonUI/themes/snow/res/sass/_controls.scss
index e06fbf1046..4ff28bbfaa 100644
--- a/platform/commonUI/themes/snow/res/sass/_controls.scss
+++ b/platform/commonUI/themes/snow/res/sass/_controls.scss
@@ -1,8 +1,5 @@
 .s-btn {
 	&.major {
-		$bg: $colorKey;
-		$fg: lighten($bg, 70%);
-		@include btnSubtle($bg, $fg, $fg, 0);
 		.title-label {
 			text-transform: uppercase;
 		}
diff --git a/platform/commonUI/themes/snow/res/sass/_mixins.scss b/platform/commonUI/themes/snow/res/sass/_mixins.scss
index 5da0a0d4f9..be6918437d 100644
--- a/platform/commonUI/themes/snow/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/snow/res/sass/_mixins.scss
@@ -1,4 +1,4 @@
-@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false, $contrastRatioPercent: 20%) {
+@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
     $hovRatio: 5%;
     $bgBase: $bg; //pullForward($bg, $contrastRatioPercent);
     $fgBase: $fg; //pushBack($bg, $contrastRatioPercent);
@@ -6,35 +6,22 @@
     background-color: $bgBase;
     @include border-radius($controlCr);
     @include box-sizing(border-box);
-    //@include boxShdwSubtle();
-    //border: none;
-    //border-top: 1px solid lighten($gradC1, 2%);
     display: inline-block;
-    @if $hover == true {
-        &:not(.disabled):hover {
-            background-color: $colorKey; //pullForward($bgBase, $hovRatio);
-            //color: pushBack($fgBase, $hovRatio);
-        }
-    }
 }
 
-@mixin btnSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $ic: $colorBtnIcon, $contrastRatioPercent: 20%) {
-    // $ic: Icon color
+@mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
+	@include user-select(none);
     @include border-radius($controlCr);
-    @include containerSubtle($bg, $fg, true, 30%);
+    @include containerSubtle($bg, $fg);
     color: $ic;
     .icon {
         color: $ic;
     }
-/*    &:not(.disabled) {
-        &:not(.paused) {
-            &:hover {
-                .icon {
-                    color: pullForward($ic, $ltGamma);
-                }
-            }
-        }
-    }*/
+	@if $bgHov != none {
+		&:not(.disabled):hover {
+			background-color: $bgHov;
+		}
+	}
 }
 
 @function pullForward($c: $colorBodyBg, $p: 20%) {

From 32b895ba62571fd7cc64bd18f68fdb34dee117de Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 9 Sep 2015 16:49:59 -0700
Subject: [PATCH 200/266] [Frontend] IN-PROGRESS Theme changes continuing

open #95
Refactored btnSubtle and containerSubtle mixins
to simplify;
---
 bundles.json                                  |   2 +-
 .../commonUI/general/res/sass/_mixins.scss    |  25 ++
 .../general/res/sass/controls/_controls.scss  |   2 +-
 .../espresso/res/css/theme-espresso.css       | 407 +++++++++---------
 .../themes/espresso/res/sass/_mixins.scss     |  35 +-
 .../themes/snow/res/css/theme-snow.css        | 224 +++++-----
 .../themes/snow/res/sass/_mixins.scss         |  23 +-
 .../themes/snow/res/sass/theme-snow.scss      |   2 +-
 8 files changed, 356 insertions(+), 364 deletions(-)

diff --git a/bundles.json b/bundles.json
index 2860dbde5e..3de757f1c6 100644
--- a/bundles.json
+++ b/bundles.json
@@ -8,7 +8,7 @@
     "platform/commonUI/dialog",
     "platform/commonUI/general",
     "platform/commonUI/inspect",
-    "platform/commonUI/themes/espresso",
+    "platform/commonUI/themes/snow",
     "platform/containment",
     "platform/execution",
     "platform/telemetry",
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 1987619527..805882e572 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -145,6 +145,31 @@
     background-repeat: $repeatDir;
 }
 
+@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
+	background-color: $bg;
+	@include border-radius($controlCr);
+	@include box-sizing(border-box);
+	color: $fg;
+	display: inline-block;
+}
+
+@mixin btnBase($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
+	@include user-select(none);
+	.icon {
+		color: $ic;
+	}
+	@include desktop {
+		@if $bgHov != none {
+			&:not(.disabled):hover {
+				background: $bgHov;
+				.icon {
+					color: lighten($ic, $ltGamma);
+				}
+			}
+		}
+	}
+}
+
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
     //$b: 1px solid lighten($bg, 30%);
     @include border-radius(2px);
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index b2f98860e9..f12eaaf70d 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -263,7 +263,7 @@ label.checkbox.custom {
 	.title-label {
 		//@include test(green, 0.9);
 		@include ellipsize();
-		color: lighten($colorBodyFg, 40%);
+		//color: pushBack($colorBodyFg, 40%);
 		@include webkitProp(flex, '0 1 auto');
 		padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text.
 		//position: relative;
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 47ac9bdafb..36fa9a253f 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -975,7 +975,7 @@ mct-container {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    /* line 185, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -999,7 +999,7 @@ mct-container {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 181, ../../../../general/res/sass/_mixins.scss */
+    /* line 207, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -1029,7 +1029,7 @@ mct-container {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 159, ../../../../general/res/sass/_mixins.scss */
+  /* line 185, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1053,7 +1053,7 @@ mct-container {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 181, ../../../../general/res/sass/_mixins.scss */
+  /* line 207, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1374,118 +1374,109 @@ mct-container {
     padding: 0 2.5px; }
   /* line 88, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.major, .major.s-menu, .major.select {
-    -moz-user-select: -moz-none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
+    background-color: #0099cc;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    color: #fff;
+    display: inline-block;
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00ace6), color-stop(100%, #0099cc));
     background-image: -moz-linear-gradient(#00ace6, #0099cc);
     background-image: -webkit-linear-gradient(#00ace6, #0099cc);
     background-image: linear-gradient(#00ace6, #0099cc);
+    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
+    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
+      color: #fff; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
+        background: linear-gradient(#1ac6ff, #00bfff); }
+        /* line 166, ../../../../general/res/sass/_mixins.scss */
+        .s-btn.major:not(.disabled):hover .icon, .major.s-menu:not(.disabled):hover .icon, .major.select:not(.disabled):hover .icon {
+          color: white; } }
+  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
+    background-color: #454545;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border: none;
-    color: #fff;
+    color: #999;
     display: inline-block;
-    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
-    color: #fff; }
-    /* line 27, ../sass/_mixins.scss */
-    .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
-      color: #fff; }
-    /* line 31, ../sass/_mixins.scss */
-    .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
-      background-color: deepskyblue; }
-      /* line 33, ../sass/_mixins.scss */
-      .s-btn.major:not(.disabled):hover .icon, .major.s-menu:not(.disabled):hover .icon, .major.select:not(.disabled):hover .icon {
-        color: white; }
-  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
-    -moz-user-select: -moz-none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
     background-image: -moz-linear-gradient(#525252, #454545);
     background-image: -webkit-linear-gradient(#525252, #454545);
     background-image: linear-gradient(#525252, #454545);
+    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
+    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
+      color: #0099cc; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
+        background: linear-gradient(#6b6b6b, #5e5e5e); }
+        /* line 166, ../../../../general/res/sass/_mixins.scss */
+        .s-btn:not(.major):not(.disabled):hover .icon, .s-menu:not(.major):not(.disabled):hover .icon, .select:not(.major):not(.disabled):hover .icon {
+          color: #33ccff; } }
+  /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.paused, .paused.s-menu, .paused.select {
+    background-color: #c56f01;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border: none;
-    color: #999;
+    color: #fff;
     display: inline-block;
-    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
-    color: #999; }
-    /* line 27, ../sass/_mixins.scss */
-    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
-      color: #0099cc; }
-    /* line 31, ../sass/_mixins.scss */
-    .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
-      background-color: #0099cc; }
-      /* line 33, ../sass/_mixins.scss */
-      .s-btn:not(.major):not(.disabled):hover .icon, .s-menu:not(.major):not(.disabled):hover .icon, .select:not(.major):not(.disabled):hover .icon {
-        color: #33ccff; }
-  /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.paused, .paused.s-menu, .paused.select {
-    -moz-user-select: -moz-none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RlN2QwMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M1NmYwMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
     background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #de7d01), color-stop(100%, #c56f01));
     background-image: -moz-linear-gradient(#de7d01, #c56f01);
     background-image: -webkit-linear-gradient(#de7d01, #c56f01);
     background-image: linear-gradient(#de7d01, #c56f01);
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
     -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border: none;
-    color: #fff;
-    display: inline-block;
-    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
-    color: #fff; }
-    /* line 27, ../sass/_mixins.scss */
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
+    /* line 159, ../../../../general/res/sass/_mixins.scss */
     .s-btn.paused .icon, .paused.s-menu .icon, .paused.select .icon {
       color: #fff; }
-    /* line 31, ../sass/_mixins.scss */
-    .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover, .paused.select:not(.disabled):hover {
-      background-color: #f88c01; }
-      /* line 33, ../sass/_mixins.scss */
-      .s-btn.paused:not(.disabled):hover .icon, .paused.s-menu:not(.disabled):hover .icon, .paused.select:not(.disabled):hover .icon {
-        color: white; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover, .paused.select:not(.disabled):hover {
+        background: linear-gradient(#fe9815, #f88c01); }
+        /* line 166, ../../../../general/res/sass/_mixins.scss */
+        .s-btn.paused:not(.disabled):hover .icon, .paused.s-menu:not(.disabled):hover .icon, .paused.select:not(.disabled):hover .icon {
+          color: white; } }
     /* line 101, ../../../../general/res/sass/controls/_buttons.scss */
     .s-btn.paused .icon:before, .paused.s-menu .icon:before, .paused.select .icon:before {
       content: "\0000EF"; }
@@ -1882,7 +1873,6 @@ label.checkbox.custom {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: white;
     flex: 0 1 auto;
     -webkit-flex: 0 1 auto;
     padding-right: 0.35em; }
@@ -1933,33 +1923,29 @@ label.checkbox.custom {
   left: 0; }
 /* line 308, ../../../../general/res/sass/controls/_controls.scss */
 .slider .knob {
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #333333));
-  background-image: -moz-linear-gradient(#404040, #333333);
-  background-image: -webkit-linear-gradient(#404040, #333333);
-  background-image: linear-gradient(#404040, #333333);
+  background-color: #333;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
+  color: #999;
+  display: inline-block;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #333333));
+  background-image: -moz-linear-gradient(#404040, #333333);
+  background-image: -webkit-linear-gradient(#404040, #333333);
+  background-image: linear-gradient(#404040, #333333);
   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  border: none;
-  color: #999;
-  display: inline-block;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
   text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
-  color: #999;
   cursor: ew-resize;
   position: absolute;
   height: 100%;
@@ -1968,10 +1954,17 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 27, ../sass/_mixins.scss */
+  /* line 159, ../../../../general/res/sass/_mixins.scss */
   .slider .knob .icon {
     color: #0099cc; }
-  /* line 159, ../../../../general/res/sass/_mixins.scss */
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 164, ../../../../general/res/sass/_mixins.scss */
+    .slider .knob:not(.disabled):hover {
+      background: linear-gradient(#595959, #4d4d4d); }
+      /* line 166, ../../../../general/res/sass/_mixins.scss */
+      .slider .knob:not(.disabled):hover .icon {
+        color: #33ccff; } }
+  /* line 185, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1995,7 +1988,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 181, ../../../../general/res/sass/_mixins.scss */
+  /* line 207, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2164,24 +2157,24 @@ label.checkbox.custom {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhN2E3YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZlNmU2ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7a7a7a), color-stop(100%, #6e6e6e));
-    background-image: -moz-linear-gradient(#7a7a7a, #6e6e6e);
-    background-image: -webkit-linear-gradient(#7a7a7a, #6e6e6e);
-    background-image: linear-gradient(#7a7a7a, #6e6e6e);
+    background-color: #6e6e6e;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
+    color: white;
+    display: inline-block;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhN2E3YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZlNmU2ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-size: 100%;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7a7a7a), color-stop(100%, #6e6e6e));
+    background-image: -moz-linear-gradient(#7a7a7a, #6e6e6e);
+    background-image: -webkit-linear-gradient(#7a7a7a, #6e6e6e);
+    background-image: linear-gradient(#7a7a7a, #6e6e6e);
     -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border: none;
-    color: white;
-    display: inline-block;
     text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
     display: block;
     padding: 3px 0;
@@ -2191,7 +2184,7 @@ label.checkbox.custom {
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 319, ../../../../general/res/sass/_mixins.scss */
+      /* line 345, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2608,7 +2601,7 @@ label.checkbox.custom {
       padding: 0 3px;
       position: relative;
       height: 150px; }
-      /* line 270, ../../../../general/res/sass/_mixins.scss */
+      /* line 296, ../../../../general/res/sass/_mixins.scss */
       .form .form-row .selector-list.error {
         background: rgba(255, 0, 0, 0.5); }
       /* line 124, ../../../../general/res/sass/forms/_elems.scss */
@@ -2665,7 +2658,7 @@ input[type="text"] {
   color: #cccccc;
   outline: none;
   padding: 0 3px; }
-  /* line 270, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
   /* line 172, ../../../../general/res/sass/forms/_elems.scss */
@@ -2693,7 +2686,7 @@ textarea {
   position: absolute;
   height: 100%;
   width: 100%; }
-  /* line 270, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   textarea.error {
     background: rgba(255, 0, 0, 0.5); }
 
@@ -2720,39 +2713,42 @@ textarea {
  *****************************************************************************/
 /* line 22, ../../../../general/res/sass/forms/_selects.scss */
 .select {
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #333333));
-  background-image: -moz-linear-gradient(#404040, #333333);
-  background-image: -webkit-linear-gradient(#404040, #333333);
-  background-image: linear-gradient(#404040, #333333);
+  background-color: #333;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
+  color: #999;
+  display: inline-block;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #333333));
+  background-image: -moz-linear-gradient(#404040, #333333);
+  background-image: -webkit-linear-gradient(#404040, #333333);
+  background-image: linear-gradient(#404040, #333333);
   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  border: none;
-  color: #999;
-  display: inline-block;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
   text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
-  color: #999;
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 27, ../sass/_mixins.scss */
+  /* line 159, ../../../../general/res/sass/_mixins.scss */
   .select .icon {
     color: #0099cc; }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 164, ../../../../general/res/sass/_mixins.scss */
+    .select:not(.disabled):hover {
+      background: linear-gradient(#595959, #4d4d4d); }
+      /* line 166, ../../../../general/res/sass/_mixins.scss */
+      .select:not(.disabled):hover .icon {
+        color: #33ccff; } }
   /* line 30, ../../../../general/res/sass/forms/_selects.scss */
   .select select {
     -moz-appearance: none;
@@ -2823,7 +2819,7 @@ textarea {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 270, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -2980,7 +2976,7 @@ span.req {
   padding: 0 3px;
   background: #3b3b3b;
   border-bottom: 1px solid #4d4d4d; }
-  /* line 270, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -3943,24 +3939,24 @@ span.req {
   z-index: 100; }
 /* line 32, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay > .holder {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #595959), color-stop(100%, #4d4d4d));
-  background-image: -moz-linear-gradient(#595959, #4d4d4d);
-  background-image: -webkit-linear-gradient(#595959, #4d4d4d);
-  background-image: linear-gradient(#595959, #4d4d4d);
+  background-color: #4d4d4d;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
+  color: #e6e6e6;
+  display: inline-block;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #595959), color-stop(100%, #4d4d4d));
+  background-image: -moz-linear-gradient(#595959, #4d4d4d);
+  background-image: -webkit-linear-gradient(#595959, #4d4d4d);
+  background-image: linear-gradient(#595959, #4d4d4d);
   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  border: none;
-  color: #e6e6e6;
-  display: inline-block;
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px;
@@ -4010,42 +4006,39 @@ span.req {
     padding: 0 15px; }
     /* line 68, ../../../../general/res/sass/overlay/_overlay.scss */
     .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major), .overlay .bottom-bar .select:not(.major) {
-      -moz-user-select: -moz-none;
-      -ms-user-select: none;
-      -webkit-user-select: none;
-      user-select: none;
-      -moz-border-radius: 3px;
-      -webkit-border-radius: 3px;
-      border-radius: 3px;
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOGM4YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c8c8c), color-stop(100%, #808080));
-      background-image: -moz-linear-gradient(#8c8c8c, #808080);
-      background-image: -webkit-linear-gradient(#8c8c8c, #808080);
-      background-image: linear-gradient(#8c8c8c, #808080);
+      background-color: gray;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
+      color: #fff;
+      display: inline-block;
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjOGM4YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8c8c8c), color-stop(100%, #808080));
+      background-image: -moz-linear-gradient(#8c8c8c, #808080);
+      background-image: -webkit-linear-gradient(#8c8c8c, #808080);
+      background-image: linear-gradient(#8c8c8c, #808080);
       -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      border: none;
-      color: #fff;
-      display: inline-block;
-      text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
-      color: #fff; }
-      /* line 27, ../sass/_mixins.scss */
+      -moz-user-select: -moz-none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+      text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
+      /* line 159, ../../../../general/res/sass/_mixins.scss */
       .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon, .overlay .bottom-bar .select:not(.major) .icon {
         color: #fff; }
-      /* line 31, ../sass/_mixins.scss */
-      .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
-        background-color: #999999; }
-        /* line 33, ../sass/_mixins.scss */
-        .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover .icon {
-          color: white; }
+      @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+        /* line 164, ../../../../general/res/sass/_mixins.scss */
+        .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
+          background: linear-gradient(#a6a6a6, #999999); }
+          /* line 166, ../../../../general/res/sass/_mixins.scss */
+          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover .icon {
+            color: white; } }
 /* line 84, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
   top: 5px;
@@ -4122,7 +4115,7 @@ ul.tree {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none; }
-  /* line 319, ../../../../general/res/sass/_mixins.scss */
+  /* line 345, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -5360,33 +5353,29 @@ table {
     top: 0; }
   /* line 29, ../../../../general/res/sass/items/_item.scss */
   .items-holder .item.grid-item {
-    -moz-user-select: -moz-none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
-    background-image: -moz-linear-gradient(#4d4d4d, #404040);
-    background-image: -webkit-linear-gradient(#4d4d4d, #404040);
-    background-image: linear-gradient(#4d4d4d, #404040);
+    background-color: #404040;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
     border-radius: 3px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
+    color: #0099cc;
+    display: inline-block;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-size: 100%;
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d4d4d), color-stop(100%, #404040));
+    background-image: -moz-linear-gradient(#4d4d4d, #404040);
+    background-image: -webkit-linear-gradient(#4d4d4d, #404040);
+    background-image: linear-gradient(#4d4d4d, #404040);
     -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    border: none;
-    color: #0099cc;
-    display: inline-block;
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
-    color: #0099cc;
     box-sizing: border-box;
     cursor: pointer;
     float: left;
@@ -5395,15 +5384,16 @@ table {
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 27, ../sass/_mixins.scss */
+    /* line 159, ../../../../general/res/sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
       color: #0099cc; }
-    /* line 31, ../sass/_mixins.scss */
-    .items-holder .item.grid-item:not(.disabled):hover {
-      background-color: #bfbfbf; }
-      /* line 33, ../sass/_mixins.scss */
-      .items-holder .item.grid-item:not(.disabled):hover .icon {
-        color: #33ccff; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      .items-holder .item.grid-item:not(.disabled):hover {
+        background: linear-gradient(#666666, #595959); }
+        /* line 166, ../../../../general/res/sass/_mixins.scss */
+        .items-holder .item.grid-item:not(.disabled):hover .icon {
+          color: #33ccff; } }
     /* line 47, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: deepskyblue; }
@@ -5508,37 +5498,40 @@ table {
       font-size: 0.8em; }
     /* line 138, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
-      -moz-user-select: -moz-none;
-      -ms-user-select: none;
-      -webkit-user-select: none;
-      user-select: none;
-      -moz-border-radius: 3px;
-      -webkit-border-radius: 3px;
-      border-radius: 3px;
-      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-      background-size: 100%;
-      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00ace6), color-stop(100%, #0099cc));
-      background-image: -moz-linear-gradient(#00ace6, #0099cc);
-      background-image: -webkit-linear-gradient(#00ace6, #0099cc);
-      background-image: linear-gradient(#00ace6, #0099cc);
+      background-color: #0099cc;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
+      color: #999;
+      display: inline-block;
+      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+      background-size: 100%;
+      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00ace6), color-stop(100%, #0099cc));
+      background-image: -moz-linear-gradient(#00ace6, #0099cc);
+      background-image: -webkit-linear-gradient(#00ace6, #0099cc);
+      background-image: linear-gradient(#00ace6, #0099cc);
       -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-      border: none;
-      color: #999;
-      display: inline-block;
+      -moz-user-select: -moz-none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
       text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
-      color: #999;
       color: #80dfff; }
-      /* line 27, ../sass/_mixins.scss */
+      /* line 159, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
         color: #0099cc; }
+      @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+        /* line 164, ../../../../general/res/sass/_mixins.scss */
+        .items-holder .item.grid-item.selected:not(.disabled):hover {
+          background: linear-gradient(#1ac6ff, #00bfff); }
+          /* line 166, ../../../../general/res/sass/_mixins.scss */
+          .items-holder .item.grid-item.selected:not(.disabled):hover .icon {
+            color: #33ccff; } }
       /* line 143, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
diff --git a/platform/commonUI/themes/espresso/res/sass/_mixins.scss b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
index 53baf97e3c..cf19f56e2a 100644
--- a/platform/commonUI/themes/espresso/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
@@ -1,41 +1,14 @@
 @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
-	$ltnRatio: 7%;
-	$gradRatio: 5%;
-	$hovRatio: 7%;
-	$bgBase: $bg; //pullForward($bg, $ltnRatio);
-	$fgBase: $fg; // pullForward($fg, $ltnRatio);
-	$gradC1: lighten($bgBase, $gradRatio); // Container should be lighter higher up
-	$gradC2: $bgBase;
-	$cInvokeBase: #fff;
-
-	@include background-image(linear-gradient($gradC1, $gradC2));
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
+	@include containerBase($bg, $fg);
+	@include background-image(linear-gradient(lighten($bg, 5%), $bg));
 	@include boxShdwSubtle();
-	border: none;
-	//border-top: 1px solid lighten($gradC1, 2%);
-	color: $fg;
-	display: inline-block;//
 }
 
 @mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
-	@include user-select(none);
-	@include border-radius($controlCr);
 	@include containerSubtle($bg, $fg);
+	@include btnBase($bg, linear-gradient(lighten($bg, 15%), lighten($bg, 10%)), $fg, $ic);
 	@include text-shadow(rgba(black, 0.3) 0 1px 1px);
-	color: $fg;
-	.icon {
-		color: $ic;
-	}
-	@if $bgHov != none {
-		&:not(.disabled):hover {
-			background-color: $bgHov;
-			.icon {
-				color: lighten($ic, $ltGamma);
-			}
-		}
-	}
-}//
+}
 
 @function pullForward($c: $colorBodyBg, $p: 20%) {
     // For dark interfaces, lighter things come forward - opposite for light interfaces
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 2dedabb03a..dbf1629d51 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -972,7 +972,7 @@ mct-container {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    /* line 185, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -996,7 +996,7 @@ mct-container {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 181, ../../../../general/res/sass/_mixins.scss */
+    /* line 207, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -1026,7 +1026,7 @@ mct-container {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 159, ../../../../general/res/sass/_mixins.scss */
+  /* line 185, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1050,7 +1050,7 @@ mct-container {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 181, ../../../../general/res/sass/_mixins.scss */
+  /* line 207, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1371,13 +1371,6 @@ mct-container {
     padding: 0 2.5px; }
   /* line 88, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.major, .major.s-menu, .major.select {
-    -moz-user-select: -moz-none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
     background-color: #0099cc;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -1385,23 +1378,24 @@ mct-container {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
+    color: #fff;
     display: inline-block;
-    color: #fff; }
-    /* line 17, ../sass/_mixins.scss */
-    .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
-      color: #fff; }
-    /* line 21, ../sass/_mixins.scss */
-    .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
-      background-color: deepskyblue; }
-  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
-    user-select: none;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
+    user-select: none; }
+    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
+      color: #fff; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
+        background: #0099cc; }
+        /* line 166, ../../../../general/res/sass/_mixins.scss */
+        .s-btn.major:not(.disabled):hover .icon, .major.s-menu:not(.disabled):hover .icon, .major.select:not(.disabled):hover .icon {
+          color: white; } }
+  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
     background-color: #a3a3a3;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -1409,23 +1403,24 @@ mct-container {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
+    color: #fff;
     display: inline-block;
-    color: #fff; }
-    /* line 17, ../sass/_mixins.scss */
-    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
-      color: #fff; }
-    /* line 21, ../sass/_mixins.scss */
-    .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
-      background-color: #0099cc; }
-  /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.paused, .paused.s-menu, .paused.select {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
-    user-select: none;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
+    user-select: none; }
+    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
+      color: #fff; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
+        background: #0099cc; }
+        /* line 166, ../../../../general/res/sass/_mixins.scss */
+        .s-btn:not(.major):not(.disabled):hover .icon, .s-menu:not(.major):not(.disabled):hover .icon, .select:not(.major):not(.disabled):hover .icon {
+          color: white; } }
+  /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.paused, .paused.s-menu, .paused.select {
     background-color: #c56f01;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -1433,14 +1428,22 @@ mct-container {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
+    color: #fff;
     display: inline-block;
-    color: #fff; }
-    /* line 17, ../sass/_mixins.scss */
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none; }
+    /* line 159, ../../../../general/res/sass/_mixins.scss */
     .s-btn.paused .icon, .paused.s-menu .icon, .paused.select .icon {
       color: #fff; }
-    /* line 21, ../sass/_mixins.scss */
-    .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover, .paused.select:not(.disabled):hover {
-      background-color: #f88c01; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover, .paused.select:not(.disabled):hover {
+        background: #0099cc; }
+        /* line 166, ../../../../general/res/sass/_mixins.scss */
+        .s-btn.paused:not(.disabled):hover .icon, .paused.s-menu:not(.disabled):hover .icon, .paused.select:not(.disabled):hover .icon {
+          color: white; } }
     /* line 101, ../../../../general/res/sass/controls/_buttons.scss */
     .s-btn.paused .icon:before, .paused.s-menu .icon:before, .paused.select .icon:before {
       content: "\0000EF"; }
@@ -1837,7 +1840,6 @@ label.checkbox.custom {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: #cccccc;
     flex: 0 1 auto;
     -webkit-flex: 0 1 auto;
     padding-right: 0.35em; }
@@ -1888,13 +1890,6 @@ label.checkbox.custom {
   left: 0; }
 /* line 308, ../../../../general/res/sass/controls/_controls.scss */
 .slider .knob {
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
   background-color: #a3a3a3;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
@@ -1902,8 +1897,12 @@ label.checkbox.custom {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  display: inline-block;
   color: #fff;
+  display: inline-block;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
   cursor: ew-resize;
   position: absolute;
   height: 100%;
@@ -1912,10 +1911,17 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 17, ../sass/_mixins.scss */
+  /* line 159, ../../../../general/res/sass/_mixins.scss */
   .slider .knob .icon {
     color: #fff; }
-  /* line 159, ../../../../general/res/sass/_mixins.scss */
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 164, ../../../../general/res/sass/_mixins.scss */
+    .slider .knob:not(.disabled):hover {
+      background: #0099cc; }
+      /* line 166, ../../../../general/res/sass/_mixins.scss */
+      .slider .knob:not(.disabled):hover .icon {
+        color: white; } }
+  /* line 185, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1939,7 +1945,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 181, ../../../../general/res/sass/_mixins.scss */
+  /* line 207, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2115,6 +2121,7 @@ label.checkbox.custom {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
+    color: #4d4d4d;
     display: inline-block;
     -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
     -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
@@ -2127,7 +2134,7 @@ label.checkbox.custom {
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 319, ../../../../general/res/sass/_mixins.scss */
+      /* line 345, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2544,7 +2551,7 @@ label.checkbox.custom {
       padding: 0 3px;
       position: relative;
       height: 150px; }
-      /* line 270, ../../../../general/res/sass/_mixins.scss */
+      /* line 296, ../../../../general/res/sass/_mixins.scss */
       .form .form-row .selector-list.error {
         background: rgba(255, 0, 0, 0.5); }
       /* line 124, ../../../../general/res/sass/forms/_elems.scss */
@@ -2601,7 +2608,7 @@ input[type="text"] {
   color: #666;
   outline: none;
   padding: 0 3px; }
-  /* line 270, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
   /* line 172, ../../../../general/res/sass/forms/_elems.scss */
@@ -2629,7 +2636,7 @@ textarea {
   position: absolute;
   height: 100%;
   width: 100%; }
-  /* line 270, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   textarea.error {
     background: rgba(255, 0, 0, 0.5); }
 
@@ -2656,13 +2663,6 @@ textarea {
  *****************************************************************************/
 /* line 22, ../../../../general/res/sass/forms/_selects.scss */
 .select {
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
   background-color: #a3a3a3;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
@@ -2670,14 +2670,25 @@ textarea {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  display: inline-block;
   color: #fff;
+  display: inline-block;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 17, ../sass/_mixins.scss */
+  /* line 159, ../../../../general/res/sass/_mixins.scss */
   .select .icon {
     color: #fff; }
+  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+    /* line 164, ../../../../general/res/sass/_mixins.scss */
+    .select:not(.disabled):hover {
+      background: #0099cc; }
+      /* line 166, ../../../../general/res/sass/_mixins.scss */
+      .select:not(.disabled):hover .icon {
+        color: white; } }
   /* line 30, ../../../../general/res/sass/forms/_selects.scss */
   .select select {
     -moz-appearance: none;
@@ -2748,7 +2759,7 @@ textarea {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 270, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -2905,7 +2916,7 @@ span.req {
   padding: 0 3px;
   background: #f7f7f7;
   border-bottom: 1px solid white; }
-  /* line 270, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -3875,6 +3886,7 @@ span.req {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
+  color: #666;
   display: inline-block;
   -moz-border-radius: 12px;
   -webkit-border-radius: 12px;
@@ -3925,13 +3937,6 @@ span.req {
     padding: 0 15px; }
     /* line 68, ../../../../general/res/sass/overlay/_overlay.scss */
     .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major), .overlay .bottom-bar .select:not(.major) {
-      -moz-user-select: -moz-none;
-      -ms-user-select: none;
-      -webkit-user-select: none;
-      user-select: none;
-      -moz-border-radius: 4px;
-      -webkit-border-radius: 4px;
-      border-radius: 4px;
       background-color: #898989;
       -moz-border-radius: 4px;
       -webkit-border-radius: 4px;
@@ -3939,14 +3944,22 @@ span.req {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
+      color: #fff;
       display: inline-block;
-      color: #fff; }
-      /* line 17, ../sass/_mixins.scss */
+      -moz-user-select: -moz-none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      user-select: none; }
+      /* line 159, ../../../../general/res/sass/_mixins.scss */
       .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon, .overlay .bottom-bar .select:not(.major) .icon {
         color: #fff; }
-      /* line 21, ../sass/_mixins.scss */
-      .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
-        background-color: #6f6f6f; }
+      @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+        /* line 164, ../../../../general/res/sass/_mixins.scss */
+        .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
+          background: #0099cc; }
+          /* line 166, ../../../../general/res/sass/_mixins.scss */
+          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover .icon {
+            color: white; } }
 /* line 84, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
   top: 5px;
@@ -4023,7 +4036,7 @@ ul.tree {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none; }
-  /* line 319, ../../../../general/res/sass/_mixins.scss */
+  /* line 345, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -5260,13 +5273,6 @@ table {
     top: 0; }
   /* line 29, ../../../../general/res/sass/items/_item.scss */
   .items-holder .item.grid-item {
-    -moz-user-select: -moz-none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
     background-color: #a3a3a3;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -5274,8 +5280,12 @@ table {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    display: inline-block;
     color: #fff;
+    display: inline-block;
+    -moz-user-select: -moz-none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
     box-sizing: border-box;
     cursor: pointer;
     float: left;
@@ -5284,12 +5294,16 @@ table {
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 17, ../sass/_mixins.scss */
+    /* line 159, ../../../../general/res/sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
       color: #fff; }
-    /* line 21, ../sass/_mixins.scss */
-    .items-holder .item.grid-item:not(.disabled):hover {
-      background-color: #fff; }
+    @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      .items-holder .item.grid-item:not(.disabled):hover {
+        background: #0099cc; }
+        /* line 166, ../../../../general/res/sass/_mixins.scss */
+        .items-holder .item.grid-item:not(.disabled):hover .icon {
+          color: white; } }
     /* line 47, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: deepskyblue; }
@@ -5393,13 +5407,6 @@ table {
       font-size: 0.8em; }
     /* line 138, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
-      -moz-user-select: -moz-none;
-      -ms-user-select: none;
-      -webkit-user-select: none;
-      user-select: none;
-      -moz-border-radius: 4px;
-      -webkit-border-radius: 4px;
-      border-radius: 4px;
       background-color: #0099cc;
       -moz-border-radius: 4px;
       -webkit-border-radius: 4px;
@@ -5407,12 +5414,23 @@ table {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
-      display: inline-block;
       color: #fff;
+      display: inline-block;
+      -moz-user-select: -moz-none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
       color: #80dfff; }
-      /* line 17, ../sass/_mixins.scss */
+      /* line 159, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
         color: #fff; }
+      @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
+        /* line 164, ../../../../general/res/sass/_mixins.scss */
+        .items-holder .item.grid-item.selected:not(.disabled):hover {
+          background: #0099cc; }
+          /* line 166, ../../../../general/res/sass/_mixins.scss */
+          .items-holder .item.grid-item.selected:not(.disabled):hover .icon {
+            color: white; } }
       /* line 143, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
diff --git a/platform/commonUI/themes/snow/res/sass/_mixins.scss b/platform/commonUI/themes/snow/res/sass/_mixins.scss
index be6918437d..ddf80cb80c 100644
--- a/platform/commonUI/themes/snow/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/snow/res/sass/_mixins.scss
@@ -1,27 +1,10 @@
 @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    $hovRatio: 5%;
-    $bgBase: $bg; //pullForward($bg, $contrastRatioPercent);
-    $fgBase: $fg; //pushBack($bg, $contrastRatioPercent);
-
-    background-color: $bgBase;
-    @include border-radius($controlCr);
-    @include box-sizing(border-box);
-    display: inline-block;
+	@include containerBase($bg, $fg);
 }
 
 @mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
-	@include user-select(none);
-    @include border-radius($controlCr);
-    @include containerSubtle($bg, $fg);
-    color: $ic;
-    .icon {
-        color: $ic;
-    }
-	@if $bgHov != none {
-		&:not(.disabled):hover {
-			background-color: $bgHov;
-		}
-	}
+	@include containerSubtle($bg, $fg);
+	@include btnBase($bg, $colorKey, $fg, $ic);
 }
 
 @function pullForward($c: $colorBodyBg, $p: 20%) {
diff --git a/platform/commonUI/themes/snow/res/sass/theme-snow.scss b/platform/commonUI/themes/snow/res/sass/theme-snow.scss
index 703db6bed9..2fa943f1fe 100644
--- a/platform/commonUI/themes/snow/res/sass/theme-snow.scss
+++ b/platform/commonUI/themes/snow/res/sass/theme-snow.scss
@@ -33,7 +33,7 @@
 @import "../../../../general/res/sass/mobile/constants";
 @import "constants";
 
-@import "../../../../general/res/sass/main";
+@import "../../../../general/res/sass/main"; //
 @import "controls";
 
 

From 3792dab0f9e33944c8ea557a85fe580aa9d61fbe Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 9 Sep 2015 17:25:10 -0700
Subject: [PATCH 201/266] [Frontend] IN-PROGRESS Theme changes continuing

open #95
Menus sanded and normalized;
---
 .../commonUI/general/res/sass/_mixins.scss    |  52 ++---
 .../general/res/sass/controls/_menus.scss     |  13 +-
 .../espresso/res/css/theme-espresso.css       | 192 ++++++++---------
 .../themes/espresso/res/sass/_constants.scss  |   4 +-
 .../themes/snow/res/css/theme-snow.css        | 194 +++++++++---------
 .../themes/snow/res/sass/_constants.scss      |   4 +-
 6 files changed, 231 insertions(+), 228 deletions(-)

diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 805882e572..6699a116de 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -145,31 +145,6 @@
     background-repeat: $repeatDir;
 }
 
-@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	background-color: $bg;
-	@include border-radius($controlCr);
-	@include box-sizing(border-box);
-	color: $fg;
-	display: inline-block;
-}
-
-@mixin btnBase($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
-	@include user-select(none);
-	.icon {
-		color: $ic;
-	}
-	@include desktop {
-		@if $bgHov != none {
-			&:not(.disabled):hover {
-				background: $bgHov;
-				.icon {
-					color: lighten($ic, $ltGamma);
-				}
-			}
-		}
-	}
-}
-
 @mixin sliderTrack($bg: $scrollbarTrackColorBg) {
     //$b: 1px solid lighten($bg, 30%);
     @include border-radius(2px);
@@ -281,7 +256,32 @@
 	@return percentage($d);
 }
 
-/*********************************************** FORM ELEMENTS */
+/*********************************************** CONTROLS, FORM ELEMENTS */
+
+@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
+	background-color: $bg;
+	@include border-radius($controlCr);
+	@include box-sizing(border-box);
+	color: $fg;
+	display: inline-block;
+}
+
+@mixin btnBase($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
+	@include user-select(none);
+	.icon {
+		color: $ic;
+	}
+	@include desktop {
+		@if $bgHov != none {
+			&:not(.disabled):hover {
+				background: $bgHov;
+				>.icon {
+					color: lighten($ic, $ltGamma);
+				}
+			}
+		}
+	}
+}
 
 @mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
 	@include appearance(none);
diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss
index f53cf93a84..a2caac0813 100644
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -69,8 +69,6 @@
 	$bg: $colorMenuBg;
 	$fg: $colorMenuFg;
 	$ic: $colorMenuIc;
-	$bgHover: $colorMenuHov;
-	$iconColor: $colorKey;
 	cursor: pointer;
 	position: relative;
 	.menu {
@@ -96,10 +94,10 @@
 					border: none;
 				}
 				&:hover {
-					background: $bgHover;
-					color: $colorKeyFg;
+					background: $colorMenuHovBg;
+					color: $colorMenuHovFg;
 					.icon {
-						color: lighten($iconColor, 20%);
+						color: $colorMenuHovIc;
 					}
 				}
 				.type-icon {
@@ -109,11 +107,12 @@
 		}
 	}
 
+	.menu,
 	.context-menu,
 	.super-menu {
 		pointer-events: auto;
 		ul li {
-			padding-left: 25px;
+			//padding-left: 25px;
 			a {
 				color: $fg;
 			}
@@ -124,7 +123,7 @@
 				left: $interiorMargin;
 			}
 			&:hover .icon {
-				color: lighten($ic, 5%);
+				//color: lighten($ic, 5%);
 			}
 		}
 	}
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 36fa9a253f..bef92fab74 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -97,7 +97,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*********************************************** FORM ELEMENTS */
+/*********************************************** CONTROLS, FORM ELEMENTS */
 /*
 
 @mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
@@ -975,7 +975,7 @@ mct-container {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 185, ../../../../general/res/sass/_mixins.scss */
+    /* line 159, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -999,7 +999,7 @@ mct-container {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 207, ../../../../general/res/sass/_mixins.scss */
+    /* line 181, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -1029,7 +1029,7 @@ mct-container {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 185, ../../../../general/res/sass/_mixins.scss */
+  /* line 159, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1053,7 +1053,7 @@ mct-container {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 207, ../../../../general/res/sass/_mixins.scss */
+  /* line 181, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1397,15 +1397,15 @@ mct-container {
     -webkit-user-select: none;
     user-select: none;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    /* line 271, ../../../../general/res/sass/_mixins.scss */
     .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      /* line 276, ../../../../general/res/sass/_mixins.scss */
       .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
         background: linear-gradient(#1ac6ff, #00bfff); }
-        /* line 166, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.major:not(.disabled):hover .icon, .major.s-menu:not(.disabled):hover .icon, .major.select:not(.disabled):hover .icon {
+        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        .s-btn.major:not(.disabled):hover > .icon, .major.s-menu:not(.disabled):hover > .icon, .major.select:not(.disabled):hover > .icon {
           color: white; } }
   /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
@@ -1432,15 +1432,15 @@ mct-container {
     -webkit-user-select: none;
     user-select: none;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    /* line 271, ../../../../general/res/sass/_mixins.scss */
     .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
       color: #0099cc; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      /* line 276, ../../../../general/res/sass/_mixins.scss */
       .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
         background: linear-gradient(#6b6b6b, #5e5e5e); }
-        /* line 166, ../../../../general/res/sass/_mixins.scss */
-        .s-btn:not(.major):not(.disabled):hover .icon, .s-menu:not(.major):not(.disabled):hover .icon, .select:not(.major):not(.disabled):hover .icon {
+        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon, .select:not(.major):not(.disabled):hover > .icon {
           color: #33ccff; } }
   /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.paused, .paused.s-menu, .paused.select {
@@ -1467,15 +1467,15 @@ mct-container {
     -webkit-user-select: none;
     user-select: none;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    /* line 271, ../../../../general/res/sass/_mixins.scss */
     .s-btn.paused .icon, .paused.s-menu .icon, .paused.select .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      /* line 276, ../../../../general/res/sass/_mixins.scss */
       .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover, .paused.select:not(.disabled):hover {
         background: linear-gradient(#fe9815, #f88c01); }
-        /* line 166, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.paused:not(.disabled):hover .icon, .paused.s-menu:not(.disabled):hover .icon, .paused.select:not(.disabled):hover .icon {
+        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        .s-btn.paused:not(.disabled):hover > .icon, .paused.s-menu:not(.disabled):hover > .icon, .paused.select:not(.disabled):hover > .icon {
           color: white; } }
     /* line 101, ../../../../general/res/sass/controls/_buttons.scss */
     .s-btn.paused .icon:before, .paused.s-menu .icon:before, .paused.select .icon:before {
@@ -1954,17 +1954,17 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 159, ../../../../general/res/sass/_mixins.scss */
+  /* line 271, ../../../../general/res/sass/_mixins.scss */
   .slider .knob .icon {
     color: #0099cc; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 164, ../../../../general/res/sass/_mixins.scss */
+    /* line 276, ../../../../general/res/sass/_mixins.scss */
     .slider .knob:not(.disabled):hover {
       background: linear-gradient(#595959, #4d4d4d); }
-      /* line 166, ../../../../general/res/sass/_mixins.scss */
-      .slider .knob:not(.disabled):hover .icon {
+      /* line 278, ../../../../general/res/sass/_mixins.scss */
+      .slider .knob:not(.disabled):hover > .icon {
         color: #33ccff; } }
-  /* line 185, ../../../../general/res/sass/_mixins.scss */
+  /* line 159, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1988,7 +1988,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 207, ../../../../general/res/sass/_mixins.scss */
+  /* line 181, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2152,7 +2152,7 @@ label.checkbox.custom {
 .menu-element {
   cursor: pointer;
   position: relative; }
-  /* line 76, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 74, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .menu {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2180,16 +2180,16 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 85, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 83, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 345, ../../../../general/res/sass/_mixins.scss */
+      /* line 344, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
         padding: 0; }
-      /* line 87, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 85, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .menu ul li {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
@@ -2200,70 +2200,70 @@ label.checkbox.custom {
         padding: 3px 10px 3px 30px;
         position: relative;
         white-space: nowrap; }
-        /* line 95, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 93, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li:first-child {
           border: none; }
-        /* line 98, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 96, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li:hover {
           background: #878787;
           color: #fff; }
-          /* line 101, ../../../../general/res/sass/controls/_menus.scss */
+          /* line 99, ../../../../general/res/sass/controls/_menus.scss */
           .menu-element .menu ul li:hover .icon {
-            color: #33ccff; }
-        /* line 105, ../../../../general/res/sass/controls/_menus.scss */
+            color: #fff; }
+        /* line 103, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li .type-icon {
           left: 10px; }
-  /* line 112, ../../../../general/res/sass/controls/_menus.scss */
-  .menu-element .context-menu, .menu-element .checkbox-menu,
+  /* line 110, ../../../../general/res/sass/controls/_menus.scss */
+  .menu-element .menu,
+  .menu-element .context-menu,
+  .menu-element .checkbox-menu,
   .menu-element .super-menu {
     pointer-events: auto; }
-    /* line 115, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .context-menu ul li, .menu-element .checkbox-menu ul li,
-    .menu-element .super-menu ul li {
-      padding-left: 25px; }
-      /* line 117, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .context-menu ul li a, .menu-element .checkbox-menu ul li a,
-      .menu-element .super-menu ul li a {
-        color: white; }
-      /* line 120, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .context-menu ul li .icon, .menu-element .checkbox-menu ul li .icon,
-      .menu-element .super-menu ul li .icon {
-        color: #24c8ff; }
-      /* line 123, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .context-menu ul li .type-icon, .menu-element .checkbox-menu ul li .type-icon,
-      .menu-element .super-menu ul li .type-icon {
-        left: 5px; }
-      /* line 126, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .context-menu ul li:hover .icon, .menu-element .checkbox-menu ul li:hover .icon,
-      .menu-element .super-menu ul li:hover .icon {
-        color: #3dcfff; }
-  /* line 135, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 116, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .menu ul li a,
+    .menu-element .context-menu ul li a,
+    .menu-element .checkbox-menu ul li a,
+    .menu-element .super-menu ul li a {
+      color: white; }
+    /* line 119, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .menu ul li .icon,
+    .menu-element .context-menu ul li .icon,
+    .menu-element .checkbox-menu ul li .icon,
+    .menu-element .super-menu ul li .icon {
+      color: #24c8ff; }
+    /* line 122, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .menu ul li .type-icon,
+    .menu-element .context-menu ul li .type-icon,
+    .menu-element .checkbox-menu ul li .type-icon,
+    .menu-element .super-menu ul li .type-icon {
+      left: 5px; }
+  /* line 134, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .checkbox-menu ul li {
     padding-left: 50px; }
-    /* line 137, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 136, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .checkbox {
       position: absolute;
       left: 5px;
       top: 0.53333rem; }
-      /* line 142, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 141, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .checkbox-menu ul li .checkbox em {
         height: 0.7rem;
         width: 0.7rem; }
-        /* line 145, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 144, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .checkbox-menu ul li .checkbox em:before {
           font-size: 7px !important;
           height: 0.7rem;
           width: 0.7rem;
           line-height: 0.7rem; }
-    /* line 153, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 152, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .type-icon {
       left: 25px; }
-  /* line 159, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 158, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .super-menu {
     display: block;
     width: 500px;
     height: 480px; }
-    /* line 168, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 167, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .contents {
       overflow: hidden;
       position: absolute;
@@ -2273,12 +2273,12 @@ label.checkbox.custom {
       left: 5px;
       width: auto;
       height: auto; }
-    /* line 171, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 170, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .pane {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box; }
-      /* line 173, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 172, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.left {
         border-right: 1px solid rgba(255, 255, 255, 0.2);
         left: 0;
@@ -2287,20 +2287,20 @@ label.checkbox.custom {
         width: 50%;
         overflow-x: hidden;
         overflow-y: auto; }
-        /* line 183, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 182, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .super-menu .pane.left ul li {
           -moz-border-radius: 3px;
           -webkit-border-radius: 3px;
           border-radius: 3px;
           padding-left: 30px;
           border-top: none; }
-      /* line 190, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 189, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.right {
         left: auto;
         right: 0;
         padding: 25px;
         width: 50%; }
-    /* line 200, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 199, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.icon {
       color: white;
       position: relative;
@@ -2310,40 +2310,40 @@ label.checkbox.custom {
       line-height: 150px;
       margin-bottom: 25px;
       text-align: center; }
-    /* line 211, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 210, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.title {
       color: white;
       font-size: 1.2em;
       margin-bottom: 0.5em; }
-    /* line 216, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 215, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.description {
       color: white;
       font-size: 0.8em;
       line-height: 1.5em; }
-  /* line 225, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 224, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .context-menu, .menu-element .checkbox-menu {
     font-size: 0.80rem; }
 
-/* line 230, ../../../../general/res/sass/controls/_menus.scss */
+/* line 229, ../../../../general/res/sass/controls/_menus.scss */
 .context-menu-holder {
   pointer-events: none;
   position: absolute;
   height: 200px;
   width: 170px;
   z-index: 70; }
-  /* line 236, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 235, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder .context-menu-wrapper {
     position: absolute;
     height: 100%;
     width: 100%; }
-  /* line 243, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 242, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
     right: 0; }
-  /* line 246, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 245, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
     bottom: 0; }
 
-/* line 251, ../../../../general/res/sass/controls/_menus.scss */
+/* line 250, ../../../../general/res/sass/controls/_menus.scss */
 .btn-bar.right .menu,
 .menus-to-left .menu {
   left: auto;
@@ -2601,7 +2601,7 @@ label.checkbox.custom {
       padding: 0 3px;
       position: relative;
       height: 150px; }
-      /* line 296, ../../../../general/res/sass/_mixins.scss */
+      /* line 295, ../../../../general/res/sass/_mixins.scss */
       .form .form-row .selector-list.error {
         background: rgba(255, 0, 0, 0.5); }
       /* line 124, ../../../../general/res/sass/forms/_elems.scss */
@@ -2658,7 +2658,7 @@ input[type="text"] {
   color: #cccccc;
   outline: none;
   padding: 0 3px; }
-  /* line 296, ../../../../general/res/sass/_mixins.scss */
+  /* line 295, ../../../../general/res/sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
   /* line 172, ../../../../general/res/sass/forms/_elems.scss */
@@ -2686,7 +2686,7 @@ textarea {
   position: absolute;
   height: 100%;
   width: 100%; }
-  /* line 296, ../../../../general/res/sass/_mixins.scss */
+  /* line 295, ../../../../general/res/sass/_mixins.scss */
   textarea.error {
     background: rgba(255, 0, 0, 0.5); }
 
@@ -2739,15 +2739,15 @@ textarea {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 159, ../../../../general/res/sass/_mixins.scss */
+  /* line 271, ../../../../general/res/sass/_mixins.scss */
   .select .icon {
     color: #0099cc; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 164, ../../../../general/res/sass/_mixins.scss */
+    /* line 276, ../../../../general/res/sass/_mixins.scss */
     .select:not(.disabled):hover {
       background: linear-gradient(#595959, #4d4d4d); }
-      /* line 166, ../../../../general/res/sass/_mixins.scss */
-      .select:not(.disabled):hover .icon {
+      /* line 278, ../../../../general/res/sass/_mixins.scss */
+      .select:not(.disabled):hover > .icon {
         color: #33ccff; } }
   /* line 30, ../../../../general/res/sass/forms/_selects.scss */
   .select select {
@@ -2819,7 +2819,7 @@ textarea {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 296, ../../../../general/res/sass/_mixins.scss */
+  /* line 295, ../../../../general/res/sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -2976,7 +2976,7 @@ span.req {
   padding: 0 3px;
   background: #3b3b3b;
   border-bottom: 1px solid #4d4d4d; }
-  /* line 296, ../../../../general/res/sass/_mixins.scss */
+  /* line 295, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -4029,15 +4029,15 @@ span.req {
       -webkit-user-select: none;
       user-select: none;
       text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-      /* line 159, ../../../../general/res/sass/_mixins.scss */
+      /* line 271, ../../../../general/res/sass/_mixins.scss */
       .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon, .overlay .bottom-bar .select:not(.major) .icon {
         color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 164, ../../../../general/res/sass/_mixins.scss */
+        /* line 276, ../../../../general/res/sass/_mixins.scss */
         .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
           background: linear-gradient(#a6a6a6, #999999); }
-          /* line 166, ../../../../general/res/sass/_mixins.scss */
-          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover .icon {
+          /* line 278, ../../../../general/res/sass/_mixins.scss */
+          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover > .icon {
             color: white; } }
 /* line 84, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
@@ -4115,7 +4115,7 @@ ul.tree {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none; }
-  /* line 345, ../../../../general/res/sass/_mixins.scss */
+  /* line 344, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -5384,15 +5384,15 @@ table {
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    /* line 271, ../../../../general/res/sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
       color: #0099cc; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      /* line 276, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover {
         background: linear-gradient(#666666, #595959); }
-        /* line 166, ../../../../general/res/sass/_mixins.scss */
-        .items-holder .item.grid-item:not(.disabled):hover .icon {
+        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        .items-holder .item.grid-item:not(.disabled):hover > .icon {
           color: #33ccff; } }
     /* line 47, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
@@ -5522,15 +5522,15 @@ table {
       user-select: none;
       text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
       color: #80dfff; }
-      /* line 159, ../../../../general/res/sass/_mixins.scss */
+      /* line 271, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
         color: #0099cc; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 164, ../../../../general/res/sass/_mixins.scss */
+        /* line 276, ../../../../general/res/sass/_mixins.scss */
         .items-holder .item.grid-item.selected:not(.disabled):hover {
           background: linear-gradient(#1ac6ff, #00bfff); }
-          /* line 166, ../../../../general/res/sass/_mixins.scss */
-          .items-holder .item.grid-item.selected:not(.disabled):hover .icon {
+          /* line 278, ../../../../general/res/sass/_mixins.scss */
+          .items-holder .item.grid-item.selected:not(.disabled):hover > .icon {
             color: #33ccff; } }
       /* line 143, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index b009666884..e343952f19 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -30,7 +30,9 @@ $colorInvokeMenu: #fff;
 $colorMenuBg: pullForward($colorBodyBg, 23%);
 $colorMenuFg: pullForward($colorMenuBg, 70%);
 $colorMenuIc: pullForward($colorKey, 17%);
-$colorMenuHov: pullForward($colorMenuBg, 10%);//
+$colorMenuHovBg: pullForward($colorMenuBg, 10%);
+$colorMenuHovFg: #fff;
+$colorMenuHovIc: $colorMenuHovFg;
 $shdwMenu: none;
 $shdwMenuText: rgba(black, 0.1) 0 1px 2px;
 $colorCreateMenuLgIcon: $colorMenuFg;
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index dbf1629d51..9dc8936c9b 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -97,7 +97,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*********************************************** FORM ELEMENTS */
+/*********************************************** CONTROLS, FORM ELEMENTS */
 /*
 
 @mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
@@ -972,7 +972,7 @@ mct-container {
     right: 0;
     width: auto;
     height: 5px; }
-    /* line 185, ../../../../general/res/sass/_mixins.scss */
+    /* line 159, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -996,7 +996,7 @@ mct-container {
       top: 2px;
       left: 5px;
       right: 5px; }
-    /* line 207, ../../../../general/res/sass/_mixins.scss */
+    /* line 181, ../../../../general/res/sass/_mixins.scss */
     .split-layout.horizontal > .splitter:not(.disabled):hover:before {
       -moz-transition-property: "border-color";
       -o-transition-property: "border-color";
@@ -1026,7 +1026,7 @@ mct-container {
   bottom: 0;
   cursor: col-resize;
   width: 5px; }
-  /* line 185, ../../../../general/res/sass/_mixins.scss */
+  /* line 159, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1050,7 +1050,7 @@ mct-container {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 207, ../../../../general/res/sass/_mixins.scss */
+  /* line 181, ../../../../general/res/sass/_mixins.scss */
   .split-layout.vertical > .splitter:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1384,15 +1384,15 @@ mct-container {
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    /* line 271, ../../../../general/res/sass/_mixins.scss */
     .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      /* line 276, ../../../../general/res/sass/_mixins.scss */
       .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
         background: #0099cc; }
-        /* line 166, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.major:not(.disabled):hover .icon, .major.s-menu:not(.disabled):hover .icon, .major.select:not(.disabled):hover .icon {
+        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        .s-btn.major:not(.disabled):hover > .icon, .major.s-menu:not(.disabled):hover > .icon, .major.select:not(.disabled):hover > .icon {
           color: white; } }
   /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
@@ -1409,15 +1409,15 @@ mct-container {
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    /* line 271, ../../../../general/res/sass/_mixins.scss */
     .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      /* line 276, ../../../../general/res/sass/_mixins.scss */
       .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
         background: #0099cc; }
-        /* line 166, ../../../../general/res/sass/_mixins.scss */
-        .s-btn:not(.major):not(.disabled):hover .icon, .s-menu:not(.major):not(.disabled):hover .icon, .select:not(.major):not(.disabled):hover .icon {
+        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon, .select:not(.major):not(.disabled):hover > .icon {
           color: white; } }
   /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.paused, .paused.s-menu, .paused.select {
@@ -1434,15 +1434,15 @@ mct-container {
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none; }
-    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    /* line 271, ../../../../general/res/sass/_mixins.scss */
     .s-btn.paused .icon, .paused.s-menu .icon, .paused.select .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      /* line 276, ../../../../general/res/sass/_mixins.scss */
       .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover, .paused.select:not(.disabled):hover {
         background: #0099cc; }
-        /* line 166, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.paused:not(.disabled):hover .icon, .paused.s-menu:not(.disabled):hover .icon, .paused.select:not(.disabled):hover .icon {
+        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        .s-btn.paused:not(.disabled):hover > .icon, .paused.s-menu:not(.disabled):hover > .icon, .paused.select:not(.disabled):hover > .icon {
           color: white; } }
     /* line 101, ../../../../general/res/sass/controls/_buttons.scss */
     .s-btn.paused .icon:before, .paused.s-menu .icon:before, .paused.select .icon:before {
@@ -1911,17 +1911,17 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 159, ../../../../general/res/sass/_mixins.scss */
+  /* line 271, ../../../../general/res/sass/_mixins.scss */
   .slider .knob .icon {
     color: #fff; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 164, ../../../../general/res/sass/_mixins.scss */
+    /* line 276, ../../../../general/res/sass/_mixins.scss */
     .slider .knob:not(.disabled):hover {
       background: #0099cc; }
-      /* line 166, ../../../../general/res/sass/_mixins.scss */
-      .slider .knob:not(.disabled):hover .icon {
+      /* line 278, ../../../../general/res/sass/_mixins.scss */
+      .slider .knob:not(.disabled):hover > .icon {
         color: white; } }
-  /* line 185, ../../../../general/res/sass/_mixins.scss */
+  /* line 159, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -1945,7 +1945,7 @@ label.checkbox.custom {
     left: 2px;
     bottom: 5px;
     top: 5px; }
-  /* line 207, ../../../../general/res/sass/_mixins.scss */
+  /* line 181, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:not(.disabled):hover:before {
     -moz-transition-property: "border-color";
     -o-transition-property: "border-color";
@@ -2109,7 +2109,7 @@ label.checkbox.custom {
 .menu-element {
   cursor: pointer;
   position: relative; }
-  /* line 76, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 74, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .menu {
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -2130,16 +2130,16 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 85, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 83, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 345, ../../../../general/res/sass/_mixins.scss */
+      /* line 344, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
         padding: 0; }
-      /* line 87, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 85, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .menu ul li {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
@@ -2150,70 +2150,70 @@ label.checkbox.custom {
         padding: 3px 10px 3px 30px;
         position: relative;
         white-space: nowrap; }
-        /* line 95, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 93, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li:first-child {
           border: none; }
-        /* line 98, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 96, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li:hover {
           background: #e6e6e6;
-          color: #fff; }
-          /* line 101, ../../../../general/res/sass/controls/_menus.scss */
+          color: #4d4d4d; }
+          /* line 99, ../../../../general/res/sass/controls/_menus.scss */
           .menu-element .menu ul li:hover .icon {
-            color: #33ccff; }
-        /* line 105, ../../../../general/res/sass/controls/_menus.scss */
+            color: #0099cc; }
+        /* line 103, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li .type-icon {
           left: 10px; }
-  /* line 112, ../../../../general/res/sass/controls/_menus.scss */
-  .menu-element .context-menu, .menu-element .checkbox-menu,
+  /* line 110, ../../../../general/res/sass/controls/_menus.scss */
+  .menu-element .menu,
+  .menu-element .context-menu,
+  .menu-element .checkbox-menu,
   .menu-element .super-menu {
     pointer-events: auto; }
-    /* line 115, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .context-menu ul li, .menu-element .checkbox-menu ul li,
-    .menu-element .super-menu ul li {
-      padding-left: 25px; }
-      /* line 117, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .context-menu ul li a, .menu-element .checkbox-menu ul li a,
-      .menu-element .super-menu ul li a {
-        color: #4d4d4d; }
-      /* line 120, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .context-menu ul li .icon, .menu-element .checkbox-menu ul li .icon,
-      .menu-element .super-menu ul li .icon {
-        color: #0099cc; }
-      /* line 123, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .context-menu ul li .type-icon, .menu-element .checkbox-menu ul li .type-icon,
-      .menu-element .super-menu ul li .type-icon {
-        left: 5px; }
-      /* line 126, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .context-menu ul li:hover .icon, .menu-element .checkbox-menu ul li:hover .icon,
-      .menu-element .super-menu ul li:hover .icon {
-        color: #00ace6; }
-  /* line 135, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 116, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .menu ul li a,
+    .menu-element .context-menu ul li a,
+    .menu-element .checkbox-menu ul li a,
+    .menu-element .super-menu ul li a {
+      color: #4d4d4d; }
+    /* line 119, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .menu ul li .icon,
+    .menu-element .context-menu ul li .icon,
+    .menu-element .checkbox-menu ul li .icon,
+    .menu-element .super-menu ul li .icon {
+      color: #0099cc; }
+    /* line 122, ../../../../general/res/sass/controls/_menus.scss */
+    .menu-element .menu ul li .type-icon,
+    .menu-element .context-menu ul li .type-icon,
+    .menu-element .checkbox-menu ul li .type-icon,
+    .menu-element .super-menu ul li .type-icon {
+      left: 5px; }
+  /* line 134, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .checkbox-menu ul li {
     padding-left: 50px; }
-    /* line 137, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 136, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .checkbox {
       position: absolute;
       left: 5px;
       top: 0.53333rem; }
-      /* line 142, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 141, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .checkbox-menu ul li .checkbox em {
         height: 0.7rem;
         width: 0.7rem; }
-        /* line 145, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 144, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .checkbox-menu ul li .checkbox em:before {
           font-size: 7px !important;
           height: 0.7rem;
           width: 0.7rem;
           line-height: 0.7rem; }
-    /* line 153, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 152, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .type-icon {
       left: 25px; }
-  /* line 159, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 158, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .super-menu {
     display: block;
     width: 500px;
     height: 480px; }
-    /* line 168, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 167, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .contents {
       overflow: hidden;
       position: absolute;
@@ -2223,12 +2223,12 @@ label.checkbox.custom {
       left: 5px;
       width: auto;
       height: auto; }
-    /* line 171, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 170, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .pane {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box; }
-      /* line 173, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 172, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.left {
         border-right: 1px solid rgba(255, 255, 255, 0.2);
         left: 0;
@@ -2237,20 +2237,20 @@ label.checkbox.custom {
         width: 50%;
         overflow-x: hidden;
         overflow-y: auto; }
-        /* line 183, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 182, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .super-menu .pane.left ul li {
           -moz-border-radius: 4px;
           -webkit-border-radius: 4px;
           border-radius: 4px;
           padding-left: 30px;
           border-top: none; }
-      /* line 190, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 189, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.right {
         left: auto;
         right: 0;
         padding: 25px;
         width: 50%; }
-    /* line 200, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 199, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.icon {
       color: #0099cc;
       position: relative;
@@ -2260,40 +2260,40 @@ label.checkbox.custom {
       line-height: 150px;
       margin-bottom: 25px;
       text-align: center; }
-    /* line 211, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 210, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.title {
       color: #666;
       font-size: 1.2em;
       margin-bottom: 0.5em; }
-    /* line 216, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 215, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.description {
       color: #666;
       font-size: 0.8em;
       line-height: 1.5em; }
-  /* line 225, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 224, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .context-menu, .menu-element .checkbox-menu {
     font-size: 0.80rem; }
 
-/* line 230, ../../../../general/res/sass/controls/_menus.scss */
+/* line 229, ../../../../general/res/sass/controls/_menus.scss */
 .context-menu-holder {
   pointer-events: none;
   position: absolute;
   height: 200px;
   width: 170px;
   z-index: 70; }
-  /* line 236, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 235, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder .context-menu-wrapper {
     position: absolute;
     height: 100%;
     width: 100%; }
-  /* line 243, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 242, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
     right: 0; }
-  /* line 246, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 245, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
     bottom: 0; }
 
-/* line 251, ../../../../general/res/sass/controls/_menus.scss */
+/* line 250, ../../../../general/res/sass/controls/_menus.scss */
 .btn-bar.right .menu,
 .menus-to-left .menu {
   left: auto;
@@ -2551,7 +2551,7 @@ label.checkbox.custom {
       padding: 0 3px;
       position: relative;
       height: 150px; }
-      /* line 296, ../../../../general/res/sass/_mixins.scss */
+      /* line 295, ../../../../general/res/sass/_mixins.scss */
       .form .form-row .selector-list.error {
         background: rgba(255, 0, 0, 0.5); }
       /* line 124, ../../../../general/res/sass/forms/_elems.scss */
@@ -2608,7 +2608,7 @@ input[type="text"] {
   color: #666;
   outline: none;
   padding: 0 3px; }
-  /* line 296, ../../../../general/res/sass/_mixins.scss */
+  /* line 295, ../../../../general/res/sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
   /* line 172, ../../../../general/res/sass/forms/_elems.scss */
@@ -2636,7 +2636,7 @@ textarea {
   position: absolute;
   height: 100%;
   width: 100%; }
-  /* line 296, ../../../../general/res/sass/_mixins.scss */
+  /* line 295, ../../../../general/res/sass/_mixins.scss */
   textarea.error {
     background: rgba(255, 0, 0, 0.5); }
 
@@ -2679,15 +2679,15 @@ textarea {
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 159, ../../../../general/res/sass/_mixins.scss */
+  /* line 271, ../../../../general/res/sass/_mixins.scss */
   .select .icon {
     color: #fff; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 164, ../../../../general/res/sass/_mixins.scss */
+    /* line 276, ../../../../general/res/sass/_mixins.scss */
     .select:not(.disabled):hover {
       background: #0099cc; }
-      /* line 166, ../../../../general/res/sass/_mixins.scss */
-      .select:not(.disabled):hover .icon {
+      /* line 278, ../../../../general/res/sass/_mixins.scss */
+      .select:not(.disabled):hover > .icon {
         color: white; } }
   /* line 30, ../../../../general/res/sass/forms/_selects.scss */
   .select select {
@@ -2759,7 +2759,7 @@ textarea {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 296, ../../../../general/res/sass/_mixins.scss */
+  /* line 295, ../../../../general/res/sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -2916,7 +2916,7 @@ span.req {
   padding: 0 3px;
   background: #f7f7f7;
   border-bottom: 1px solid white; }
-  /* line 296, ../../../../general/res/sass/_mixins.scss */
+  /* line 295, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -3950,15 +3950,15 @@ span.req {
       -ms-user-select: none;
       -webkit-user-select: none;
       user-select: none; }
-      /* line 159, ../../../../general/res/sass/_mixins.scss */
+      /* line 271, ../../../../general/res/sass/_mixins.scss */
       .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon, .overlay .bottom-bar .select:not(.major) .icon {
         color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 164, ../../../../general/res/sass/_mixins.scss */
+        /* line 276, ../../../../general/res/sass/_mixins.scss */
         .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
           background: #0099cc; }
-          /* line 166, ../../../../general/res/sass/_mixins.scss */
-          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover .icon {
+          /* line 278, ../../../../general/res/sass/_mixins.scss */
+          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover > .icon {
             color: white; } }
 /* line 84, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
@@ -4036,7 +4036,7 @@ ul.tree {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none; }
-  /* line 345, ../../../../general/res/sass/_mixins.scss */
+  /* line 344, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -5294,15 +5294,15 @@ table {
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 159, ../../../../general/res/sass/_mixins.scss */
+    /* line 271, ../../../../general/res/sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 164, ../../../../general/res/sass/_mixins.scss */
+      /* line 276, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover {
         background: #0099cc; }
-        /* line 166, ../../../../general/res/sass/_mixins.scss */
-        .items-holder .item.grid-item:not(.disabled):hover .icon {
+        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        .items-holder .item.grid-item:not(.disabled):hover > .icon {
           color: white; } }
     /* line 47, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
@@ -5421,15 +5421,15 @@ table {
       -webkit-user-select: none;
       user-select: none;
       color: #80dfff; }
-      /* line 159, ../../../../general/res/sass/_mixins.scss */
+      /* line 271, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
         color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 164, ../../../../general/res/sass/_mixins.scss */
+        /* line 276, ../../../../general/res/sass/_mixins.scss */
         .items-holder .item.grid-item.selected:not(.disabled):hover {
           background: #0099cc; }
-          /* line 166, ../../../../general/res/sass/_mixins.scss */
-          .items-holder .item.grid-item.selected:not(.disabled):hover .icon {
+          /* line 278, ../../../../general/res/sass/_mixins.scss */
+          .items-holder .item.grid-item.selected:not(.disabled):hover > .icon {
             color: white; } }
       /* line 143, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index b779ea10fc..ec236bc289 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -32,7 +32,9 @@ $colorInvokeMenu: #fff;
 $colorMenuBg: pushBack($colorBodyBg, 10%);
 $colorMenuFg: pullForward($colorMenuBg, 70%);
 $colorMenuIc: $colorKey;
-$colorMenuHov: pullForward($colorMenuBg, 10%);
+$colorMenuHovBg: pullForward($colorMenuBg, 10%);
+$colorMenuHovFg: $colorMenuFg;
+$colorMenuHovIc: $colorMenuIc;
 $colorCreateMenuLgIcon: $colorKey;
 $colorCreateMenuText: $colorBodyFg;
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;

From 3b2454c6a9be6207e21371ecbc2bbc24269e80e0 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 10 Sep 2015 11:43:39 -0700
Subject: [PATCH 202/266] [Frontend] IN-PROGRESS Theming continues

open #95
Search, plots;
Minor tweaks to add shdw to items and buttons;
---
 bundles.json                                  |   2 +-
 .../commonUI/general/res/sass/_mixins.scss    |   2 +-
 .../general/res/sass/controls/_controls.scss  |   1 +
 .../general/res/sass/helpers/_splitter.scss   |   6 +-
 .../general/res/sass/items/_item.scss         |   1 +
 .../general/res/sass/plots/_plots-main.scss   |  13 +-
 .../general/res/sass/search/_search.scss      |  13 +-
 .../commonUI/general/res/sass/tree/_tree.scss |   2 +-
 .../espresso/res/css/theme-espresso.css       | 180 ++++++-----
 .../themes/espresso/res/sass/_constants.scss  |   9 +-
 .../themes/snow/res/css/theme-snow.css        | 293 ++++++++++--------
 .../themes/snow/res/sass/_constants.scss      |  21 +-
 .../themes/snow/res/sass/_mixins.scss         |   1 +
 13 files changed, 298 insertions(+), 246 deletions(-)

diff --git a/bundles.json b/bundles.json
index 3de757f1c6..2860dbde5e 100644
--- a/bundles.json
+++ b/bundles.json
@@ -8,7 +8,7 @@
     "platform/commonUI/dialog",
     "platform/commonUI/general",
     "platform/commonUI/inspect",
-    "platform/commonUI/themes/snow",
+    "platform/commonUI/themes/espresso",
     "platform/containment",
     "platform/execution",
     "platform/telemetry",
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 6699a116de..83984a206f 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -287,7 +287,7 @@
 	@include appearance(none);
 	@include border-radius($controlCr);
 	@include box-sizing(border-box);
-	@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
+	@include box-shadow(inset rgba(black, 0.4) 0 1px 3px);
 	background: $bg;
 	border: none;
 	color: $fg;
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index f12eaaf70d..7590daa255 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -240,6 +240,7 @@ label.checkbox.custom {
 	//}
 
 	> .type-icon {
+		color: $colorObjHdrIcon;
 		font-size: 120%;
 		float: left;
 		margin-right: $interiorMargin;
diff --git a/platform/commonUI/general/res/sass/helpers/_splitter.scss b/platform/commonUI/general/res/sass/helpers/_splitter.scss
index 3a344696ad..f91f5936d4 100644
--- a/platform/commonUI/general/res/sass/helpers/_splitter.scss
+++ b/platform/commonUI/general/res/sass/helpers/_splitter.scss
@@ -21,10 +21,10 @@
  *****************************************************************************/
 .split-layout {
 	$b: pullForward($colorBodyBg, $contrastRatioPercent);
-	$splitterD: 5px;
 
 	.splitter {
 		background-color: $b;
+		@include border-radius($splitterEndCr);
 		@include boxShdw($splitterShdw);
 		overflow: hidden;
 		position: absolute;
@@ -53,7 +53,7 @@
 			cursor: row-resize;
 			left: 0; right: 0;
 			width: auto;
-			height: $splitterD;
+			height: $splitterW;
 		}
 	}
 	&.vertical {
@@ -72,7 +72,7 @@
 			@include controlGrippy($colorBodyBg, vertical);
 			bottom: 0;
 			cursor: col-resize;
-			width: $splitterD;
+			width: $splitterW;
 		}
 	}
 }
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index fdf59c2b9c..321c6dfbf6 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -131,6 +131,7 @@
                 color: $colorItemFg;
             }
             .details {
+                @include txtShdw($shdwItemText);
                 @include ellipsize();
 	            color: $colorItemFgDetails;
                 font-size: 0.8em;
diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss
index af59fd0af2..9845c4d4be 100644
--- a/platform/commonUI/general/res/sass/plots/_plots-main.scss
+++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss
@@ -29,7 +29,7 @@ $swatchD: 8px;
 $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBarW); // Top, right, bottom, left
 
 .gl-plot {
-	color: $colorBodyFg;
+	color: $colorPlotFg;
 	font-size: 0.7rem;
 	position: relative;
 	width: 100%;
@@ -74,6 +74,9 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	}
 
 	.gl-plot-display-area {
+		@if $colorPlotBg != none {
+			background-color: $colorPlotBg;
+		}
 		position: absolute;
 		top: nth($plotDisplayArea, 1);
 		right: nth($plotDisplayArea, 2);
@@ -213,7 +216,11 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 			width: $swatchD;
 			//margin-right: $interiorMarginSm;
 		}
-		.title-label {}
+		&[class*='s-limit'] {
+			.title-label {
+				color: #fff;
+			}
+		}
 	}
 }
 
@@ -221,7 +228,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	.plot-legend-item {
 		//@include test();
 		@include border-radius($smallCr);
-		color: #fff;
+		//color: #fff;
 		line-height: 1.5em;
 		padding: 0px $itemPadLR;
 		.plot-color-swatch {
diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss
index 34a323e6ef..783206ce99 100644
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -69,7 +69,7 @@
 		.menu-icon {
 			//@include test(#008800);
 			@include box-sizing(border-box);
-			color: $colorItemFg;
+			color: $colorInputIcon;
 			height: $iconD; width: $iconD;
 			line-height: $iconD;
 			position: absolute;
@@ -97,7 +97,7 @@
 		}
 
 		.search-icon {
-			color: $colorItemFg;
+			//color: $colorItemFg;
 			left: $interiorMarginSm;
 			transition: visibility .15s, opacity .15s, color .2s;
 			pointer-events: none;
@@ -117,7 +117,7 @@
 
 		// Make icon lighten when hovering over search bar
 		.search-input:hover + div.search-icon {
-			color: lighten($colorItemFg, 20%);
+			color: pullForward($colorInputIcon, 10%);
 		}
 
 		.clear-icon {
@@ -135,7 +135,7 @@
 			}
 
 			&:hover {
-				color: lighten($colorItemFg, 20%);
+				color: pullForward($colorInputIcon, 10%);
 			}
 		}
 
@@ -146,7 +146,7 @@
 			text-align: right;
 
 			&:hover {
-				color: lighten($colorItemFg, 20%);
+				color: pullForward($colorInputIcon, 10%);
 			}
 		}
 
@@ -191,7 +191,8 @@
 
 
 		.clear-filters-icon {
-			opacity: 0.4;
+			color: $colorInputIcon;
+			opacity: 1;
 			font-size: 0.8em;
 			position: absolute;
 			left: 1px;
diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss
index 17261cd136..2c0343a6c4 100644
--- a/platform/commonUI/general/res/sass/tree/_tree.scss
+++ b/platform/commonUI/general/res/sass/tree/_tree.scss
@@ -83,7 +83,7 @@ ul.tree {
 			.icon {
 				&.l-icon-link,
 				&.l-icon-alert {
-					@include txtShdwSubtle(1);
+					//@include txtShdw($shdwItemTreeIcon);
 					position: absolute;
 					z-index: 2;
 				}
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index bef92fab74..5984982297 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -943,9 +943,12 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 26, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 25, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout .splitter {
   background-color: #454545;
+  -moz-border-radius: 1px;
+  -webkit-border-radius: 1px;
+  border-radius: 1px;
   -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
   box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px;
@@ -1855,20 +1858,21 @@ label.checkbox.custom {
   font-size: 1em; }
   /* line 242, ../../../../general/res/sass/controls/_controls.scss */
   .object-header > .type-icon {
+    color: #cccccc;
     font-size: 120%;
     float: left;
     margin-right: 5px; }
-  /* line 248, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 249, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .l-elem-wrapper {
     justify-content: flex-start;
     -webkit-justify-content: flex-start; }
-    /* line 251, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 252, ../../../../general/res/sass/controls/_controls.scss */
     .object-header .l-elem-wrapper mct-representation {
       min-width: 0.7em; }
-  /* line 259, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 260, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .action {
     margin-right: 5px; }
-  /* line 263, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 264, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .title-label {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1876,13 +1880,13 @@ label.checkbox.custom {
     flex: 0 1 auto;
     -webkit-flex: 0 1 auto;
     padding-right: 0.35em; }
-  /* line 272, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 273, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .context-available {
     font-size: 0.7em;
     flex: 0 0 1;
     -webkit-flex: 0 0 1; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 279, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 280, ../../../../general/res/sass/controls/_controls.scss */
     .object-header .context-available {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -1897,12 +1901,12 @@ label.checkbox.custom {
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       opacity: 0; }
-    /* line 284, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 285, ../../../../general/res/sass/controls/_controls.scss */
     .object-header:hover .context-available {
       opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 297, ../../../../general/res/sass/controls/_controls.scss */
+/* line 298, ../../../../general/res/sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -1921,7 +1925,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 308, ../../../../general/res/sass/controls/_controls.scss */
+/* line 309, ../../../../general/res/sass/controls/_controls.scss */
 .slider .knob {
   background-color: #333;
   -moz-border-radius: 3px;
@@ -2003,12 +2007,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 319, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 320, ../../../../general/res/sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 326, ../../../../general/res/sass/controls/_controls.scss */
+/* line 327, ../../../../general/res/sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2019,13 +2023,13 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 336, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 337, ../../../../general/res/sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 345, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 346, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2040,7 +2044,7 @@ label.checkbox.custom {
     height: 10px;
     width: 10px; }
 
-  /* line 351, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 352, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2054,7 +2058,7 @@ label.checkbox.custom {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box; }
-    /* line 360, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 361, ../../../../general/res/sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -2063,7 +2067,7 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#5e5e5e, #525252 20px);
       background-image: linear-gradient(#5e5e5e, #525252 20px); }
 
-  /* line 365, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 366, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
@@ -2591,9 +2595,9 @@ label.checkbox.custom {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
-      -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-      -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-      box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+      -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+      -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+      box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
       background: rgba(255, 255, 255, 0.1);
       border: none;
       color: #cccccc;
@@ -2650,9 +2654,9 @@ input[type="text"] {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
   background: rgba(255, 255, 255, 0.1);
   border: none;
   color: #cccccc;
@@ -2675,9 +2679,9 @@ textarea {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
   background: rgba(255, 255, 255, 0.1);
   border: none;
   color: #cccccc;
@@ -2805,9 +2809,9 @@ textarea {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
   background: #333;
   border: none;
   color: #999;
@@ -2966,9 +2970,9 @@ span.req {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
   background: #333;
   border: none;
   color: #999;
@@ -3761,7 +3765,7 @@ span.req {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
-      color: #bfbfbf;
+      color: #595959;
       height: 17px;
       width: 17px;
       line-height: 17px;
@@ -3784,13 +3788,12 @@ span.req {
         width: 100%; }
     /* line 99, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-icon {
-      color: #bfbfbf;
       left: 3px;
       transition: visibility .15s, opacity .15s, color .2s;
       pointer-events: none; }
     /* line 119, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input:hover + div.search-icon {
-      color: #f2f2f2; }
+      color: #737373; }
     /* line 123, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .clear-icon {
       right: 22px;
@@ -3803,7 +3806,7 @@ span.req {
         opacity: 1; }
       /* line 137, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .clear-icon:hover {
-        color: #f2f2f2; }
+        color: #737373; }
     /* line 142, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .menu-icon {
       font-size: 0.8em;
@@ -3812,7 +3815,7 @@ span.req {
       text-align: right; }
       /* line 148, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .menu-icon:hover {
-        color: #f2f2f2; }
+        color: #737373; }
     /* line 153, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-menu-holder {
       float: right;
@@ -3844,12 +3847,13 @@ span.req {
     margin-top: 3px; }
     /* line 193, ../../../../general/res/sass/search/_search.scss */
     .search .active-filter-display .clear-filters-icon {
-      opacity: 0.4;
+      color: #595959;
+      opacity: 1;
       font-size: 0.8em;
       position: absolute;
       left: 1px;
       cursor: pointer; }
-    /* line 204, ../../../../general/res/sass/search/_search.scss */
+    /* line 205, ../../../../general/res/sass/search/_search.scss */
     .search .active-filter-display.off {
       visibility: hidden;
       opacity: 0;
@@ -3857,7 +3861,7 @@ span.req {
       margin: 0;
       padding: 0;
       border: 0; }
-  /* line 214, ../../../../general/res/sass/search/_search.scss */
+  /* line 215, ../../../../general/res/sass/search/_search.scss */
   .search .search-scroll {
     order: 3;
     margin-top: 4px;
@@ -3866,27 +3870,27 @@ span.req {
     height: auto;
     max-height: 100%;
     position: relative; }
-    /* line 227, ../../../../general/res/sass/search/_search.scss */
+    /* line 228, ../../../../general/res/sass/search/_search.scss */
     .search .search-scroll .load-icon {
       position: relative; }
-      /* line 229, ../../../../general/res/sass/search/_search.scss */
+      /* line 230, ../../../../general/res/sass/search/_search.scss */
       .search .search-scroll .load-icon.loading {
         pointer-events: none;
         margin-left: 6px; }
-        /* line 233, ../../../../general/res/sass/search/_search.scss */
+        /* line 234, ../../../../general/res/sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .title-label {
           font-style: italic;
           font-size: .9em;
           opacity: 0.5;
           margin-left: 26px;
           line-height: 24px; }
-        /* line 243, ../../../../general/res/sass/search/_search.scss */
+        /* line 244, ../../../../general/res/sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .wait-spinner {
           margin-left: 6px; }
-      /* line 248, ../../../../general/res/sass/search/_search.scss */
+      /* line 249, ../../../../general/res/sass/search/_search.scss */
       .search .search-scroll .load-icon:not(.loading) {
         cursor: pointer; }
-    /* line 253, ../../../../general/res/sass/search/_search.scss */
+    /* line 254, ../../../../general/res/sass/search/_search.scss */
     .search .search-scroll .load-more-button {
       margin-top: 5px 0;
       font-size: 0.8em;
@@ -4191,7 +4195,6 @@ ul.tree {
       .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
       .search-result-item .label .type-icon .icon.l-icon-link,
       .search-result-item .label .type-icon .icon.l-icon-alert {
-        text-shadow: black 0 1px 2px;
         position: absolute;
         z-index: 2; }
       /* line 90, ../../../../general/res/sass/tree/_tree.scss */
@@ -5025,13 +5028,13 @@ table {
     left: 60px;
     cursor: crosshair;
     border: 1px solid rgba(153, 153, 153, 0.1); }
-  /* line 86, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 89, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-label,
   .gl-plot .l-plot-label {
     color: #cccccc;
     position: absolute;
     text-align: center; }
-    /* line 94, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 97, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-label.gl-plot-x-label, .gl-plot .gl-plot-label.l-plot-x-label,
     .gl-plot .l-plot-label.gl-plot-x-label,
     .gl-plot .l-plot-label.l-plot-x-label {
@@ -5040,7 +5043,7 @@ table {
       bottom: 0;
       left: 0;
       height: auto; }
-    /* line 103, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 106, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-label.gl-plot-y-label, .gl-plot .gl-plot-label.l-plot-y-label,
     .gl-plot .l-plot-label.gl-plot-y-label,
     .gl-plot .l-plot-label.l-plot-y-label {
@@ -5057,7 +5060,7 @@ table {
       left: 0;
       top: 50%;
       white-space: nowrap; }
-  /* line 117, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 120, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-y-options {
     position: absolute;
     top: 50%;
@@ -5068,19 +5071,19 @@ table {
     height: auto;
     min-height: 32px;
     width: 32px; }
-  /* line 131, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 134, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-hash {
     position: absolute;
     border: 0 rgba(255, 255, 255, 0.3) dashed; }
-    /* line 134, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 137, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-hash.hash-v {
       border-right-width: 1px;
       height: 100%; }
-    /* line 138, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 141, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-hash.hash-h {
       border-bottom-width: 1px;
       width: 100%; }
-  /* line 144, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 147, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-legend {
     position: absolute;
     top: 0;
@@ -5090,24 +5093,24 @@ table {
     height: 20px;
     overflow-x: hidden;
     overflow-y: auto; }
-  /* line 157, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 160, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .l-limit-bar,
   .gl-plot .l-oob-data {
     position: absolute;
     left: 0;
     right: 0;
     width: auto; }
-  /* line 165, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 168, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .l-limit-bar {
     height: auto;
     z-index: 0; }
-    /* line 173, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 176, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-limit-bar.s-limit-yellow {
       background: rgba(157, 117, 0, 0.2); }
-    /* line 174, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 177, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-limit-bar.s-limit-red {
       background: rgba(170, 0, 0, 0.2); }
-  /* line 177, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 180, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .l-oob-data {
     overflow: hidden;
     position: absolute;
@@ -5120,7 +5123,7 @@ table {
     pointer-events: none;
     height: 10px;
     z-index: 1; }
-    /* line 185, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 188, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-oob-data.l-oob-data-up {
       top: 0;
       bottom: auto;
@@ -5129,7 +5132,7 @@ table {
       background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
       background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
       background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
-    /* line 190, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 193, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-oob-data.l-oob-data-dwn {
       bottom: 0;
       top: auto;
@@ -5139,7 +5142,7 @@ table {
       background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
       background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
 
-/* line 200, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 203, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-legend .plot-legend-item,
 .gl-plot-legend .legend-item,
 .legend .plot-legend-item,
@@ -5147,13 +5150,13 @@ table {
   display: inline-block;
   margin-right: 10px;
   margin-bottom: 3px; }
-  /* line 205, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 208, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-legend .plot-legend-item span,
   .gl-plot-legend .legend-item span,
   .legend .plot-legend-item span,
   .legend .legend-item span {
     vertical-align: middle; }
-  /* line 208, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 211, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-legend .plot-legend-item .plot-color-swatch,
   .gl-plot-legend .plot-legend-item .color-swatch,
   .gl-plot-legend .legend-item .plot-color-swatch,
@@ -5168,31 +5171,36 @@ table {
     display: inline-block;
     height: 8px;
     width: 8px; }
+  /* line 220, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot-legend .plot-legend-item[class*='s-limit'] .title-label,
+  .gl-plot-legend .legend-item[class*='s-limit'] .title-label,
+  .legend .plot-legend-item[class*='s-limit'] .title-label,
+  .legend .legend-item[class*='s-limit'] .title-label {
+    color: #fff; }
 
-/* line 221, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 228, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-legend .plot-legend-item {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
-  color: #fff;
   line-height: 1.5em;
   padding: 0px 5px; }
-  /* line 227, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 234, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-legend .plot-legend-item .plot-color-swatch {
     border: 1px solid #333;
     height: 9px;
     width: 9px; }
 
-/* line 235, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 242, ../../../../general/res/sass/plots/_plots-main.scss */
 .tick {
   position: absolute;
   border: 0 rgba(255, 255, 255, 0.3) solid; }
-  /* line 238, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 245, ../../../../general/res/sass/plots/_plots-main.scss */
   .tick.tick-x {
     border-right-width: 1px;
     height: 100%; }
 
-/* line 244, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 251, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-tick,
 .tick-label {
   font-size: 0.7rem;
@@ -5200,7 +5208,7 @@ table {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis; }
-  /* line 252, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 259, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x,
   .tick-label.gl-plot-x-tick-label,
   .tick-label.tick-label-x {
@@ -5211,7 +5219,7 @@ table {
     width: 20%;
     margin-left: -10%;
     text-align: center; }
-  /* line 262, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 269, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y,
   .tick-label.gl-plot-y-tick-label,
   .tick-label.tick-label-y {
@@ -5221,18 +5229,18 @@ table {
     margin-bottom: -0.5em;
     text-align: right; }
 
-/* line 274, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 281, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-tick.gl-plot-x-tick-label {
   top: 5px; }
-/* line 277, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 284, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-tick.gl-plot-y-tick-label {
   right: 5px;
   left: 5px; }
 
-/* line 284, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 291, ../../../../general/res/sass/plots/_plots-main.scss */
 .tick-label.tick-label-x {
   top: 0; }
-/* line 287, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 294, ../../../../general/res/sass/plots/_plots-main.scss */
 .tick-label.tick-label-y {
   right: 0;
   left: 0; }
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index e343952f19..601e0b3a28 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -1,7 +1,7 @@
 /************************** COLORS AND SHADING */
 $colorBodyBg: #333;
-$colorGenBg: #222;
 $colorBodyFg: #999;
+$colorGenBg: #222;
 $colorFooterBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: #005177;
@@ -13,6 +13,7 @@ $colorBtnFg: $colorBodyFg;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnIcon: $colorKey;
+$colorObjHdrIcon: pullForward($colorBodyFg, 20%);
 $colorInvokeMenu: #fff;
 $contrastInvokeMenuPercent: 20%;
 
@@ -46,6 +47,7 @@ $colorFormInvalid: #ff3300;
 $colorInputBg: rgba(#fff, 0.1);
 $colorInputFg: pullForward($colorBodyFg, 20%);
 $colorFormText: rgba(#fff, 0.5);
+$colorInputIcon: pushBack($colorBodyFg, 25%);
 // Limits and staleness colors
 $colorLimitYellow: #9d7500;
 $colorLimitRed: #aa0000;
@@ -79,6 +81,9 @@ $tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
 $tabularColorHeaderBg: lighten($colorBodyBg, 10%);
 $tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
 $tabularColorHeaderBorder: $colorBodyBg;
+// Plot
+$colorPlotBg: none;
+$colorPlotFg: $colorBodyFg;
 // Tree
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
@@ -98,6 +103,8 @@ $scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
 $splitterShdw: rgba(black, 0.4) 0 0 3px;
 $colorSplitterInterior: $colorBodyBg;
 $colorSplitterHover: none;
+$splitterW: 5px;
+$splitterEndCr: 1px;
 $colorGrippyInteriorHover: $colorKey;
 
 /********************************* MOBILE */
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 9dc8936c9b..7cd4d06e41 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -354,7 +354,7 @@ a {
 body, html {
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #efefef;
+  background-color: #fcfcfc;
   color: #666;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 100%;
@@ -829,7 +829,7 @@ mct-container {
           height: 0;
           border-top: 6.66667px solid transparent;
           border-bottom: 6.66667px solid transparent;
-          border-right: 10px solid #ddd; } }
+          border-right: 10px solid white; } }
   @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 88, ../../../../general/res/sass/helpers/_bubbles.scss */
     .l-infobubble-wrapper.arw-right {
@@ -844,7 +844,7 @@ mct-container {
         height: 0;
         border-top: 6.66667px solid transparent;
         border-bottom: 6.66667px solid transparent;
-        border-left: 10px solid #ddd; } }
+        border-left: 10px solid white; } }
   /* line 108, ../../../../general/res/sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper.arw-top .l-infobubble::before {
     top: 20px; }
@@ -861,7 +861,7 @@ mct-container {
       margin-left: -5px;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
-      border-top: 7.5px solid #ddd; }
+      border-top: 7.5px solid white; }
   /* line 130, ../../../../general/res/sass/helpers/_bubbles.scss */
   .l-infobubble-wrapper .arw {
     z-index: 2; }
@@ -892,7 +892,7 @@ mct-container {
   -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
   box-shadow: rgba(0, 0, 0, 0.4) 0 1px 5px;
-  background: #ddd;
+  background: white;
   color: #666;
   font-size: 0.8rem; }
   /* line 157, ../../../../general/res/sass/helpers/_bubbles.scss */
@@ -902,7 +902,7 @@ mct-container {
   /* line 163, ../../../../general/res/sass/helpers/_bubbles.scss */
   .s-infobubble table tr td {
     border: none;
-    border-top: 1px solid #c4c4c4 !important;
+    border-top: 1px solid #e6e6e6 !important;
     font-size: 0.9em; }
   /* line 169, ../../../../general/res/sass/helpers/_bubbles.scss */
   .s-infobubble table tr:first-child td {
@@ -943,9 +943,12 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 26, ../../../../general/res/sass/helpers/_splitter.scss */
+/* line 25, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout .splitter {
-  background-color: #a3a3a3;
+  background-color: #b0b0b0;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
   overflow: hidden;
   position: absolute;
   z-index: 1; }
@@ -992,7 +995,7 @@ mct-container {
       pointer-events: none;
       position: absolute;
       z-index: 2;
-      border-top: 1px dotted #c9c9c9;
+      border-top: 1px dotted #d6d6d6;
       top: 2px;
       left: 5px;
       right: 5px; }
@@ -1010,7 +1013,7 @@ mct-container {
       -o-transition-timing-function: ease-in-out;
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
-      border-color: #efefef; }
+      border-color: #fcfcfc; }
 /* line 61, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout.vertical .pane {
   top: 0;
@@ -1046,7 +1049,7 @@ mct-container {
     pointer-events: none;
     position: absolute;
     z-index: 2;
-    border-left: 1px dotted #c9c9c9;
+    border-left: 1px dotted #d6d6d6;
     left: 2px;
     bottom: 5px;
     top: 5px; }
@@ -1064,7 +1067,7 @@ mct-container {
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
-    border-color: #efefef; }
+    border-color: #fcfcfc; }
 
 /* line 80, ../../../../general/res/sass/helpers/_splitter.scss */
 .browse-area .splitter {
@@ -1383,7 +1386,8 @@ mct-container {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
-    user-select: none; }
+    user-select: none;
+    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
     /* line 271, ../../../../general/res/sass/_mixins.scss */
     .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
       color: #fff; }
@@ -1396,7 +1400,7 @@ mct-container {
           color: white; } }
   /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
-    background-color: #a3a3a3;
+    background-color: #b0b0b0;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
@@ -1408,10 +1412,11 @@ mct-container {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
-    user-select: none; }
+    user-select: none;
+    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
     /* line 271, ../../../../general/res/sass/_mixins.scss */
     .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
-      color: #fff; }
+      color: #ddd; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 276, ../../../../general/res/sass/_mixins.scss */
       .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
@@ -1433,7 +1438,8 @@ mct-container {
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
-    user-select: none; }
+    user-select: none;
+    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
     /* line 271, ../../../../general/res/sass/_mixins.scss */
     .s-btn.paused .icon, .paused.s-menu .icon, .paused.select .icon {
       color: #fff; }
@@ -1822,20 +1828,21 @@ label.checkbox.custom {
   font-size: 1em; }
   /* line 242, ../../../../general/res/sass/controls/_controls.scss */
   .object-header > .type-icon {
+    color: #666;
     font-size: 120%;
     float: left;
     margin-right: 5px; }
-  /* line 248, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 249, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .l-elem-wrapper {
     justify-content: flex-start;
     -webkit-justify-content: flex-start; }
-    /* line 251, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 252, ../../../../general/res/sass/controls/_controls.scss */
     .object-header .l-elem-wrapper mct-representation {
       min-width: 0.7em; }
-  /* line 259, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 260, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .action {
     margin-right: 5px; }
-  /* line 263, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 264, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .title-label {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1843,13 +1850,13 @@ label.checkbox.custom {
     flex: 0 1 auto;
     -webkit-flex: 0 1 auto;
     padding-right: 0.35em; }
-  /* line 272, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 273, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .context-available {
     font-size: 0.7em;
     flex: 0 0 1;
     -webkit-flex: 0 0 1; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 279, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 280, ../../../../general/res/sass/controls/_controls.scss */
     .object-header .context-available {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -1864,12 +1871,12 @@ label.checkbox.custom {
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       opacity: 0; }
-    /* line 284, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 285, ../../../../general/res/sass/controls/_controls.scss */
     .object-header:hover .context-available {
       opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 297, ../../../../general/res/sass/controls/_controls.scss */
+/* line 298, ../../../../general/res/sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -1888,9 +1895,9 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 308, ../../../../general/res/sass/controls/_controls.scss */
+/* line 309, ../../../../general/res/sass/controls/_controls.scss */
 .slider .knob {
-  background-color: #a3a3a3;
+  background-color: #b0b0b0;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
@@ -1903,6 +1910,7 @@ label.checkbox.custom {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
+  text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   cursor: ew-resize;
   position: absolute;
   height: 100%;
@@ -1913,7 +1921,7 @@ label.checkbox.custom {
   left: auto; }
   /* line 271, ../../../../general/res/sass/_mixins.scss */
   .slider .knob .icon {
-    color: #fff; }
+    color: #ddd; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 276, ../../../../general/res/sass/_mixins.scss */
     .slider .knob:not(.disabled):hover {
@@ -1959,13 +1967,13 @@ label.checkbox.custom {
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
-    border-color: #efefef; }
-  /* line 319, ../../../../general/res/sass/controls/_controls.scss */
+    border-color: #fcfcfc; }
+  /* line 320, ../../../../general/res/sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 326, ../../../../general/res/sass/controls/_controls.scss */
+/* line 327, ../../../../general/res/sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -1976,13 +1984,13 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 336, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 337, ../../../../general/res/sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 345, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 346, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -1997,21 +2005,21 @@ label.checkbox.custom {
     height: 10px;
     width: 10px; }
 
-  /* line 351, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 352, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JjYmNiYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FmYWZhZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M5YzljOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JjYmNiYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #bcbcbc), color-stop(100%, #afafaf));
-    background-image: -moz-linear-gradient(#bcbcbc, #afafaf 20px);
-    background-image: -webkit-linear-gradient(#bcbcbc, #afafaf 20px);
-    background-image: linear-gradient(#bcbcbc, #afafaf 20px);
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #c9c9c9), color-stop(100%, #bcbcbc));
+    background-image: -moz-linear-gradient(#c9c9c9, #bcbcbc 20px);
+    background-image: -webkit-linear-gradient(#c9c9c9, #bcbcbc 20px);
+    background-image: linear-gradient(#c9c9c9, #bcbcbc 20px);
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box; }
-    /* line 360, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 361, ../../../../general/res/sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -2020,7 +2028,7 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#00ace6, #0099cc 20px);
       background-image: linear-gradient(#00ace6, #0099cc 20px); }
 
-  /* line 365, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 366, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.5); } }
 /*****************************************************************************
@@ -2541,9 +2549,9 @@ label.checkbox.custom {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
-      -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-      -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-      box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+      -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+      -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+      box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
       background: #fff;
       border: none;
       color: #666;
@@ -2600,9 +2608,9 @@ input[type="text"] {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
   background: #fff;
   border: none;
   color: #666;
@@ -2625,9 +2633,9 @@ textarea {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
   background: #fff;
   border: none;
   color: #666;
@@ -2663,7 +2671,7 @@ textarea {
  *****************************************************************************/
 /* line 22, ../../../../general/res/sass/forms/_selects.scss */
 .select {
-  background-color: #a3a3a3;
+  background-color: #b0b0b0;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
@@ -2676,12 +2684,13 @@ textarea {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
+  text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
   /* line 271, ../../../../general/res/sass/_mixins.scss */
   .select .icon {
-    color: #fff; }
+    color: #ddd; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 276, ../../../../general/res/sass/_mixins.scss */
     .select:not(.disabled):hover {
@@ -2745,15 +2754,15 @@ textarea {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  background: #efefef;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  background: #fcfcfc;
   border: none;
   color: #666;
   outline: none;
   padding: 0 3px;
-  background: #f7f7f7;
+  background: white;
   border-bottom: 1px solid white;
   min-height: 300px;
   max-height: 400px;
@@ -2906,15 +2915,15 @@ span.req {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
-  background: #efefef;
+  -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 3px;
+  background: #fcfcfc;
   border: none;
   color: #666;
   outline: none;
   padding: 0 3px;
-  background: #f7f7f7;
+  background: white;
   border-bottom: 1px solid white; }
   /* line 295, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
@@ -3352,7 +3361,7 @@ span.req {
 
   /* line 31, ../../../../general/res/sass/mobile/_layout.scss */
   .pane.left.treeview {
-    background-color: #eaeaea; }
+    background-color: #f7f7f7; }
 
   /* line 35, ../../../../general/res/sass/mobile/_layout.scss */
   .pane.right-repr {
@@ -3701,7 +3710,7 @@ span.req {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
-      color: #fff;
+      color: #a6a6a6;
       height: 17px;
       width: 17px;
       line-height: 17px;
@@ -3724,13 +3733,12 @@ span.req {
         width: 100%; }
     /* line 99, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-icon {
-      color: #fff;
       left: 3px;
       transition: visibility .15s, opacity .15s, color .2s;
       pointer-events: none; }
     /* line 119, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input:hover + div.search-icon {
-      color: white; }
+      color: #8c8c8c; }
     /* line 123, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .clear-icon {
       right: 22px;
@@ -3743,7 +3751,7 @@ span.req {
         opacity: 1; }
       /* line 137, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .clear-icon:hover {
-        color: white; }
+        color: #8c8c8c; }
     /* line 142, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .menu-icon {
       font-size: 0.8em;
@@ -3752,7 +3760,7 @@ span.req {
       text-align: right; }
       /* line 148, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .menu-icon:hover {
-        color: white; }
+        color: #8c8c8c; }
     /* line 153, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-menu-holder {
       float: right;
@@ -3784,12 +3792,13 @@ span.req {
     margin-top: 3px; }
     /* line 193, ../../../../general/res/sass/search/_search.scss */
     .search .active-filter-display .clear-filters-icon {
-      opacity: 0.4;
+      color: #a6a6a6;
+      opacity: 1;
       font-size: 0.8em;
       position: absolute;
       left: 1px;
       cursor: pointer; }
-    /* line 204, ../../../../general/res/sass/search/_search.scss */
+    /* line 205, ../../../../general/res/sass/search/_search.scss */
     .search .active-filter-display.off {
       visibility: hidden;
       opacity: 0;
@@ -3797,7 +3806,7 @@ span.req {
       margin: 0;
       padding: 0;
       border: 0; }
-  /* line 214, ../../../../general/res/sass/search/_search.scss */
+  /* line 215, ../../../../general/res/sass/search/_search.scss */
   .search .search-scroll {
     order: 3;
     margin-top: 4px;
@@ -3806,27 +3815,27 @@ span.req {
     height: auto;
     max-height: 100%;
     position: relative; }
-    /* line 227, ../../../../general/res/sass/search/_search.scss */
+    /* line 228, ../../../../general/res/sass/search/_search.scss */
     .search .search-scroll .load-icon {
       position: relative; }
-      /* line 229, ../../../../general/res/sass/search/_search.scss */
+      /* line 230, ../../../../general/res/sass/search/_search.scss */
       .search .search-scroll .load-icon.loading {
         pointer-events: none;
         margin-left: 6px; }
-        /* line 233, ../../../../general/res/sass/search/_search.scss */
+        /* line 234, ../../../../general/res/sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .title-label {
           font-style: italic;
           font-size: .9em;
           opacity: 0.5;
           margin-left: 26px;
           line-height: 24px; }
-        /* line 243, ../../../../general/res/sass/search/_search.scss */
+        /* line 244, ../../../../general/res/sass/search/_search.scss */
         .search .search-scroll .load-icon.loading .wait-spinner {
           margin-left: 6px; }
-      /* line 248, ../../../../general/res/sass/search/_search.scss */
+      /* line 249, ../../../../general/res/sass/search/_search.scss */
       .search .search-scroll .load-icon:not(.loading) {
         cursor: pointer; }
-    /* line 253, ../../../../general/res/sass/search/_search.scss */
+    /* line 254, ../../../../general/res/sass/search/_search.scss */
     .search .search-scroll .load-more-button {
       margin-top: 5px 0;
       font-size: 0.8em;
@@ -3879,7 +3888,7 @@ span.req {
   z-index: 100; }
 /* line 32, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay > .holder {
-  background-color: #efefef;
+  background-color: #fcfcfc;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
@@ -3937,7 +3946,7 @@ span.req {
     padding: 0 15px; }
     /* line 68, ../../../../general/res/sass/overlay/_overlay.scss */
     .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major), .overlay .bottom-bar .select:not(.major) {
-      background-color: #898989;
+      background-color: #969696;
       -moz-border-radius: 4px;
       -webkit-border-radius: 4px;
       border-radius: 4px;
@@ -3949,7 +3958,8 @@ span.req {
       -moz-user-select: -moz-none;
       -ms-user-select: none;
       -webkit-user-select: none;
-      user-select: none; }
+      user-select: none;
+      text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
       /* line 271, ../../../../general/res/sass/_mixins.scss */
       .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon, .overlay .bottom-bar .select:not(.major) .icon {
         color: #fff; }
@@ -4111,7 +4121,6 @@ ul.tree {
       .tree-item .label .type-icon .icon.l-icon-link, .tree-item .label .type-icon .icon.l-icon-alert,
       .search-result-item .label .type-icon .icon.l-icon-link,
       .search-result-item .label .type-icon .icon.l-icon-alert {
-        text-shadow: black 0 1px 2px;
         position: absolute;
         z-index: 2; }
       /* line 90, ../../../../general/res/sass/tree/_tree.scss */
@@ -4170,15 +4179,15 @@ ul.tree {
   .tree-item.selected,
   .search-result-item.selected {
     background: #1ac6ff;
-    color: #efefef; }
+    color: #fcfcfc; }
     /* line 131, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.selected .view-control,
     .search-result-item.selected .view-control {
-      color: #efefef; }
+      color: #fcfcfc; }
     /* line 134, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item.selected .label .type-icon,
     .search-result-item.selected .label .type-icon {
-      color: #efefef; }
+      color: #fcfcfc; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 142, ../../../../general/res/sass/tree/_tree.scss */
     .tree-item:not(.selected):hover,
@@ -4285,7 +4294,7 @@ ul.tree {
  *****************************************************************************/
 /* line 25, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame.child-frame.panel {
-  background: #efefef;
+  background: #fcfcfc;
   border: 1px solid rgba(102, 102, 102, 0.2); }
   /* line 28, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.child-frame.panel:hover {
@@ -4682,7 +4691,7 @@ table {
   .tabular thead, .tabular .thead,
   table thead,
   table .thead {
-    border-bottom: 1px solid #efefef; }
+    border-bottom: 1px solid #fcfcfc; }
   /* line 47, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular tbody, .tabular .tbody,
   table tbody,
@@ -4731,7 +4740,7 @@ table {
     table .tr th,
     table .tr .th {
       background-color: white;
-      border-left: 1px solid #efefef;
+      border-left: 1px solid #fcfcfc;
       color: white;
       padding: 5px 5px;
       white-space: nowrap;
@@ -4938,6 +4947,7 @@ table {
       display: none; }
   /* line 76, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-display-area {
+    background-color: #eee;
     position: absolute;
     top: 25px;
     right: 0;
@@ -4945,13 +4955,13 @@ table {
     left: 60px;
     cursor: crosshair;
     border: 1px solid rgba(102, 102, 102, 0.2); }
-  /* line 86, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 89, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-label,
   .gl-plot .l-plot-label {
     color: #999999;
     position: absolute;
     text-align: center; }
-    /* line 94, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 97, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-label.gl-plot-x-label, .gl-plot .gl-plot-label.l-plot-x-label,
     .gl-plot .l-plot-label.gl-plot-x-label,
     .gl-plot .l-plot-label.l-plot-x-label {
@@ -4960,7 +4970,7 @@ table {
       bottom: 0;
       left: 0;
       height: auto; }
-    /* line 103, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 106, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-label.gl-plot-y-label, .gl-plot .gl-plot-label.l-plot-y-label,
     .gl-plot .l-plot-label.gl-plot-y-label,
     .gl-plot .l-plot-label.l-plot-y-label {
@@ -4977,7 +4987,7 @@ table {
       left: 0;
       top: 50%;
       white-space: nowrap; }
-  /* line 117, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 120, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-y-options {
     position: absolute;
     top: 50%;
@@ -4988,19 +4998,19 @@ table {
     height: auto;
     min-height: 32px;
     width: 32px; }
-  /* line 131, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 134, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-hash {
     position: absolute;
     border: 0 rgba(255, 255, 255, 0.3) dashed; }
-    /* line 134, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 137, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-hash.hash-v {
       border-right-width: 1px;
       height: 100%; }
-    /* line 138, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 141, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-hash.hash-h {
       border-bottom-width: 1px;
       width: 100%; }
-  /* line 144, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 147, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-legend {
     position: absolute;
     top: 0;
@@ -5010,24 +5020,24 @@ table {
     height: 20px;
     overflow-x: hidden;
     overflow-y: auto; }
-  /* line 157, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 160, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .l-limit-bar,
   .gl-plot .l-oob-data {
     position: absolute;
     left: 0;
     right: 0;
     width: auto; }
-  /* line 165, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 168, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .l-limit-bar {
     height: auto;
     z-index: 0; }
-    /* line 173, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 176, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-limit-bar.s-limit-yellow {
       background: rgba(157, 117, 0, 0.2); }
-    /* line 174, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 177, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-limit-bar.s-limit-red {
       background: rgba(170, 0, 0, 0.2); }
-  /* line 177, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 180, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .l-oob-data {
     overflow: hidden;
     position: absolute;
@@ -5040,7 +5050,7 @@ table {
     pointer-events: none;
     height: 10px;
     z-index: 1; }
-    /* line 185, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 188, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-oob-data.l-oob-data-up {
       top: 0;
       bottom: auto;
@@ -5049,7 +5059,7 @@ table {
       background-image: -moz-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
       background-image: -webkit-linear-gradient(90deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
       background-image: linear-gradient(0deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
-    /* line 190, ../../../../general/res/sass/plots/_plots-main.scss */
+    /* line 193, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-oob-data.l-oob-data-dwn {
       bottom: 0;
       top: auto;
@@ -5059,7 +5069,7 @@ table {
       background-image: -webkit-linear-gradient(270deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%);
       background-image: linear-gradient(180deg, rgba(119, 72, 214, 0), rgba(119, 72, 214, 0.5) 100%); }
 
-/* line 200, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 203, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-legend .plot-legend-item,
 .gl-plot-legend .legend-item,
 .legend .plot-legend-item,
@@ -5067,13 +5077,13 @@ table {
   display: inline-block;
   margin-right: 10px;
   margin-bottom: 3px; }
-  /* line 205, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 208, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-legend .plot-legend-item span,
   .gl-plot-legend .legend-item span,
   .legend .plot-legend-item span,
   .legend .legend-item span {
     vertical-align: middle; }
-  /* line 208, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 211, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-legend .plot-legend-item .plot-color-swatch,
   .gl-plot-legend .plot-legend-item .color-swatch,
   .gl-plot-legend .legend-item .plot-color-swatch,
@@ -5088,31 +5098,36 @@ table {
     display: inline-block;
     height: 8px;
     width: 8px; }
+  /* line 220, ../../../../general/res/sass/plots/_plots-main.scss */
+  .gl-plot-legend .plot-legend-item[class*='s-limit'] .title-label,
+  .gl-plot-legend .legend-item[class*='s-limit'] .title-label,
+  .legend .plot-legend-item[class*='s-limit'] .title-label,
+  .legend .legend-item[class*='s-limit'] .title-label {
+    color: #fff; }
 
-/* line 221, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 228, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-legend .plot-legend-item {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
-  color: #fff;
   line-height: 1.5em;
   padding: 0px 5px; }
-  /* line 227, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 234, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-legend .plot-legend-item .plot-color-swatch {
-    border: 1px solid #efefef;
+    border: 1px solid #fcfcfc;
     height: 9px;
     width: 9px; }
 
-/* line 235, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 242, ../../../../general/res/sass/plots/_plots-main.scss */
 .tick {
   position: absolute;
   border: 0 rgba(255, 255, 255, 0.3) solid; }
-  /* line 238, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 245, ../../../../general/res/sass/plots/_plots-main.scss */
   .tick.tick-x {
     border-right-width: 1px;
     height: 100%; }
 
-/* line 244, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 251, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-tick,
 .tick-label {
   font-size: 0.7rem;
@@ -5120,7 +5135,7 @@ table {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis; }
-  /* line 252, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 259, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-tick.gl-plot-x-tick-label, .gl-plot-tick.tick-label-x,
   .tick-label.gl-plot-x-tick-label,
   .tick-label.tick-label-x {
@@ -5131,7 +5146,7 @@ table {
     width: 20%;
     margin-left: -10%;
     text-align: center; }
-  /* line 262, ../../../../general/res/sass/plots/_plots-main.scss */
+  /* line 269, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot-tick.gl-plot-y-tick-label, .gl-plot-tick.tick-label-y,
   .tick-label.gl-plot-y-tick-label,
   .tick-label.tick-label-y {
@@ -5141,18 +5156,18 @@ table {
     margin-bottom: -0.5em;
     text-align: right; }
 
-/* line 274, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 281, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-tick.gl-plot-x-tick-label {
   top: 5px; }
-/* line 277, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 284, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-tick.gl-plot-y-tick-label {
   right: 5px;
   left: 5px; }
 
-/* line 284, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 291, ../../../../general/res/sass/plots/_plots-main.scss */
 .tick-label.tick-label-x {
   top: 0; }
-/* line 287, ../../../../general/res/sass/plots/_plots-main.scss */
+/* line 294, ../../../../general/res/sass/plots/_plots-main.scss */
 .tick-label.tick-label-y {
   right: 0;
   left: 0; }
@@ -5273,19 +5288,20 @@ table {
     top: 0; }
   /* line 29, ../../../../general/res/sass/items/_item.scss */
   .items-holder .item.grid-item {
-    background-color: #a3a3a3;
+    background-color: #b0b0b0;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    color: #fff;
+    color: #ddd;
     display: inline-block;
     -moz-user-select: -moz-none;
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-sizing: border-box;
     cursor: pointer;
     float: left;
@@ -5296,7 +5312,7 @@ table {
     position: relative; }
     /* line 271, ../../../../general/res/sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
-      color: #fff; }
+      color: #ddd; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 276, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover {
@@ -5354,7 +5370,7 @@ table {
         left: 40px;
         width: auto;
         height: auto;
-        color: #fff;
+        color: #ddd;
         text-align: center;
         font-size: 96.9px;
         line-height: 102px;
@@ -5394,18 +5410,20 @@ table {
         text-align: right; }
     /* line 128, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .title {
+      text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: #fff; }
     /* line 133, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .details {
+      text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: #d9d9d9;
       font-size: 0.8em; }
-    /* line 138, ../../../../general/res/sass/items/_item.scss */
+    /* line 139, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-color: #0099cc;
       -moz-border-radius: 4px;
@@ -5420,10 +5438,11 @@ table {
       -ms-user-select: none;
       -webkit-user-select: none;
       user-select: none;
+      text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       color: #80dfff; }
       /* line 271, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
-        color: #fff; }
+        color: #ddd; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
         /* line 276, ../../../../general/res/sass/_mixins.scss */
         .items-holder .item.grid-item.selected:not(.disabled):hover {
@@ -5431,16 +5450,16 @@ table {
           /* line 278, ../../../../general/res/sass/_mixins.scss */
           .items-holder .item.grid-item.selected:not(.disabled):hover > .icon {
             color: white; } }
-      /* line 143, ../../../../general/res/sass/items/_item.scss */
+      /* line 144, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 144, ../../../../general/res/sass/items/_item.scss */
+      /* line 145, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 145, ../../../../general/res/sass/items/_item.scss */
+      /* line 146, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 147, ../../../../general/res/sass/items/_item.scss */
+      /* line 148, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index ec236bc289..f7d180cede 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -1,9 +1,9 @@
 $basicCr: 4px;
 $controlCr: $basicCr;
 /************************** COLORS AND SHADING */
-$colorBodyBg: #efefef;
-$colorGenBg: #fff; // NEW
+$colorBodyBg: #fcfcfc;
 $colorBodyFg: #666;
+$colorGenBg: #fff;
 $colorFooterBg: #000;
 $colorKey: #0099cc;
 $colorKeySelectedBg: $colorKey;
@@ -16,7 +16,8 @@ $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
 $colorBtnFg: #fff;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorFg: $colorKeyFg;
-$colorBtnIcon: $colorBtnFg;
+$colorBtnIcon: #ddd;
+$colorObjHdrIcon: $colorBodyFg;
 $colorInvokeMenu: #000;
 $contrastInvokeMenuPercent: 50%;
 
@@ -50,7 +51,8 @@ $colorFormSectionHeader: rgba(#000, 0.1);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
 $colorFormText: pushBack($colorBodyFg, 10%);
-// Limits and staleness colors
+$colorInputIcon: pushBack($colorBodyFg, 25%);
+// Limits and staleness colors//
 $colorLimitYellow: #9d7500;
 $colorLimitRed: #aa0000;
 $colorTelemFresh: #fff;
@@ -58,7 +60,7 @@ $colorTelemStale: #888;
 $styleTelemStale: italic;
 // Bubble colors
 $colorInfoBubbleFg: #666;
-$colorInfoBubbleBg: #ddd;
+$colorInfoBubbleBg: $colorMenuBg;
 $colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
 $colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
 // Overlay
@@ -71,10 +73,10 @@ $colorOvrBtnFg: #fff;
 $colorItemBg: $colorBtnBg; //pullForward($colorBodyBg, 15%);
 $colorItemFg: $colorBtnFg; //lighten($colorItemBg, 20%);
 $colorItemFgDetails: darken($colorItemFg, 15%);
-$colorItemIcon: $colorItemFg;
+$colorItemIcon: $colorBtnIcon;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
-$shdwItemText: none;
+$shdwItemText: rgba(black, 0.2) 0 1px 2px;
 $colorItemBgSelected: $colorKey;
 // Tabular
 $tabularColorBorder: rgba(white, 0.1);
@@ -83,6 +85,9 @@ $tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
 $tabularColorHeaderBg: lighten($colorBodyBg, 10%);
 $tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
 $tabularColorHeaderBorder: $colorBodyBg;
+// Plot
+$colorPlotBg: #eee; //
+$colorPlotFg: $colorBodyFg;
 // Tree
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
@@ -102,6 +107,8 @@ $scrollbarThumbColorHov: $colorKey;
 $splitterShdw: none;
 $colorSplitterInterior: $colorBodyBg;
 $colorSplitterHover: $colorKey;
+$splitterW: 5px;
+$splitterEndCr: $splitterW;
 $colorGrippyInteriorHover: $colorBodyBg;
 
 /********************************* MOBILE */
diff --git a/platform/commonUI/themes/snow/res/sass/_mixins.scss b/platform/commonUI/themes/snow/res/sass/_mixins.scss
index ddf80cb80c..267aa62d26 100644
--- a/platform/commonUI/themes/snow/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/snow/res/sass/_mixins.scss
@@ -5,6 +5,7 @@
 @mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
 	@include containerSubtle($bg, $fg);
 	@include btnBase($bg, $colorKey, $fg, $ic);
+	@include text-shadow($shdwItemText);
 }
 
 @function pullForward($c: $colorBodyBg, $p: 20%) {

From d14c4e08b8b08e5046dd34be1ba193346514a196 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 10 Sep 2015 15:01:51 -0700
Subject: [PATCH 203/266] [Frontend] IN-PROGRESS Theming continues

open #95
Shadow and color normalization: fixed-position, tabular;
Updated paint bucket and icon-box in symbols font;
Custom checkboxes now use inset shdw;
---
 .../icomoon.io-WTD-symbols-project.json       |  40 +-
 .../general/res/fonts/symbols/wtdsymbols.eot  | Bin 11268 -> 11080 bytes
 .../general/res/fonts/symbols/wtdsymbols.svg  |   7 +-
 .../general/res/fonts/symbols/wtdsymbols.ttf  | Bin 11092 -> 10904 bytes
 .../general/res/fonts/symbols/wtdsymbols.woff | Bin 11168 -> 10980 bytes
 .../commonUI/general/res/sass/_constants.scss |   3 -
 .../general/res/sass/_fixed-position.scss     |   2 +-
 .../commonUI/general/res/sass/_mixins.scss    |   4 +-
 .../general/res/sass/controls/_buttons.scss   | 153 ++++---
 .../general/res/sass/controls/_controls.scss  |  12 +-
 .../general/res/sass/controls/_menus.scss     |   7 +-
 .../general/res/sass/features/_imagery.scss   |   6 +-
 .../general/res/sass/items/_item.scss         |   9 +-
 .../general/res/sass/lists/_tabular.scss      |  24 +-
 .../general/res/sass/overlay/_overlay.scss    |   1 +
 .../espresso/res/css/theme-espresso.css       | 289 ++++++------
 .../themes/espresso/res/sass/_constants.scss  |  40 +-
 .../themes/snow/res/css/theme-snow.css        | 414 +++++++++---------
 .../themes/snow/res/sass/_constants.scss      |  58 ++-
 .../themes/snow/res/sass/_mixins.scss         |   2 +-
 20 files changed, 547 insertions(+), 524 deletions(-)

diff --git a/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json b/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
index cd432472af..d3d85f075c 100644
--- a/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
+++ b/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
@@ -1,8 +1,8 @@
 {
 	"metadata": {
-		"name": "WTD Symbols v2.2",
-		"lastOpened": 1439948744240,
-		"created": 1439948734037
+		"name": "WTD Symbols v2.",
+		"lastOpened": 1441911912596,
+		"created": 1441911876817
 	},
 	"iconSets": [
 		{
@@ -48,7 +48,7 @@
 					"tempChar": ""
 				},
 				{
-					"order": 81,
+					"order": 83,
 					"id": 78,
 					"prevSize": 32,
 					"code": 58886,
@@ -268,7 +268,7 @@
 					"id": 49,
 					"prevSize": 32,
 					"code": 224,
-					"name": "icon-box-round-corners",
+					"name": "icon-box",
 					"tempChar": ""
 				},
 				{
@@ -840,17 +840,19 @@
 				{
 					"id": 78,
 					"paths": [
-						"M896 640c0 0-130 188-128 256 2 70.6 57.4 128 128 128s126-57.4 128-128c2-68-128-256-128-256z",
-						"M449 129l0.2-64.8c0-35.4-28.4-64-63.8-64.2 0 0-0.2 0-0.2 0-35.2 0-63.8 28.6-64 63.8l-0.6 190.8-294 292.6c-50 50-12.4 215.2 112.4 340s290 162.4 340 112.4l417-423.6-447-447zM384 640c-70.6 0-128-57.4-128-128 0-47.4 25.8-89 64.4-111l-0.4 110.8c0 35.4 28.4 64 63.8 64.2 0 0 0.2 0 0.2 0 35.2 0 63.8-28.6 64-63.8l0.4-110.8c38 22.2 63.6 63.4 63.6 110.6 0 70.6-57.4 128-128 128z"
+						"M544 224v224c0 88.4-71.6 160-160 160s-160-71.6-160-160v-97.2l-197.4 196.4c-50 50-12.4 215.2 112.4 340s290 162.4 340 112.4l417-423.6-352-352z",
+						"M896 1024c70.6 0 128-57.4 128-128 0-108.6-128-192-128-192s-128 83.4-128 192c0 70.6 57.4 128 128 128z",
+						"M384 512c-35.4 0-64-28.6-64-64v-384c0-35.4 28.6-64 64-64s64 28.6 64 64v384c0 35.4-28.6 64-64 64z"
 					],
 					"attrs": [
 						{
-							"fill": "rgb(6,161,75)",
-							"opacity": 1
+							"fill": "rgb(6, 161, 75)"
 						},
 						{
-							"fill": "rgb(6,161,75)",
-							"opacity": 1
+							"fill": "rgb(6, 161, 75)"
+						},
+						{
+							"fill": "rgb(6, 161, 75)"
 						}
 					],
 					"isMulticolor": false,
@@ -861,9 +863,6 @@
 					"colorPermutations": {
 						"16161751": [
 							1,
-							1
-						],
-						"125525525516161751": [
 							1,
 							1
 						]
@@ -1290,16 +1289,23 @@
 				{
 					"id": 49,
 					"paths": [
-						"M1024 832c0 105.6-86.4 192-192 192h-640c-105.6 0-192-86.4-192-192v-640c0-105.6 86.4-192 192-192h640c105.6 0 192 86.4 192 192v640z"
+						"M0 0h1024v1024h-1024v-1024z"
 					],
 					"attrs": [
-						{}
+						{
+							"fill": "rgb(0, 0, 0)"
+						}
 					],
 					"isMulticolor": false,
 					"grid": 0,
 					"tags": [
 						"icon-box-round-corners"
-					]
+					],
+					"colorPermutations": {
+						"16161751": [
+							0
+						]
+					}
 				},
 				{
 					"id": 48,
diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
index aaab92d345f6ad0d43369f6c3405c70236496808..2a2e64b1135a274e4a810f545e0b1afdbb79c58e 100755
GIT binary patch
delta 499
zcmZpPI1$F?q0PWBLu(?N8B4E{{ga6f6YEdBKgPhoC<DYc>50V!3=9kc3=B*WK$;^x
zr!p;Xq9zxRpTNMN{3jzdF@@bX&Y6KhEe0rWmH`xCKfoda<WB+eRWfo*D(u)<gn|4W
zK=XWZ@{<#@>WecN7&KUb@+)!^D+(AA8OnkDH9)>XUSe*lg#4AaaX^7HKn<%3@{3Ct
zn1NCZS{0Ks7*8^?Pc~xeW_FPh*nEJgTwEAvim;-fq96kc!yg9b1Al<@<}|5~T=k+1
zY7C}86GTPWl$F$M8QJ+5<ru}~n9R&M85xbtOilEd3=R00L`B4m8I{yb1x?J1jl@I+
zfvTAl;+&k~jtaBN*y`(N#Q6v_F8sHEF~QVZ!$1RwyiNZxNUN$!gD}&B2TpNuPKif^
zed5#g^=)NXg&0>bCj5EeEoG|dW+E$V;-+cp&BUN8&Da1^{|`tqOy*E4ocvSmyv!4O
zrQUdco39Mqps-+IxFp{55JpdaqHfL@yje!Wn{jfsW{&eb?mgVsc({1fc*1yUc(r)T
zco*^R;628Bh4&Tj4?Y1t556kCKE8AO2K;gSmjr|a!UX0C3J4|%&Jx@p_>X}RXl(Fi
IIjv`m0Ax{mga7~l

delta 697
zcmYjPO-vI(6n-;ZT7>SlOS^!jRLau7U}))fwnQmujV8*HfI^THSOwXTV%vZL6HWKP
zf!KtE?A41mLr6sG4HJ6t2QEtFWQZ|FPmM7qnwS`hvl@(tH*dc8ee>R%dGl&?Y0S)=
z1{mpFHOq`;bEUGHTrKQ=eF=cv)Ox4Wb2$L81K=_0Yo{}JZoYj|c~9{*fQ}7yDm`ft
zUVjD%Pz}f`4Oq&IK=DP2JJi|v#d8+ML2-uW8_HyFr0-ScuK)y}QGRVUy_kdRumBKJ
zDQ>%!o}Fqwwf|+D2A1i8wOn>?9!!*i&X}&E9aO7FanW?a#h1!>p(#wO`kZFb+wLcP
zOqRUSMuBG_KX|AO=JSJ?uKzYhu+;DRR#&h?2vRhAgu_i9Bt_-8+=aUliTTAI)ZK1w
zMTkQl)a1c(`~))5+%Y*WI2$F(M&$&h1X|Oig(5+O`U$y&Q7{s!rhF|ffAyWC#+?X<
z)$subdRR@Rh$6NcM60L}luQhdx}ro;$jPh233QZl`F$<h)dR=C#B?~EaMv`TM`*i>
z6w+~q&l+TwKPwVN-}mJU^cjxI44BH`1TWCBp>_@nP7ju%eVD|$uqe>$)6V`hEIGVH
zA|mnfl7L}mt2i`N+?qM|Mhk|OtD2^vWYSdrpEXq4Ujb1LlT>m9nttB@#$8$2v`pA~
ze?UEB3<dUnJ>NX`dL$4>BPBJUApLPLcX_>jxBip0*&4G>TJN(x>=L`dzF_y+kL*v*
z%z3y`Zkc<)9oYJ88QTYYn|;#0&U^T~{8RpWLtTUM-w?GCxDBjP0<gY^9i>8O2mJ=C
C$+ZXo

diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
index a6f2bae8ea..537244cfe9 100755
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
@@ -55,7 +55,7 @@
 <glyph unicode="&#x7a;" glyph-name="icon-fullscreen-expand" d="M192.344 128c-0.118 0.1-0.244 0.224-0.344 0.344v191.656h-192v-192c0-105.6 86.4-192 192-192h192v192h-191.656zM192 767.656c0.1 0.118 0.224 0.244 0.344 0.344h191.656v192h-192c-105.6 0-192-86.4-192-192v-192h192v191.656zM832 960h-192v-192h191.656c0.118-0.1 0.244-0.226 0.344-0.344v-191.656h192v192c0 105.6-86.4 192-192 192zM832 128.344c-0.1-0.118-0.224-0.244-0.344-0.344h-191.656v-192h192c105.6 0 192 86.4 192 192v192h-192v-191.656z" />
 <glyph unicode="&#x7b;" glyph-name="icon-pointer-left" horiz-adv-x="512" d="M510-64l-256 512 256 512h-256l-256-512 256-512z" />
 <glyph unicode="&#x7d;" glyph-name="icon-pointer-right" horiz-adv-x="512" d="M-2 960l256-512-256-512h256l256 512-256 512z" />
-<glyph unicode="&#xe0;" glyph-name="icon-box-round-corners" d="M1024 128c0-105.6-86.4-192-192-192h-640c-105.6 0-192 86.4-192 192v640c0 105.6 86.4 192 192 192h640c105.6 0 192-86.4 192-192v-640z" />
+<glyph unicode="&#xe0;" glyph-name="icon-box" d="M0 960h1024v-1024h-1024v1024z" />
 <glyph unicode="&#xe1;" glyph-name="icon-layers" d="M1024 576l-512 384-512-384 512-384zM512 64l-426.666 320-85.334-64 512-384 512 384-85.334 64z" />
 <glyph unicode="&#xe2;" glyph-name="icon-line-horz" d="M64 384c-35.346 0-64 28.654-64 64s28.654 64 64 64h896c35.346 0 64-28.654 64-64s-28.654-64-64-64h-896z" />
 <glyph unicode="&#xe3;" glyph-name="icon-image" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM896 64h-768v768h768v-768zM320 704l-128-128v-448h640v320l-128 128-128-128z" />
@@ -82,9 +82,8 @@
 <glyph unicode="&#xe603;" glyph-name="icon-alert-triangle" d="M998.208 111.136l-422.702 739.728c-34.928 61.124-92.084 61.124-127.012 0l-422.702-739.728c-34.928-61.126-5.906-111.136 64.494-111.136h843.428c70.4 0 99.422 50.010 64.494 111.136zM512 128c-35.2 0-64 28.8-64 64s28.8 64 64 64 64-28.8 64-64c0-35.2-28.8-64-64-64zM627.448 577.242l-38.898-194.486c-6.902-34.516-41.35-62.756-76.55-62.756s-69.648 28.24-76.552 62.758l-38.898 194.486c-6.902 34.516 16.25 62.756 51.45 62.756h128c35.2 0 58.352-28.24 51.448-62.758z" />
 <glyph unicode="&#xe604;" glyph-name="icon-tabular" d="M0 896v-192h448v256h-384c-35.2 0-64-28.8-64-64zM960 960h-384v-256h448v192c0 35.2-28.8 64-64 64zM576 576h448v-256h-448v256zM0 576h448v-256h-448v256zM0 0c0-35.2 28.8-64 64-64h384v256h-448v-192zM576-64h384c35.2 0 64 28.8 64 64v192h-448v-256z" />
 <glyph unicode="&#xe605;" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
-<glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M896 320c0 0-130-188-128-256 2-70.6 57.4-128 128-128s126 57.4 128 128c2 68-128 256-128 256zM449 831l0.2 64.8c0 35.4-28.4 64-63.8 64.2 0 0-0.2 0-0.2 0-35.2 0-63.8-28.6-64-63.8l-0.6-190.8-294-292.6c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-447 447zM384 320c-70.6 0-128 57.4-128 128 0 47.4 25.8 89 64.4 111l-0.4-110.8c0-35.4 28.4-64 63.8-64.2 0 0 0.2 0 0.2 0 35.2 0 63.8 28.6 64 63.8l0.4 110.8c38-22.2 63.6-63.4 63.6-110.6 0-70.6-57.4-128-128-128z" />
-<glyph unicode="&#xe607;" glyph-name="icon-x-in-circle-heavy" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
-<glyph unicode="&#xe608;" glyph-name="icon-info" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 832c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 128h-384v128h128v128h-128v128h320v-256h64v-128z" />
+<glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M544 736v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-64c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 448c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
+<glyph unicode="&#xe607;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
 <glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
 <glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
index f6cf40ef12a279d8cdaa2add220a6bd2e683761c..58e64c53678026014601c92d6a9ece8d2b741c23 100755
GIT binary patch
delta 482
zcmcZ-HY0R`V*QEt#~2tGWq{ZwJ+Ziefq_AQfq^LkNOPp;RHo%k)Z_y46Brnj|74^l
zrm*|QIWsV*#Q^2aGJpc?2UtXa{3$@bN=9x;g&jMKFp$3kXr50_esW?~eQ^c@g9Zyw
zenoC#MFB%1LphMY2FO>)OUzA`kiYUa4k&O2s9{w>esKu{Gf;{_t777glZ@<>n;5&9
zU8Dpy3ow<73j+-iRuoheWME<V!@zvt50KuxP4XjGy(ohkgDKDeQ4uy}B{f?{c0NWq
zMsYbNGjmQxMk6y*6FnwF13o5E5iw&%B{fq)6EkBYF;PLFY9@s^C#Sfh!mKj3`uZ7h
zKEjL(|1DrlF!k0j&;TND(|-)os;bf;%=F-aQ(T-=;t^q=_;h`JTNzd%#ubbSe;#;C
znQFS3$jX|yX_|U7F{ny2Hh|Rs1Ck7rBUB3~d#at6d19~B8_#d^m4O=+6buZP#CsmX
z=*cGP=8VCcbJV>VC-2tCah}J$hx-~27mpfG7*7qa7H=8vBHkUm$9S*szT*ACC&1^y
rSH;)IcaGnHKaT&BfRI3#z&t?#!6d<1f*S<?F)#v+4c?rm`HT?&z!i2W

delta 680
zcmYjPUr19?82`@Mbf&v^yKdJ%b1tuUn;V7G-JLrrCtDCySJ2X|CvBxUWVQ_r4GJ&O
zgCs<;9wK__EyM?NJqQNwr9xjU@+l-D>PaGkf*{=bZejHBo$vg<-|u{X&N&axZV%m+
z<~F~+0w8X*?(yVQ769x3^gQ~i@$|LJZ=deIM|=UmyPO(Jj#|X6&j4+x0X2mIOVKPM
zK7rVqnw*|JW-&Vur!ilDI&&#`V|V%tK;Sv@i<8OOEL?;cfM5!7%a!EhSi`~XFT)s^
z#{-Mm%+xfPkb*;zd#f9yDu0tKn2x)If}PIPhp?#6St(1cekMdzMGDu6f*EpsdwO3k
z*GF;vw=sf+hmGH==j;%K1Sap`X}yOiVKu6@(@w%7ez}WuwpKP1!V?dv_fR!@fS53M
zM2(8hItAIV8beCNnkGHi5g_CgV<#yIbOcKYUz5vUdgrKc$3mghaIb?rE+rC7lba2q
zS=Jbd#|DO6VWw%U@!UX+loKw$uW7xs<LDh34~1gxidyo7te1$!yhntLL1u)bGSl*2
zUv3U>p<FbBsR&Mx;4lu*%2Uzlp-Q-ivPe6XMI0YH`_r)EkeI?`CJBm2VPb8ezkgwE
zV&5Ar7*;Ilx=!M8Q}KV+Q0adKOxug2qzrogzVEer_s)uC#Mb=-YRtx)z?)w$R`z{f
z_eaTKVb!mZe7P-qdZ}i!=99I-8nKRAZ*yJTEpC~6$!&8Vxu1L`@8O5|dHxZ<W9zY{
pZ6E9{_EGzi;1RA1&xG%_)wRZVBWQzg6*!{=(7Z$)g{{B_`3)k-u_6Ef

diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
index aaf58a7f76fe5205d1dd0645d2cea7f03cb85da2..182bd9fd8191af7d5b8153bea69b6ff84de8235f 100755
GIT binary patch
delta 538
zcmZ1w{v=ea+~3WOfsp|Sw4N|<gXtLzOp_Ct#3t&f)}MHPEIqNffPsN&2~dgyiUrbh
zD${^sYZw@m|A27bL`|-Y)Wj492DKGHHD(~p?i=Tv0Tcv^Jpl4mK$!gii%3RpNd*Ig
zItv2>qYnt%v9k#0<R=5wX#@b(fb_4(sxQvSO{^%;0Sf*A3MhbaB13szVs0t}gQf&f
z<0=rAzw$P&AiuZ-==viQ|6F8bpL~w7o83i9fPtBT5$Fk*%}bc{#f5>E2`dUJ3No-T
z{9#}|@CQh5W|I2IRWHh*#$XCGNK}MPSxL>7k)4lGj!|5W$;_OSk<rM^)I^WT(14Fg
zR7A{}QAy2I(8SExNK8}^sG3P3&dDk6s4%OHt-gLnoR2W$!hZ`G6HL7|3^ahq+w>oU
zw5qB!2s1r+;1n0<lz2qgCq7+Y-&TfIh;apD!k-7;Ql^@2CbF_7ZkndvObn{hj13_5
z|9~XJ<Rz+wlc%bkmw95Z)Em!l^Ob=c=nEjYB;NB7Mo(@~H)jmqyhGiaaWcDRj`KY3
zJ>1uLxOmif!gy+UwRp>T7xC`kJ;r;5_Z9CCJ^?-tzAC;xzH|Hr{Biu31cU^_1m+0}
W2qp>665Js851a~uH}BGX#s~m(K!B$J

delta 722
zcmYk3QAiVU9LImZ+jQo(+s^G~PF>D(Ya?;G+kca4vPBtn!X!<52xX-?MB9df28H*~
zLnH*U9(yqGA;brBJ_J6vmkJ~*$)}KzFkd7hC<w~g?<}K(&;9Pc-|zkYzyJNWFVFTm
zCKB!KfI!!YSuh^dZs2lB&N0*InOghuaws{L0pRAyD*KCdXyn!n(iQ+37B${I-Tjan
zOb!4Xze<^~hCzJuDMcb_59z%@!%)zRsnPLC(w+fer^XqB-ZqlHPC38Ue_rFx?)atA
z<YcCi#AOod4!8yrH<P1-q;1fL6vX*s8=w0!>9KK|UY+^1j%B&mIBhuR6hH?^n>d@F
z;{ufdD}cvdD!J>uObCT#chDgUddMdB)I>I$;OPGEK@;;kRbR`etl)<@Ez-<$l`fQn
z;YhfNYe5$BO0C#ZUs{XEqYEotTsU$Bb<{f)j)-=LOl~k7B}=3=b*jJFhj@{(3mp2I
z{l&Pa+UYI6x0TdH1A$auhYcSW<8h`)wVF{YDGX!Lt{!KQDGICV?TX@l-0AgHuNF6L
z9sNUrK(wZ$0-xY&5f#>OQb=oNS~w*!C71DJr*r`O1wH5rU<WtQAH;f|6YVZe4z_VD
z)Wk_5ZJ#DP7+AKsnam{S7G#lw;g#vm&gqrm!>Wy-Q7Edaim{lk@V~32)IR~H?8PXu
z4{C19^R{O9!IGiha{4<M^>lIo>p!0_9oF0{Zv?yZ`r``b6kq22f^p5bZ8~ZSnFdVv
z&8_CU=0)=h^M?7O`3GOhyZ9dd9{-5nw6s}9EL+w(>wtAZa0$1CW#L;zdBqiKi$r(6
H=-a{H2TQtr

diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 1c2d9eddc0..00c869bc68 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -28,9 +28,6 @@ $bodyMargin: 10px;
 $interiorMargin: 5px;
 $interiorMarginLg: $interiorMargin * 2;
 $interiorMarginSm: 3px;
-$basicCr: 2px;
-$controlCr: 3px;
-$smallCr: 2px;
 $badgeW: 35px;
 
 /************************** RATIOS */
diff --git a/platform/commonUI/general/res/sass/_fixed-position.scss b/platform/commonUI/general/res/sass/_fixed-position.scss
index f9e8a82994..edc6332231 100644
--- a/platform/commonUI/general/res/sass/_fixed-position.scss
+++ b/platform/commonUI/general/res/sass/_fixed-position.scss
@@ -76,7 +76,7 @@
 		}
 
 		.l-fixed-position-text {
-			@include txtShdwSubtle();
+			//@include txtShdwSubtle();
 			border: 1px solid transparent;
 			font-size: 0.8rem;
 			$p: 1px; //$interiorMarginSm;
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 83984a206f..1d38e876ba 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -223,9 +223,9 @@
 }
 
 @mixin txtShdw($sVal) {
-	@if $sVal != 'none' {
+	//@if $sVal != 'none' {
 		@include text-shadow($sVal);
-	}
+	//}
 }
 
 @mixin txtShdwSubtle($sVal: 0.1) {
diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
index 5d97d9b0e0..b9fa14eda4 100644
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -59,94 +59,103 @@ $pad: $interiorMargin * $baseRatio;
 
 /*********************************** STYLE STYLES */
 .s-btn {
-	@include box-sizing(border-box);
-	@include user-select(none);
-	cursor: pointer;
-	text-decoration: none;
-	height: $btnStdH;
-	line-height: $btnStdH;
-	padding: 0 $pad;
-	font-size: 0.7rem;
+    @include box-sizing(border-box);
+    @include user-select(none);
+    cursor: pointer;
+    text-decoration: none;
+    height: $btnStdH;
+    line-height: $btnStdH;
+    padding: 0 $pad;
+    font-size: 0.7rem;
 
-	.icon {
-		font-size: 0.8rem;
-		color: $colorKey;
-	}
+    .icon {
+        font-size: 0.8rem;
+        color: $colorKey;
+    }
 
-	.title-label {
-		vertical-align: top;
-	}
+    .title-label {
+        vertical-align: top;
+    }
 
-	&.sm {
-		padding: 0 $pad / $baseRatio;
-	}
+    &.sm {
+        padding: 0 $pad / $baseRatio;
+    }
 
-	&.vsm {
-		padding: 0 ($pad / $baseRatio) / 2;
-	}
+    &.vsm {
+        padding: 0 ($pad / $baseRatio) / 2;
+    }
 
-	&.major {
-		$bg: $colorBtnMajorBg;
-		$hc: lighten($bg, 10%);
-		@include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
-	}
+    &.major {
+        $bg: $colorBtnMajorBg;
+        $hc: lighten($bg, 10%);
+        @include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
+    }
 
-	&:not(.major) {
-		// bg, bgHov, fg, ic
-		@include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
-	}
+    &:not(.major) {
+        // bg, bgHov, fg, ic
+        @include btnSubtle($colorBtnBg, $colorKey, $colorBtnFg, $colorBtnIcon);
+    }
+    &.pause-play {
 
-	&.paused {
-		@include btnSubtle($colorPausedBg, lighten($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
-		.icon:before {
-			content: "\0000EF";
-		}
-	}
+    }
 
-	&.pause-play {
-		/*
-			&.paused {
-				.icon {
-					@include pulse(500ms);
-				}
-			}
-		*/
-		.icon:before {
-			content: "\0000F1";
-		}
-	}
+    //&.paused {
+    //    @include btnSubtle($colorPausedBg, lighten($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
+    //    .icon {
+    //        @include pulse(500ms);
+    //        &:before {
+    //            content: "\0000EF";
+    //        }
+    //    }
+    //}
 
-	&.show-thumbs {
-		.icon:before {
-			content: "\000039";
-		}
-	}
+    &.pause-play {
+        .icon:before {
+            content: "\0000F1";
+        }
+        &.paused {
+            @include btnSubtle($colorPausedBg, pushBack($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
+            .icon {
+                @include pulse(1000ms);
+                :before {
+                    content: "\0000EF";
+                }
+            }
+        }
+    }
+
+    &.show-thumbs {
+        .icon:before {
+            content: "\000039";
+        }
+    }
 }
 
 .l-btn-set {
-	// Buttons that have a very tight conceptual grouping - no internal space between them.
-	// Structure: .btn-set > mct-representation class=first|last > .s-btn
-	//@include test(red);
-	font-size: 0; // Remove space between s-btn elements due to white space in markup
+    // Buttons that have a very tight conceptual grouping - no internal space between them.
+    // Structure: .btn-set > mct-representation class=first|last > .s-btn
+    //@include test(red);
+    font-size: 0; // Remove space between s-btn elements due to white space in markup
 
-	.s-btn {
-		@include border-radius(0);
-		margin-left: 1px;
-	}
+    .s-btn {
+        @include border-radius(0);
+        margin-left: 1px;
+    }
 
-	.first {
-		.s-btn {
-			@include border-left-radius($controlCr);
-			margin-left: 0;
-		}
-	}
+    .first {
+        .s-btn {
+            @include border-left-radius($controlCr);
+            margin-left: 0;
+        }
+    }
 
-	.last {
-		.s-btn {
-			@include border-right-radius($controlCr);
-		}
-	}
+    .last {
+        .s-btn {
+            @include border-right-radius($controlCr);
+        }
+    }
 }
+
 /*********************************** LAYOUT STYLES */
 /*
 
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 7590daa255..0933362797 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -138,7 +138,7 @@
 }
 
 label.checkbox.custom {
-	$bg: lighten($colorBodyBg, $ltGamma);
+	$bg: pullForward($colorBodyBg, 10%);
 	$d: $formRowCtrlsH;
 	cursor: pointer;
 	display: inline-block;
@@ -154,8 +154,9 @@ label.checkbox.custom {
 		min-width: $d;
 		&:before {
 			@include border-radius($basicCr * .75);
-			background: $bg;
-			border-bottom: 1px solid lighten($bg, 10%);
+			//background: $bg;
+			//border-bottom: 1px solid lighten($bg, 10%);
+			@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
 			box-sizing: border-box;
 			content: " ";
 			font-family: 'symbolsfont';
@@ -344,7 +345,10 @@ label.checkbox.custom {
 
 @include desktop {
 	::-webkit-scrollbar {
-		@include sliderTrack();
+		@include border-radius(2px);
+		@include box-sizing(border-box);
+		@include box-shadow(inset $scrollbarTrackShdw);
+		background-color: $scrollbarTrackColorBg;
 		height: $scrollbarTrackSize;
 		width: $scrollbarTrackSize;
 	}
diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss
index a2caac0813..32fc9af7ee 100644
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -158,9 +158,8 @@
 	.super-menu {
 		$w: 500px;
 		$h: $w - 20;
-		$plw: 50%; //$w * 0.5;
-		$prw: 50%; //$w - $plw;
-		//$fg: #fff; //lighten($colorBodyFg, 40%);
+		$plw: 50%;
+		$prw: 50%;
 		display: block;
 		width: $w;
 		height: $h;
@@ -171,7 +170,7 @@
 			@include box-sizing(border-box);
 			&.left {
 				//@include test();
-				border-right: 1px solid rgba(white, 0.2);
+				border-right: 1px solid pullForward($colorMenuBg, 10%);
 				left: 0;
 				padding-right: $interiorMargin;
 				right: auto;
diff --git a/platform/commonUI/general/res/sass/features/_imagery.scss b/platform/commonUI/general/res/sass/features/_imagery.scss
index c86556fd04..fa74ed1caf 100644
--- a/platform/commonUI/general/res/sass/features/_imagery.scss
+++ b/platform/commonUI/general/res/sass/features/_imagery.scss
@@ -14,7 +14,7 @@
 	min-height: 100px;
 	min-width: 150px;
 	.l-image-main {
-		background-color: rgba(#fff, 0.1);
+		background-color: $colorPlotBg;
 		bottom: $imageMainControlBarH + $interiorMargin;
 	}
 	.l-image-main-controlbar {
@@ -66,7 +66,7 @@
 	}
 	.l-date,
 	.l-time {
-		color: #fff;
+		color: pullForward($colorBodyFg, 20%);
 	}
 	.l-mag {
 		direction: ltr;
@@ -77,7 +77,7 @@
 		}
 	}
 	.s-mag {
-		color: darken($colorBodyFg, 20%);
+		color: pushBack($colorBodyFg, 20%);
 	}
 	.l-btn.show-thumbs {
 		display: none;
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 321c6dfbf6..5f056d4de2 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -29,12 +29,10 @@
         &.grid-item {
             //div { @include test() }
             $d: $ueBrowseGridItemLg;
-            //$iconD: 100px;
             $iconMargin: 40px;
             $iconD: ($d - ($iconMargin * 2)) * 0.85;
             $transTime: 200ms;
-            //@include btnSubtle($colorItemBg);
-            @include btnSubtle($colorItemBg, $colorItemFg, $colorItemIcon);
+            @include btnSubtle($colorItemBg, pullForward($colorItemBg, 20%), $colorItemFg, $colorItemIcon);
             box-sizing: border-box;
             cursor: pointer;
             float: left;
@@ -51,7 +49,6 @@
                     }
                 }
 	            .item-open {
-		            //display: block;
                     opacity: 1;
 	            }
             }
@@ -80,7 +77,6 @@
                 }
                 &.bottom-bar {
                     top: auto;
-                    //height: $ueBrowseGridItemBottomBarH;
                     line-height: 110%;
                 }
             }
@@ -101,9 +97,7 @@
                     bottom: auto;
                     height: $iconD;
                     top: $iconMargin - 10;
-                    //line-height: $lh;
                     .l-icon-link {
-                        // When the link icon is in the item-type icon holder
                         color: $colorIconLink;
                         height: auto;
                         line-height: 100%;
@@ -115,7 +109,6 @@
                     }
                 }
                 .item-open {
-                    //@include test();
                     @include trans-prop-nice("opacity", $transTime);
                     opacity: 0;
 	                color: $colorItemOpenIcon;
diff --git a/platform/commonUI/general/res/sass/lists/_tabular.scss b/platform/commonUI/general/res/sass/lists/_tabular.scss
index 0621cad46b..161e7511a8 100644
--- a/platform/commonUI/general/res/sass/lists/_tabular.scss
+++ b/platform/commonUI/general/res/sass/lists/_tabular.scss
@@ -29,30 +29,22 @@ table {
 	@include box-sizing(border-box);
 	border-spacing: 0;
 	border-collapse: collapse;
-	color: #fff;
 	display: table;
 	font-size: 0.75rem;
 	position: relative;
-	//height: 100%; MOVED
 	width: 100%;
 	thead, .thead,
 	tbody tr, .tbody .tr {
-		//display: table; MOVED
 		width: 100%;
-		//table-layout: fixed; MOVED
 	}
 	thead, .thead {
-		border-bottom: 1px solid $tabularColorHeaderBorder;
+		border-bottom: 1px solid $colorTabHeaderBorder;
 	}
 	tbody, .tbody {
-		//@include absPosDefault(0); MOVED
-		//top: $tabularHeaderH; MOVED
-		//display: block; MOVED
-		//overflow-y: scroll; MOVED
 		display: table-row-group;
 		tr, .tr {
 			&:hover {
-				background: rgba(white, 0.1);
+				background: rgba($colorTabBodyFg, 0.1);
 			}
 		}
 	}
@@ -64,17 +56,17 @@ table {
 		&.group-header {
 			td, .td {
 				$d: 5%;
-				background-color: darken($tabularColorHeaderBg, $d);
-				color: darken($tabularColorHeaderFg, $d);
+				background-color: pushBack($colorTabHeaderBg, $d);
+				color: pushBack($colorTabHeaderFg, $d);
 			}
 		}
 		th, .th, td, .td {
 			display: table-cell;
 		}
 		th, .th {
-			background-color: $tabularColorHeaderBg;
-			border-left: 1px solid $tabularColorHeaderBorder;
-			color: $tabularColorHeaderFg;
+			background-color: $colorTabHeaderBg;
+			border-left: 1px solid $colorTabHeaderBorder;
+			color: $colorTabHeaderFg;
 			padding: $tabularTdPadLR $tabularTdPadLR;
 			white-space: nowrap;
 			vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
@@ -99,7 +91,7 @@ table {
 			}
 		}
 		td, .td {
-			border-bottom: 1px solid $tabularColorBorder;
+			border-bottom: 1px solid $colorTabBorder;
 			min-width: 20px;
 			color: $colorTelemFresh;
 			padding: $tabularTdPadTB $tabularTdPadLR;
diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss
index 22175da777..54694d90eb 100644
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@@ -25,6 +25,7 @@
 		z-index: 100;
 	}
     .clk-icon.close {
+        font-size: 0.8rem;
         position: absolute;
         top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto;
 	    z-index: 100;
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 5984982297..17017bd09c 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -195,8 +195,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-/************************** COLORS AND SHADING */
-/********************************* MOBILE */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -742,11 +740,11 @@ mct-container {
 
 /* line 1, ../../../../general/res/sass/_data-status.scss */
 .s-stale {
-  color: rgba(255, 255, 255, 0.5) !important;
+  color: rgba(204, 204, 204, 0.5) !important;
   font-style: italic; }
   /* line 3, ../../../../general/res/sass/_data-status.scss */
   .s-stale .td {
-    color: rgba(255, 255, 255, 0.5) !important;
+    color: rgba(204, 204, 204, 0.5) !important;
     font-style: italic; }
 
 /*****************************************************************************
@@ -1445,8 +1443,11 @@ mct-container {
         /* line 278, ../../../../general/res/sass/_mixins.scss */
         .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon, .select:not(.major):not(.disabled):hover > .icon {
           color: #33ccff; } }
-  /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.paused, .paused.s-menu, .paused.select {
+  /* line 113, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before, .pause-play.select .icon:before {
+    content: "\0000F1"; }
+  /* line 116, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.pause-play.paused, .pause-play.paused.s-menu, .pause-play.paused.select {
     background-color: #c56f01;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
@@ -1471,44 +1472,49 @@ mct-container {
     user-select: none;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
     /* line 271, ../../../../general/res/sass/_mixins.scss */
-    .s-btn.paused .icon, .paused.s-menu .icon, .paused.select .icon {
+    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 276, ../../../../general/res/sass/_mixins.scss */
-      .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover, .paused.select:not(.disabled):hover {
+      .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu:not(.disabled):hover, .pause-play.paused.select:not(.disabled):hover {
         background: linear-gradient(#fe9815, #f88c01); }
         /* line 278, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.paused:not(.disabled):hover > .icon, .paused.s-menu:not(.disabled):hover > .icon, .paused.select:not(.disabled):hover > .icon {
+        .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon, .pause-play.paused.select:not(.disabled):hover > .icon {
           color: white; } }
-    /* line 101, ../../../../general/res/sass/controls/_buttons.scss */
-    .s-btn.paused .icon:before, .paused.s-menu .icon:before, .paused.select .icon:before {
-      content: "\0000EF"; }
-  /* line 106, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.pause-play, .pause-play.s-menu, .pause-play.select {
-    /*
-    	&.paused {
-    		.icon {
-    			@include pulse(500ms);
-    		}
-    	}
-    */ }
-    /* line 114, ../../../../general/res/sass/controls/_buttons.scss */
-    .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before, .pause-play.select .icon:before {
-      content: "\0000F1"; }
-  /* line 120, ../../../../general/res/sass/controls/_buttons.scss */
+    /* line 118, ../../../../general/res/sass/controls/_buttons.scss */
+    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
+      -moz-animation-name: pulse;
+      -webkit-animation-name: pulse;
+      animation-name: pulse;
+      -moz-animation-duration: 1000ms;
+      -webkit-animation-duration: 1000ms;
+      animation-duration: 1000ms;
+      -moz-animation-direction: alternate;
+      -webkit-animation-direction: alternate;
+      animation-direction: alternate;
+      -moz-animation-iteration-count: infinite;
+      -webkit-animation-iteration-count: infinite;
+      animation-iteration-count: infinite;
+      -moz-animation-timing-function: ease-in-out;
+      -webkit-animation-timing-function: ease-in-out;
+      animation-timing-function: ease-in-out; }
+      /* line 120, ../../../../general/res/sass/controls/_buttons.scss */
+      .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu .icon :before, .pause-play.paused.select .icon :before {
+        content: "\0000EF"; }
+  /* line 128, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before, .show-thumbs.select .icon:before {
     content: "\000039"; }
 
-/* line 126, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 134, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
-  /* line 132, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 140, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .s-btn, .l-btn-set .s-menu, .l-btn-set .select {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
-  /* line 138, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 146, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .first .s-btn, .l-btn-set .first .s-menu, .l-btn-set .first .select {
     -moz-border-radius-topleft: 3px;
     -webkit-border-top-left-radius: 3px;
@@ -1517,7 +1523,7 @@ mct-container {
     -webkit-border-bottom-left-radius: 3px;
     border-bottom-left-radius: 3px;
     margin-left: 0; }
-  /* line 145, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 153, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .last .s-btn, .l-btn-set .last .s-menu, .l-btn-set .last .select {
     -moz-border-radius-topright: 3px;
     -webkit-border-top-right-radius: 3px;
@@ -1772,8 +1778,9 @@ label.checkbox.custom {
       -moz-border-radius: 1.5px;
       -webkit-border-radius: 1.5px;
       border-radius: 1.5px;
-      background: #666666;
-      border-bottom: 1px solid gray;
+      -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+      -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+      box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
       box-sizing: border-box;
       content: " ";
       font-family: 'symbolsfont';
@@ -1786,58 +1793,58 @@ label.checkbox.custom {
       top: 0;
       position: absolute;
       text-align: center; }
-  /* line 173, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 174, ../../../../general/res/sass/controls/_controls.scss */
   label.checkbox.custom.no-text {
     overflow: hidden;
     margin-right: 0;
     padding-left: 0;
     height: 14px;
     width: 14px; }
-    /* line 179, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 180, ../../../../general/res/sass/controls/_controls.scss */
     label.checkbox.custom.no-text em {
       overflow: hidden; }
-  /* line 183, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 184, ../../../../general/res/sass/controls/_controls.scss */
   label.checkbox.custom input {
     display: none; }
-    /* line 185, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 186, ../../../../general/res/sass/controls/_controls.scss */
     label.checkbox.custom input:checked ~ em:before {
       background: #0099cc;
       color: #ccf2ff;
       content: "2"; }
 
-/* line 193, ../../../../general/res/sass/controls/_controls.scss */
+/* line 194, ../../../../general/res/sass/controls/_controls.scss */
 .input-labeled {
   margin-left: 5px; }
-  /* line 195, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 196, ../../../../general/res/sass/controls/_controls.scss */
   .input-labeled label {
     display: inline-block;
     margin-right: 3px; }
-  /* line 199, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 200, ../../../../general/res/sass/controls/_controls.scss */
   .input-labeled.inline {
     display: inline-block; }
-  /* line 202, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 203, ../../../../general/res/sass/controls/_controls.scss */
   .input-labeled:first-child {
     margin-left: 0; }
 
-/* line 207, ../../../../general/res/sass/controls/_controls.scss */
+/* line 208, ../../../../general/res/sass/controls/_controls.scss */
 .s-menu label.checkbox.custom, .select label.checkbox.custom {
   margin-left: 5px; }
 
-/* line 212, ../../../../general/res/sass/controls/_controls.scss */
+/* line 213, ../../../../general/res/sass/controls/_controls.scss */
 .item .checkbox.checked label {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   border-bottom: none; }
 
-/* line 218, ../../../../general/res/sass/controls/_controls.scss */
+/* line 219, ../../../../general/res/sass/controls/_controls.scss */
 .context-available {
   color: #0099cc; }
-  /* line 221, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 222, ../../../../general/res/sass/controls/_controls.scss */
   .context-available:hover {
     color: deepskyblue; }
 
-/* line 226, ../../../../general/res/sass/controls/_controls.scss */
+/* line 227, ../../../../general/res/sass/controls/_controls.scss */
 .view-switcher {
   -moz-transition-property: visibility, opacity, background-color, border-color;
   -o-transition-property: visibility, opacity, background-color, border-color;
@@ -1853,26 +1860,26 @@ label.checkbox.custom {
   transition-timing-function: ease-in-out; }
 
 /******************************************************** OBJECT-HEADER */
-/* line 231, ../../../../general/res/sass/controls/_controls.scss */
+/* line 232, ../../../../general/res/sass/controls/_controls.scss */
 .object-header {
   font-size: 1em; }
-  /* line 242, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 243, ../../../../general/res/sass/controls/_controls.scss */
   .object-header > .type-icon {
     color: #cccccc;
     font-size: 120%;
     float: left;
     margin-right: 5px; }
-  /* line 249, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 250, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .l-elem-wrapper {
     justify-content: flex-start;
     -webkit-justify-content: flex-start; }
-    /* line 252, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 253, ../../../../general/res/sass/controls/_controls.scss */
     .object-header .l-elem-wrapper mct-representation {
       min-width: 0.7em; }
-  /* line 260, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 261, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .action {
     margin-right: 5px; }
-  /* line 264, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 265, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .title-label {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1880,13 +1887,13 @@ label.checkbox.custom {
     flex: 0 1 auto;
     -webkit-flex: 0 1 auto;
     padding-right: 0.35em; }
-  /* line 273, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 274, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .context-available {
     font-size: 0.7em;
     flex: 0 0 1;
     -webkit-flex: 0 0 1; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 280, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 281, ../../../../general/res/sass/controls/_controls.scss */
     .object-header .context-available {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -1901,12 +1908,12 @@ label.checkbox.custom {
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       opacity: 0; }
-    /* line 285, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 286, ../../../../general/res/sass/controls/_controls.scss */
     .object-header:hover .context-available {
       opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 298, ../../../../general/res/sass/controls/_controls.scss */
+/* line 299, ../../../../general/res/sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -1925,7 +1932,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 309, ../../../../general/res/sass/controls/_controls.scss */
+/* line 310, ../../../../general/res/sass/controls/_controls.scss */
 .slider .knob {
   background-color: #333;
   -moz-border-radius: 3px;
@@ -2007,12 +2014,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 320, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 321, ../../../../general/res/sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 327, ../../../../general/res/sass/controls/_controls.scss */
+/* line 328, ../../../../general/res/sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -2023,13 +2030,13 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 337, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 338, ../../../../general/res/sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 346, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 347, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2044,7 +2051,7 @@ label.checkbox.custom {
     height: 10px;
     width: 10px; }
 
-  /* line 352, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 356, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2058,7 +2065,7 @@ label.checkbox.custom {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box; }
-    /* line 361, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 365, ../../../../general/res/sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -2067,7 +2074,7 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#5e5e5e, #525252 20px);
       background-image: linear-gradient(#5e5e5e, #525252 20px); }
 
-  /* line 366, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 370, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
@@ -2267,7 +2274,7 @@ label.checkbox.custom {
     display: block;
     width: 500px;
     height: 480px; }
-    /* line 167, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 166, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .contents {
       overflow: hidden;
       position: absolute;
@@ -2277,34 +2284,34 @@ label.checkbox.custom {
       left: 5px;
       width: auto;
       height: auto; }
-    /* line 170, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 169, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .pane {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box; }
-      /* line 172, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 171, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.left {
-        border-right: 1px solid rgba(255, 255, 255, 0.2);
+        border-right: 1px solid #878787;
         left: 0;
         padding-right: 5px;
         right: auto;
         width: 50%;
         overflow-x: hidden;
         overflow-y: auto; }
-        /* line 182, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 181, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .super-menu .pane.left ul li {
           -moz-border-radius: 3px;
           -webkit-border-radius: 3px;
           border-radius: 3px;
           padding-left: 30px;
           border-top: none; }
-      /* line 189, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 188, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.right {
         left: auto;
         right: 0;
         padding: 25px;
         width: 50%; }
-    /* line 199, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 198, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.icon {
       color: white;
       position: relative;
@@ -2314,40 +2321,40 @@ label.checkbox.custom {
       line-height: 150px;
       margin-bottom: 25px;
       text-align: center; }
-    /* line 210, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 209, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.title {
       color: white;
       font-size: 1.2em;
       margin-bottom: 0.5em; }
-    /* line 215, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 214, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.description {
       color: white;
       font-size: 0.8em;
       line-height: 1.5em; }
-  /* line 224, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 223, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .context-menu, .menu-element .checkbox-menu {
     font-size: 0.80rem; }
 
-/* line 229, ../../../../general/res/sass/controls/_menus.scss */
+/* line 228, ../../../../general/res/sass/controls/_menus.scss */
 .context-menu-holder {
   pointer-events: none;
   position: absolute;
   height: 200px;
   width: 170px;
   z-index: 70; }
-  /* line 235, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 234, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder .context-menu-wrapper {
     position: absolute;
     height: 100%;
     width: 100%; }
-  /* line 242, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 241, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
     right: 0; }
-  /* line 245, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 244, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
     bottom: 0; }
 
-/* line 250, ../../../../general/res/sass/controls/_menus.scss */
+/* line 249, ../../../../general/res/sass/controls/_menus.scss */
 .btn-bar.right .menu,
 .menus-to-left .menu {
   left: auto;
@@ -3765,7 +3772,7 @@ span.req {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
-      color: #595959;
+      color: #737373;
       height: 17px;
       width: 17px;
       line-height: 17px;
@@ -3793,7 +3800,7 @@ span.req {
       pointer-events: none; }
     /* line 119, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input:hover + div.search-icon {
-      color: #737373; }
+      color: #8c8c8c; }
     /* line 123, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .clear-icon {
       right: 22px;
@@ -3806,7 +3813,7 @@ span.req {
         opacity: 1; }
       /* line 137, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .clear-icon:hover {
-        color: #737373; }
+        color: #8c8c8c; }
     /* line 142, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .menu-icon {
       font-size: 0.8em;
@@ -3815,7 +3822,7 @@ span.req {
       text-align: right; }
       /* line 148, ../../../../general/res/sass/search/_search.scss */
       .search .search-bar .menu-icon:hover {
-        color: #737373; }
+        color: #8c8c8c; }
     /* line 153, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-menu-holder {
       float: right;
@@ -3847,7 +3854,7 @@ span.req {
     margin-top: 3px; }
     /* line 193, ../../../../general/res/sass/search/_search.scss */
     .search .active-filter-display .clear-filters-icon {
-      color: #595959;
+      color: #737373;
       opacity: 1;
       font-size: 0.8em;
       position: absolute;
@@ -3935,13 +3942,14 @@ span.req {
   z-index: 100; }
 /* line 27, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .clk-icon.close {
+  font-size: 0.8rem;
   position: absolute;
   top: 10px;
   right: 10px;
   bottom: auto;
   left: auto;
   z-index: 100; }
-/* line 32, ../../../../general/res/sass/overlay/_overlay.scss */
+/* line 33, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay > .holder {
   background-color: #4d4d4d;
   -moz-border-radius: 3px;
@@ -3970,29 +3978,29 @@ span.req {
   bottom: 15%;
   left: 15%;
   z-index: 101; }
-  /* line 39, ../../../../general/res/sass/overlay/_overlay.scss */
+  /* line 40, ../../../../general/res/sass/overlay/_overlay.scss */
   .overlay > .holder > .contents {
     top: 25px;
     right: 25px;
     bottom: 25px;
     left: 25px; }
-/* line 44, ../../../../general/res/sass/overlay/_overlay.scss */
+/* line 45, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 1.2em;
   margin-bottom: 5px; }
-/* line 50, ../../../../general/res/sass/overlay/_overlay.scss */
+/* line 51, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .top-bar {
   height: 60px; }
-/* line 54, ../../../../general/res/sass/overlay/_overlay.scss */
+/* line 55, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .editor {
   top: 70px;
   bottom: 40px;
   left: 0;
   right: 0; }
-/* line 60, ../../../../general/res/sass/overlay/_overlay.scss */
+/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .bottom-bar {
   top: auto;
   right: 0;
@@ -4001,14 +4009,14 @@ span.req {
   overflow: visible;
   height: 30px;
   text-align: right; }
-  /* line 66, ../../../../general/res/sass/overlay/_overlay.scss */
+  /* line 67, ../../../../general/res/sass/overlay/_overlay.scss */
   .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu, .overlay .bottom-bar .select {
     font-size: 95%;
     height: 30px;
     line-height: 30px;
     margin-left: 5px;
     padding: 0 15px; }
-    /* line 68, ../../../../general/res/sass/overlay/_overlay.scss */
+    /* line 69, ../../../../general/res/sass/overlay/_overlay.scss */
     .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major), .overlay .bottom-bar .select:not(.major) {
       background-color: gray;
       -moz-border-radius: 3px;
@@ -4043,7 +4051,7 @@ span.req {
           /* line 278, ../../../../general/res/sass/_mixins.scss */
           .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover > .icon {
             color: white; } }
-/* line 84, ../../../../general/res/sass/overlay/_overlay.scss */
+/* line 85, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
   top: 5px;
   right: 5px;
@@ -4649,7 +4657,6 @@ ul.tree {
     background-position: center; }
   /* line 78, ../../../../general/res/sass/_fixed-position.scss */
   .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
-    text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
     border: 1px solid transparent;
     font-size: 0.8rem;
     line-height: 100%; }
@@ -4748,12 +4755,11 @@ table {
   box-sizing: border-box;
   border-spacing: 0;
   border-collapse: collapse;
-  color: #fff;
   display: table;
   font-size: 0.75rem;
   position: relative;
   width: 100%; }
-  /* line 38, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 36, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular thead, .tabular .thead,
   .tabular tbody tr, .tabular .tbody .tr,
   table thead,
@@ -4761,34 +4767,34 @@ table {
   table tbody tr,
   table .tbody .tr {
     width: 100%; }
-  /* line 44, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 40, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular thead, .tabular .thead,
   table thead,
   table .thead {
     border-bottom: 1px solid #333; }
-  /* line 47, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 43, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular tbody, .tabular .tbody,
   table tbody,
   table .tbody {
     display: table-row-group; }
-    /* line 54, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 46, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tbody tr:hover, .tabular tbody .tr:hover, .tabular .tbody tr:hover, .tabular .tbody .tr:hover,
     table tbody tr:hover,
     table tbody .tr:hover,
     table .tbody tr:hover,
     table .tbody .tr:hover {
-      background: rgba(255, 255, 255, 0.1); }
-  /* line 59, ../../../../general/res/sass/lists/_tabular.scss */
+      background: rgba(128, 128, 128, 0.1); }
+  /* line 51, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular tr, .tabular .tr,
   table tr,
   table .tr {
     display: table-row; }
-    /* line 61, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 53, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr:first-child .td, .tabular .tr:first-child .td,
     table tr:first-child .td,
     table .tr:first-child .td {
       border-top: none; }
-    /* line 65, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 57, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr.group-header td, .tabular tr.group-header .td, .tabular .tr.group-header td, .tabular .tr.group-header .td,
     table tr.group-header td,
     table tr.group-header .td,
@@ -4796,7 +4802,7 @@ table {
     table .tr.group-header .td {
       background-color: #404040;
       color: #a6a6a6; }
-    /* line 71, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 63, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr th, .tabular tr .th, .tabular tr td, .tabular tr .td, .tabular .tr th, .tabular .tr .th, .tabular .tr td, .tabular .tr .td,
     table tr th,
     table tr .th,
@@ -4807,7 +4813,7 @@ table {
     table .tr td,
     table .tr .td {
       display: table-cell; }
-    /* line 74, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 66, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr th, .tabular tr .th, .tabular .tr th, .tabular .tr .th,
     table tr th,
     table tr .th,
@@ -4819,14 +4825,14 @@ table {
       padding: 5px 5px;
       white-space: nowrap;
       vertical-align: middle; }
-      /* line 81, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 73, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th:first-child, .tabular tr .th:first-child, .tabular .tr th:first-child, .tabular .tr .th:first-child,
       table tr th:first-child,
       table tr .th:first-child,
       table .tr th:first-child,
       table .tr .th:first-child {
         border-left: none; }
-      /* line 85, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 77, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sort.sort:after, .tabular tr .th.sort.sort:after, .tabular .tr th.sort.sort:after, .tabular .tr .th.sort.sort:after,
       table tr th.sort.sort:after,
       table tr .th.sort.sort:after,
@@ -4838,47 +4844,47 @@ table {
         content: "\ed";
         display: inline-block;
         margin-left: 3px; }
-      /* line 93, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 85, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sort.sort.desc:after, .tabular tr .th.sort.sort.desc:after, .tabular .tr th.sort.sort.desc:after, .tabular .tr .th.sort.sort.desc:after,
       table tr th.sort.sort.desc:after,
       table tr .th.sort.sort.desc:after,
       table .tr th.sort.sort.desc:after,
       table .tr .th.sort.sort.desc:after {
         content: "\ec"; }
-      /* line 97, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 89, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sortable, .tabular tr .th.sortable, .tabular .tr th.sortable, .tabular .tr .th.sortable,
       table tr th.sortable,
       table tr .th.sortable,
       table .tr th.sortable,
       table .tr .th.sortable {
         cursor: pointer; }
-    /* line 101, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 93, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr td, .tabular tr .td, .tabular .tr td, .tabular .tr .td,
     table tr td,
     table tr .td,
     table .tr td,
     table .tr .td {
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      border-bottom: 1px solid #4d4d4d;
       min-width: 20px;
-      color: #fff;
+      color: #cccccc;
       padding: 3px 5px;
       word-wrap: break-word;
       vertical-align: top; }
-      /* line 108, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 100, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr td.numeric, .tabular tr .td.numeric, .tabular .tr td.numeric, .tabular .tr .td.numeric,
       table tr td.numeric,
       table tr .td.numeric,
       table .tr td.numeric,
       table .tr .td.numeric {
         text-align: right; }
-      /* line 111, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 103, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr td.s-cell-type-value, .tabular tr .td.s-cell-type-value, .tabular .tr td.s-cell-type-value, .tabular .tr .td.s-cell-type-value,
       table tr td.s-cell-type-value,
       table tr .td.s-cell-type-value,
       table .tr td.s-cell-type-value,
       table .tr .td.s-cell-type-value {
         text-align: right; }
-        /* line 113, ../../../../general/res/sass/lists/_tabular.scss */
+        /* line 105, ../../../../general/res/sass/lists/_tabular.scss */
         .tabular tr td.s-cell-type-value .l-cell-contents, .tabular tr .td.s-cell-type-value .l-cell-contents, .tabular .tr td.s-cell-type-value .l-cell-contents, .tabular .tr .td.s-cell-type-value .l-cell-contents,
         table tr td.s-cell-type-value .l-cell-contents,
         table tr .td.s-cell-type-value .l-cell-contents,
@@ -4889,23 +4895,23 @@ table {
           border-radius: 2px;
           padding-left: 5px;
           padding-right: 5px; }
-  /* line 129, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 121, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.filterable tbody, .tabular.filterable .tbody,
   table.filterable tbody,
   table.filterable .tbody {
     top: 44px; }
-  /* line 132, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 124, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.filterable input[type="text"],
   table.filterable input[type="text"] {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     width: 100%; }
-  /* line 138, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 130, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.fixed-header,
   table.fixed-header {
     height: 100%; }
-    /* line 140, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 132, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead,
     .tabular.fixed-header tbody tr, .tabular.fixed-header .tbody .tr,
     table.fixed-header thead,
@@ -4914,12 +4920,12 @@ table {
     table.fixed-header .tbody .tr {
       display: table;
       table-layout: fixed; }
-    /* line 145, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 137, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead,
     table.fixed-header thead,
     table.fixed-header .thead {
       width: calc(100% - 10px); }
-      /* line 147, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 139, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular.fixed-header thead:before, .tabular.fixed-header .thead:before,
       table.fixed-header thead:before,
       table.fixed-header .thead:before {
@@ -4930,7 +4936,7 @@ table {
         width: 100%;
         height: 22px;
         background: rgba(255, 255, 255, 0.15); }
-    /* line 157, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 149, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header tbody, .tabular.fixed-header .tbody,
     table.fixed-header tbody,
     table.fixed-header .tbody {
@@ -4945,7 +4951,7 @@ table {
       top: 22px;
       display: block;
       overflow-y: scroll; }
-  /* line 165, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 157, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.t-event-messages td, .tabular.t-event-messages .td,
   table.t-event-messages td,
   table.t-event-messages .td {
@@ -5368,7 +5374,7 @@ table {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    color: #0099cc;
+    color: #bfbfbf;
     display: inline-block;
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -5402,22 +5408,22 @@ table {
         /* line 278, ../../../../general/res/sass/_mixins.scss */
         .items-holder .item.grid-item:not(.disabled):hover > .icon {
           color: #33ccff; } }
-    /* line 47, ../../../../general/res/sass/items/_item.scss */
+    /* line 46, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: deepskyblue; }
-      /* line 49, ../../../../general/res/sass/items/_item.scss */
+      /* line 48, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
         color: #49dedb; }
-    /* line 53, ../../../../general/res/sass/items/_item.scss */
+    /* line 52, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-open {
       opacity: 1; }
-    /* line 58, ../../../../general/res/sass/items/_item.scss */
+    /* line 57, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
       top: 10px;
       right: 10px;
       bottom: 10px;
       left: 10px; }
-    /* line 64, ../../../../general/res/sass/items/_item.scss */
+    /* line 63, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar {
       bottom: auto;
       color: #8c8c8c;
@@ -5425,24 +5431,24 @@ table {
       line-height: 20px;
       text-align: right;
       z-index: 5; }
-      /* line 71, ../../../../general/res/sass/items/_item.scss */
+      /* line 70, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
         width: auto; }
-        /* line 73, ../../../../general/res/sass/items/_item.scss */
+        /* line 72, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
           margin-left: 3px; }
-          /* line 75, ../../../../general/res/sass/items/_item.scss */
+          /* line 74, ../../../../general/res/sass/items/_item.scss */
           .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
             color: #49dedb; }
-    /* line 81, ../../../../general/res/sass/items/_item.scss */
+    /* line 80, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
       top: auto;
       line-height: 110%; }
-    /* line 87, ../../../../general/res/sass/items/_item.scss */
+    /* line 86, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 93, ../../../../general/res/sass/items/_item.scss */
+      /* line 92, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         overflow: false;
         position: absolute;
@@ -5459,7 +5465,7 @@ table {
         bottom: auto;
         height: 102px;
         top: 30px; }
-        /* line 105, ../../../../general/res/sass/items/_item.scss */
+        /* line 104, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .item-main .item-type .l-icon-link {
           color: #49dedb;
           height: auto;
@@ -5469,7 +5475,7 @@ table {
           left: 0px;
           bottom: 10px;
           z-index: 2; }
-      /* line 117, ../../../../general/res/sass/items/_item.scss */
+      /* line 116, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -5490,15 +5496,16 @@ table {
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 128, ../../../../general/res/sass/items/_item.scss */
+    /* line 127, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: #bfbfbf; }
-    /* line 133, ../../../../general/res/sass/items/_item.scss */
+    /* line 132, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .details {
+      text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -5762,11 +5769,11 @@ table {
           background: rgba(255, 255, 255, 0.1); }
         /* line 93, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.s-stale .l-autoflow-item.l {
-          color: rgba(255, 255, 255, 0.3) !important;
+          color: rgba(204, 204, 204, 0.3) !important;
           font-style: italic; }
         /* line 94, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.s-stale .l-autoflow-item.r {
-          color: rgba(255, 255, 255, 0.5) !important;
+          color: rgba(204, 204, 204, 0.5) !important;
           font-style: italic; }
         /* line 97, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:not(.s-stale) .l-autoflow-item.r {
@@ -5820,7 +5827,7 @@ table {
   min-width: 150px; }
   /* line 16, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: none;
     bottom: 30px; }
   /* line 20, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main-controlbar {
@@ -5863,7 +5870,7 @@ table {
   /* line 67, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-controlbar .l-date,
   .l-image-main-controlbar .l-time {
-    color: #fff; }
+    color: #cccccc; }
   /* line 71, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-controlbar .l-mag {
     direction: ltr;
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 601e0b3a28..6a5a704ac7 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -1,4 +1,4 @@
-/************************** COLORS AND SHADING */
+// Global
 $colorBodyBg: #333;
 $colorBodyFg: #999;
 $colorGenBg: #222;
@@ -8,6 +8,11 @@ $colorKeySelectedBg: #005177;
 $colorKeyFg: #fff;
 $colorInteriorBorder: rgba($colorBodyFg, 0.1);
 $contrastRatioPercent: 7%;
+$basicCr: 2px;
+$controlCr: 3px;
+$smallCr: 2px;
+
+// Buttons
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); //
 $colorBtnFg: $colorBodyFg;
 $colorBtnMajorBg: $colorKey;
@@ -17,6 +22,7 @@ $colorObjHdrIcon: pullForward($colorBodyFg, 20%);
 $colorInvokeMenu: #fff;
 $contrastInvokeMenuPercent: 20%;
 
+// General Colors
 $colorAlt1: #ffc700;
 $colorAlert: #ff3c00;
 $colorIconLink: #49dedb;
@@ -27,6 +33,7 @@ $colorGridLines: rgba(#fff, 0.05);
 $colorFormLines: rgba(#fff, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.2);
 $colorInvokeMenu: #fff;
+
 // Menu colors
 $colorMenuBg: pullForward($colorBodyBg, 23%);
 $colorMenuFg: pullForward($colorMenuBg, 70%);
@@ -37,7 +44,8 @@ $colorMenuHovIc: $colorMenuHovFg;
 $shdwMenu: none;
 $shdwMenuText: rgba(black, 0.1) 0 1px 2px;
 $colorCreateMenuLgIcon: $colorMenuFg;
-$colorCreateMenuText: $colorMenuFg;//
+$colorCreateMenuText: $colorMenuFg;
+
 // Form colors
 $colorCheck: $colorKey;
 $colorFormRequired: $colorAlt1;
@@ -47,24 +55,26 @@ $colorFormInvalid: #ff3300;
 $colorInputBg: rgba(#fff, 0.1);
 $colorInputFg: pullForward($colorBodyFg, 20%);
 $colorFormText: rgba(#fff, 0.5);
-$colorInputIcon: pushBack($colorBodyFg, 25%);
+$colorInputIcon: pushBack($colorBodyFg, 15%);
 // Limits and staleness colors
 $colorLimitYellow: #9d7500;
 $colorLimitRed: #aa0000;
-$colorTelemFresh: #fff;
-$colorTelemStale: #888;
+$colorTelemFresh: pullForward($colorBodyFg, 20%);
+$colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;
 // Bubble colors
 $colorInfoBubbleFg: #666;
 $colorInfoBubbleBg: #ddd;
 $colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
 $colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
+
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
 $colorOvrBg: pullForward($colorBodyBg, 10%);
 $colorOvrFg: pullForward($colorBodyFg, 30%);
 $colorOvrBtnBg: pullForward($colorOvrBg, 20%);
 $colorOvrBtnFg: #fff;
+
 // Items
 $colorItemBg: lighten($colorBodyBg, 5%);
 $colorItemFg: lighten($colorItemBg, 50%);
@@ -74,16 +84,19 @@ $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
 $shdwItemText: rgba(black, 0.1) 0 1px 2px;
 $colorItemBgSelected: $colorKey;
+
 // Tabular
-$tabularColorBorder: rgba(white, 0.1);
-$tabularColorBodyBg: darken($colorBodyBg, 10%);
-$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
-$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
-$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
-$tabularColorHeaderBorder: $colorBodyBg;
+$colorTabBorder: pullForward($colorBodyBg, 10%);
+$colorTabBodyBg: darken($colorBodyBg, 10%);
+$colorTabBodyFg: lighten($colorTabBodyBg, 40%);
+$colorTabHeaderBg: lighten($colorBodyBg, 10%);
+$colorTabHeaderFg: lighten($colorTabHeaderBg, 40%);
+$colorTabHeaderBorder: $colorBodyBg;
+
 // Plot
 $colorPlotBg: none;
 $colorPlotFg: $colorBodyFg;
+
 // Tree
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
@@ -94,11 +107,14 @@ $colorItemTreeVC: rgba(#fff, 0.3);
 $colorItemTreeSelectedVC: $colorItemTreeVC;
 $colorItemTreeVCHover: $colorAlt1;
 $shdwItemTreeIcon: 0.6;
+
 // Scrollbar
 $scrollbarTrackSize: 10px;
 $scrollbarTrackColorBg: rgba(#000, 0.4);
 $scrollbarThumbColor: lighten($colorBodyBg, 10%);
 $scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
+$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
+
 // Splitter
 $splitterShdw: rgba(black, 0.4) 0 0 3px;
 $colorSplitterInterior: $colorBodyBg;
@@ -107,5 +123,5 @@ $splitterW: 5px;
 $splitterEndCr: 1px;
 $colorGrippyInteriorHover: $colorKey;
 
-/********************************* MOBILE */
+// Mobile
 $colorMobilePaneLeft: darken($colorBodyBg, 5%);
\ No newline at end of file
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 7cd4d06e41..2b39c7f6df 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -195,8 +195,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
 /************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
 /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-/************************** COLORS AND SHADING */
-/********************************* MOBILE */
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -446,8 +444,8 @@ mct-container {
 
 /* line 147, ../../../../general/res/sass/_global.scss */
 .paused:not(.s-btn):not(.s-menu):not(.select) {
-  border-color: #c56f01 !important;
-  color: #c56f01 !important; }
+  border-color: #ff9900 !important;
+  color: #ff9900 !important; }
 
 /* line 153, ../../../../general/res/sass/_global.scss */
 .sep {
@@ -742,11 +740,11 @@ mct-container {
 
 /* line 1, ../../../../general/res/sass/_data-status.scss */
 .s-stale {
-  color: rgba(255, 255, 255, 0.5) !important;
+  color: rgba(51, 51, 51, 0.5) !important;
   font-style: italic; }
   /* line 3, ../../../../general/res/sass/_data-status.scss */
   .s-stale .td {
-    color: rgba(255, 255, 255, 0.5) !important;
+    color: rgba(51, 51, 51, 0.5) !important;
     font-style: italic; }
 
 /*****************************************************************************
@@ -1394,7 +1392,7 @@ mct-container {
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 276, ../../../../general/res/sass/_mixins.scss */
       .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
-        background: #0099cc; }
+        background: deepskyblue; }
         /* line 278, ../../../../general/res/sass/_mixins.scss */
         .s-btn.major:not(.disabled):hover > .icon, .major.s-menu:not(.disabled):hover > .icon, .major.select:not(.disabled):hover > .icon {
           color: white; } }
@@ -1416,7 +1414,7 @@ mct-container {
     text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
     /* line 271, ../../../../general/res/sass/_mixins.scss */
     .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
-      color: #ddd; }
+      color: #eee; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 276, ../../../../general/res/sass/_mixins.scss */
       .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
@@ -1424,9 +1422,12 @@ mct-container {
         /* line 278, ../../../../general/res/sass/_mixins.scss */
         .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon, .select:not(.major):not(.disabled):hover > .icon {
           color: white; } }
-  /* line 99, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.paused, .paused.s-menu, .paused.select {
-    background-color: #c56f01;
+  /* line 113, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before, .pause-play.select .icon:before {
+    content: "\0000F1"; }
+  /* line 116, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.pause-play.paused, .pause-play.paused.s-menu, .pause-play.paused.select {
+    background-color: #ff9900;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
@@ -1441,44 +1442,49 @@ mct-container {
     user-select: none;
     text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
     /* line 271, ../../../../general/res/sass/_mixins.scss */
-    .s-btn.paused .icon, .paused.s-menu .icon, .paused.select .icon {
+    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 276, ../../../../general/res/sass/_mixins.scss */
-      .s-btn.paused:not(.disabled):hover, .paused.s-menu:not(.disabled):hover, .paused.select:not(.disabled):hover {
-        background: #0099cc; }
+      .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu:not(.disabled):hover, .pause-play.paused.select:not(.disabled):hover {
+        background: #ffad33; }
         /* line 278, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.paused:not(.disabled):hover > .icon, .paused.s-menu:not(.disabled):hover > .icon, .paused.select:not(.disabled):hover > .icon {
+        .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon, .pause-play.paused.select:not(.disabled):hover > .icon {
           color: white; } }
-    /* line 101, ../../../../general/res/sass/controls/_buttons.scss */
-    .s-btn.paused .icon:before, .paused.s-menu .icon:before, .paused.select .icon:before {
-      content: "\0000EF"; }
-  /* line 106, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.pause-play, .pause-play.s-menu, .pause-play.select {
-    /*
-    	&.paused {
-    		.icon {
-    			@include pulse(500ms);
-    		}
-    	}
-    */ }
-    /* line 114, ../../../../general/res/sass/controls/_buttons.scss */
-    .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before, .pause-play.select .icon:before {
-      content: "\0000F1"; }
-  /* line 120, ../../../../general/res/sass/controls/_buttons.scss */
+    /* line 118, ../../../../general/res/sass/controls/_buttons.scss */
+    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
+      -moz-animation-name: pulse;
+      -webkit-animation-name: pulse;
+      animation-name: pulse;
+      -moz-animation-duration: 1000ms;
+      -webkit-animation-duration: 1000ms;
+      animation-duration: 1000ms;
+      -moz-animation-direction: alternate;
+      -webkit-animation-direction: alternate;
+      animation-direction: alternate;
+      -moz-animation-iteration-count: infinite;
+      -webkit-animation-iteration-count: infinite;
+      animation-iteration-count: infinite;
+      -moz-animation-timing-function: ease-in-out;
+      -webkit-animation-timing-function: ease-in-out;
+      animation-timing-function: ease-in-out; }
+      /* line 120, ../../../../general/res/sass/controls/_buttons.scss */
+      .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu .icon :before, .pause-play.paused.select .icon :before {
+        content: "\0000EF"; }
+  /* line 128, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before, .show-thumbs.select .icon:before {
     content: "\000039"; }
 
-/* line 126, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 134, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
-  /* line 132, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 140, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .s-btn, .l-btn-set .s-menu, .l-btn-set .select {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
-  /* line 138, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 146, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .first .s-btn, .l-btn-set .first .s-menu, .l-btn-set .first .select {
     -moz-border-radius-topleft: 4px;
     -webkit-border-top-left-radius: 4px;
@@ -1487,7 +1493,7 @@ mct-container {
     -webkit-border-bottom-left-radius: 4px;
     border-bottom-left-radius: 4px;
     margin-left: 0; }
-  /* line 145, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 153, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .last .s-btn, .l-btn-set .last .s-menu, .l-btn-set .last .select {
     -moz-border-radius-topright: 4px;
     -webkit-border-top-right-radius: 4px;
@@ -1742,8 +1748,9 @@ label.checkbox.custom {
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
-      background: white;
-      border-bottom: 1px solid white;
+      -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+      -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
+      box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
       box-sizing: border-box;
       content: " ";
       font-family: 'symbolsfont';
@@ -1756,58 +1763,58 @@ label.checkbox.custom {
       top: 0;
       position: absolute;
       text-align: center; }
-  /* line 173, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 174, ../../../../general/res/sass/controls/_controls.scss */
   label.checkbox.custom.no-text {
     overflow: hidden;
     margin-right: 0;
     padding-left: 0;
     height: 14px;
     width: 14px; }
-    /* line 179, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 180, ../../../../general/res/sass/controls/_controls.scss */
     label.checkbox.custom.no-text em {
       overflow: hidden; }
-  /* line 183, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 184, ../../../../general/res/sass/controls/_controls.scss */
   label.checkbox.custom input {
     display: none; }
-    /* line 185, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 186, ../../../../general/res/sass/controls/_controls.scss */
     label.checkbox.custom input:checked ~ em:before {
       background: #0099cc;
       color: #ccf2ff;
       content: "2"; }
 
-/* line 193, ../../../../general/res/sass/controls/_controls.scss */
+/* line 194, ../../../../general/res/sass/controls/_controls.scss */
 .input-labeled {
   margin-left: 5px; }
-  /* line 195, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 196, ../../../../general/res/sass/controls/_controls.scss */
   .input-labeled label {
     display: inline-block;
     margin-right: 3px; }
-  /* line 199, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 200, ../../../../general/res/sass/controls/_controls.scss */
   .input-labeled.inline {
     display: inline-block; }
-  /* line 202, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 203, ../../../../general/res/sass/controls/_controls.scss */
   .input-labeled:first-child {
     margin-left: 0; }
 
-/* line 207, ../../../../general/res/sass/controls/_controls.scss */
+/* line 208, ../../../../general/res/sass/controls/_controls.scss */
 .s-menu label.checkbox.custom, .select label.checkbox.custom {
   margin-left: 5px; }
 
-/* line 212, ../../../../general/res/sass/controls/_controls.scss */
+/* line 213, ../../../../general/res/sass/controls/_controls.scss */
 .item .checkbox.checked label {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   border-bottom: none; }
 
-/* line 218, ../../../../general/res/sass/controls/_controls.scss */
+/* line 219, ../../../../general/res/sass/controls/_controls.scss */
 .context-available {
   color: #0099cc; }
-  /* line 221, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 222, ../../../../general/res/sass/controls/_controls.scss */
   .context-available:hover {
     color: deepskyblue; }
 
-/* line 226, ../../../../general/res/sass/controls/_controls.scss */
+/* line 227, ../../../../general/res/sass/controls/_controls.scss */
 .view-switcher {
   -moz-transition-property: visibility, opacity, background-color, border-color;
   -o-transition-property: visibility, opacity, background-color, border-color;
@@ -1823,26 +1830,26 @@ label.checkbox.custom {
   transition-timing-function: ease-in-out; }
 
 /******************************************************** OBJECT-HEADER */
-/* line 231, ../../../../general/res/sass/controls/_controls.scss */
+/* line 232, ../../../../general/res/sass/controls/_controls.scss */
 .object-header {
   font-size: 1em; }
-  /* line 242, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 243, ../../../../general/res/sass/controls/_controls.scss */
   .object-header > .type-icon {
     color: #666;
     font-size: 120%;
     float: left;
     margin-right: 5px; }
-  /* line 249, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 250, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .l-elem-wrapper {
     justify-content: flex-start;
     -webkit-justify-content: flex-start; }
-    /* line 252, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 253, ../../../../general/res/sass/controls/_controls.scss */
     .object-header .l-elem-wrapper mct-representation {
       min-width: 0.7em; }
-  /* line 260, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 261, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .action {
     margin-right: 5px; }
-  /* line 264, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 265, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .title-label {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -1850,13 +1857,13 @@ label.checkbox.custom {
     flex: 0 1 auto;
     -webkit-flex: 0 1 auto;
     padding-right: 0.35em; }
-  /* line 273, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 274, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .context-available {
     font-size: 0.7em;
     flex: 0 0 1;
     -webkit-flex: 0 0 1; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 280, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 281, ../../../../general/res/sass/controls/_controls.scss */
     .object-header .context-available {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -1871,12 +1878,12 @@ label.checkbox.custom {
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       opacity: 0; }
-    /* line 285, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 286, ../../../../general/res/sass/controls/_controls.scss */
     .object-header:hover .context-available {
       opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 298, ../../../../general/res/sass/controls/_controls.scss */
+/* line 299, ../../../../general/res/sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -1887,7 +1894,7 @@ label.checkbox.custom {
   -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
   -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
   box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.1);
   height: 50%;
   width: auto;
   position: absolute;
@@ -1895,7 +1902,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 309, ../../../../general/res/sass/controls/_controls.scss */
+/* line 310, ../../../../general/res/sass/controls/_controls.scss */
 .slider .knob {
   background-color: #b0b0b0;
   -moz-border-radius: 4px;
@@ -1921,14 +1928,7 @@ label.checkbox.custom {
   left: auto; }
   /* line 271, ../../../../general/res/sass/_mixins.scss */
   .slider .knob .icon {
-    color: #ddd; }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 276, ../../../../general/res/sass/_mixins.scss */
-    .slider .knob:not(.disabled):hover {
-      background: #0099cc; }
-      /* line 278, ../../../../general/res/sass/_mixins.scss */
-      .slider .knob:not(.disabled):hover > .icon {
-        color: white; } }
+    color: #eee; }
   /* line 159, ../../../../general/res/sass/_mixins.scss */
   .slider .knob:before {
     -moz-transition-property: "border-color";
@@ -1968,12 +1968,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #fcfcfc; }
-  /* line 320, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 321, ../../../../general/res/sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 327, ../../../../general/res/sass/controls/_controls.scss */
+/* line 328, ../../../../general/res/sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -1984,13 +1984,13 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 337, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 338, ../../../../general/res/sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 346, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 347, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -1998,28 +1998,28 @@ label.checkbox.custom {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-    -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-    box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-    background-color: rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: inset rgba(0, 0, 0, 0.2) 0 1px 2px;
+    -webkit-box-shadow: inset rgba(0, 0, 0, 0.2) 0 1px 2px;
+    box-shadow: inset rgba(0, 0, 0, 0.2) 0 1px 2px;
+    background-color: rgba(0, 0, 0, 0.1);
     height: 10px;
     width: 10px; }
 
-  /* line 352, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 356, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M5YzljOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JjYmNiYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg5ODk4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkN2Q3ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #c9c9c9), color-stop(100%, #bcbcbc));
-    background-image: -moz-linear-gradient(#c9c9c9, #bcbcbc 20px);
-    background-image: -webkit-linear-gradient(#c9c9c9, #bcbcbc 20px);
-    background-image: linear-gradient(#c9c9c9, #bcbcbc 20px);
+    background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #898989), color-stop(100%, #7d7d7d));
+    background-image: -moz-linear-gradient(#898989, #7d7d7d 20px);
+    background-image: -webkit-linear-gradient(#898989, #7d7d7d 20px);
+    background-image: linear-gradient(#898989, #7d7d7d 20px);
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
     border-radius: 2px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box; }
-    /* line 361, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 365, ../../../../general/res/sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -2028,9 +2028,9 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#00ace6, #0099cc 20px);
       background-image: linear-gradient(#00ace6, #0099cc 20px); }
 
-  /* line 366, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 370, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
-    background: rgba(0, 0, 0, 0.5); } }
+    background: rgba(0, 0, 0, 0.1); } }
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -2094,7 +2094,7 @@ label.checkbox.custom {
   margin-left: 3px; }
 /* line 39, ../../../../general/res/sass/controls/_menus.scss */
 .s-menu:after, .select:after {
-  color: rgba(255, 255, 255, 0.5);
+  color: rgba(255, 255, 255, 0.4);
   content: '\76';
   display: inline-block;
   font-family: 'symbolsfont';
@@ -2134,6 +2134,7 @@ label.checkbox.custom {
     -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
     -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
     box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
+    text-shadow: none;
     display: block;
     padding: 3px 0;
     position: absolute;
@@ -2221,7 +2222,7 @@ label.checkbox.custom {
     display: block;
     width: 500px;
     height: 480px; }
-    /* line 167, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 166, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .contents {
       overflow: hidden;
       position: absolute;
@@ -2231,34 +2232,34 @@ label.checkbox.custom {
       left: 5px;
       width: auto;
       height: auto; }
-    /* line 170, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 169, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .pane {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box; }
-      /* line 172, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 171, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.left {
-        border-right: 1px solid rgba(255, 255, 255, 0.2);
+        border-right: 1px solid #e6e6e6;
         left: 0;
         padding-right: 5px;
         right: auto;
         width: 50%;
         overflow-x: hidden;
         overflow-y: auto; }
-        /* line 182, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 181, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .super-menu .pane.left ul li {
           -moz-border-radius: 4px;
           -webkit-border-radius: 4px;
           border-radius: 4px;
           padding-left: 30px;
           border-top: none; }
-      /* line 189, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 188, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.right {
         left: auto;
         right: 0;
         padding: 25px;
         width: 50%; }
-    /* line 199, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 198, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.icon {
       color: #0099cc;
       position: relative;
@@ -2268,40 +2269,40 @@ label.checkbox.custom {
       line-height: 150px;
       margin-bottom: 25px;
       text-align: center; }
-    /* line 210, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 209, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.title {
       color: #666;
       font-size: 1.2em;
       margin-bottom: 0.5em; }
-    /* line 215, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 214, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.description {
       color: #666;
       font-size: 0.8em;
       line-height: 1.5em; }
-  /* line 224, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 223, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .context-menu, .menu-element .checkbox-menu {
     font-size: 0.80rem; }
 
-/* line 229, ../../../../general/res/sass/controls/_menus.scss */
+/* line 228, ../../../../general/res/sass/controls/_menus.scss */
 .context-menu-holder {
   pointer-events: none;
   position: absolute;
   height: 200px;
   width: 170px;
   z-index: 70; }
-  /* line 235, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 234, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder .context-menu-wrapper {
     position: absolute;
     height: 100%;
     width: 100%; }
-  /* line 242, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 241, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
     right: 0; }
-  /* line 245, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 244, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
     bottom: 0; }
 
-/* line 250, ../../../../general/res/sass/controls/_menus.scss */
+/* line 249, ../../../../general/res/sass/controls/_menus.scss */
 .btn-bar.right .menu,
 .menus-to-left .menu {
   left: auto;
@@ -2486,7 +2487,7 @@ label.checkbox.custom {
     box-sizing: border-box;
     overflow: hidden;
     *zoom: 1;
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
     margin-top: 5px;
     padding: 5px 0;
     position: relative; }
@@ -2690,14 +2691,7 @@ textarea {
   position: relative; }
   /* line 271, ../../../../general/res/sass/_mixins.scss */
   .select .icon {
-    color: #ddd; }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 276, ../../../../general/res/sass/_mixins.scss */
-    .select:not(.disabled):hover {
-      background: #0099cc; }
-      /* line 278, ../../../../general/res/sass/_mixins.scss */
-      .select:not(.disabled):hover > .icon {
-        color: white; } }
+    color: #eee; }
   /* line 30, ../../../../general/res/sass/forms/_selects.scss */
   .select select {
     -moz-appearance: none;
@@ -3880,13 +3874,14 @@ span.req {
   z-index: 100; }
 /* line 27, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .clk-icon.close {
+  font-size: 0.8rem;
   position: absolute;
   top: 10px;
   right: 10px;
   bottom: auto;
   left: auto;
   z-index: 100; }
-/* line 32, ../../../../general/res/sass/overlay/_overlay.scss */
+/* line 33, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay > .holder {
   background-color: #fcfcfc;
   -moz-border-radius: 4px;
@@ -3906,29 +3901,29 @@ span.req {
   bottom: 15%;
   left: 15%;
   z-index: 101; }
-  /* line 39, ../../../../general/res/sass/overlay/_overlay.scss */
+  /* line 40, ../../../../general/res/sass/overlay/_overlay.scss */
   .overlay > .holder > .contents {
     top: 25px;
     right: 25px;
     bottom: 25px;
     left: 25px; }
-/* line 44, ../../../../general/res/sass/overlay/_overlay.scss */
+/* line 45, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 1.2em;
   margin-bottom: 5px; }
-/* line 50, ../../../../general/res/sass/overlay/_overlay.scss */
+/* line 51, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .top-bar {
   height: 60px; }
-/* line 54, ../../../../general/res/sass/overlay/_overlay.scss */
+/* line 55, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .editor {
   top: 70px;
   bottom: 40px;
   left: 0;
   right: 0; }
-/* line 60, ../../../../general/res/sass/overlay/_overlay.scss */
+/* line 61, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .bottom-bar {
   top: auto;
   right: 0;
@@ -3937,14 +3932,14 @@ span.req {
   overflow: visible;
   height: 30px;
   text-align: right; }
-  /* line 66, ../../../../general/res/sass/overlay/_overlay.scss */
+  /* line 67, ../../../../general/res/sass/overlay/_overlay.scss */
   .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu, .overlay .bottom-bar .select {
     font-size: 95%;
     height: 30px;
     line-height: 30px;
     margin-left: 5px;
     padding: 0 15px; }
-    /* line 68, ../../../../general/res/sass/overlay/_overlay.scss */
+    /* line 69, ../../../../general/res/sass/overlay/_overlay.scss */
     .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major), .overlay .bottom-bar .select:not(.major) {
       background-color: #969696;
       -moz-border-radius: 4px;
@@ -3966,11 +3961,11 @@ span.req {
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
         /* line 276, ../../../../general/res/sass/_mixins.scss */
         .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
-          background: #0099cc; }
+          background: #7d7d7d; }
           /* line 278, ../../../../general/res/sass/_mixins.scss */
           .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover > .icon {
             color: white; } }
-/* line 84, ../../../../general/res/sass/overlay/_overlay.scss */
+/* line 85, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
   top: 5px;
   right: 5px;
@@ -4575,7 +4570,6 @@ ul.tree {
     background-position: center; }
   /* line 78, ../../../../general/res/sass/_fixed-position.scss */
   .t-fixed-position .l-fixed-position-item .l-fixed-position-text {
-    text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
     border: 1px solid transparent;
     font-size: 0.8rem;
     line-height: 100%; }
@@ -4598,9 +4592,9 @@ ul.tree {
         width: auto; }
       /* line 105, ../../../../general/res/sass/_fixed-position.scss */
       .t-fixed-position .l-fixed-position-item .l-fixed-position-text.l-telemetry .l-elem.l-value {
-        -moz-border-radius: 2px;
-        -webkit-border-radius: 2px;
-        border-radius: 2px;
+        -moz-border-radius: 3px;
+        -webkit-border-radius: 3px;
+        border-radius: 3px;
         float: right;
         margin-left: 5px;
         padding-left: 5px;
@@ -4619,19 +4613,19 @@ ul.tree {
 
 /* line 140, ../../../../general/res/sass/_fixed-position.scss */
 .edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-x {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
   background-size: 100%;
-  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
-  background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
-  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
   background-repeat: repeat-x; }
 /* line 144, ../../../../general/res/sass/_fixed-position.scss */
 .edit-mode .t-fixed-position.l-fixed-position .l-grid-holder .l-grid.l-grid-y {
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIxcHgiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPjxzdG9wIG9mZnNldD0iMXB4IiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
   background-size: 100%;
-  background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
-  background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
-  background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
+  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 100%);
   background-repeat: repeat-y; }
 /* line 152, ../../../../general/res/sass/_fixed-position.scss */
 .edit-mode .t-fixed-position .l-fixed-position-item:not(.s-selected) {
@@ -4674,12 +4668,11 @@ table {
   box-sizing: border-box;
   border-spacing: 0;
   border-collapse: collapse;
-  color: #fff;
   display: table;
   font-size: 0.75rem;
   position: relative;
   width: 100%; }
-  /* line 38, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 36, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular thead, .tabular .thead,
   .tabular tbody tr, .tabular .tbody .tr,
   table thead,
@@ -4687,42 +4680,42 @@ table {
   table tbody tr,
   table .tbody .tr {
     width: 100%; }
-  /* line 44, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 40, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular thead, .tabular .thead,
   table thead,
   table .thead {
     border-bottom: 1px solid #fcfcfc; }
-  /* line 47, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 43, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular tbody, .tabular .tbody,
   table tbody,
   table .tbody {
     display: table-row-group; }
-    /* line 54, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 46, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tbody tr:hover, .tabular tbody .tr:hover, .tabular .tbody tr:hover, .tabular .tbody .tr:hover,
     table tbody tr:hover,
     table tbody .tr:hover,
     table .tbody tr:hover,
     table .tbody .tr:hover {
-      background: rgba(255, 255, 255, 0.1); }
-  /* line 59, ../../../../general/res/sass/lists/_tabular.scss */
+      background: rgba(51, 51, 51, 0.1); }
+  /* line 51, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular tr, .tabular .tr,
   table tr,
   table .tr {
     display: table-row; }
-    /* line 61, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 53, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr:first-child .td, .tabular .tr:first-child .td,
     table tr:first-child .td,
     table .tr:first-child .td {
       border-top: none; }
-    /* line 65, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 57, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr.group-header td, .tabular tr.group-header .td, .tabular .tr.group-header td, .tabular .tr.group-header .td,
     table tr.group-header td,
     table tr.group-header .td,
     table .tr.group-header td,
     table .tr.group-header .td {
-      background-color: #f2f2f2;
-      color: #f2f2f2; }
-    /* line 71, ../../../../general/res/sass/lists/_tabular.scss */
+      background-color: #efefef;
+      color: #404040; }
+    /* line 63, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr th, .tabular tr .th, .tabular tr td, .tabular tr .td, .tabular .tr th, .tabular .tr .th, .tabular .tr td, .tabular .tr .td,
     table tr th,
     table tr .th,
@@ -4733,26 +4726,26 @@ table {
     table .tr td,
     table .tr .td {
       display: table-cell; }
-    /* line 74, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 66, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr th, .tabular tr .th, .tabular .tr th, .tabular .tr .th,
     table tr th,
     table tr .th,
     table .tr th,
     table .tr .th {
-      background-color: white;
+      background-color: #e3e3e3;
       border-left: 1px solid #fcfcfc;
-      color: white;
+      color: #333333;
       padding: 5px 5px;
       white-space: nowrap;
       vertical-align: middle; }
-      /* line 81, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 73, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th:first-child, .tabular tr .th:first-child, .tabular .tr th:first-child, .tabular .tr .th:first-child,
       table tr th:first-child,
       table tr .th:first-child,
       table .tr th:first-child,
       table .tr .th:first-child {
         border-left: none; }
-      /* line 85, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 77, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sort.sort:after, .tabular tr .th.sort.sort:after, .tabular .tr th.sort.sort:after, .tabular .tr .th.sort.sort:after,
       table tr th.sort.sort:after,
       table tr .th.sort.sort:after,
@@ -4764,74 +4757,74 @@ table {
         content: "\ed";
         display: inline-block;
         margin-left: 3px; }
-      /* line 93, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 85, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sort.sort.desc:after, .tabular tr .th.sort.sort.desc:after, .tabular .tr th.sort.sort.desc:after, .tabular .tr .th.sort.sort.desc:after,
       table tr th.sort.sort.desc:after,
       table tr .th.sort.sort.desc:after,
       table .tr th.sort.sort.desc:after,
       table .tr .th.sort.sort.desc:after {
         content: "\ec"; }
-      /* line 97, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 89, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sortable, .tabular tr .th.sortable, .tabular .tr th.sortable, .tabular .tr .th.sortable,
       table tr th.sortable,
       table tr .th.sortable,
       table .tr th.sortable,
       table .tr .th.sortable {
         cursor: pointer; }
-    /* line 101, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 93, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr td, .tabular tr .td, .tabular .tr td, .tabular .tr .td,
     table tr td,
     table tr .td,
     table .tr td,
     table .tr .td {
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      border-bottom: 1px solid #e3e3e3;
       min-width: 20px;
-      color: #fff;
+      color: #333333;
       padding: 3px 5px;
       word-wrap: break-word;
       vertical-align: top; }
-      /* line 108, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 100, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr td.numeric, .tabular tr .td.numeric, .tabular .tr td.numeric, .tabular .tr .td.numeric,
       table tr td.numeric,
       table tr .td.numeric,
       table .tr td.numeric,
       table .tr .td.numeric {
         text-align: right; }
-      /* line 111, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 103, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr td.s-cell-type-value, .tabular tr .td.s-cell-type-value, .tabular .tr td.s-cell-type-value, .tabular .tr .td.s-cell-type-value,
       table tr td.s-cell-type-value,
       table tr .td.s-cell-type-value,
       table .tr td.s-cell-type-value,
       table .tr .td.s-cell-type-value {
         text-align: right; }
-        /* line 113, ../../../../general/res/sass/lists/_tabular.scss */
+        /* line 105, ../../../../general/res/sass/lists/_tabular.scss */
         .tabular tr td.s-cell-type-value .l-cell-contents, .tabular tr .td.s-cell-type-value .l-cell-contents, .tabular .tr td.s-cell-type-value .l-cell-contents, .tabular .tr .td.s-cell-type-value .l-cell-contents,
         table tr td.s-cell-type-value .l-cell-contents,
         table tr .td.s-cell-type-value .l-cell-contents,
         table .tr td.s-cell-type-value .l-cell-contents,
         table .tr .td.s-cell-type-value .l-cell-contents {
-          -moz-border-radius: 2px;
-          -webkit-border-radius: 2px;
-          border-radius: 2px;
+          -moz-border-radius: 3px;
+          -webkit-border-radius: 3px;
+          border-radius: 3px;
           padding-left: 5px;
           padding-right: 5px; }
-  /* line 129, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 121, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.filterable tbody, .tabular.filterable .tbody,
   table.filterable tbody,
   table.filterable .tbody {
     top: 44px; }
-  /* line 132, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 124, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.filterable input[type="text"],
   table.filterable input[type="text"] {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     width: 100%; }
-  /* line 138, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 130, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.fixed-header,
   table.fixed-header {
     height: 100%; }
-    /* line 140, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 132, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead,
     .tabular.fixed-header tbody tr, .tabular.fixed-header .tbody .tr,
     table.fixed-header thead,
@@ -4840,12 +4833,12 @@ table {
     table.fixed-header .tbody .tr {
       display: table;
       table-layout: fixed; }
-    /* line 145, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 137, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead,
     table.fixed-header thead,
     table.fixed-header .thead {
       width: calc(100% - 10px); }
-      /* line 147, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 139, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular.fixed-header thead:before, .tabular.fixed-header .thead:before,
       table.fixed-header thead:before,
       table.fixed-header .thead:before {
@@ -4856,7 +4849,7 @@ table {
         width: 100%;
         height: 22px;
         background: rgba(255, 255, 255, 0.15); }
-    /* line 157, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 149, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header tbody, .tabular.fixed-header .tbody,
     table.fixed-header tbody,
     table.fixed-header .tbody {
@@ -4871,7 +4864,7 @@ table {
       top: 22px;
       display: block;
       overflow-y: scroll; }
-  /* line 165, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 157, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.t-event-messages td, .tabular.t-event-messages .td,
   table.t-event-messages td,
   table.t-event-messages .td {
@@ -5107,9 +5100,9 @@ table {
 
 /* line 228, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-legend .plot-legend-item {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
   line-height: 1.5em;
   padding: 0px 5px; }
   /* line 234, ../../../../general/res/sass/plots/_plots-main.scss */
@@ -5295,7 +5288,7 @@ table {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    color: #ddd;
+    color: #fff;
     display: inline-block;
     -moz-user-select: -moz-none;
     -ms-user-select: none;
@@ -5312,30 +5305,30 @@ table {
     position: relative; }
     /* line 271, ../../../../general/res/sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
-      color: #ddd; }
+      color: #eee; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 276, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover {
-        background: #0099cc; }
+        background: #7d7d7d; }
         /* line 278, ../../../../general/res/sass/_mixins.scss */
         .items-holder .item.grid-item:not(.disabled):hover > .icon {
           color: white; } }
-    /* line 47, ../../../../general/res/sass/items/_item.scss */
+    /* line 46, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: deepskyblue; }
-      /* line 49, ../../../../general/res/sass/items/_item.scss */
+      /* line 48, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
         color: #49dedb; }
-    /* line 53, ../../../../general/res/sass/items/_item.scss */
+    /* line 52, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-open {
       opacity: 1; }
-    /* line 58, ../../../../general/res/sass/items/_item.scss */
+    /* line 57, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
       top: 10px;
       right: 10px;
       bottom: 10px;
       left: 10px; }
-    /* line 64, ../../../../general/res/sass/items/_item.scss */
+    /* line 63, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar {
       bottom: auto;
       color: #d9d9d9;
@@ -5343,24 +5336,24 @@ table {
       line-height: 20px;
       text-align: right;
       z-index: 5; }
-      /* line 71, ../../../../general/res/sass/items/_item.scss */
+      /* line 70, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
         width: auto; }
-        /* line 73, ../../../../general/res/sass/items/_item.scss */
+        /* line 72, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
           margin-left: 3px; }
-          /* line 75, ../../../../general/res/sass/items/_item.scss */
+          /* line 74, ../../../../general/res/sass/items/_item.scss */
           .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
             color: #49dedb; }
-    /* line 81, ../../../../general/res/sass/items/_item.scss */
+    /* line 80, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
       top: auto;
       line-height: 110%; }
-    /* line 87, ../../../../general/res/sass/items/_item.scss */
+    /* line 86, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 93, ../../../../general/res/sass/items/_item.scss */
+      /* line 92, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         overflow: false;
         position: absolute;
@@ -5370,14 +5363,14 @@ table {
         left: 40px;
         width: auto;
         height: auto;
-        color: #ddd;
+        color: #eee;
         text-align: center;
         font-size: 96.9px;
         line-height: 102px;
         bottom: auto;
         height: 102px;
         top: 30px; }
-        /* line 105, ../../../../general/res/sass/items/_item.scss */
+        /* line 104, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .item-main .item-type .l-icon-link {
           color: #49dedb;
           height: auto;
@@ -5387,7 +5380,7 @@ table {
           left: 0px;
           bottom: 10px;
           z-index: 2; }
-      /* line 117, ../../../../general/res/sass/items/_item.scss */
+      /* line 116, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -5408,14 +5401,14 @@ table {
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 128, ../../../../general/res/sass/items/_item.scss */
+    /* line 127, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: #fff; }
-    /* line 133, ../../../../general/res/sass/items/_item.scss */
+    /* line 132, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       overflow: hidden;
@@ -5423,7 +5416,7 @@ table {
       white-space: nowrap;
       color: #d9d9d9;
       font-size: 0.8em; }
-    /* line 139, ../../../../general/res/sass/items/_item.scss */
+    /* line 138, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-color: #0099cc;
       -moz-border-radius: 4px;
@@ -5442,24 +5435,17 @@ table {
       color: #80dfff; }
       /* line 271, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
-        color: #ddd; }
-      @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 276, ../../../../general/res/sass/_mixins.scss */
-        .items-holder .item.grid-item.selected:not(.disabled):hover {
-          background: #0099cc; }
-          /* line 278, ../../../../general/res/sass/_mixins.scss */
-          .items-holder .item.grid-item.selected:not(.disabled):hover > .icon {
-            color: white; } }
-      /* line 144, ../../../../general/res/sass/items/_item.scss */
+        color: #eee; }
+      /* line 143, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 145, ../../../../general/res/sass/items/_item.scss */
+      /* line 144, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 146, ../../../../general/res/sass/items/_item.scss */
+      /* line 145, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 148, ../../../../general/res/sass/items/_item.scss */
+      /* line 147, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 
@@ -5672,11 +5658,11 @@ table {
           background: rgba(255, 255, 255, 0.1); }
         /* line 93, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.s-stale .l-autoflow-item.l {
-          color: rgba(255, 255, 255, 0.3) !important;
+          color: rgba(51, 51, 51, 0.3) !important;
           font-style: italic; }
         /* line 94, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row.s-stale .l-autoflow-item.r {
-          color: rgba(255, 255, 255, 0.5) !important;
+          color: rgba(51, 51, 51, 0.5) !important;
           font-style: italic; }
         /* line 97, ../../../../general/res/sass/_autoflow.scss */
         .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row:not(.s-stale) .l-autoflow-item.r {
@@ -5696,9 +5682,9 @@ table {
             width: auto; }
           /* line 113, ../../../../general/res/sass/_autoflow.scss */
           .autoflow .l-autoflow-items .l-autoflow-col .l-autoflow-row .l-autoflow-item.r {
-            -moz-border-radius: 2px;
-            -webkit-border-radius: 2px;
-            border-radius: 2px;
+            -moz-border-radius: 3px;
+            -webkit-border-radius: 3px;
+            border-radius: 3px;
             float: right;
             margin-left: 5px;
             padding-left: 5px;
@@ -5730,7 +5716,7 @@ table {
   min-width: 150px; }
   /* line 16, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: #eee;
     bottom: 30px; }
   /* line 20, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main-controlbar {
@@ -5773,7 +5759,7 @@ table {
   /* line 67, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-controlbar .l-date,
   .l-image-main-controlbar .l-time {
-    color: #fff; }
+    color: #333333; }
   /* line 71, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-controlbar .l-mag {
     direction: ltr;
@@ -5783,7 +5769,7 @@ table {
       content: "\000049"; }
   /* line 79, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-controlbar .s-mag {
-    color: #333333; }
+    color: #999999; }
   /* line 82, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-controlbar .l-btn.show-thumbs {
     display: none; }
@@ -5793,7 +5779,7 @@ table {
   border: 1px solid transparent; }
   /* line 89, ../../../../general/res/sass/features/_imagery.scss */
   .s-image-main.paused {
-    border-color: #c56f01; }
+    border-color: #ff9900; }
 
 /*************************************** THUMBS */
 /* line 96, ../../../../general/res/sass/features/_imagery.scss */
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index f7d180cede..155e1ca892 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -1,6 +1,4 @@
-$basicCr: 4px;
-$controlCr: $basicCr;
-/************************** COLORS AND SHADING */
+// Global
 $colorBodyBg: #fcfcfc;
 $colorBodyFg: #666;
 $colorGenBg: #fff;
@@ -10,25 +8,30 @@ $colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
 $contrastRatioPercent: 30%;
+$basicCr: 4px;
+$controlCr: $basicCr;
+$smallCr: 3px;
 
 // Buttons
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
 $colorBtnFg: #fff;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorFg: $colorKeyFg;
-$colorBtnIcon: #ddd;
+$colorBtnIcon: #eee;
 $colorObjHdrIcon: $colorBodyFg;
 $colorInvokeMenu: #000;
-$contrastInvokeMenuPercent: 50%;
+$contrastInvokeMenuPercent: 40%;
 
+// General Colors
 $colorAlt1: #ff6600;
 $colorAlert: #ff3c00;
 $colorIconLink: #49dedb;
-$colorPausedBg: #c56f01;
+$colorPausedBg: #ff9900;
 $colorPausedFg: #fff;
 $colorCreateBtn: $colorKey;
-$colorGridLines: rgba(#fff, 0.05);
+$colorGridLines: rgba(#000, 0.05);
 $colorInvokeMenu: #fff;
+
 // Menu colors
 $colorMenuBg: pushBack($colorBodyBg, 10%);
 $colorMenuFg: pullForward($colorMenuBg, 70%);
@@ -40,54 +43,62 @@ $colorCreateMenuLgIcon: $colorKey;
 $colorCreateMenuText: $colorBodyFg;
 $shdwMenu: rgba(black, 0.5) 0 1px 5px;
 $shdwMenuText: none;
+
 // Form colors
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
 $colorFormValid: #33cc33;
 $colorFormError: #cc0000;
 $colorFormInvalid: #ff2200;
-$colorFormLines: rgba(#fff, 0.1); // MOVED
+$colorFormLines: rgba(#000, 0.1); // MOVED
 $colorFormSectionHeader: rgba(#000, 0.1);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
+
 // Limits and staleness colors//
 $colorLimitYellow: #9d7500;
 $colorLimitRed: #aa0000;
-$colorTelemFresh: #fff;
-$colorTelemStale: #888;
+$colorTelemFresh: pullForward($colorBodyFg, 20%);
+$colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;
+
 // Bubble colors
 $colorInfoBubbleFg: #666;
 $colorInfoBubbleBg: $colorMenuBg;
 $colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
 $colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
+
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);//
 $colorOvrBg: $colorBodyBg;
 $colorOvrFg: $colorBodyFg;
 $colorOvrBtnBg: pullForward($colorOvrBg, 40%);
 $colorOvrBtnFg: #fff;
+
 // Items
-$colorItemBg: $colorBtnBg; //pullForward($colorBodyBg, 15%);
-$colorItemFg: $colorBtnFg; //lighten($colorItemBg, 20%);
+$colorItemBg: $colorBtnBg;
+$colorItemFg: $colorBtnFg;
 $colorItemFgDetails: darken($colorItemFg, 15%);
 $colorItemIcon: $colorBtnIcon;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
 $shdwItemText: rgba(black, 0.2) 0 1px 2px;
 $colorItemBgSelected: $colorKey;
+
 // Tabular
-$tabularColorBorder: rgba(white, 0.1);
-$tabularColorBodyBg: darken($colorBodyBg, 10%);
-$tabularColorBodyFg: lighten($tabularColorBodyBg, 40%);
-$tabularColorHeaderBg: lighten($colorBodyBg, 10%);
-$tabularColorHeaderFg: lighten($tabularColorHeaderBg, 40%);
-$tabularColorHeaderBorder: $colorBodyBg;
+$colorTabBorder: pullForward($colorBodyBg, 10%);
+$colorTabBodyBg: $colorBodyBg;
+$colorTabBodyFg: pullForward($colorBodyFg, 20%);
+$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
+$colorTabHeaderFg: pullForward($colorBodyFg, 20%);
+$colorTabHeaderBorder: $colorBodyBg;
+
 // Plot
-$colorPlotBg: #eee; //
+$colorPlotBg: #eee;
 $colorPlotFg: $colorBodyFg;
+
 // Tree
 $colorItemTreeIcon: $colorKey;
 $colorItemTreeIconHover: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
@@ -98,11 +109,14 @@ $colorItemTreeSelectedFg: $colorBodyBg;
 $colorItemTreeVC: $colorBodyFg;
 $colorItemTreeSelectedVC: $colorBodyBg;
 $shdwItemTreeIcon: none;
+
 // Scrollbar
 $scrollbarTrackSize: 10px;
-$scrollbarTrackColorBg: rgba(#000, 0.5);
-$scrollbarThumbColor: darken($colorBodyBg, 25%);//
+$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
+$scrollbarTrackColorBg: rgba(#000, 0.1);
+$scrollbarThumbColor: darken($colorBodyBg, 50%);//
 $scrollbarThumbColorHov: $colorKey;
+
 // Splitter
 $splitterShdw: none;
 $colorSplitterInterior: $colorBodyBg;
@@ -111,5 +125,5 @@ $splitterW: 5px;
 $splitterEndCr: $splitterW;
 $colorGrippyInteriorHover: $colorBodyBg;
 
-/********************************* MOBILE */
+// Mobile
 $colorMobilePaneLeft: darken($colorBodyBg, 2%);
\ No newline at end of file
diff --git a/platform/commonUI/themes/snow/res/sass/_mixins.scss b/platform/commonUI/themes/snow/res/sass/_mixins.scss
index 267aa62d26..2ff7fb2690 100644
--- a/platform/commonUI/themes/snow/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/snow/res/sass/_mixins.scss
@@ -4,7 +4,7 @@
 
 @mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
 	@include containerSubtle($bg, $fg);
-	@include btnBase($bg, $colorKey, $fg, $ic);
+	@include btnBase($bg, $bgHov, $fg, $ic);
 	@include text-shadow($shdwItemText);
 }
 

From a840b59044b328f04cd7924c98e3f7e00bb710cf Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Thu, 10 Sep 2015 15:58:00 -0700
Subject: [PATCH 204/266] [Frontend] IN-PROGRESS Theming continues, sanding

open #95
Fixed grid icon hover color;
Various color normalization;
---
 .../commonUI/general/res/sass/_about.scss     |   4 +-
 .../commonUI/general/res/sass/_global.scss    |  14 +-
 .../commonUI/general/res/sass/_mixins.scss    |   1 +
 platform/commonUI/general/res/sass/_text.scss |   2 +-
 .../general/res/sass/controls/_buttons.scss   |  53 +---
 .../general/res/sass/items/_item.scss         |   4 +-
 .../general/res/sass/search/_search.scss      |   2 +-
 .../espresso/res/css/theme-espresso.css       | 265 ++++++++----------
 .../themes/espresso/res/sass/_constants.scss  |  11 +-
 .../themes/snow/res/css/theme-snow.css        | 263 ++++++++---------
 .../themes/snow/res/sass/_constants.scss      |  11 +-
 11 files changed, 275 insertions(+), 355 deletions(-)

diff --git a/platform/commonUI/general/res/sass/_about.scss b/platform/commonUI/general/res/sass/_about.scss
index 2e7180cdda..978ea42078 100644
--- a/platform/commonUI/general/res/sass/_about.scss
+++ b/platform/commonUI/general/res/sass/_about.scss
@@ -59,7 +59,7 @@
 	line-height: 120%;
 
 	a {
-		color: #84b3ff;
+		color: $colorAboutLink;
 	}
 	.s-description,
 	.s-info {
@@ -89,7 +89,7 @@
 				border-top: none;
 			}
 			em {
-				color: darken($colorBodyFg, 20%);
+				color: pushBack($colorBodyFg, 20%);
 //				margin-left: 2em;
 				&:first-child {
 //					margin-left: 0;
diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss
index 6b7124a2be..3f23938715 100644
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -62,7 +62,6 @@ body, html {
 }
 
 em {
-//	color: rgba(white, 0.2); Removed this as a global setting
 	font-style: normal;
 }
 
@@ -114,7 +113,7 @@ mct-container {
 
 .codehilite {
 	@extend .code;
-	background-color: rgba(#fff, 0.1);
+	background-color: rgba($colorBodyFg, 0.1);
 	padding: 1em;
 }
 
@@ -130,10 +129,6 @@ mct-container {
 	margin: 0;
 }
 
-.colorKey {
-	color: $colorKey;
-}
-
 .ds {
 	@include box-shadow(rgba(#000, 0.7) 0 4px 10px 2px);
 }
@@ -143,13 +138,6 @@ mct-container {
 	display: none !important;
 }
 
-.paused {
-	&:not(.s-btn) {
-		border-color: $colorPausedBg !important;
-		color: $colorPausedBg !important;
-	}
-}
-
 .sep {
 	color: rgba(#fff, 0.2);
 }
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 1d38e876ba..528f965cff 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -268,6 +268,7 @@
 
 @mixin btnBase($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
 	@include user-select(none);
+    @include transition(background, .25s);
 	.icon {
 		color: $ic;
 	}
diff --git a/platform/commonUI/general/res/sass/_text.scss b/platform/commonUI/general/res/sass/_text.scss
index 0d80fad54c..aebf7610d4 100644
--- a/platform/commonUI/general/res/sass/_text.scss
+++ b/platform/commonUI/general/res/sass/_text.scss
@@ -37,7 +37,7 @@
 	}
 
 	h1, h2, h3 {
-		color: #fff;
+		color: pullForward($colorBodyFg, 20%);
 		font-weight: normal !important;
 		margin-bottom: 1em;
 	}
diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
index b9fa14eda4..3340d188bd 100644
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -22,42 +22,6 @@
 $baseRatio: 1.5;
 $pad: $interiorMargin * $baseRatio;
 
-/******* LAYOUT AND SIZING */
-/*.l-btn {
-	@include user-select(none);
-	//line-height: 1.5em; // Was 1.25em
-	line-height: 150%;
-	padding: 0 $pad;
-	text-decoration: none;
-	&.lg,
-	&.create-btn {
-		$h: $ueTopBarH; // - $interiorMargin;
-		height: $h;
-		line-height: $h - 2;
-		padding: 0 $pad * 3;
-	}
-	&.create-btn {
-		font-size: 1em;
-		&:before {
-			content:"+";
-			font-family: symbolsfont;
-		}
-		.menu {
-			margin-left: $pad * -1;
-		}
-		>.ui-symbol {
-			//font-size: 1.1em; // Normalizing for new icomoon symbols font
-		}
-	}
-	&.sm {
-		padding: 0 $pad / $baseRatio;
-	}
-	&.vsm {
-		padding: 0 ($pad / $baseRatio) / 2;
-	}
-}*/
-
-/*********************************** STYLE STYLES */
 .s-btn {
     @include box-sizing(border-box);
     @include user-select(none);
@@ -156,15 +120,10 @@ $pad: $interiorMargin * $baseRatio;
     }
 }
 
-/*********************************** LAYOUT STYLES */
-/*
-
-span.s-btn,
-span.s-btn span,
-a.s-btn,
-a.s-btn span,
-a.s-btn,
-a.s-btn span {
-	display: inline-block;
+.paused {
+    &:not(.s-btn) {
+        border-color: $colorPausedBg !important;
+        color: $colorPausedBg !important;
+    }
 }
-*/
+
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 5f056d4de2..5587d43da3 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -32,7 +32,7 @@
             $iconMargin: 40px;
             $iconD: ($d - ($iconMargin * 2)) * 0.85;
             $transTime: 200ms;
-            @include btnSubtle($colorItemBg, pullForward($colorItemBg, 20%), $colorItemFg, $colorItemIcon);
+            @include btnSubtle($colorItemBg, pullForward($colorItemBg, 20%), $colorItemFg, $colorItemIc);
             box-sizing: border-box;
             cursor: pointer;
             float: left;
@@ -90,7 +90,7 @@
                     //@include trans-prop-nice("color", $transTime);
                     @include absPosDefault($iconMargin, false);
                     //@include test(red);
-                    color: $colorItemIcon;
+                    //color: $colorItemIc;
                     text-align: center;
                     font-size: $iconD * 0.95; //6em;
                     line-height: $iconD;
diff --git a/platform/commonUI/general/res/sass/search/_search.scss b/platform/commonUI/general/res/sass/search/_search.scss
index 783206ce99..3aa349d6f8 100644
--- a/platform/commonUI/general/res/sass/search/_search.scss
+++ b/platform/commonUI/general/res/sass/search/_search.scss
@@ -80,7 +80,7 @@
 		.clear-icon,
 		.menu-icon {
 			cursor: pointer;
-			transition: color .25s;
+			@include transition(color, .25s);
 		}
 
 
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 17017bd09c..eed02ecff8 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -364,20 +364,20 @@ body, html {
 em {
   font-style: normal; }
 
-/* line 69, ../../../../general/res/sass/_global.scss */
+/* line 68, ../../../../general/res/sass/_global.scss */
 input, textarea {
   font-family: Helvetica, Arial, sans-serif; }
 
-/* line 73, ../../../../general/res/sass/_global.scss */
+/* line 72, ../../../../general/res/sass/_global.scss */
 input[type="text"] {
   vertical-align: baseline;
   padding: 3px 5px !important; }
 
-/* line 78, ../../../../general/res/sass/_global.scss */
+/* line 77, ../../../../general/res/sass/_global.scss */
 h1, h2, h3 {
   margin: 0; }
 
-/* line 82, ../../../../general/res/sass/_global.scss */
+/* line 81, ../../../../general/res/sass/_global.scss */
 h1 {
   font-size: 1.7em;
   font-weight: normal !important;
@@ -385,15 +385,15 @@ h1 {
   margin-bottom: 20px;
   margin-top: 0; }
 
-/* line 90, ../../../../general/res/sass/_global.scss */
+/* line 89, ../../../../general/res/sass/_global.scss */
 p {
   margin-bottom: 10px; }
 
-/* line 94, ../../../../general/res/sass/_global.scss */
+/* line 93, ../../../../general/res/sass/_global.scss */
 mct-container {
   display: block; }
 
-/* line 98, ../../../../general/res/sass/_global.scss */
+/* line 97, ../../../../general/res/sass/_global.scss */
 .abs, .s-menu span.l-click-area, .select span.l-click-area {
   position: absolute;
   top: 0;
@@ -403,51 +403,42 @@ mct-container {
   height: auto;
   width: auto; }
 
-/* line 108, ../../../../general/res/sass/_global.scss */
+/* line 107, ../../../../general/res/sass/_global.scss */
 .code, .codehilite {
   font-family: "Lucida Console", monospace;
   font-size: 0.7em;
   line-height: 150%;
   white-space: pre; }
 
-/* line 115, ../../../../general/res/sass/_global.scss */
+/* line 114, ../../../../general/res/sass/_global.scss */
 .codehilite {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(153, 153, 153, 0.1);
   padding: 1em; }
 
-/* line 121, ../../../../general/res/sass/_global.scss */
+/* line 120, ../../../../general/res/sass/_global.scss */
 .align-right {
   text-align: right; }
 
-/* line 125, ../../../../general/res/sass/_global.scss */
+/* line 124, ../../../../general/res/sass/_global.scss */
 .centered {
   text-align: center; }
 
-/* line 129, ../../../../general/res/sass/_global.scss */
+/* line 128, ../../../../general/res/sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 133, ../../../../general/res/sass/_global.scss */
-.colorKey {
-  color: #0099cc; }
-
-/* line 137, ../../../../general/res/sass/_global.scss */
+/* line 132, ../../../../general/res/sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 141, ../../../../general/res/sass/_global.scss */
+/* line 136, ../../../../general/res/sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 147, ../../../../general/res/sass/_global.scss */
-.paused:not(.s-btn):not(.s-menu):not(.select) {
-  border-color: #c56f01 !important;
-  color: #c56f01 !important; }
-
-/* line 153, ../../../../general/res/sass/_global.scss */
+/* line 141, ../../../../general/res/sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -576,7 +567,7 @@ mct-container {
     margin-left: 1.5em; }
   /* line 39, ../../../../general/res/sass/_text.scss */
   .s-text h1, .s-text h2, .s-text h3 {
-    color: #fff;
+    color: #cccccc;
     font-weight: normal !important;
     margin-bottom: 1em; }
   /* line 45, ../../../../general/res/sass/_text.scss */
@@ -1310,42 +1301,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/******* LAYOUT AND SIZING */
-/*.l-btn {
-	@include user-select(none);
-	//line-height: 1.5em; // Was 1.25em
-	line-height: 150%;
-	padding: 0 $pad;
-	text-decoration: none;
-	&.lg,
-	&.create-btn {
-		$h: $ueTopBarH; // - $interiorMargin;
-		height: $h;
-		line-height: $h - 2;
-		padding: 0 $pad * 3;
-	}
-	&.create-btn {
-		font-size: 1em;
-		&:before {
-			content:"+";
-			font-family: symbolsfont;
-		}
-		.menu {
-			margin-left: $pad * -1;
-		}
-		>.ui-symbol {
-			//font-size: 1.1em; // Normalizing for new icomoon symbols font
-		}
-	}
-	&.sm {
-		padding: 0 $pad / $baseRatio;
-	}
-	&.vsm {
-		padding: 0 ($pad / $baseRatio) / 2;
-	}
-}*/
-/*********************************** STYLE STYLES */
-/* line 61, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 25, ../../../../general/res/sass/controls/_buttons.scss */
 .s-btn, .s-menu, .select {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -1360,20 +1316,20 @@ mct-container {
   line-height: 25px;
   padding: 0 7.5px;
   font-size: 0.7rem; }
-  /* line 71, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 35, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn .icon, .s-menu .icon, .select .icon {
     font-size: 0.8rem;
     color: #0099cc; }
-  /* line 76, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 40, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn .title-label, .s-menu .title-label, .select .title-label {
     vertical-align: top; }
-  /* line 80, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 44, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.sm, .sm.s-menu, .sm.select {
     padding: 0 5px; }
-  /* line 84, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 48, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.vsm, .vsm.s-menu, .vsm.select {
     padding: 0 2.5px; }
-  /* line 88, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 52, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.major, .major.s-menu, .major.select {
     background-color: #0099cc;
     -moz-border-radius: 3px;
@@ -1397,18 +1353,22 @@ mct-container {
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    -moz-transition: background, 0.25s;
+    -o-transition: background, 0.25s;
+    -webkit-transition: background, 0.25s;
+    transition: background, 0.25s;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-    /* line 271, ../../../../general/res/sass/_mixins.scss */
+    /* line 272, ../../../../general/res/sass/_mixins.scss */
     .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 276, ../../../../general/res/sass/_mixins.scss */
+      /* line 277, ../../../../general/res/sass/_mixins.scss */
       .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
         background: linear-gradient(#1ac6ff, #00bfff); }
-        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        /* line 279, ../../../../general/res/sass/_mixins.scss */
         .s-btn.major:not(.disabled):hover > .icon, .major.s-menu:not(.disabled):hover > .icon, .major.select:not(.disabled):hover > .icon {
           color: white; } }
-  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 58, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
     background-color: #454545;
     -moz-border-radius: 3px;
@@ -1432,21 +1392,25 @@ mct-container {
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    -moz-transition: background, 0.25s;
+    -o-transition: background, 0.25s;
+    -webkit-transition: background, 0.25s;
+    transition: background, 0.25s;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-    /* line 271, ../../../../general/res/sass/_mixins.scss */
+    /* line 272, ../../../../general/res/sass/_mixins.scss */
     .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
       color: #0099cc; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 276, ../../../../general/res/sass/_mixins.scss */
+      /* line 277, ../../../../general/res/sass/_mixins.scss */
       .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
         background: linear-gradient(#6b6b6b, #5e5e5e); }
-        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        /* line 279, ../../../../general/res/sass/_mixins.scss */
         .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon, .select:not(.major):not(.disabled):hover > .icon {
           color: #33ccff; } }
-  /* line 113, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 77, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before, .pause-play.select .icon:before {
     content: "\0000F1"; }
-  /* line 116, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 80, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.pause-play.paused, .pause-play.paused.s-menu, .pause-play.paused.select {
     background-color: #c56f01;
     -moz-border-radius: 3px;
@@ -1470,18 +1434,22 @@ mct-container {
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    -moz-transition: background, 0.25s;
+    -o-transition: background, 0.25s;
+    -webkit-transition: background, 0.25s;
+    transition: background, 0.25s;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-    /* line 271, ../../../../general/res/sass/_mixins.scss */
+    /* line 272, ../../../../general/res/sass/_mixins.scss */
     .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 276, ../../../../general/res/sass/_mixins.scss */
+      /* line 277, ../../../../general/res/sass/_mixins.scss */
       .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu:not(.disabled):hover, .pause-play.paused.select:not(.disabled):hover {
         background: linear-gradient(#fe9815, #f88c01); }
-        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        /* line 279, ../../../../general/res/sass/_mixins.scss */
         .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon, .pause-play.paused.select:not(.disabled):hover > .icon {
           color: white; } }
-    /* line 118, ../../../../general/res/sass/controls/_buttons.scss */
+    /* line 82, ../../../../general/res/sass/controls/_buttons.scss */
     .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
       -moz-animation-name: pulse;
       -webkit-animation-name: pulse;
@@ -1498,23 +1466,23 @@ mct-container {
       -moz-animation-timing-function: ease-in-out;
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out; }
-      /* line 120, ../../../../general/res/sass/controls/_buttons.scss */
+      /* line 84, ../../../../general/res/sass/controls/_buttons.scss */
       .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu .icon :before, .pause-play.paused.select .icon :before {
         content: "\0000EF"; }
-  /* line 128, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 92, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before, .show-thumbs.select .icon:before {
     content: "\000039"; }
 
-/* line 134, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 98, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
-  /* line 140, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 104, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .s-btn, .l-btn-set .s-menu, .l-btn-set .select {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
-  /* line 146, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 110, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .first .s-btn, .l-btn-set .first .s-menu, .l-btn-set .first .select {
     -moz-border-radius-topleft: 3px;
     -webkit-border-top-left-radius: 3px;
@@ -1523,7 +1491,7 @@ mct-container {
     -webkit-border-bottom-left-radius: 3px;
     border-bottom-left-radius: 3px;
     margin-left: 0; }
-  /* line 153, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 117, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .last .s-btn, .l-btn-set .last .s-menu, .l-btn-set .last .select {
     -moz-border-radius-topright: 3px;
     -webkit-border-top-right-radius: 3px;
@@ -1532,18 +1500,11 @@ mct-container {
     -webkit-border-bottom-right-radius: 3px;
     border-bottom-right-radius: 3px; }
 
-/*********************************** LAYOUT STYLES */
-/*
+/* line 124, ../../../../general/res/sass/controls/_buttons.scss */
+.paused:not(.s-btn):not(.s-menu):not(.select) {
+  border-color: #c56f01 !important;
+  color: #c56f01 !important; }
 
-span.s-btn,
-span.s-btn span,
-a.s-btn,
-a.s-btn span,
-a.s-btn,
-a.s-btn span {
-	display: inline-block;
-}
-*/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -1956,6 +1917,10 @@ label.checkbox.custom {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
+  -moz-transition: background, 0.25s;
+  -o-transition: background, 0.25s;
+  -webkit-transition: background, 0.25s;
+  transition: background, 0.25s;
   text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
   cursor: ew-resize;
   position: absolute;
@@ -1965,14 +1930,14 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 271, ../../../../general/res/sass/_mixins.scss */
+  /* line 272, ../../../../general/res/sass/_mixins.scss */
   .slider .knob .icon {
     color: #0099cc; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 276, ../../../../general/res/sass/_mixins.scss */
+    /* line 277, ../../../../general/res/sass/_mixins.scss */
     .slider .knob:not(.disabled):hover {
       background: linear-gradient(#595959, #4d4d4d); }
-      /* line 278, ../../../../general/res/sass/_mixins.scss */
+      /* line 279, ../../../../general/res/sass/_mixins.scss */
       .slider .knob:not(.disabled):hover > .icon {
         color: #33ccff; } }
   /* line 159, ../../../../general/res/sass/_mixins.scss */
@@ -2195,7 +2160,7 @@ label.checkbox.custom {
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 344, ../../../../general/res/sass/_mixins.scss */
+      /* line 345, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2612,7 +2577,7 @@ label.checkbox.custom {
       padding: 0 3px;
       position: relative;
       height: 150px; }
-      /* line 295, ../../../../general/res/sass/_mixins.scss */
+      /* line 296, ../../../../general/res/sass/_mixins.scss */
       .form .form-row .selector-list.error {
         background: rgba(255, 0, 0, 0.5); }
       /* line 124, ../../../../general/res/sass/forms/_elems.scss */
@@ -2669,7 +2634,7 @@ input[type="text"] {
   color: #cccccc;
   outline: none;
   padding: 0 3px; }
-  /* line 295, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
   /* line 172, ../../../../general/res/sass/forms/_elems.scss */
@@ -2697,7 +2662,7 @@ textarea {
   position: absolute;
   height: 100%;
   width: 100%; }
-  /* line 295, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   textarea.error {
     background: rgba(255, 0, 0, 0.5); }
 
@@ -2746,18 +2711,22 @@ textarea {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
+  -moz-transition: background, 0.25s;
+  -o-transition: background, 0.25s;
+  -webkit-transition: background, 0.25s;
+  transition: background, 0.25s;
   text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 271, ../../../../general/res/sass/_mixins.scss */
+  /* line 272, ../../../../general/res/sass/_mixins.scss */
   .select .icon {
     color: #0099cc; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 276, ../../../../general/res/sass/_mixins.scss */
+    /* line 277, ../../../../general/res/sass/_mixins.scss */
     .select:not(.disabled):hover {
       background: linear-gradient(#595959, #4d4d4d); }
-      /* line 278, ../../../../general/res/sass/_mixins.scss */
+      /* line 279, ../../../../general/res/sass/_mixins.scss */
       .select:not(.disabled):hover > .icon {
         color: #33ccff; } }
   /* line 30, ../../../../general/res/sass/forms/_selects.scss */
@@ -2830,7 +2799,7 @@ textarea {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 295, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -2987,7 +2956,7 @@ span.req {
   padding: 0 3px;
   background: #3b3b3b;
   border-bottom: 1px solid #4d4d4d; }
-  /* line 295, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -3783,7 +3752,10 @@ span.req {
     .search .search-bar .clear-icon,
     .search .search-bar .menu-icon {
       cursor: pointer;
-      transition: color .25s; }
+      -moz-transition: color, 0.25s;
+      -o-transition: color, 0.25s;
+      -webkit-transition: color, 0.25s;
+      transition: color, 0.25s; }
     /* line 87, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input {
       position: relative;
@@ -4040,15 +4012,19 @@ span.req {
       -ms-user-select: none;
       -webkit-user-select: none;
       user-select: none;
+      -moz-transition: background, 0.25s;
+      -o-transition: background, 0.25s;
+      -webkit-transition: background, 0.25s;
+      transition: background, 0.25s;
       text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
-      /* line 271, ../../../../general/res/sass/_mixins.scss */
+      /* line 272, ../../../../general/res/sass/_mixins.scss */
       .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon, .overlay .bottom-bar .select:not(.major) .icon {
         color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 276, ../../../../general/res/sass/_mixins.scss */
+        /* line 277, ../../../../general/res/sass/_mixins.scss */
         .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
           background: linear-gradient(#a6a6a6, #999999); }
-          /* line 278, ../../../../general/res/sass/_mixins.scss */
+          /* line 279, ../../../../general/res/sass/_mixins.scss */
           .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover > .icon {
             color: white; } }
 /* line 85, ../../../../general/res/sass/overlay/_overlay.scss */
@@ -4127,7 +4103,7 @@ ul.tree {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none; }
-  /* line 344, ../../../../general/res/sass/_mixins.scss */
+  /* line 345, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -5389,6 +5365,10 @@ table {
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    -moz-transition: background, 0.25s;
+    -o-transition: background, 0.25s;
+    -webkit-transition: background, 0.25s;
+    transition: background, 0.25s;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
     box-sizing: border-box;
     cursor: pointer;
@@ -5398,32 +5378,32 @@ table {
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 271, ../../../../general/res/sass/_mixins.scss */
+    /* line 272, ../../../../general/res/sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
       color: #0099cc; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 276, ../../../../general/res/sass/_mixins.scss */
+      /* line 277, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover {
         background: linear-gradient(#666666, #595959); }
-        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        /* line 279, ../../../../general/res/sass/_mixins.scss */
         .items-holder .item.grid-item:not(.disabled):hover > .icon {
           color: #33ccff; } }
-    /* line 46, ../../../../general/res/sass/items/_item.scss */
+    /* line 45, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: deepskyblue; }
-      /* line 48, ../../../../general/res/sass/items/_item.scss */
+      /* line 47, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
         color: #49dedb; }
-    /* line 52, ../../../../general/res/sass/items/_item.scss */
+    /* line 51, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-open {
       opacity: 1; }
-    /* line 57, ../../../../general/res/sass/items/_item.scss */
+    /* line 55, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
       top: 10px;
       right: 10px;
       bottom: 10px;
       left: 10px; }
-    /* line 63, ../../../../general/res/sass/items/_item.scss */
+    /* line 61, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar {
       bottom: auto;
       color: #8c8c8c;
@@ -5431,24 +5411,24 @@ table {
       line-height: 20px;
       text-align: right;
       z-index: 5; }
-      /* line 70, ../../../../general/res/sass/items/_item.scss */
+      /* line 68, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
         width: auto; }
-        /* line 72, ../../../../general/res/sass/items/_item.scss */
+        /* line 70, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
           margin-left: 3px; }
-          /* line 74, ../../../../general/res/sass/items/_item.scss */
+          /* line 72, ../../../../general/res/sass/items/_item.scss */
           .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
             color: #49dedb; }
-    /* line 80, ../../../../general/res/sass/items/_item.scss */
+    /* line 78, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
       top: auto;
       line-height: 110%; }
-    /* line 86, ../../../../general/res/sass/items/_item.scss */
+    /* line 83, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 92, ../../../../general/res/sass/items/_item.scss */
+      /* line 89, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         overflow: false;
         position: absolute;
@@ -5458,14 +5438,13 @@ table {
         left: 40px;
         width: auto;
         height: auto;
-        color: #0099cc;
         text-align: center;
         font-size: 96.9px;
         line-height: 102px;
         bottom: auto;
         height: 102px;
         top: 30px; }
-        /* line 104, ../../../../general/res/sass/items/_item.scss */
+        /* line 100, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .item-main .item-type .l-icon-link {
           color: #49dedb;
           height: auto;
@@ -5475,7 +5454,7 @@ table {
           left: 0px;
           bottom: 10px;
           z-index: 2; }
-      /* line 116, ../../../../general/res/sass/items/_item.scss */
+      /* line 111, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -5496,14 +5475,14 @@ table {
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 127, ../../../../general/res/sass/items/_item.scss */
+    /* line 121, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: #bfbfbf; }
-    /* line 132, ../../../../general/res/sass/items/_item.scss */
+    /* line 126, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       overflow: hidden;
@@ -5511,7 +5490,7 @@ table {
       white-space: nowrap;
       color: #8c8c8c;
       font-size: 0.8em; }
-    /* line 138, ../../../../general/res/sass/items/_item.scss */
+    /* line 132, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-color: #0099cc;
       -moz-border-radius: 3px;
@@ -5535,28 +5514,32 @@ table {
       -ms-user-select: none;
       -webkit-user-select: none;
       user-select: none;
+      -moz-transition: background, 0.25s;
+      -o-transition: background, 0.25s;
+      -webkit-transition: background, 0.25s;
+      transition: background, 0.25s;
       text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
       color: #80dfff; }
-      /* line 271, ../../../../general/res/sass/_mixins.scss */
+      /* line 272, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
         color: #0099cc; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 276, ../../../../general/res/sass/_mixins.scss */
+        /* line 277, ../../../../general/res/sass/_mixins.scss */
         .items-holder .item.grid-item.selected:not(.disabled):hover {
           background: linear-gradient(#1ac6ff, #00bfff); }
-          /* line 278, ../../../../general/res/sass/_mixins.scss */
+          /* line 279, ../../../../general/res/sass/_mixins.scss */
           .items-holder .item.grid-item.selected:not(.disabled):hover > .icon {
             color: #33ccff; } }
-      /* line 143, ../../../../general/res/sass/items/_item.scss */
+      /* line 137, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 144, ../../../../general/res/sass/items/_item.scss */
+      /* line 138, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 145, ../../../../general/res/sass/items/_item.scss */
+      /* line 139, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 147, ../../../../general/res/sass/items/_item.scss */
+      /* line 141, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 6a5a704ac7..04e4e9241c 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -65,8 +65,8 @@ $styleTelemStale: italic;
 // Bubble colors
 $colorInfoBubbleFg: #666;
 $colorInfoBubbleBg: #ddd;
-$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
-$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
+$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);
@@ -79,7 +79,7 @@ $colorOvrBtnFg: #fff;
 $colorItemBg: lighten($colorBodyBg, 5%);
 $colorItemFg: lighten($colorItemBg, 50%);
 $colorItemFgDetails: lighten($colorItemBg, 30%);
-$colorItemIcon: $colorKey; //pullForward($colorItemFg, 20%);
+$colorItemIc: $colorKey; //pullForward($colorItemFg, 20%);
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
 $shdwItemText: rgba(black, 0.1) 0 1px 2px;
@@ -124,4 +124,7 @@ $splitterEndCr: 1px;
 $colorGrippyInteriorHover: $colorKey;
 
 // Mobile
-$colorMobilePaneLeft: darken($colorBodyBg, 5%);
\ No newline at end of file
+$colorMobilePaneLeft: darken($colorBodyBg, 5%);
+
+// About Screen
+$colorAboutLink: #84b3ff;
\ No newline at end of file
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 2b39c7f6df..4ead1a5902 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -364,20 +364,20 @@ body, html {
 em {
   font-style: normal; }
 
-/* line 69, ../../../../general/res/sass/_global.scss */
+/* line 68, ../../../../general/res/sass/_global.scss */
 input, textarea {
   font-family: Helvetica, Arial, sans-serif; }
 
-/* line 73, ../../../../general/res/sass/_global.scss */
+/* line 72, ../../../../general/res/sass/_global.scss */
 input[type="text"] {
   vertical-align: baseline;
   padding: 3px 5px !important; }
 
-/* line 78, ../../../../general/res/sass/_global.scss */
+/* line 77, ../../../../general/res/sass/_global.scss */
 h1, h2, h3 {
   margin: 0; }
 
-/* line 82, ../../../../general/res/sass/_global.scss */
+/* line 81, ../../../../general/res/sass/_global.scss */
 h1 {
   font-size: 1.7em;
   font-weight: normal !important;
@@ -385,15 +385,15 @@ h1 {
   margin-bottom: 20px;
   margin-top: 0; }
 
-/* line 90, ../../../../general/res/sass/_global.scss */
+/* line 89, ../../../../general/res/sass/_global.scss */
 p {
   margin-bottom: 10px; }
 
-/* line 94, ../../../../general/res/sass/_global.scss */
+/* line 93, ../../../../general/res/sass/_global.scss */
 mct-container {
   display: block; }
 
-/* line 98, ../../../../general/res/sass/_global.scss */
+/* line 97, ../../../../general/res/sass/_global.scss */
 .abs, .s-menu span.l-click-area, .select span.l-click-area {
   position: absolute;
   top: 0;
@@ -403,51 +403,42 @@ mct-container {
   height: auto;
   width: auto; }
 
-/* line 108, ../../../../general/res/sass/_global.scss */
+/* line 107, ../../../../general/res/sass/_global.scss */
 .code, .codehilite {
   font-family: "Lucida Console", monospace;
   font-size: 0.7em;
   line-height: 150%;
   white-space: pre; }
 
-/* line 115, ../../../../general/res/sass/_global.scss */
+/* line 114, ../../../../general/res/sass/_global.scss */
 .codehilite {
-  background-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(102, 102, 102, 0.1);
   padding: 1em; }
 
-/* line 121, ../../../../general/res/sass/_global.scss */
+/* line 120, ../../../../general/res/sass/_global.scss */
 .align-right {
   text-align: right; }
 
-/* line 125, ../../../../general/res/sass/_global.scss */
+/* line 124, ../../../../general/res/sass/_global.scss */
 .centered {
   text-align: center; }
 
-/* line 129, ../../../../general/res/sass/_global.scss */
+/* line 128, ../../../../general/res/sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 133, ../../../../general/res/sass/_global.scss */
-.colorKey {
-  color: #0099cc; }
-
-/* line 137, ../../../../general/res/sass/_global.scss */
+/* line 132, ../../../../general/res/sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 141, ../../../../general/res/sass/_global.scss */
+/* line 136, ../../../../general/res/sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 147, ../../../../general/res/sass/_global.scss */
-.paused:not(.s-btn):not(.s-menu):not(.select) {
-  border-color: #ff9900 !important;
-  color: #ff9900 !important; }
-
-/* line 153, ../../../../general/res/sass/_global.scss */
+/* line 141, ../../../../general/res/sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -534,7 +525,7 @@ mct-container {
       border-top: none; }
     /* line 91, ../../../../general/res/sass/_about.scss */
     .s-about .l-licenses-software .l-license-software em {
-      color: #333333; }
+      color: #999999; }
     /* line 98, ../../../../general/res/sass/_about.scss */
     .s-about .l-licenses-software .l-license-software h3 {
       font-size: 1.25em; }
@@ -576,7 +567,7 @@ mct-container {
     margin-left: 1.5em; }
   /* line 39, ../../../../general/res/sass/_text.scss */
   .s-text h1, .s-text h2, .s-text h3 {
-    color: #fff;
+    color: #333333;
     font-weight: normal !important;
     margin-bottom: 1em; }
   /* line 45, ../../../../general/res/sass/_text.scss */
@@ -873,14 +864,14 @@ mct-container {
   height: 0;
   border-left: 6.66667px solid transparent;
   border-right: 6.66667px solid transparent;
-  border-bottom: 10px solid white; }
+  border-bottom: 10px solid #e3e3e3; }
 /* line 145, ../../../../general/res/sass/helpers/_bubbles.scss */
 .l-thumbsbubble-wrapper .arw-down {
   width: 0;
   height: 0;
   border-left: 6.66667px solid transparent;
   border-right: 6.66667px solid transparent;
-  border-top: 10px solid white; }
+  border-top: 10px solid #e3e3e3; }
 
 /* line 150, ../../../../general/res/sass/helpers/_bubbles.scss */
 .s-infobubble {
@@ -917,8 +908,8 @@ mct-container {
 
 /* line 188, ../../../../general/res/sass/helpers/_bubbles.scss */
 .s-thumbsbubble {
-  background: white;
-  color: gray; }
+  background: #e3e3e3;
+  color: #4d4d4d; }
 
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
@@ -1307,42 +1298,7 @@ mct-container {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/******* LAYOUT AND SIZING */
-/*.l-btn {
-	@include user-select(none);
-	//line-height: 1.5em; // Was 1.25em
-	line-height: 150%;
-	padding: 0 $pad;
-	text-decoration: none;
-	&.lg,
-	&.create-btn {
-		$h: $ueTopBarH; // - $interiorMargin;
-		height: $h;
-		line-height: $h - 2;
-		padding: 0 $pad * 3;
-	}
-	&.create-btn {
-		font-size: 1em;
-		&:before {
-			content:"+";
-			font-family: symbolsfont;
-		}
-		.menu {
-			margin-left: $pad * -1;
-		}
-		>.ui-symbol {
-			//font-size: 1.1em; // Normalizing for new icomoon symbols font
-		}
-	}
-	&.sm {
-		padding: 0 $pad / $baseRatio;
-	}
-	&.vsm {
-		padding: 0 ($pad / $baseRatio) / 2;
-	}
-}*/
-/*********************************** STYLE STYLES */
-/* line 61, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 25, ../../../../general/res/sass/controls/_buttons.scss */
 .s-btn, .s-menu, .select {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -1357,20 +1313,20 @@ mct-container {
   line-height: 25px;
   padding: 0 7.5px;
   font-size: 0.7rem; }
-  /* line 71, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 35, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn .icon, .s-menu .icon, .select .icon {
     font-size: 0.8rem;
     color: #0099cc; }
-  /* line 76, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 40, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn .title-label, .s-menu .title-label, .select .title-label {
     vertical-align: top; }
-  /* line 80, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 44, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.sm, .sm.s-menu, .sm.select {
     padding: 0 5px; }
-  /* line 84, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 48, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.vsm, .vsm.s-menu, .vsm.select {
     padding: 0 2.5px; }
-  /* line 88, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 52, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.major, .major.s-menu, .major.select {
     background-color: #0099cc;
     -moz-border-radius: 4px;
@@ -1385,18 +1341,22 @@ mct-container {
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    -moz-transition: background, 0.25s;
+    -o-transition: background, 0.25s;
+    -webkit-transition: background, 0.25s;
+    transition: background, 0.25s;
     text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
-    /* line 271, ../../../../general/res/sass/_mixins.scss */
+    /* line 272, ../../../../general/res/sass/_mixins.scss */
     .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 276, ../../../../general/res/sass/_mixins.scss */
+      /* line 277, ../../../../general/res/sass/_mixins.scss */
       .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
         background: deepskyblue; }
-        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        /* line 279, ../../../../general/res/sass/_mixins.scss */
         .s-btn.major:not(.disabled):hover > .icon, .major.s-menu:not(.disabled):hover > .icon, .major.select:not(.disabled):hover > .icon {
           color: white; } }
-  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 58, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
     background-color: #b0b0b0;
     -moz-border-radius: 4px;
@@ -1411,21 +1371,25 @@ mct-container {
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    -moz-transition: background, 0.25s;
+    -o-transition: background, 0.25s;
+    -webkit-transition: background, 0.25s;
+    transition: background, 0.25s;
     text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
-    /* line 271, ../../../../general/res/sass/_mixins.scss */
+    /* line 272, ../../../../general/res/sass/_mixins.scss */
     .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
       color: #eee; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 276, ../../../../general/res/sass/_mixins.scss */
+      /* line 277, ../../../../general/res/sass/_mixins.scss */
       .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
         background: #0099cc; }
-        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        /* line 279, ../../../../general/res/sass/_mixins.scss */
         .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon, .select:not(.major):not(.disabled):hover > .icon {
           color: white; } }
-  /* line 113, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 77, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before, .pause-play.select .icon:before {
     content: "\0000F1"; }
-  /* line 116, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 80, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.pause-play.paused, .pause-play.paused.s-menu, .pause-play.paused.select {
     background-color: #ff9900;
     -moz-border-radius: 4px;
@@ -1440,18 +1404,22 @@ mct-container {
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    -moz-transition: background, 0.25s;
+    -o-transition: background, 0.25s;
+    -webkit-transition: background, 0.25s;
+    transition: background, 0.25s;
     text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
-    /* line 271, ../../../../general/res/sass/_mixins.scss */
+    /* line 272, ../../../../general/res/sass/_mixins.scss */
     .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 276, ../../../../general/res/sass/_mixins.scss */
+      /* line 277, ../../../../general/res/sass/_mixins.scss */
       .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu:not(.disabled):hover, .pause-play.paused.select:not(.disabled):hover {
         background: #ffad33; }
-        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        /* line 279, ../../../../general/res/sass/_mixins.scss */
         .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon, .pause-play.paused.select:not(.disabled):hover > .icon {
           color: white; } }
-    /* line 118, ../../../../general/res/sass/controls/_buttons.scss */
+    /* line 82, ../../../../general/res/sass/controls/_buttons.scss */
     .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
       -moz-animation-name: pulse;
       -webkit-animation-name: pulse;
@@ -1468,23 +1436,23 @@ mct-container {
       -moz-animation-timing-function: ease-in-out;
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out; }
-      /* line 120, ../../../../general/res/sass/controls/_buttons.scss */
+      /* line 84, ../../../../general/res/sass/controls/_buttons.scss */
       .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu .icon :before, .pause-play.paused.select .icon :before {
         content: "\0000EF"; }
-  /* line 128, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 92, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before, .show-thumbs.select .icon:before {
     content: "\000039"; }
 
-/* line 134, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 98, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
-  /* line 140, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 104, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .s-btn, .l-btn-set .s-menu, .l-btn-set .select {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
-  /* line 146, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 110, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .first .s-btn, .l-btn-set .first .s-menu, .l-btn-set .first .select {
     -moz-border-radius-topleft: 4px;
     -webkit-border-top-left-radius: 4px;
@@ -1493,7 +1461,7 @@ mct-container {
     -webkit-border-bottom-left-radius: 4px;
     border-bottom-left-radius: 4px;
     margin-left: 0; }
-  /* line 153, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 117, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .last .s-btn, .l-btn-set .last .s-menu, .l-btn-set .last .select {
     -moz-border-radius-topright: 4px;
     -webkit-border-top-right-radius: 4px;
@@ -1502,18 +1470,11 @@ mct-container {
     -webkit-border-bottom-right-radius: 4px;
     border-bottom-right-radius: 4px; }
 
-/*********************************** LAYOUT STYLES */
-/*
+/* line 124, ../../../../general/res/sass/controls/_buttons.scss */
+.paused:not(.s-btn):not(.s-menu):not(.select) {
+  border-color: #ff9900 !important;
+  color: #ff9900 !important; }
 
-span.s-btn,
-span.s-btn span,
-a.s-btn,
-a.s-btn span,
-a.s-btn,
-a.s-btn span {
-	display: inline-block;
-}
-*/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -1917,6 +1878,10 @@ label.checkbox.custom {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
+  -moz-transition: background, 0.25s;
+  -o-transition: background, 0.25s;
+  -webkit-transition: background, 0.25s;
+  transition: background, 0.25s;
   text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   cursor: ew-resize;
   position: absolute;
@@ -1926,7 +1891,7 @@ label.checkbox.custom {
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 271, ../../../../general/res/sass/_mixins.scss */
+  /* line 272, ../../../../general/res/sass/_mixins.scss */
   .slider .knob .icon {
     color: #eee; }
   /* line 159, ../../../../general/res/sass/_mixins.scss */
@@ -2143,7 +2108,7 @@ label.checkbox.custom {
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 344, ../../../../general/res/sass/_mixins.scss */
+      /* line 345, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
@@ -2560,7 +2525,7 @@ label.checkbox.custom {
       padding: 0 3px;
       position: relative;
       height: 150px; }
-      /* line 295, ../../../../general/res/sass/_mixins.scss */
+      /* line 296, ../../../../general/res/sass/_mixins.scss */
       .form .form-row .selector-list.error {
         background: rgba(255, 0, 0, 0.5); }
       /* line 124, ../../../../general/res/sass/forms/_elems.scss */
@@ -2617,7 +2582,7 @@ input[type="text"] {
   color: #666;
   outline: none;
   padding: 0 3px; }
-  /* line 295, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   input[type="text"].error {
     background: rgba(255, 0, 0, 0.5); }
   /* line 172, ../../../../general/res/sass/forms/_elems.scss */
@@ -2645,7 +2610,7 @@ textarea {
   position: absolute;
   height: 100%;
   width: 100%; }
-  /* line 295, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   textarea.error {
     background: rgba(255, 0, 0, 0.5); }
 
@@ -2685,11 +2650,15 @@ textarea {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none;
+  -moz-transition: background, 0.25s;
+  -o-transition: background, 0.25s;
+  -webkit-transition: background, 0.25s;
+  transition: background, 0.25s;
   text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
-  /* line 271, ../../../../general/res/sass/_mixins.scss */
+  /* line 272, ../../../../general/res/sass/_mixins.scss */
   .select .icon {
     color: #eee; }
   /* line 30, ../../../../general/res/sass/forms/_selects.scss */
@@ -2762,7 +2731,7 @@ textarea {
   max-height: 400px;
   overflow: auto;
   padding: 5px; }
-  /* line 295, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   .channel-selector .treeview.error {
     background: rgba(255, 0, 0, 0.5); }
 /* line 36, ../../../../general/res/sass/forms/_channel-selector.scss */
@@ -2919,7 +2888,7 @@ span.req {
   padding: 0 3px;
   background: white;
   border-bottom: 1px solid white; }
-  /* line 295, ../../../../general/res/sass/_mixins.scss */
+  /* line 296, ../../../../general/res/sass/_mixins.scss */
   .filter input.filter.error,
   .filter input.t-filter-input.error,
   .t-filter input.filter.error,
@@ -3715,7 +3684,10 @@ span.req {
     .search .search-bar .clear-icon,
     .search .search-bar .menu-icon {
       cursor: pointer;
-      transition: color .25s; }
+      -moz-transition: color, 0.25s;
+      -o-transition: color, 0.25s;
+      -webkit-transition: color, 0.25s;
+      transition: color, 0.25s; }
     /* line 87, ../../../../general/res/sass/search/_search.scss */
     .search .search-bar .search-input {
       position: relative;
@@ -3954,15 +3926,19 @@ span.req {
       -ms-user-select: none;
       -webkit-user-select: none;
       user-select: none;
+      -moz-transition: background, 0.25s;
+      -o-transition: background, 0.25s;
+      -webkit-transition: background, 0.25s;
+      transition: background, 0.25s;
       text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
-      /* line 271, ../../../../general/res/sass/_mixins.scss */
+      /* line 272, ../../../../general/res/sass/_mixins.scss */
       .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon, .overlay .bottom-bar .select:not(.major) .icon {
         color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-        /* line 276, ../../../../general/res/sass/_mixins.scss */
+        /* line 277, ../../../../general/res/sass/_mixins.scss */
         .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
           background: #7d7d7d; }
-          /* line 278, ../../../../general/res/sass/_mixins.scss */
+          /* line 279, ../../../../general/res/sass/_mixins.scss */
           .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover > .icon {
             color: white; } }
 /* line 85, ../../../../general/res/sass/overlay/_overlay.scss */
@@ -4041,7 +4017,7 @@ ul.tree {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none; }
-  /* line 344, ../../../../general/res/sass/_mixins.scss */
+  /* line 345, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -5294,6 +5270,10 @@ table {
     -ms-user-select: none;
     -webkit-user-select: none;
     user-select: none;
+    -moz-transition: background, 0.25s;
+    -o-transition: background, 0.25s;
+    -webkit-transition: background, 0.25s;
+    transition: background, 0.25s;
     text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
     box-sizing: border-box;
     cursor: pointer;
@@ -5303,32 +5283,32 @@ table {
     margin-bottom: 3px;
     margin-right: 3px;
     position: relative; }
-    /* line 271, ../../../../general/res/sass/_mixins.scss */
+    /* line 272, ../../../../general/res/sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
       color: #eee; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-      /* line 276, ../../../../general/res/sass/_mixins.scss */
+      /* line 277, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover {
         background: #7d7d7d; }
-        /* line 278, ../../../../general/res/sass/_mixins.scss */
+        /* line 279, ../../../../general/res/sass/_mixins.scss */
         .items-holder .item.grid-item:not(.disabled):hover > .icon {
           color: white; } }
-    /* line 46, ../../../../general/res/sass/items/_item.scss */
+    /* line 45, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: deepskyblue; }
-      /* line 48, ../../../../general/res/sass/items/_item.scss */
+      /* line 47, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link {
         color: #49dedb; }
-    /* line 52, ../../../../general/res/sass/items/_item.scss */
+    /* line 51, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-open {
       opacity: 1; }
-    /* line 57, ../../../../general/res/sass/items/_item.scss */
+    /* line 55, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .contents {
       top: 10px;
       right: 10px;
       bottom: 10px;
       left: 10px; }
-    /* line 63, ../../../../general/res/sass/items/_item.scss */
+    /* line 61, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar {
       bottom: auto;
       color: #d9d9d9;
@@ -5336,24 +5316,24 @@ table {
       line-height: 20px;
       text-align: right;
       z-index: 5; }
-      /* line 70, ../../../../general/res/sass/items/_item.scss */
+      /* line 68, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right {
         width: auto; }
-        /* line 72, ../../../../general/res/sass/items/_item.scss */
+        /* line 70, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon {
           margin-left: 3px; }
-          /* line 74, ../../../../general/res/sass/items/_item.scss */
+          /* line 72, ../../../../general/res/sass/items/_item.scss */
           .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link {
             color: #49dedb; }
-    /* line 80, ../../../../general/res/sass/items/_item.scss */
+    /* line 78, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.bottom-bar {
       top: auto;
       line-height: 110%; }
-    /* line 86, ../../../../general/res/sass/items/_item.scss */
+    /* line 83, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .item-main {
       line-height: 160px;
       z-index: 1; }
-      /* line 92, ../../../../general/res/sass/items/_item.scss */
+      /* line 89, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-type {
         overflow: false;
         position: absolute;
@@ -5363,14 +5343,13 @@ table {
         left: 40px;
         width: auto;
         height: auto;
-        color: #eee;
         text-align: center;
         font-size: 96.9px;
         line-height: 102px;
         bottom: auto;
         height: 102px;
         top: 30px; }
-        /* line 104, ../../../../general/res/sass/items/_item.scss */
+        /* line 100, ../../../../general/res/sass/items/_item.scss */
         .items-holder .item.grid-item .item-main .item-type .l-icon-link {
           color: #49dedb;
           height: auto;
@@ -5380,7 +5359,7 @@ table {
           left: 0px;
           bottom: 10px;
           z-index: 2; }
-      /* line 116, ../../../../general/res/sass/items/_item.scss */
+      /* line 111, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item .item-main .item-open {
         -moz-transition-property: "opacity";
         -o-transition-property: "opacity";
@@ -5401,14 +5380,14 @@ table {
         width: 50px;
         pointer-events: none;
         text-align: right; }
-    /* line 127, ../../../../general/res/sass/items/_item.scss */
+    /* line 121, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .title {
       text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       color: #fff; }
-    /* line 132, ../../../../general/res/sass/items/_item.scss */
+    /* line 126, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .details {
       text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       overflow: hidden;
@@ -5416,7 +5395,7 @@ table {
       white-space: nowrap;
       color: #d9d9d9;
       font-size: 0.8em; }
-    /* line 138, ../../../../general/res/sass/items/_item.scss */
+    /* line 132, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
       background-color: #0099cc;
       -moz-border-radius: 4px;
@@ -5431,21 +5410,25 @@ table {
       -ms-user-select: none;
       -webkit-user-select: none;
       user-select: none;
+      -moz-transition: background, 0.25s;
+      -o-transition: background, 0.25s;
+      -webkit-transition: background, 0.25s;
+      transition: background, 0.25s;
       text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
       color: #80dfff; }
-      /* line 271, ../../../../general/res/sass/_mixins.scss */
+      /* line 272, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
         color: #eee; }
-      /* line 143, ../../../../general/res/sass/items/_item.scss */
+      /* line 137, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) {
         color: #80dfff; }
-      /* line 144, ../../../../general/res/sass/items/_item.scss */
+      /* line 138, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .item-main .item-open {
         color: #80dfff; }
-      /* line 145, ../../../../general/res/sass/items/_item.scss */
+      /* line 139, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected .title {
         color: white; }
-      /* line 147, ../../../../general/res/sass/items/_item.scss */
+      /* line 141, ../../../../general/res/sass/items/_item.scss */
       .items-holder .item.grid-item.selected:hover .item-main .item-type {
         color: white !important; }
 
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 155e1ca892..7bb33039b7 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -67,8 +67,8 @@ $styleTelemStale: italic;
 // Bubble colors
 $colorInfoBubbleFg: #666;
 $colorInfoBubbleBg: $colorMenuBg;
-$colorThumbsBubbleFg: lighten($colorBodyFg, 10%);
-$colorThumbsBubbleBg: lighten($colorBodyBg, 10%);
+$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
 // Overlay
 $colorOvrBlocker: rgba(black, 0.7);//
@@ -81,7 +81,7 @@ $colorOvrBtnFg: #fff;
 $colorItemBg: $colorBtnBg;
 $colorItemFg: $colorBtnFg;
 $colorItemFgDetails: darken($colorItemFg, 15%);
-$colorItemIcon: $colorBtnIcon;
+$colorItemIc: $colorBtnIcon;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
 $shdwItemText: rgba(black, 0.2) 0 1px 2px;
@@ -126,4 +126,7 @@ $splitterEndCr: $splitterW;
 $colorGrippyInteriorHover: $colorBodyBg;
 
 // Mobile
-$colorMobilePaneLeft: darken($colorBodyBg, 2%);
\ No newline at end of file
+$colorMobilePaneLeft: darken($colorBodyBg, 2%);
+
+// About Screen
+$colorAboutLink: #84b3ff;
\ No newline at end of file

From 3e5d46a62b24fd846fbde6377cc4d0262828a889 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 11 Sep 2015 16:25:19 -0700
Subject: [PATCH 205/266] [Frontend] IN-PROGRESS Theme changes continuing

open #95
Limits, plots, etc.;
Misc sanding and shimming;
Updated  symbols font to replace missing
Info symbol;
---
 .../icomoon.io-WTD-symbols-project.json       | 207 ++++++++------
 .../general/res/fonts/symbols/wtdsymbols.eot  | Bin 11080 -> 11216 bytes
 .../general/res/fonts/symbols/wtdsymbols.svg  |   1 +
 .../general/res/fonts/symbols/wtdsymbols.ttf  | Bin 10904 -> 11040 bytes
 .../general/res/fonts/symbols/wtdsymbols.woff | Bin 10980 -> 11116 bytes
 .../commonUI/general/res/sass/_effects.scss   |   2 +-
 .../commonUI/general/res/sass/_limits.scss    |  48 +---
 .../general/res/sass/controls/_buttons.scss   |  10 -
 .../general/res/sass/controls/_controls.scss  |   5 +-
 .../general/res/sass/forms/_validation.scss   |  15 +-
 .../general/res/sass/items/_item.scss         |   2 +-
 .../res/sass/mobile/overlay/_overlay.scss     |   5 +
 .../general/res/sass/overlay/_overlay.scss    |   5 +
 .../general/res/sass/plots/_plots-main.scss   |  16 +-
 .../general/res/sass/user-environ/_frame.scss |   4 +-
 .../res/sass/user-environ/_layout.scss        |   1 +
 .../inspect/res/templates/info-button.html    |   1 -
 .../espresso/res/css/theme-espresso.css       | 205 ++++++--------
 .../themes/espresso/res/sass/_constants.scss  |  15 +-
 .../themes/snow/res/css/theme-snow.css        | 253 ++++++++----------
 .../themes/snow/res/sass/_constants.scss      |  25 +-
 .../features/layout/src/FixedController.js    |   3 +-
 22 files changed, 395 insertions(+), 428 deletions(-)

diff --git a/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json b/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
index d3d85f075c..7982d57200 100644
--- a/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
+++ b/platform/commonUI/general/res/fonts/symbols/icomoon.io-WTD-symbols-project.json
@@ -1,19 +1,32 @@
 {
 	"metadata": {
-		"name": "WTD Symbols v2.",
-		"lastOpened": 1441911912596,
-		"created": 1441911876817
+		"name": "WTD Symbols v24",
+		"lastOpened": 1441992412958,
+		"created": 1441992410384
 	},
 	"iconSets": [
 		{
 			"selection": [
+				{
+					"order": 86,
+					"id": 85,
+					"prevSize": 32,
+					"code": 58888,
+					"codes": [
+						58888,
+						58889,
+						58890
+					],
+					"name": "icon-info-v15",
+					"tempChar": ""
+				},
 				{
 					"order": 82,
 					"id": 84,
 					"prevSize": 32,
 					"code": 58887,
 					"name": "icon-x-in-circle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 77,
@@ -21,7 +34,7 @@
 					"prevSize": 32,
 					"code": 58881,
 					"name": "icon-datatable",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 78,
@@ -29,7 +42,7 @@
 					"prevSize": 32,
 					"code": 58882,
 					"name": "icon-tabular-scrolling",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 79,
@@ -37,7 +50,7 @@
 					"prevSize": 32,
 					"code": 58884,
 					"name": "icon-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 80,
@@ -45,7 +58,7 @@
 					"prevSize": 32,
 					"code": 58885,
 					"name": "icon-calendar",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 83,
@@ -53,7 +66,7 @@
 					"prevSize": 32,
 					"code": 58886,
 					"name": "icon-paint-bucket",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 1,
@@ -61,7 +74,7 @@
 					"prevSize": 32,
 					"code": 123,
 					"name": "icon-pointer-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 3,
@@ -69,7 +82,7 @@
 					"prevSize": 32,
 					"code": 125,
 					"name": "icon-pointer-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 4,
@@ -77,7 +90,7 @@
 					"prevSize": 32,
 					"code": 80,
 					"name": "icon-person",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 5,
@@ -85,7 +98,7 @@
 					"prevSize": 32,
 					"code": 232,
 					"name": "icon-chain-links",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 6,
@@ -93,7 +106,7 @@
 					"prevSize": 32,
 					"code": 115,
 					"name": "icon-database-in-brackets",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 7,
@@ -101,7 +114,7 @@
 					"prevSize": 32,
 					"code": 114,
 					"name": "icon-refresh",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 8,
@@ -109,7 +122,7 @@
 					"prevSize": 32,
 					"code": 108,
 					"name": "icon-lock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 9,
@@ -117,7 +130,7 @@
 					"prevSize": 32,
 					"code": 51,
 					"name": "icon-box-with-dashed-lines",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 10,
@@ -125,7 +138,7 @@
 					"prevSize": 32,
 					"code": 58880,
 					"name": "icon-box-with-arrow-cursor",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 11,
@@ -133,7 +146,7 @@
 					"prevSize": 32,
 					"code": 65,
 					"name": "icon-activity-mode",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 12,
@@ -141,7 +154,7 @@
 					"prevSize": 32,
 					"code": 97,
 					"name": "icon-activity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 13,
@@ -149,7 +162,7 @@
 					"prevSize": 32,
 					"code": 33,
 					"name": "icon-alert-rect",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 14,
@@ -157,7 +170,7 @@
 					"prevSize": 32,
 					"code": 58883,
 					"name": "icon-alert-triangle",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 15,
@@ -165,7 +178,7 @@
 					"prevSize": 32,
 					"code": 238,
 					"name": "icon-arrow-double-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 16,
@@ -173,7 +186,7 @@
 					"prevSize": 32,
 					"code": 235,
 					"name": "icon-arrow-double-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 2,
@@ -181,7 +194,7 @@
 					"prevSize": 32,
 					"code": 118,
 					"name": "icon-arrow-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 19,
@@ -189,7 +202,7 @@
 					"prevSize": 32,
 					"code": 60,
 					"name": "icon-arrow-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 20,
@@ -197,7 +210,7 @@
 					"prevSize": 32,
 					"code": 62,
 					"name": "icon-arrow-right",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 21,
@@ -205,7 +218,7 @@
 					"prevSize": 32,
 					"code": 236,
 					"name": "icon-arrow-tall-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 22,
@@ -213,7 +226,7 @@
 					"prevSize": 32,
 					"code": 237,
 					"name": "icon-arrow-tall-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 23,
@@ -221,7 +234,7 @@
 					"prevSize": 32,
 					"code": 94,
 					"name": "icon-arrow-up",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 24,
@@ -229,7 +242,7 @@
 					"prevSize": 32,
 					"code": 73,
 					"name": "icon-arrows-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 25,
@@ -237,7 +250,7 @@
 					"prevSize": 32,
 					"code": 58893,
 					"name": "icon-arrows-right-left",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 33,
@@ -245,7 +258,7 @@
 					"prevSize": 32,
 					"code": 53,
 					"name": "icon-arrows-up-down",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 26,
@@ -253,7 +266,7 @@
 					"prevSize": 32,
 					"code": 42,
 					"name": "icon-asterisk",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 27,
@@ -261,7 +274,7 @@
 					"prevSize": 32,
 					"code": 72,
 					"name": "icon-autoflow-tabular",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 28,
@@ -269,7 +282,7 @@
 					"prevSize": 32,
 					"code": 224,
 					"name": "icon-box",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 29,
@@ -277,7 +290,7 @@
 					"prevSize": 32,
 					"code": 50,
 					"name": "icon-check",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 30,
@@ -285,7 +298,7 @@
 					"prevSize": 32,
 					"code": 67,
 					"name": "icon-clock",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 31,
@@ -293,7 +306,7 @@
 					"prevSize": 32,
 					"code": 46,
 					"name": "icon-connectivity",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 32,
@@ -301,7 +314,7 @@
 					"prevSize": 32,
 					"code": 100,
 					"name": "icon-database-query",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 17,
@@ -309,7 +322,7 @@
 					"prevSize": 32,
 					"code": 68,
 					"name": "icon-database",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 35,
@@ -317,7 +330,7 @@
 					"prevSize": 32,
 					"code": 81,
 					"name": "icon-dictionary",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 36,
@@ -325,7 +338,7 @@
 					"prevSize": 32,
 					"code": 242,
 					"name": "icon-duplicate",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 37,
@@ -333,7 +346,7 @@
 					"prevSize": 32,
 					"code": 102,
 					"name": "icon-folder-new",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 38,
@@ -341,7 +354,7 @@
 					"prevSize": 32,
 					"code": 70,
 					"name": "icon-folder",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 39,
@@ -349,7 +362,7 @@
 					"prevSize": 32,
 					"code": 95,
 					"name": "icon-fullscreen-collapse",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 40,
@@ -357,7 +370,7 @@
 					"prevSize": 32,
 					"code": 122,
 					"name": "icon-fullscreen-expand",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 41,
@@ -365,7 +378,7 @@
 					"prevSize": 32,
 					"code": 71,
 					"name": "icon-gear",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 49,
@@ -373,7 +386,7 @@
 					"prevSize": 32,
 					"code": 227,
 					"name": "icon-image",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 42,
@@ -381,7 +394,7 @@
 					"prevSize": 32,
 					"code": 225,
 					"name": "icon-layers",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 43,
@@ -389,7 +402,7 @@
 					"prevSize": 32,
 					"code": 76,
 					"name": "icon-layout",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 44,
@@ -397,7 +410,7 @@
 					"prevSize": 32,
 					"code": 226,
 					"name": "icon-line-horz",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 75,
@@ -405,7 +418,7 @@
 					"prevSize": 32,
 					"code": 244,
 					"name": "icon-link",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 46,
@@ -413,7 +426,7 @@
 					"prevSize": 32,
 					"code": 88,
 					"name": "icon-magnify-in",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 47,
@@ -421,7 +434,7 @@
 					"prevSize": 32,
 					"code": 89,
 					"name": "icon-magnify-out",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 48,
@@ -429,7 +442,7 @@
 					"prevSize": 32,
 					"code": 77,
 					"name": "icon-magnify",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 34,
@@ -437,7 +450,7 @@
 					"prevSize": 32,
 					"code": 109,
 					"name": "icon-menu",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 50,
@@ -445,7 +458,7 @@
 					"prevSize": 32,
 					"code": 243,
 					"name": "icon-move",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 51,
@@ -453,7 +466,7 @@
 					"prevSize": 32,
 					"code": 121,
 					"name": "icon-new-window",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 52,
@@ -461,7 +474,7 @@
 					"prevSize": 32,
 					"code": 111,
 					"name": "icon-object",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 73,
@@ -469,7 +482,7 @@
 					"prevSize": 32,
 					"code": 63,
 					"name": "icon-object-unknown",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 53,
@@ -477,7 +490,7 @@
 					"prevSize": 32,
 					"code": 86,
 					"name": "icon-packet",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 54,
@@ -485,7 +498,7 @@
 					"prevSize": 32,
 					"code": 234,
 					"name": "icon-page",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 55,
@@ -493,7 +506,7 @@
 					"prevSize": 32,
 					"code": 241,
 					"name": "icon-pause",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 56,
@@ -501,7 +514,7 @@
 					"prevSize": 32,
 					"code": 112,
 					"name": "icon-pencil",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 65,
@@ -509,7 +522,7 @@
 					"prevSize": 32,
 					"code": 79,
 					"name": "icon-people",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 57,
@@ -517,7 +530,7 @@
 					"prevSize": 32,
 					"code": 239,
 					"name": "icon-play",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 58,
@@ -525,7 +538,7 @@
 					"prevSize": 32,
 					"code": 233,
 					"name": "icon-plot-resource",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 59,
@@ -533,7 +546,7 @@
 					"prevSize": 32,
 					"code": 43,
 					"name": "icon-plus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 60,
@@ -541,7 +554,7 @@
 					"prevSize": 32,
 					"code": 45,
 					"name": "icon-minus",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 61,
@@ -549,7 +562,7 @@
 					"prevSize": 32,
 					"code": 54,
 					"name": "icon-sine",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 62,
@@ -557,7 +570,7 @@
 					"prevSize": 32,
 					"code": 228,
 					"name": "icon-T",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 63,
@@ -565,7 +578,7 @@
 					"prevSize": 32,
 					"code": 116,
 					"name": "icon-telemetry-panel",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 64,
@@ -573,7 +586,7 @@
 					"prevSize": 32,
 					"code": 84,
 					"name": "icon-telemetry",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 18,
@@ -581,7 +594,7 @@
 					"prevSize": 32,
 					"code": 246,
 					"name": "icon-thumbs-strip",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 67,
@@ -589,7 +602,7 @@
 					"prevSize": 32,
 					"code": 83,
 					"name": "icon-timeline",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 68,
@@ -597,7 +610,7 @@
 					"prevSize": 32,
 					"code": 245,
 					"name": "icon-timer",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 69,
@@ -605,7 +618,7 @@
 					"prevSize": 32,
 					"code": 90,
 					"name": "icon-trash",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 70,
@@ -613,7 +626,7 @@
 					"prevSize": 32,
 					"code": 229,
 					"name": "icon-two-parts-both",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 71,
@@ -621,7 +634,7 @@
 					"prevSize": 32,
 					"code": 231,
 					"name": "icon-two-parts-one-only",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 72,
@@ -629,7 +642,7 @@
 					"prevSize": 32,
 					"code": 120,
 					"name": "icon-x-heavy",
-					"tempChar": ""
+					"tempChar": ""
 				},
 				{
 					"order": 66,
@@ -637,7 +650,7 @@
 					"prevSize": 32,
 					"code": 58946,
 					"name": "icon-x",
-					"tempChar": ""
+					"tempChar": ""
 				}
 			],
 			"id": 2,
@@ -652,6 +665,27 @@
 			"height": 1024,
 			"prevSize": 32,
 			"icons": [
+				{
+					"id": 85,
+					"paths": [
+						"M512 0c-282.8 0-512 229.2-512 512s229.2 512 512 512 512-229.2 512-512-229.2-512-512-512zM512 128c70.6 0 128 57.4 128 128s-57.4 128-128 128c-70.6 0-128-57.4-128-128s57.4-128 128-128zM704 832h-384v-128h64v-256h256v256h64v128z"
+					],
+					"attrs": [
+						{
+							"fill": "rgb(0, 0, 0)"
+						}
+					],
+					"isMulticolor": false,
+					"grid": 0,
+					"tags": [
+						"icon-info-v1.5"
+					],
+					"colorPermutations": {
+						"125525525516161751": [
+							0
+						]
+					}
+				},
 				{
 					"id": 84,
 					"paths": [
@@ -2052,6 +2086,12 @@
 						161,
 						75,
 						1
+					],
+					[
+						255,
+						255,
+						255,
+						1
 					]
 				]
 			],
@@ -14813,5 +14853,6 @@
 		"gridSize": 16,
 		"showLiga": false
 	},
-	"uid": -1
+	"uid": -1,
+	"time": 1441993324496
 }
\ No newline at end of file
diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot
index 2a2e64b1135a274e4a810f545e0b1afdbb79c58e..95887455fe74465bcec2c835663ff125999ddb60 100755
GIT binary patch
delta 403
zcmX>Rb|IYYf;Iz#g7!o<GnS7JXPlYnFtPsB`{N7@j50uMlb%>yz`(#Dz`(#10i-$7
zb1Kswf4kQS<R>sNsMKVnCZ@3aALnIYP`d+^H_HGDupeL%WnfSj0rFKca!V?l*ja>u
zd<&p?0Xg}}i8arQqZk-8I)L)4auX{G7?K#u85lH8fP96##N1Q~`73YZfC3>v4XX<B
zi%S@ofl>_G43je$Pcm{$He%{#c9jy`e1NG{xgIF>{{RaE^8p4C21N!fpcW-QCQ%VN
zCSxNzCQ}nVCS_40F;NjVWhFIJ6EkCBMN?xzML}axCWfrt-2nmJyR%@lskgT&2p{;@
z;K0b>z<dB%5~QdBB5&&b*P(%t;XgwI&{30J)Go-Jnep&rJipCX25uIRLm4hf9CU-x
xlMU3(8ACQ_sCzR`UazrA{FdMcAv>TXBM^r$lrjKA4hWbgUt|*AT(5bO5dh|oZ0rC4

delta 257
zcmcZ*ej<#`Lz{tNhSo$jGnQT@`zI3}Cf1*Le~f{FQ3i-@(i4jd7#J7?7#Nr$fHX&X
zPGwr&L`^OrKY@Wk`A<e_VhX!&oHGN1S`1L$ECVROet<;;$e#k_t7PPsRM@ez2m|>$
zfadw+<R>R))fZ<lFlev<<yYh;RunKKGL!@PYk+)(yu{p83Hd8;<A4HZfErd6<QJDP
zFaxC+v??ZNFrH*&pKQd`&Fms2u=xN}tMcTdYUgF1*emtM^V@u7;0Bq=z;H>t=OK)q
iyg}WZF?jO}b#KPW=9<emHwgY?U<67AZ+@luj1d4^PDPmj

diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
index 537244cfe9..596a5dd3e9 100755
--- a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
+++ b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.svg
@@ -84,6 +84,7 @@
 <glyph unicode="&#xe605;" glyph-name="icon-calendar" d="M896 960h-768c-70.4 0-128-57.6-128-128v-768c0-70.4 57.6-128 128-128h768c70.4 0 128 57.6 128 128v768c0 70.4-57.6 128-128 128zM640 512h-256v192h256v-192zM384 448h256v-192h-256v192zM320 256h-256v192h256v-192zM320 704v-192h-256v192h256zM128 0c-17 0-33 6.6-45.2 18.8s-18.8 28.2-18.8 45.2v128h256v-192h-192zM384 0v192h256v-192h-256zM960 64c0-17-6.6-33-18.8-45.2s-28.2-18.8-45.2-18.8h-192v192h256v-128zM960 256h-256v192h256v-192zM960 512h-256v192h256v-192z" />
 <glyph unicode="&#xe606;" glyph-name="icon-paint-bucket" d="M544 736v-224c0-88.4-71.6-160-160-160s-160 71.6-160 160v97.2l-197.4-196.4c-50-50-12.4-215.2 112.4-340s290-162.4 340-112.4l417 423.6-352 352zM896-64c70.6 0 128 57.4 128 128 0 108.6-128 192-128 192s-128-83.4-128-192c0-70.6 57.4-128 128-128zM384 448c-35.4 0-64 28.6-64 64v384c0 35.4 28.6 64 64 64s64-28.6 64-64v-384c0-35.4-28.6-64-64-64z" />
 <glyph unicode="&#xe607;" glyph-name="icon-x-in-circle" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM832 256l-128-128-192 192-192-192-128 128 192 192-192 192 128 128 192-192 192 192 128-128-192-192 192-192z" />
+<glyph unicode="&#xe608;" glyph-name="icon-info-v15" d="M512 960c-282.8 0-512-229.2-512-512s229.2-512 512-512 512 229.2 512 512-229.2 512-512 512zM512 832c70.6 0 128-57.4 128-128s-57.4-128-128-128c-70.6 0-128 57.4-128 128s57.4 128 128 128zM704 128h-384v128h64v256h256v-256h64v-128z" />
 <glyph unicode="&#xe60d;" glyph-name="icon-arrows-right-left" d="M1024 448l-448-512v1024zM448 960l-448-512 448-512z" />
 <glyph unicode="&#xe642;" glyph-name="icon-x" d="M384 448l-365.332-365.332c-24.89-24.89-24.89-65.62 0-90.51l37.49-37.49c24.89-24.89 65.62-24.89 90.51 0 0 0 365.332 365.332 365.332 365.332l365.332-365.332c24.89-24.89 65.62-24.89 90.51 0l37.49 37.49c24.89 24.89 24.89 65.62 0 90.51l-365.332 365.332c0 0 365.332 365.332 365.332 365.332 24.89 24.89 24.89 65.62 0 90.51l-37.49 37.49c-24.89 24.89-65.62 24.89-90.51 0 0 0-365.332-365.332-365.332-365.332l-365.332 365.332c-24.89 24.89-65.62 24.89-90.51 0l-37.49-37.49c-24.89-24.89-24.89-65.62 0-90.51 0 0 365.332-365.332 365.332-365.332z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf
index 58e64c53678026014601c92d6a9ece8d2b741c23..8f0f1d96108c2bb7c738154e5049a7a1c1e23b29 100755
GIT binary patch
delta 386
zcmbOcx*%+VV*RQ2#~BzHWq{ZwJ+Ziefq_AQfq^LkNOPp;RHi-tcCQo2PhenBsmVx9
zOkwvw&db1{b_XbLmH`xCKfof&z@RPy<f~-lmQ*;gvj_wE7C`d?a`KZCYn~TJF)(O!
z0OeQZCRP+MBr%jTFld?p`3iZ7xv3KJSKh_}1ww!tRu$wImoP8`r5LmsChj=N$T7Kz
zv76adN^r9PQ>$`4Q0D&u76#@63?dAQ3|c@PN_<SBB63W|Ms`f5CVEWDqDEq(B5cY^
zYNjS;#=?rG#)681#-dCNS-ZOf0=jo+!Dv%&Z&MIH@UOvvk->ra0J0=VQ3FKY)cdbP
z10%zKh6bRUCQnhlAaiEM!;kU&HeVUISwQY&xFm7V4MtCHP%~!?*}Ox|n{o1g^;P1x
f1V0Gb0VNrMIE0~;0T^&Vz%*HrNqF;ljgyQ35%OnE

delta 239
zcmZ1wHY0R`V*QEt#~2tGWq{ZwJ+Ziefq_AQfq^LkNOPp;RHo%k)Z_y46Brnj|74^l
zrm*|QIWsV*#Q^2aGJpc?2UtXa{3$@bN=9x;g&jMKFp$3kXr50_esW?~eQ^c@g9Zyw
zenoC#MFB%1LphMY2FO>)OUzA`kiYUa4k&O2s9{w>esKu{Gf;{_t777glZ@<>n;5&9
zU8Dpy3ox}RPZm`>FZ0A+sW+bA<|_j?$Vdi;OX58bVe}+*bH?D!7V6%NliM|xac&U&
P$G`}b3*Ky{`HT?&-qSuJ

diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff
index 182bd9fd8191af7d5b8153bea69b6ff84de8235f..d5bc74071ceb1fb9c17b2bc85141299efb8aa372 100755
GIT binary patch
delta 428
zcmaD7`X)@Q+~3WOfsp|Sv~w7^!L$Mc)8s@Zv57jW^{3t+Pfsi^U|?Wc0+ix_VuAFW
z$~2(Z8U_ZH8W4W`?Ota_YGMilgSrM#jTs2D`yc1c015)d5`cUa5N1EXBASs~QUMfe
zVPIek0AVL~7U7)yWS}~YD?l}?K)B|4aa3+%MS%_jgJuIzKmm-C7|Qb!b5nt03xFDd
z3K>_)UwIo>kY8K^biL2SKNlG}CZA*MW_OhmWMF1s1bV_{^AaXo<$7iYhW`gx7?=+*
zh%hKJXaRL9@iB>t$T1lk*)f@#=rJja8i|RDuqi94nVOgx3oDu$3n~g4i!w1}?d}c;
z=-!<LqfNcNO+om;zXk_J1_$N?$dVvM4G?)#@4pTWj12!78h}op{6O`B%$XSvKgRRh
zd}ZKf0SYlNT#`8G2BRmRQ8Q-@+03Hu%{bXxV-@c$!4E=qKuJ)%glzt&@r)4w!TfLY

delta 310
zcmaD8_9RrS+~3WOfsp|Sw4N|<gXtLzOp_Ct#3t&f)}MHPEIqNffPsN&2~dgyiUrbh
zD${^sYZw@m|A27bL`|-Y)Wj492DKGHHD(~p?i=Tv0Tcv^Jpl4mK$!gii%3RpNd*Ig
zItv2>qYnt%v9k#0<R=5wX#@b(fb_4(sxQvSO{^%;0Sf*A3MhbaB13szVs0t}gQf&f
z<0=rAzw$P&AiuZ-==viQ|6F8bpL~w7o83i9fPtBT5$Fk*%}bbUl_w{votJrHuhbjQ
zZ}XLb8)!8UToUhj2%{(asGBneZ*EcdW}JLkW0~*<!GGW|31%o|;03D&g^2Lx#hND>
E0Vy|39RL6T

diff --git a/platform/commonUI/general/res/sass/_effects.scss b/platform/commonUI/general/res/sass/_effects.scss
index ddade4e965..d0dbb2659a 100644
--- a/platform/commonUI/general/res/sass/_effects.scss
+++ b/platform/commonUI/general/res/sass/_effects.scss
@@ -52,7 +52,7 @@ a.disabled {
 }
 
 @include keyframes(pulse) {
-	0%   { opacity: 0.2; }
+	0%   { opacity: 0.5; }
 	100% { opacity: 1; }
 }
 
diff --git a/platform/commonUI/general/res/sass/_limits.scss b/platform/commonUI/general/res/sass/_limits.scss
index 4a9971edba..12411554cd 100644
--- a/platform/commonUI/general/res/sass/_limits.scss
+++ b/platform/commonUI/general/res/sass/_limits.scss
@@ -1,52 +1,26 @@
-@mixin limit($c, $glyph) {
-	background: $c;
+@mixin limit($bg, $ic, $glyph) {
+	background: $bg !important;
+	//color: $fg !important;
 	&:before {
-		//@include pulse(500ms);
-		color: lighten($c, 30%);
+		//@include pulse(1000ms);
+		color: $ic;
 		content: $glyph;
 	}
 }
 
-/*.s-limit-upr,
-.s-limit-lwr {
-	$a: 0.5;
-	$l: 30%;
-	white-space: nowrap;
-	&:before {
-		display: inline-block;
-		font-family: symbolsfont;
-		font-size: 0.85em;
-		font-style: normal !important;
-		margin-right: $interiorMarginSm;
-		vertical-align: middle;
-	}
-}
-
-.s-limit-upr {
-	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ed"); }
-	&.s-limit-red { @include limit($colorLimitRed, "\0000eb"); }
-}
-
-.s-limit-lwr {
-	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ec"); }
-	&.s-limit-red { @include limit($colorLimitRed, "\0000ee"); }
-}*/
-
 [class*="s-limit"] {
-	$a: 0.5;
-	$l: 30%;
-	white-space: nowrap;
+	//white-space: nowrap;
 	&:before {
 		display: inline-block;
 		font-family: symbolsfont;
-		font-size: 0.85em;
+		font-size: 0.75em;
 		font-style: normal !important;
 		margin-right: $interiorMarginSm;
 		vertical-align: middle;
 	}
 }
 
-.s-limit-upr-red { @include limit($colorLimitRed, "\0000eb"); };
-.s-limit-upr-yellow { @include limit($colorLimitYellow, "\0000ed"); };
-.s-limit-lwr-yellow { @include limit($colorLimitYellow, "\0000ec"); };
-.s-limit-lwr-red { @include limit($colorLimitRed, "\0000ee"); };
\ No newline at end of file
+.s-limit-upr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000eb"); };
+.s-limit-upr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ed"); };
+.s-limit-lwr-yellow { @include limit($colorLimitYellowBg, $colorLimitYellowIc, "\0000ec"); };
+.s-limit-lwr-red { @include limit($colorLimitRedBg, $colorLimitRedIc, "\0000ee"); };
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
index 3340d188bd..c81e24c4e4 100644
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -63,16 +63,6 @@ $pad: $interiorMargin * $baseRatio;
 
     }
 
-    //&.paused {
-    //    @include btnSubtle($colorPausedBg, lighten($colorPausedBg, 10%), $colorPausedFg, $colorPausedFg);
-    //    .icon {
-    //        @include pulse(500ms);
-    //        &:before {
-    //            content: "\0000EF";
-    //        }
-    //    }
-    //}
-
     &.pause-play {
         .icon:before {
             content: "\0000F1";
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index 0933362797..af967d6ef3 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -154,7 +154,7 @@ label.checkbox.custom {
 		min-width: $d;
 		&:before {
 			@include border-radius($basicCr * .75);
-			//background: $bg;
+			background: $bg;
 			//border-bottom: 1px solid lighten($bg, 10%);
 			@include box-shadow(inset rgba(black, 0.4) 0 1px 2px);
 			box-sizing: border-box;
@@ -241,7 +241,7 @@ label.checkbox.custom {
 	//}
 
 	> .type-icon {
-		color: $colorObjHdrIcon;
+		color: $colorObjHdrIc;
 		font-size: 120%;
 		float: left;
 		margin-right: $interiorMargin;
@@ -264,6 +264,7 @@ label.checkbox.custom {
 
 	.title-label {
 		//@include test(green, 0.9);
+		color: $colorObjHdrTxt;
 		@include ellipsize();
 		//color: pushBack($colorBodyFg, 40%);
 		@include webkitProp(flex, '0 1 auto');
diff --git a/platform/commonUI/general/res/sass/forms/_validation.scss b/platform/commonUI/general/res/sass/forms/_validation.scss
index 07f15cb660..e82a7fdd3a 100644
--- a/platform/commonUI/general/res/sass/forms/_validation.scss
+++ b/platform/commonUI/general/res/sass/forms/_validation.scss
@@ -21,22 +21,11 @@
  *****************************************************************************/
 .validates {
     > .label {
-        //        @include test(green, 0.1);
-        padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element
+        padding-right: $reqSymbolM; // Keep room for validation element
         &::after {
-            //            @include test(yellow, 0.3);
-/*            display: block;
-            position: absolute;
-            top: 0;
-            right: $reqSymbolM;
-            bottom: 0;
-            left: auto;
-            height: auto;
-            width: $reqSymbolW;*/
+	        float: right;
             font-family: symbolsfont;
             font-size: $reqSymbolFontSize;
-            //text-align: right;
-            //vertical-align: middle;
         }
     }
     &.invalid,
diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss
index 5587d43da3..9e5fe1cf47 100644
--- a/platform/commonUI/general/res/sass/items/_item.scss
+++ b/platform/commonUI/general/res/sass/items/_item.scss
@@ -32,7 +32,7 @@
             $iconMargin: 40px;
             $iconD: ($d - ($iconMargin * 2)) * 0.85;
             $transTime: 200ms;
-            @include btnSubtle($colorItemBg, pullForward($colorItemBg, 20%), $colorItemFg, $colorItemIc);
+            @include btnSubtle($colorItemBg, $colorItemBgHov, $colorItemFg, $colorItemIc);
             box-sizing: border-box;
             cursor: pointer;
             float: left;
diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
index 2c455a9941..caa6df0967 100644
--- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss
@@ -47,5 +47,10 @@
             float: none;
             width: 100%;
         }
+	    > .label {
+		    &:after {
+			    float: none;
+		    }
+	    }
     }
 }
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss
index 54694d90eb..2dce492563 100644
--- a/platform/commonUI/general/res/sass/overlay/_overlay.scss
+++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss
@@ -89,5 +89,10 @@
 	    bottom: $myM;
 	    left: $myM;
         overflow: auto;
+	    .field.l-med {
+		    input[type='text'] {
+			    width: 100%;
+		    }
+	    }
     }
 }
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss
index 9845c4d4be..67acb46e28 100644
--- a/platform/commonUI/general/res/sass/plots/_plots-main.scss
+++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss
@@ -23,8 +23,8 @@ $yBarW: 60px;
 $yLabelW: auto;
 $xBarH: 32px;
 $legendH: 20px;
-$colorHash: rgba(white, 0.3);
-$styleHash: dashed;
+//$colorHash: rgba(white, 0.3); // MOVED INTO CONSTANTS
+//$styleHash: dashed; // MOVED INTO CONSTANTS
 $swatchD: 8px;
 $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBarW); // Top, right, bottom, left
 
@@ -83,7 +83,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 		bottom: nth($plotDisplayArea, 3);
 		left: nth($plotDisplayArea, 4);
 		cursor: crosshair;
-		border: 1px solid $colorInteriorBorder;
+		border: 1px solid $colorPlotAreaBorder;
 	}
 
 	.gl-plot-label,
@@ -133,7 +133,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 	.gl-plot-hash {
 		position: absolute;
-		border: 0 $colorHash $styleHash;
+		border: 0 $colorPlotHash $stylePlotHash;
 		&.hash-v {
 			border-right-width: 1px;
 			height: 100%;
@@ -173,8 +173,8 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 		height: auto;
 		z-index: 0;
-		&.s-limit-yellow { @include limitBg($colorLimitYellow); }
-		&.s-limit-red { @include limitBg($colorLimitRed); }
+		&.s-limit-yellow { @include limitBg($colorLimitYellowBg); }
+		&.s-limit-red { @include limitBg($colorLimitRedBg); }
 	}
 
 	.l-oob-data {
@@ -218,7 +218,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 		}
 		&[class*='s-limit'] {
 			.title-label {
-				color: #fff;
+				//color: #fff;
 			}
 		}
 	}
@@ -241,7 +241,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 
 .tick {
 	position: absolute;
-	border: 0 $colorHash solid;
+	border: 0 $colorPlotHash solid;
 	&.tick-x {
 		border-right-width: 1px;
 		height: 100%; // Assumption is that the tick will be in a holder that will set it's height;
diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss
index d5217017ea..6b993f9075 100644
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -47,10 +47,12 @@
 	}
 	&.frame-template {
 		.view-switcher {
-			font-size: 80%;
 			height: $ohH;
 			line-height: $ohH;
 			z-index: 10;
+			> span {
+				font-size: 0.7rem;
+			}
 		}
 		// Hide the view switcher by default when it's in an element that's in a frame context
 		// Frame template is used because we need to target the lowest nested frame
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index b304a8e8db..4661c47214 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -341,6 +341,7 @@
 	.left {
 		//@include test(red);
 		@include webkitProp(flex, '1 1 0');
+		padding-right: $interiorMarginLg;
 	}
 }
 
diff --git a/platform/commonUI/inspect/res/templates/info-button.html b/platform/commonUI/inspect/res/templates/info-button.html
index f41d48262b..fce10450ff 100644
--- a/platform/commonUI/inspect/res/templates/info-button.html
+++ b/platform/commonUI/inspect/res/templates/info-button.html
@@ -22,4 +22,3 @@
 
 <!--The icon for the info button appearing in a grid item (list in folder)-->
 <a class='ui-symbol icon mobile-info'>&#xe608;</a>
-
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index eed02ecff8..6eac93ae8b 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -272,17 +272,17 @@ a.disabled {
 
 @-moz-keyframes pulse {
   0% {
-    opacity: 0.2; }
+    opacity: 0.5; }
   100% {
     opacity: 1; } }
 @-webkit-keyframes pulse {
   0% {
-    opacity: 0.2; }
+    opacity: 0.5; }
   100% {
     opacity: 1; } }
 @keyframes pulse {
   0% {
-    opacity: 0.2; }
+    opacity: 0.5; }
   100% {
     opacity: 1; } }
 /* line 69, ../../../../general/res/sass/_effects.scss */
@@ -661,72 +661,45 @@ mct-container {
     color: #ff3c00;
     content: "!"; }
 
-/*.s-limit-upr,
-.s-limit-lwr {
-	$a: 0.5;
-	$l: 30%;
-	white-space: nowrap;
-	&:before {
-		display: inline-block;
-		font-family: symbolsfont;
-		font-size: 0.85em;
-		font-style: normal !important;
-		margin-right: $interiorMarginSm;
-		vertical-align: middle;
-	}
-}
+/* line 13, ../../../../general/res/sass/_limits.scss */
+[class*="s-limit"]:before {
+  display: inline-block;
+  font-family: symbolsfont;
+  font-size: 0.75em;
+  font-style: normal !important;
+  margin-right: 3px;
+  vertical-align: middle; }
 
-.s-limit-upr {
-	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ed"); }
-	&.s-limit-red { @include limit($colorLimitRed, "\0000eb"); }
-}
-
-.s-limit-lwr {
-	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ec"); }
-	&.s-limit-red { @include limit($colorLimitRed, "\0000ee"); }
-}*/
-/* line 35, ../../../../general/res/sass/_limits.scss */
-[class*="s-limit"] {
-  white-space: nowrap; }
-  /* line 39, ../../../../general/res/sass/_limits.scss */
-  [class*="s-limit"]:before {
-    display: inline-block;
-    font-family: symbolsfont;
-    font-size: 0.85em;
-    font-style: normal !important;
-    margin-right: 3px;
-    vertical-align: middle; }
-
-/* line 49, ../../../../general/res/sass/_limits.scss */
+/* line 23, ../../../../general/res/sass/_limits.scss */
 .s-limit-upr-red {
-  background: #aa0000; }
-  /* line 3, ../../../../general/res/sass/_limits.scss */
+  background: rgba(255, 0, 0, 0.3) !important; }
+  /* line 4, ../../../../general/res/sass/_limits.scss */
   .s-limit-upr-red:before {
-    color: #ff4444;
+    color: red;
     content: "ë"; }
 
-/* line 50, ../../../../general/res/sass/_limits.scss */
+/* line 24, ../../../../general/res/sass/_limits.scss */
 .s-limit-upr-yellow {
-  background: #9d7500; }
-  /* line 3, ../../../../general/res/sass/_limits.scss */
+  background: rgba(255, 170, 0, 0.3) !important; }
+  /* line 4, ../../../../general/res/sass/_limits.scss */
   .s-limit-upr-yellow:before {
-    color: #ffcc37;
+    color: #ffaa00;
     content: "í"; }
 
-/* line 51, ../../../../general/res/sass/_limits.scss */
+/* line 25, ../../../../general/res/sass/_limits.scss */
 .s-limit-lwr-yellow {
-  background: #9d7500; }
-  /* line 3, ../../../../general/res/sass/_limits.scss */
+  background: rgba(255, 170, 0, 0.3) !important; }
+  /* line 4, ../../../../general/res/sass/_limits.scss */
   .s-limit-lwr-yellow:before {
-    color: #ffcc37;
+    color: #ffaa00;
     content: "ì"; }
 
-/* line 52, ../../../../general/res/sass/_limits.scss */
+/* line 26, ../../../../general/res/sass/_limits.scss */
 .s-limit-lwr-red {
-  background: #aa0000; }
-  /* line 3, ../../../../general/res/sass/_limits.scss */
+  background: rgba(255, 0, 0, 0.3) !important; }
+  /* line 4, ../../../../general/res/sass/_limits.scss */
   .s-limit-lwr-red:before {
-    color: #ff4444;
+    color: red;
     content: "î"; }
 
 /* line 1, ../../../../general/res/sass/_data-status.scss */
@@ -1407,10 +1380,10 @@ mct-container {
         /* line 279, ../../../../general/res/sass/_mixins.scss */
         .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon, .select:not(.major):not(.disabled):hover > .icon {
           color: #33ccff; } }
-  /* line 77, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 67, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before, .pause-play.select .icon:before {
     content: "\0000F1"; }
-  /* line 80, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 70, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.pause-play.paused, .pause-play.paused.s-menu, .pause-play.paused.select {
     background-color: #c56f01;
     -moz-border-radius: 3px;
@@ -1449,7 +1422,7 @@ mct-container {
         /* line 279, ../../../../general/res/sass/_mixins.scss */
         .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon, .pause-play.paused.select:not(.disabled):hover > .icon {
           color: white; } }
-    /* line 82, ../../../../general/res/sass/controls/_buttons.scss */
+    /* line 72, ../../../../general/res/sass/controls/_buttons.scss */
     .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
       -moz-animation-name: pulse;
       -webkit-animation-name: pulse;
@@ -1466,23 +1439,23 @@ mct-container {
       -moz-animation-timing-function: ease-in-out;
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out; }
-      /* line 84, ../../../../general/res/sass/controls/_buttons.scss */
+      /* line 74, ../../../../general/res/sass/controls/_buttons.scss */
       .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu .icon :before, .pause-play.paused.select .icon :before {
         content: "\0000EF"; }
-  /* line 92, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 82, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before, .show-thumbs.select .icon:before {
     content: "\000039"; }
 
-/* line 98, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 88, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
-  /* line 104, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .s-btn, .l-btn-set .s-menu, .l-btn-set .select {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
-  /* line 110, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 100, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .first .s-btn, .l-btn-set .first .s-menu, .l-btn-set .first .select {
     -moz-border-radius-topleft: 3px;
     -webkit-border-top-left-radius: 3px;
@@ -1491,7 +1464,7 @@ mct-container {
     -webkit-border-bottom-left-radius: 3px;
     border-bottom-left-radius: 3px;
     margin-left: 0; }
-  /* line 117, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 107, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .last .s-btn, .l-btn-set .last .s-menu, .l-btn-set .last .select {
     -moz-border-radius-topright: 3px;
     -webkit-border-top-right-radius: 3px;
@@ -1500,7 +1473,7 @@ mct-container {
     -webkit-border-bottom-right-radius: 3px;
     border-bottom-right-radius: 3px; }
 
-/* line 124, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 114, ../../../../general/res/sass/controls/_buttons.scss */
 .paused:not(.s-btn):not(.s-menu):not(.select) {
   border-color: #c56f01 !important;
   color: #c56f01 !important; }
@@ -1739,6 +1712,7 @@ label.checkbox.custom {
       -moz-border-radius: 1.5px;
       -webkit-border-radius: 1.5px;
       border-radius: 1.5px;
+      background: #4d4d4d;
       -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
       -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
       box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
@@ -1842,19 +1816,20 @@ label.checkbox.custom {
     margin-right: 5px; }
   /* line 265, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .title-label {
+    color: #999;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 0 1 auto;
     -webkit-flex: 0 1 auto;
     padding-right: 0.35em; }
-  /* line 274, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 275, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .context-available {
     font-size: 0.7em;
     flex: 0 0 1;
     -webkit-flex: 0 0 1; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 281, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 282, ../../../../general/res/sass/controls/_controls.scss */
     .object-header .context-available {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -1869,12 +1844,12 @@ label.checkbox.custom {
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       opacity: 0; }
-    /* line 286, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 287, ../../../../general/res/sass/controls/_controls.scss */
     .object-header:hover .context-available {
       opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 299, ../../../../general/res/sass/controls/_controls.scss */
+/* line 300, ../../../../general/res/sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -1893,7 +1868,7 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 310, ../../../../general/res/sass/controls/_controls.scss */
+/* line 311, ../../../../general/res/sass/controls/_controls.scss */
 .slider .knob {
   background-color: #333;
   -moz-border-radius: 3px;
@@ -1979,12 +1954,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #0099cc; }
-  /* line 321, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 322, ../../../../general/res/sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 328, ../../../../general/res/sass/controls/_controls.scss */
+/* line 329, ../../../../general/res/sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -1995,13 +1970,13 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 338, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 339, ../../../../general/res/sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 347, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 348, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2016,7 +1991,7 @@ label.checkbox.custom {
     height: 10px;
     width: 10px; }
 
-  /* line 356, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 357, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -2030,7 +2005,7 @@ label.checkbox.custom {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box; }
-    /* line 365, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 366, ../../../../general/res/sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -2039,7 +2014,7 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#5e5e5e, #525252 20px);
       background-image: linear-gradient(#5e5e5e, #525252 20px); }
 
-  /* line 370, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 371, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
@@ -2878,37 +2853,30 @@ textarea {
  *****************************************************************************/
 /* line 23, ../../../../general/res/sass/forms/_validation.scss */
 .validates > .label {
-  padding-right: 25px; }
-  /* line 26, ../../../../general/res/sass/forms/_validation.scss */
+  padding-right: 10px; }
+  /* line 25, ../../../../general/res/sass/forms/_validation.scss */
   .validates > .label::after {
-    /*            display: block;
-                position: absolute;
-                top: 0;
-                right: $reqSymbolM;
-                bottom: 0;
-                left: auto;
-                height: auto;
-                width: $reqSymbolW;*/
+    float: right;
     font-family: symbolsfont;
     font-size: 0.7em; }
-/* line 44, ../../../../general/res/sass/forms/_validation.scss */
+/* line 33, ../../../../general/res/sass/forms/_validation.scss */
 .validates.invalid > .label::after, .validates.invalid.req > .label::after {
   color: #ff3300;
   content: "x"; }
-/* line 51, ../../../../general/res/sass/forms/_validation.scss */
+/* line 40, ../../../../general/res/sass/forms/_validation.scss */
 .validates.valid > .label::after, .validates.valid.req > .label::after {
   color: #33cc33;
   content: "2"; }
-/* line 57, ../../../../general/res/sass/forms/_validation.scss */
+/* line 46, ../../../../general/res/sass/forms/_validation.scss */
 .validates.req > .label::after {
   color: #ffc700;
   content: "*"; }
 
-/* line 63, ../../../../general/res/sass/forms/_validation.scss */
+/* line 52, ../../../../general/res/sass/forms/_validation.scss */
 .req {
   font-size: 0.7em; }
 
-/* line 66, ../../../../general/res/sass/forms/_validation.scss */
+/* line 55, ../../../../general/res/sass/forms/_validation.scss */
 span.req {
   color: #ffc700; }
 
@@ -3354,9 +3322,10 @@ span.req {
   /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
-    -webkit-flex: 1 1 0; }
+    -webkit-flex: 1 1 0;
+    padding-right: 10px; }
 
-/* line 347, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -4034,6 +4003,9 @@ span.req {
   bottom: 5px;
   left: 5px;
   overflow: auto; }
+  /* line 93, ../../../../general/res/sass/overlay/_overlay.scss */
+  .overlay .contents.l-dialog .field.l-med input[type='text'] {
+    width: 100%; }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 4, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
@@ -4073,7 +4045,10 @@ span.req {
   .overlay > .holder > .contents .form.editor .contents .form-row > .controls {
     display: block;
     float: none;
-    width: 100%; } }
+    width: 100%; }
+  /* line 51, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
+  .overlay > .holder > .contents .form.editor .contents .form-row > .label:after {
+    float: none; } }
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -4373,18 +4348,20 @@ ul.tree {
   left: 5px; }
 /* line 49, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame.frame-template .view-switcher {
-  font-size: 80%;
   height: 16px;
   line-height: 16px;
   z-index: 10; }
+  /* line 53, ../../../../general/res/sass/user-environ/_frame.scss */
+  .frame.frame-template .view-switcher > span {
+    font-size: 0.7rem; }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 58, ../../../../general/res/sass/user-environ/_frame.scss */
+  /* line 60, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.frame-template .view-switcher {
     opacity: 0; }
-  /* line 61, ../../../../general/res/sass/user-environ/_frame.scss */
+  /* line 63, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.frame-template:hover .view-switcher {
     opacity: 1; } }
-/* line 69, ../../../../general/res/sass/user-environ/_frame.scss */
+/* line 71, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame .view-switcher .title-label {
   display: none; }
 
@@ -5056,7 +5033,7 @@ table {
   /* line 134, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-hash {
     position: absolute;
-    border: 0 rgba(255, 255, 255, 0.3) dashed; }
+    border: 0 rgba(255, 255, 255, 0.2) dashed; }
     /* line 137, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-hash.hash-v {
       border-right-width: 1px;
@@ -5088,10 +5065,10 @@ table {
     z-index: 0; }
     /* line 176, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-limit-bar.s-limit-yellow {
-      background: rgba(157, 117, 0, 0.2); }
+      background: rgba(255, 170, 0, 0.2); }
     /* line 177, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-limit-bar.s-limit-red {
-      background: rgba(170, 0, 0, 0.2); }
+      background: rgba(255, 0, 0, 0.2); }
   /* line 180, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .l-oob-data {
     overflow: hidden;
@@ -5153,12 +5130,6 @@ table {
     display: inline-block;
     height: 8px;
     width: 8px; }
-  /* line 220, ../../../../general/res/sass/plots/_plots-main.scss */
-  .gl-plot-legend .plot-legend-item[class*='s-limit'] .title-label,
-  .gl-plot-legend .legend-item[class*='s-limit'] .title-label,
-  .legend .plot-legend-item[class*='s-limit'] .title-label,
-  .legend .legend-item[class*='s-limit'] .title-label {
-    color: #fff; }
 
 /* line 228, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-legend .plot-legend-item {
@@ -5176,7 +5147,7 @@ table {
 /* line 242, ../../../../general/res/sass/plots/_plots-main.scss */
 .tick {
   position: absolute;
-  border: 0 rgba(255, 255, 255, 0.3) solid; }
+  border: 0 rgba(255, 255, 255, 0.2) solid; }
   /* line 245, ../../../../general/res/sass/plots/_plots-main.scss */
   .tick.tick-x {
     border-right-width: 1px;
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 04e4e9241c..c4357b8d06 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -18,7 +18,6 @@ $colorBtnFg: $colorBodyFg;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnIcon: $colorKey;
-$colorObjHdrIcon: pullForward($colorBodyFg, 20%);
 $colorInvokeMenu: #fff;
 $contrastInvokeMenuPercent: 20%;
 
@@ -33,6 +32,8 @@ $colorGridLines: rgba(#fff, 0.05);
 $colorFormLines: rgba(#fff, 0.1);
 $colorFormSectionHeader: rgba(#000, 0.2);
 $colorInvokeMenu: #fff;
+$colorObjHdrTxt: $colorBodyFg;
+$colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
 
 // Menu colors
 $colorMenuBg: pullForward($colorBodyBg, 23%);
@@ -56,12 +57,16 @@ $colorInputBg: rgba(#fff, 0.1);
 $colorInputFg: pullForward($colorBodyFg, 20%);
 $colorFormText: rgba(#fff, 0.5);
 $colorInputIcon: pushBack($colorBodyFg, 15%);
+
 // Limits and staleness colors
-$colorLimitYellow: #9d7500;
-$colorLimitRed: #aa0000;
 $colorTelemFresh: pullForward($colorBodyFg, 20%);
 $colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;
+$colorLimitYellowBg: rgba(#ffaa00, 0.3);
+$colorLimitYellowIc: #ffaa00;
+$colorLimitRedBg: rgba(red, 0.3);
+$colorLimitRedIc: red;
+
 // Bubble colors
 $colorInfoBubbleFg: #666;
 $colorInfoBubbleBg: #ddd;
@@ -77,6 +82,7 @@ $colorOvrBtnFg: #fff;
 
 // Items
 $colorItemBg: lighten($colorBodyBg, 5%);
+$colorItemBgHov: pullForward($colorItemBg, 15%);
 $colorItemFg: lighten($colorItemBg, 50%);
 $colorItemFgDetails: lighten($colorItemBg, 30%);
 $colorItemIc: $colorKey; //pullForward($colorItemFg, 20%);
@@ -96,6 +102,9 @@ $colorTabHeaderBorder: $colorBodyBg;
 // Plot
 $colorPlotBg: none;
 $colorPlotFg: $colorBodyFg;
+$colorPlotHash: rgba(white, 0.2);
+$stylePlotHash: dashed;
+$colorPlotAreaBorder: $colorInteriorBorder;
 
 // Tree
 $colorItemTreeIcon: $colorKey;
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 4ead1a5902..673b25354b 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -272,17 +272,17 @@ a.disabled {
 
 @-moz-keyframes pulse {
   0% {
-    opacity: 0.2; }
+    opacity: 0.5; }
   100% {
     opacity: 1; } }
 @-webkit-keyframes pulse {
   0% {
-    opacity: 0.2; }
+    opacity: 0.5; }
   100% {
     opacity: 1; } }
 @keyframes pulse {
   0% {
-    opacity: 0.2; }
+    opacity: 0.5; }
   100% {
     opacity: 1; } }
 /* line 69, ../../../../general/res/sass/_effects.scss */
@@ -661,72 +661,45 @@ mct-container {
     color: #ff3c00;
     content: "!"; }
 
-/*.s-limit-upr,
-.s-limit-lwr {
-	$a: 0.5;
-	$l: 30%;
-	white-space: nowrap;
-	&:before {
-		display: inline-block;
-		font-family: symbolsfont;
-		font-size: 0.85em;
-		font-style: normal !important;
-		margin-right: $interiorMarginSm;
-		vertical-align: middle;
-	}
-}
+/* line 13, ../../../../general/res/sass/_limits.scss */
+[class*="s-limit"]:before {
+  display: inline-block;
+  font-family: symbolsfont;
+  font-size: 0.75em;
+  font-style: normal !important;
+  margin-right: 3px;
+  vertical-align: middle; }
 
-.s-limit-upr {
-	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ed"); }
-	&.s-limit-red { @include limit($colorLimitRed, "\0000eb"); }
-}
-
-.s-limit-lwr {
-	&.s-limit-yellow { @include limit($colorLimitYellow, "\0000ec"); }
-	&.s-limit-red { @include limit($colorLimitRed, "\0000ee"); }
-}*/
-/* line 35, ../../../../general/res/sass/_limits.scss */
-[class*="s-limit"] {
-  white-space: nowrap; }
-  /* line 39, ../../../../general/res/sass/_limits.scss */
-  [class*="s-limit"]:before {
-    display: inline-block;
-    font-family: symbolsfont;
-    font-size: 0.85em;
-    font-style: normal !important;
-    margin-right: 3px;
-    vertical-align: middle; }
-
-/* line 49, ../../../../general/res/sass/_limits.scss */
+/* line 23, ../../../../general/res/sass/_limits.scss */
 .s-limit-upr-red {
-  background: #aa0000; }
-  /* line 3, ../../../../general/res/sass/_limits.scss */
+  background: rgba(255, 0, 0, 0.3) !important; }
+  /* line 4, ../../../../general/res/sass/_limits.scss */
   .s-limit-upr-red:before {
-    color: #ff4444;
+    color: red;
     content: "ë"; }
 
-/* line 50, ../../../../general/res/sass/_limits.scss */
+/* line 24, ../../../../general/res/sass/_limits.scss */
 .s-limit-upr-yellow {
-  background: #9d7500; }
-  /* line 3, ../../../../general/res/sass/_limits.scss */
+  background: rgba(255, 170, 0, 0.3) !important; }
+  /* line 4, ../../../../general/res/sass/_limits.scss */
   .s-limit-upr-yellow:before {
-    color: #ffcc37;
+    color: #ffaa00;
     content: "í"; }
 
-/* line 51, ../../../../general/res/sass/_limits.scss */
+/* line 25, ../../../../general/res/sass/_limits.scss */
 .s-limit-lwr-yellow {
-  background: #9d7500; }
-  /* line 3, ../../../../general/res/sass/_limits.scss */
+  background: rgba(255, 170, 0, 0.3) !important; }
+  /* line 4, ../../../../general/res/sass/_limits.scss */
   .s-limit-lwr-yellow:before {
-    color: #ffcc37;
+    color: #ffaa00;
     content: "ì"; }
 
-/* line 52, ../../../../general/res/sass/_limits.scss */
+/* line 26, ../../../../general/res/sass/_limits.scss */
 .s-limit-lwr-red {
-  background: #aa0000; }
-  /* line 3, ../../../../general/res/sass/_limits.scss */
+  background: rgba(255, 0, 0, 0.3) !important; }
+  /* line 4, ../../../../general/res/sass/_limits.scss */
   .s-limit-lwr-red:before {
-    color: #ff4444;
+    color: red;
     content: "î"; }
 
 /* line 1, ../../../../general/res/sass/_data-status.scss */
@@ -934,7 +907,7 @@ mct-container {
  *****************************************************************************/
 /* line 25, ../../../../general/res/sass/helpers/_splitter.scss */
 .split-layout .splitter {
-  background-color: #b0b0b0;
+  background-color: #969696;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
@@ -1345,7 +1318,7 @@ mct-container {
     -o-transition: background, 0.25s;
     -webkit-transition: background, 0.25s;
     transition: background, 0.25s;
-    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
+    text-shadow: none; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
     .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
       color: #fff; }
@@ -1358,7 +1331,7 @@ mct-container {
           color: white; } }
   /* line 58, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
-    background-color: #b0b0b0;
+    background-color: #969696;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
@@ -1375,7 +1348,7 @@ mct-container {
     -o-transition: background, 0.25s;
     -webkit-transition: background, 0.25s;
     transition: background, 0.25s;
-    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
+    text-shadow: none; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
     .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
       color: #eee; }
@@ -1386,10 +1359,10 @@ mct-container {
         /* line 279, ../../../../general/res/sass/_mixins.scss */
         .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon, .select:not(.major):not(.disabled):hover > .icon {
           color: white; } }
-  /* line 77, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 67, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before, .pause-play.select .icon:before {
     content: "\0000F1"; }
-  /* line 80, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 70, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.pause-play.paused, .pause-play.paused.s-menu, .pause-play.paused.select {
     background-color: #ff9900;
     -moz-border-radius: 4px;
@@ -1408,7 +1381,7 @@ mct-container {
     -o-transition: background, 0.25s;
     -webkit-transition: background, 0.25s;
     transition: background, 0.25s;
-    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
+    text-shadow: none; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
     .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
       color: #fff; }
@@ -1419,7 +1392,7 @@ mct-container {
         /* line 279, ../../../../general/res/sass/_mixins.scss */
         .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon, .pause-play.paused.select:not(.disabled):hover > .icon {
           color: white; } }
-    /* line 82, ../../../../general/res/sass/controls/_buttons.scss */
+    /* line 72, ../../../../general/res/sass/controls/_buttons.scss */
     .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
       -moz-animation-name: pulse;
       -webkit-animation-name: pulse;
@@ -1436,23 +1409,23 @@ mct-container {
       -moz-animation-timing-function: ease-in-out;
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out; }
-      /* line 84, ../../../../general/res/sass/controls/_buttons.scss */
+      /* line 74, ../../../../general/res/sass/controls/_buttons.scss */
       .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu .icon :before, .pause-play.paused.select .icon :before {
         content: "\0000EF"; }
-  /* line 92, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 82, ../../../../general/res/sass/controls/_buttons.scss */
   .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before, .show-thumbs.select .icon:before {
     content: "\000039"; }
 
-/* line 98, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 88, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
-  /* line 104, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .s-btn, .l-btn-set .s-menu, .l-btn-set .select {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
-  /* line 110, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 100, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .first .s-btn, .l-btn-set .first .s-menu, .l-btn-set .first .select {
     -moz-border-radius-topleft: 4px;
     -webkit-border-top-left-radius: 4px;
@@ -1461,7 +1434,7 @@ mct-container {
     -webkit-border-bottom-left-radius: 4px;
     border-bottom-left-radius: 4px;
     margin-left: 0; }
-  /* line 117, ../../../../general/res/sass/controls/_buttons.scss */
+  /* line 107, ../../../../general/res/sass/controls/_buttons.scss */
   .l-btn-set .last .s-btn, .l-btn-set .last .s-menu, .l-btn-set .last .select {
     -moz-border-radius-topright: 4px;
     -webkit-border-top-right-radius: 4px;
@@ -1470,7 +1443,7 @@ mct-container {
     -webkit-border-bottom-right-radius: 4px;
     border-bottom-right-radius: 4px; }
 
-/* line 124, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 114, ../../../../general/res/sass/controls/_buttons.scss */
 .paused:not(.s-btn):not(.s-menu):not(.select) {
   border-color: #ff9900 !important;
   color: #ff9900 !important; }
@@ -1709,6 +1682,7 @@ label.checkbox.custom {
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
       border-radius: 3px;
+      background: #e3e3e3;
       -moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
       -webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
       box-shadow: inset rgba(0, 0, 0, 0.4) 0 1px 2px;
@@ -1796,7 +1770,7 @@ label.checkbox.custom {
   font-size: 1em; }
   /* line 243, ../../../../general/res/sass/controls/_controls.scss */
   .object-header > .type-icon {
-    color: #666;
+    color: #b3b3b3;
     font-size: 120%;
     float: left;
     margin-right: 5px; }
@@ -1812,19 +1786,20 @@ label.checkbox.custom {
     margin-right: 5px; }
   /* line 265, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .title-label {
+    color: #666;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 0 1 auto;
     -webkit-flex: 0 1 auto;
     padding-right: 0.35em; }
-  /* line 274, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 275, ../../../../general/res/sass/controls/_controls.scss */
   .object-header .context-available {
     font-size: 0.7em;
     flex: 0 0 1;
     -webkit-flex: 0 0 1; }
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 281, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 282, ../../../../general/res/sass/controls/_controls.scss */
     .object-header .context-available {
       -moz-transition-property: opacity;
       -o-transition-property: opacity;
@@ -1839,12 +1814,12 @@ label.checkbox.custom {
       -webkit-transition-timing-function: ease-in-out;
       transition-timing-function: ease-in-out;
       opacity: 0; }
-    /* line 286, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 287, ../../../../general/res/sass/controls/_controls.scss */
     .object-header:hover .context-available {
       opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 299, ../../../../general/res/sass/controls/_controls.scss */
+/* line 300, ../../../../general/res/sass/controls/_controls.scss */
 .slider .slot {
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
@@ -1863,9 +1838,9 @@ label.checkbox.custom {
   right: 0;
   bottom: auto;
   left: 0; }
-/* line 310, ../../../../general/res/sass/controls/_controls.scss */
+/* line 311, ../../../../general/res/sass/controls/_controls.scss */
 .slider .knob {
-  background-color: #b0b0b0;
+  background-color: #969696;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
@@ -1882,7 +1857,7 @@ label.checkbox.custom {
   -o-transition: background, 0.25s;
   -webkit-transition: background, 0.25s;
   transition: background, 0.25s;
-  text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+  text-shadow: none;
   cursor: ew-resize;
   position: absolute;
   height: 100%;
@@ -1933,12 +1908,12 @@ label.checkbox.custom {
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out;
     border-color: #fcfcfc; }
-  /* line 321, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 322, ../../../../general/res/sass/controls/_controls.scss */
   .slider .knob:before {
     top: 1px;
     bottom: 3px;
     left: 5px; }
-/* line 328, ../../../../general/res/sass/controls/_controls.scss */
+/* line 329, ../../../../general/res/sass/controls/_controls.scss */
 .slider .range {
   background: rgba(0, 153, 204, 0.6);
   cursor: ew-resize;
@@ -1949,13 +1924,13 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 338, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 339, ../../../../general/res/sass/controls/_controls.scss */
   .slider .range:hover {
     background: rgba(0, 153, 204, 0.7); }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 347, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 348, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -1970,7 +1945,7 @@ label.checkbox.custom {
     height: 10px;
     width: 10px; }
 
-  /* line 356, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 357, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg5ODk4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkN2Q3ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -1984,7 +1959,7 @@ label.checkbox.custom {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box; }
-    /* line 365, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 366, ../../../../general/res/sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -1993,7 +1968,7 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#00ace6, #0099cc 20px);
       background-image: linear-gradient(#00ace6, #0099cc 20px); }
 
-  /* line 370, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 371, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.1); } }
 /*****************************************************************************
@@ -2637,7 +2612,7 @@ textarea {
  *****************************************************************************/
 /* line 22, ../../../../general/res/sass/forms/_selects.scss */
 .select {
-  background-color: #b0b0b0;
+  background-color: #969696;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
@@ -2654,7 +2629,7 @@ textarea {
   -o-transition: background, 0.25s;
   -webkit-transition: background, 0.25s;
   transition: background, 0.25s;
-  text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+  text-shadow: none;
   margin: 0 0 2px 2px;
   overflow: hidden;
   position: relative; }
@@ -2810,37 +2785,30 @@ textarea {
  *****************************************************************************/
 /* line 23, ../../../../general/res/sass/forms/_validation.scss */
 .validates > .label {
-  padding-right: 25px; }
-  /* line 26, ../../../../general/res/sass/forms/_validation.scss */
+  padding-right: 10px; }
+  /* line 25, ../../../../general/res/sass/forms/_validation.scss */
   .validates > .label::after {
-    /*            display: block;
-                position: absolute;
-                top: 0;
-                right: $reqSymbolM;
-                bottom: 0;
-                left: auto;
-                height: auto;
-                width: $reqSymbolW;*/
+    float: right;
     font-family: symbolsfont;
     font-size: 0.7em; }
-/* line 44, ../../../../general/res/sass/forms/_validation.scss */
+/* line 33, ../../../../general/res/sass/forms/_validation.scss */
 .validates.invalid > .label::after, .validates.invalid.req > .label::after {
   color: #ff2200;
   content: "x"; }
-/* line 51, ../../../../general/res/sass/forms/_validation.scss */
+/* line 40, ../../../../general/res/sass/forms/_validation.scss */
 .validates.valid > .label::after, .validates.valid.req > .label::after {
   color: #33cc33;
   content: "2"; }
-/* line 57, ../../../../general/res/sass/forms/_validation.scss */
+/* line 46, ../../../../general/res/sass/forms/_validation.scss */
 .validates.req > .label::after {
   color: #0099cc;
   content: "*"; }
 
-/* line 63, ../../../../general/res/sass/forms/_validation.scss */
+/* line 52, ../../../../general/res/sass/forms/_validation.scss */
 .req {
   font-size: 0.7em; }
 
-/* line 66, ../../../../general/res/sass/forms/_validation.scss */
+/* line 55, ../../../../general/res/sass/forms/_validation.scss */
 span.req {
   color: #0099cc; }
 
@@ -3286,9 +3254,10 @@ span.req {
   /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
-    -webkit-flex: 1 1 0; }
+    -webkit-flex: 1 1 0;
+    padding-right: 10px; }
 
-/* line 347, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -3930,7 +3899,7 @@ span.req {
       -o-transition: background, 0.25s;
       -webkit-transition: background, 0.25s;
       transition: background, 0.25s;
-      text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; }
+      text-shadow: none; }
       /* line 272, ../../../../general/res/sass/_mixins.scss */
       .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon, .overlay .bottom-bar .select:not(.major) .icon {
         color: #fff; }
@@ -3948,6 +3917,9 @@ span.req {
   bottom: 5px;
   left: 5px;
   overflow: auto; }
+  /* line 93, ../../../../general/res/sass/overlay/_overlay.scss */
+  .overlay .contents.l-dialog .field.l-med input[type='text'] {
+    width: 100%; }
 
 @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) {
   /* line 4, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
@@ -3987,7 +3959,10 @@ span.req {
   .overlay > .holder > .contents .form.editor .contents .form-row > .controls {
     display: block;
     float: none;
-    width: 100%; } }
+    width: 100%; }
+  /* line 51, ../../../../general/res/sass/mobile/overlay/_overlay.scss */
+  .overlay > .holder > .contents .form.editor .contents .form-row > .label:after {
+    float: none; } }
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -4286,18 +4261,20 @@ ul.tree {
   left: 5px; }
 /* line 49, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame.frame-template .view-switcher {
-  font-size: 80%;
   height: 16px;
   line-height: 16px;
   z-index: 10; }
+  /* line 53, ../../../../general/res/sass/user-environ/_frame.scss */
+  .frame.frame-template .view-switcher > span {
+    font-size: 0.7rem; }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 58, ../../../../general/res/sass/user-environ/_frame.scss */
+  /* line 60, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.frame-template .view-switcher {
     opacity: 0; }
-  /* line 61, ../../../../general/res/sass/user-environ/_frame.scss */
+  /* line 63, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.frame-template:hover .view-switcher {
     opacity: 1; } }
-/* line 69, ../../../../general/res/sass/user-environ/_frame.scss */
+/* line 71, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame .view-switcher .title-label {
   display: none; }
 
@@ -4970,7 +4947,7 @@ table {
   /* line 134, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-hash {
     position: absolute;
-    border: 0 rgba(255, 255, 255, 0.3) dashed; }
+    border: 0 rgba(0, 0, 0, 0.2) dashed; }
     /* line 137, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .gl-plot-hash.hash-v {
       border-right-width: 1px;
@@ -5002,10 +4979,10 @@ table {
     z-index: 0; }
     /* line 176, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-limit-bar.s-limit-yellow {
-      background: rgba(157, 117, 0, 0.2); }
+      background: rgba(255, 170, 0, 0.2); }
     /* line 177, ../../../../general/res/sass/plots/_plots-main.scss */
     .gl-plot .l-limit-bar.s-limit-red {
-      background: rgba(170, 0, 0, 0.2); }
+      background: rgba(255, 0, 0, 0.2); }
   /* line 180, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .l-oob-data {
     overflow: hidden;
@@ -5067,12 +5044,6 @@ table {
     display: inline-block;
     height: 8px;
     width: 8px; }
-  /* line 220, ../../../../general/res/sass/plots/_plots-main.scss */
-  .gl-plot-legend .plot-legend-item[class*='s-limit'] .title-label,
-  .gl-plot-legend .legend-item[class*='s-limit'] .title-label,
-  .legend .plot-legend-item[class*='s-limit'] .title-label,
-  .legend .legend-item[class*='s-limit'] .title-label {
-    color: #fff; }
 
 /* line 228, ../../../../general/res/sass/plots/_plots-main.scss */
 .gl-plot-legend .plot-legend-item {
@@ -5090,7 +5061,7 @@ table {
 /* line 242, ../../../../general/res/sass/plots/_plots-main.scss */
 .tick {
   position: absolute;
-  border: 0 rgba(255, 255, 255, 0.3) solid; }
+  border: 0 rgba(0, 0, 0, 0.2) solid; }
   /* line 245, ../../../../general/res/sass/plots/_plots-main.scss */
   .tick.tick-x {
     border-right-width: 1px;
@@ -5257,14 +5228,14 @@ table {
     top: 0; }
   /* line 29, ../../../../general/res/sass/items/_item.scss */
   .items-holder .item.grid-item {
-    background-color: #b0b0b0;
+    background-color: #ddd;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
     border-radius: 4px;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    color: #fff;
+    color: #666;
     display: inline-block;
     -moz-user-select: -moz-none;
     -ms-user-select: none;
@@ -5274,7 +5245,7 @@ table {
     -o-transition: background, 0.25s;
     -webkit-transition: background, 0.25s;
     transition: background, 0.25s;
-    text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+    text-shadow: none;
     box-sizing: border-box;
     cursor: pointer;
     float: left;
@@ -5285,14 +5256,14 @@ table {
     position: relative; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
     .items-holder .item.grid-item .icon {
-      color: #eee; }
+      color: #0099cc; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 277, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item:not(.disabled):hover {
-        background: #7d7d7d; }
+        background: #d0d0d0; }
         /* line 279, ../../../../general/res/sass/_mixins.scss */
         .items-holder .item.grid-item:not(.disabled):hover > .icon {
-          color: white; } }
+          color: #33ccff; } }
     /* line 45, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item:hover .item-main .item-type {
       color: deepskyblue; }
@@ -5311,7 +5282,7 @@ table {
     /* line 61, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .bar.top-bar {
       bottom: auto;
-      color: #d9d9d9;
+      color: #8c8c8c;
       height: 20px;
       line-height: 20px;
       text-align: right;
@@ -5374,7 +5345,7 @@ table {
         -webkit-transition-timing-function: ease-in-out;
         transition-timing-function: ease-in-out;
         opacity: 0;
-        color: #d9d9d9;
+        color: #8c8c8c;
         font-size: 3em;
         left: auto;
         width: 50px;
@@ -5382,18 +5353,18 @@ table {
         text-align: right; }
     /* line 121, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .title {
-      text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+      text-shadow: none;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      color: #fff; }
+      color: #666; }
     /* line 126, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item .details {
-      text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+      text-shadow: none;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
-      color: #d9d9d9;
+      color: #8c8c8c;
       font-size: 0.8em; }
     /* line 132, ../../../../general/res/sass/items/_item.scss */
     .items-holder .item.grid-item.selected {
@@ -5414,7 +5385,7 @@ table {
       -o-transition: background, 0.25s;
       -webkit-transition: background, 0.25s;
       transition: background, 0.25s;
-      text-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+      text-shadow: none;
       color: #80dfff; }
       /* line 272, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 7bb33039b7..770fb94e2f 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -7,7 +7,7 @@ $colorKey: #0099cc;
 $colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
-$contrastRatioPercent: 30%;
+$contrastRatioPercent: 40%;
 $basicCr: 4px;
 $controlCr: $basicCr;
 $smallCr: 3px;
@@ -18,7 +18,6 @@ $colorBtnFg: #fff;
 $colorBtnMajorBg: $colorKey;
 $colorBtnMajorFg: $colorKeyFg;
 $colorBtnIcon: #eee;
-$colorObjHdrIcon: $colorBodyFg;
 $colorInvokeMenu: #000;
 $contrastInvokeMenuPercent: 40%;
 
@@ -31,6 +30,8 @@ $colorPausedFg: #fff;
 $colorCreateBtn: $colorKey;
 $colorGridLines: rgba(#000, 0.05);
 $colorInvokeMenu: #fff;
+$colorObjHdrTxt: $colorBodyFg;
+$colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
 
 // Menu colors
 $colorMenuBg: pushBack($colorBodyBg, 10%);
@@ -58,11 +59,13 @@ $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
 
 // Limits and staleness colors//
-$colorLimitYellow: #9d7500;
-$colorLimitRed: #aa0000;
 $colorTelemFresh: pullForward($colorBodyFg, 20%);
 $colorTelemStale: pushBack($colorBodyFg, 20%);
 $styleTelemStale: italic;
+$colorLimitYellowBg: rgba(#ffaa00, 0.3);
+$colorLimitYellowIc: #ffaa00;
+$colorLimitRedBg: rgba(red, 0.3);
+$colorLimitRedIc: red;
 
 // Bubble colors
 $colorInfoBubbleFg: #666;
@@ -78,13 +81,14 @@ $colorOvrBtnBg: pullForward($colorOvrBg, 40%);
 $colorOvrBtnFg: #fff;
 
 // Items
-$colorItemBg: $colorBtnBg;
-$colorItemFg: $colorBtnFg;
-$colorItemFgDetails: darken($colorItemFg, 15%);
-$colorItemIc: $colorBtnIcon;
+$colorItemBg: #ddd;
+$colorItemBgHov: pullForward($colorItemBg, 5%);
+$colorItemFg: $colorBodyFg;
+$colorItemFgDetails: pushBack($colorItemFg, 15%);
+$colorItemIc: $colorKey;
 $colorItemSubIcons: $colorItemFgDetails;
 $colorItemOpenIcon: $colorItemFgDetails;
-$shdwItemText: rgba(black, 0.2) 0 1px 2px;
+$shdwItemText: none; //rgba(black, 0.2) 0 1px 2px;
 $colorItemBgSelected: $colorKey;
 
 // Tabular
@@ -98,6 +102,9 @@ $colorTabHeaderBorder: $colorBodyBg;
 // Plot
 $colorPlotBg: #eee;
 $colorPlotFg: $colorBodyFg;
+$colorPlotHash: rgba(black, 0.2);
+$stylePlotHash: dashed;
+$colorPlotAreaBorder: $colorInteriorBorder;
 
 // Tree
 $colorItemTreeIcon: $colorKey;
diff --git a/platform/features/layout/src/FixedController.js b/platform/features/layout/src/FixedController.js
index 410c0d2f94..3cdd676022 100644
--- a/platform/features/layout/src/FixedController.js
+++ b/platform/features/layout/src/FixedController.js
@@ -229,6 +229,7 @@ define(
             // Position a panel after a drop event
             function handleDrop(e, id, position) {
                 // Don't handle this event if it has already been handled
+			  	// color is set to "" to let the CSS theme determine the default color
                 if (e.defaultPrevented) {
                     return;
                 }
@@ -240,7 +241,7 @@ define(
                     y: Math.floor(position.y / self.gridSize[1]),
                     id: id,
                     stroke: "transparent",
-                    color: "#cccccc",
+                    color: "",
                     titled: true,
                     width: DEFAULT_DIMENSIONS[0],
                     height: DEFAULT_DIMENSIONS[1]

From a3a67068690a5799390eec897c331377b030be79 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 15 Sep 2015 12:06:35 -0700
Subject: [PATCH 206/266] [Browse] Separate out back-arrow behavior

Supports integration of changes for mobile, nasa/openmct#95
---
 platform/commonUI/browse/bundle.json          |  20 ++-
 .../browse/res/templates/back-arrow.html      |   7 +-
 .../browse/res/templates/browse-object.html   |   4 +-
 .../browse/src/BackArrowController.js         |  64 +++++++++
 .../commonUI/browse/src/BrowseController.js   |  85 +-----------
 .../browse/test/BrowseControllerSpec.js       | 130 ++----------------
 6 files changed, 100 insertions(+), 210 deletions(-)
 create mode 100644 platform/commonUI/browse/src/BackArrowController.js

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index e359d4203c..3532ed66b2 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -16,7 +16,14 @@
             {
                 "key": "BrowseController",
                 "implementation": "BrowseController.js",
-                "depends": [ "$scope", "$route", "$location", "objectService", "navigationService", "urlService" ]
+                "depends": [
+                    "$scope",
+                    "$route",
+                    "$location",
+                    "objectService",
+                    "navigationService",
+                    "urlService"
+                ]
             },
             {
                 "key": "BrowseObjectController",
@@ -25,17 +32,22 @@
             },
             {
                 "key": "CreateMenuController",
-                "implementation": "creation/CreateMenuController",
+                "implementation": "creation/CreateMenuController.js",
                 "depends": [ "$scope" ]
             },
             {
                 "key": "LocatorController",
-                "implementation": "creation/LocatorController",
+                "implementation": "creation/LocatorController.js",
                 "depends": [ "$scope", "$timeout" ]
             },
             {
                 "key": "MenuArrowController",
-                "implementation": "MenuArrowController",
+                "implementation": "MenuArrowController.js",
+                "depends": [ "$scope" ]
+            },
+            {
+                "key": "BackArrowController",
+                "implementation": "BackArrowController.js",
                 "depends": [ "$scope" ]
             }
         ],
diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 3ed0ec061b..6085b91249 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -21,8 +21,7 @@
 -->
 
 <!-- Back Arrow Icon used on mobile-->
-<a ng-controller="BrowseController"
+<a ng-controller="BackArrowController"
       class='type-icon icon ui-symbol s-back'
-      ng-class="checkRoot(); atRoot ? 'hidden' : ''"
-      ng-click='backArrow()'>{
-</a>
+      ng-hide="atRoot"
+      ng-click='navigateToParent()'>{</a>
diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 80bb313d22..ebe53b368f 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -22,7 +22,9 @@
 <span ng-controller="BrowseObjectController">
     <div class="object-browse-bar bar l-flex">
         <div class="items-select left">
-            <mct-representation key="'back-arrow'" class="l-back"></mct-representation>
+            <mct-representation key="'back-arrow'"
+                                mct-object="domainObject"
+                                class="l-back"></mct-representation>
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
diff --git a/platform/commonUI/browse/src/BackArrowController.js b/platform/commonUI/browse/src/BackArrowController.js
new file mode 100644
index 0000000000..b48740d288
--- /dev/null
+++ b/platform/commonUI/browse/src/BackArrowController.js
@@ -0,0 +1,64 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*global define*/
+define(
+    function () {
+        'use strict';
+
+        function BackArrowController($scope) {
+            function navigateTo(parentObject) {
+                var action =
+                    parentObject && parentObject.getCapability('action');
+                if (action) {
+                    action.perform('navigate');
+                }
+            }
+
+            function navigateToParent() {
+                var domainObject = $scope.domainObject,
+                    context =
+                        domainObject && domainObject.getCapability('context');
+                if (context) {
+                    navigateTo(context.getParent());
+                }
+            }
+
+            function checkRoot(domainObject) {
+                var context =
+                    domainObject && domainObject.getCapability('context');
+
+                // We don't want to show the arrow if there is no context
+                // for this object, or if there is not a meaningful parent
+                // we can go back to.
+                $scope.atRoot = (!context) || (context.getPath().length < 3);
+            }
+
+            $scope.navigateToParent = navigateToParent;
+            $scope.$watch("domainObject", checkRoot);
+        }
+
+        return BackArrowController;
+
+
+    }
+);
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 4e97ee6f87..934a6a9f5d 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -55,7 +55,7 @@ define(
 
                 unlisten = $scope.$on('$locationChangeSuccess', function () {
                     // Checks path to make sure /browse/ is at front
-                    // if so, change $route.current                    
+                    // if so, change $route.current
                     if ($location.path().indexOf("/browse/") === 0) {
                         $route.current = priorRoute;
                     }
@@ -127,78 +127,6 @@ define(
                     navigateTo(domainObject);
                 }
             }
-            
-            // Uses the current navigation to get the 
-            // current ContextCapability, then the
-            // parent is gotten from that. If the parent
-            // is not the root, then user is navigated to
-            // parent
-            function navigateToParent() {
-                var context = navigationService.getNavigation().getCapability('context'),
-                    parentContext,
-                    parent,
-                    grandparentId;
-                
-                // Checks if the current object has a context
-                if (context) {
-                    
-                    // Sets the parent and the parent context
-                    // which is checked
-                    parent = context.getParent();
-                    parentContext = parent.getCapability('context');
-                    
-                    if ((parent.getId() !== ROOT_ID) && parentContext) {
-                        // Gets the grandparent id
-                        grandparentId = parentContext.getParent().getId();
-                        
-                        // Navigates to the parent
-                        navigateTo(parent);
-                        
-                        // Checks after navigation if the user is located at the 
-                        // root (grandparent of original selected object, after
-                        // navigation, user is at parent of original object and
-                        // child of grandparent)
-                        if (grandparentId && grandparentId !== ROOT_ID) {
-                            $scope.atRoot = false;
-                            return;
-                        }
-                        
-                        // Set at root if no grandparent exists and
-                        // if grandparent is ROOT, after navigation
-                        $scope.atRoot = true;
-                    }
-                }
-            }
-            
-            function checkRoot() {
-                var context = navigationService.getNavigation().getCapability('context'),
-                    parentContext,
-                    parent,
-                    grandparent;
-                
-                // Checks if the current object has a context
-                if (context) {
-                    parent = context.getParent();
-                    parentContext = parent.getCapability('context');
-                    if ((parent.getId() !== ROOT_ID) && parentContext) {
-                        grandparent = parentContext.getParent();
-                        
-                        // Checks if the grandparent exists
-                        // if it does not exist (for example in search),
-                        // than do not show the back button
-                        if (grandparent) {
-                            $scope.atRoot = false;
-                            return;
-                        }
-                    }
-                }
-                
-                // In any other situation where the context or parent
-                // context does not exist or the user is at ROOT, than
-                // hide the back arrow
-                $scope.atRoot = true;
-               
-            }
 
             // Load the root object, put it in the scope.
             // Also, load its immediate children, and (possibly)
@@ -213,13 +141,13 @@ define(
             $scope.treeModel = {
                 selectedObject: navigationService.getNavigation()
             };
-            
+
             // SlideMenu boolean used to hide and show
             // tree menu
             $scope.treeSlide = function () {
                 $scope.treeClass = !$scope.treeClass;
             };
-            
+
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
 
@@ -230,17 +158,12 @@ define(
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);
             });
-            
+
             // If the user has selected an object (and is portrait
             // on a phone), then hide the tree menu
             $scope.$on("select-obj", function () {
                 $scope.treeSlide();
             });
-            
-            $scope.backArrow = navigateToParent;
-            
-            $scope.checkRoot = checkRoot;
-
         }
 
         return BrowseController;
diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index e5e54e32d6..be215bebe4 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -91,7 +91,7 @@ define(
                     "nextObject",
                     [ "getId", "getCapability", "getModel", "useCapability" ]
                 );
-                
+
 
                 mockParentContext = jasmine.createSpyObj('context', ['getParent']);
                 mockParent  = jasmine.createSpyObj(
@@ -159,7 +159,7 @@ define(
                 );
                 expect(mockScope.navigatedObject).toEqual(mockDomainObject);
             });
-            
+
             // Mocks the tree slide call that
             // lets the html code know if the
             // tree menu is open.
@@ -168,7 +168,7 @@ define(
                     "select-obj",
                     jasmine.any(Function)
                 );
-                
+
                 mockScope.$on.calls[1].args[1]();
             });
 
@@ -177,7 +177,7 @@ define(
                     "$destroy",
                     jasmine.any(Function)
                 );
-                
+
                 mockScope.$on.calls[0].args[1]();
                 // Should remove the listener it added earlier
                 expect(mockNavigationService.removeListener).toHaveBeenCalledWith(
@@ -249,132 +249,22 @@ define(
                 mockNavigationService.addListener.mostRecentCall.args[0](
                     mockNextObject
                 );
-                
+
                 // Allows the path index to be checked
-                // prior to setting $route.current                
+                // prior to setting $route.current
                 mockLocation.path.andReturn("/browse/");
-                
+
                 // Exercise the Angular workaround
                 mockScope.$on.mostRecentCall.args[1]();
                 expect(mockUnlisten).toHaveBeenCalled();
-                
-                // location.path to be called with the urlService's 
+
+                // location.path to be called with the urlService's
                 // urlFor function with the next domainObject and mode
                 expect(mockLocation.path).toHaveBeenCalledWith(
                     mockUrlService.urlForLocation(mockMode, mockNextObject)
                 );
             });
-            
-            it("checks if the user is current navigated to the root", function () {
-                var mockContext = jasmine.createSpyObj('context', ['getParent']);
-                
-                mockRoute.current.params.ids = "ROOT/mine";
-                mockParent.getId.andReturn("ROOT");
-                
-                mockDomainObject.getCapability.andCallFake(function (c) {
-                    return c === 'context' && mockContext;
-                });
-                
-                mockNavigationService.getNavigation.andReturn(mockDomainObject);
-                mockContext.getParent.andReturn(mockParent);
-                mockParent.getCapability.andCallFake(function (c) {
-                    return c === 'context' && mockParentContext;
-                });
-                mockParentContext.getParent.andReturn(mockGrandparent);
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.checkRoot();
-                
-                mockRoute.current.params.ids = "mine/junk";
-                mockParent.getId.andReturn("mine");
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.checkRoot();
-                
-                mockDomainObject.getCapability.andReturn(undefined);
-                mockNavigationService.getNavigation.andReturn(mockDomainObject);
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.checkRoot();
-            });
-            
-            // Mocks the back arrow call that
-            // lets the html code know the back
-            // arrow navigation needs to be done
-            it("calls the backArrow function", function () {
-                var mockContext = jasmine.createSpyObj('context', ['getParent']);
-                
-                mockRoute.current.params.ids = "mine/junk";
-                mockParent.getId.andReturn("mine");
-                
-                mockDomainObject.getCapability.andCallFake(function (c) {
-                    return c === 'context' && mockContext;
-                });
-                
-                mockNavigationService.getNavigation.andReturn(mockDomainObject);
-                mockContext.getParent.andReturn(mockParent);
-                mockParent.getCapability.andCallFake(function (c) {
-                    return c === 'context' && mockParentContext;
-                });
-                mockParentContext.getParent.andReturn(mockGrandparent);
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.backArrow();
-                
-                mockRoute.current.params.ids = "mine/lessjunk/morejunk";
-                mockGrandparent.getId.andReturn("mine");
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.backArrow();
-                
-                mockRoute.current.params.ids = "ROOT/mine";
-                mockParent.getId.andReturn("ROOT");
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.backArrow();
-            });
+
         });
     }
 );

From d981e7bb1d77dad6d4a4cb0cdbf4159606dd0b5a Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 15 Sep 2015 12:06:35 -0700
Subject: [PATCH 207/266] [Browse] Separate out back-arrow behavior

Supports integration of changes for mobile, nasa/openmct#95
---
 platform/commonUI/browse/bundle.json          |  20 ++-
 .../browse/res/templates/back-arrow.html      |   7 +-
 .../browse/res/templates/browse-object.html   |   4 +-
 .../browse/src/BackArrowController.js         |  64 +++++++++
 .../commonUI/browse/src/BrowseController.js   |  85 +-----------
 .../browse/test/BrowseControllerSpec.js       | 130 ++----------------
 6 files changed, 100 insertions(+), 210 deletions(-)
 create mode 100644 platform/commonUI/browse/src/BackArrowController.js

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index c7570b7fcd..b5d6b47678 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -16,7 +16,14 @@
             {
                 "key": "BrowseController",
                 "implementation": "BrowseController.js",
-                "depends": [ "$scope", "$route", "$location", "objectService", "navigationService", "urlService" ]
+                "depends": [
+                    "$scope",
+                    "$route",
+                    "$location",
+                    "objectService",
+                    "navigationService",
+                    "urlService"
+                ]
             },
             {
                 "key": "BrowseObjectController",
@@ -25,17 +32,22 @@
             },
             {
                 "key": "CreateMenuController",
-                "implementation": "creation/CreateMenuController",
+                "implementation": "creation/CreateMenuController.js",
                 "depends": [ "$scope" ]
             },
             {
                 "key": "LocatorController",
-                "implementation": "creation/LocatorController",
+                "implementation": "creation/LocatorController.js",
                 "depends": [ "$scope", "$timeout" ]
             },
             {
                 "key": "MenuArrowController",
-                "implementation": "MenuArrowController",
+                "implementation": "MenuArrowController.js",
+                "depends": [ "$scope" ]
+            },
+            {
+                "key": "BackArrowController",
+                "implementation": "BackArrowController.js",
                 "depends": [ "$scope" ]
             }
         ],
diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 3ed0ec061b..6085b91249 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -21,8 +21,7 @@
 -->
 
 <!-- Back Arrow Icon used on mobile-->
-<a ng-controller="BrowseController"
+<a ng-controller="BackArrowController"
       class='type-icon icon ui-symbol s-back'
-      ng-class="checkRoot(); atRoot ? 'hidden' : ''"
-      ng-click='backArrow()'>{
-</a>
+      ng-hide="atRoot"
+      ng-click='navigateToParent()'>{</a>
diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index 80bb313d22..ebe53b368f 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -22,7 +22,9 @@
 <span ng-controller="BrowseObjectController">
     <div class="object-browse-bar bar l-flex">
         <div class="items-select left">
-            <mct-representation key="'back-arrow'" class="l-back"></mct-representation>
+            <mct-representation key="'back-arrow'"
+                                mct-object="domainObject"
+                                class="l-back"></mct-representation>
             <mct-representation key="'object-header'" mct-object="domainObject">
             </mct-representation>
         </div>
diff --git a/platform/commonUI/browse/src/BackArrowController.js b/platform/commonUI/browse/src/BackArrowController.js
new file mode 100644
index 0000000000..b48740d288
--- /dev/null
+++ b/platform/commonUI/browse/src/BackArrowController.js
@@ -0,0 +1,64 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*global define*/
+define(
+    function () {
+        'use strict';
+
+        function BackArrowController($scope) {
+            function navigateTo(parentObject) {
+                var action =
+                    parentObject && parentObject.getCapability('action');
+                if (action) {
+                    action.perform('navigate');
+                }
+            }
+
+            function navigateToParent() {
+                var domainObject = $scope.domainObject,
+                    context =
+                        domainObject && domainObject.getCapability('context');
+                if (context) {
+                    navigateTo(context.getParent());
+                }
+            }
+
+            function checkRoot(domainObject) {
+                var context =
+                    domainObject && domainObject.getCapability('context');
+
+                // We don't want to show the arrow if there is no context
+                // for this object, or if there is not a meaningful parent
+                // we can go back to.
+                $scope.atRoot = (!context) || (context.getPath().length < 3);
+            }
+
+            $scope.navigateToParent = navigateToParent;
+            $scope.$watch("domainObject", checkRoot);
+        }
+
+        return BackArrowController;
+
+
+    }
+);
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 4e97ee6f87..934a6a9f5d 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -55,7 +55,7 @@ define(
 
                 unlisten = $scope.$on('$locationChangeSuccess', function () {
                     // Checks path to make sure /browse/ is at front
-                    // if so, change $route.current                    
+                    // if so, change $route.current
                     if ($location.path().indexOf("/browse/") === 0) {
                         $route.current = priorRoute;
                     }
@@ -127,78 +127,6 @@ define(
                     navigateTo(domainObject);
                 }
             }
-            
-            // Uses the current navigation to get the 
-            // current ContextCapability, then the
-            // parent is gotten from that. If the parent
-            // is not the root, then user is navigated to
-            // parent
-            function navigateToParent() {
-                var context = navigationService.getNavigation().getCapability('context'),
-                    parentContext,
-                    parent,
-                    grandparentId;
-                
-                // Checks if the current object has a context
-                if (context) {
-                    
-                    // Sets the parent and the parent context
-                    // which is checked
-                    parent = context.getParent();
-                    parentContext = parent.getCapability('context');
-                    
-                    if ((parent.getId() !== ROOT_ID) && parentContext) {
-                        // Gets the grandparent id
-                        grandparentId = parentContext.getParent().getId();
-                        
-                        // Navigates to the parent
-                        navigateTo(parent);
-                        
-                        // Checks after navigation if the user is located at the 
-                        // root (grandparent of original selected object, after
-                        // navigation, user is at parent of original object and
-                        // child of grandparent)
-                        if (grandparentId && grandparentId !== ROOT_ID) {
-                            $scope.atRoot = false;
-                            return;
-                        }
-                        
-                        // Set at root if no grandparent exists and
-                        // if grandparent is ROOT, after navigation
-                        $scope.atRoot = true;
-                    }
-                }
-            }
-            
-            function checkRoot() {
-                var context = navigationService.getNavigation().getCapability('context'),
-                    parentContext,
-                    parent,
-                    grandparent;
-                
-                // Checks if the current object has a context
-                if (context) {
-                    parent = context.getParent();
-                    parentContext = parent.getCapability('context');
-                    if ((parent.getId() !== ROOT_ID) && parentContext) {
-                        grandparent = parentContext.getParent();
-                        
-                        // Checks if the grandparent exists
-                        // if it does not exist (for example in search),
-                        // than do not show the back button
-                        if (grandparent) {
-                            $scope.atRoot = false;
-                            return;
-                        }
-                    }
-                }
-                
-                // In any other situation where the context or parent
-                // context does not exist or the user is at ROOT, than
-                // hide the back arrow
-                $scope.atRoot = true;
-               
-            }
 
             // Load the root object, put it in the scope.
             // Also, load its immediate children, and (possibly)
@@ -213,13 +141,13 @@ define(
             $scope.treeModel = {
                 selectedObject: navigationService.getNavigation()
             };
-            
+
             // SlideMenu boolean used to hide and show
             // tree menu
             $scope.treeSlide = function () {
                 $scope.treeClass = !$scope.treeClass;
             };
-            
+
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
 
@@ -230,17 +158,12 @@ define(
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);
             });
-            
+
             // If the user has selected an object (and is portrait
             // on a phone), then hide the tree menu
             $scope.$on("select-obj", function () {
                 $scope.treeSlide();
             });
-            
-            $scope.backArrow = navigateToParent;
-            
-            $scope.checkRoot = checkRoot;
-
         }
 
         return BrowseController;
diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index e5e54e32d6..be215bebe4 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -91,7 +91,7 @@ define(
                     "nextObject",
                     [ "getId", "getCapability", "getModel", "useCapability" ]
                 );
-                
+
 
                 mockParentContext = jasmine.createSpyObj('context', ['getParent']);
                 mockParent  = jasmine.createSpyObj(
@@ -159,7 +159,7 @@ define(
                 );
                 expect(mockScope.navigatedObject).toEqual(mockDomainObject);
             });
-            
+
             // Mocks the tree slide call that
             // lets the html code know if the
             // tree menu is open.
@@ -168,7 +168,7 @@ define(
                     "select-obj",
                     jasmine.any(Function)
                 );
-                
+
                 mockScope.$on.calls[1].args[1]();
             });
 
@@ -177,7 +177,7 @@ define(
                     "$destroy",
                     jasmine.any(Function)
                 );
-                
+
                 mockScope.$on.calls[0].args[1]();
                 // Should remove the listener it added earlier
                 expect(mockNavigationService.removeListener).toHaveBeenCalledWith(
@@ -249,132 +249,22 @@ define(
                 mockNavigationService.addListener.mostRecentCall.args[0](
                     mockNextObject
                 );
-                
+
                 // Allows the path index to be checked
-                // prior to setting $route.current                
+                // prior to setting $route.current
                 mockLocation.path.andReturn("/browse/");
-                
+
                 // Exercise the Angular workaround
                 mockScope.$on.mostRecentCall.args[1]();
                 expect(mockUnlisten).toHaveBeenCalled();
-                
-                // location.path to be called with the urlService's 
+
+                // location.path to be called with the urlService's
                 // urlFor function with the next domainObject and mode
                 expect(mockLocation.path).toHaveBeenCalledWith(
                     mockUrlService.urlForLocation(mockMode, mockNextObject)
                 );
             });
-            
-            it("checks if the user is current navigated to the root", function () {
-                var mockContext = jasmine.createSpyObj('context', ['getParent']);
-                
-                mockRoute.current.params.ids = "ROOT/mine";
-                mockParent.getId.andReturn("ROOT");
-                
-                mockDomainObject.getCapability.andCallFake(function (c) {
-                    return c === 'context' && mockContext;
-                });
-                
-                mockNavigationService.getNavigation.andReturn(mockDomainObject);
-                mockContext.getParent.andReturn(mockParent);
-                mockParent.getCapability.andCallFake(function (c) {
-                    return c === 'context' && mockParentContext;
-                });
-                mockParentContext.getParent.andReturn(mockGrandparent);
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.checkRoot();
-                
-                mockRoute.current.params.ids = "mine/junk";
-                mockParent.getId.andReturn("mine");
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.checkRoot();
-                
-                mockDomainObject.getCapability.andReturn(undefined);
-                mockNavigationService.getNavigation.andReturn(mockDomainObject);
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.checkRoot();
-            });
-            
-            // Mocks the back arrow call that
-            // lets the html code know the back
-            // arrow navigation needs to be done
-            it("calls the backArrow function", function () {
-                var mockContext = jasmine.createSpyObj('context', ['getParent']);
-                
-                mockRoute.current.params.ids = "mine/junk";
-                mockParent.getId.andReturn("mine");
-                
-                mockDomainObject.getCapability.andCallFake(function (c) {
-                    return c === 'context' && mockContext;
-                });
-                
-                mockNavigationService.getNavigation.andReturn(mockDomainObject);
-                mockContext.getParent.andReturn(mockParent);
-                mockParent.getCapability.andCallFake(function (c) {
-                    return c === 'context' && mockParentContext;
-                });
-                mockParentContext.getParent.andReturn(mockGrandparent);
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.backArrow();
-                
-                mockRoute.current.params.ids = "mine/lessjunk/morejunk";
-                mockGrandparent.getId.andReturn("mine");
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.backArrow();
-                
-                mockRoute.current.params.ids = "ROOT/mine";
-                mockParent.getId.andReturn("ROOT");
-                
-                controller = new BrowseController(
-                    mockScope,
-                    mockRoute,
-                    mockLocation,
-                    mockObjectService,
-                    mockNavigationService
-                );
-                
-                mockScope.backArrow();
-            });
+
         });
     }
 );

From 4f5a1115d2ef0e9b30a2c217e0e12dc1f87364a6 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 16 Sep 2015 10:45:22 -0700
Subject: [PATCH 208/266] [Frontend] Themes final on open prior to VISTA
 integration

open #95
Branch open95b now replaces open95;
Fix to status indicator to only
display when title length > 0;
---
 .../general/res/sass/user-environ/_bottom-bar.scss  |  2 +-
 .../commonUI/general/res/templates/indicator.html   | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss b/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss
index 957668cc1d..dd705b0000 100644
--- a/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_bottom-bar.scss
@@ -54,7 +54,7 @@
 .status.block {
 	//display: inline-block;
 	display: inline;  // New status bar design. Inline to support ellipsis overflow
-	margin-right: $interiorMargin * 2;
+	margin-right: $interiorMarginLg;
 	.status-indicator {
 		//@include border-radius($controlCr * 0.9);
 		//@include box-shadow(inset rgba(black, 0.5) 0 0 3px);
diff --git a/platform/commonUI/general/res/templates/indicator.html b/platform/commonUI/general/res/templates/indicator.html
index a07979b212..34ea2fe9c8 100644
--- a/platform/commonUI/general/res/templates/indicator.html
+++ b/platform/commonUI/general/res/templates/indicator.html
@@ -22,7 +22,8 @@
 <div class='status block'
      title="{{ngModel.getDescription()}}"
      ng-click='ngModel.configure()'
-     ng-class='ngModel.getClass()'>
+     ng-class='ngModel.getClass()'
+     ng-show="ngModel.getText().length > 0">
     <span class="ui-symbol status-indicator"
           ng-class='ngModel.getGlyphClass()'>
         {{ngModel.getGlyph()}}
@@ -31,9 +32,9 @@
           ng-class='ngModel.getTextClass()'>
         {{ngModel.getText()}}
     </span>
-    <a href=''
-       class="ui-symbol"
-       ng-if="ngModel.configure">
-        G
-    </a>
+	<a href=''
+	   class="ui-symbol"
+	   ng-if="ngModel.configure">
+		G
+	</a>
 </div>
\ No newline at end of file

From acdd35cf651fb0b384277a47327e946a8ab3b310 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 16 Sep 2015 12:23:24 -0700
Subject: [PATCH 209/266] [Forms] Fix select control

Use ng-show instead of ng-if to suppress the
'Select One' option after user has chosen something
in a select box; the latter appears to be incompatible
with Angular 1.4.x. nasa/openmct#113
---
 platform/forms/res/templates/controls/select.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/platform/forms/res/templates/controls/select.html b/platform/forms/res/templates/controls/select.html
index dab63f96f3..c8688a0010 100644
--- a/platform/forms/res/templates/controls/select.html
+++ b/platform/forms/res/templates/controls/select.html
@@ -20,11 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <div class='form-control select'>
-	<select
-	        ng-model="ngModel[field]"
-	        ng-options="opt.value as opt.name for opt in options"
-	        ng-required="ngRequired"
-	        name="mctControl">
-	    <option value="" ng-if="!ngModel[field]">- Select One -</option>
-	</select>
+    <select
+            ng-model="ngModel[field]"
+            ng-options="opt.value as opt.name for opt in options"
+            ng-required="ngRequired"
+            name="mctControl">
+        <option value="" ng-show="!ngModel[field]">- Select One -</option>
+    </select>
 </div>

From f28d2f19d05c67f82c39e44cd2450836a449dd99 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 16 Sep 2015 15:52:56 -0700
Subject: [PATCH 210/266] [Frontend/PLATFORM] Cherry picking from platform
 changes in vista65

open #95
vista #65
scss and html mods for VISTA-related elements;
(cherry picked from commit 6ef3987)
---
 platform/commonUI/general/res/sass/controls/_buttons.scss   | 4 ++++
 .../commonUI/general/res/sass/forms/_channel-selector.scss  | 6 +++---
 .../commonUI/general/res/templates/controls/selector.html   | 4 ++--
 platform/features/layout/bundle.json                        | 2 +-
 platform/features/layout/src/elements/ElementFactory.js     | 3 +--
 5 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss
index c81e24c4e4..abf191cece 100644
--- a/platform/commonUI/general/res/sass/controls/_buttons.scss
+++ b/platform/commonUI/general/res/sass/controls/_buttons.scss
@@ -41,6 +41,10 @@ $pad: $interiorMargin * $baseRatio;
         vertical-align: top;
     }
 
+	&.lg {
+		font-size: 1rem;
+	}
+
     &.sm {
         padding: 0 $pad / $baseRatio;
     }
diff --git a/platform/commonUI/general/res/sass/forms/_channel-selector.scss b/platform/commonUI/general/res/sass/forms/_channel-selector.scss
index 02c28f3858..dad1a1930c 100644
--- a/platform/commonUI/general/res/sass/forms/_channel-selector.scss
+++ b/platform/commonUI/general/res/sass/forms/_channel-selector.scss
@@ -36,11 +36,11 @@
 	.btns-add-remove {
 //		background: rgba(#ff0000, 0.3);;
 		margin-top: 150px;
-		.btn {
+		.s-btn {
 			display: block;
-			font-size: 1.5em;
+			//font-size: 1.5em;
 			margin-bottom: $interiorMargin;
-			padding: 10px;
+			//padding: 10px;
 			text-align: center;
 		}
 	}
diff --git a/platform/commonUI/general/res/templates/controls/selector.html b/platform/commonUI/general/res/templates/controls/selector.html
index d6f0f324a3..4c0de20bca 100644
--- a/platform/commonUI/general/res/templates/controls/selector.html
+++ b/platform/commonUI/general/res/templates/controls/selector.html
@@ -43,11 +43,11 @@
     </div>
     <div class='col col-2'>
         <div class='btn-holder valign-mid btns-add-remove'>
-            <a class='btn major'
+            <a class='s-btn major'
                ng-click="selector.select(selector.treeModel.selectedObject)">
                 <span class='ui-symbol'>&gt;</span>
             </a>
-            <a class='btn major'
+            <a class='s-btn major'
                ng-click="selector.deselect(selector.listModel.selectedObject)">
                 <span class='ui-symbol'>&lt;</span>
             </a>
diff --git a/platform/features/layout/bundle.json b/platform/features/layout/bundle.json
index c53ade93f2..3503e3c88d 100644
--- a/platform/features/layout/bundle.json
+++ b/platform/features/layout/bundle.json
@@ -1,6 +1,6 @@
 {
     "name": "Layout components.",
-    "description": "Plug in adding Layout capabiltiies.",
+    "description": "Plug in adding Layout capabilities.",
     "extensions": {
         "views": [
             {
diff --git a/platform/features/layout/src/elements/ElementFactory.js b/platform/features/layout/src/elements/ElementFactory.js
index 63dbb82757..6dbef2f708 100644
--- a/platform/features/layout/src/elements/ElementFactory.js
+++ b/platform/features/layout/src/elements/ElementFactory.js
@@ -44,8 +44,7 @@ define(
                 },
                 "fixed.text": {
                     fill: "transparent",
-                    stroke: "transparent",
-                    color: "#cccccc"
+                    stroke: "transparent"
                 }
             },
             DIALOGS = {

From 9fdb9f0170c72913a0e77165929b01108ca8c180 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 16 Sep 2015 16:59:27 -0700
Subject: [PATCH 211/266] [Frontend/PLATFORM] Cherry picking from platform
 changes in vista65

open #95
vista #65
Style mods for selects;
(cherry picked from commit 8b2c4c6)
---
 .../commonUI/general/res/sass/_mixins.scss    |  30 +-
 .../general/res/sass/controls/_menus.scss     |   8 +-
 .../general/res/sass/forms/_selects.scss      |  13 +-
 .../espresso/res/css/theme-espresso.css       | 300 ++++++++----------
 .../themes/espresso/res/sass/_constants.scss  |   4 +
 .../themes/snow/res/css/theme-snow.css        | 292 ++++++++---------
 .../themes/snow/res/sass/_constants.scss      |   2 +
 7 files changed, 295 insertions(+), 354 deletions(-)

diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 528f965cff..0a79735a60 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -303,31 +303,15 @@
 	padding: 0 $interiorMarginSm;
 }
 
-
-
-/*
-
-@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include appearance(none);
-    @include border-radius($controlCr);
-    @include box-sizing(border-box);
-    @include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
-    background: rgba(#fff, 0.1);
-    border: none;
-    color: lighten($fg, 20%);
-    outline: none;
-    &.error {
-        background: rgba(red, 0.5);
-    }
+@mixin contextArrow() {
+	@include text-shadow(none);
+	content: '\76';
+	display: inline-block;
+	font-family: 'symbolsfont';
+	margin-left: $interiorMarginSm;
+	vertical-align: top;
 }
 
-@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include input-base($bg, $fg);
-    padding: 0 $interiorMarginSm;
-}
-*/
-
-
 @mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
     @include input-base($bg, $fg);
     padding: $interiorMargin;
diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss
index 32fc9af7ee..d9aecfd1c8 100644
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -38,14 +38,10 @@
 
 	&:after {
 		// Adds the downward facing 'context available / invoke menu' arrow element
+		@include contextArrow();
 		color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
-		content: '\76';
-		display: inline-block;
-		font-family: 'symbolsfont';
-		margin-left: $interiorMarginSm;
-		@include text-shadow(none);
-		vertical-align: top;
 	}
+
 	&.create-btn {
 		.title-label {
 			font-size: 1rem;
diff --git a/platform/commonUI/general/res/sass/forms/_selects.scss b/platform/commonUI/general/res/sass/forms/_selects.scss
index 3f283c04e7..2eda20dd6c 100644
--- a/platform/commonUI/general/res/sass/forms/_selects.scss
+++ b/platform/commonUI/general/res/sass/forms/_selects.scss
@@ -20,20 +20,18 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .select {
-	@include btnSubtle();
-	@extend .s-menu;
-	//cursor: pointer;
-	//display: inline-block;
+	@include btnSubtle($colorSelectBg);
 	margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
+	padding: 0 $interiorMargin;
     overflow: hidden;
 	position: relative;
 	select {
 		@include appearance(none);
 		@include box-sizing(border-box);
 		background: none;
-		color: $colorBtnFg;
+		color: $colorSelectFg;
+		cursor: pointer;
 		border: none !important;
-		//cursor: pointer;
 		padding: 4px 25px 2px 0px;
         width: 120%;
         option {
@@ -41,7 +39,8 @@
         }
 	}
 	&:after {
-		//color: $colorKey;
+		@include contextArrow();
+		color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
 		//content:"v";
 		//display: block;
 		//font-family: 'symbolsfont';
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 6eac93ae8b..71750ffb34 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -98,27 +98,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /*********************************************** CONTROLS, FORM ELEMENTS */
-/*
-
-@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include appearance(none);
-    @include border-radius($controlCr);
-    @include box-sizing(border-box);
-    @include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
-    background: rgba(#fff, 0.1);
-    border: none;
-    color: lighten($fg, 20%);
-    outline: none;
-    &.error {
-        background: rgba(red, 0.5);
-    }
-}
-
-@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include input-base($bg, $fg);
-    padding: 0 $interiorMarginSm;
-}
-*/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -394,7 +373,7 @@ mct-container {
   display: block; }
 
 /* line 97, ../../../../general/res/sass/_global.scss */
-.abs, .s-menu span.l-click-area, .select span.l-click-area {
+.abs, .s-menu span.l-click-area {
   position: absolute;
   top: 0;
   right: 0;
@@ -464,7 +443,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 26, ../../../../general/res/sass/_about.scss */
-.l-about.abs, .s-menu span.l-about.l-click-area, .select span.l-about.l-click-area {
+.l-about.abs, .s-menu span.l-about.l-click-area {
   overflow: auto; }
 /* line 31, ../../../../general/res/sass/_about.scss */
 .l-about .l-logo-holder {
@@ -514,7 +493,7 @@ mct-container {
   .s-about .s-logo-openmctweb {
     background-image: url("../../../../general/res/images/logo-openmctweb-shdw.svg"); }
   /* line 81, ../../../../general/res/sass/_about.scss */
-  .s-about .s-btn, .s-about .s-menu, .s-about .select {
+  .s-about .s-btn, .s-about .s-menu {
     line-height: 2em; }
   /* line 85, ../../../../general/res/sass/_about.scss */
   .s-about .l-licenses-software .l-license-software {
@@ -555,7 +534,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 24, ../../../../general/res/sass/_text.scss */
-.abs.l-standalone, .s-menu span.l-standalone.l-click-area, .select span.l-standalone.l-click-area {
+.abs.l-standalone, .s-menu span.l-standalone.l-click-area {
   padding: 5% 20%; }
 
 /* line 29, ../../../../general/res/sass/_text.scss */
@@ -639,7 +618,7 @@ mct-container {
   display: inline-block; }
 
 /* line 55, ../../../../general/res/sass/_icons.scss */
-.s-menu .invoke-menu, .select .invoke-menu,
+.s-menu .invoke-menu,
 .icon.major .invoke-menu {
   margin-left: 3px; }
 
@@ -1275,7 +1254,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 25, ../../../../general/res/sass/controls/_buttons.scss */
-.s-btn, .s-menu, .select {
+.s-btn, .s-menu {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -1290,20 +1269,23 @@ mct-container {
   padding: 0 7.5px;
   font-size: 0.7rem; }
   /* line 35, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn .icon, .s-menu .icon, .select .icon {
+  .s-btn .icon, .s-menu .icon {
     font-size: 0.8rem;
     color: #0099cc; }
   /* line 40, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn .title-label, .s-menu .title-label, .select .title-label {
+  .s-btn .title-label, .s-menu .title-label {
     vertical-align: top; }
   /* line 44, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.sm, .sm.s-menu, .sm.select {
-    padding: 0 5px; }
+  .s-btn.lg, .lg.s-menu {
+    font-size: 1rem; }
   /* line 48, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.vsm, .vsm.s-menu, .vsm.select {
-    padding: 0 2.5px; }
+  .s-btn.sm, .sm.s-menu {
+    padding: 0 5px; }
   /* line 52, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.major, .major.s-menu, .major.select {
+  .s-btn.vsm, .vsm.s-menu {
+    padding: 0 2.5px; }
+  /* line 56, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.major, .major.s-menu {
     background-color: #0099cc;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
@@ -1332,17 +1314,17 @@ mct-container {
     transition: background, 0.25s;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
-    .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
+    .s-btn.major .icon, .major.s-menu .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 277, ../../../../general/res/sass/_mixins.scss */
-      .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
+      .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover {
         background: linear-gradient(#1ac6ff, #00bfff); }
         /* line 279, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.major:not(.disabled):hover > .icon, .major.s-menu:not(.disabled):hover > .icon, .major.select:not(.disabled):hover > .icon {
+        .s-btn.major:not(.disabled):hover > .icon, .major.s-menu:not(.disabled):hover > .icon {
           color: white; } }
-  /* line 58, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
+  /* line 62, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn:not(.major), .s-menu:not(.major) {
     background-color: #454545;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
@@ -1371,20 +1353,20 @@ mct-container {
     transition: background, 0.25s;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
-    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
+    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon {
       color: #0099cc; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 277, ../../../../general/res/sass/_mixins.scss */
-      .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
+      .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover {
         background: linear-gradient(#6b6b6b, #5e5e5e); }
         /* line 279, ../../../../general/res/sass/_mixins.scss */
-        .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon, .select:not(.major):not(.disabled):hover > .icon {
+        .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon {
           color: #33ccff; } }
-  /* line 67, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before, .pause-play.select .icon:before {
+  /* line 71, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before {
     content: "\0000F1"; }
-  /* line 70, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.pause-play.paused, .pause-play.paused.s-menu, .pause-play.paused.select {
+  /* line 74, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.pause-play.paused, .pause-play.paused.s-menu {
     background-color: #c56f01;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
@@ -1413,17 +1395,17 @@ mct-container {
     transition: background, 0.25s;
     text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
-    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
+    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 277, ../../../../general/res/sass/_mixins.scss */
-      .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu:not(.disabled):hover, .pause-play.paused.select:not(.disabled):hover {
+      .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu:not(.disabled):hover {
         background: linear-gradient(#fe9815, #f88c01); }
         /* line 279, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon, .pause-play.paused.select:not(.disabled):hover > .icon {
+        .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon {
           color: white; } }
-    /* line 72, ../../../../general/res/sass/controls/_buttons.scss */
-    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
+    /* line 76, ../../../../general/res/sass/controls/_buttons.scss */
+    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon {
       -moz-animation-name: pulse;
       -webkit-animation-name: pulse;
       animation-name: pulse;
@@ -1439,24 +1421,24 @@ mct-container {
       -moz-animation-timing-function: ease-in-out;
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out; }
-      /* line 74, ../../../../general/res/sass/controls/_buttons.scss */
-      .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu .icon :before, .pause-play.paused.select .icon :before {
+      /* line 78, ../../../../general/res/sass/controls/_buttons.scss */
+      .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu .icon :before {
         content: "\0000EF"; }
-  /* line 82, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before, .show-thumbs.select .icon:before {
+  /* line 86, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before {
     content: "\000039"; }
 
-/* line 88, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 92, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
-  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .s-btn, .l-btn-set .s-menu, .l-btn-set .select {
+  /* line 98, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .s-btn, .l-btn-set .s-menu {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
-  /* line 100, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu, .l-btn-set .first .select {
+  /* line 104, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu {
     -moz-border-radius-topleft: 3px;
     -webkit-border-top-left-radius: 3px;
     border-top-left-radius: 3px;
@@ -1464,8 +1446,8 @@ mct-container {
     -webkit-border-bottom-left-radius: 3px;
     border-bottom-left-radius: 3px;
     margin-left: 0; }
-  /* line 107, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu, .l-btn-set .last .select {
+  /* line 111, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu {
     -moz-border-radius-topright: 3px;
     -webkit-border-top-right-radius: 3px;
     border-top-right-radius: 3px;
@@ -1473,8 +1455,8 @@ mct-container {
     -webkit-border-bottom-right-radius: 3px;
     border-bottom-right-radius: 3px; }
 
-/* line 114, ../../../../general/res/sass/controls/_buttons.scss */
-.paused:not(.s-btn):not(.s-menu):not(.select) {
+/* line 118, ../../../../general/res/sass/controls/_buttons.scss */
+.paused:not(.s-btn):not(.s-menu) {
   border-color: #c56f01 !important;
   color: #c56f01 !important; }
 
@@ -1762,7 +1744,7 @@ label.checkbox.custom {
     margin-left: 0; }
 
 /* line 208, ../../../../general/res/sass/controls/_controls.scss */
-.s-menu label.checkbox.custom, .select label.checkbox.custom {
+.s-menu label.checkbox.custom {
   margin-left: 5px; }
 
 /* line 213, ../../../../general/res/sass/controls/_controls.scss */
@@ -2073,37 +2055,37 @@ label.checkbox.custom {
  *****************************************************************************/
 /******************************************************** MENU BUTTONS */
 /* line 31, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .icon, .select .icon {
+.s-menu .icon {
   font-size: 120%; }
 /* line 35, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .title-label, .select .title-label {
+.s-menu .title-label {
   margin-left: 3px; }
 /* line 39, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu:after, .select:after {
-  color: rgba(255, 255, 255, 0.2);
+.s-menu:after {
+  text-shadow: none;
   content: '\76';
   display: inline-block;
   font-family: 'symbolsfont';
   margin-left: 3px;
-  text-shadow: none;
-  vertical-align: top; }
-/* line 50, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu.create-btn .title-label, .create-btn.select .title-label {
+  vertical-align: top;
+  color: rgba(255, 255, 255, 0.2); }
+/* line 46, ../../../../general/res/sass/controls/_menus.scss */
+.s-menu.create-btn .title-label {
   font-size: 1rem; }
-/* line 58, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .menu, .select .menu {
+/* line 54, ../../../../general/res/sass/controls/_menus.scss */
+.s-menu .menu {
   left: 0;
   text-align: left; }
-  /* line 61, ../../../../general/res/sass/controls/_menus.scss */
-  .s-menu .menu .ui-symbol.icon, .select .menu .ui-symbol.icon {
+  /* line 57, ../../../../general/res/sass/controls/_menus.scss */
+  .s-menu .menu .ui-symbol.icon {
     width: 12px; }
 
 /******************************************************** MENUS THEMSELVES */
-/* line 68, ../../../../general/res/sass/controls/_menus.scss */
+/* line 64, ../../../../general/res/sass/controls/_menus.scss */
 .menu-element {
   cursor: pointer;
   position: relative; }
-  /* line 74, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 70, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .menu {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -2131,16 +2113,16 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 83, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 79, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 345, ../../../../general/res/sass/_mixins.scss */
+      /* line 329, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
         padding: 0; }
-      /* line 85, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 81, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .menu ul li {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
@@ -2151,70 +2133,70 @@ label.checkbox.custom {
         padding: 3px 10px 3px 30px;
         position: relative;
         white-space: nowrap; }
-        /* line 93, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 89, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li:first-child {
           border: none; }
-        /* line 96, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 92, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li:hover {
           background: #878787;
           color: #fff; }
-          /* line 99, ../../../../general/res/sass/controls/_menus.scss */
+          /* line 95, ../../../../general/res/sass/controls/_menus.scss */
           .menu-element .menu ul li:hover .icon {
             color: #fff; }
-        /* line 103, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 99, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li .type-icon {
           left: 10px; }
-  /* line 110, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 106, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .menu,
   .menu-element .context-menu,
   .menu-element .checkbox-menu,
   .menu-element .super-menu {
     pointer-events: auto; }
-    /* line 116, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 112, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .menu ul li a,
     .menu-element .context-menu ul li a,
     .menu-element .checkbox-menu ul li a,
     .menu-element .super-menu ul li a {
       color: white; }
-    /* line 119, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 115, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .menu ul li .icon,
     .menu-element .context-menu ul li .icon,
     .menu-element .checkbox-menu ul li .icon,
     .menu-element .super-menu ul li .icon {
       color: #24c8ff; }
-    /* line 122, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 118, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .menu ul li .type-icon,
     .menu-element .context-menu ul li .type-icon,
     .menu-element .checkbox-menu ul li .type-icon,
     .menu-element .super-menu ul li .type-icon {
       left: 5px; }
-  /* line 134, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 130, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .checkbox-menu ul li {
     padding-left: 50px; }
-    /* line 136, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 132, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .checkbox {
       position: absolute;
       left: 5px;
       top: 0.53333rem; }
-      /* line 141, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 137, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .checkbox-menu ul li .checkbox em {
         height: 0.7rem;
         width: 0.7rem; }
-        /* line 144, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 140, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .checkbox-menu ul li .checkbox em:before {
           font-size: 7px !important;
           height: 0.7rem;
           width: 0.7rem;
           line-height: 0.7rem; }
-    /* line 152, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 148, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .type-icon {
       left: 25px; }
-  /* line 158, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 154, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .super-menu {
     display: block;
     width: 500px;
     height: 480px; }
-    /* line 166, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 162, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .contents {
       overflow: hidden;
       position: absolute;
@@ -2224,12 +2206,12 @@ label.checkbox.custom {
       left: 5px;
       width: auto;
       height: auto; }
-    /* line 169, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 165, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .pane {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box; }
-      /* line 171, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 167, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.left {
         border-right: 1px solid #878787;
         left: 0;
@@ -2238,20 +2220,20 @@ label.checkbox.custom {
         width: 50%;
         overflow-x: hidden;
         overflow-y: auto; }
-        /* line 181, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 177, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .super-menu .pane.left ul li {
           -moz-border-radius: 3px;
           -webkit-border-radius: 3px;
           border-radius: 3px;
           padding-left: 30px;
           border-top: none; }
-      /* line 188, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 184, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.right {
         left: auto;
         right: 0;
         padding: 25px;
         width: 50%; }
-    /* line 198, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 194, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.icon {
       color: white;
       position: relative;
@@ -2261,40 +2243,40 @@ label.checkbox.custom {
       line-height: 150px;
       margin-bottom: 25px;
       text-align: center; }
-    /* line 209, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 205, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.title {
       color: white;
       font-size: 1.2em;
       margin-bottom: 0.5em; }
-    /* line 214, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 210, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.description {
       color: white;
       font-size: 0.8em;
       line-height: 1.5em; }
-  /* line 223, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 219, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .context-menu, .menu-element .checkbox-menu {
     font-size: 0.80rem; }
 
-/* line 228, ../../../../general/res/sass/controls/_menus.scss */
+/* line 224, ../../../../general/res/sass/controls/_menus.scss */
 .context-menu-holder {
   pointer-events: none;
   position: absolute;
   height: 200px;
   width: 170px;
   z-index: 70; }
-  /* line 234, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 230, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder .context-menu-wrapper {
     position: absolute;
     height: 100%;
     width: 100%; }
-  /* line 241, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 237, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
     right: 0; }
-  /* line 244, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 240, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
     bottom: 0; }
 
-/* line 249, ../../../../general/res/sass/controls/_menus.scss */
+/* line 245, ../../../../general/res/sass/controls/_menus.scss */
 .btn-bar.right .menu,
 .menus-to-left .menu {
   left: auto;
@@ -2664,7 +2646,7 @@ textarea {
  *****************************************************************************/
 /* line 22, ../../../../general/res/sass/forms/_selects.scss */
 .select {
-  background-color: #333;
+  background-color: #454545;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -2673,12 +2655,12 @@ textarea {
   box-sizing: border-box;
   color: #999;
   display: inline-block;
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #333333));
-  background-image: -moz-linear-gradient(#404040, #333333);
-  background-image: -webkit-linear-gradient(#404040, #333333);
-  background-image: linear-gradient(#404040, #333333);
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #525252), color-stop(100%, #454545));
+  background-image: -moz-linear-gradient(#525252, #454545);
+  background-image: -webkit-linear-gradient(#525252, #454545);
+  background-image: linear-gradient(#525252, #454545);
   -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
   box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
@@ -2692,6 +2674,7 @@ textarea {
   transition: background, 0.25s;
   text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
   margin: 0 0 2px 2px;
+  padding: 0 5px;
   overflow: hidden;
   position: relative; }
   /* line 272, ../../../../general/res/sass/_mixins.scss */
@@ -2700,11 +2683,11 @@ textarea {
   @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
     /* line 277, ../../../../general/res/sass/_mixins.scss */
     .select:not(.disabled):hover {
-      background: linear-gradient(#595959, #4d4d4d); }
+      background: linear-gradient(#6b6b6b, #5e5e5e); }
       /* line 279, ../../../../general/res/sass/_mixins.scss */
       .select:not(.disabled):hover > .icon {
         color: #33ccff; } }
-  /* line 30, ../../../../general/res/sass/forms/_selects.scss */
+  /* line 28, ../../../../general/res/sass/forms/_selects.scss */
   .select select {
     -moz-appearance: none;
     -webkit-appearance: none;
@@ -2713,14 +2696,22 @@ textarea {
     box-sizing: border-box;
     background: none;
     color: #999;
+    cursor: pointer;
     border: none !important;
     padding: 4px 25px 2px 0px;
     width: 120%; }
-    /* line 39, ../../../../general/res/sass/forms/_selects.scss */
+    /* line 37, ../../../../general/res/sass/forms/_selects.scss */
     .select select option {
       margin: 5px 0; }
-  /* line 43, ../../../../general/res/sass/forms/_selects.scss */
+  /* line 41, ../../../../general/res/sass/forms/_selects.scss */
   .select:after {
+    text-shadow: none;
+    content: '\76';
+    display: inline-block;
+    font-family: 'symbolsfont';
+    margin-left: 3px;
+    vertical-align: top;
+    color: rgba(153, 153, 153, 0.2);
     position: absolute;
     right: 5px;
     top: 0; }
@@ -2781,11 +2772,9 @@ textarea {
 .channel-selector .btns-add-remove {
   margin-top: 150px; }
   /* line 39, ../../../../general/res/sass/forms/_channel-selector.scss */
-  .channel-selector .btns-add-remove .btn {
+  .channel-selector .btns-add-remove .s-btn, .channel-selector .btns-add-remove .s-menu {
     display: block;
-    font-size: 1.5em;
     margin-bottom: 5px;
-    padding: 10px;
     text-align: center; }
 
 /*****************************************************************************
@@ -3064,38 +3053,33 @@ span.req {
 .bar .icon.major {
   margin-right: 5px; }
 /* line 70, ../../../../general/res/sass/user-environ/_layout.scss */
-.bar.abs, .s-menu span.bar.l-click-area, .select span.bar.l-click-area {
+.bar.abs, .s-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
   /* line 73, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs.left, .s-menu span.bar.left.l-click-area, .select span.bar.left.l-click-area,
+  .bar.abs.left, .s-menu span.bar.left.l-click-area,
   .bar.abs .left,
-  .s-menu span.bar.l-click-area .left,
-  .select span.bar.l-click-area .left {
+  .s-menu span.bar.l-click-area .left {
     width: 45%;
     right: auto; }
   /* line 78, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs.right, .s-menu span.bar.right.l-click-area, .select span.bar.right.l-click-area,
+  .bar.abs.right, .s-menu span.bar.right.l-click-area,
   .bar.abs .right,
-  .s-menu span.bar.l-click-area .right,
-  .select span.bar.l-click-area .right {
+  .s-menu span.bar.l-click-area .right {
     width: 45%;
     left: auto;
     text-align: right; }
     /* line 83, ../../../../general/res/sass/user-environ/_layout.scss */
-    .bar.abs.right .icon.major, .s-menu span.bar.right.l-click-area .icon.major, .select span.bar.right.l-click-area .icon.major,
+    .bar.abs.right .icon.major, .s-menu span.bar.right.l-click-area .icon.major,
     .bar.abs .right .icon.major,
-    .s-menu span.bar.l-click-area .right .icon.major,
-    .select span.bar.l-click-area .right .icon.major {
+    .s-menu span.bar.l-click-area .right .icon.major {
       margin-left: 15px; }
   /* line 89, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs .l-flex .left, .s-menu span.bar.l-click-area .l-flex .left, .select span.bar.l-click-area .l-flex .left,
+  .bar.abs .l-flex .left, .s-menu span.bar.l-click-area .l-flex .left,
   .bar.abs .l-flex .right,
-  .s-menu span.bar.l-click-area .l-flex .right,
-  .select span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .s-menu span.bar.l-flex.l-click-area .left, .select span.bar.l-flex.l-click-area .left,
+  .s-menu span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .s-menu span.bar.l-flex.l-click-area .left,
   .bar.abs.l-flex .right,
-  .s-menu span.bar.l-flex.l-click-area .right,
-  .select span.bar.l-flex.l-click-area .right {
+  .s-menu span.bar.l-flex.l-click-area .right {
     width: auto; }
 
 /* line 98, ../../../../general/res/sass/user-environ/_layout.scss */
@@ -3233,12 +3217,10 @@ span.req {
     overflow: auto;
     top: 64px; }
   /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area, .pane.items .object-browse-bar .select span.left.l-click-area, .select .pane.items .object-browse-bar span.left.l-click-area,
+  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .s-menu span.right.l-click-area,
-  .s-menu .pane.items .object-browse-bar span.right.l-click-area,
-  .pane.items .object-browse-bar .select span.right.l-click-area,
-  .select .pane.items .object-browse-bar span.right.l-click-area {
+  .s-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
   /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-holder {
@@ -3268,17 +3250,13 @@ span.req {
       right: 3px; }
 
 /* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
-.object-browse-bar .s-btn, .object-browse-bar .s-menu, .object-browse-bar .select,
+.object-browse-bar .s-btn, .object-browse-bar .s-menu,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu,
-.top-bar .buttons-main .select,
 .top-bar .s-menu,
-.top-bar .select,
 .tool-bar .s-btn,
 .tool-bar .s-menu,
-.tool-bar .select,
-.tool-bar .s-menu,
-.tool-bar .select {
+.tool-bar .s-menu {
   height: 25px;
   line-height: 25px;
   vertical-align: top; }
@@ -3674,13 +3652,13 @@ span.req {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 23, ../../../../general/res/sass/search/_search.scss */
-.abs.search-holder, .s-menu span.search-holder.l-click-area, .select span.search-holder.l-click-area {
+.abs.search-holder, .s-menu span.search-holder.l-click-area {
   height: 25px;
   bottom: 0;
   top: 23px;
   z-index: 5; }
   /* line 27, ../../../../general/res/sass/search/_search.scss */
-  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area, .select span.search-holder.active.l-click-area {
+  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area {
     height: auto;
     bottom: 0; }
 
@@ -3951,14 +3929,14 @@ span.req {
   height: 30px;
   text-align: right; }
   /* line 67, ../../../../general/res/sass/overlay/_overlay.scss */
-  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu, .overlay .bottom-bar .select {
+  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu {
     font-size: 95%;
     height: 30px;
     line-height: 30px;
     margin-left: 5px;
     padding: 0 15px; }
     /* line 69, ../../../../general/res/sass/overlay/_overlay.scss */
-    .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major), .overlay .bottom-bar .select:not(.major) {
+    .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) {
       background-color: gray;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
@@ -3987,14 +3965,14 @@ span.req {
       transition: background, 0.25s;
       text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
       /* line 272, ../../../../general/res/sass/_mixins.scss */
-      .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon, .overlay .bottom-bar .select:not(.major) .icon {
+      .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon {
         color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
         /* line 277, ../../../../general/res/sass/_mixins.scss */
-        .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
+        .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover {
           background: linear-gradient(#a6a6a6, #999999); }
           /* line 279, ../../../../general/res/sass/_mixins.scss */
-          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover > .icon {
+          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon {
             color: white; } }
 /* line 85, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
@@ -4078,7 +4056,7 @@ ul.tree {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none; }
-  /* line 345, ../../../../general/res/sass/_mixins.scss */
+  /* line 329, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -4333,12 +4311,12 @@ ul.tree {
   .frame.child-frame.panel:hover {
     border-color: rgba(179, 179, 179, 0.1); }
 /* line 32, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame > .object-header.abs, .s-menu .frame > span.object-header.l-click-area, .select .frame > span.object-header.l-click-area {
+.frame > .object-header.abs, .s-menu .frame > span.object-header.l-click-area {
   font-size: 0.75em;
   height: 16px;
   line-height: 16px; }
 /* line 38, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame > .object-holder.abs, .s-menu .frame > span.object-holder.l-click-area, .select .frame > span.object-holder.l-click-area {
+.frame > .object-holder.abs, .s-menu .frame > span.object-holder.l-click-area {
   top: 21px; }
 /* line 41, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame .contents {
@@ -4410,7 +4388,7 @@ ul.tree {
 .edit-mode .top-bar .buttons-main {
   white-space: nowrap; }
   /* line 52, ../../../../general/res/sass/user-environ/_top-bar.scss */
-  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .s-menu span.buttons-main.l-click-area, .s-menu .edit-mode .top-bar span.buttons-main.l-click-area, .edit-mode .top-bar .select span.buttons-main.l-click-area, .select .edit-mode .top-bar span.buttons-main.l-click-area {
+  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .s-menu span.buttons-main.l-click-area, .s-menu .edit-mode .top-bar span.buttons-main.l-click-area {
     bottom: auto;
     left: auto; }
 
@@ -5642,7 +5620,7 @@ table {
 .autoflow {
   font-size: 0.75rem; }
   /* line 32, ../../../../general/res/sass/_autoflow.scss */
-  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu, .autoflow:hover .l-autoflow-header .change-column-width.select {
+  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu {
     -moz-transition-property: visibility, opacity, background-color, border-color;
     -o-transition-property: visibility, opacity, background-color, border-color;
     -webkit-transition-property: visibility, opacity, background-color, border-color;
@@ -5666,7 +5644,7 @@ table {
     .autoflow .l-autoflow-header span {
       vertical-align: middle; }
     /* line 48, ../../../../general/res/sass/_autoflow.scss */
-    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu, .autoflow .l-autoflow-header .change-column-width.select {
+    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu {
       -moz-transition-property: visibility, opacity, background-color, border-color;
       -o-transition-property: visibility, opacity, background-color, border-color;
       -webkit-transition-property: visibility, opacity, background-color, border-color;
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index c4357b8d06..502a672ed6 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -58,6 +58,10 @@ $colorInputFg: pullForward($colorBodyFg, 20%);
 $colorFormText: rgba(#fff, 0.5);
 $colorInputIcon: pushBack($colorBodyFg, 15%);
 
+// Selects
+$colorSelectBg: $colorBtnBg;
+$colorSelectFg: $colorBtnFg;
+
 // Limits and staleness colors
 $colorTelemFresh: pullForward($colorBodyFg, 20%);
 $colorTelemStale: pushBack($colorBodyFg, 20%);
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 673b25354b..625440be25 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -98,27 +98,6 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /*********************************************** CONTROLS, FORM ELEMENTS */
-/*
-
-@mixin input-base($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include appearance(none);
-    @include border-radius($controlCr);
-    @include box-sizing(border-box);
-    @include box-shadow(inset rgba(black, 0.65) 0 1px 4px);
-    background: rgba(#fff, 0.1);
-    border: none;
-    color: lighten($fg, 20%);
-    outline: none;
-    &.error {
-        background: rgba(red, 0.5);
-    }
-}
-
-@mixin nice-input($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include input-base($bg, $fg);
-    padding: 0 $interiorMarginSm;
-}
-*/
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -394,7 +373,7 @@ mct-container {
   display: block; }
 
 /* line 97, ../../../../general/res/sass/_global.scss */
-.abs, .s-menu span.l-click-area, .select span.l-click-area {
+.abs, .s-menu span.l-click-area {
   position: absolute;
   top: 0;
   right: 0;
@@ -464,7 +443,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 26, ../../../../general/res/sass/_about.scss */
-.l-about.abs, .s-menu span.l-about.l-click-area, .select span.l-about.l-click-area {
+.l-about.abs, .s-menu span.l-about.l-click-area {
   overflow: auto; }
 /* line 31, ../../../../general/res/sass/_about.scss */
 .l-about .l-logo-holder {
@@ -514,7 +493,7 @@ mct-container {
   .s-about .s-logo-openmctweb {
     background-image: url("../../../../general/res/images/logo-openmctweb-shdw.svg"); }
   /* line 81, ../../../../general/res/sass/_about.scss */
-  .s-about .s-btn, .s-about .s-menu, .s-about .select {
+  .s-about .s-btn, .s-about .s-menu {
     line-height: 2em; }
   /* line 85, ../../../../general/res/sass/_about.scss */
   .s-about .l-licenses-software .l-license-software {
@@ -555,7 +534,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 24, ../../../../general/res/sass/_text.scss */
-.abs.l-standalone, .s-menu span.l-standalone.l-click-area, .select span.l-standalone.l-click-area {
+.abs.l-standalone, .s-menu span.l-standalone.l-click-area {
   padding: 5% 20%; }
 
 /* line 29, ../../../../general/res/sass/_text.scss */
@@ -639,7 +618,7 @@ mct-container {
   display: inline-block; }
 
 /* line 55, ../../../../general/res/sass/_icons.scss */
-.s-menu .invoke-menu, .select .invoke-menu,
+.s-menu .invoke-menu,
 .icon.major .invoke-menu {
   margin-left: 3px; }
 
@@ -1272,7 +1251,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 25, ../../../../general/res/sass/controls/_buttons.scss */
-.s-btn, .s-menu, .select {
+.s-btn, .s-menu {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -1287,20 +1266,23 @@ mct-container {
   padding: 0 7.5px;
   font-size: 0.7rem; }
   /* line 35, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn .icon, .s-menu .icon, .select .icon {
+  .s-btn .icon, .s-menu .icon {
     font-size: 0.8rem;
     color: #0099cc; }
   /* line 40, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn .title-label, .s-menu .title-label, .select .title-label {
+  .s-btn .title-label, .s-menu .title-label {
     vertical-align: top; }
   /* line 44, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.sm, .sm.s-menu, .sm.select {
-    padding: 0 5px; }
+  .s-btn.lg, .lg.s-menu {
+    font-size: 1rem; }
   /* line 48, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.vsm, .vsm.s-menu, .vsm.select {
-    padding: 0 2.5px; }
+  .s-btn.sm, .sm.s-menu {
+    padding: 0 5px; }
   /* line 52, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.major, .major.s-menu, .major.select {
+  .s-btn.vsm, .vsm.s-menu {
+    padding: 0 2.5px; }
+  /* line 56, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.major, .major.s-menu {
     background-color: #0099cc;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -1320,17 +1302,17 @@ mct-container {
     transition: background, 0.25s;
     text-shadow: none; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
-    .s-btn.major .icon, .major.s-menu .icon, .major.select .icon {
+    .s-btn.major .icon, .major.s-menu .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 277, ../../../../general/res/sass/_mixins.scss */
-      .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover, .major.select:not(.disabled):hover {
+      .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover {
         background: deepskyblue; }
         /* line 279, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.major:not(.disabled):hover > .icon, .major.s-menu:not(.disabled):hover > .icon, .major.select:not(.disabled):hover > .icon {
+        .s-btn.major:not(.disabled):hover > .icon, .major.s-menu:not(.disabled):hover > .icon {
           color: white; } }
-  /* line 58, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn:not(.major), .s-menu:not(.major), .select:not(.major) {
+  /* line 62, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn:not(.major), .s-menu:not(.major) {
     background-color: #969696;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -1350,20 +1332,20 @@ mct-container {
     transition: background, 0.25s;
     text-shadow: none; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
-    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon, .select:not(.major) .icon {
+    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon {
       color: #eee; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 277, ../../../../general/res/sass/_mixins.scss */
-      .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover, .select:not(.major):not(.disabled):hover {
+      .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover {
         background: #0099cc; }
         /* line 279, ../../../../general/res/sass/_mixins.scss */
-        .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon, .select:not(.major):not(.disabled):hover > .icon {
+        .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon {
           color: white; } }
-  /* line 67, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before, .pause-play.select .icon:before {
+  /* line 71, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before {
     content: "\0000F1"; }
-  /* line 70, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.pause-play.paused, .pause-play.paused.s-menu, .pause-play.paused.select {
+  /* line 74, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.pause-play.paused, .pause-play.paused.s-menu {
     background-color: #ff9900;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -1383,17 +1365,17 @@ mct-container {
     transition: background, 0.25s;
     text-shadow: none; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
-    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
+    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 277, ../../../../general/res/sass/_mixins.scss */
-      .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu:not(.disabled):hover, .pause-play.paused.select:not(.disabled):hover {
+      .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu:not(.disabled):hover {
         background: #ffad33; }
         /* line 279, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon, .pause-play.paused.select:not(.disabled):hover > .icon {
+        .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon {
           color: white; } }
-    /* line 72, ../../../../general/res/sass/controls/_buttons.scss */
-    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon, .pause-play.paused.select .icon {
+    /* line 76, ../../../../general/res/sass/controls/_buttons.scss */
+    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon {
       -moz-animation-name: pulse;
       -webkit-animation-name: pulse;
       animation-name: pulse;
@@ -1409,24 +1391,24 @@ mct-container {
       -moz-animation-timing-function: ease-in-out;
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out; }
-      /* line 74, ../../../../general/res/sass/controls/_buttons.scss */
-      .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu .icon :before, .pause-play.paused.select .icon :before {
+      /* line 78, ../../../../general/res/sass/controls/_buttons.scss */
+      .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu .icon :before {
         content: "\0000EF"; }
-  /* line 82, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before, .show-thumbs.select .icon:before {
+  /* line 86, ../../../../general/res/sass/controls/_buttons.scss */
+  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before {
     content: "\000039"; }
 
-/* line 88, ../../../../general/res/sass/controls/_buttons.scss */
+/* line 92, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
-  /* line 94, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .s-btn, .l-btn-set .s-menu, .l-btn-set .select {
+  /* line 98, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .s-btn, .l-btn-set .s-menu {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
-  /* line 100, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu, .l-btn-set .first .select {
+  /* line 104, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu {
     -moz-border-radius-topleft: 4px;
     -webkit-border-top-left-radius: 4px;
     border-top-left-radius: 4px;
@@ -1434,8 +1416,8 @@ mct-container {
     -webkit-border-bottom-left-radius: 4px;
     border-bottom-left-radius: 4px;
     margin-left: 0; }
-  /* line 107, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu, .l-btn-set .last .select {
+  /* line 111, ../../../../general/res/sass/controls/_buttons.scss */
+  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu {
     -moz-border-radius-topright: 4px;
     -webkit-border-top-right-radius: 4px;
     border-top-right-radius: 4px;
@@ -1443,8 +1425,8 @@ mct-container {
     -webkit-border-bottom-right-radius: 4px;
     border-bottom-right-radius: 4px; }
 
-/* line 114, ../../../../general/res/sass/controls/_buttons.scss */
-.paused:not(.s-btn):not(.s-menu):not(.select) {
+/* line 118, ../../../../general/res/sass/controls/_buttons.scss */
+.paused:not(.s-btn):not(.s-menu) {
   border-color: #ff9900 !important;
   color: #ff9900 !important; }
 
@@ -1732,7 +1714,7 @@ label.checkbox.custom {
     margin-left: 0; }
 
 /* line 208, ../../../../general/res/sass/controls/_controls.scss */
-.s-menu label.checkbox.custom, .select label.checkbox.custom {
+.s-menu label.checkbox.custom {
   margin-left: 5px; }
 
 /* line 213, ../../../../general/res/sass/controls/_controls.scss */
@@ -2027,37 +2009,37 @@ label.checkbox.custom {
  *****************************************************************************/
 /******************************************************** MENU BUTTONS */
 /* line 31, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .icon, .select .icon {
+.s-menu .icon {
   font-size: 120%; }
 /* line 35, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .title-label, .select .title-label {
+.s-menu .title-label {
   margin-left: 3px; }
 /* line 39, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu:after, .select:after {
-  color: rgba(255, 255, 255, 0.4);
+.s-menu:after {
+  text-shadow: none;
   content: '\76';
   display: inline-block;
   font-family: 'symbolsfont';
   margin-left: 3px;
-  text-shadow: none;
-  vertical-align: top; }
-/* line 50, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu.create-btn .title-label, .create-btn.select .title-label {
+  vertical-align: top;
+  color: rgba(255, 255, 255, 0.4); }
+/* line 46, ../../../../general/res/sass/controls/_menus.scss */
+.s-menu.create-btn .title-label {
   font-size: 1rem; }
-/* line 58, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .menu, .select .menu {
+/* line 54, ../../../../general/res/sass/controls/_menus.scss */
+.s-menu .menu {
   left: 0;
   text-align: left; }
-  /* line 61, ../../../../general/res/sass/controls/_menus.scss */
-  .s-menu .menu .ui-symbol.icon, .select .menu .ui-symbol.icon {
+  /* line 57, ../../../../general/res/sass/controls/_menus.scss */
+  .s-menu .menu .ui-symbol.icon {
     width: 12px; }
 
 /******************************************************** MENUS THEMSELVES */
-/* line 68, ../../../../general/res/sass/controls/_menus.scss */
+/* line 64, ../../../../general/res/sass/controls/_menus.scss */
 .menu-element {
   cursor: pointer;
   position: relative; }
-  /* line 74, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 70, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .menu {
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -2079,16 +2061,16 @@ label.checkbox.custom {
     padding: 3px 0;
     position: absolute;
     z-index: 10; }
-    /* line 83, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 79, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .menu ul {
       margin: 0;
       padding: 0; }
-      /* line 345, ../../../../general/res/sass/_mixins.scss */
+      /* line 329, ../../../../general/res/sass/_mixins.scss */
       .menu-element .menu ul li {
         list-style-type: none;
         margin: 0;
         padding: 0; }
-      /* line 85, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 81, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .menu ul li {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
@@ -2099,70 +2081,70 @@ label.checkbox.custom {
         padding: 3px 10px 3px 30px;
         position: relative;
         white-space: nowrap; }
-        /* line 93, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 89, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li:first-child {
           border: none; }
-        /* line 96, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 92, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li:hover {
           background: #e6e6e6;
           color: #4d4d4d; }
-          /* line 99, ../../../../general/res/sass/controls/_menus.scss */
+          /* line 95, ../../../../general/res/sass/controls/_menus.scss */
           .menu-element .menu ul li:hover .icon {
             color: #0099cc; }
-        /* line 103, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 99, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .menu ul li .type-icon {
           left: 10px; }
-  /* line 110, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 106, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .menu,
   .menu-element .context-menu,
   .menu-element .checkbox-menu,
   .menu-element .super-menu {
     pointer-events: auto; }
-    /* line 116, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 112, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .menu ul li a,
     .menu-element .context-menu ul li a,
     .menu-element .checkbox-menu ul li a,
     .menu-element .super-menu ul li a {
       color: #4d4d4d; }
-    /* line 119, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 115, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .menu ul li .icon,
     .menu-element .context-menu ul li .icon,
     .menu-element .checkbox-menu ul li .icon,
     .menu-element .super-menu ul li .icon {
       color: #0099cc; }
-    /* line 122, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 118, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .menu ul li .type-icon,
     .menu-element .context-menu ul li .type-icon,
     .menu-element .checkbox-menu ul li .type-icon,
     .menu-element .super-menu ul li .type-icon {
       left: 5px; }
-  /* line 134, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 130, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .checkbox-menu ul li {
     padding-left: 50px; }
-    /* line 136, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 132, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .checkbox {
       position: absolute;
       left: 5px;
       top: 0.53333rem; }
-      /* line 141, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 137, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .checkbox-menu ul li .checkbox em {
         height: 0.7rem;
         width: 0.7rem; }
-        /* line 144, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 140, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .checkbox-menu ul li .checkbox em:before {
           font-size: 7px !important;
           height: 0.7rem;
           width: 0.7rem;
           line-height: 0.7rem; }
-    /* line 152, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 148, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .checkbox-menu ul li .type-icon {
       left: 25px; }
-  /* line 158, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 154, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .super-menu {
     display: block;
     width: 500px;
     height: 480px; }
-    /* line 166, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 162, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .contents {
       overflow: hidden;
       position: absolute;
@@ -2172,12 +2154,12 @@ label.checkbox.custom {
       left: 5px;
       width: auto;
       height: auto; }
-    /* line 169, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 165, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .pane {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box; }
-      /* line 171, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 167, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.left {
         border-right: 1px solid #e6e6e6;
         left: 0;
@@ -2186,20 +2168,20 @@ label.checkbox.custom {
         width: 50%;
         overflow-x: hidden;
         overflow-y: auto; }
-        /* line 181, ../../../../general/res/sass/controls/_menus.scss */
+        /* line 177, ../../../../general/res/sass/controls/_menus.scss */
         .menu-element .super-menu .pane.left ul li {
           -moz-border-radius: 4px;
           -webkit-border-radius: 4px;
           border-radius: 4px;
           padding-left: 30px;
           border-top: none; }
-      /* line 188, ../../../../general/res/sass/controls/_menus.scss */
+      /* line 184, ../../../../general/res/sass/controls/_menus.scss */
       .menu-element .super-menu .pane.right {
         left: auto;
         right: 0;
         padding: 25px;
         width: 50%; }
-    /* line 198, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 194, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.icon {
       color: #0099cc;
       position: relative;
@@ -2209,40 +2191,40 @@ label.checkbox.custom {
       line-height: 150px;
       margin-bottom: 25px;
       text-align: center; }
-    /* line 209, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 205, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.title {
       color: #666;
       font-size: 1.2em;
       margin-bottom: 0.5em; }
-    /* line 214, ../../../../general/res/sass/controls/_menus.scss */
+    /* line 210, ../../../../general/res/sass/controls/_menus.scss */
     .menu-element .super-menu .menu-item-description .desc-area.description {
       color: #666;
       font-size: 0.8em;
       line-height: 1.5em; }
-  /* line 223, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 219, ../../../../general/res/sass/controls/_menus.scss */
   .menu-element .context-menu, .menu-element .checkbox-menu {
     font-size: 0.80rem; }
 
-/* line 228, ../../../../general/res/sass/controls/_menus.scss */
+/* line 224, ../../../../general/res/sass/controls/_menus.scss */
 .context-menu-holder {
   pointer-events: none;
   position: absolute;
   height: 200px;
   width: 170px;
   z-index: 70; }
-  /* line 234, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 230, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder .context-menu-wrapper {
     position: absolute;
     height: 100%;
     width: 100%; }
-  /* line 241, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 237, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
     right: 0; }
-  /* line 244, ../../../../general/res/sass/controls/_menus.scss */
+  /* line 240, ../../../../general/res/sass/controls/_menus.scss */
   .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
     bottom: 0; }
 
-/* line 249, ../../../../general/res/sass/controls/_menus.scss */
+/* line 245, ../../../../general/res/sass/controls/_menus.scss */
 .btn-bar.right .menu,
 .menus-to-left .menu {
   left: auto;
@@ -2612,7 +2594,7 @@ textarea {
  *****************************************************************************/
 /* line 22, ../../../../general/res/sass/forms/_selects.scss */
 .select {
-  background-color: #969696;
+  background-color: #d9d9d9;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
@@ -2631,12 +2613,13 @@ textarea {
   transition: background, 0.25s;
   text-shadow: none;
   margin: 0 0 2px 2px;
+  padding: 0 5px;
   overflow: hidden;
   position: relative; }
   /* line 272, ../../../../general/res/sass/_mixins.scss */
   .select .icon {
     color: #eee; }
-  /* line 30, ../../../../general/res/sass/forms/_selects.scss */
+  /* line 28, ../../../../general/res/sass/forms/_selects.scss */
   .select select {
     -moz-appearance: none;
     -webkit-appearance: none;
@@ -2644,15 +2627,23 @@ textarea {
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     background: none;
-    color: #fff;
+    color: #666;
+    cursor: pointer;
     border: none !important;
     padding: 4px 25px 2px 0px;
     width: 120%; }
-    /* line 39, ../../../../general/res/sass/forms/_selects.scss */
+    /* line 37, ../../../../general/res/sass/forms/_selects.scss */
     .select select option {
       margin: 5px 0; }
-  /* line 43, ../../../../general/res/sass/forms/_selects.scss */
+  /* line 41, ../../../../general/res/sass/forms/_selects.scss */
   .select:after {
+    text-shadow: none;
+    content: '\76';
+    display: inline-block;
+    font-family: 'symbolsfont';
+    margin-left: 3px;
+    vertical-align: top;
+    color: rgba(102, 102, 102, 0.4);
     position: absolute;
     right: 5px;
     top: 0; }
@@ -2713,11 +2704,9 @@ textarea {
 .channel-selector .btns-add-remove {
   margin-top: 150px; }
   /* line 39, ../../../../general/res/sass/forms/_channel-selector.scss */
-  .channel-selector .btns-add-remove .btn {
+  .channel-selector .btns-add-remove .s-btn, .channel-selector .btns-add-remove .s-menu {
     display: block;
-    font-size: 1.5em;
     margin-bottom: 5px;
-    padding: 10px;
     text-align: center; }
 
 /*****************************************************************************
@@ -2996,38 +2985,33 @@ span.req {
 .bar .icon.major {
   margin-right: 5px; }
 /* line 70, ../../../../general/res/sass/user-environ/_layout.scss */
-.bar.abs, .s-menu span.bar.l-click-area, .select span.bar.l-click-area {
+.bar.abs, .s-menu span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
   /* line 73, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs.left, .s-menu span.bar.left.l-click-area, .select span.bar.left.l-click-area,
+  .bar.abs.left, .s-menu span.bar.left.l-click-area,
   .bar.abs .left,
-  .s-menu span.bar.l-click-area .left,
-  .select span.bar.l-click-area .left {
+  .s-menu span.bar.l-click-area .left {
     width: 45%;
     right: auto; }
   /* line 78, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs.right, .s-menu span.bar.right.l-click-area, .select span.bar.right.l-click-area,
+  .bar.abs.right, .s-menu span.bar.right.l-click-area,
   .bar.abs .right,
-  .s-menu span.bar.l-click-area .right,
-  .select span.bar.l-click-area .right {
+  .s-menu span.bar.l-click-area .right {
     width: 45%;
     left: auto;
     text-align: right; }
     /* line 83, ../../../../general/res/sass/user-environ/_layout.scss */
-    .bar.abs.right .icon.major, .s-menu span.bar.right.l-click-area .icon.major, .select span.bar.right.l-click-area .icon.major,
+    .bar.abs.right .icon.major, .s-menu span.bar.right.l-click-area .icon.major,
     .bar.abs .right .icon.major,
-    .s-menu span.bar.l-click-area .right .icon.major,
-    .select span.bar.l-click-area .right .icon.major {
+    .s-menu span.bar.l-click-area .right .icon.major {
       margin-left: 15px; }
   /* line 89, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs .l-flex .left, .s-menu span.bar.l-click-area .l-flex .left, .select span.bar.l-click-area .l-flex .left,
+  .bar.abs .l-flex .left, .s-menu span.bar.l-click-area .l-flex .left,
   .bar.abs .l-flex .right,
-  .s-menu span.bar.l-click-area .l-flex .right,
-  .select span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .s-menu span.bar.l-flex.l-click-area .left, .select span.bar.l-flex.l-click-area .left,
+  .s-menu span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .s-menu span.bar.l-flex.l-click-area .left,
   .bar.abs.l-flex .right,
-  .s-menu span.bar.l-flex.l-click-area .right,
-  .select span.bar.l-flex.l-click-area .right {
+  .s-menu span.bar.l-flex.l-click-area .right {
     width: auto; }
 
 /* line 98, ../../../../general/res/sass/user-environ/_layout.scss */
@@ -3165,12 +3149,10 @@ span.req {
     overflow: auto;
     top: 64px; }
   /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area, .pane.items .object-browse-bar .select span.left.l-click-area, .select .pane.items .object-browse-bar span.left.l-click-area,
+  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
   .pane.items .object-browse-bar .s-menu span.right.l-click-area,
-  .s-menu .pane.items .object-browse-bar span.right.l-click-area,
-  .pane.items .object-browse-bar .select span.right.l-click-area,
-  .select .pane.items .object-browse-bar span.right.l-click-area {
+  .s-menu .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
   /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-holder {
@@ -3200,17 +3182,13 @@ span.req {
       right: 3px; }
 
 /* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
-.object-browse-bar .s-btn, .object-browse-bar .s-menu, .object-browse-bar .select,
+.object-browse-bar .s-btn, .object-browse-bar .s-menu,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu,
-.top-bar .buttons-main .select,
 .top-bar .s-menu,
-.top-bar .select,
 .tool-bar .s-btn,
 .tool-bar .s-menu,
-.tool-bar .select,
-.tool-bar .s-menu,
-.tool-bar .select {
+.tool-bar .s-menu {
   height: 25px;
   line-height: 25px;
   vertical-align: top; }
@@ -3606,13 +3584,13 @@ span.req {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 23, ../../../../general/res/sass/search/_search.scss */
-.abs.search-holder, .s-menu span.search-holder.l-click-area, .select span.search-holder.l-click-area {
+.abs.search-holder, .s-menu span.search-holder.l-click-area {
   height: 25px;
   bottom: 0;
   top: 23px;
   z-index: 5; }
   /* line 27, ../../../../general/res/sass/search/_search.scss */
-  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area, .select span.search-holder.active.l-click-area {
+  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area {
     height: auto;
     bottom: 0; }
 
@@ -3874,14 +3852,14 @@ span.req {
   height: 30px;
   text-align: right; }
   /* line 67, ../../../../general/res/sass/overlay/_overlay.scss */
-  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu, .overlay .bottom-bar .select {
+  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu {
     font-size: 95%;
     height: 30px;
     line-height: 30px;
     margin-left: 5px;
     padding: 0 15px; }
     /* line 69, ../../../../general/res/sass/overlay/_overlay.scss */
-    .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major), .overlay .bottom-bar .select:not(.major) {
+    .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) {
       background-color: #969696;
       -moz-border-radius: 4px;
       -webkit-border-radius: 4px;
@@ -3901,14 +3879,14 @@ span.req {
       transition: background, 0.25s;
       text-shadow: none; }
       /* line 272, ../../../../general/res/sass/_mixins.scss */
-      .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon, .overlay .bottom-bar .select:not(.major) .icon {
+      .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon {
         color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
         /* line 277, ../../../../general/res/sass/_mixins.scss */
-        .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover, .overlay .bottom-bar .select:not(.major):not(.disabled):hover {
+        .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover {
           background: #7d7d7d; }
           /* line 279, ../../../../general/res/sass/_mixins.scss */
-          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .select:not(.major):not(.disabled):hover > .icon {
+          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon {
             color: white; } }
 /* line 85, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
@@ -3992,7 +3970,7 @@ ul.tree {
   -ms-user-select: none;
   -webkit-user-select: none;
   user-select: none; }
-  /* line 345, ../../../../general/res/sass/_mixins.scss */
+  /* line 329, ../../../../general/res/sass/_mixins.scss */
   ul.tree li {
     list-style-type: none;
     margin: 0;
@@ -4246,12 +4224,12 @@ ul.tree {
   .frame.child-frame.panel:hover {
     border-color: rgba(128, 128, 128, 0.2); }
 /* line 32, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame > .object-header.abs, .s-menu .frame > span.object-header.l-click-area, .select .frame > span.object-header.l-click-area {
+.frame > .object-header.abs, .s-menu .frame > span.object-header.l-click-area {
   font-size: 0.75em;
   height: 16px;
   line-height: 16px; }
 /* line 38, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame > .object-holder.abs, .s-menu .frame > span.object-holder.l-click-area, .select .frame > span.object-holder.l-click-area {
+.frame > .object-holder.abs, .s-menu .frame > span.object-holder.l-click-area {
   top: 21px; }
 /* line 41, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame .contents {
@@ -4323,7 +4301,7 @@ ul.tree {
 .edit-mode .top-bar .buttons-main {
   white-space: nowrap; }
   /* line 52, ../../../../general/res/sass/user-environ/_top-bar.scss */
-  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .s-menu span.buttons-main.l-click-area, .s-menu .edit-mode .top-bar span.buttons-main.l-click-area, .edit-mode .top-bar .select span.buttons-main.l-click-area, .select .edit-mode .top-bar span.buttons-main.l-click-area {
+  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .s-menu span.buttons-main.l-click-area, .s-menu .edit-mode .top-bar span.buttons-main.l-click-area {
     bottom: auto;
     left: auto; }
 
@@ -5531,7 +5509,7 @@ table {
 .autoflow {
   font-size: 0.75rem; }
   /* line 32, ../../../../general/res/sass/_autoflow.scss */
-  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu, .autoflow:hover .l-autoflow-header .change-column-width.select {
+  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu {
     -moz-transition-property: visibility, opacity, background-color, border-color;
     -o-transition-property: visibility, opacity, background-color, border-color;
     -webkit-transition-property: visibility, opacity, background-color, border-color;
@@ -5555,7 +5533,7 @@ table {
     .autoflow .l-autoflow-header span {
       vertical-align: middle; }
     /* line 48, ../../../../general/res/sass/_autoflow.scss */
-    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu, .autoflow .l-autoflow-header .change-column-width.select {
+    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu {
       -moz-transition-property: visibility, opacity, background-color, border-color;
       -o-transition-property: visibility, opacity, background-color, border-color;
       -webkit-transition-property: visibility, opacity, background-color, border-color;
@@ -5859,5 +5837,5 @@ table {
   vertical-align: top; }
 
 /* line 3, ../sass/_controls.scss */
-.s-btn.major .title-label, .major.s-menu .title-label, .major.select .title-label {
+.s-btn.major .title-label, .major.s-menu .title-label {
   text-transform: uppercase; }
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 770fb94e2f..f1f250baac 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -57,6 +57,8 @@ $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
+$colorSelectBg: pushBack($colorBodyFg, 45%);
+$colorSelectFg: $colorBodyFg;
 
 // Limits and staleness colors//
 $colorTelemFresh: pullForward($colorBodyFg, 20%);

From 9a7f435b61cf6fcff392833e35ba0e4e1efcf98b Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Thu, 17 Sep 2015 09:56:35 -0700
Subject: [PATCH 212/266] [Frontend] Minor color tweaks in Snow theme

open #95
vista #65
(cherry picked from commit 98c5334)
---
 platform/commonUI/themes/snow/res/css/theme-snow.css   | 4 ++--
 platform/commonUI/themes/snow/res/sass/_constants.scss | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 625440be25..43711c2d8e 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -2389,7 +2389,7 @@ label.checkbox.custom {
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(0, 0, 0, 0.05);
   color: #999999;
   font-size: 0.8em;
   padding: 5px 5px;
@@ -2594,7 +2594,7 @@ textarea {
  *****************************************************************************/
 /* line 22, ../../../../general/res/sass/forms/_selects.scss */
 .select {
-  background-color: #d9d9d9;
+  background-color: #ddd;
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index f1f250baac..1f46db34ce 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -51,13 +51,13 @@ $colorFormRequired: $colorKey;
 $colorFormValid: #33cc33;
 $colorFormError: #cc0000;
 $colorFormInvalid: #ff2200;
-$colorFormLines: rgba(#000, 0.1); // MOVED
-$colorFormSectionHeader: rgba(#000, 0.1);
+$colorFormLines: rgba(#000, 0.1);
+$colorFormSectionHeader: rgba(#000, 0.05);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
 $colorFormText: pushBack($colorBodyFg, 10%);
 $colorInputIcon: pushBack($colorBodyFg, 25%);
-$colorSelectBg: pushBack($colorBodyFg, 45%);
+$colorSelectBg: #ddd;
 $colorSelectFg: $colorBodyFg;
 
 // Limits and staleness colors//

From a233856bacd2a49d512b7d00ff053cf2cfd76364 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 13:15:42 -0700
Subject: [PATCH 213/266] [Core] Separate out contextualize

Separate out contextualize function to facilitate
reuse from entanglement bundle. nasa/openmctweb#84
---
 platform/core/bundle.json                     |  7 +-
 .../src/capabilities/CompositionCapability.js | 16 ++--
 .../src/capabilities/ContextCapability.js     |  2 +-
 platform/core/src/services/Contextualize.js   | 78 +++++++++++++++++++
 4 files changed, 92 insertions(+), 11 deletions(-)
 create mode 100644 platform/core/src/services/Contextualize.js

diff --git a/platform/core/bundle.json b/platform/core/bundle.json
index 4b33f48f35..74d85c3c25 100644
--- a/platform/core/bundle.json
+++ b/platform/core/bundle.json
@@ -149,7 +149,7 @@
             {
                 "key": "composition",
                 "implementation": "capabilities/CompositionCapability.js",
-                "depends": [ "$injector" ]
+                "depends": [ "$injector", "contextualize" ]
             },
             {
                 "key": "relationship",
@@ -204,6 +204,11 @@
             {
                 "key": "topic",
                 "implementation": "services/Topic.js"
+            },
+            {
+                "key": "contextualize",
+                "implementation": "services/Contextualize.js",
+                "depends": [ "$log" ]
             }
         ],
         "roots": [
diff --git a/platform/core/src/capabilities/CompositionCapability.js b/platform/core/src/capabilities/CompositionCapability.js
index f1b2532040..4204eddd39 100644
--- a/platform/core/src/capabilities/CompositionCapability.js
+++ b/platform/core/src/capabilities/CompositionCapability.js
@@ -25,8 +25,7 @@
  * Module defining CompositionCapability. Created by vwoeltje on 11/7/14.
  */
 define(
-    ["./ContextualDomainObject"],
-    function (ContextualDomainObject) {
+    function () {
         "use strict";
 
         /**
@@ -41,12 +40,13 @@ define(
          * @constructor
          * @implements {Capability}
          */
-        function CompositionCapability($injector, domainObject) {
+        function CompositionCapability($injector, contextualize, domainObject) {
             // Get a reference to the object service from $injector
             this.injectObjectService = function () {
                 this.objectService = $injector.get("objectService");
             };
 
+            this.contextualize = contextualize;
             this.domainObject = domainObject;
         }
 
@@ -58,19 +58,17 @@ define(
         CompositionCapability.prototype.invoke = function () {
             var domainObject = this.domainObject,
                 model = domainObject.getModel(),
+                contextualize = this.contextualize,
                 ids;
 
             // Then filter out non-existent objects,
             // and wrap others (such that they expose a
             // "context" capability)
-            function contextualize(objects) {
+            function contextualizeObjects(objects) {
                 return ids.filter(function (id) {
                     return objects[id];
                 }).map(function (id) {
-                    return new ContextualDomainObject(
-                        objects[id],
-                        domainObject
-                    );
+                    return contextualize(objects[id], domainObject);
                 });
             }
 
@@ -86,7 +84,7 @@ define(
                 this.lastModified = model.modified;
                 // Load from the underlying object service
                 this.lastPromise = this.objectService.getObjects(ids)
-                    .then(contextualize);
+                    .then(contextualizeObjects);
             }
 
             return this.lastPromise;
diff --git a/platform/core/src/capabilities/ContextCapability.js b/platform/core/src/capabilities/ContextCapability.js
index 9ffaf4a5bb..39770f9b5b 100644
--- a/platform/core/src/capabilities/ContextCapability.js
+++ b/platform/core/src/capabilities/ContextCapability.js
@@ -84,7 +84,7 @@ define(
                 parentContext =
                     parentObject && parentObject.getCapability('context'),
                 parentPath = parentContext ?
-                    parentContext.getPath() : [ this.parentObject ];
+                        parentContext.getPath() : [ this.parentObject ];
 
             return parentPath.concat([this.domainObject]);
         };
diff --git a/platform/core/src/services/Contextualize.js b/platform/core/src/services/Contextualize.js
new file mode 100644
index 0000000000..d231557369
--- /dev/null
+++ b/platform/core/src/services/Contextualize.js
@@ -0,0 +1,78 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define*/
+
+define(
+    ['../capabilities/ContextualDomainObject'],
+    function (ContextualDomainObject) {
+        "use strict";
+
+        /**
+         * Wrap a domain object such that it has a `context` capability
+         * referring to a specific parent.
+         *
+         * Usage:
+         *
+         *     contextualize(domainObject, parentObject)
+         *
+         * Attempting to contextualize an object with a parent that does
+         * not include that object in its composition may have
+         * unpredictable results; a warning will be logged if this occurs.
+         *
+         * @returns {Function}
+         * @memberof platform/core
+         */
+        function Contextualize($log) {
+            function validate(id, parentObject) {
+                var model = parentObject && parentObject.getModel(),
+                    composition = (model || {}).composition || [];
+                if (composition.indexOf(id) === -1) {
+                    $log.warn([
+                        "Attempted to contextualize",
+                        id,
+                        "in",
+                        parentObject && parentObject.getId(),
+                        "but that object does not contain",
+                        id,
+                        "in its composition.",
+                        "Unexpected behavior may follow."
+                    ].join(" "));
+                }
+            }
+
+            /**
+             * Contextualize this domain object.
+             * @param {DomainObject} domainObject the domain object
+             *        to wrap with a context
+             * @param {DomainObject} parentObject the domain object
+             *        which should appear as the contextual parent
+             */
+            return function (domainObject, parentObject) {
+                validate(domainObject.getId(), parentObject);
+                return new ContextualDomainObject(domainObject, parentObject);
+            };
+        }
+
+        return Contextualize;
+    }
+);
+

From d1c0d81120cd145dad583b054150b991fd5ac377 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 13:37:57 -0700
Subject: [PATCH 214/266] [Entanglement] Contextualize objects by location

Add a context capability to domain objects based
on their location at the time they are loaded.
nasa/openmctweb#84
---
 platform/entanglement/bundle.json             |  6 ++
 .../src/services/LocatingObjectDecorator.js   | 88 +++++++++++++++++++
 2 files changed, 94 insertions(+)
 create mode 100644 platform/entanglement/src/services/LocatingObjectDecorator.js

diff --git a/platform/entanglement/bundle.json b/platform/entanglement/bundle.json
index f85c5cdf4c..61c3d90539 100644
--- a/platform/entanglement/bundle.json
+++ b/platform/entanglement/bundle.json
@@ -37,6 +37,12 @@
                 "type": "decorator",
                 "provides": "creationService",
                 "implementation": "services/LocatingCreationDecorator.js"
+            },
+            {
+                "type": "decorator",
+                "provides": "objectService",
+                "implementation": "services/LocatingObjectDecorator.js",
+                "depends": ["contextualize", "$q", "$log"]
             }
         ],
         "controllers": [
diff --git a/platform/entanglement/src/services/LocatingObjectDecorator.js b/platform/entanglement/src/services/LocatingObjectDecorator.js
new file mode 100644
index 0000000000..1993c9cc94
--- /dev/null
+++ b/platform/entanglement/src/services/LocatingObjectDecorator.js
@@ -0,0 +1,88 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*global define */
+
+define(
+    function () {
+        "use strict";
+
+        /**
+         * Ensures that domain objects are loaded with a context capability
+         * that reflects their location.
+         * @constructor
+         * @implements {ObjectService}
+         * @memberof platform/entanglement
+         */
+        function LocatingObjectDecorator(contextualize, $q, $log, objectService) {
+            this.contextualize = contextualize;
+            this.$log = $log;
+            this.objectService = objectService;
+            this.$q = $q;
+        }
+
+        LocatingObjectDecorator.prototype.getObjects = function (ids) {
+            var $q = this.$q,
+                $log = this.$log,
+                contextualize = this.contextualize,
+                objectService = this.objectService,
+                result = {};
+
+            function loadObjectInContext(id, exclude) {
+                function attachContextById(domainObject, locationId) {
+                    return loadObjectInContext(locationId, exclude)
+                        .then(function (parent) {
+                            return contextualize(domainObject, parent);
+                        });
+                }
+
+                function attachContextForLocation(domainObject) {
+                    var model = domainObject && domainObject.getModel(),
+                        location = (model || {}).location;
+
+                    // Don't pursue a context if we encounter this
+                    // object again during this sequence of invocations.
+                    exclude[id] = true;
+
+                    return location ?
+                            attachContextById(domainObject, location) :
+                            domainObject;
+                }
+
+                return objectService.getObjects([id]).then(function (objects) {
+                    return exclude[id] ?
+                            objects[id] : // Don't loop indefinitely.
+                            attachContextForLocation(objects[id]);
+                });
+            }
+
+            ids.forEach(function (id) {
+                result[id] = loadObjectInContext(id, {});
+            });
+
+            return $q.all(result);
+        };
+
+        return LocatingObjectDecorator;
+    }
+);
+

From 88b8528aafbec2fadb80d71f7e010e6e9d5510fd Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 13:42:08 -0700
Subject: [PATCH 215/266] [Entanglement] Log a warning on cycle detection

nasa/openmctweb#84
---
 .../src/services/LocatingObjectDecorator.js       | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/platform/entanglement/src/services/LocatingObjectDecorator.js b/platform/entanglement/src/services/LocatingObjectDecorator.js
index 1993c9cc94..6fde642ee0 100644
--- a/platform/entanglement/src/services/LocatingObjectDecorator.js
+++ b/platform/entanglement/src/services/LocatingObjectDecorator.js
@@ -69,9 +69,18 @@ define(
                 }
 
                 return objectService.getObjects([id]).then(function (objects) {
-                    return exclude[id] ?
-                            objects[id] : // Don't loop indefinitely.
-                            attachContextForLocation(objects[id]);
+                    if (exclude[id]) {
+                        $log.warn([
+                            "LocatingObjectDecorator detected a cycle",
+                            "while attempted to define a context for",
+                            id + ";",
+                            "no context will be added and unexpected behavior",
+                            "may follow."
+                        ].join(" "));
+                        return objects[id];
+                    }
+
+                    return attachContextForLocation(objects[id]);
                 });
             }
 

From c4aed5716521ab199003a1b31fe1604f6c2f3c28 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 13:51:47 -0700
Subject: [PATCH 216/266] [Entanglement] Refactor LocatingObjectDecorator

Rearrange code in LocatingObjectDecorator to make it easier to
follow; add comments.
---
 .../src/services/LocatingObjectDecorator.js   | 43 ++++++++++---------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/platform/entanglement/src/services/LocatingObjectDecorator.js b/platform/entanglement/src/services/LocatingObjectDecorator.js
index 6fde642ee0..f4be5f1900 100644
--- a/platform/entanglement/src/services/LocatingObjectDecorator.js
+++ b/platform/entanglement/src/services/LocatingObjectDecorator.js
@@ -47,28 +47,19 @@ define(
                 objectService = this.objectService,
                 result = {};
 
+            // Load a single object using location to establish a context
             function loadObjectInContext(id, exclude) {
-                function attachContextById(domainObject, locationId) {
-                    return loadObjectInContext(locationId, exclude)
-                        .then(function (parent) {
-                            return contextualize(domainObject, parent);
-                        });
-                }
-
-                function attachContextForLocation(domainObject) {
-                    var model = domainObject && domainObject.getModel(),
+                function attachContext(objects) {
+                    var domainObject = (objects || {})[id],
+                        model = domainObject && domainObject.getModel(),
                         location = (model || {}).location;
 
-                    // Don't pursue a context if we encounter this
-                    // object again during this sequence of invocations.
-                    exclude[id] = true;
+                    // If no location is defined, we can't look up a context.
+                    if (!location) {
+                        return domainObject;
+                    }
 
-                    return location ?
-                            attachContextById(domainObject, location) :
-                            domainObject;
-                }
-
-                return objectService.getObjects([id]).then(function (objects) {
+                    // Avoid looping indefinitely on cyclical locations
                     if (exclude[id]) {
                         $log.warn([
                             "LocatingObjectDecorator detected a cycle",
@@ -77,11 +68,21 @@ define(
                             "no context will be added and unexpected behavior",
                             "may follow."
                         ].join(" "));
-                        return objects[id];
+                        return domainObject;
                     }
 
-                    return attachContextForLocation(objects[id]);
-                });
+                    // Record that we've visited this ID to detect cycles.
+                    exclude[id] = true;
+
+                    // Do the recursive step to get the parent...
+                    return loadObjectInContext(location, exclude)
+                        .then(function (parent) {
+                            // ...and then contextualize with it!
+                            return contextualize(domainObject, parent);
+                        });
+                }
+
+                return objectService.getObjects([id]).then(attachContext);
             }
 
             ids.forEach(function (id) {

From bc4c7feb6c019993abc16adf0e71beb1fae69d40 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 13:57:20 -0700
Subject: [PATCH 217/266] [Core] Update spec for CompositionCapability

...to reflect changes to separate out contextualization
of domain objects
---
 .../capabilities/CompositionCapabilitySpec.js  | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/platform/core/test/capabilities/CompositionCapabilitySpec.js b/platform/core/test/capabilities/CompositionCapabilitySpec.js
index 518cb2e795..c6f6b76aba 100644
--- a/platform/core/test/capabilities/CompositionCapabilitySpec.js
+++ b/platform/core/test/capabilities/CompositionCapabilitySpec.js
@@ -25,8 +25,11 @@
  * CompositionCapabilitySpec. Created by vwoeltje on 11/6/14.
  */
 define(
-    ["../../src/capabilities/CompositionCapability"],
-    function (CompositionCapability) {
+    [
+        "../../src/capabilities/CompositionCapability",
+        "../../src/capabilities/ContextualDomainObject"
+    ],
+    function (CompositionCapability, ContextualDomainObject) {
         "use strict";
 
         var DOMAIN_OBJECT_METHODS = [
@@ -40,6 +43,7 @@ define(
         describe("The composition capability", function () {
             var mockDomainObject,
                 mockInjector,
+                mockContextualize,
                 mockObjectService,
                 composition;
 
@@ -70,11 +74,19 @@ define(
                         return (name === "objectService") && mockObjectService;
                     }
                 };
+                mockContextualize = jasmine.createSpy('contextualize');
+
+                // Provide a minimal (e.g. no error-checking) implementation
+                // of contextualize for simplicity
+                mockContextualize.andCallFake(function (domainObject, parentObject) {
+                    return new ContextualDomainObject(domainObject, parentObject);
+                });
 
                 mockObjectService.getObjects.andReturn(mockPromise([]));
 
                 composition = new CompositionCapability(
                     mockInjector,
+                    mockContextualize,
                     mockDomainObject
                 );
             });
@@ -113,4 +125,4 @@ define(
 
         });
     }
-);
\ No newline at end of file
+);

From d92ae4d508e2ee7f5274b35e57189a5e9454a856 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 14:06:22 -0700
Subject: [PATCH 218/266] [Core] Add tests for 'contextualize'

---
 .../core/test/services/ContextualizeSpec.js   | 90 +++++++++++++++++++
 platform/core/test/suite.json                 |  1 +
 2 files changed, 91 insertions(+)
 create mode 100644 platform/core/test/services/ContextualizeSpec.js

diff --git a/platform/core/test/services/ContextualizeSpec.js b/platform/core/test/services/ContextualizeSpec.js
new file mode 100644
index 0000000000..7acefcc600
--- /dev/null
+++ b/platform/core/test/services/ContextualizeSpec.js
@@ -0,0 +1,90 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../../src/services/Contextualize"],
+    function (Contextualize) {
+        "use strict";
+
+        var DOMAIN_OBJECT_METHODS = [
+            'getId',
+            'getModel',
+            'getCapability',
+            'hasCapability',
+            'useCapability'
+        ];
+
+        describe("The 'contextualize' service", function () {
+            var mockLog,
+                mockDomainObject,
+                mockParentObject,
+                testParentModel,
+                contextualize;
+
+            beforeEach(function () {
+                testParentModel = { composition: ["abc"] };
+
+                mockLog = jasmine.createSpyObj(
+                    "$log",
+                    [ "error", "warn", "info", "debug" ]
+                );
+
+                mockDomainObject =
+                    jasmine.createSpyObj('domainObject', DOMAIN_OBJECT_METHODS);
+                mockParentObject =
+                    jasmine.createSpyObj('parentObject', DOMAIN_OBJECT_METHODS);
+
+                mockDomainObject.getId.andReturn("abc");
+                mockDomainObject.getModel.andReturn({});
+                mockParentObject.getId.andReturn("parent");
+                mockParentObject.getModel.andReturn(testParentModel);
+
+                contextualize = new Contextualize(mockLog);
+            });
+
+            it("attaches a context capability", function () {
+                var contextualizedObject =
+                    contextualize(mockDomainObject, mockParentObject);
+
+                expect(contextualizedObject.getId()).toEqual("abc");
+                expect(contextualizedObject.getCapability("context"))
+                    .toBeDefined();
+                expect(contextualizedObject.getCapability("context").getParent())
+                    .toBe(mockParentObject);
+            });
+
+            it("issues a warning if composition does not match", function () {
+                // Precondition - normally it should not issue a warning
+                contextualize(mockDomainObject, mockParentObject);
+                expect(mockLog.warn).not.toHaveBeenCalled();
+
+                testParentModel.composition = ["xyz"];
+
+                contextualize(mockDomainObject, mockParentObject);
+                expect(mockLog.warn).toHaveBeenCalled();
+            });
+
+
+        });
+    }
+);
diff --git a/platform/core/test/suite.json b/platform/core/test/suite.json
index e2a7d8f57a..012a1b3503 100644
--- a/platform/core/test/suite.json
+++ b/platform/core/test/suite.json
@@ -24,6 +24,7 @@
     "objects/DomainObject",
     "objects/DomainObjectProvider",
 
+    "services/Contextualize",
     "services/Now",
     "services/Throttle",
     "services/Topic",

From 411f0d904d4cb476a697371420fbb4c9e1fdc902 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 14:45:05 -0700
Subject: [PATCH 219/266] [Entanglement] Test LocatingObjectDecorator

---
 .../services/LocatingObjectDecoratorSpec.js   | 135 ++++++++++++++++++
 platform/entanglement/test/suite.json         |   1 +
 2 files changed, 136 insertions(+)
 create mode 100644 platform/entanglement/test/services/LocatingObjectDecoratorSpec.js

diff --git a/platform/entanglement/test/services/LocatingObjectDecoratorSpec.js b/platform/entanglement/test/services/LocatingObjectDecoratorSpec.js
new file mode 100644
index 0000000000..5946f982ff
--- /dev/null
+++ b/platform/entanglement/test/services/LocatingObjectDecoratorSpec.js
@@ -0,0 +1,135 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*global define,describe,beforeEach,it,jasmine,expect */
+
+define(
+    [
+        '../../src/services/LocatingObjectDecorator'
+    ],
+    function (LocatingObjectDecorator) {
+        "use strict";
+
+        describe("LocatingObjectDecorator", function () {
+            var mockContextualize,
+                mockQ,
+                mockLog,
+                mockObjectService,
+                mockCallback,
+                testObjects,
+                testModels,
+                decorator;
+
+            function testPromise(v) {
+                return (v || {}).then ? v : {
+                    then: function (callback) {
+                        return testPromise(callback(v));
+                    }
+                };
+            }
+
+            beforeEach(function () {
+                // A <- B <- C
+                // D <-> E, to verify cycle detection
+                testModels = {
+                    a: { name: "A" },
+                    b: { name: "B", location: "a" },
+                    c: { name: "C", location: "b" },
+                    d: { name: "D", location: "e" },
+                    e: { name: "E", location: "d" }
+                };
+                testObjects = {};
+
+                mockContextualize = jasmine.createSpy("contextualize");
+                mockQ = jasmine.createSpyObj("$q", ["when", "all"]);
+                mockLog =
+                    jasmine.createSpyObj("$log", ["error", "warn", "info", "debug"]);
+                mockObjectService =
+                    jasmine.createSpyObj("objectService", ["getObjects"]);
+
+                mockContextualize.andCallFake(function (domainObject, parentObject) {
+                    // Not really what contextualize does, but easy to test!
+                    return {
+                        testObject: domainObject,
+                        testParent: parentObject
+                    };
+                });
+
+                mockQ.when.andCallFake(testPromise);
+                mockQ.all.andCallFake(function (promises) {
+                    var result = {};
+                    Object.keys(promises).forEach(function (k) {
+                        promises[k].then(function (v) { result[k] = v; });
+                    });
+                    return testPromise(result);
+                });
+
+                mockObjectService.getObjects.andReturn(testPromise(testObjects));
+
+                mockCallback = jasmine.createSpy("callback");
+
+                Object.keys(testModels).forEach(function (id) {
+                    testObjects[id] = jasmine.createSpyObj(
+                        "domainObject-" + id,
+                        [ "getId", "getModel", "getCapability" ]
+                    );
+                    testObjects[id].getId.andReturn(id);
+                    testObjects[id].getModel.andReturn(testModels[id]);
+                });
+
+                decorator = new LocatingObjectDecorator(
+                    mockContextualize,
+                    mockQ,
+                    mockLog,
+                    mockObjectService
+                );
+            });
+
+            it("contextualizes domain objects by location", function () {
+                decorator.getObjects(['b', 'c']).then(mockCallback);
+                expect(mockCallback).toHaveBeenCalledWith({
+                    b: {
+                        testObject: testObjects.b,
+                        testParent: testObjects.a
+                    },
+                    c: {
+                        testObject: testObjects.c,
+                        testParent: {
+                            testObject: testObjects.b,
+                            testParent: testObjects.a
+                        }
+                    }
+                });
+            });
+
+            it("warns on cycle detection", function () {
+                // Base case, no cycle, no warning
+                decorator.getObjects(['a', 'b', 'c']);
+                expect(mockLog.warn).not.toHaveBeenCalled();
+
+                decorator.getObjects(['e']);
+                expect(mockLog.warn).toHaveBeenCalled();
+            });
+
+        });
+    }
+);
diff --git a/platform/entanglement/test/suite.json b/platform/entanglement/test/suite.json
index 9dfceb5c0f..12831b407a 100644
--- a/platform/entanglement/test/suite.json
+++ b/platform/entanglement/test/suite.json
@@ -5,5 +5,6 @@
     "services/MoveService",
     "services/LocationService",
     "services/LocatingCreationDecorator",
+    "services/LocatingObjectDecorator",
     "capabilities/LocationCapability"
 ]

From ac48039b90ca28516f72f86fd34f885bacf9fa89 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 16:40:18 -0700
Subject: [PATCH 220/266] [Mobile] Create empty bundle for mobile

---
 platform/mobile/bundle.json | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 platform/mobile/bundle.json

diff --git a/platform/mobile/bundle.json b/platform/mobile/bundle.json
new file mode 100644
index 0000000000..05df441424
--- /dev/null
+++ b/platform/mobile/bundle.json
@@ -0,0 +1,5 @@
+{
+    "extensions": {
+
+    }
+}

From 2090b1a95899ab68b8afd8293cf6ab4400906f14 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 17:03:35 -0700
Subject: [PATCH 221/266] [Browse] Separate tree expand/collapser

---
 platform/commonUI/browse/bundle.json          |  4 ++
 .../commonUI/browse/res/templates/browse.html | 43 ++++++++-------
 .../commonUI/browse/src/BrowseController.js   | 12 ----
 .../browse/src/BrowseTreeController.js        | 55 +++++++++++++++++++
 4 files changed, 82 insertions(+), 32 deletions(-)
 create mode 100644 platform/commonUI/browse/src/BrowseTreeController.js

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index b5d6b47678..0f63130f86 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -25,6 +25,10 @@
                     "urlService"
                 ]
             },
+            {
+                "key": "BrowseTreeController",
+                "implementation": "BrowseTreeController.js"
+            },
             {
                 "key": "BrowseObjectController",
                 "implementation": "BrowseObjectController.js",
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index dd97bbea3f..8ba06c122f 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -22,27 +22,29 @@
 
 <div class="abs holder-all browse-mode" ng-controller="BrowseController">
     <mct-include key="'topbar-browse'"></mct-include>
-    <div class="holder browse-area s-browse-area abs browse-wrapper" ng-class="treeClass ? 'browse-showtree' : 'browse-hidetree'">
+    <div class="holder browse-area s-browse-area abs browse-wrapper"
+         ng-controller="BrowseTreeController as tree"
+         ng-class="tree.visible() ? 'browse-showtree' : 'browse-hidetree'">
         <mct-split-pane class='contents abs' anchor='left'>
             <div class='split-pane-component treeview pane left'>
-	            <div class="holder abs l-mobile">
-	                <mct-representation key="'create-button'" mct-object="navigatedObject">
-	                </mct-representation>
-	                <div class='holder search-holder abs'
-	                     ng-class="{active: treeModel.search}">
-	                    <mct-representation key="'search'"
-	                                 mct-object="domainObject"
-	                                 ng-model="treeModel">
-	                    </mct-representation>
-	                </div>
-	                <div class='tree-holder abs mobile-tree-holder'
-	                     ng-hide="treeModel.search">
-	                    <mct-representation key="'tree'"
-	                                        mct-object="domainObject"
-	                                        ng-model="treeModel">
-	                    </mct-representation>
-	                </div>
-	            </div>
+                <div class="holder abs l-mobile">
+                    <mct-representation key="'create-button'" mct-object="navigatedObject">
+                    </mct-representation>
+                    <div class='holder search-holder abs'
+                         ng-class="{active: treeModel.search}">
+                        <mct-representation key="'search'"
+                                     mct-object="domainObject"
+                                     ng-model="treeModel">
+                        </mct-representation>
+                    </div>
+                    <div class='tree-holder abs mobile-tree-holder'
+                         ng-hide="treeModel.search">
+                        <mct-representation key="'tree'"
+                                            mct-object="domainObject"
+                                            ng-model="treeModel">
+                        </mct-representation>
+                    </div>
+                </div>
             </div>
 
             <mct-splitter class="mobile-hide"></mct-splitter>
@@ -52,7 +54,8 @@
                     <mct-representation mct-object="navigatedObject" key="'browse-object'">
                     </mct-representation>
                 </div>
-                <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide" ng-click="treeSlide()">m</div>
+                <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide"
+                     ng-click="tree.toggle()">m</div>
             </div>
         </mct-split-pane>
     </div>
diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 934a6a9f5d..9f6ca3e077 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -142,12 +142,6 @@ define(
                 selectedObject: navigationService.getNavigation()
             };
 
-            // SlideMenu boolean used to hide and show
-            // tree menu
-            $scope.treeSlide = function () {
-                $scope.treeClass = !$scope.treeClass;
-            };
-
             // Listen for changes in navigation state.
             navigationService.addListener(setNavigation);
 
@@ -158,12 +152,6 @@ define(
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);
             });
-
-            // If the user has selected an object (and is portrait
-            // on a phone), then hide the tree menu
-            $scope.$on("select-obj", function () {
-                $scope.treeSlide();
-            });
         }
 
         return BrowseController;
diff --git a/platform/commonUI/browse/src/BrowseTreeController.js b/platform/commonUI/browse/src/BrowseTreeController.js
new file mode 100644
index 0000000000..882d563385
--- /dev/null
+++ b/platform/commonUI/browse/src/BrowseTreeController.js
@@ -0,0 +1,55 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+/**
+ * This bundle implements Browse mode.
+ * @namespace platform/commonUI/browse
+ */
+define(
+    [],
+    function () {
+        "use strict";
+
+        function BrowseTreeController() {
+            this.state = true;
+        }
+
+        BrowseTreeController.prototype.toggle = function () {
+            this.state = !this.state;
+        };
+
+        BrowseTreeController.prototype.hide = function () {
+            this.state = false;
+        };
+
+        BrowseTreeController.prototype.show = function () {
+            this.state = true;
+        };
+
+        BrowseTreeController.prototype.visible = function () {
+            return this.state;
+        };
+
+        return BrowseTreeController;
+    }
+);

From 19500c2704b0cd438c98fb23ba96f23203e5cd7b Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 17:42:23 -0700
Subject: [PATCH 222/266] [Mobile] Restore browse controller from master

---
 .../commonUI/browse/src/BrowseController.js   |  4 +-
 .../browse/test/BrowseControllerSpec.js       | 41 ++++---------------
 2 files changed, 10 insertions(+), 35 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseController.js b/platform/commonUI/browse/src/BrowseController.js
index 9f6ca3e077..b10e0a598a 100644
--- a/platform/commonUI/browse/src/BrowseController.js
+++ b/platform/commonUI/browse/src/BrowseController.js
@@ -55,7 +55,7 @@ define(
 
                 unlisten = $scope.$on('$locationChangeSuccess', function () {
                     // Checks path to make sure /browse/ is at front
-                    // if so, change $route.current
+                    // if so, change $route.current                    
                     if ($location.path().indexOf("/browse/") === 0) {
                         $route.current = priorRoute;
                     }
@@ -65,6 +65,7 @@ define(
                 // path to new, addressed, path based on
                 // domainObject
                 $location.path(urlService.urlForLocation("browse", domainObject));
+                
             }
 
             // Callback for updating the in-scope reference to the object
@@ -152,6 +153,7 @@ define(
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);
             });
+
         }
 
         return BrowseController;
diff --git a/platform/commonUI/browse/test/BrowseControllerSpec.js b/platform/commonUI/browse/test/BrowseControllerSpec.js
index be215bebe4..ce9296c239 100644
--- a/platform/commonUI/browse/test/BrowseControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseControllerSpec.js
@@ -39,9 +39,6 @@ define(
                 mockUrlService,
                 mockDomainObject,
                 mockNextObject,
-                mockParentContext,
-                mockParent,
-                mockGrandparent,
                 controller;
 
             function mockPromise(value) {
@@ -55,7 +52,7 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj(
                     "$scope",
-                    [ "$on", "$watch", "treeSlide", "backArrow" ]
+                    [ "$on", "$watch" ]
                 );
                 mockRoute = { current: { params: {} } };
                 mockLocation = jasmine.createSpyObj(
@@ -92,17 +89,6 @@ define(
                     [ "getId", "getCapability", "getModel", "useCapability" ]
                 );
 
-
-                mockParentContext = jasmine.createSpyObj('context', ['getParent']);
-                mockParent  = jasmine.createSpyObj(
-                    "domainObject",
-                    [ "getId", "getCapability", "getModel", "useCapability" ]
-                );
-                mockGrandparent  = jasmine.createSpyObj(
-                    "domainObject",
-                    [ "getId", "getCapability", "getModel", "useCapability" ]
-                );
-
                 mockObjectService.getObjects.andReturn(mockPromise({
                     ROOT: mockRootObject
                 }));
@@ -160,25 +146,12 @@ define(
                 expect(mockScope.navigatedObject).toEqual(mockDomainObject);
             });
 
-            // Mocks the tree slide call that
-            // lets the html code know if the
-            // tree menu is open.
-            it("calls the treeSlide function", function () {
-                expect(mockScope.$on).toHaveBeenCalledWith(
-                    "select-obj",
-                    jasmine.any(Function)
-                );
-
-                mockScope.$on.calls[1].args[1]();
-            });
-
             it("releases its navigation listener when its scope is destroyed", function () {
                 expect(mockScope.$on).toHaveBeenCalledWith(
                     "$destroy",
                     jasmine.any(Function)
                 );
-
-                mockScope.$on.calls[0].args[1]();
+                mockScope.$on.mostRecentCall.args[1]();
                 // Should remove the listener it added earlier
                 expect(mockNavigationService.removeListener).toHaveBeenCalledWith(
                     mockNavigationService.addListener.mostRecentCall.args[0]
@@ -249,16 +222,16 @@ define(
                 mockNavigationService.addListener.mostRecentCall.args[0](
                     mockNextObject
                 );
-
+                
                 // Allows the path index to be checked
-                // prior to setting $route.current
+                // prior to setting $route.current                
                 mockLocation.path.andReturn("/browse/");
-
+                
                 // Exercise the Angular workaround
                 mockScope.$on.mostRecentCall.args[1]();
                 expect(mockUnlisten).toHaveBeenCalled();
-
-                // location.path to be called with the urlService's
+                
+                // location.path to be called with the urlService's 
                 // urlFor function with the next domainObject and mode
                 expect(mockLocation.path).toHaveBeenCalledWith(
                     mockUrlService.urlForLocation(mockMode, mockNextObject)

From 733a282f3ff738a79ea412381fcafa3f4e38f0d5 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 17:51:06 -0700
Subject: [PATCH 223/266] [Framework] Obey priority order for controllers et al

Support overriding of controllers between bundles.
---
 platform/framework/src/register/CustomRegistrars.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/platform/framework/src/register/CustomRegistrars.js b/platform/framework/src/register/CustomRegistrars.js
index 04c3bbce7a..6b840a4310 100644
--- a/platform/framework/src/register/CustomRegistrars.js
+++ b/platform/framework/src/register/CustomRegistrars.js
@@ -52,6 +52,7 @@ define(
         // named methods on Angular modules, which follow the normal
         // app.method(key, [ deps..., function ]) pattern.
         function customRegistrar(angularFunction) {
+            var registered = {};
             return function (extension, index) {
                 var app = this.app,
                     $log = this.$log,
@@ -67,6 +68,14 @@ define(
                         ", no key specified. ",
                         JSON.stringify(extension)
                     ].join(""));
+                } else if (registered[key]) {
+                    $log.debug([
+                        "Already registered ",
+                        angularFunction,
+                        " with key ",
+                        key,
+                        "; skipping."
+                    ].join(""));
                 } else {
                     $log.info([
                         "Registering ",
@@ -74,6 +83,7 @@ define(
                         ": ",
                         key
                     ].join(""));
+                    registered[key] = true;
                     app[angularFunction](
                         key,
                         dependencies.concat([extension])

From 6aba34dd5ac8bc2e9c2e0e9695547779a9ee5101 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 17:54:01 -0700
Subject: [PATCH 224/266] [Mobile] Override browse behavior

Override browse tree behavior such that tree collapses upon
navigation change in mobile.
---
 bundles.json                                  |  1 +
 .../browse/src/BrowseTreeController.js        |  8 ---
 platform/mobile/bundle.json                   |  9 ++-
 .../mobile/src/MobileBrowseTreeController.js  | 59 +++++++++++++++++++
 4 files changed, 68 insertions(+), 9 deletions(-)
 create mode 100644 platform/mobile/src/MobileBrowseTreeController.js

diff --git a/bundles.json b/bundles.json
index 35d6f11728..3364fb75ce 100644
--- a/bundles.json
+++ b/bundles.json
@@ -19,6 +19,7 @@
     "platform/features/events",
     "platform/forms",
     "platform/identity",
+    "platform/mobile",
     "platform/persistence/local",
     "platform/persistence/queue",
     "platform/policy",
diff --git a/platform/commonUI/browse/src/BrowseTreeController.js b/platform/commonUI/browse/src/BrowseTreeController.js
index 882d563385..ee95dc2724 100644
--- a/platform/commonUI/browse/src/BrowseTreeController.js
+++ b/platform/commonUI/browse/src/BrowseTreeController.js
@@ -38,14 +38,6 @@ define(
             this.state = !this.state;
         };
 
-        BrowseTreeController.prototype.hide = function () {
-            this.state = false;
-        };
-
-        BrowseTreeController.prototype.show = function () {
-            this.state = true;
-        };
-
         BrowseTreeController.prototype.visible = function () {
             return this.state;
         };
diff --git a/platform/mobile/bundle.json b/platform/mobile/bundle.json
index 05df441424..0f1e2d2121 100644
--- a/platform/mobile/bundle.json
+++ b/platform/mobile/bundle.json
@@ -1,5 +1,12 @@
 {
     "extensions": {
-
+        "controllers": [
+            {
+                "key": "BrowseTreeController",
+                "implementation": "MobileBrowseTreeController.js",
+                "priority": "preferred",
+                "depends": [ "$scope", "navigationService", "agentService" ]
+            }
+        ]
     }
 }
diff --git a/platform/mobile/src/MobileBrowseTreeController.js b/platform/mobile/src/MobileBrowseTreeController.js
new file mode 100644
index 0000000000..a3c3e60ed0
--- /dev/null
+++ b/platform/mobile/src/MobileBrowseTreeController.js
@@ -0,0 +1,59 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+/**
+ * This bundle implements Browse mode.
+ * @namespace platform/commonUI/browse
+ */
+define(
+    [],
+    function () {
+        "use strict";
+
+        function MobileBrowseTreeController($scope, navigationService, agentService) {
+            var object = navigationService.getNavigation();
+
+            // Collapse tree when navigation changes
+            function changeObject(newObject) {
+                if (newObject !== object) {
+                    object = newObject;
+                    this.state = false;
+                }
+            }
+
+            navigationService.listen(changeObject);
+
+            this.state = true;
+        }
+
+        MobileBrowseTreeController.prototype.toggle = function () {
+            this.state = !this.state;
+        };
+
+        MobileBrowseTreeController.prototype.visible = function () {
+            return this.state;
+        };
+
+        return MobileBrowseTreeController;
+    }
+);

From 1d1589da68185188393e6bfb227db2d47f846721 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Thu, 17 Sep 2015 18:05:45 -0700
Subject: [PATCH 225/266] [Mobile] Move agentService to mobile bundle

...and make API tweaks.
---
 .../general/src/services/AgentService.js      | 103 ------------------
 platform/mobile/bundle.json                   |   7 ++
 platform/mobile/src/AgentService.js           |  92 ++++++++++++++++
 3 files changed, 99 insertions(+), 103 deletions(-)
 delete mode 100644 platform/commonUI/general/src/services/AgentService.js
 create mode 100644 platform/mobile/src/AgentService.js

diff --git a/platform/commonUI/general/src/services/AgentService.js b/platform/commonUI/general/src/services/AgentService.js
deleted file mode 100644
index 1c7c83c9c3..0000000000
--- a/platform/commonUI/general/src/services/AgentService.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise*/
-
-/**
- * Module defining AgentService.
- */
-
-define(
-    [],
-    function () {
-        "use strict";
-
-        /**
-         * The query service handles calls for browser and userAgent
-         * info using a comparison between the userAgent and key
-         * device names
-         */
-        function AgentService() {
-            
-            // Gets the UA name if it is one of the following.
-            // If it is not (a desktop for example) nothing is
-            // returned instead
-            function getDeviceUA(ua) {
-                return ua.match(/iPad|iPhone|Android/i) ?
-                        ua.match(/iPad|iPhone|Android/i) : "";
-            }
-            
-            // Checks if gotten device is mobile,
-            // Mobile is defined as a phone or tablet
-            function isMobile(ua) {
-                if (getDeviceUA(ua)) {
-                    return true;
-                } else {
-                    return false;
-                }
-            }
-            
-            // Checks if device is phone,
-            // phone is designated as only an
-            // iPhone device
-            function isPhone(ua) {
-                if (getDeviceUA(ua)[0] === "iPhone") {
-                    return true;
-                } else {
-                    return false;
-                }
-            }
-
-            // Returns the orientation of the device based on the
-            // device's window dimensions, pass in the innerWidth
-            // and innerheight of the current window
-            function getOrientation(innerWidth, innerHeight) {
-                if (innerWidth > innerHeight) {
-                    return "landscape";
-                } else if (innerWidth < innerHeight) {
-                    return "portrait";
-                }
-            }
-         
-            return {
-                /**
-                 * Returns the orientation for the user's device
-                 */
-                getOrientation: getOrientation,
-                
-                /**
-                 * Returns the a boolean checking if the user is
-                 * on a mobile or non-mobile device. (mobile: true,
-                 * non-mobile: false)
-                 */
-                isMobile: isMobile,
-                
-                /**
-                 * Returns the a boolean checking if the user is on
-                 * a phone device. (phone: true, non-phone: false)
-                 */
-                isPhone: isPhone
-            };
-        }
-
-        return AgentService;
-    }
-);
\ No newline at end of file
diff --git a/platform/mobile/bundle.json b/platform/mobile/bundle.json
index 0f1e2d2121..80be27a8b9 100644
--- a/platform/mobile/bundle.json
+++ b/platform/mobile/bundle.json
@@ -7,6 +7,13 @@
                 "priority": "preferred",
                 "depends": [ "$scope", "navigationService", "agentService" ]
             }
+        ],
+        "services": [
+            {
+                "key": "agentService",
+                "implementation": "AgentService.js",
+                "depends": [ "$window" ]
+            }
         ]
     }
 }
diff --git a/platform/mobile/src/AgentService.js b/platform/mobile/src/AgentService.js
new file mode 100644
index 0000000000..7df3e3c77d
--- /dev/null
+++ b/platform/mobile/src/AgentService.js
@@ -0,0 +1,92 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+/**
+ * Module defining AgentService.
+ */
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        /**
+         * The query service handles calls for browser and userAgent
+         * info using a comparison between the userAgent and key
+         * device names
+         */
+        function AgentService($window) {
+            var userAgent = $window.navigator.userAgent,
+                matches = ua.match(/iPad|iPhone|Android/i) || [];
+
+            this.mobileName = matches[0];
+            this.portrait = $window.innerWidth < $window.innerHeight;
+        }
+
+        /**
+         * Check if the user is on a mobile device.
+         * @returns {boolean} true on mobile
+         */
+        AgentService.prototype.isMobile = function () {
+            return !!this.mobileName;
+        };
+
+        /**
+         * Check if the user is on a phone-sized mobile device.
+         * @returns {boolean} true on a phone
+         */
+        AgentService.prototype.isPhone = function () {
+            // iOS is test-to device for mobile, so only
+            // make this distinction for iPhones
+            return this.mobileName === 'iPhone';
+        };
+
+        /**
+         * Check if the user is on a tablet-sized mobile device.
+         * @returns {boolean} true on a tablet
+         */
+        AgentService.prototype.isTablet = function () {
+            return this.isMobile() && !this.isPhone();
+        };
+
+        /**
+         * Check if the user's device is in a portrait-style
+         * orientation (display width is narrower than display height.)
+         * @returns {boolean} true in portrait mode
+         */
+        AgentService.prototype.isPortrait = function () {
+            return this.portrait;
+        };
+
+        /**
+         * Check if the user's device is in a landscape-style
+         * orientation (display width is greater than display height.)
+         * @returns {boolean} true in landscape mode
+         */
+        AgentService.prototype.isLandscape = function () {
+            return !this.isPortrait();
+        };
+
+        return AgentService;
+    }
+);

From 158fbf5365f7c2b61c60d5c32cdb62340ec81246 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 09:15:08 -0700
Subject: [PATCH 226/266] [Mobile] Check orientation dynamically

Check orientation dynamically from the AgentService
(more specifically, recheck when called - this may
change as a user rotates a device.)
---
 platform/mobile/src/AgentService.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/platform/mobile/src/AgentService.js b/platform/mobile/src/AgentService.js
index 7df3e3c77d..df0d7a2d6b 100644
--- a/platform/mobile/src/AgentService.js
+++ b/platform/mobile/src/AgentService.js
@@ -22,9 +22,10 @@
 /*global define,Promise*/
 
 /**
- * Module defining AgentService.
+ * Provides features which support variant behavior on mobile devices.
+ *
+ * @namespace platform/mobile
  */
-
 define(
     [],
     function () {
@@ -34,13 +35,16 @@ define(
          * The query service handles calls for browser and userAgent
          * info using a comparison between the userAgent and key
          * device names
+         * @constructor
+         * @param $window Angular-injected instance of the window
+         * @memberof platform/mobile
          */
         function AgentService($window) {
             var userAgent = $window.navigator.userAgent,
                 matches = ua.match(/iPad|iPhone|Android/i) || [];
 
             this.mobileName = matches[0];
-            this.portrait = $window.innerWidth < $window.innerHeight;
+            this.$window = $window;
         }
 
         /**
@@ -75,7 +79,7 @@ define(
          * @returns {boolean} true in portrait mode
          */
         AgentService.prototype.isPortrait = function () {
-            return this.portrait;
+            return $window.innerWidth < $window.innerHeight;
         };
 
         /**

From dce7253b27e4a9180bafff5f59799e47d6151060 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 09:17:01 -0700
Subject: [PATCH 227/266] [Mobile] Move mobile bundle

---
 bundles.json                                                  | 2 +-
 platform/{ => commonUI}/mobile/bundle.json                    | 0
 platform/{ => commonUI}/mobile/src/AgentService.js            | 4 ++--
 .../{ => commonUI}/mobile/src/MobileBrowseTreeController.js   | 0
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename platform/{ => commonUI}/mobile/bundle.json (100%)
 rename platform/{ => commonUI}/mobile/src/AgentService.js (97%)
 rename platform/{ => commonUI}/mobile/src/MobileBrowseTreeController.js (100%)

diff --git a/bundles.json b/bundles.json
index 3364fb75ce..ee554ad9bb 100644
--- a/bundles.json
+++ b/bundles.json
@@ -8,6 +8,7 @@
     "platform/commonUI/dialog",
     "platform/commonUI/general",
     "platform/commonUI/inspect",
+    "platform/commonUI/mobile",
     "platform/containment",
     "platform/execution",
     "platform/telemetry",
@@ -19,7 +20,6 @@
     "platform/features/events",
     "platform/forms",
     "platform/identity",
-    "platform/mobile",
     "platform/persistence/local",
     "platform/persistence/queue",
     "platform/policy",
diff --git a/platform/mobile/bundle.json b/platform/commonUI/mobile/bundle.json
similarity index 100%
rename from platform/mobile/bundle.json
rename to platform/commonUI/mobile/bundle.json
diff --git a/platform/mobile/src/AgentService.js b/platform/commonUI/mobile/src/AgentService.js
similarity index 97%
rename from platform/mobile/src/AgentService.js
rename to platform/commonUI/mobile/src/AgentService.js
index df0d7a2d6b..1f6fcb63e3 100644
--- a/platform/mobile/src/AgentService.js
+++ b/platform/commonUI/mobile/src/AgentService.js
@@ -24,7 +24,7 @@
 /**
  * Provides features which support variant behavior on mobile devices.
  *
- * @namespace platform/mobile
+ * @namespace platform/commonUI/mobile
  */
 define(
     [],
@@ -37,7 +37,7 @@ define(
          * device names
          * @constructor
          * @param $window Angular-injected instance of the window
-         * @memberof platform/mobile
+         * @memberof platform/commonUI/mobile
          */
         function AgentService($window) {
             var userAgent = $window.navigator.userAgent,
diff --git a/platform/mobile/src/MobileBrowseTreeController.js b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
similarity index 100%
rename from platform/mobile/src/MobileBrowseTreeController.js
rename to platform/commonUI/mobile/src/MobileBrowseTreeController.js

From 0b4f44f00d6b98f85e45668a3839139e9a06ee53 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 09:18:19 -0700
Subject: [PATCH 228/266] [Mobile] Remove leading slash, redundant declaration

---
 platform/commonUI/general/bundle.json | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 602538c47a..4db62bb56b 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -6,12 +6,8 @@
         "services": [
             {
                 "key": "urlService",
-                "implementation": "/services/UrlService.js",
+                "implementation": "services/UrlService.js",
                 "depends": [ "$location" ]
-            },
-            {
-                "key": "agentService",
-                "implementation": "/services/AgentService.js"
             }
         ],
         "runs": [

From fa186a1556c46170076a2d71393512c1f500b538 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 10:07:27 -0700
Subject: [PATCH 229/266] [Mobile] Update agentService usages

---
 .../src/controllers/TreeNodeController.js     | 13 +++++-----
 .../inspect/src/gestures/InfoButtonGesture.js | 12 +++++-----
 .../inspect/src/gestures/InfoGesture.js       |  8 +++----
 .../mobile/src/MobileBrowseTreeController.js  | 11 +++++----
 .../src/actions/ContextMenuAction.js          | 24 ++++++-------------
 .../src/gestures/ContextMenuGesture.js        | 20 ++++++++--------
 6 files changed, 40 insertions(+), 48 deletions(-)

diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index b25d58a025..518ae4f99f 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global define,Promise,window*/
+/*global define,Promise*/
 
 /**
  * Module defining TreeNodeController. Created by vwoeltje on 11/10/14.
@@ -77,7 +77,7 @@ define(
                         ((navPath[index] === nodePath[index]) &&
                                 checkPath(nodePath, navPath, index + 1));
             }
-            
+
             // Consider the currently-navigated object and update
             // parameters which support display.
             function checkSelection() {
@@ -176,20 +176,19 @@ define(
         TreeNodeController.prototype.isSelected = function () {
             return this.isSelectedFlag;
         };
-        
+
         // Sets the selected object in the tree, to be the
         // currently represented object. If the user is on phone
         // and in portrait mode, than, hide the tree menu
         TreeNodeController.prototype.setObject = function (ngModel, domainObject) {
             ngModel.selectedObject = domainObject;
-            if (this.agentService.getOrientation(window.innerWidth, window.innerHeight) === "portrait" &&
-                    this.agentService.isPhone(navigator.userAgent)) {
+            if (this.agentService.isPhone() && this.agentService.isPortrait()) {
                 this.$scope.$emit('select-obj');
             }
         };
-            
+
         TreeNodeController.prototype.checkMobile = function () {
-            return this.agentService.isMobile(navigator.userAgent);
+            return this.agentService.isMobile();
         };
 
         return TreeNodeController;
diff --git a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
index 9dd3cf251c..9ef0222e54 100644
--- a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js
@@ -58,11 +58,11 @@ define(
                     dismissBubble();
                     dismissBubble = undefined;
                 }
-                
+
                 // Detaches body touch listener
                 body.off('touchstart', hideBubble);
             }
-            
+
             // Displays the bubble by tracking position of
             // touch, using infoService to display the bubble,
             // and then on any body touch the bubble is dismissed
@@ -77,7 +77,7 @@ define(
                     domainObject.useCapability('metadata'),
                     touchPosition
                 );
-                
+
                 // On any touch on the body, default body touches/events
                 // are prevented, the bubble is dismissed, and the touchstart
                 // body event is unbound, reallowing gestures
@@ -87,12 +87,12 @@ define(
                     body.unbind('touchstart');
                 });
             }
-            
+
             // Checks if you are on a mobile device, if the device is
             // mobile (agentService.isMobile() = true), then
-            // the a click on something (info button) brings up 
+            // the a click on something (info button) brings up
             // the bubble
-            if (agentService.isMobile(navigator.userAgent)) {
+            if (agentService.isMobile()) {
                 element.on('click', showBubble);
             }
 
diff --git a/platform/commonUI/inspect/src/gestures/InfoGesture.js b/platform/commonUI/inspect/src/gestures/InfoGesture.js
index 1eb9b595c8..09740841e4 100644
--- a/platform/commonUI/inspect/src/gestures/InfoGesture.js
+++ b/platform/commonUI/inspect/src/gestures/InfoGesture.js
@@ -65,11 +65,11 @@ define(
             this.infoService = infoService;
             this.delay = delay;
             this.domainObject = domainObject;
-            
+
             // Checks if you are on a mobile device, if the device is
             // not mobile (agentService.isMobile() = false), then
             // the pendingBubble and therefore hovering is allowed
-            if (!agentService.isMobile(navigator.userAgent)) {
+            if (!agentService.isMobile()) {
                 // Show bubble (on a timeout) on mouse over
                 element.on('mouseenter', this.showBubbleCallback);
             }
@@ -99,7 +99,7 @@ define(
             // arrays allocated while user mouses over things
             this.mousePosition = undefined;
         };
-            
+
         InfoGesture.prototype.showBubble = function (event) {
             var self = this;
 
@@ -132,7 +132,7 @@ define(
 
             this.element.on('mouseleave', this.hideBubbleCallback);
         };
-            
+
 
         /**
          * Detach any event handlers associated with this gesture.
diff --git a/platform/commonUI/mobile/src/MobileBrowseTreeController.js b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
index a3c3e60ed0..ca1abeb50a 100644
--- a/platform/commonUI/mobile/src/MobileBrowseTreeController.js
+++ b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
@@ -31,17 +31,20 @@ define(
         "use strict";
 
         function MobileBrowseTreeController($scope, navigationService, agentService) {
-            var object = navigationService.getNavigation();
+            var object = navigationService.getNavigation(),
+                self = this;
 
             // Collapse tree when navigation changes
             function changeObject(newObject) {
-                if (newObject !== object) {
+                if (newObject !== object && agentService.isPortrait()) {
                     object = newObject;
-                    this.state = false;
+                    self.state = false;
                 }
             }
 
-            navigationService.listen(changeObject);
+            if (agentService.isMobile()) {
+                navigationService.listen(changeObject);
+            }
 
             this.state = true;
         }
diff --git a/platform/representation/src/actions/ContextMenuAction.js b/platform/representation/src/actions/ContextMenuAction.js
index fec5938c61..56e5fa33f9 100644
--- a/platform/representation/src/actions/ContextMenuAction.js
+++ b/platform/representation/src/actions/ContextMenuAction.js
@@ -71,6 +71,7 @@ define(
                 scope = $rootScope.$new(),
                 goLeft = eventCoors[0] + menuDim[0] > winDim[0],
                 goUp = eventCoors[1] + menuDim[1] > winDim[1],
+                initiatingEvent = this.agentService.isMobile() ? 'touchstart' : 'mousedown',
                 menu;
 
             // Remove the context menu
@@ -107,27 +108,16 @@ define(
             body.append(menu);
 
             // Stop propagation so that clicks or touches on the menu do not close the menu
-            if (!(this.agentService.isMobile(navigator.userAgent))) {
-                menu.on('mousedown', function (event) {
-                    event.stopPropagation();
-                });
-            } else if ((this.agentService.isMobile(navigator.userAgent))) {
-                menu.on('touchstart', function (event) {
-                    event.stopPropagation();
-                });
-            }
+            menu.on(initiatingEvent, function (event) {
+                event.stopPropagation();
+            });
 
             // Dismiss the menu when body is clicked/touched elsewhere
             // ('mousedown' because 'click' breaks left-click context menus)
             // ('touchstart' because 'touch' breaks context menus up)
-            if (!(this.agentService.isMobile(navigator.userAgent))) {
-                body.on('mousedown', dismiss);
-                // NOTE: Apply to mobile?
-                menu.on('click', dismiss);
-            } else if (this.agentService.isMobile(navigator.userAgent)) {
-                body.on('touchstart', dismiss);
-            }
-            
+            body.on(initiatingEvent, dismiss);
+            // NOTE: Apply to mobile?
+            menu.on('click', dismiss);
 
             // Don't launch browser's context menu
             actionContext.event.preventDefault();
diff --git a/platform/representation/src/gestures/ContextMenuGesture.js b/platform/representation/src/gestures/ContextMenuGesture.js
index 4de40586dd..e7c0c7ba9f 100644
--- a/platform/representation/src/gestures/ContextMenuGesture.js
+++ b/platform/representation/src/gestures/ContextMenuGesture.js
@@ -22,7 +22,7 @@
 /*global define,Promise*/
 
 /**
- * Module defining ContextMenuGesture. 
+ * Module defining ContextMenuGesture.
  * Created by vwoeltje on 11/17/14. Modified by shale on 06/30/2015.
  */
 define(
@@ -44,7 +44,7 @@ define(
         function ContextMenuGesture($timeout, agentService, element, domainObject) {
             var isPressing,
                 longTouchTime = 500;
-    
+
             function showMenu(event) {
                 domainObject.getCapability('action').perform({
                     key: 'menu',
@@ -52,20 +52,20 @@ define(
                     event: event
                 });
             }
-    
-    // When context menu event occurs, show object actions instead
-            if (!agentService.isMobile(navigator.userAgent)) {
-                
+
+            // When context menu event occurs, show object actions instead
+            if (!agentService.isMobile()) {
+
                 // When context menu event occurs, show object actions instead
                 element.on('contextmenu', showMenu);
-            } else if (agentService.isMobile(navigator.userAgent)) {
-                
+            } else if (agentService.isMobile()) {
+
                 // If on mobile device, then start timeout for the single touch event
                 // during the timeout 'isPressing' is true.
                 element.on('touchstart', function (event) {
                     if (event.touches.length < 2) {
                         isPressing = true;
-                        
+
                         // After the timeout, if 'isPressing' is
                         // true, display context menu for object
                         $timeout(function () {
@@ -75,7 +75,7 @@ define(
                         }, longTouchTime);
                     }
                 });
-                
+
                 // Whenever the touch event ends, 'isPressing' is false.
                 element.on('touchend', function (event) {
                     isPressing = false;

From 4c5808c8c9cf5c327b92bab5c43e4484b88b4267 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 11:01:54 -0700
Subject: [PATCH 230/266] [Mobile] Move mobile-specific behavior to template

---
 platform/commonUI/general/bundle.json         |  2 +-
 .../general/res/templates/tree-node.html      | 49 ++++++++++++-------
 .../src/controllers/TreeNodeController.js     | 17 +------
 3 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/platform/commonUI/general/bundle.json b/platform/commonUI/general/bundle.json
index 4db62bb56b..281357dc65 100644
--- a/platform/commonUI/general/bundle.json
+++ b/platform/commonUI/general/bundle.json
@@ -60,7 +60,7 @@
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",
-                "depends": [ "$scope", "$timeout", "agentService" ]
+                "depends": [ "$scope", "$timeout" ]
             },
             {
                 "key": "ActionGroupController",
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index cd77d001a2..518f7980f5 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -22,27 +22,38 @@
 <span ng-controller="ToggleController as toggle">
     <span ng-controller="TreeNodeController as treeNode">
         <span
-	        class="tree-item menus-to-left"
-	        ng-class="{selected: treeNode.isSelected()}"
-	        >
-            <mct-representation
-                key="'label'"
-				mct-object="domainObject"
-				ng-model="ngModel"
-				ng-click="!treeNode.checkMobile() || model.composition == undefined ||
-                          model.composition.length == 0 ? treeNode.setObject(ngModel, domainObject) : toggle.toggle();
-                          treeNode.trackExpansion()"
-				>
-            </mct-representation>
+            class="tree-item menus-to-left"
+            ng-class="{selected: treeNode.isSelected()}"
+            >
             <span
-	            class='ui-symbol view-control'
+                class='ui-symbol view-control mobile-hide'
+                ng-click="toggle.toggle(); treeNode.trackExpansion()"
+                ng-if="model.composition !== undefined"
+                >
+                {{toggle.isActive() ? "v" : ">"}}
+            </span>
+
+            <mct-representation
+                class="mobile-hide"
+                key="'label'"
                 mct-object="domainObject"
+                ng-click="ngModel.selectedObject = domainObject"
+                >
+            </mct-representation>
+            <mct-representation
+                class="desktop-hide"
+                key="'label'"
+                mct-object="domainObject"
+                ng-click="toggle.toggle(); treeNode.trackExpansion()"
+                >
+            </mct-representation>
+
+            <span
+                class='ui-symbol view-control desktop-hide'
                 ng-model="ngModel"
-				ng-click="treeNode.checkMobile() ? treeNode.setObject(ngModel, domainObject) :
-                          toggle.toggle(); treeNode.trackExpansion()"
-				ng-if="model.composition !== undefined || treeNode.checkMobile()"
-				>
-                {{treeNode.checkMobile() ? "}" : toggle.isActive() ? "v" : ">"}}
+                ng-click="ngModel.selectedObject = domainObject"
+                >
+                }
             </span>
         </span>
         <span
@@ -58,4 +69,4 @@
 
         </span>
     </span>
-</span>
\ No newline at end of file
+</span>
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 518ae4f99f..7c21ee46aa 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -51,7 +51,7 @@ define(
          * @memberof platform/commonUI/general
          * @constructor
          */
-        function TreeNodeController($scope, $timeout, agentService) {
+        function TreeNodeController($scope, $timeout) {
             var self = this,
                 selectedObject = ($scope.ngModel || {}).selectedObject,
                 isSelected = false,
@@ -133,7 +133,6 @@ define(
             this.isSelectedFlag = false;
             this.hasBeenExpandedFlag = false;
             this.$timeout = $timeout;
-            this.agentService = agentService;
             this.$scope = $scope;
 
             // Listen for changes which will effect display parameters
@@ -177,20 +176,6 @@ define(
             return this.isSelectedFlag;
         };
 
-        // Sets the selected object in the tree, to be the
-        // currently represented object. If the user is on phone
-        // and in portrait mode, than, hide the tree menu
-        TreeNodeController.prototype.setObject = function (ngModel, domainObject) {
-            ngModel.selectedObject = domainObject;
-            if (this.agentService.isPhone() && this.agentService.isPortrait()) {
-                this.$scope.$emit('select-obj');
-            }
-        };
-
-        TreeNodeController.prototype.checkMobile = function () {
-            return this.agentService.isMobile();
-        };
-
         return TreeNodeController;
     }
 );

From 70bcb723efe7a5e98f859039668d7623d97cf86f Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 12:13:05 -0700
Subject: [PATCH 231/266] [Mobile] Small tweaks/bug fixes

Small tweaks/fixes (use appropriate variable names etc) for
refactoring mobile support classes.
---
 platform/commonUI/mobile/src/AgentService.js               | 4 ++--
 platform/commonUI/mobile/src/MobileBrowseTreeController.js | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/platform/commonUI/mobile/src/AgentService.js b/platform/commonUI/mobile/src/AgentService.js
index 1f6fcb63e3..26bb173ee7 100644
--- a/platform/commonUI/mobile/src/AgentService.js
+++ b/platform/commonUI/mobile/src/AgentService.js
@@ -41,7 +41,7 @@ define(
          */
         function AgentService($window) {
             var userAgent = $window.navigator.userAgent,
-                matches = ua.match(/iPad|iPhone|Android/i) || [];
+                matches = userAgent.match(/iPad|iPhone|Android/i) || [];
 
             this.mobileName = matches[0];
             this.$window = $window;
@@ -79,7 +79,7 @@ define(
          * @returns {boolean} true in portrait mode
          */
         AgentService.prototype.isPortrait = function () {
-            return $window.innerWidth < $window.innerHeight;
+            return this.$window.innerWidth < this.$window.innerHeight;
         };
 
         /**
diff --git a/platform/commonUI/mobile/src/MobileBrowseTreeController.js b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
index ca1abeb50a..a88aa63088 100644
--- a/platform/commonUI/mobile/src/MobileBrowseTreeController.js
+++ b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
@@ -43,7 +43,10 @@ define(
             }
 
             if (agentService.isMobile()) {
-                navigationService.listen(changeObject);
+                navigationService.addListener(changeObject);
+                $scope.$on("$destroy", function () {
+                    navigationService.removeListener(changeObject);
+                });
             }
 
             this.state = true;

From c057ba38a5a732a6229aa264bfb0137cec5b37be Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 12:13:37 -0700
Subject: [PATCH 232/266] [Mobile] Add mct-device directive

Add directive which can be used to include certain elements
only on specific devices.
---
 .../commonUI/browse/res/templates/browse.html |   1 +
 platform/commonUI/mobile/bundle.json          |   7 ++
 platform/commonUI/mobile/src/MCTDevice.js     | 104 ++++++++++++++++++
 3 files changed, 112 insertions(+)
 create mode 100644 platform/commonUI/mobile/src/MCTDevice.js

diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 8ba06c122f..0e510fd014 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -55,6 +55,7 @@
                     </mct-representation>
                 </div>
                 <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide"
+                     mct-device="mobile"
                      ng-click="tree.toggle()">m</div>
             </div>
         </mct-split-pane>
diff --git a/platform/commonUI/mobile/bundle.json b/platform/commonUI/mobile/bundle.json
index 80be27a8b9..0037a45259 100644
--- a/platform/commonUI/mobile/bundle.json
+++ b/platform/commonUI/mobile/bundle.json
@@ -8,6 +8,13 @@
                 "depends": [ "$scope", "navigationService", "agentService" ]
             }
         ],
+        "directives": [
+            {
+                "key": "mctDevice",
+                "implementation": "MCTDevice.js",
+                "depends": [ "agentService" ]
+            }
+        ],
         "services": [
             {
                 "key": "agentService",
diff --git a/platform/commonUI/mobile/src/MCTDevice.js b/platform/commonUI/mobile/src/MCTDevice.js
new file mode 100644
index 0000000000..87f16d721f
--- /dev/null
+++ b/platform/commonUI/mobile/src/MCTDevice.js
@@ -0,0 +1,104 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    function () {
+        'use strict';
+
+        var DEVICE_MATCHERS = {
+            mobile: function (agentService) {
+                return agentService.isMobile();
+            },
+            phone: function (agentService) {
+                return agentService.isPhone();
+            },
+            tablet: function (agentService) {
+                return agentService.isTablet();
+            },
+            desktop: function (agentService) {
+                return !agentService.isMobile();
+            },
+            portrait: function (agentService) {
+                return agentService.isPortrait();
+            },
+            landscape: function (agentService) {
+                return agentService.isLandscape();
+            }
+        };
+
+
+        /**
+         * The `mct-device` directive, when applied as an attribute,
+         * only includes the element when the device being used matches
+         * a set of characteristics required.
+         *
+         * Required characteristics are given as space-separated strings
+         * as the value to this attribute, e.g.:
+         *
+         *    <span mct-device="mobile portrait">Hello world!</span>
+         *
+         * ...will only show Hello world! when viewed on a mobile device
+         * in the portrait orientation.
+         *
+         * Valid device characteristics to detect are:
+         *
+         * * `mobile`: Phones or tablets.
+         * * `phone`: Phones specifically.
+         * * `tablet`: Tablets specifically.
+         * * `desktop`: Non-mobile devices.
+         * * `portrait`: Devices in a portrait-style orientation.
+         * * `landscape`: Devices in a landscape-style orientation.
+         *
+         * @param {AgentService} agentService used to detect device type
+         *        based on information about the user agent
+         */
+        function MCTDevice(agentService) {
+
+            function deviceMatches(tokens) {
+                tokens = tokens || "";
+                return tokens.split(" ").every(function (token) {
+                    var fn = DEVICE_MATCHERS[token];
+                    return fn && fn(agentService);
+                });
+            }
+
+            function link(scope, element, attrs, ctrl, transclude) {
+                if (deviceMatches(attrs.mctDevice)) {
+                    transclude(function (clone) {
+                        element.parent().append(clone);
+                    });
+                }
+            }
+
+            return {
+                link: link,
+                // We are transcluding the whole element (like ng-if)
+                transclude: 'element',
+                // Only apply as an attribute
+                restrict: "A"
+            };
+        }
+
+        return MCTDevice;
+    }
+);

From bf05e55d020984d51571c8140c6a6dc81ee8fab1 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 12:25:51 -0700
Subject: [PATCH 233/266] [Mobile] Use mct-device in tree nodes

---
 .../commonUI/general/res/templates/tree-node.html | 15 ++++++++++++---
 platform/commonUI/mobile/src/MCTDevice.js         |  4 ++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 518f7980f5..a6d3560ee0 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -26,7 +26,8 @@
             ng-class="{selected: treeNode.isSelected()}"
             >
             <span
-                class='ui-symbol view-control mobile-hide'
+                mct-device="desktop"
+                class='ui-symbol view-control'
                 ng-click="toggle.toggle(); treeNode.trackExpansion()"
                 ng-if="model.composition !== undefined"
                 >
@@ -34,6 +35,7 @@
             </span>
 
             <mct-representation
+                mct-device="desktop"
                 class="mobile-hide"
                 key="'label'"
                 mct-object="domainObject"
@@ -41,15 +43,22 @@
                 >
             </mct-representation>
             <mct-representation
+                mct-device="mobile"
                 class="desktop-hide"
                 key="'label'"
                 mct-object="domainObject"
-                ng-click="toggle.toggle(); treeNode.trackExpansion()"
+                ng-click="ngModel.selectedObject =
+                              model.composition === undefined ?
+                                  domainObject : ngModel.selectedObject;
+                          toggle.toggle();
+                          treeNode.trackExpansion();
+                          "
                 >
             </mct-representation>
 
             <span
-                class='ui-symbol view-control desktop-hide'
+                mct-device="mobile"
+                class='ui-symbol view-control'
                 ng-model="ngModel"
                 ng-click="ngModel.selectedObject = domainObject"
                 >
diff --git a/platform/commonUI/mobile/src/MCTDevice.js b/platform/commonUI/mobile/src/MCTDevice.js
index 87f16d721f..7928d34112 100644
--- a/platform/commonUI/mobile/src/MCTDevice.js
+++ b/platform/commonUI/mobile/src/MCTDevice.js
@@ -94,6 +94,10 @@ define(
                 link: link,
                 // We are transcluding the whole element (like ng-if)
                 transclude: 'element',
+                // 1 more than ng-if
+                priority: 601,
+                // Also terminal, since element will be transcluded
+                terminal: true,
                 // Only apply as an attribute
                 restrict: "A"
             };

From 65368ed0c3123b8b77f94617efcea09234bbf25e Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Fri, 18 Sep 2015 13:43:29 -0700
Subject: [PATCH 234/266] [Config] Removed non-functional config options from
 Create dialogs;

open #124
Removed "Default view" and "Display title by default" from
Panel configs;
---
 platform/core/bundle.json            |  6 ------
 platform/features/layout/bundle.json | 10 ----------
 2 files changed, 16 deletions(-)

diff --git a/platform/core/bundle.json b/platform/core/bundle.json
index 74d85c3c25..12f158040f 100644
--- a/platform/core/bundle.json
+++ b/platform/core/bundle.json
@@ -117,12 +117,6 @@
                         "pattern": "\\S+",
                         "required": true,
                         "cssclass": "l-med"
-                    },
-                    {
-                        "control": "checkbox",
-                        "name": "Display title by default",
-                        "key": "displayTitle",
-                        "property": [ "display", "title" ]
                     }
                 ]
             },
diff --git a/platform/features/layout/bundle.json b/platform/features/layout/bundle.json
index f1006d67e8..b4bddb6bc5 100644
--- a/platform/features/layout/bundle.json
+++ b/platform/features/layout/bundle.json
@@ -258,16 +258,6 @@
                         "pattern": "^(\\d*[1-9]\\d*)?$",
                         "property": "layoutGrid",
                         "conversion": "number[]"
-                    },
-                    {
-                        "name": "Default View",
-                        "control": "select",
-                        "options": [
-                            { "name": "Plot", "value": "plot" },
-                            { "name": "Scrolling", "value": "scrolling" }
-                        ],
-                        "comment": "TODO: Infer values from type",
-                        "key": "defaultView"
                     }
                 ]
             }

From 88bb2131620cb257d93256a6d03ac076ad3479cc Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 14:34:14 -0700
Subject: [PATCH 235/266] [Mobile] Move spec for AgentService

---
 platform/commonUI/general/test/suite.json                      | 3 +--
 .../{general/test/services => mobile/test}/AgentServiceSpec.js | 0
 2 files changed, 1 insertion(+), 2 deletions(-)
 rename platform/commonUI/{general/test/services => mobile/test}/AgentServiceSpec.js (100%)

diff --git a/platform/commonUI/general/test/suite.json b/platform/commonUI/general/test/suite.json
index 085c1795ba..45c554d2c2 100644
--- a/platform/commonUI/general/test/suite.json
+++ b/platform/commonUI/general/test/suite.json
@@ -13,7 +13,6 @@
     "directives/MCTDrag",
     "directives/MCTResize",
     "directives/MCTScroll",
-    "services/AgentService",
     "services/UrlService",
     "StyleSheetLoader"
-]
\ No newline at end of file
+]
diff --git a/platform/commonUI/general/test/services/AgentServiceSpec.js b/platform/commonUI/mobile/test/AgentServiceSpec.js
similarity index 100%
rename from platform/commonUI/general/test/services/AgentServiceSpec.js
rename to platform/commonUI/mobile/test/AgentServiceSpec.js

From 5a1c83fca829c8306b41738192e4b96e03d09d3d Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 14:53:14 -0700
Subject: [PATCH 236/266] [Mobile] Update spec for AgentService

---
 .../commonUI/mobile/test/AgentServiceSpec.js  | 87 +++++++++++--------
 1 file changed, 52 insertions(+), 35 deletions(-)

diff --git a/platform/commonUI/mobile/test/AgentServiceSpec.js b/platform/commonUI/mobile/test/AgentServiceSpec.js
index e24cc8e7f7..8e0f600020 100644
--- a/platform/commonUI/mobile/test/AgentServiceSpec.js
+++ b/platform/commonUI/mobile/test/AgentServiceSpec.js
@@ -21,49 +21,66 @@
  *****************************************************************************/
 /*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
 
-/**
- * MCTRepresentationSpec. Created by vwoeltje on 11/6/14.
- */
+
 define(
-    ["../../src/services/AgentService"],
+    ["../src/AgentService"],
     function (AgentService) {
         "use strict";
 
-        describe("The url service", function () {
-            var agentService,
-                mockWindow,
-                mockNavigator;
+        var TEST_USER_AGENTS = {
+            DESKTOP: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36",
+            IPHONE: "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
+            IPAD: "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"
+        };
+
+        describe("The AgentService", function () {
+            var testWindow, agentService;
 
             beforeEach(function () {
-                // Creates a mockLocation, used to 
-                // do the view search
-                mockWindow = jasmine.createSpyObj(
-                    "window",
-                    [ "innerWidth", "innerHeight" ]
-                );
-                
-                mockNavigator = jasmine.createSpyObj(
-                    "navigator",
-                    [ "userAgent" ]
-                );
-                
-                agentService = new AgentService();
+                testWindow = {
+                    innerWidth: 640,
+                    innerHeight: 480,
+                    navigator: {
+                        userAgent: TEST_USER_AGENTS.DESKTOP
+                    }
+                };
             });
-            
-            it("get current device user agent", function () {
-                mockNavigator.userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36";
-                agentService.isMobile(mockNavigator.userAgent);
-                agentService.isPhone(mockNavigator.userAgent);
-                mockNavigator.userAgent = "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
-                agentService.isMobile(mockNavigator.userAgent);
-                mockNavigator.userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53";
-                agentService.isPhone(mockNavigator.userAgent);
+
+            it("recognizes desktop devices as non-mobile", function () {
+                testWindow.navigator.userAgent = TEST_USER_AGENTS.DESKTOP;
+                agentService = new AgentService(testWindow);
+                expect(agentService.isMobile()).toBeFalsy();
+                expect(agentService.isPhone()).toBeFalsy();
+                expect(agentService.isTablet()).toBeFalsy();
             });
-            
-            it("get orientation of the current device", function () {
-                agentService.getOrientation(1024, 768);
-                agentService.getOrientation(768, 1024);
+
+            it("detects iPhones", function () {
+                testWindow.navigator.userAgent = TEST_USER_AGENTS.IPHONE;
+                agentService = new AgentService(testWindow);
+                expect(agentService.isMobile()).toBeTruthy();
+                expect(agentService.isPhone()).toBeTruthy();
+                expect(agentService.isTablet()).toBeFalsy();
+            });
+
+            it("detects iPads", function () {
+                testWindow.navigator.userAgent = TEST_USER_AGENTS.IPAD;
+                agentService = new AgentService(testWindow);
+                expect(agentService.isMobile()).toBeTruthy();
+                expect(agentService.isPhone()).toBeFalsy();
+                expect(agentService.isTablet()).toBeTruthy();
+            });
+
+            it("detects display orientation", function () {
+                var agentService = new AgentService(testWindow);
+                testWindow.innerWidth = 1024;
+                testWindow.innerHeight = 400;
+                expect(agentService.isPortrait()).toBeFalsy();
+                expect(agentService.isLandscape()).toBeTruthy();
+                testWindow.innerWidth = 400;
+                testWindow.innerHeight = 1024;
+                expect(agentService.isPortrait()).toBeTruthy();
+                expect(agentService.isLandscape()).toBeFalsy();
             });
         });
     }
-);
\ No newline at end of file
+);

From befa66a9e259160c4f988d0b5e33202bc7650991 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 14:54:37 -0700
Subject: [PATCH 237/266] [Mobile] Remove obsolete test cases

...for functionality that has been moved out of TreeNodeController.
---
 .../test/controllers/TreeNodeControllerSpec.js  | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
index 247120cdec..f2e5d1ae2d 100644
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -52,10 +52,10 @@ define(
                     "domainObject",
                     [ "getId", "getCapability", "getModel", "useCapability" ]
                 );
-                
+
                 mockAgentService.getOrientation.andReturn("portrait");
                 mockAgentService.isPhone.andReturn(true);
-                
+
                 controller = new TreeNodeController(mockScope, mockTimeout, mockAgentService);
             });
 
@@ -196,17 +196,6 @@ define(
                 expect(controller.isSelected()).toBeFalsy();
 
             });
-            
-            it("check if tree node is in a mobile device", function () {
-                if (controller) {
-                    controller.checkMobile();
-                }
-            });
-            
-            it("allows a set object to emit select-obj", function () {
-                controller.setObject(mockNgModel, mockDomainObject);
-                expect(mockScope.$emit).toHaveBeenCalledWith('select-obj');
-            });
         });
     }
-);
\ No newline at end of file
+);

From d236fd10c3f533b83cbce2b0ef3de05a0257eaad Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:02:32 -0700
Subject: [PATCH 238/266] [Framework] Move registration-tracking

Move registration-tracking for Angular built-ins such that
these are correctly tracked at the instance level.
---
 platform/framework/src/register/CustomRegistrars.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/platform/framework/src/register/CustomRegistrars.js b/platform/framework/src/register/CustomRegistrars.js
index 6b840a4310..0051105036 100644
--- a/platform/framework/src/register/CustomRegistrars.js
+++ b/platform/framework/src/register/CustomRegistrars.js
@@ -39,6 +39,7 @@ define(
         function CustomRegistrars(app, $log) {
             this.app = app;
             this.$log = $log;
+            this.registered = {}; // Track registered keys by extension
         }
 
         // Utility; bind a function to a "this" pointer
@@ -52,12 +53,14 @@ define(
         // named methods on Angular modules, which follow the normal
         // app.method(key, [ deps..., function ]) pattern.
         function customRegistrar(angularFunction) {
-            var registered = {};
             return function (extension, index) {
                 var app = this.app,
                     $log = this.$log,
                     key = extension.key,
-                    dependencies = extension.depends || [];
+                    dependencies = extension.depends || [],
+                    registered = this.registered[angularFunction] || {};
+
+                this.registered[angularFunction] = registered;
 
                 if (!key) {
                     $log.warn([

From b163b45a5e26e64ee7ae7d08e74f5c489e4c4451 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:10:21 -0700
Subject: [PATCH 239/266] [Framework] Update spec

Update spec to verify that app.controller et al
are not called multiple times with the same key.
---
 .../test/register/CustomRegistrarsSpec.js     | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/platform/framework/test/register/CustomRegistrarsSpec.js b/platform/framework/test/register/CustomRegistrarsSpec.js
index b8380fa575..5083e63f88 100644
--- a/platform/framework/test/register/CustomRegistrarsSpec.js
+++ b/platform/framework/test/register/CustomRegistrarsSpec.js
@@ -113,6 +113,25 @@ define(
                 // Notably, keys are not needed for run calls
             });
 
+            it("does not re-register duplicate keys", function () {
+                // Verify preconditions, invoke, expect to have been called
+                expect(mockApp.directive.calls.length).toEqual(0);
+                customRegistrars.directives([{ key: "a" }, { key: "a" }]);
+                expect(mockApp.directive.calls.length).toEqual(1);
+
+                expect(mockApp.controller.calls.length).toEqual(0);
+                customRegistrars.controllers([{ key: "c" }, { key: "c" }, { key: "c" }]);
+                expect(mockApp.controller.calls.length).toEqual(1);
+
+                expect(mockApp.service.calls.length).toEqual(0);
+                customRegistrars.services([{ key: "b" }, { key: "b" }]);
+                expect(mockApp.service.calls.length).toEqual(1);
+
+                // None of this should have warned, this is all
+                // nominal behavior
+                expect(mockLog.warn.calls.length).toEqual(0);
+            });
+
             it("allows routes to be registered", function () {
                 var mockRouteProvider = jasmine.createSpyObj(
                         "$routeProvider",
@@ -166,4 +185,4 @@ define(
             });
         });
     }
-);
\ No newline at end of file
+);

From e86e61c2ac2b4ed3c37a6110d13e72471a80a541 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:12:48 -0700
Subject: [PATCH 240/266] [Mobile] Fix test setup error

Use correct user agent strings for iPhone/iPad
(these had been reversed in the spec.)
---
 platform/commonUI/mobile/test/AgentServiceSpec.js | 4 ++--
 platform/commonUI/mobile/test/suite.json          | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)
 create mode 100644 platform/commonUI/mobile/test/suite.json

diff --git a/platform/commonUI/mobile/test/AgentServiceSpec.js b/platform/commonUI/mobile/test/AgentServiceSpec.js
index 8e0f600020..c0735e3f4c 100644
--- a/platform/commonUI/mobile/test/AgentServiceSpec.js
+++ b/platform/commonUI/mobile/test/AgentServiceSpec.js
@@ -29,8 +29,8 @@ define(
 
         var TEST_USER_AGENTS = {
             DESKTOP: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.89 Safari/537.36",
-            IPHONE: "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
-            IPAD: "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"
+            IPAD: "Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53",
+            IPHONE: "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"
         };
 
         describe("The AgentService", function () {
diff --git a/platform/commonUI/mobile/test/suite.json b/platform/commonUI/mobile/test/suite.json
new file mode 100644
index 0000000000..4cf0d3ee0d
--- /dev/null
+++ b/platform/commonUI/mobile/test/suite.json
@@ -0,0 +1,3 @@
+[
+    "AgentService"
+]

From cf97b30084ecf9f2ccbe272d2dafa6dc6cd00f89 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:21:23 -0700
Subject: [PATCH 241/266] [Mobile] Add empty specs

---
 .../browse/test/BackArrowControllerSpec.js    | 28 ++++++++++++++++++
 .../browse/test/BrowseTreeControllerSpec.js   | 28 ++++++++++++++++++
 platform/commonUI/browse/test/suite.json      |  2 ++
 .../commonUI/mobile/test/MCTDeviceSpec.js     | 29 +++++++++++++++++++
 .../test/MobileBrowseTreeControllerSpec.js    | 29 +++++++++++++++++++
 platform/commonUI/mobile/test/suite.json      |  4 ++-
 6 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 platform/commonUI/browse/test/BackArrowControllerSpec.js
 create mode 100644 platform/commonUI/browse/test/BrowseTreeControllerSpec.js
 create mode 100644 platform/commonUI/mobile/test/MCTDeviceSpec.js
 create mode 100644 platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js

diff --git a/platform/commonUI/browse/test/BackArrowControllerSpec.js b/platform/commonUI/browse/test/BackArrowControllerSpec.js
new file mode 100644
index 0000000000..9dfe0b5d2e
--- /dev/null
+++ b/platform/commonUI/browse/test/BackArrowControllerSpec.js
@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../src/BackArrowController"],
+    function (BackArrowController) {
+    }
+);
diff --git a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
new file mode 100644
index 0000000000..7783d163d6
--- /dev/null
+++ b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
@@ -0,0 +1,28 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ["../src/BrowseTreeController"],
+    function (BrowseTreeController) {
+    }
+);
diff --git a/platform/commonUI/browse/test/suite.json b/platform/commonUI/browse/test/suite.json
index e3a8f11c28..546cff128e 100644
--- a/platform/commonUI/browse/test/suite.json
+++ b/platform/commonUI/browse/test/suite.json
@@ -1,6 +1,8 @@
 [
+    "BackArrowController",
     "BrowseController",
     "BrowseObjectController",
+    "BrowseTreeController",
     "MenuArrowController",
     "creation/CreateAction",
     "creation/CreateActionProvider",
diff --git a/platform/commonUI/mobile/test/MCTDeviceSpec.js b/platform/commonUI/mobile/test/MCTDeviceSpec.js
new file mode 100644
index 0000000000..3b9bf9dcff
--- /dev/null
+++ b/platform/commonUI/mobile/test/MCTDeviceSpec.js
@@ -0,0 +1,29 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ['../src/MCTDevice'],
+    function (MCTDevice) {
+        "use strict";
+    }
+);
diff --git a/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js b/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
new file mode 100644
index 0000000000..daefa35e62
--- /dev/null
+++ b/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
@@ -0,0 +1,29 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+
+define(
+    ['../src/MobileBrowseTreeController'],
+    function (MobileBrowseTreeController) {
+        "use strict";
+    }
+);
diff --git a/platform/commonUI/mobile/test/suite.json b/platform/commonUI/mobile/test/suite.json
index 4cf0d3ee0d..4858ba366e 100644
--- a/platform/commonUI/mobile/test/suite.json
+++ b/platform/commonUI/mobile/test/suite.json
@@ -1,3 +1,5 @@
 [
-    "AgentService"
+    "AgentService",
+    "MCTDevice",
+    "MobileBrowseTreeController"
 ]

From 24586ae37805e1268bf0ed5d3d930f66574080d3 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:27:14 -0700
Subject: [PATCH 242/266] [Mobile] Remove BackArrowController

Remove BackArrowController; behavior can be implemented
in template.
---
 platform/commonUI/browse/bundle.json          |  7 +-
 .../browse/res/templates/back-arrow.html      | 10 +--
 .../browse/src/BackArrowController.js         | 64 -------------------
 .../browse/test/BackArrowControllerSpec.js    | 28 --------
 platform/commonUI/browse/test/suite.json      |  1 -
 5 files changed, 7 insertions(+), 103 deletions(-)
 delete mode 100644 platform/commonUI/browse/src/BackArrowController.js
 delete mode 100644 platform/commonUI/browse/test/BackArrowControllerSpec.js

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index 0f63130f86..9478213a0b 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -48,11 +48,6 @@
                 "key": "MenuArrowController",
                 "implementation": "MenuArrowController.js",
                 "depends": [ "$scope" ]
-            },
-            {
-                "key": "BackArrowController",
-                "implementation": "BackArrowController.js",
-                "depends": [ "$scope" ]
             }
         ],
         "controls": [
@@ -101,7 +96,7 @@
             },
             {
                 "key": "back-arrow",
-                "uses": [ "type", "action" ],
+                "uses": [ "context" ],
                 "templateUrl": "templates/back-arrow.html"
             }
         ],
diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html
index 6085b91249..daa29de67a 100644
--- a/platform/commonUI/browse/res/templates/back-arrow.html
+++ b/platform/commonUI/browse/res/templates/back-arrow.html
@@ -21,7 +21,9 @@
 -->
 
 <!-- Back Arrow Icon used on mobile-->
-<a ng-controller="BackArrowController"
-      class='type-icon icon ui-symbol s-back'
-      ng-hide="atRoot"
-      ng-click='navigateToParent()'>{</a>
+<a
+   class='type-icon icon ui-symbol s-back'
+   ng-show="context.getPath().length > 2"
+   ng-click="context.getParent().getCapability('action').perform('navigate')">
+    {
+</a>
diff --git a/platform/commonUI/browse/src/BackArrowController.js b/platform/commonUI/browse/src/BackArrowController.js
deleted file mode 100644
index b48740d288..0000000000
--- a/platform/commonUI/browse/src/BackArrowController.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-/*global define*/
-define(
-    function () {
-        'use strict';
-
-        function BackArrowController($scope) {
-            function navigateTo(parentObject) {
-                var action =
-                    parentObject && parentObject.getCapability('action');
-                if (action) {
-                    action.perform('navigate');
-                }
-            }
-
-            function navigateToParent() {
-                var domainObject = $scope.domainObject,
-                    context =
-                        domainObject && domainObject.getCapability('context');
-                if (context) {
-                    navigateTo(context.getParent());
-                }
-            }
-
-            function checkRoot(domainObject) {
-                var context =
-                    domainObject && domainObject.getCapability('context');
-
-                // We don't want to show the arrow if there is no context
-                // for this object, or if there is not a meaningful parent
-                // we can go back to.
-                $scope.atRoot = (!context) || (context.getPath().length < 3);
-            }
-
-            $scope.navigateToParent = navigateToParent;
-            $scope.$watch("domainObject", checkRoot);
-        }
-
-        return BackArrowController;
-
-
-    }
-);
diff --git a/platform/commonUI/browse/test/BackArrowControllerSpec.js b/platform/commonUI/browse/test/BackArrowControllerSpec.js
deleted file mode 100644
index 9dfe0b5d2e..0000000000
--- a/platform/commonUI/browse/test/BackArrowControllerSpec.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
-
-define(
-    ["../src/BackArrowController"],
-    function (BackArrowController) {
-    }
-);
diff --git a/platform/commonUI/browse/test/suite.json b/platform/commonUI/browse/test/suite.json
index 546cff128e..aa73dd358d 100644
--- a/platform/commonUI/browse/test/suite.json
+++ b/platform/commonUI/browse/test/suite.json
@@ -1,5 +1,4 @@
 [
-    "BackArrowController",
     "BrowseController",
     "BrowseObjectController",
     "BrowseTreeController",

From 884d36ad6def6f7471d739d6e5477bba75a5000f Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:49:55 -0700
Subject: [PATCH 243/266] [Mobile] Test BrowseTreeController variants

---
 .../browse/src/BrowseTreeController.js        | 18 +++-
 .../browse/test/BrowseTreeControllerSpec.js   | 15 +++
 .../mobile/src/MobileBrowseTreeController.js  |  2 +-
 .../test/MobileBrowseTreeControllerSpec.js    | 98 ++++++++++++++++++-
 4 files changed, 126 insertions(+), 7 deletions(-)

diff --git a/platform/commonUI/browse/src/BrowseTreeController.js b/platform/commonUI/browse/src/BrowseTreeController.js
index ee95dc2724..1ad50b8c1e 100644
--- a/platform/commonUI/browse/src/BrowseTreeController.js
+++ b/platform/commonUI/browse/src/BrowseTreeController.js
@@ -21,23 +21,33 @@
  *****************************************************************************/
 /*global define,Promise*/
 
-/**
- * This bundle implements Browse mode.
- * @namespace platform/commonUI/browse
- */
 define(
     [],
     function () {
         "use strict";
 
+
+        /**
+         * Controller to provide the ability to show/hide the tree in
+         * Browse mode.
+         * @constructor
+         * @memberof platform/commonUI/browse
+         */
         function BrowseTreeController() {
             this.state = true;
         }
 
+        /**
+         * Toggle the visibility of the tree.
+         */
         BrowseTreeController.prototype.toggle = function () {
             this.state = !this.state;
         };
 
+        /**
+         * Get the desired visibility state of the tree.
+         * @returns {boolean} true when visible
+         */
         BrowseTreeController.prototype.visible = function () {
             return this.state;
         };
diff --git a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
index 7783d163d6..4c605dd7b4 100644
--- a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
@@ -24,5 +24,20 @@
 define(
     ["../src/BrowseTreeController"],
     function (BrowseTreeController) {
+        'use strict';
+        describe("The BrowseTreeController", function () {
+            var controller = new BrowseTreeController();
+
+            it("is initially visible", function () {
+                expect(controller.visible()).toBeTruthy();
+            });
+
+            it("allows visibility to be toggled", function () {
+                controller.toggle();
+                expect(controller.visible()).toBeFalsy();
+                controller.toggle();
+                expect(controller.visible()).toBeTruthy();
+            });
+        });
     }
 );
diff --git a/platform/commonUI/mobile/src/MobileBrowseTreeController.js b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
index a88aa63088..9cb31fcc5a 100644
--- a/platform/commonUI/mobile/src/MobileBrowseTreeController.js
+++ b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
@@ -42,7 +42,7 @@ define(
                 }
             }
 
-            if (agentService.isMobile()) {
+            if (agentService.isPhone()) {
                 navigationService.addListener(changeObject);
                 $scope.$on("$destroy", function () {
                     navigationService.removeListener(changeObject);
diff --git a/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js b/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
index daefa35e62..a3be9b0652 100644
--- a/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
+++ b/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
@@ -22,8 +22,102 @@
 /*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
 
 define(
-    ['../src/MobileBrowseTreeController'],
+    ["../src/MobileBrowseTreeController"],
     function (MobileBrowseTreeController) {
-        "use strict";
+        'use strict';
+
+        describe("The mobile variant of the BrowseTreeController", function () {
+            var mockScope,
+                mockNavigationService,
+                mockAgentService,
+                mockDomainObjects,
+                controller;
+
+            // We want to reinstantiate for each test case
+            // because device state can influence constructor-time behavior
+            function instantiateController() {
+                return new MobileBrowseTreeController(
+                    mockScope,
+                    mockNavigationService,
+                    mockAgentService
+                );
+            }
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj("$scope", [ "$on" ]);
+                mockNavigationService = jasmine.createSpyObj(
+                    "navigationService",
+                    [ "getNavigation", "addListener", "removeListener" ]
+                );
+                mockDomainObjects = ['a', 'b'].map(function (id) {
+                    var mockDomainObject = jasmine.createSpyObj(
+                        'domainObject-' + id,
+                        [ 'getId', 'getModel', 'getCapability' ]
+                    );
+
+                    mockDomainObject.getId.andReturn(id);
+                    mockDomainObject.getModel.andReturn({});
+
+                    return mockDomainObject;
+                });
+                mockAgentService = jasmine.createSpyObj(
+                    "agentService",
+                    [ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
+                );
+
+                mockNavigationService.getNavigation.andReturn(mockDomainObjects[0]);
+            });
+
+            it("is initially visible", function () {
+                expect(instantiateController().visible()).toBeTruthy();
+            });
+
+            it("allows visibility to be toggled", function () {
+                controller = instantiateController();
+                controller.toggle();
+                expect(controller.visible()).toBeFalsy();
+                controller.toggle();
+                expect(controller.visible()).toBeTruthy();
+            });
+
+            it("collapses on navigation changes on portrait-oriented phones", function () {
+                mockAgentService.isMobile.andReturn(true);
+                mockAgentService.isPhone.andReturn(true);
+                mockAgentService.isPortrait.andReturn(true);
+                controller = instantiateController();
+                expect(controller.visible()).toBeTruthy();
+
+                // Simulate a navigation change
+                mockNavigationService.getNavigation.andReturn(mockDomainObjects[1]);
+                mockNavigationService.addListener.calls.forEach(function (call) {
+                    call.args[0](mockDomainObjects[1]);
+                });
+
+                // Tree should have collapsed
+                expect(controller.visible()).toBeFalsy();
+            });
+
+            it("detaches registered listeners when the scope is destroyed", function () {
+                mockAgentService.isMobile.andReturn(true);
+                mockAgentService.isPhone.andReturn(true);
+                mockAgentService.isPortrait.andReturn(true);
+                controller = instantiateController();
+
+                // Verify precondition
+                expect(mockNavigationService.removeListener)
+                    .not.toHaveBeenCalled();
+
+                mockScope.$on.calls.forEach(function (call) {
+                    if (call.args[0] === '$destroy') {
+                        call.args[1]();
+                    }
+                });
+
+                expect(mockNavigationService.removeListener)
+                    .toHaveBeenCalledWith(
+                        mockNavigationService.addListener.mostRecentCall.args[0]
+                    );
+            });
+        });
     }
 );

From 1e6c4732f121423e290b60d91f2427cff46a54c5 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 15:55:58 -0700
Subject: [PATCH 244/266] [Mobile] Consolidate BrowseTreeController

Make mobile variant of BrowseTreeController the regular version
of that controller; Browse mode has a dependency on mobile by
way of the mct-device directive anyway.
---
 platform/commonUI/browse/bundle.json          |   4 +-
 .../browse/src/BrowseTreeController.js        |  24 +++-
 .../browse/test/BrowseTreeControllerSpec.js   |  84 +++++++++++-
 platform/commonUI/mobile/bundle.json          |   8 --
 .../mobile/src/MobileBrowseTreeController.js  |  65 ---------
 .../test/MobileBrowseTreeControllerSpec.js    | 123 ------------------
 platform/commonUI/mobile/test/suite.json      |   3 +-
 7 files changed, 108 insertions(+), 203 deletions(-)
 delete mode 100644 platform/commonUI/mobile/src/MobileBrowseTreeController.js
 delete mode 100644 platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index 9478213a0b..602884c09f 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -27,7 +27,9 @@
             },
             {
                 "key": "BrowseTreeController",
-                "implementation": "BrowseTreeController.js"
+                "implementation": "BrowseTreeController.js",
+                "priority": "preferred",
+                "depends": [ "$scope", "navigationService", "agentService" ]
             },
             {
                 "key": "BrowseObjectController",
diff --git a/platform/commonUI/browse/src/BrowseTreeController.js b/platform/commonUI/browse/src/BrowseTreeController.js
index 1ad50b8c1e..a5a408c747 100644
--- a/platform/commonUI/browse/src/BrowseTreeController.js
+++ b/platform/commonUI/browse/src/BrowseTreeController.js
@@ -21,19 +21,39 @@
  *****************************************************************************/
 /*global define,Promise*/
 
+
 define(
     [],
     function () {
         "use strict";
 
-
         /**
          * Controller to provide the ability to show/hide the tree in
          * Browse mode.
          * @constructor
          * @memberof platform/commonUI/browse
          */
-        function BrowseTreeController() {
+        function BrowseTreeController($scope, navigationService, agentService) {
+            var object = navigationService.getNavigation(),
+                self = this;
+
+            // Collapse tree when navigation changes
+            function changeObject(newObject) {
+                if (newObject !== object && agentService.isPortrait()) {
+                    object = newObject;
+                    self.state = false;
+                }
+            }
+
+            // On phones, trees should collapse in portrait mode
+            // when something is navigated-to.
+            if (agentService.isPhone()) {
+                navigationService.addListener(changeObject);
+                $scope.$on("$destroy", function () {
+                    navigationService.removeListener(changeObject);
+                });
+            }
+
             this.state = true;
         }
 
diff --git a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
index 4c605dd7b4..341a76c82d 100644
--- a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
@@ -25,19 +25,99 @@ define(
     ["../src/BrowseTreeController"],
     function (BrowseTreeController) {
         'use strict';
+
         describe("The BrowseTreeController", function () {
-            var controller = new BrowseTreeController();
+            var mockScope,
+                mockNavigationService,
+                mockAgentService,
+                mockDomainObjects,
+                controller;
+
+            // We want to reinstantiate for each test case
+            // because device state can influence constructor-time behavior
+            function instantiateController() {
+                return new BrowseTreeController(
+                    mockScope,
+                    mockNavigationService,
+                    mockAgentService
+                );
+            }
+
+            beforeEach(function () {
+                mockScope = jasmine.createSpyObj("$scope", [ "$on" ]);
+                mockNavigationService = jasmine.createSpyObj(
+                    "navigationService",
+                    [ "getNavigation", "addListener", "removeListener" ]
+                );
+                mockDomainObjects = ['a', 'b'].map(function (id) {
+                    var mockDomainObject = jasmine.createSpyObj(
+                        'domainObject-' + id,
+                        [ 'getId', 'getModel', 'getCapability' ]
+                    );
+
+                    mockDomainObject.getId.andReturn(id);
+                    mockDomainObject.getModel.andReturn({});
+
+                    return mockDomainObject;
+                });
+                mockAgentService = jasmine.createSpyObj(
+                    "agentService",
+                    [ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
+                );
+
+                mockNavigationService.getNavigation.andReturn(mockDomainObjects[0]);
+            });
 
             it("is initially visible", function () {
-                expect(controller.visible()).toBeTruthy();
+                expect(instantiateController().visible()).toBeTruthy();
             });
 
             it("allows visibility to be toggled", function () {
+                controller = instantiateController();
                 controller.toggle();
                 expect(controller.visible()).toBeFalsy();
                 controller.toggle();
                 expect(controller.visible()).toBeTruthy();
             });
+
+            it("collapses on navigation changes on portrait-oriented phones", function () {
+                mockAgentService.isMobile.andReturn(true);
+                mockAgentService.isPhone.andReturn(true);
+                mockAgentService.isPortrait.andReturn(true);
+                controller = instantiateController();
+                expect(controller.visible()).toBeTruthy();
+
+                // Simulate a navigation change
+                mockNavigationService.getNavigation.andReturn(mockDomainObjects[1]);
+                mockNavigationService.addListener.calls.forEach(function (call) {
+                    call.args[0](mockDomainObjects[1]);
+                });
+
+                // Tree should have collapsed
+                expect(controller.visible()).toBeFalsy();
+            });
+
+            it("detaches registered listeners when the scope is destroyed", function () {
+                mockAgentService.isMobile.andReturn(true);
+                mockAgentService.isPhone.andReturn(true);
+                mockAgentService.isPortrait.andReturn(true);
+                controller = instantiateController();
+
+                // Verify precondition
+                expect(mockNavigationService.removeListener)
+                    .not.toHaveBeenCalled();
+
+                mockScope.$on.calls.forEach(function (call) {
+                    if (call.args[0] === '$destroy') {
+                        call.args[1]();
+                    }
+                });
+
+                expect(mockNavigationService.removeListener)
+                    .toHaveBeenCalledWith(
+                        mockNavigationService.addListener.mostRecentCall.args[0]
+                    );
+            });
         });
     }
 );
diff --git a/platform/commonUI/mobile/bundle.json b/platform/commonUI/mobile/bundle.json
index 0037a45259..1ac308a84b 100644
--- a/platform/commonUI/mobile/bundle.json
+++ b/platform/commonUI/mobile/bundle.json
@@ -1,13 +1,5 @@
 {
     "extensions": {
-        "controllers": [
-            {
-                "key": "BrowseTreeController",
-                "implementation": "MobileBrowseTreeController.js",
-                "priority": "preferred",
-                "depends": [ "$scope", "navigationService", "agentService" ]
-            }
-        ],
         "directives": [
             {
                 "key": "mctDevice",
diff --git a/platform/commonUI/mobile/src/MobileBrowseTreeController.js b/platform/commonUI/mobile/src/MobileBrowseTreeController.js
deleted file mode 100644
index 9cb31fcc5a..0000000000
--- a/platform/commonUI/mobile/src/MobileBrowseTreeController.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise*/
-
-/**
- * This bundle implements Browse mode.
- * @namespace platform/commonUI/browse
- */
-define(
-    [],
-    function () {
-        "use strict";
-
-        function MobileBrowseTreeController($scope, navigationService, agentService) {
-            var object = navigationService.getNavigation(),
-                self = this;
-
-            // Collapse tree when navigation changes
-            function changeObject(newObject) {
-                if (newObject !== object && agentService.isPortrait()) {
-                    object = newObject;
-                    self.state = false;
-                }
-            }
-
-            if (agentService.isPhone()) {
-                navigationService.addListener(changeObject);
-                $scope.$on("$destroy", function () {
-                    navigationService.removeListener(changeObject);
-                });
-            }
-
-            this.state = true;
-        }
-
-        MobileBrowseTreeController.prototype.toggle = function () {
-            this.state = !this.state;
-        };
-
-        MobileBrowseTreeController.prototype.visible = function () {
-            return this.state;
-        };
-
-        return MobileBrowseTreeController;
-    }
-);
diff --git a/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js b/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
deleted file mode 100644
index a3be9b0652..0000000000
--- a/platform/commonUI/mobile/test/MobileBrowseTreeControllerSpec.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/*****************************************************************************
- * Open MCT Web, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT Web is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT Web includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
-
-define(
-    ["../src/MobileBrowseTreeController"],
-    function (MobileBrowseTreeController) {
-        'use strict';
-
-        describe("The mobile variant of the BrowseTreeController", function () {
-            var mockScope,
-                mockNavigationService,
-                mockAgentService,
-                mockDomainObjects,
-                controller;
-
-            // We want to reinstantiate for each test case
-            // because device state can influence constructor-time behavior
-            function instantiateController() {
-                return new MobileBrowseTreeController(
-                    mockScope,
-                    mockNavigationService,
-                    mockAgentService
-                );
-            }
-
-            beforeEach(function () {
-                mockScope = jasmine.createSpyObj("$scope", [ "$on" ]);
-                mockNavigationService = jasmine.createSpyObj(
-                    "navigationService",
-                    [ "getNavigation", "addListener", "removeListener" ]
-                );
-                mockDomainObjects = ['a', 'b'].map(function (id) {
-                    var mockDomainObject = jasmine.createSpyObj(
-                        'domainObject-' + id,
-                        [ 'getId', 'getModel', 'getCapability' ]
-                    );
-
-                    mockDomainObject.getId.andReturn(id);
-                    mockDomainObject.getModel.andReturn({});
-
-                    return mockDomainObject;
-                });
-                mockAgentService = jasmine.createSpyObj(
-                    "agentService",
-                    [ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
-                );
-
-                mockNavigationService.getNavigation.andReturn(mockDomainObjects[0]);
-            });
-
-            it("is initially visible", function () {
-                expect(instantiateController().visible()).toBeTruthy();
-            });
-
-            it("allows visibility to be toggled", function () {
-                controller = instantiateController();
-                controller.toggle();
-                expect(controller.visible()).toBeFalsy();
-                controller.toggle();
-                expect(controller.visible()).toBeTruthy();
-            });
-
-            it("collapses on navigation changes on portrait-oriented phones", function () {
-                mockAgentService.isMobile.andReturn(true);
-                mockAgentService.isPhone.andReturn(true);
-                mockAgentService.isPortrait.andReturn(true);
-                controller = instantiateController();
-                expect(controller.visible()).toBeTruthy();
-
-                // Simulate a navigation change
-                mockNavigationService.getNavigation.andReturn(mockDomainObjects[1]);
-                mockNavigationService.addListener.calls.forEach(function (call) {
-                    call.args[0](mockDomainObjects[1]);
-                });
-
-                // Tree should have collapsed
-                expect(controller.visible()).toBeFalsy();
-            });
-
-            it("detaches registered listeners when the scope is destroyed", function () {
-                mockAgentService.isMobile.andReturn(true);
-                mockAgentService.isPhone.andReturn(true);
-                mockAgentService.isPortrait.andReturn(true);
-                controller = instantiateController();
-
-                // Verify precondition
-                expect(mockNavigationService.removeListener)
-                    .not.toHaveBeenCalled();
-
-                mockScope.$on.calls.forEach(function (call) {
-                    if (call.args[0] === '$destroy') {
-                        call.args[1]();
-                    }
-                });
-
-                expect(mockNavigationService.removeListener)
-                    .toHaveBeenCalledWith(
-                        mockNavigationService.addListener.mostRecentCall.args[0]
-                    );
-            });
-        });
-    }
-);
diff --git a/platform/commonUI/mobile/test/suite.json b/platform/commonUI/mobile/test/suite.json
index 4858ba366e..b56625efb4 100644
--- a/platform/commonUI/mobile/test/suite.json
+++ b/platform/commonUI/mobile/test/suite.json
@@ -1,5 +1,4 @@
 [
     "AgentService",
-    "MCTDevice",
-    "MobileBrowseTreeController"
+    "MCTDevice"
 ]

From ae4313253cc9769f4295fbd433614b64fe7359c3 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Fri, 18 Sep 2015 16:47:50 -0700
Subject: [PATCH 245/266] [Mobile] Test mct-device

---
 .../commonUI/mobile/test/MCTDeviceSpec.js     | 136 ++++++++++++++++++
 1 file changed, 136 insertions(+)

diff --git a/platform/commonUI/mobile/test/MCTDeviceSpec.js b/platform/commonUI/mobile/test/MCTDeviceSpec.js
index 3b9bf9dcff..7396c704d7 100644
--- a/platform/commonUI/mobile/test/MCTDeviceSpec.js
+++ b/platform/commonUI/mobile/test/MCTDeviceSpec.js
@@ -25,5 +25,141 @@ define(
     ['../src/MCTDevice'],
     function (MCTDevice) {
         "use strict";
+
+        var JQLITE_METHODS = [ 'parent', 'append' ];
+
+        describe("The mct-device directive", function () {
+            var mockAgentService,
+                mockTransclude,
+                mockElement,
+                mockParent,
+                mockClone,
+                testAttrs,
+                directive;
+
+            function link() {
+                directive.link(null, mockElement, testAttrs, null, mockTransclude);
+            }
+
+            beforeEach(function () {
+                mockAgentService = jasmine.createSpyObj(
+                    "agentService",
+                    [ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
+                );
+                mockTransclude = jasmine.createSpy("$transclude");
+                mockElement = jasmine.createSpyObj(name, JQLITE_METHODS);
+                mockParent = jasmine.createSpyObj(name, JQLITE_METHODS);
+                mockClone = jasmine.createSpyObj(name, JQLITE_METHODS);
+
+                mockElement.parent.andReturn(mockParent);
+
+                mockTransclude.andCallFake(function (fn) {
+                    fn(mockClone);
+                });
+
+                // Look desktop-like by default
+                mockAgentService.isLandscape.andReturn(true);
+
+                testAttrs = {};
+
+                directive = new MCTDevice(mockAgentService);
+            });
+
+            it("is applicable at the attribute level", function () {
+                expect(directive.restrict).toEqual("A");
+            });
+
+            it("transcludes at the elmeent level", function () {
+                expect(directive.transclude).toEqual('element');
+            });
+
+            it("has a greater priority number than ng-if", function () {
+                expect(directive.priority > 600).toBeTruthy();
+            });
+
+            it("restricts element inclusion for mobile devices", function () {
+                testAttrs.mctDevice = "mobile";
+                link();
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isMobile.andReturn(true);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+
+            it("restricts element inclusion for tablet devices", function () {
+                testAttrs.mctDevice = "tablet";
+                mockAgentService.isMobile.andReturn(true);
+                link();
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isTablet.andReturn(true);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+
+            it("restricts element inclusion for phone devices", function () {
+                testAttrs.mctDevice = "phone";
+                mockAgentService.isMobile.andReturn(true);
+                link();
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isPhone.andReturn(true);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+
+            it("restricts element inclusion for desktop devices", function () {
+                testAttrs.mctDevice = "desktop";
+                mockAgentService.isMobile.andReturn(true);
+                link();
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isMobile.andReturn(false);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+
+            it("restricts element inclusion for portrait orientation", function () {
+                testAttrs.mctDevice = "portrait";
+                link();
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isPortrait.andReturn(true);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+
+            it("restricts element inclusion for landscape orientation", function () {
+                testAttrs.mctDevice = "landscape";
+                mockAgentService.isLandscape.andReturn(false);
+                mockAgentService.isPortrait.andReturn(true);
+                link();
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isLandscape.andReturn(true);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+
+            it("allows multiple device characteristics to be requested", function () {
+                // Won't try to test every permutation here, just
+                // make sure the multi-characteristic feature has support.
+                testAttrs.mctDevice = "portrait mobile";
+                link();
+                // Neither portrait nor mobile, not called
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isPortrait.andReturn(true);
+                link();
+
+                // Was portrait, but not mobile, so no
+                expect(mockParent.append).not.toHaveBeenCalled();
+
+                mockAgentService.isMobile.andReturn(true);
+                link();
+                expect(mockParent.append).toHaveBeenCalledWith(mockClone);
+            });
+        });
     }
 );

From 0c1f77cfabbcb6e87b79821d091cb112db1eef0b Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Mon, 21 Sep 2015 10:53:45 -0700
Subject: [PATCH 246/266] [Mobile] Collapse tree on click

Collapse tree any time a user does an action in the
tree that would select an object; don't only do this
on navigation changes, because this fails to detect
occasions where user clicks the already-navigated-to
object.
---
 platform/commonUI/browse/bundle.json          |  2 +-
 .../commonUI/browse/res/templates/browse.html |  4 +-
 .../browse/src/BrowseTreeController.js        | 39 ++++++++++---------
 .../browse/test/BrowseTreeControllerSpec.js   | 37 +-----------------
 .../general/res/templates/subtree.html        |  1 +
 .../general/res/templates/tree-node.html      | 12 +++---
 .../commonUI/general/res/templates/tree.html  |  3 +-
 .../src/controllers/TreeNodeController.js     | 25 ++++++++++++
 .../controllers/TreeNodeControllerSpec.js     | 17 +++++++-
 9 files changed, 75 insertions(+), 65 deletions(-)

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index 602884c09f..558dc389c1 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -29,7 +29,7 @@
                 "key": "BrowseTreeController",
                 "implementation": "BrowseTreeController.js",
                 "priority": "preferred",
-                "depends": [ "$scope", "navigationService", "agentService" ]
+                "depends": [ "$scope", "agentService" ]
             },
             {
                 "key": "BrowseObjectController",
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html
index 0e510fd014..e6255bcb55 100644
--- a/platform/commonUI/browse/res/templates/browse.html
+++ b/platform/commonUI/browse/res/templates/browse.html
@@ -41,6 +41,7 @@
                          ng-hide="treeModel.search">
                         <mct-representation key="'tree'"
                                             mct-object="domainObject"
+                                            parameters="tree"
                                             ng-model="treeModel">
                         </mct-representation>
                     </div>
@@ -51,7 +52,8 @@
 
             <div class='split-pane-component items pane right-repr'>
                 <div class='holder abs l-mobile' id='content-area'>
-                    <mct-representation mct-object="navigatedObject" key="'browse-object'">
+                    <mct-representation mct-object="navigatedObject"
+                                        key="'browse-object'">
                     </mct-representation>
                 </div>
                 <div class="key-properties ui-symbol icon mobile-menu-icon desktop-hide"
diff --git a/platform/commonUI/browse/src/BrowseTreeController.js b/platform/commonUI/browse/src/BrowseTreeController.js
index a5a408c747..31875de4fa 100644
--- a/platform/commonUI/browse/src/BrowseTreeController.js
+++ b/platform/commonUI/browse/src/BrowseTreeController.js
@@ -33,28 +33,29 @@ define(
          * @constructor
          * @memberof platform/commonUI/browse
          */
-        function BrowseTreeController($scope, navigationService, agentService) {
-            var object = navigationService.getNavigation(),
-                self = this;
+        function BrowseTreeController($scope, agentService) {
+            var self = this;
+            this.agentService = agentService;
+            this.state = true;
 
-            // Collapse tree when navigation changes
-            function changeObject(newObject) {
-                if (newObject !== object && agentService.isPortrait()) {
-                    object = newObject;
+            /**
+             * Callback to invoke when any selection occurs in the tree.
+             * This controller can be passed in as the `parameters` object
+             * to the tree representation.
+             *
+             * @property {Function} callback
+             * @memberof platform/commonUI/browse.BrowseTreeController#
+             */
+            this.callback = function () {
+                // Note that, since this is a callback to pass, this is not
+                // declared as a method but as a property which happens to
+                // be a function.
+                if (agentService.isPhone() && agentService.isPortrait()) {
+                    // On phones, trees should collapse in portrait mode
+                    // when something is navigated-to.
                     self.state = false;
                 }
-            }
-
-            // On phones, trees should collapse in portrait mode
-            // when something is navigated-to.
-            if (agentService.isPhone()) {
-                navigationService.addListener(changeObject);
-                $scope.$on("$destroy", function () {
-                    navigationService.removeListener(changeObject);
-                });
-            }
-
-            this.state = true;
+            };
         }
 
         /**
diff --git a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
index 341a76c82d..077855febf 100644
--- a/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
+++ b/platform/commonUI/browse/test/BrowseTreeControllerSpec.js
@@ -28,7 +28,6 @@ define(
 
         describe("The BrowseTreeController", function () {
             var mockScope,
-                mockNavigationService,
                 mockAgentService,
                 mockDomainObjects,
                 controller;
@@ -38,17 +37,12 @@ define(
             function instantiateController() {
                 return new BrowseTreeController(
                     mockScope,
-                    mockNavigationService,
                     mockAgentService
                 );
             }
 
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj("$scope", [ "$on" ]);
-                mockNavigationService = jasmine.createSpyObj(
-                    "navigationService",
-                    [ "getNavigation", "addListener", "removeListener" ]
-                );
                 mockDomainObjects = ['a', 'b'].map(function (id) {
                     var mockDomainObject = jasmine.createSpyObj(
                         'domainObject-' + id,
@@ -64,8 +58,6 @@ define(
                     "agentService",
                     [ "isMobile", "isPhone", "isTablet", "isPortrait", "isLandscape" ]
                 );
-
-                mockNavigationService.getNavigation.andReturn(mockDomainObjects[0]);
             });
 
             it("is initially visible", function () {
@@ -87,37 +79,12 @@ define(
                 controller = instantiateController();
                 expect(controller.visible()).toBeTruthy();
 
-                // Simulate a navigation change
-                mockNavigationService.getNavigation.andReturn(mockDomainObjects[1]);
-                mockNavigationService.addListener.calls.forEach(function (call) {
-                    call.args[0](mockDomainObjects[1]);
-                });
+                // Simulate a change from the tree by invoking controller's
+                controller.callback();
 
                 // Tree should have collapsed
                 expect(controller.visible()).toBeFalsy();
             });
-
-            it("detaches registered listeners when the scope is destroyed", function () {
-                mockAgentService.isMobile.andReturn(true);
-                mockAgentService.isPhone.andReturn(true);
-                mockAgentService.isPortrait.andReturn(true);
-                controller = instantiateController();
-
-                // Verify precondition
-                expect(mockNavigationService.removeListener)
-                    .not.toHaveBeenCalled();
-
-                mockScope.$on.calls.forEach(function (call) {
-                    if (call.args[0] === '$destroy') {
-                        call.args[1]();
-                    }
-                });
-
-                expect(mockNavigationService.removeListener)
-                    .toHaveBeenCalledWith(
-                        mockNavigationService.addListener.mostRecentCall.args[0]
-                    );
-            });
         });
     }
 );
diff --git a/platform/commonUI/general/res/templates/subtree.html b/platform/commonUI/general/res/templates/subtree.html
index f459e8ebf8..637b73a8c4 100644
--- a/platform/commonUI/general/res/templates/subtree.html
+++ b/platform/commonUI/general/res/templates/subtree.html
@@ -29,6 +29,7 @@
     <li ng-repeat="child in composition">
         <mct-representation key="'tree-node'"
                             mct-object="child"
+                            parameters="parameters"
                             ng-model="ngModel">
         </mct-representation>
     </li>
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index a6d3560ee0..885646d606 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -39,7 +39,7 @@
                 class="mobile-hide"
                 key="'label'"
                 mct-object="domainObject"
-                ng-click="ngModel.selectedObject = domainObject"
+                ng-click="treeNode.select()"
                 >
             </mct-representation>
             <mct-representation
@@ -47,12 +47,9 @@
                 class="desktop-hide"
                 key="'label'"
                 mct-object="domainObject"
-                ng-click="ngModel.selectedObject =
-                              model.composition === undefined ?
-                                  domainObject : ngModel.selectedObject;
+                ng-click="(model.composition === undefined) && treeNode.select();
                           toggle.toggle();
-                          treeNode.trackExpansion();
-                          "
+                          treeNode.trackExpansion();"
                 >
             </mct-representation>
 
@@ -60,7 +57,7 @@
                 mct-device="mobile"
                 class='ui-symbol view-control'
                 ng-model="ngModel"
-                ng-click="ngModel.selectedObject = domainObject"
+                ng-click="treeNode.select()"
                 >
                 }
             </span>
@@ -73,6 +70,7 @@
 
             <mct-representation key="'subtree'"
                                 ng-model="ngModel"
+                                parameters="parameters"
                                 mct-object="treeNode.hasBeenExpanded() && domainObject">
             </mct-representation>
 
diff --git a/platform/commonUI/general/res/templates/tree.html b/platform/commonUI/general/res/templates/tree.html
index bf807991b6..5ecdfb98c7 100644
--- a/platform/commonUI/general/res/templates/tree.html
+++ b/platform/commonUI/general/res/templates/tree.html
@@ -23,7 +23,8 @@
     <li>
         <mct-representation key="'tree-node'"
                             mct-object="domainObject"
-                            ng-model="ngModel">
+                            ng-model="ngModel"
+                            parameters="parameters">
         </mct-representation>
     </li>
 </ul>
diff --git a/platform/commonUI/general/src/controllers/TreeNodeController.js b/platform/commonUI/general/src/controllers/TreeNodeController.js
index 7c21ee46aa..3efcf82d28 100644
--- a/platform/commonUI/general/src/controllers/TreeNodeController.js
+++ b/platform/commonUI/general/src/controllers/TreeNodeController.js
@@ -48,6 +48,15 @@ define(
          * node expansion when this tree node's _subtree_ will contain
          * the navigated object (recursively, this becomes an
          * expand-to-show-navigated-object behavior.)
+         *
+         * Finally, if a `callback` property is passed in through the
+         * `parameters` attribute of the `tree-node`, that callback
+         * will be invoked whenever a user clicks in a manner which
+         * would result in a selection. This callback is invoked
+         * even if the selection does not change (if you are only
+         * interested in changes, watch the `selectedObject` property
+         * of the object passed in `ng-model` instead.)
+         *
          * @memberof platform/commonUI/general
          * @constructor
          */
@@ -140,6 +149,22 @@ define(
             $scope.$watch("domainObject", checkSelection);
         }
 
+        /**
+         * Select the domain object represented by this node in the tree.
+         * This will both update the `selectedObject` property in
+         * the object passed in via `ng-model`, and will fire any `callback`
+         * passed in via `parameters`.
+         */
+        TreeNodeController.prototype.select = function () {
+            if (this.$scope.ngModel) {
+                this.$scope.ngModel.selectedObject =
+                    this.$scope.domainObject;
+            }
+            if ((this.$scope.parameters || {}).callback) {
+                this.$scope.parameters.callback(this.$scope.domainObject);
+            }
+        };
+
         /**
          * This method should be called when a node is expanded
          * to record that this has occurred, to support one-time
diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
index f2e5d1ae2d..52a8271bf2 100644
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -47,7 +47,6 @@ define(
                 mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on", "$emit"]);
                 mockTimeout = jasmine.createSpy("$timeout");
                 mockAgentService = jasmine.createSpyObj("agentService", ["isMobile", "isPhone", "getOrientation"]);
-                mockNgModel = jasmine.createSpyObj("ngModel", ["selectedObject"]);
                 mockDomainObject = jasmine.createSpyObj(
                     "domainObject",
                     [ "getId", "getCapability", "getModel", "useCapability" ]
@@ -196,6 +195,22 @@ define(
                 expect(controller.isSelected()).toBeFalsy();
 
             });
+
+            it("exposes selected objects in scope", function () {
+                mockScope.domainObject = mockDomainObject;
+                mockScope.ngModel = {};
+                controller.select();
+                expect(mockScope.ngModel.selectedObject)
+                    .toEqual(mockDomainObject);
+            });
+
+            it("invokes optional callbacks upon selection", function () {
+                mockScope.parameters =
+                    { callback: jasmine.createSpy('callback') };
+                controller.select();
+                expect(mockScope.parameters.callback).toHaveBeenCalled();
+            });
+
         });
     }
 );

From c9b2f5804d752e15ed505b0e3421b78e7d32dedb Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 21 Sep 2015 14:24:19 -0700
Subject: [PATCH 247/266] [Frontend] Minor tweaks to sizing of controls

open #95b
View switcher and plot control buttons now made small
when object is in a frame context in a Layout;
---
 bundles.json                                  |  2 +-
 .../commonUI/general/res/sass/_constants.scss |  1 +
 .../general/res/sass/user-environ/_frame.scss | 17 ++++--
 .../espresso/res/css/theme-espresso.css       | 60 ++++++++++++------
 .../themes/espresso/res/sass/_constants.scss  |  2 +-
 .../themes/snow/res/css/theme-snow.css        | 61 ++++++++++++-------
 .../themes/snow/res/sass/_constants.scss      |  2 +-
 7 files changed, 97 insertions(+), 48 deletions(-)

diff --git a/bundles.json b/bundles.json
index e258bab64f..a52aa694f9 100644
--- a/bundles.json
+++ b/bundles.json
@@ -8,7 +8,7 @@
     "platform/commonUI/dialog",
     "platform/commonUI/general",
     "platform/commonUI/inspect",
-    "platform/commonUI/themes/espresso",
+    "platform/commonUI/themes/snow",
     "platform/containment",
     "platform/execution",
     "platform/telemetry",
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 00c869bc68..78c7c916dd 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -96,6 +96,7 @@ $menuLineH: 1.5rem;
 $menuLineHPx: 24px;
 $btnStdH: 25px;
 $btnToolbarH: $btnStdH;
+$btnFrameH: 16px;
 
 /************************** PATHS */
 // Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss
index 6b993f9075..d8b27d7690 100644
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .frame {
-	$ohH: 16px;
+	$ohH: $btnFrameH;
 	$bc: $colorInteriorBorder;
 	&.child-frame.panel {
 		background: $colorBodyBg;
@@ -46,14 +46,23 @@
 		left: $myM;
 	}
 	&.frame-template {
-		.view-switcher {
+		.s-btn,
+		.s-menu {
 			height: $ohH;
 			line-height: $ohH;
-			z-index: 10;
+			padding: 0 $interiorMargin;
 			> span {
-				font-size: 0.7rem;
+				font-size: 0.65rem;
 			}
 		}
+
+		.s-menu:after {
+			font-size: 8px;
+		}
+
+		.view-switcher {
+			z-index: 10;
+		}
 		// Hide the view switcher by default when it's in an element that's in a frame context
 		// Frame template is used because we need to target the lowest nested frame
 		@include desktop {
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 71750ffb34..6eb39c0b0a 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -3291,19 +3291,30 @@ span.req {
       float: left;
       margin-right: 10px; }
 
-/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */
+/*.object-holder {
+    .s-btn {
+        //background: red !important;
+        $h: 16px;
+        height: $h;
+        line-height: $h;
+        > span {
+            font-size: 0.7rem;
+        }
+    }
+}*/
+/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
   display: -webkit-flex;
   flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap; }
-  /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 353, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
     -webkit-flex: 1 1 0;
     padding-right: 10px; }
 
-/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 360, ../../../../general/res/sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -4325,21 +4336,29 @@ ul.tree {
   bottom: 5px;
   left: 5px; }
 /* line 49, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame.frame-template .view-switcher {
+.frame.frame-template .s-btn, .frame.frame-template .s-menu,
+.frame.frame-template .s-menu {
   height: 16px;
   line-height: 16px;
+  padding: 0 5px; }
+  /* line 54, ../../../../general/res/sass/user-environ/_frame.scss */
+  .frame.frame-template .s-btn > span, .frame.frame-template .s-menu > span,
+  .frame.frame-template .s-menu > span {
+    font-size: 0.65rem; }
+/* line 59, ../../../../general/res/sass/user-environ/_frame.scss */
+.frame.frame-template .s-menu:after {
+  font-size: 8px; }
+/* line 63, ../../../../general/res/sass/user-environ/_frame.scss */
+.frame.frame-template .view-switcher {
   z-index: 10; }
-  /* line 53, ../../../../general/res/sass/user-environ/_frame.scss */
-  .frame.frame-template .view-switcher > span {
-    font-size: 0.7rem; }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 60, ../../../../general/res/sass/user-environ/_frame.scss */
+  /* line 69, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.frame-template .view-switcher {
     opacity: 0; }
-  /* line 63, ../../../../general/res/sass/user-environ/_frame.scss */
+  /* line 72, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.frame-template:hover .view-switcher {
     opacity: 1; } }
-/* line 71, ../../../../general/res/sass/user-environ/_frame.scss */
+/* line 80, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame .view-switcher .title-label {
   display: none; }
 
@@ -4958,6 +4977,7 @@ table {
       display: none; }
   /* line 76, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-display-area {
+    background-color: rgba(0, 0, 0, 0.1);
     position: absolute;
     top: 25px;
     right: 0;
@@ -5759,7 +5779,7 @@ table {
   min-width: 150px; }
   /* line 16, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main {
-    background-color: none;
+    background-color: rgba(0, 0, 0, 0.1);
     bottom: 30px; }
   /* line 20, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main-controlbar {
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 502a672ed6..cbc9a67e0a 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -104,7 +104,7 @@ $colorTabHeaderFg: lighten($colorTabHeaderBg, 40%);
 $colorTabHeaderBorder: $colorBodyBg;
 
 // Plot
-$colorPlotBg: none;
+$colorPlotBg: rgba(black, 0.1);
 $colorPlotFg: $colorBodyFg;
 $colorPlotHash: rgba(white, 0.2);
 $stylePlotHash: dashed;
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 43711c2d8e..3a819210eb 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -3223,19 +3223,30 @@ span.req {
       float: left;
       margin-right: 10px; }
 
-/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */
+/*.object-holder {
+    .s-btn {
+        //background: red !important;
+        $h: 16px;
+        height: $h;
+        line-height: $h;
+        > span {
+            font-size: 0.7rem;
+        }
+    }
+}*/
+/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
   display: -webkit-flex;
   flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap; }
-  /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 353, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
     -webkit-flex: 1 1 0;
     padding-right: 10px; }
 
-/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 360, ../../../../general/res/sass/user-environ/_layout.scss */
 .vscroll {
   overflow-y: auto; }
 
@@ -4238,21 +4249,29 @@ ul.tree {
   bottom: 5px;
   left: 5px; }
 /* line 49, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame.frame-template .view-switcher {
+.frame.frame-template .s-btn, .frame.frame-template .s-menu,
+.frame.frame-template .s-menu {
   height: 16px;
   line-height: 16px;
+  padding: 0 5px; }
+  /* line 54, ../../../../general/res/sass/user-environ/_frame.scss */
+  .frame.frame-template .s-btn > span, .frame.frame-template .s-menu > span,
+  .frame.frame-template .s-menu > span {
+    font-size: 0.65rem; }
+/* line 59, ../../../../general/res/sass/user-environ/_frame.scss */
+.frame.frame-template .s-menu:after {
+  font-size: 8px; }
+/* line 63, ../../../../general/res/sass/user-environ/_frame.scss */
+.frame.frame-template .view-switcher {
   z-index: 10; }
-  /* line 53, ../../../../general/res/sass/user-environ/_frame.scss */
-  .frame.frame-template .view-switcher > span {
-    font-size: 0.7rem; }
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 60, ../../../../general/res/sass/user-environ/_frame.scss */
+  /* line 69, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.frame-template .view-switcher {
     opacity: 0; }
-  /* line 63, ../../../../general/res/sass/user-environ/_frame.scss */
+  /* line 72, ../../../../general/res/sass/user-environ/_frame.scss */
   .frame.frame-template:hover .view-switcher {
     opacity: 1; } }
-/* line 71, ../../../../general/res/sass/user-environ/_frame.scss */
+/* line 80, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame .view-switcher .title-label {
   display: none; }
 
@@ -4871,7 +4890,7 @@ table {
       display: none; }
   /* line 76, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-display-area {
-    background-color: #eee;
+    background-color: rgba(0, 0, 0, 0.05);
     position: absolute;
     top: 25px;
     right: 0;
@@ -5648,7 +5667,7 @@ table {
   min-width: 150px; }
   /* line 16, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main {
-    background-color: #eee;
+    background-color: rgba(0, 0, 0, 0.05);
     bottom: 30px; }
   /* line 20, ../../../../general/res/sass/features/_imagery.scss */
   .l-image-main-wrapper .l-image-main-controlbar {
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 1f46db34ce..61d76cebb8 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -102,7 +102,7 @@ $colorTabHeaderFg: pullForward($colorBodyFg, 20%);
 $colorTabHeaderBorder: $colorBodyBg;
 
 // Plot
-$colorPlotBg: #eee;
+$colorPlotBg: rgba(black, 0.05);
 $colorPlotFg: $colorBodyFg;
 $colorPlotHash: rgba(black, 0.2);
 $stylePlotHash: dashed;

From 54334a8906966f0b0d24e78d104a48e9f17d7df5 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Mon, 21 Sep 2015 14:26:50 -0700
Subject: [PATCH 248/266] [Frontend] Setting default theme for open back to
 espresso

open #95b
Also removed unused COMPILE.scss file;
---
 bundles.json                                    | 2 +-
 platform/commonUI/general/res/sass/COMPILE.scss | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)
 delete mode 100644 platform/commonUI/general/res/sass/COMPILE.scss

diff --git a/bundles.json b/bundles.json
index a52aa694f9..e258bab64f 100644
--- a/bundles.json
+++ b/bundles.json
@@ -8,7 +8,7 @@
     "platform/commonUI/dialog",
     "platform/commonUI/general",
     "platform/commonUI/inspect",
-    "platform/commonUI/themes/snow",
+    "platform/commonUI/themes/espresso",
     "platform/containment",
     "platform/execution",
     "platform/telemetry",
diff --git a/platform/commonUI/general/res/sass/COMPILE.scss b/platform/commonUI/general/res/sass/COMPILE.scss
deleted file mode 100644
index 8c0ed50ef8..0000000000
--- a/platform/commonUI/general/res/sass/COMPILE.scss
+++ /dev/null
@@ -1 +0,0 @@
-// This file exists only to force compass to compile in this directory with watch .
\ No newline at end of file

From 3e5d294a2837c05ff8ad2b5cf791c13b2b706b58 Mon Sep 17 00:00:00 2001
From: Pete Richards <peter.l.richards@nasa.gov>
Date: Tue, 22 Sep 2015 10:57:30 -0700
Subject: [PATCH 249/266] [SCSS] Fixed typo

Changed tmpBorder mixin to specify '@include' instead of '@iclude'.  This
does not change the output CSS which means the tmpBorder mixin is not
used anywhere and could be removed.
---
 platform/commonUI/general/res/sass/_mixins.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index 9625ed96af..cd683ee4de 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -378,7 +378,7 @@
 }
 
 @mixin tmpBorder($c: #ffcc00, $a: 0.75) {
-    @inlude box-sizing(border-box);
+    @include box-sizing(border-box);
     border: 1px dotted rgba($c, $a);
 }
 
@@ -402,4 +402,4 @@
 @mixin s-stale($a: 0.5) {
     color: rgba($colorTelemFresh, $a) !important;
     font-style: italic;
-}
\ No newline at end of file
+}

From 8b7a94dcf868635e991ab582f12eb42ed2586ddf Mon Sep 17 00:00:00 2001
From: Pete Richards <peter.l.richards@nasa.gov>
Date: Tue, 22 Sep 2015 11:14:55 -0700
Subject: [PATCH 250/266] [Style] Remove unused variables, excess whitespace

Clean up unused variables and excess whitespace to match style guide.
---
 .../controllers/TreeNodeControllerSpec.js     | 10 ++--------
 .../test/gestures/InfoButtonGestureSpec.js    | 19 +++++++++---------
 .../inspect/test/gestures/InfoGestureSpec.js  |  2 +-
 .../test/actions/ContextMenuActionSpec.js     | 20 +++++--------------
 4 files changed, 17 insertions(+), 34 deletions(-)

diff --git a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
index 52a8271bf2..62a40d0586 100644
--- a/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
+++ b/platform/commonUI/general/test/controllers/TreeNodeControllerSpec.js
@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+/*global define,describe,it,expect,beforeEach,jasmine*/
 
 define(
     ["../../src/controllers/TreeNodeController"],
@@ -29,8 +29,6 @@ define(
         describe("The tree node controller", function () {
             var mockScope,
                 mockTimeout,
-                mockAgentService,
-                mockNgModel,
                 mockDomainObject,
                 controller;
 
@@ -46,16 +44,12 @@ define(
             beforeEach(function () {
                 mockScope = jasmine.createSpyObj("$scope", ["$watch", "$on", "$emit"]);
                 mockTimeout = jasmine.createSpy("$timeout");
-                mockAgentService = jasmine.createSpyObj("agentService", ["isMobile", "isPhone", "getOrientation"]);
                 mockDomainObject = jasmine.createSpyObj(
                     "domainObject",
                     [ "getId", "getCapability", "getModel", "useCapability" ]
                 );
 
-                mockAgentService.getOrientation.andReturn("portrait");
-                mockAgentService.isPhone.andReturn(true);
-
-                controller = new TreeNodeController(mockScope, mockTimeout, mockAgentService);
+                controller = new TreeNodeController(mockScope, mockTimeout);
             });
 
             it("allows tracking of expansion state", function () {
diff --git a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
index 036a77685b..0c48f5d940 100644
--- a/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
+++ b/platform/commonUI/inspect/test/gestures/InfoButtonGestureSpec.js
@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+/*global define,describe,it,expect,beforeEach,jasmine*/
 
 define(
     ['../../src/gestures/InfoButtonGesture'],
@@ -38,12 +38,11 @@ define(
                 mockScope,
                 mockOff,
                 testMetadata,
-                mockPromise,
                 mockHide,
                 gesture,
                 fireGesture,
                 fireDismissGesture;
-            
+
             beforeEach(function () {
                 mockTimeout = jasmine.createSpy('$timeout');
                 mockDocument = jasmine.createSpyObj('$document', ['find']);
@@ -62,7 +61,7 @@ define(
                     'domainObject',
                     [ 'getId', 'getCapability', 'useCapability', 'getModel' ]
                 );
-                
+
                 mockEvent = jasmine.createSpyObj("event", ["preventDefault", "stopPropagation"]);
                 mockEvent.pageX = 0;
                 mockEvent.pageY = 0;
@@ -88,7 +87,7 @@ define(
                 );
                 fireGesture =  mockElement.on.mostRecentCall.args[1];
             });
-            
+
             it("expect click on the representation", function () {
                 // Fires a click call on element and then
                 // expects the click to have happened
@@ -98,7 +97,7 @@ define(
                     jasmine.any(Function)
                 );
             });
-            
+
             it("expect click then dismiss on the representation", function () {
                 // Fire the click and then expect the click
                 fireGesture(mockEvent);
@@ -106,14 +105,14 @@ define(
                     "click",
                     jasmine.any(Function)
                 );
-                
+
                 // Get the touch start on the body
                 // and fire the dismiss gesture
                 fireDismissGesture =  mockBody.on.mostRecentCall.args[1];
                 fireDismissGesture(mockEvent);
                 // Expect Body to have been touched, event.preventDefault()
                 // to be called, then the mockBody listener to be detached
-                // lastly unbind the touchstart used to dismiss so other 
+                // lastly unbind the touchstart used to dismiss so other
                 // events can be called
                 expect(mockBody.on).toHaveBeenCalledWith(
                     "touchstart",
@@ -128,7 +127,7 @@ define(
                     'touchstart'
                 );
             });
-            
+
             it("detaches a callback for info bubble events when destroyed", function () {
                 expect(mockElement.off).not.toHaveBeenCalled();
 
@@ -139,7 +138,7 @@ define(
                     jasmine.any(Function)
                 );
             });
-            
+
         });
     }
 );
diff --git a/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js b/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
index 28408a2a7c..d25fa57ed3 100644
--- a/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
+++ b/platform/commonUI/inspect/test/gestures/InfoGestureSpec.js
@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+/*global define,describe,it,expect,beforeEach,jasmine*/
 
 define(
     ['../../src/gestures/InfoGesture'],
diff --git a/platform/representation/test/actions/ContextMenuActionSpec.js b/platform/representation/test/actions/ContextMenuActionSpec.js
index d9b18e41b6..233d6c6bf0 100644
--- a/platform/representation/test/actions/ContextMenuActionSpec.js
+++ b/platform/representation/test/actions/ContextMenuActionSpec.js
@@ -19,7 +19,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
+/*global define,describe,it,expect,beforeEach,jasmine*/
 
 
 /**
@@ -49,18 +49,8 @@ define(
                 mockDomainObject,
                 mockEvent,
                 mockActionContext,
-                mockNavigator,
-                mockStopPropagation,
                 action;
 
-            function fireEvent(evt, value) {
-                mockElement.on.calls.forEach(function (call) {
-                    if (call.args[0] === evt) {
-                        call.args[1](value);
-                    }
-                });
-            }
-            
             beforeEach(function () {
                 mockCompile = jasmine.createSpy("$compile");
                 mockCompiledTemplate = jasmine.createSpy("template");
@@ -83,7 +73,7 @@ define(
                 mockRootScope.$new.andReturn(mockScope);
 
                 mockActionContext = {key: 'menu', domainObject: mockDomainObject, event: mockEvent};
-                
+
                 action = new ContextMenuAction(
                     mockCompile,
                     mockDocument,
@@ -169,7 +159,7 @@ define(
                 // Menu should have been removed
                 expect(mockMenu.remove).toHaveBeenCalled();
             });
-            
+
             it("keeps a menu when menu is clicked", function () {
                 // Show the menu
                 action.perform();
@@ -186,7 +176,7 @@ define(
                 // Listener should have been detached from body
                 expect(mockBody.off).not.toHaveBeenCalled();
             });
-            
+
             it("keeps a menu when menu is clicked on mobile", function () {
                 mockAgentService.isMobile.andReturn(true);
                 action = new ContextMenuAction(
@@ -198,7 +188,7 @@ define(
                     mockActionContext
                 );
                 action.perform();
-                
+
                 mockMenu.on.calls.forEach(function (call) {
                     if (call.args[0] === 'touchstart') {
                         call.args[1](mockEvent);

From 56ccf29cfe824fe587a5f932b2be070793309acf Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 22 Sep 2015 11:32:18 -0700
Subject: [PATCH 251/266] [Persistence] Include timestamp on creation

Include a persisted timestamp when an object is first
created. nasa/openmctweb#139
---
 platform/commonUI/browse/bundle.json                  |  2 +-
 .../commonUI/browse/src/creation/CreationService.js   |  4 +++-
 .../browse/test/creation/CreationServiceSpec.js       | 11 +++++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/platform/commonUI/browse/bundle.json b/platform/commonUI/browse/bundle.json
index a9a2bdbad0..d0190d6027 100644
--- a/platform/commonUI/browse/bundle.json
+++ b/platform/commonUI/browse/bundle.json
@@ -142,7 +142,7 @@
                 "provides": "creationService",
                 "type": "provider",
                 "implementation": "creation/CreationService.js",
-                "depends": [ "persistenceService", "$q", "$log" ]
+                "depends": [ "persistenceService", "now", "$q", "$log" ]
             }
         ],
         "runs": [
diff --git a/platform/commonUI/browse/src/creation/CreationService.js b/platform/commonUI/browse/src/creation/CreationService.js
index 3dd96d289e..5ad71141be 100644
--- a/platform/commonUI/browse/src/creation/CreationService.js
+++ b/platform/commonUI/browse/src/creation/CreationService.js
@@ -42,10 +42,11 @@ define(
          * @memberof platform/commonUI/browse
          * @constructor
          */
-        function CreationService(persistenceService, $q, $log) {
+        function CreationService(persistenceService, now, $q, $log) {
             this.persistenceService = persistenceService;
             this.$q = $q;
             this.$log = $log;
+            this.now = now;
         }
 
         /**
@@ -133,6 +134,7 @@ define(
             // 2. Create a model with that ID in the persistence space
             // 3. Add that ID to
             return self.$q.when(uuid()).then(function (id) {
+                model.persisted = self.now();
                 return doPersist(persistence.getSpace(), id, model);
             }).then(function (id) {
                 return addToComposition(id, parent, persistence);
diff --git a/platform/commonUI/browse/test/creation/CreationServiceSpec.js b/platform/commonUI/browse/test/creation/CreationServiceSpec.js
index bdcd752c6c..8f39338fc2 100644
--- a/platform/commonUI/browse/test/creation/CreationServiceSpec.js
+++ b/platform/commonUI/browse/test/creation/CreationServiceSpec.js
@@ -31,6 +31,7 @@ define(
 
         describe("The creation service", function () {
             var mockPersistenceService,
+                mockNow,
                 mockQ,
                 mockLog,
                 mockParentObject,
@@ -63,6 +64,7 @@ define(
                     "persistenceService",
                     [ "createObject" ]
                 );
+                mockNow = jasmine.createSpy('now');
                 mockQ = { when: mockPromise, reject: mockReject };
                 mockLog = jasmine.createSpyObj(
                     "$log",
@@ -103,6 +105,8 @@ define(
                     mockPromise(true)
                 );
 
+                mockNow.andReturn(12321);
+
                 mockParentObject.getCapability.andCallFake(function (key) {
                     return mockCapabilities[key];
                 });
@@ -123,6 +127,7 @@ define(
 
                 creationService = new CreationService(
                     mockPersistenceService,
+                    mockNow,
                     mockQ,
                     mockLog
                 );
@@ -201,6 +206,12 @@ define(
                 expect(mockLog.error).toHaveBeenCalled();
             });
 
+            it("attaches a 'persisted' timestamp", function () {
+                var model = { someKey: "some value" };
+                creationService.createObject(model, mockParentObject);
+                expect(model.persisted).toEqual(mockNow());
+            });
+
         });
     }
 );

From c17269ba8bc7cff3ee2481d1b2c9b14bbba7c34f Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 22 Sep 2015 13:37:56 -0700
Subject: [PATCH 252/266] [LinkService] Reorder/refactor validation

Reoder validation to consider the composition capability
first; refactor to express as a single expression to clarify
validation logic (explicitly say 'and' instead of implying
it with control flow.)

Based on feedback from nasa/openmctweb#98
---
 .../entanglement/src/services/LinkService.js  | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/platform/entanglement/src/services/LinkService.js b/platform/entanglement/src/services/LinkService.js
index 8a0613d9b5..69085bbfe4 100644
--- a/platform/entanglement/src/services/LinkService.js
+++ b/platform/entanglement/src/services/LinkService.js
@@ -39,20 +39,17 @@ define(
         }
 
         LinkService.prototype.validate = function (object, parentCandidate) {
-            if (!parentCandidate || !parentCandidate.getId) {
-                return false;
-            }
-            if (parentCandidate.getId() === object.getId()) {
-                return false;
-            }
-            if ((parentCandidate.getModel().composition || []).indexOf(object.getId()) !== -1) {
-                return false;
-            }
-            return this.policyService.allow(
-                "composition",
-                parentCandidate.getCapability('type'),
-                object.getCapability('type')
-            ) && parentCandidate.hasCapability('composition');
+            var objectId = object.getId();
+            return !!parentCandidate &&
+                !!parentCandidate.getId &&
+                parentCandidate.getId() !== objectId &&
+                parentCandidate.hasCapability("composition") &&
+                parentCandidate.getModel().composition.indexOf(objectId) === -1 &&
+                this.policyService.allow(
+                    "composition",
+                    parentCandidate.getCapability('type'),
+                    object.getCapability('type')
+                );
         };
 
         LinkService.prototype.perform = function (object, parentObject) {

From 55362f6b268482c4079a6dcafc3d68d5818572e1 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 22 Sep 2015 13:48:11 -0700
Subject: [PATCH 253/266] [LinkService] Clarify comment

Clarify comment, based on feedback from nasa/openmctweb#98
---
 platform/entanglement/src/services/LinkService.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/platform/entanglement/src/services/LinkService.js b/platform/entanglement/src/services/LinkService.js
index 69085bbfe4..221bd042c0 100644
--- a/platform/entanglement/src/services/LinkService.js
+++ b/platform/entanglement/src/services/LinkService.js
@@ -53,7 +53,8 @@ define(
         };
 
         LinkService.prototype.perform = function (object, parentObject) {
-            // Note that this was checked-for explicitly during validate step
+            // It is assumed here that validate has been called, and therefore
+            // that parentObject.hasCapability('composition').
             var composition = parentObject.getCapability('composition');
 
             return composition.add(object).then(function (result) {

From b4a2bfd727b828caf52705e2b27fbcca10e71603 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 22 Sep 2015 13:50:10 -0700
Subject: [PATCH 254/266] [LinkService] Change variable name

...based on feedback from nasa/openmctweb#98
---
 platform/entanglement/src/services/LinkService.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/platform/entanglement/src/services/LinkService.js b/platform/entanglement/src/services/LinkService.js
index 221bd042c0..da4a89e33c 100644
--- a/platform/entanglement/src/services/LinkService.js
+++ b/platform/entanglement/src/services/LinkService.js
@@ -57,10 +57,10 @@ define(
             // that parentObject.hasCapability('composition').
             var composition = parentObject.getCapability('composition');
 
-            return composition.add(object).then(function (result) {
+            return composition.add(object).then(function (objectInNewContext) {
                 return parentObject.getCapability('persistence')
                     .persist()
-                    .then(function () { return result; });
+                    .then(function () { return objectInNewContext; });
             });
         };
 

From 597b18af1cfc76591c3b0207c55726815d6ad438 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 22 Sep 2015 14:07:46 -0700
Subject: [PATCH 255/266] [LinkService] Amend test cases

Remove redundant test case; modify composition-checking
test case to expose correct capability information.
In response to feedback from nasa/openmctweb#98
---
 platform/entanglement/test/services/LinkServiceSpec.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/platform/entanglement/test/services/LinkServiceSpec.js b/platform/entanglement/test/services/LinkServiceSpec.js
index 32bb4c0a7a..69c6ebd48c 100644
--- a/platform/entanglement/test/services/LinkServiceSpec.js
+++ b/platform/entanglement/test/services/LinkServiceSpec.js
@@ -88,19 +88,15 @@ define(
                     expect(validate()).toBe(false);
                 });
 
-                it("does not allow parents that contains object", function () {
-                    object.id = 'abc';
-                    parentCandidate.id = 'xyz';
-                    parentCandidate.model.composition = ['abc'];
-                    expect(validate()).toBe(false);
-                });
-
                 it("does not allow parents without composition", function () {
                     parentCandidate = domainObjectFactory({
                         name: 'parentCandidate'
                     });
                     object.id = 'abc';
                     parentCandidate.id = 'xyz';
+                    parentCandidate.hasCapability.andCallFake(function (c) {
+                        return c !== 'composition';
+                    });
                     parentCandidate.model.composition = undefined;
                     expect(validate()).toBe(false);
                 });

From ff24f064758f82f92ecffc2d766afb4790d8e9c2 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 22 Sep 2015 14:10:06 -0700
Subject: [PATCH 256/266] [Entanglement] Add JSDoc

...per feedback from nasa/openmctweb#98
---
 platform/entanglement/src/actions/AbstractComposeAction.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/platform/entanglement/src/actions/AbstractComposeAction.js b/platform/entanglement/src/actions/AbstractComposeAction.js
index cc78eb1888..6d747bc764 100644
--- a/platform/entanglement/src/actions/AbstractComposeAction.js
+++ b/platform/entanglement/src/actions/AbstractComposeAction.js
@@ -32,7 +32,8 @@ define(
          * @private
          */
         /**
-         * Change the composition of the specified objects.
+         * Change the composition of the specified objects. Note that this
+         * should only be invoked after successfully validating.
          *
          * @param {DomainObject} domainObject  the domain object to
          *    move, copy, or link.

From 119403e71cd8d35078a03036793835f8fedcb1e0 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 22 Sep 2015 14:39:15 -0700
Subject: [PATCH 257/266] [Entanglement] Throw errors if validation is skipped

...per feedback from nasa/openmctweb#98
---
 .../entanglement/src/services/CopyService.js  |  6 ++++++
 .../entanglement/src/services/LinkService.js  | 19 +++++++++++--------
 .../entanglement/src/services/MoveService.js  |  6 ++++++
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/platform/entanglement/src/services/CopyService.js b/platform/entanglement/src/services/CopyService.js
index d62eb2a0ed..48ba3e7ce5 100644
--- a/platform/entanglement/src/services/CopyService.js
+++ b/platform/entanglement/src/services/CopyService.js
@@ -64,6 +64,12 @@ define(
                 return self.perform(domainObject, parent);
             }
 
+            if (!this.validate(domainObject, parent)) {
+                throw new Error(
+                    "Tried to copy objects without validating first."
+                );
+            }
+
             if (domainObject.hasCapability('composition')) {
                 model.composition = [];
             }
diff --git a/platform/entanglement/src/services/LinkService.js b/platform/entanglement/src/services/LinkService.js
index da4a89e33c..465a07f3de 100644
--- a/platform/entanglement/src/services/LinkService.js
+++ b/platform/entanglement/src/services/LinkService.js
@@ -53,15 +53,18 @@ define(
         };
 
         LinkService.prototype.perform = function (object, parentObject) {
-            // It is assumed here that validate has been called, and therefore
-            // that parentObject.hasCapability('composition').
-            var composition = parentObject.getCapability('composition');
+            if (!this.validate(object, parentObject)) {
+                throw new Error(
+                    "Tried to link objects without validating first."
+                );
+            }
 
-            return composition.add(object).then(function (objectInNewContext) {
-                return parentObject.getCapability('persistence')
-                    .persist()
-                    .then(function () { return objectInNewContext; });
-            });
+            return parentObject.getCapability('composition').add(object)
+                .then(function (objectInNewContext) {
+                    return parentObject.getCapability('persistence')
+                        .persist()
+                        .then(function () { return objectInNewContext; });
+                });
         };
 
         return LinkService;
diff --git a/platform/entanglement/src/services/MoveService.js b/platform/entanglement/src/services/MoveService.js
index 30c341ef22..608163310f 100644
--- a/platform/entanglement/src/services/MoveService.js
+++ b/platform/entanglement/src/services/MoveService.js
@@ -82,6 +82,12 @@ define(
                 }
             }
 
+            if (!this.validate(object, parentObject)) {
+                throw new Error(
+                    "Tried to move objects without validating first."
+                );
+            }
+
             return this.linkService
                 .perform(object, parentObject)
                 .then(relocate)

From 6996883b85d8ac4fd270e7c1f6485f4bb1a02c77 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 22 Sep 2015 15:42:39 -0700
Subject: [PATCH 258/266] [Entanglement] Update specs

Update specs for move/copy/link services to account
for re-validation at time an action is performed.
nasa/openmctweb#98
---
 .../src/actions/AbstractComposeAction.js      |  3 +-
 .../test/services/CopyServiceSpec.js          | 39 ++++++---
 .../test/services/LinkServiceSpec.js          |  2 +-
 .../test/services/MoveServiceSpec.js          | 86 ++++++++++---------
 4 files changed, 76 insertions(+), 54 deletions(-)

diff --git a/platform/entanglement/src/actions/AbstractComposeAction.js b/platform/entanglement/src/actions/AbstractComposeAction.js
index 6d747bc764..f68391adc9 100644
--- a/platform/entanglement/src/actions/AbstractComposeAction.js
+++ b/platform/entanglement/src/actions/AbstractComposeAction.js
@@ -44,7 +44,8 @@ define(
          * @method platform/entanglement.AbstractComposeService#perform
          */
         /**
-         * Check if one object can be composed into another.
+         * Check if this composition change is valid for these objects.
+         *
          * @param {DomainObject} domainObject  the domain object to
          *    move, copy, or link.
          * @param {DomainObject} parent  the domain object whose composition
diff --git a/platform/entanglement/test/services/CopyServiceSpec.js b/platform/entanglement/test/services/CopyServiceSpec.js
index 6d7b1d5069..31c8dbccf4 100644
--- a/platform/entanglement/test/services/CopyServiceSpec.js
+++ b/platform/entanglement/test/services/CopyServiceSpec.js
@@ -41,19 +41,24 @@ define(
         }
 
         describe("CopyService", function () {
+            var policyService;
+
+            beforeEach(function () {
+                policyService = jasmine.createSpyObj(
+                    'policyService',
+                    ['allow']
+                );
+                policyService.allow.andReturn(true);
+            });
+
             describe("validate", function () {
 
-                var policyService,
-                    copyService,
+                var copyService,
                     object,
                     parentCandidate,
                     validate;
 
                 beforeEach(function () {
-                    policyService = jasmine.createSpyObj(
-                        'policyService',
-                        ['allow']
-                    );
                     copyService = new CopyService(
                         null,
                         null,
@@ -148,7 +153,7 @@ define(
                         );
                         createObjectPromise = synchronousPromise(undefined);
                         creationService.createObject.andReturn(createObjectPromise);
-                        copyService = new CopyService(null, creationService);
+                        copyService = new CopyService(null, creationService, policyService);
                         copyResult = copyService.perform(object, newParent);
                         copyFinished = jasmine.createSpy('copyFinished');
                         copyResult.then(copyFinished);
@@ -180,7 +185,8 @@ define(
                 });
 
                 describe("on domainObject with composition", function () {
-                    var childObject,
+                    var newObject,
+                        childObject,
                         compositionCapability,
                         compositionPromise;
 
@@ -216,6 +222,17 @@ define(
                                 composition: compositionCapability
                             }
                         });
+                        newObject = domainObjectFactory({
+                            name: 'object',
+                            id: 'abc2',
+                            model: {
+                                name: 'some object',
+                                composition: []
+                            },
+                            capabilities: {
+                                composition: compositionCapability
+                            }
+                        });
                         newParent = domainObjectFactory({
                             name: 'newParent',
                             id: '456',
@@ -227,9 +244,11 @@ define(
                             'creationService',
                             ['createObject']
                         );
-                        createObjectPromise = synchronousPromise(undefined);
+                        policyService.allow.andReturn(true);
+
+                        createObjectPromise = synchronousPromise(newObject);
                         creationService.createObject.andReturn(createObjectPromise);
-                        copyService = new CopyService(mockQ, creationService);
+                        copyService = new CopyService(mockQ, creationService, policyService);
                         copyResult = copyService.perform(object, newParent);
                         copyFinished = jasmine.createSpy('copyFinished');
                         copyResult.then(copyFinished);
diff --git a/platform/entanglement/test/services/LinkServiceSpec.js b/platform/entanglement/test/services/LinkServiceSpec.js
index 69c6ebd48c..5a92119e81 100644
--- a/platform/entanglement/test/services/LinkServiceSpec.js
+++ b/platform/entanglement/test/services/LinkServiceSpec.js
@@ -41,6 +41,7 @@ define(
                     'policyService',
                     ['allow']
                 );
+                mockPolicyService.allow.andReturn(true);
                 linkService = new LinkService(mockPolicyService);
             });
 
@@ -66,7 +67,6 @@ define(
                     validate = function () {
                         return linkService.validate(object, parentCandidate);
                     };
-                    mockPolicyService.allow.andReturn(true);
                 });
 
                 it("does not allow invalid parentCandidate", function () {
diff --git a/platform/entanglement/test/services/MoveServiceSpec.js b/platform/entanglement/test/services/MoveServiceSpec.js
index 02494a0afb..16eaa9dcbf 100644
--- a/platform/entanglement/test/services/MoveServiceSpec.js
+++ b/platform/entanglement/test/services/MoveServiceSpec.js
@@ -40,58 +40,57 @@ define(
 
             var moveService,
                 policyService,
+                object,
+                objectContextCapability,
+                currentParent,
+                parentCandidate,
                 linkService;
 
             beforeEach(function () {
+                objectContextCapability = jasmine.createSpyObj(
+                    'objectContextCapability',
+                    [
+                        'getParent'
+                    ]
+                );
+
+                object = domainObjectFactory({
+                    name: 'object',
+                    id: 'a',
+                    capabilities: {
+                        context: objectContextCapability,
+                        type: { type: 'object' }
+                    }
+                });
+
+                currentParent = domainObjectFactory({
+                    name: 'currentParent',
+                    id: 'b'
+                });
+
+                objectContextCapability.getParent.andReturn(currentParent);
+
+                parentCandidate = domainObjectFactory({
+                    name: 'parentCandidate',
+                    model: { composition: [] },
+                    id: 'c',
+                    capabilities: {
+                        type: { type: 'parentCandidate' }
+                    }
+                });
                 policyService = jasmine.createSpyObj(
                     'policyService',
                     ['allow']
                 );
                 linkService = new MockLinkService();
+                policyService.allow.andReturn(true);
                 moveService = new MoveService(policyService, linkService);
             });
 
             describe("validate", function () {
-                var object,
-                    objectContextCapability,
-                    currentParent,
-                    parentCandidate,
-                    validate;
+                var validate;
 
                 beforeEach(function () {
-
-                    objectContextCapability = jasmine.createSpyObj(
-                        'objectContextCapability',
-                        [
-                            'getParent'
-                        ]
-                    );
-
-                    object = domainObjectFactory({
-                        name: 'object',
-                        id: 'a',
-                        capabilities: {
-                            context: objectContextCapability,
-                            type: { type: 'object' }
-                        }
-                    });
-
-                    currentParent = domainObjectFactory({
-                        name: 'currentParent',
-                        id: 'b'
-                    });
-
-                    objectContextCapability.getParent.andReturn(currentParent);
-
-                    parentCandidate = domainObjectFactory({
-                        name: 'parentCandidate',
-                        model: { composition: [] },
-                        id: 'c',
-                        capabilities: {
-                            type: { type: 'parentCandidate' }
-                        }
-                    });
-
                     validate = function () {
                         return moveService.validate(object, parentCandidate);
                     };
@@ -145,14 +144,15 @@ define(
 
             describe("perform", function () {
 
-                var object,
-                    newParent,
-                    actionCapability,
+                var actionCapability,
                     locationCapability,
                     locationPromise,
+                    newParent,
                     moveResult;
 
                 beforeEach(function () {
+                    newParent = parentCandidate;
+
                     actionCapability = jasmine.createSpyObj(
                         'actionCapability',
                         ['perform']
@@ -175,7 +175,9 @@ define(
                         name: 'object',
                         capabilities: {
                             action: actionCapability,
-                            location: locationCapability
+                            location: locationCapability,
+                            context: objectContextCapability,
+                            type: { type: 'object' }
                         }
                     });
 

From 4743833f7c9c0e19a8b3734abcc04a054e6c4697 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 22 Sep 2015 15:49:22 -0700
Subject: [PATCH 259/266] [Entanglement] Verify revalidation

Verify that move/copy/link revalidate when performed and
throw errors when moving/copying/linking would be invalid.
nasa/openmctweb#98
---
 .../entanglement/test/services/CopyServiceSpec.js  | 14 ++++++++++++++
 .../entanglement/test/services/LinkServiceSpec.js  | 11 +++++++++++
 .../entanglement/test/services/MoveServiceSpec.js  | 11 +++++++++++
 3 files changed, 36 insertions(+)

diff --git a/platform/entanglement/test/services/CopyServiceSpec.js b/platform/entanglement/test/services/CopyServiceSpec.js
index 31c8dbccf4..0df6663bd7 100644
--- a/platform/entanglement/test/services/CopyServiceSpec.js
+++ b/platform/entanglement/test/services/CopyServiceSpec.js
@@ -285,6 +285,20 @@ define(
                     });
                 });
 
+                it("throws an expection when performed on invalid inputs", function () {
+                    var copyService =
+                        new CopyService(mockQ, creationService, policyService);
+
+                    function perform() {
+                        copyService.perform(object, newParent);
+                    }
+
+                    policyService.allow.andReturn(true);
+                    expect(perform).not.toThrow();
+                    policyService.allow.andReturn(false); // Cause validate to fail
+                    expect(perform).toThrow();
+                });
+
             });
         });
     }
diff --git a/platform/entanglement/test/services/LinkServiceSpec.js b/platform/entanglement/test/services/LinkServiceSpec.js
index 5a92119e81..37e58c97d8 100644
--- a/platform/entanglement/test/services/LinkServiceSpec.js
+++ b/platform/entanglement/test/services/LinkServiceSpec.js
@@ -220,6 +220,17 @@ define(
                     compositionPromise.resolve([linkedObject]);
                     expect(whenComplete).toHaveBeenCalledWith(linkedObject);
                 });
+
+                it("throws an expection when performed on invalid inputs", function () {
+                    function perform() {
+                        linkService.perform(object, parentObject);
+                    }
+
+                    mockPolicyService.allow.andReturn(true);
+                    expect(perform).not.toThrow();
+                    mockPolicyService.allow.andReturn(false); // Cause validate to fail
+                    expect(perform).toThrow();
+                });
             });
         });
     }
diff --git a/platform/entanglement/test/services/MoveServiceSpec.js b/platform/entanglement/test/services/MoveServiceSpec.js
index 16eaa9dcbf..7bf7d0372f 100644
--- a/platform/entanglement/test/services/MoveServiceSpec.js
+++ b/platform/entanglement/test/services/MoveServiceSpec.js
@@ -196,6 +196,17 @@ define(
                         .toHaveBeenCalledWith(jasmine.any(Function));
                 });
 
+                it("throws an expection when performed on invalid inputs", function () {
+                    function perform() {
+                        moveService.perform(object, newParent);
+                    }
+
+                    policyService.allow.andReturn(true);
+                    expect(perform).not.toThrow();
+                    policyService.allow.andReturn(false); // Cause validate to fail
+                    expect(perform).toThrow();
+                });
+
                 describe("when moving an original", function () {
                     beforeEach(function () {
                         locationCapability.getContextualLocation

From 8db334e45bcb81aaa8e9c5fd79bd362fd95685b7 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 22 Sep 2015 15:51:15 -0700
Subject: [PATCH 260/266] Revert "[LinkService] Reorder/refactor validation"

This reverts commit c17269ba8bc7cff3ee2481d1b2c9b14bbba7c34f.
---
 .../entanglement/src/services/LinkService.js  | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/platform/entanglement/src/services/LinkService.js b/platform/entanglement/src/services/LinkService.js
index 465a07f3de..40d809ebcb 100644
--- a/platform/entanglement/src/services/LinkService.js
+++ b/platform/entanglement/src/services/LinkService.js
@@ -39,17 +39,20 @@ define(
         }
 
         LinkService.prototype.validate = function (object, parentCandidate) {
-            var objectId = object.getId();
-            return !!parentCandidate &&
-                !!parentCandidate.getId &&
-                parentCandidate.getId() !== objectId &&
-                parentCandidate.hasCapability("composition") &&
-                parentCandidate.getModel().composition.indexOf(objectId) === -1 &&
-                this.policyService.allow(
-                    "composition",
-                    parentCandidate.getCapability('type'),
-                    object.getCapability('type')
-                );
+            if (!parentCandidate || !parentCandidate.getId) {
+                return false;
+            }
+            if (parentCandidate.getId() === object.getId()) {
+                return false;
+            }
+            if ((parentCandidate.getModel().composition || []).indexOf(object.getId()) !== -1) {
+                return false;
+            }
+            return this.policyService.allow(
+                "composition",
+                parentCandidate.getCapability('type'),
+                object.getCapability('type')
+            ) && parentCandidate.hasCapability('composition');
         };
 
         LinkService.prototype.perform = function (object, parentObject) {

From 97892869ae7f48e7bbfaaf7d47f0932ecc979902 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Tue, 22 Sep 2015 15:53:27 -0700
Subject: [PATCH 261/266] [Entanglement] Move composition check up

Move check for composition up higher in the sequence of
if-blocks in the validation step of linking; remove
fallback to [] for undefined composition, which is no
longer necessary as a consequence of this.

nasa/openmctweb#98
---
 platform/entanglement/src/services/LinkService.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/platform/entanglement/src/services/LinkService.js b/platform/entanglement/src/services/LinkService.js
index 40d809ebcb..5989c3cf06 100644
--- a/platform/entanglement/src/services/LinkService.js
+++ b/platform/entanglement/src/services/LinkService.js
@@ -45,14 +45,17 @@ define(
             if (parentCandidate.getId() === object.getId()) {
                 return false;
             }
-            if ((parentCandidate.getModel().composition || []).indexOf(object.getId()) !== -1) {
+            if (!parentCandidate.hasCapability('composition')) {
+                return false;
+            }
+            if (parentCandidate.getModel().composition.indexOf(object.getId()) !== -1) {
                 return false;
             }
             return this.policyService.allow(
                 "composition",
                 parentCandidate.getCapability('type'),
                 object.getCapability('type')
-            ) && parentCandidate.hasCapability('composition');
+            );
         };
 
         LinkService.prototype.perform = function (object, parentObject) {

From fb0861f2568f377b5308482a4a719800647bee41 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Wed, 23 Sep 2015 09:57:19 -0700
Subject: [PATCH 262/266] [Config] Fixed image URLs in ImageTelemetry.js;

open #95b
---
 example/imagery/src/ImageTelemetry.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/example/imagery/src/ImageTelemetry.js b/example/imagery/src/ImageTelemetry.js
index c0e1e2bd1d..127b65deba 100644
--- a/example/imagery/src/ImageTelemetry.js
+++ b/example/imagery/src/ImageTelemetry.js
@@ -31,11 +31,10 @@ define(
 
         var firstObservedTime = Date.now(),
             images = [
-                "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2015/01/comet_on_16_january_2015_navcam/15205508-1-eng-GB/Comet_on_16_January_2015_NavCam.jpg",
-                "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2014/08/comet_on_7_august_a/14721226-1-eng-GB/Comet_on_7_August_a_node_full_image_2.jpg",
-                "http://http://resources0.news.com.au/images/2014/10/26/1227102/619948-e62d0d0c-5cb3-11e4-9c68-d403f5dcc36d.jpg",
-                "http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2014/08/comet_on_16_august_a/14735866-1-eng-GB/Comet_on_16_August_a_node_full_image_2.jpg",
-			  	"http://www.esa.int/var/esa/storage/images/esa_multimedia/images/2015/08/year_at_a_comet_may_2015/15549436-1-eng-GB/Year_at_a_comet_May_2015_node_full_image_2.jpg"
+                "http://www.nasa.gov/393811main_Palomar_ao_bouchez_10s_after_impact_4x3_946-710.png",
+                "http://www.nasa.gov/393821main_Palomar_ao_bouchez_15s_after_impact_4x3_946-710.png",
+                "http://www.nasa.gov/images/content/393801main_CfhtVeillet2_4x3_516-387.jpg",
+                "http://www.nasa.gov/images/content/392790main_1024_768_GeminiNorth_NightBeforeImpact_946-710.jpg"
             ].map(function (url, index) {
                 return {
                     timestamp: firstObservedTime + 1000 * index,

From 6dbccd50009e4431a0e6d334ca0919b013315173 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 23 Sep 2015 12:43:03 -0700
Subject: [PATCH 263/266] [Entanglement] Update test cases around
 error-throwing

...per code review feedback, nasa/openmctweb#97
---
 .../test/services/CopyServiceSpec.js          | 57 ++++++++++++-------
 .../test/services/LinkServiceSpec.js          |  9 +--
 .../test/services/MoveServiceSpec.js          |  9 +--
 3 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/platform/entanglement/test/services/CopyServiceSpec.js b/platform/entanglement/test/services/CopyServiceSpec.js
index 0df6663bd7..b32eda40b6 100644
--- a/platform/entanglement/test/services/CopyServiceSpec.js
+++ b/platform/entanglement/test/services/CopyServiceSpec.js
@@ -131,6 +131,15 @@ define(
                     copyResult,
                     copyFinished;
 
+                beforeEach(function () {
+                    creationService = jasmine.createSpyObj(
+                        'creationService',
+                        ['createObject']
+                    );
+                    createObjectPromise = synchronousPromise(undefined);
+                    creationService.createObject.andReturn(createObjectPromise);
+                });
+
                 describe("on domain object without composition", function () {
                     beforeEach(function () {
                         object = domainObjectFactory({
@@ -147,12 +156,6 @@ define(
                                 composition: []
                             }
                         });
-                        creationService = jasmine.createSpyObj(
-                            'creationService',
-                            ['createObject']
-                        );
-                        createObjectPromise = synchronousPromise(undefined);
-                        creationService.createObject.andReturn(createObjectPromise);
                         copyService = new CopyService(null, creationService, policyService);
                         copyResult = copyService.perform(object, newParent);
                         copyFinished = jasmine.createSpy('copyFinished');
@@ -240,10 +243,6 @@ define(
                                 composition: []
                             }
                         });
-                        creationService = jasmine.createSpyObj(
-                            'creationService',
-                            ['createObject']
-                        );
                         policyService.allow.andReturn(true);
 
                         createObjectPromise = synchronousPromise(newObject);
@@ -285,18 +284,36 @@ define(
                     });
                 });
 
-                it("throws an expection when performed on invalid inputs", function () {
-                    var copyService =
-                        new CopyService(mockQ, creationService, policyService);
+                describe("on invalid inputs", function () {
+                    beforeEach(function () {
+                        object = domainObjectFactory({
+                            name: 'object',
+                            capabilities: {
+                                type: { type: 'object' }
+                            }
+                        });
+                        newParent = domainObjectFactory({
+                            name: 'parentCandidate',
+                            capabilities: {
+                                type: { type: 'parentCandidate' }
+                            }
+                        });
+                    });
 
-                    function perform() {
-                        copyService.perform(object, newParent);
-                    }
+                    it("throws an error", function () {
+                        var copyService =
+                            new CopyService(mockQ, creationService, policyService);
 
-                    policyService.allow.andReturn(true);
-                    expect(perform).not.toThrow();
-                    policyService.allow.andReturn(false); // Cause validate to fail
-                    expect(perform).toThrow();
+                        function perform() {
+                            copyService.perform(object, newParent);
+                        }
+
+                        spyOn(copyService, "validate");
+                        copyService.validate.andReturn(true);
+                        expect(perform).not.toThrow();
+                        copyService.validate.andReturn(false);
+                        expect(perform).toThrow();
+                    });
                 });
 
             });
diff --git a/platform/entanglement/test/services/LinkServiceSpec.js b/platform/entanglement/test/services/LinkServiceSpec.js
index 37e58c97d8..24ecf7a801 100644
--- a/platform/entanglement/test/services/LinkServiceSpec.js
+++ b/platform/entanglement/test/services/LinkServiceSpec.js
@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-/*global define,describe,beforeEach,it,jasmine,expect */
+/*global define,describe,beforeEach,it,jasmine,expect,spyOn */
 
 define(
     [
@@ -221,14 +221,15 @@ define(
                     expect(whenComplete).toHaveBeenCalledWith(linkedObject);
                 });
 
-                it("throws an expection when performed on invalid inputs", function () {
+                it("throws an error when performed on invalid inputs", function () {
                     function perform() {
                         linkService.perform(object, parentObject);
                     }
 
-                    mockPolicyService.allow.andReturn(true);
+                    spyOn(linkService, 'validate');
+                    linkService.validate.andReturn(true);
                     expect(perform).not.toThrow();
-                    mockPolicyService.allow.andReturn(false); // Cause validate to fail
+                    linkService.validate.andReturn(false);
                     expect(perform).toThrow();
                 });
             });
diff --git a/platform/entanglement/test/services/MoveServiceSpec.js b/platform/entanglement/test/services/MoveServiceSpec.js
index 7bf7d0372f..0eb9943dd8 100644
--- a/platform/entanglement/test/services/MoveServiceSpec.js
+++ b/platform/entanglement/test/services/MoveServiceSpec.js
@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-/*global define,describe,beforeEach,it,jasmine,expect */
+/*global define,describe,beforeEach,it,jasmine,expect,spyOn */
 define(
     [
         '../../src/services/MoveService',
@@ -196,14 +196,15 @@ define(
                         .toHaveBeenCalledWith(jasmine.any(Function));
                 });
 
-                it("throws an expection when performed on invalid inputs", function () {
+                it("throws an error when performed on invalid inputs", function () {
                     function perform() {
                         moveService.perform(object, newParent);
                     }
 
-                    policyService.allow.andReturn(true);
+                    spyOn(moveService, "validate");
+                    moveService.validate.andReturn(true);
                     expect(perform).not.toThrow();
-                    policyService.allow.andReturn(false); // Cause validate to fail
+                    moveService.validate.andReturn(false);
                     expect(perform).toThrow();
                 });
 

From 082122ddeccc4fedd2634864b94382d74fd492dc Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 23 Sep 2015 12:46:23 -0700
Subject: [PATCH 264/266] [Entanglement] Move policyService.allow.andReturn

...to locations where the specified return value
can be more closely correlated to the relevant
test cases. nasa/openmctweb#98
---
 platform/entanglement/test/services/CopyServiceSpec.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/platform/entanglement/test/services/CopyServiceSpec.js b/platform/entanglement/test/services/CopyServiceSpec.js
index b32eda40b6..2788fcefa8 100644
--- a/platform/entanglement/test/services/CopyServiceSpec.js
+++ b/platform/entanglement/test/services/CopyServiceSpec.js
@@ -48,7 +48,6 @@ define(
                     'policyService',
                     ['allow']
                 );
-                policyService.allow.andReturn(true);
             });
 
             describe("validate", function () {
@@ -138,6 +137,7 @@ define(
                     );
                     createObjectPromise = synchronousPromise(undefined);
                     creationService.createObject.andReturn(createObjectPromise);
+                    policyService.allow.andReturn(true);
                 });
 
                 describe("on domain object without composition", function () {
@@ -243,7 +243,6 @@ define(
                                 composition: []
                             }
                         });
-                        policyService.allow.andReturn(true);
 
                         createObjectPromise = synchronousPromise(newObject);
                         creationService.createObject.andReturn(createObjectPromise);

From fa60d620396822a4e61c1f2f3c9a56134f5da8d1 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 23 Sep 2015 12:49:04 -0700
Subject: [PATCH 265/266] [Entanglement] Simplify test case

...per review feedback from nasa/openmctweb#98
---
 platform/entanglement/test/services/LinkServiceSpec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/platform/entanglement/test/services/LinkServiceSpec.js b/platform/entanglement/test/services/LinkServiceSpec.js
index 24ecf7a801..3d63c2c030 100644
--- a/platform/entanglement/test/services/LinkServiceSpec.js
+++ b/platform/entanglement/test/services/LinkServiceSpec.js
@@ -97,7 +97,6 @@ define(
                     parentCandidate.hasCapability.andCallFake(function (c) {
                         return c !== 'composition';
                     });
-                    parentCandidate.model.composition = undefined;
                     expect(validate()).toBe(false);
                 });
 

From 056b0c8c5b087ae581bf7a192e83613b19c146f7 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Wed, 23 Sep 2015 12:59:02 -0700
Subject: [PATCH 266/266] [Fixed Position] Use spaces instead of tabs

...to satisfy code style checker and pass build,
in preparation for merge. nasa/openmctweb#118
---
 platform/features/layout/src/FixedController.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/platform/features/layout/src/FixedController.js b/platform/features/layout/src/FixedController.js
index 3cdd676022..2bece35391 100644
--- a/platform/features/layout/src/FixedController.js
+++ b/platform/features/layout/src/FixedController.js
@@ -229,7 +229,7 @@ define(
             // Position a panel after a drop event
             function handleDrop(e, id, position) {
                 // Don't handle this event if it has already been handled
-			  	// color is set to "" to let the CSS theme determine the default color
+                // color is set to "" to let the CSS theme determine the default color
                 if (e.defaultPrevented) {
                     return;
                 }