diff --git a/platform/commonUI/dialog/res/templates/dialog.html b/platform/commonUI/dialog/res/templates/dialog.html
index 1febc51795..78b852c968 100644
--- a/platform/commonUI/dialog/res/templates/dialog.html
+++ b/platform/commonUI/dialog/res/templates/dialog.html
@@ -19,24 +19,24 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="abs top-bar">
-    <div class="dialog-title">{{ngModel.title}}</div>
-    <div class="hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
+<div class="c-overlay__top-bar">
+    <div class="c-overlay__dialog-title">{{ngModel.title}}</div>
+    <div class="c-overlay__dialog-hint hint">All fields marked <span class="req icon-asterisk"></span> are required.</div>
 </div>
-<div class='abs editor'>
+<div class='c-overlay__contents-main'>
     <mct-form ng-model="ngModel.value"
               structure="ngModel.structure"
               class="validates"
               name="createForm">
     </mct-form>
 </div>
-<div class="abs bottom-bar">
-    <a class='s-button major'
+<div class="c-overlay__button-bar">
+    <a class='c-button c-button--major'
        ng-class="{ disabled: !createForm.$valid }"
        ng-click="ngModel.confirm()">
         OK
     </a>
-    <a class='s-button'
+    <a class='c-button  '
        ng-click="ngModel.cancel()">
         Cancel
     </a>
diff --git a/platform/commonUI/dialog/res/templates/overlay-options.html b/platform/commonUI/dialog/res/templates/overlay-options.html
index 9b62b0b824..40bf8d9755 100644
--- a/platform/commonUI/dialog/res/templates/overlay-options.html
+++ b/platform/commonUI/dialog/res/templates/overlay-options.html
@@ -19,18 +19,18 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<mct-container key="overlay">
-    <div class="abs top-bar">
-        <div class="dialog-title">{{ngModel.dialog.title}}</div>
-        <div class="hint">{{ngModel.dialog.hint}}</div>
+<mct-container key="c-overlay__contents">
+    <div class=c-overlay__top-bar">
+        <div class="c-overlay__dialog-title">{{ngModel.dialog.title}}</div>
+        <div class="c-overlay__dialog-hint hint">{{ngModel.dialog.hint}}</div>
     </div>
-    <div class='abs editor'>
+    <div class='c-overlay__contents-main'>
         <mct-include key="ngModel.dialog.template"
                      parameters="ngModel.dialog.parameters"
                      ng-model="ngModel.dialog.model">
         </mct-include>
     </div>
-    <div class="abs bottom-bar">
+    <div class="c-overlay__button-bar">
         <a ng-repeat="option in ngModel.dialog.options"
            href=''
            class="s-button lg"
diff --git a/platform/commonUI/dialog/res/templates/overlay.html b/platform/commonUI/dialog/res/templates/overlay.html
index 88f0f0e421..af88d22ecd 100644
--- a/platform/commonUI/dialog/res/templates/overlay.html
+++ b/platform/commonUI/dialog/res/templates/overlay.html
@@ -19,12 +19,12 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="abs overlay l-dialog" ng-class="{'delayEntry100ms' : ngModel.delay}">
-    <div class="abs blocker"></div>
-    <div class="abs outer-holder">
+<div class="c-overlay l-overlay-small" ng-class="{'delayEntry100ms' : ngModel.delay}">
+    <div class="c-overlay__blocker"></div>
+    <div class="c-overlay__outer">
         <a ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="close icon-x-in-circle"></a>
-        <div class="abs inner-holder contents" ng-transclude></div>
+           class="c-click-icon c-overlay__close-button icon-x-in-circle"></a>
+        <div class="c-overlay__contents" ng-transclude></div>
     </div>
 </div>
diff --git a/platform/commonUI/general/res/templates/label.html b/platform/commonUI/general/res/templates/label.html
index a111a5694f..2eb1aa9b69 100644
--- a/platform/commonUI/general/res/templates/label.html
+++ b/platform/commonUI/general/res/templates/label.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-object-label l-flex-row flex-elem grows">
-    <div class="t-item-icon flex-elem {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
-    <div class='t-title-label flex-elem grows'>{{model.name}}</div>
+<div class="c-object-label">
+    <div class="c-object-label__type-icon {{type.getCssClass()}}" ng-class="{ 'l-icon-link':location.isLink() }"></div>
+    <div class='c-object-label__name'>{{model.name}}</div>
 </div>
diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html
index 20c7a8d64d..51f0c162e0 100644
--- a/platform/commonUI/general/res/templates/tree-node.html
+++ b/platform/commonUI/general/res/templates/tree-node.html
@@ -20,14 +20,11 @@
  at runtime from the About dialog for additional information.
 -->
 <span ng-controller="ToggleController as toggle">
-    <span ng-controller="TreeNodeController as treeNode">
-        <span
-            class="tree-item menus-to-left"
-            ng-class="{selected: treeNode.isSelected()}"
-            >
-            <span
-                class='ui-symbol view-control flex-elem'
-                ng-class="{ 'has-children': model.composition !== undefined, expanded: toggle.isActive() }"
+    <div class="u-contents" ng-controller="TreeNodeController as treeNode">
+        <div class="c-tree__item menus-to-left"
+            ng-class="{selected: treeNode.isSelected()}">
+            <span class='c-disclosure-triangle c-tree__item__view-control'
+                ng-class="{ 'is-enabled': model.composition !== undefined, 'c-disclosure-triangle--expanded': toggle.isActive() }"
                 ng-click="toggle.toggle(); treeNode.trackExpansion()"
                 >
             </span>
@@ -39,19 +36,15 @@
                 ng-click="treeNode.select()"
                 >
             </mct-representation>
-        </span>
-        <span
-            class="tree-item-subtree"
+        </div>
+        <div class="u-contents"
             ng-show="toggle.isActive()"
-            ng-if="model.composition !== undefined"
-            >
-
+            ng-if="model.composition !== undefined">
             <mct-representation key="'subtree'"
                                 ng-model="ngModel"
                                 parameters="parameters"
                                 mct-object="treeNode.hasBeenExpanded() && domainObject">
             </mct-representation>
-
-        </span>
-    </span>
+        </div>
+    </div>
 </span>
diff --git a/platform/commonUI/general/res/templates/tree.html b/platform/commonUI/general/res/templates/tree.html
index fb43396533..043eae7f77 100644
--- a/platform/commonUI/general/res/templates/tree.html
+++ b/platform/commonUI/general/res/templates/tree.html
@@ -19,8 +19,8 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<ul class="tree">
-    <li>
+<ul class="c-tree">
+    <li class="c-tree__item-h">
         <mct-representation key="'tree-node'"
                             mct-object="domainObject"
                             ng-model="ngModel"
diff --git a/platform/commonUI/general/res/templates/tree/node.html b/platform/commonUI/general/res/templates/tree/node.html
index d6012b5ea9..41f3a2b226 100644
--- a/platform/commonUI/general/res/templates/tree/node.html
+++ b/platform/commonUI/general/res/templates/tree/node.html
@@ -1,4 +1,2 @@
-<span class="tree-item menus-to-left">
-</span>
-<span class="tree-item-subtree">
-</span>
+<span class="c-tree__item js-tree__item"></span>
+<span class="c-tree__item-subtree"></span>
diff --git a/platform/commonUI/general/res/templates/tree/toggle.html b/platform/commonUI/general/res/templates/tree/toggle.html
index 289f781f95..daa78ec9a0 100644
--- a/platform/commonUI/general/res/templates/tree/toggle.html
+++ b/platform/commonUI/general/res/templates/tree/toggle.html
@@ -1,2 +1 @@
-<span class='ui-symbol view-control flex-elem'>
-</span>
+<span class='c-disclosure-triangle c-tree__item__view-control'></span>
diff --git a/platform/commonUI/general/res/templates/tree/tree-label.html b/platform/commonUI/general/res/templates/tree/tree-label.html
index 564784445c..da82af2337 100644
--- a/platform/commonUI/general/res/templates/tree/tree-label.html
+++ b/platform/commonUI/general/res/templates/tree/tree-label.html
@@ -1,6 +1,4 @@
-<span class="rep-object-label">
-    <div class="t-object-label l-flex-row flex-elem grows">
-        <div class="t-item-icon flex-elem"></div>
-        <div class='t-title-label flex-elem grows'></div>
-    </div>
-</span>
+<div class="rep-object-label c-object-label c-tree__item__label">
+    <div class="c-object-label__type-icon c-tree__item__type-icon t-item-icon"></div>
+    <div class="c-object-label__name c-tree__item__name t-title-label"></div>
+</div>
diff --git a/platform/commonUI/general/src/ui/ToggleView.js b/platform/commonUI/general/src/ui/ToggleView.js
index 6222a506f4..abcabf0c0d 100644
--- a/platform/commonUI/general/src/ui/ToggleView.js
+++ b/platform/commonUI/general/src/ui/ToggleView.js
@@ -37,9 +37,9 @@ define([
         this.expanded = state;
 
         if (state) {
-            this.el.addClass('expanded');
+            this.el.addClass('c-disclosure-triangle--expanded');
         } else {
-            this.el.removeClass('expanded');
+            this.el.removeClass('c-disclosure-triangle--expanded');
         }
 
         this.callbacks.forEach(function (callback) {
diff --git a/platform/commonUI/general/src/ui/TreeNodeView.js b/platform/commonUI/general/src/ui/TreeNodeView.js
index 9c73058715..5a81fb25ee 100644
--- a/platform/commonUI/general/src/ui/TreeNodeView.js
+++ b/platform/commonUI/general/src/ui/TreeNodeView.js
@@ -28,7 +28,7 @@ define([
 ], function ($, nodeTemplate, ToggleView, TreeLabelView) {
 
     function TreeNodeView(gestureService, subtreeFactory, selectFn, openmct) {
-        this.li = $('<li>');
+        this.li = $('<li class="c-tree__item-h">');
         this.openmct = openmct;
         this.statusClasses = [];
 
@@ -38,7 +38,7 @@ define([
                 if (!this.subtreeView) {
                     this.subtreeView = subtreeFactory();
                     this.subtreeView.model(this.activeObject);
-                    this.li.find('.tree-item-subtree').eq(0)
+                    this.li.find('.c-tree__item-subtree').eq(0)
                         .append($(this.subtreeView.elements()));
                 }
                 $(this.subtreeView.elements()).removeClass('hidden');
@@ -85,9 +85,9 @@ define([
             var obj = domainObject.useCapability('adapter');
             var hasComposition =  this.openmct.composition.get(obj) !== undefined;
             if (hasComposition) {
-                $(this.toggleView.elements()).removeClass('no-children');
+                $(this.toggleView.elements()).addClass('is-enabled');
             } else {
-                $(this.toggleView.elements()).addClass('no-children');
+                $(this.toggleView.elements()).removeClass('is-enabled');
             }
         }
 
@@ -120,7 +120,7 @@ define([
             selectedIdPath = getIdPath(domainObject);
 
         if (this.onSelectionPath) {
-            this.li.find('.tree-item').eq(0).removeClass('selected');
+            this.li.find('.js-tree__item').eq(0).removeClass('is-selected');
             if (this.subtreeView) {
                 this.subtreeView.value(undefined);
             }
@@ -136,7 +136,7 @@ define([
 
         if (this.onSelectionPath) {
             if (activeIdPath.length === selectedIdPath.length) {
-                this.li.find('.tree-item').eq(0).addClass('selected');
+                this.li.find('.js-tree__item').eq(0).addClass('is-selected');
             } else {
                 // Expand to reveal the selection
                 this.toggleView.value(true);
diff --git a/platform/commonUI/general/src/ui/TreeView.js b/platform/commonUI/general/src/ui/TreeView.js
index 1b663d1576..5e6177caad 100644
--- a/platform/commonUI/general/src/ui/TreeView.js
+++ b/platform/commonUI/general/src/ui/TreeView.js
@@ -27,7 +27,7 @@ define([
 ], function ($, TreeNodeView, spinnerTemplate) {
 
     function TreeView(gestureService, openmct, selectFn) {
-        this.ul = $('<ul class="tree"></ul>');
+        this.ul = $('<ul class="c-tree"></ul>');
         this.nodeViews = [];
         this.callbacks = [];
         this.selectFn = selectFn || this.value.bind(this);
diff --git a/platform/features/imagery/res/templates/imagery.html b/platform/features/imagery/res/templates/imagery.html
index 5522ba5e03..2971b846b7 100644
--- a/platform/features/imagery/res/templates/imagery.html
+++ b/platform/features/imagery/res/templates/imagery.html
@@ -33,14 +33,14 @@
 
         <div class="l-image-main-controlbar flex-elem l-flex-row">
             <div class="l-datetime-w flex-elem grows">
-                <a class="s-button show-thumbs sm hidden icon-thumbs-strip"
+                <a class="c-button show-thumbs sm hidden icon-thumbs-strip"
                     ng-click="showThumbsBubble = (showThumbsBubble) ? false:true"></a>
                 <span class="l-time">{{imagery.getTime()}}</span>
             </div>
             <div class="h-local-controls flex-elem">
-                <a class="s-button pause-play"
+                <a class="c-button icon-pause pause-play"
                     ng-click="imagery.paused(!imagery.paused())"
-                    ng-class="{ paused: imagery.paused() }"></a>
+                    ng-class="{ 'is-paused': imagery.paused() }"></a>
                 <a href=""
                     class="s-button l-mag s-mag vsm icon-reset"
                     ng-click="clipped = false"
diff --git a/platform/forms/res/templates/form.html b/platform/forms/res/templates/form.html
index 3cc7d21a45..4ecae4d91a 100644
--- a/platform/forms/res/templates/form.html
+++ b/platform/forms/res/templates/form.html
@@ -19,13 +19,13 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<form name="mctForm" novalidate class="form l-flex-col">
+<form name="mctForm" novalidate class="form c-form" autocomplete="off">
     <span ng-repeat="section in structure.sections"
-          class="l-form-section l-flex-col flex-elem {{ section.cssClass }}">
-        <h2 class="section-header flex-elem" ng-if="section.name">
+          class="l-form-section c-form__section {{ section.cssClass }}">
+        <h2 class="c-form__header" ng-if="section.name">
             {{section.name}}
         </h2>
-        <ng-form class="form-row validates l-flex-row flex-elem {{ section.cssClass }}"
+        <ng-form class="form-row c-form__row validates {{ section.cssClass }}"
                  ng-class="{
                  first:$index < 1,
                  req: row.required,
@@ -37,11 +37,11 @@
                  }"
                  name="mctFormInner"
                  ng-repeat="row in section.rows">
-            <div class='label flex-elem' title="{{row.description}}">
+            <div class='c-form__row__label label flex-elem' title="{{row.description}}">
                 {{row.name}}
             </div>
-            <div class='controls flex-elem'>
-                <div class="wrapper" ng-if="row.control">
+            <div class='c-form__row__controls controls flex-elem'>
+                <div class="c-form__controls-wrapper wrapper" ng-if="row.control">
                     <mct-control key="row.control"
                                  ng-model="ngModel"
                                  ng-required="row.required"
diff --git a/platform/search/res/templates/search.html b/platform/search/res/templates/search.html
index 6443d40a9f..726f04fdd6 100644
--- a/platform/search/res/templates/search.html
+++ b/platform/search/res/templates/search.html
@@ -45,7 +45,7 @@
                 </mct-include>
             </div>
 
-            <a class="s-button c-search__btn-cancel"
+            <a class="c-button c-search__btn-cancel"
                ng-show="!(ngModel.input === '' || ngModel.input === undefined)"
                ng-click="ngModel.input = ''; ngModel.checkAll = true; menuController.checkAll(); controller.search()">
                 Cancel</a>
diff --git a/src/api/overlays/components/OverlayComponent.vue b/src/api/overlays/components/OverlayComponent.vue
index 447dd5c03d..148d27047c 100644
--- a/src/api/overlays/components/OverlayComponent.vue
+++ b/src/api/overlays/components/OverlayComponent.vue
@@ -64,8 +64,34 @@
         }
 
         &__contents {
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: column;
+        }
+
+        &__top-bar {
+            flex: 0 0 auto;
+            flex-direction: column;
+            display: flex;
+
+            > * {
+                flex: 0 0 auto;
+                margin-bottom: $interiorMargin;
+            }
+        }
+
+        &__dialog-title {
+            @include ellipsize();
+            font-size: 1.5em;
+            line-height: 120%;
+        }
+
+        &__contents-main {
+            display: flex;
+            flex-direction: column;
             flex: 1 1 auto;
             overflow: auto;
+            padding-right: $interiorMargin; // fend off scroll bar
         }
 
         &__button-bar {
@@ -89,7 +115,7 @@
         .c-overlay {
             &__blocker {
                 @include abs();
-                background: rgba(black, 0.7);
+                background: $colorOvrBlocker;
                 cursor: pointer;
                 display: block;
             }
diff --git a/src/plugins/plot/res/templates/plot-options-browse.html b/src/plugins/plot/res/templates/plot-options-browse.html
index f0783f300c..55e8c2db32 100644
--- a/src/plugins/plot/res/templates/plot-options-browse.html
+++ b/src/plugins/plot/res/templates/plot-options-browse.html
@@ -20,8 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree c-tree">
-        <h2 title="Plot series display properties in this object">Plot Series Options</h2>
+    <ul class="c-tree">
+        <h2 title="Plot series display properties in this object">Plot Series</h2>
         <li ng-repeat="series in config.series.models">
             <div class="c-tree__item menus-to-left">
                 <span class='c-disclosure-triangle is-enabled flex-elem'
diff --git a/src/plugins/plot/res/templates/plot-options-edit.html b/src/plugins/plot/res/templates/plot-options-edit.html
index 6947a73c5e..618bd78495 100644
--- a/src/plugins/plot/res/templates/plot-options-edit.html
+++ b/src/plugins/plot/res/templates/plot-options-edit.html
@@ -20,8 +20,8 @@
  at runtime from the About dialog for additional information.
 -->
 <div ng-controller="PlotOptionsController">
-    <ul class="tree c-tree">
-        <h2 title="Display properties for this object">Plot Series Options</h2>
+    <ul class="c-tree">
+        <h2 title="Display properties for this object">Plot Series</h2>
         <li ng-repeat="series in plotSeries"
             ng-controller="PlotSeriesFormController"
             form-model="series">
@@ -87,13 +87,15 @@
                                   ng-style="{ background: series.get('color').asHexString() }">
                             </span>
                         </div>
-                        <div class="c-palette--inline c-palette__items" ng-show="toggle.isActive()">
-                            <div class="u-contents" ng-repeat="group in config.series.palette.groups()">
-                                <div class="c-palette__item"
-                                     ng-repeat="color in group"
-                                     ng-class="{ 'selected': series.get('color').equalTo(color) }"
-                                     ng-style="{ background: color.asHexString() }"
-                                     ng-click="setColor(color)">
+                        <div class="c-palette c-palette--color">
+                            <div class="c-palette__items" ng-show="toggle.isActive()">
+                                <div class="u-contents" ng-repeat="group in config.series.palette.groups()">
+                                    <div class="c-palette__item"
+                                         ng-repeat="color in group"
+                                         ng-class="{ 'selected': series.get('color').equalTo(color) }"
+                                         ng-style="{ background: color.asHexString() }"
+                                         ng-click="setColor(color)">
+                                    </div>
                                 </div>
                             </div>
                         </div>
diff --git a/src/plugins/plot/res/templates/plot.html b/src/plugins/plot/res/templates/plot.html
index 3b585a19e5..dc3edc5523 100644
--- a/src/plugins/plot/res/templates/plot.html
+++ b/src/plugins/plot/res/templates/plot.html
@@ -26,16 +26,16 @@
     }"
     >
     <div class="l-control-bar" ng-show="!controller.hideExportButtons">
-         <span class="l-btn-set">
-            <a class="s-button t-export labeled icon-download"
+         <span class="c-button-set c-button-set--strip">
+            <a class="c-button icon-download"
                ng-click="controller.exportPNG()"
                title="Export This View's Data as PNG">
-                PNG
+                 <span class="c-button__label">PNG</span>
             </a>
-            <a class="s-button t-export labeled"
+            <a class="c-button"
                ng-click="controller.exportJPG()"
                title="Export This View's Data as JPG">
-                JPG
+                 <span class="c-button__label">JPG</span>
             </a>
         </span>
     </div>
diff --git a/src/plugins/plot/res/templates/stacked-plot.html b/src/plugins/plot/res/templates/stacked-plot.html
index 237ed9590c..c236e093d0 100644
--- a/src/plugins/plot/res/templates/stacked-plot.html
+++ b/src/plugins/plot/res/templates/stacked-plot.html
@@ -26,16 +26,16 @@
       }">
 
     <div class="l-control-bar" ng-show="!stackedPlot.hideExportButtons">
-       <span class="l-btn-set">
-          <a class="s-button t-export labeled icon-download"
+       <span class="c-button-set c-button-set--strip">
+          <a class="c-button icon-download"
              ng-click="stackedPlot.exportPNG()"
              title="Export This View's Data as PNG">
-              PNG
+              <span class="c-button__label">PNG</span>
           </a>
-          <a class="s-button t-export labeled"
+          <a class="c-button"
              ng-click="stackedPlot.exportJPG()"
              title="Export This View's Data as JPG">
-              JPG
+              <span class="c-button__label">JPG</span>
           </a>
       </span>
     </div>
diff --git a/src/plugins/plugins.js b/src/plugins/plugins.js
index dfa3017ccc..7a20fb6df3 100644
--- a/src/plugins/plugins.js
+++ b/src/plugins/plugins.js
@@ -78,26 +78,6 @@ define([
         };
     });
 
-    plugins.Snow = function () {
-        return function install(openmct) {
-            openmct.legacyExtension('constants', {
-                key: "THEME",
-                value: "snow"
-            });
-            import('snow' /* webpackChunkName: "theme-snow" */);
-        };
-    };
-
-    plugins.Espresso = function () {
-        return function install(openmct) {
-            openmct.legacyExtension('constants', {
-                key: "THEME",
-                value: "espresso"
-            });
-            import('espresso' /* webpackChunkName: "theme-espresso" */);
-        };
-    };
-
     plugins.UTCTimeSystem = UTCTimeSystem;
 
     plugins.ImportExport = ImportExport;
diff --git a/src/plugins/summaryWidget/res/input/paletteTemplate.html b/src/plugins/summaryWidget/res/input/paletteTemplate.html
index dab8578249..4a086bf703 100644
--- a/src/plugins/summaryWidget/res/input/paletteTemplate.html
+++ b/src/plugins/summaryWidget/res/input/paletteTemplate.html
@@ -1,4 +1,4 @@
-<a class="e-control s-button s-menu-button menu-element">
+<!--a class="e-control s-button s-menu-button menu-element">
    <span class="l-click-area"></span>
    <span class="t-swatch"></span>
    <div class="menu l-palette">
@@ -7,4 +7,15 @@
            <span class="l-palette-item-label">None</span>
        </div>
    </div>
-</a>
+</a-->
+<div class="c-ctrl-wrapper">
+    <button class="c-button--menu c-button--swatched js-button">
+        <div class="c-swatch t-swatch"></div>
+    </button>
+    <div class="c-menu c-palette">
+        <div class="c-palette__item-none">
+            <div class="c-palette__item"></div>
+        </div>
+        <div class="c-palette__items"></div>
+    </div>
+</div>
diff --git a/src/plugins/summaryWidget/res/input/selectTemplate.html b/src/plugins/summaryWidget/res/input/selectTemplate.html
index d5e9dece97..e49c69830e 100644
--- a/src/plugins/summaryWidget/res/input/selectTemplate.html
+++ b/src/plugins/summaryWidget/res/input/selectTemplate.html
@@ -1,4 +1,4 @@
-<div class="e-control select">
+<span>
     <select>
     </select>
- </div>
+ </span>
diff --git a/src/plugins/summaryWidget/res/ruleTemplate.html b/src/plugins/summaryWidget/res/ruleTemplate.html
index 089f8f8b1b..0780251ed9 100644
--- a/src/plugins/summaryWidget/res/ruleTemplate.html
+++ b/src/plugins/summaryWidget/res/ruleTemplate.html
@@ -1,21 +1,20 @@
-<div>
-    <div class="l-compact-form has-local-controls l-widget-rule s-widget-rule">
-        <div class="widget-rule-header">
-            <span class="flex-elem l-widget-thumb-wrapper">
-                <span class="grippy-holder">
-                    <span class="t-grippy grippy local-control local-controls-hidden"></span>
-                </span>
-                <span class="view-control expanded"></span>
-                <span class="t-widget-thumb widget-thumb">
-                    <span class="widget-label">DEF</span>
-                </span>
-            </span>
-            <span class="flex-elem rule-title">Default Title</span>
-            <span class="flex-elem rule-description grows">Rule description goes here</span>
-            <span class="flex-elem local-control local-controls-hidden l-rule-action-buttons-wrapper">
+<div class="c-sw-rule">
+    <div class="c-sw-rule__ui l-compact-form has-local-controls l-widget-rule s-widget-rule">
+        <div class="c-sw-rule__ui__header widget-rule-header">
+            <div class="c-sw-rule__grippy-wrapper">
+                <div class="c-sw-rule__grippy t-grippy local-control local-controls-hidden"></div>
+            </div>
+            <div class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled js-disclosure"></div>
+            <div class="t-widget-thumb widget-thumb c-sw c-sw--thumb">
+                <div class="c-sw__icon js-sw__icon"></div>
+                <div class="c-sw__label js-sw__label"></div>
+            </div>
+            <div class="flex-elem rule-title">Default Title</div>
+            <div class="flex-elem rule-description grows">Rule description goes here</div>
+            <div class="flex-elem local-control local-controls-hidden l-rule-action-buttons-wrapper">
                 <a class="s-icon-button icon-duplicate t-duplicate" title="Duplicate this rule"></a>
                 <a class="s-icon-button icon-trash t-delete" title="Delete this rule"></a>
-            </span>
+            </div>
         </div>
         <div class="widget-rule-content expanded">
             <ul>
@@ -28,7 +27,7 @@
                 <li class="connects-to-previous">
                     <label>Label:</label>
                     <span class="controls t-label-input">
-                        <input class="e-control t-rule-label-input" type="text" />
+                        <input class="t-rule-label-input" type="text" />
                     </span>
                 </li>
                 <li class="connects-to-previous">
@@ -40,26 +39,25 @@
                 </li>
                 <li class="connects-to-previous">
                     <label>Style:</label>
-                    <span class="controls t-style-input">
-                    </span>
+                    <span class="controls t-style-input"></span>
                 </li>
             </ul>
             <ul class="t-widget-rule-config">
                 <li>
                     <label>Trigger when</label>
                     <span class="controls">
-                        <div class="e-control select">
-                            <select class="t-trigger">
-                                <option value="any">any condition is met</option>
-                                <option value="all">all conditions are met</option>
-                            </select>
-                         </div>
+                        <select class="t-trigger">
+                            <option value="any">any condition is met</option>
+                            <option value="all">all conditions are met</option>
+                        </select>
                     </span>
                 </li>
                 <li>
                     <label></label>
                     <span class="controls">
-                        <a class="e-control s-button labeled add-condition icon-plus">Add Condition</a>
+                        <button class="c-button add-condition icon-plus">
+                            <span class="c-button__label">Add Condition</span>
+                        </button>
                     </span>
                 </li>
             </ul>
diff --git a/src/plugins/summaryWidget/res/testDataTemplate.html b/src/plugins/summaryWidget/res/testDataTemplate.html
index 616b7274cb..6470589c93 100644
--- a/src/plugins/summaryWidget/res/testDataTemplate.html
+++ b/src/plugins/summaryWidget/res/testDataTemplate.html
@@ -8,7 +8,9 @@
         </div>
         <div class="t-test-data-config w-widget-test-data-items">
             <div class="holder add-rule-button-wrapper align-right">
-                <a id="addRule" class="e-control s-button major labeled add-test-condition icon-plus">Add Test Value</a>
+                <button id="addRule" class="c-button c-button--major add-test-condition icon-plus">
+                    <span class="c-button__label">Add Test Value</span>
+                </button>
             </div>
         </div>
     </div>
diff --git a/src/plugins/summaryWidget/res/widgetTemplate.html b/src/plugins/summaryWidget/res/widgetTemplate.html
index 82933ad5a3..9384f0adf0 100755
--- a/src/plugins/summaryWidget/res/widgetTemplate.html
+++ b/src/plugins/summaryWidget/res/widgetTemplate.html
@@ -1,22 +1,31 @@
-<div class="w-summary-widget s-status-no-data">
-    <a id="widget" class="t-summary-widget l-summary-widget s-summary-widget labeled">
-        <span id="widgetLabel" class="label widget-label">Default Static Name</span>
+<div class="c-sw-edit w-summary-widget s-status-no-data">
+    <a id="widget" class="t-summary-widget l-summary-widget s-summary-widget labeled c-sw">
+        <div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
+        <div id="widgetLabel" class="label widget-label c-sw__label js-sw__label">Default Static Name</div>
     </a>
-    <div class="holder flex-elem t-message-inline l-message message-severity-alert t-message-widget-no-data">
+    <div class="c-summary-widget__message holder flex-elem t-message-inline l-message message-severity-alert t-message-widget-no-data">
         <div class="w-message-contents l-message-body-only">
             <div class="message-body">
                 You must add at least one telemetry object to edit this widget.
             </div>
         </div>
     </div>
-    <div class="holder l-flex-col l-flex-accordion flex-elem grows widget-edit-holder expanded-widget-test-data expanded-widget-rules">
-        <div class="section-header"><span class="view-control t-view-control-test-data expanded"></span>Test Data Values</div>
-        <div class="widget-test-data flex-accordion-holder"></div>
-        <div class="section-header"><span class="view-control t-view-control-rules expanded"></span>Rules</div>
-        <div class="holder widget-rules-wrapper flex-elem expanded">
-            <div id="ruleArea" class="widget-rules"></div>
+    <div class="c-sw-edit__ui holder l-flex-accordion flex-elem grows widget-edit-holder expanded-widget-test-data expanded-widget-rules">
+        <div class="c-sw-edit__ui__header">
+            <span class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled t-view-control-test-data"></span>
+            <span class="c-sw-edit__ui__header-label">Test Data Values</span>
+        </div>
+        <div class="c-sw-edit__ui__test-data widget-test-data flex-accordion-holder"></div>
+        <div class="c-sw-edit__ui__header">
+            <span class="c-disclosure-triangle c-disclosure-triangle--expanded is-enabled t-view-control-rules"></span>
+            <span class="c-sw-edit__ui__header-label">Rules</span>
+        </div>
+        <div class="c-sw-editui__rules-wrapper holder widget-rules-wrapper flex-elem expanded">
+            <div id="ruleArea" class="c-sw-editui__rules widget-rules"></div>
             <div class="holder add-rule-button-wrapper align-right">
-                <a id="addRule" class="s-button major labeled add-rule-button icon-plus">Add Rule</a>
+                <button id="addRule" class="c-button c-button--major add-rule-button icon-plus">
+                    <span class="c-button__label">Add Rule</span>
+                </button>
             </div>
         </div>
     </div>
diff --git a/src/plugins/summaryWidget/src/Rule.js b/src/plugins/summaryWidget/src/Rule.js
index 18df7bf1db..f1adcc35c7 100644
--- a/src/plugins/summaryWidget/src/Rule.js
+++ b/src/plugins/summaryWidget/src/Rule.js
@@ -32,6 +32,7 @@ define([
     function Rule(ruleConfig, domainObject, openmct, conditionManager, widgetDnD, container) {
         eventHelpers.extend(this);
         var self = this;
+        const THUMB_ICON_CLASS = 'c-sw__icon js-sw__icon';
 
         this.config = ruleConfig;
         this.domainObject = domainObject;
@@ -50,11 +51,12 @@ define([
         this.duplicate = this.duplicate.bind(this);
 
         this.thumbnail = $('.t-widget-thumb', this.domElement);
-        this.thumbnailLabel = $('.widget-label', this.domElement);
+        this.thumbnailIcon = $('.js-sw__icon', this.domElement);
+        this.thumbnailLabel = $('.c-sw__label', this.domElement);
         this.title = $('.rule-title', this.domElement);
         this.description = $('.rule-description', this.domElement);
         this.trigger = $('.t-trigger', this.domElement);
-        this.toggleConfigButton = $('.view-control', this.domElement);
+        this.toggleConfigButton = $('.js-disclosure', this.domElement);
         this.configArea = $('.widget-rule-content', this.domElement);
         this.grippy = $('.t-grippy', this.domElement);
         this.conditionArea = $('.t-widget-rule-config', this.domElement);
@@ -79,7 +81,7 @@ define([
         this.colorInputs = {
             'background-color': new ColorPalette('icon-paint-bucket', container),
             'border-color': new ColorPalette('icon-line-horz', container),
-            'color': new ColorPalette('icon-T', container)
+            'color': new ColorPalette('icon-font', container)
         };
 
         this.colorInputs.color.toggleNullOption();
@@ -92,7 +94,7 @@ define([
         function onIconInput(icon) {
             self.config.icon = icon;
             self.updateDomainObject('icon', icon);
-            self.thumbnailLabel.removeClass().addClass('label widget-label ' + icon);
+            self.thumbnailIcon.removeClass().addClass(THUMB_ICON_CLASS + ' ' + icon);
             self.eventEmitter.emit('change');
         }
 
@@ -168,7 +170,7 @@ define([
          */
         function toggleConfig() {
             self.configArea.toggleClass('expanded');
-            self.toggleConfigButton.toggleClass('expanded');
+            self.toggleConfigButton.toggleClass('c-disclosure-triangle--expanded');
             self.config.expanded = !self.config.expanded;
         }
 
@@ -179,7 +181,7 @@ define([
         });
 
         // Initialize thumbs when first loading
-        this.thumbnailLabel.removeClass().addClass('label widget-label ' + self.config.icon);
+        this.thumbnailIcon.removeClass().addClass(THUMB_ICON_CLASS + ' ' + self.config.icon);
         this.thumbnailLabel.html(self.config.label);
 
         Object.keys(this.colorInputs).forEach(function (inputKey) {
@@ -227,7 +229,7 @@ define([
 
         if (!this.config.expanded) {
             this.configArea.removeClass('expanded');
-            this.toggleConfigButton.removeClass('expanded');
+            this.toggleConfigButton.removeClass('c-disclosure-triangle--expanded');
         }
 
         if (this.domainObject.configuration.ruleOrder.length === 2) {
diff --git a/src/plugins/summaryWidget/src/SummaryWidget.js b/src/plugins/summaryWidget/src/SummaryWidget.js
index 7b5b669de8..8f58834fcc 100644
--- a/src/plugins/summaryWidget/src/SummaryWidget.js
+++ b/src/plugins/summaryWidget/src/SummaryWidget.js
@@ -22,8 +22,8 @@ define([
 
     //default css configuration for new rules
     var DEFAULT_PROPS = {
-        'color': '#ffffff',
-        'background-color': '#38761d',
+        'color': '#cccccc',
+        'background-color': '#666666',
         'border-color': 'rgba(0,0,0,0)'
     };
 
@@ -74,15 +74,12 @@ define([
         this.show = this.show.bind(this);
         this.destroy = this.destroy.bind(this);
         this.addRule = this.addRule.bind(this);
-        this.onEdit = this.onEdit.bind(this);
 
         this.addHyperlink(domainObject.url, domainObject.openNewTab);
         this.watchForChanges(openmct, domainObject);
 
         var id = objectUtils.makeKeyString(this.domainObject.identifier),
-            self = this,
-            oldDomainObject,
-            statusCapability;
+            self = this;
 
         /**
          * Toggles the configuration area for test data in the view
@@ -90,7 +87,7 @@ define([
          */
         function toggleTestData() {
             self.outerWrapper.toggleClass('expanded-widget-test-data');
-            self.toggleTestDataControl.toggleClass('expanded');
+            self.toggleTestDataControl.toggleClass('c-disclosure-triangle--expanded');
         }
         this.listenTo(this.toggleTestDataControl, 'click', toggleTestData);
 
@@ -100,22 +97,12 @@ define([
          */
         function toggleRules() {
             self.outerWrapper.toggleClass('expanded-widget-rules');
-            self.toggleRulesControl.toggleClass('expanded');
+            self.toggleRulesControl.toggleClass('c-disclosure-triangle--expanded');
         }
         this.listenTo(this.toggleRulesControl, 'click', toggleRules);
 
         openmct.$injector.get('objectService')
-            .getObjects([id])
-            .then(function (objs) {
-                oldDomainObject = objs[id];
-                statusCapability = oldDomainObject.getCapability('status');
-                self.editListenerUnsubscribe = statusCapability.listen(self.onEdit);
-                if (statusCapability.get('editing')) {
-                    self.onEdit(['editing']);
-                } else {
-                    self.onEdit([]);
-                }
-            });
+            .getObjects([id]);
     }
 
     /**
@@ -172,7 +159,6 @@ define([
         });
         this.refreshRules();
         this.updateWidget();
-        this.updateView();
 
         this.listenTo(this.addRuleButton, 'click', this.addRule);
         this.conditionManager.on('receiveTelemetry', this.executeRules, this);
@@ -196,37 +182,6 @@ define([
         this.stopListening();
     };
 
-    /**
-     * A callback function for the Open MCT status capability listener. If the
-     * view representing the domain object is in edit mode, update the internal
-     * state and widget view accordingly.
-     * @param {string[]} status an array containing the domain object's current status
-     */
-    SummaryWidget.prototype.onEdit = function (status) {
-        if (status && status.includes('editing')) {
-            this.editing = true;
-        } else {
-            this.editing = false;
-        }
-        this.updateView();
-    };
-
-    /**
-     * If this view is currently in edit mode, show all rule configuration interfaces.
-     * Otherwise, hide them.
-     */
-    SummaryWidget.prototype.updateView = function () {
-        if (this.editing) {
-            this.ruleArea.show();
-            this.testDataArea.show();
-            this.addRuleButton.show();
-        } else {
-            this.ruleArea.hide();
-            this.testDataArea.hide();
-            this.addRuleButton.hide();
-        }
-    };
-
     /**
      * Update the view from the current rule configuration and order
      */
@@ -260,11 +215,14 @@ define([
      * Update the widget's appearance from the configuration of the active rule
      */
     SummaryWidget.prototype.updateWidget = function () {
+        const WIDGET_CLASS = 'c-sw js-sw',
+            WIDGET_LABEL_CLASS = 'c-sw__label js-sw__label',
+            WIDGET_ICON_CLASS = 'c-sw__icon js-sw__icon';
         var activeRule = this.rulesById[this.activeId];
         this.applyStyle($('#widget', this.domElement), activeRule.getProperty('style'));
         $('#widget', this.domElement).prop('title', activeRule.getProperty('message'));
         $('#widgetLabel', this.domElement).html(activeRule.getProperty('label'));
-        $('#widgetLabel', this.domElement).removeClass().addClass('label widget-label c-summary-widget__label ' + activeRule.getProperty('icon'));
+        $('#widgetIcon', this.domElement).removeClass().addClass(WIDGET_ICON_CLASS + ' ' + activeRule.getProperty('icon'));
     };
 
     /**
diff --git a/src/plugins/summaryWidget/src/input/ColorPalette.js b/src/plugins/summaryWidget/src/input/ColorPalette.js
index 9d310de321..e233cd3308 100644
--- a/src/plugins/summaryWidget/src/input/ColorPalette.js
+++ b/src/plugins/summaryWidget/src/input/ColorPalette.js
@@ -36,11 +36,11 @@ function (
         var domElement = $(this.palette.getDOM()),
             self = this;
 
-        $('.s-menu-button', domElement).addClass('t-color-palette-menu-button');
+        $('.c-button--menu', domElement).addClass('c-button--swatched');
         $('.t-swatch', domElement).addClass('color-swatch');
-        $('.l-palette', domElement).addClass('l-color-palette');
+        $('.c-palette', domElement).addClass('c-palette--color');
 
-        $('.s-palette-item', domElement).each(function () {
+        $('.c-palette__item', domElement).each(function () {
             var elem = this;
             $(elem).css('background-color', elem.dataset.item);
         });
diff --git a/src/plugins/summaryWidget/src/input/IconPalette.js b/src/plugins/summaryWidget/src/input/IconPalette.js
index 3cc70df34f..ae167bccac 100644
--- a/src/plugins/summaryWidget/src/input/IconPalette.js
+++ b/src/plugins/summaryWidget/src/input/IconPalette.js
@@ -51,11 +51,11 @@ define([
         var domElement = $(this.palette.getDOM()),
             self = this;
 
-        $('.s-menu-button', domElement).addClass('t-icon-palette-menu-button');
+        $('.c-button--menu', domElement).addClass('c-button--swatched');
         $('.t-swatch', domElement).addClass('icon-swatch');
-        $('.l-palette', domElement).addClass('l-icon-palette');
+        $('.c-palette', domElement).addClass('c-palette--icon');
 
-        $('.s-palette-item', domElement).each(function () {
+        $('.c-palette-item', domElement).each(function () {
             var elem = this;
             $(elem).addClass(elem.dataset.item);
         });
diff --git a/src/plugins/summaryWidget/src/input/Palette.js b/src/plugins/summaryWidget/src/input/Palette.js
index 4ff75d91b7..dc01754749 100644
--- a/src/plugins/summaryWidget/src/input/Palette.js
+++ b/src/plugins/summaryWidget/src/input/Palette.js
@@ -30,33 +30,34 @@ define([
 
         this.domElement = $(paletteTemplate);
         this.itemElements = {
-            nullOption: $('.l-option-row .s-palette-item', this.domElement)
+            nullOption: $('.c-palette__item-none .c-palette__item', this.domElement)
         };
         this.eventEmitter = new EventEmitter();
         this.supportedCallbacks = ['change'];
         this.value = this.items[0];
         this.nullOption = ' ';
+        this.button = $('.js-button', this.domElement);
+        this.menu = $('.c-menu', this.domElement);
 
         this.hideMenu = this.hideMenu.bind(this);
 
-        self.domElement.addClass(this.cssClass);
+        self.button.addClass(this.cssClass);
         self.setNullOption(this.nullOption);
 
-        $('.l-palette-row', self.domElement).after('<div class = "l-palette-row"> </div>');
         self.items.forEach(function (item) {
-            var itemElement = $('<div class = "l-palette-item s-palette-item"' +
-                                ' data-item = ' + item + '> </div>');
-            $('.l-palette-row:last-of-type', self.domElement).append(itemElement);
+            var itemElement = $('<div class = "c-palette__item ' + item + '"' +
+                                ' data-item = ' + item + '></div>');
+            $('.c-palette__items', self.domElement).append(itemElement);
             self.itemElements[item] = itemElement;
         });
 
-        $('.menu', self.domElement).hide();
+        $('.c-menu', self.domElement).hide();
 
         this.listenTo($(document), 'click', this.hideMenu);
-        this.listenTo($('.l-click-area', self.domElement), 'click', function (event) {
+        this.listenTo($('.js-button', self.domElement), 'click', function (event) {
             event.stopPropagation();
-            $('.menu', self.container).hide();
-            $('.menu', self.domElement).show();
+            $('.c-menu', self.container).hide();
+            $('.c-menu', self.domElement).show();
         });
 
         /**
@@ -69,10 +70,10 @@ define([
             var elem = event.currentTarget,
                 item = elem.dataset.item;
             self.set(item);
-            $('.menu', self.domElement).hide();
+            $('.c-menu', self.domElement).hide();
         }
 
-        this.listenTo($('.s-palette-item', self.domElement), 'click', handleItemClick);
+        this.listenTo($('.c-palette__item', self.domElement), 'click', handleItemClick);
     }
 
     /**
@@ -90,7 +91,7 @@ define([
     };
 
     Palette.prototype.hideMenu = function () {
-        $('.menu', this.domElement).hide();
+        $('.c-menu', this.domElement).hide();
     };
 
     /**
@@ -139,8 +140,8 @@ define([
      * Update the view assoicated with the currently selected item
      */
     Palette.prototype.updateSelected = function (item) {
-        $('.s-palette-item', this.domElement).removeClass('selected');
-        this.itemElements[item].addClass('selected');
+        $('.c-palette__item', this.domElement).removeClass('is-selected');
+        this.itemElements[item].addClass('is-selected');
         if (item === 'nullOption') {
             $('.t-swatch', this.domElement).addClass('no-selection');
         } else {
@@ -162,7 +163,7 @@ define([
      * Hides the 'no selection' option to be hidden in the view if it doesn't apply
      */
     Palette.prototype.toggleNullOption = function () {
-        $('.l-option-row', this.domElement).toggle();
+        $('.c-palette__item-none', this.domElement).toggle();
     };
 
     return Palette;
diff --git a/src/plugins/summaryWidget/src/views/SummaryWidgetView.js b/src/plugins/summaryWidget/src/views/SummaryWidgetView.js
index 38826081b7..bfe73667ac 100644
--- a/src/plugins/summaryWidget/src/views/SummaryWidgetView.js
+++ b/src/plugins/summaryWidget/src/views/SummaryWidgetView.js
@@ -3,6 +3,8 @@ define([
 ], function (
     summaryWidgetTemplate
 ) {
+    const WIDGET_ICON_CLASS = 'c-sw__icon js-sw__icon';
+
     function SummaryWidgetView(domainObject, openmct) {
         this.openmct = openmct;
         this.domainObject = domainObject;
@@ -18,7 +20,7 @@ define([
         this.widget.title = datum.message;
         this.label.title = datum.message;
         this.label.innerHTML = datum.ruleLabel;
-        this.label.className = 'label widget-label c-summary-widget__label ' + datum.icon;
+        this.icon.className = WIDGET_ICON_CLASS + ' ' + datum.icon;
     };
 
     SummaryWidgetView.prototype.render = function () {
@@ -29,7 +31,8 @@ define([
 
         this.container.innerHTML = summaryWidgetTemplate;
         this.widget = this.container.querySelector('a');
-        this.label = this.container.querySelector('.widget-label');
+        this.icon = this.container.querySelector('#widgetIcon');
+        this.label = this.container.querySelector('.js-sw__label');
 
 
         if (this.domainObject.url) {
diff --git a/src/plugins/summaryWidget/src/views/summary-widget.html b/src/plugins/summaryWidget/src/views/summary-widget.html
index d6af1ea539..738fbaf08b 100644
--- a/src/plugins/summaryWidget/src/views/summary-widget.html
+++ b/src/plugins/summaryWidget/src/views/summary-widget.html
@@ -1,5 +1,4 @@
-<div class="w-summary-widget s-status-no-data c-widget-wrapper u-contents">
-    <a class="t-summary-widget c-button c-summary-widget u-links u-fills-container">
-        <span class="label widget-label c-summary-widget__label">Loading...</span>
-    </a>
-</div>
+<a class="t-summary-widget c-summary-widget js-sw u-links u-fills-container">
+    <div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
+    <div id="widgetLabel" class="c-sw__label js-sw__label">Loading...</div>
+</a>
\ No newline at end of file
diff --git a/src/plugins/telemetryTable/components/table.vue b/src/plugins/telemetryTable/components/table.vue
index 922d872ab3..dcc0328061 100644
--- a/src/plugins/telemetryTable/components/table.vue
+++ b/src/plugins/telemetryTable/components/table.vue
@@ -23,10 +23,10 @@
 <div class="c-table c-telemetry-table c-table--filterable c-table--sortable has-control-bar"
      :class="{'loading': loading}">
     <div class="c-table__control-bar c-control-bar">
-        <a class="s-button t-export icon-download labeled"
+        <a class="c-button icon-download labeled"
            v-on:click="exportAsCSV()"
            title="Export This View's Data">
-            Export As CSV
+            <span class="c-button__label">Export As CSV</span>
         </a>
     </div>
     <div v-if="isDropTargetActive" class="c-telemetry-table__drop-target" :style="dropTargetStyle"></div>
diff --git a/src/styles/_animations.scss b/src/styles-new/_animations.scss
similarity index 93%
rename from src/styles/_animations.scss
rename to src/styles-new/_animations.scss
index 1f0f4f3d27..1d06cf7f9e 100644
--- a/src/styles/_animations.scss
+++ b/src/styles-new/_animations.scss
@@ -1,18 +1,18 @@
-@include keyframes(rotation) {
+@keyframes rotation {
     100% { transform: rotate(360deg); }
 }
 
-@include keyframes(rotation-centered) {
+@keyframes rotation-centered {
     0%   { transform: translate(-50%, -50%) rotate(0deg); }
     100% { transform: translate(-50%, -50%) rotate(360deg); }
 }
 
-@include keyframes(clock-hands) {
+@keyframes clock-hands {
     0% { transform: translate(-50%, -50%) rotate(0deg); }
     100% { transform: translate(-50%, -50%) rotate(360deg);  }
 }
 
-@include keyframes(clock-hands-sticky) {
+@keyframes clock-hands-sticky {
     0% {
         transform: translate(-50%, -50%) rotate(0deg);
     }
diff --git a/src/styles-new/_constants-espresso.scss b/src/styles-new/_constants-espresso.scss
index 794468908d..b0c3df6076 100644
--- a/src/styles-new/_constants-espresso.scss
+++ b/src/styles-new/_constants-espresso.scss
@@ -60,6 +60,8 @@ $fontBaseSize: 12px;
 $smallCr: 2px;
 $controlCr: 3px;
 $basicCr: 4px;
+$shdwBtns: rgba(black, 0.2) 0 1px 2px;
+$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
 
 // Base colors
 $colorBodyBg: #393939;
@@ -180,6 +182,7 @@ $colorDropHintBgHov: $colorDropHint;
 $colorDropHintFg: pullForward($colorDropHint, 40%);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
+$btnStdH: 24px;
 
 // Menus
 $colorMenuBg: pullForward($colorBodyBg, 15%);
@@ -198,7 +201,7 @@ $paletteItemBorderOuterColorSelected: black;
 $paletteItemBorderInnerColorSelected: white;
 $paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
 
-// Form colors
+// Forms
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
 $colorFormValid: $colorOk;
@@ -207,7 +210,8 @@ $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#000, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.05);
+$colorFormSectionHeaderBg: rgba(#000, 0.1);
+$colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
 $colorInputBg: rgba(black, 0.2);
 $colorInputFg: $colorBodyFg;
 $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
@@ -217,6 +221,10 @@ $colorFieldHint: pullForward($colorBodyFg, 40%);
 $shdwInput: inset rgba(black, 0.4) 0 0 1px;
 $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
 $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
+$formInputH: 22px;
+$formRowCtrlsH: 14px;
 
 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 5%);
@@ -227,8 +235,11 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
+$colorOvrBlocker: rgba(black, 0.7);
 $overlayColorBg: $colorMenuBg;
 $overlayColorFg: $colorMenuFg;
+$colorOvrBtnBg: pullForward($overlayColorBg, 20%);
+$colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
 $overlayBrightnessAdjust: brightness(1.3);
 
@@ -261,8 +272,11 @@ $colorInfo: #2294a2;
 $colorOk: #33cc33;
 
 // Bubble colors
-$colorInfoBubbleBg: $colorMenuBg;
+$colorInfoBubbleBg: #dddddd;
 $colorInfoBubbleFg: #666;
+$colorInfoBubbleFg: #666;
+$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
 // Items
 $colorItemBg: buttonBg($colorBtnBg);
@@ -295,7 +309,7 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
+$colorItemTreeHoverBg: rgba(white, 0.07);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
@@ -324,6 +338,7 @@ $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
 
 // Splitter
 $splitterHandleD: 2px;
+$splitterD: $splitterHandleD;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
 $colorSplitterBg: pullForward($colorBodyBg, 10%);
diff --git a/src/styles-new/_constants-maelstrom.scss b/src/styles-new/_constants-maelstrom.scss
index 3865572493..6635fd1f04 100644
--- a/src/styles-new/_constants-maelstrom.scss
+++ b/src/styles-new/_constants-maelstrom.scss
@@ -64,6 +64,8 @@ $fontBaseSize: 12px;
 $smallCr: 2px;
 $controlCr: 3px;
 $basicCr: 4px;
+$shdwBtns: rgba(black, 0.2) 0 1px 2px;
+$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
 
 // Base colors
 $colorBodyBg: #393939;
@@ -184,6 +186,7 @@ $colorDropHintBgHov: $colorDropHint;
 $colorDropHintFg: pullForward($colorDropHint, 40%);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
+$btnStdH: 24px;
 
 // Menus
 $colorMenuBg: pullForward($colorBodyBg, 15%);
@@ -202,7 +205,7 @@ $paletteItemBorderOuterColorSelected: black;
 $paletteItemBorderInnerColorSelected: white;
 $paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
 
-// Form colors
+// Forms
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
 $colorFormValid: $colorOk;
@@ -211,7 +214,8 @@ $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#000, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.05);
+$colorFormSectionHeaderBg: rgba(#000, 0.1);
+$colorFormSectionHeaderFg: rgba($colorBodyFg, 0.8);
 $colorInputBg: rgba(black, 0.2);
 $colorInputFg: $colorBodyFg;
 $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
@@ -221,6 +225,10 @@ $colorFieldHint: pullForward($colorBodyFg, 40%);
 $shdwInput: inset rgba(black, 0.4) 0 0 1px;
 $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
 $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
+$formInputH: 22px;
+$formRowCtrlsH: 14px;
 
 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 5%);
@@ -231,8 +239,11 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
+$colorOvrBlocker: rgba(black, 0.7);
 $overlayColorBg: $colorMenuBg;
 $overlayColorFg: $colorMenuFg;
+$colorOvrBtnBg: pullForward($overlayColorBg, 20%);
+$colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
 $overlayBrightnessAdjust: brightness(1.3);
 
@@ -265,8 +276,11 @@ $colorInfo: #2294a2;
 $colorOk: #33cc33;
 
 // Bubble colors
-$colorInfoBubbleBg: $colorMenuBg;
+$colorInfoBubbleBg: #dddddd;
 $colorInfoBubbleFg: #666;
+$colorInfoBubbleFg: #666;
+$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
 // Items
 $colorItemBg: buttonBg($colorBtnBg);
@@ -299,7 +313,7 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
+$colorItemTreeHoverBg: rgba(white, 0.07);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
@@ -328,6 +342,7 @@ $scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
 
 // Splitter
 $splitterHandleD: 2px;
+$splitterD: $splitterHandleD;
 $splitterHandleHitMargin: 4px;
 $colorSplitterBaseBg: $colorBodyBg;
 $colorSplitterBg: pullForward($colorBodyBg, 10%);
diff --git a/src/styles-new/_constants-snow.scss b/src/styles-new/_constants-snow.scss
index 83c6b60442..a52ad38561 100644
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@@ -55,11 +55,13 @@ $bodyFont: $heroFont;
     @return lighten($val, $amt);
 }
 
-// Constants
+// General
 $fontBaseSize: 12px;
 $smallCr: 2px;
 $controlCr: 3px;
 $basicCr: 4px;
+$shdwBtns: none;
+$shdwBtnsOverlay: none;
 
 // Base colors
 $colorBodyBg: #fcfcfc;
@@ -180,6 +182,7 @@ $colorDropHintBgHov: pushBack($colorDropHint, 40%);
 $colorDropHintFg: pushBack($colorDropHint, 0);
 $colorDisclosureCtrl: rgba($colorBodyFg, 0.5);
 $colorDisclosureCtrlHov: rgba($colorBodyFg, 0.7);
+$btnStdH: 24px;
 
 // Menus
 $colorMenuBg: pushBack($colorBodyBg, 10%);
@@ -198,7 +201,7 @@ $paletteItemBorderOuterColorSelected: black;
 $paletteItemBorderInnerColorSelected: white;
 $paletteItemBorderInnerColor: rgba($paletteItemBorderOuterColorSelected, 0.3);
 
-// Form colors
+// Forms
 $colorCheck: $colorKey;
 $colorFormRequired: $colorKey;
 $colorFormValid: $colorOk;
@@ -207,7 +210,8 @@ $colorFormInvalid: #ff2200;
 $colorFormFieldErrorBg: $colorFormError;
 $colorFormFieldErrorFg: rgba(#fff, 0.6);
 $colorFormLines: rgba(#000, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.05);
+$colorFormSectionHeaderBg: rgba(#000, 0.05);
+$colorFormSectionHeaderFg: rgba($colorBodyFg, 0.5);
 $colorInputBg: $colorGenBg;
 $colorInputFg: $colorBodyFg;
 $colorInputPlaceholder: pushBack($colorBodyFg, 20%);
@@ -217,6 +221,10 @@ $colorFieldHint: pullForward($colorBodyFg, 40%);
 $shdwInput: inset rgba(black, 0.7) 0 0 1px;
 $shdwInputHov: inset rgba(black, 0.7) 0 0 2px;
 $shdwInputFoc: inset rgba(black, 0.8) 0 0.25px 3px;
+$formTBPad: $interiorMargin;
+$formLRPad: $interiorMargin;
+$formInputH: 22px;
+$formRowCtrlsH: 14px;
 
 // Inspector
 $colorInspectorBg: pullForward($colorBodyBg, 5%);
@@ -227,8 +235,11 @@ $colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
 $colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
 
 // Overlay
+$colorOvrBlocker: rgba(black, 0.7);
 $overlayColorBg: $colorMenuBg;
 $overlayColorFg: $colorMenuFg;
+$colorOvrBtnBg: pullForward($overlayColorBg, 40%);
+$colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
 $overlayBrightnessAdjust: brightness(1.3);
 
@@ -263,6 +274,8 @@ $colorOk: #33cc33;
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
 $colorInfoBubbleFg: #666;
+$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
+$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
 
 // Items
 $colorItemBg: pushBack($colorBtnBg, 20%);
@@ -295,7 +308,7 @@ $legendHoverValueBg: rgba($colorBodyFg, 0.2);
 
 // Tree
 $colorTreeBg: transparent;
-$colorItemTreeHoverBg: pullForward($colorBodyBg, 10%);
+$colorItemTreeHoverBg: rgba(black, 0.07);
 $colorItemTreeHoverFg: pullForward($colorBodyFg, 10%);
 $colorItemTreeIcon: $colorKey; // Used
 $colorItemTreeIconHover: $colorItemTreeIcon; // Used
diff --git a/src/styles-new/_constants.scss b/src/styles-new/_constants.scss
index 0d2522520c..d6241e2841 100644
--- a/src/styles-new/_constants.scss
+++ b/src/styles-new/_constants.scss
@@ -59,6 +59,27 @@ $plotLegendH: 20px;
 $plotSwatchD: 8px;
 $plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW); // 1: Top, 2: right, 3: bottom, 4: left
 $plotMinH: 95px;
+$controlBarH: 25px;
+/*************** Imagery */
+$imageMainControlBarH: 25px;
+$imageThumbsD: 100px;
+$imageThumbsWrapperH: 155px;
+$imageThumbPad: 1px;
+/*************** Bubbles */
+$bubbleArwSize: 10px;
+$bubblePad: $interiorMargin;
+$bubbleMinW: 100px;
+$bubbleMaxW: 300px;
+/*************** Menus */
+$paletteMenuMinW: 128px; // Min-width of palettes when in a dropdown menu
+/*************** Forms */
+$formLabelMinW: 120px;
+$formLabelW: 30%;
+/*************** Wait Spinner */
+$waitSpinnerD: 32px;
+$waitSpinnerTreeD: 20px;
+$waitSpinnerBorderW: 5px;
+$waitSpinnerTreeBorderW: 4px;
 
 /************************** MOBILE */
 $mobileMenuIconD: 24px; // Used
diff --git a/src/styles-new/_controls.scss b/src/styles-new/_controls.scss
index c0ec5447ad..769016c9fe 100644
--- a/src/styles-new/_controls.scss
+++ b/src/styles-new/_controls.scss
@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-/********* Buttons */
+/******************************************************** BUTTONS */
 // Optionally can include icon in :before via markup
 button {
     @include htmlInputReset();
@@ -39,6 +39,15 @@ button {
             opacity: 0.5;
         }
     }
+
+    &--swatched {
+        // Used with c-button--menu: a visual button with a larger swatch element adjacent to an icon
+        .c-swatch {
+            $d: 12px;
+            margin-left: $interiorMarginSm;
+            height: $d; width: $d;
+        }
+    }
 }
 
 .c-compact-button {
@@ -236,7 +245,7 @@ select {
     background-position: right .4em top 80%, 0 0;
     border: none;
     border-radius: $controlCr;
-    padding: 1px 20px 1px $interiorMargin;
+    padding: 4px 20px 4px $interiorMargin;
 }
 
 // CHECKBOX LISTS
@@ -372,33 +381,37 @@ select {
 .c-palette {
     display: flex;
     flex-flow: column nowrap;
+    line-height: normal;
 
     &__items {
-        flex: 1 1 auto;
         display: grid;
-        grid-template-columns: repeat(auto-fill, 12px);
         grid-gap: 1px;
+        grid-template-columns: repeat(auto-fill, 12px);
+        flex: 1 1 auto;
+
+        .c-menu & {
+            min-width: $paletteMenuMinW;
+        }
     }
 
     &__item {
         $d: 12px;
-
         border: 1px solid transparent;
         cursor: pointer;
-        min-width: $d; min-height: $d;
+        display: flex;
+        align-items: center;
+        align-content: center;
+        width: $d;
+        height: $d;
+        text-align: center;
         transition: $transOut;
 
         &:hover {
             transition: $transIn;
-            $o: 0.7;
-            border-color: rgba($paletteItemBorderOuterColorSelected, $o);
-            box-shadow: inset rgba($paletteItemBorderInnerColorSelected, $o) 0 0 0 1px;
         }
 
         &.is-selected {
-            border-color: $paletteItemBorderOuterColorSelected !important;
-            border-width: 2px;
-            box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
+            border-width: 1px;
         }
     }
 
@@ -414,6 +427,44 @@ select {
             margin-right: $interiorMarginSm;
         }
     }
+
+    &--color {
+        .c-palette__item {
+            &:hover {
+                border-color: rgba($paletteItemBorderOuterColorSelected, 0.7);
+                box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 0.7) 0 0 0 1px;
+            }
+
+            &.is-selected {
+                border-color: $paletteItemBorderOuterColorSelected !important;
+                box-shadow: inset rgba($paletteItemBorderInnerColorSelected, 1) 0 0 0 1px;
+            }
+        }
+    }
+
+    &--icon {
+        .c-palette__items {
+            grid-gap: 3px;
+        }
+
+        .c-palette__item {
+            border-radius: $smallCr;
+            font-size: 0.6rem;
+
+            &:before {
+                display: block;
+                width: 100%;
+            }
+
+            &:hover {
+                box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.3) 0 0 0 1px;
+            }
+
+            &.is-selected {
+                box-shadow: rgba($paletteItemBorderInnerColorSelected, 0.6) 0 0 0 1px;
+            }
+        }
+    }
 }
 
 /******************************************************** SWATCHES */
@@ -443,12 +494,6 @@ select {
 }
 
 .c-toolbar {
-    $p: $interiorMargin;
-    background: $editUIBaseColor;
-    border-radius: $basicCr;
-    height: $p + 24px; // Need to standardize the height
-    padding: $p;
-
     > * + * {
         margin-left: 2px;
     }
@@ -502,10 +547,6 @@ select {
             margin-left: $interiorMargin;
         }
     }
-
-    .c-palette {
-        min-width: 136px;
-    }
 }
 
 /********* Button Sets */
@@ -531,7 +572,7 @@ select {
         // Buttons are smashed together with minimal margin
         // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
         // c-click-icons get grouped more closely together
-        &[class^="c-button"] {
+        [class^="c-button"] {
             // Only apply the following to buttons that have background, eg. c-button
             border-radius: 0;
 
@@ -656,9 +697,7 @@ input[type="range"] {
 }
 
 /***************************************************** LEGACY */
-
 .l-btn-set {
-    // Fixes
     display: flex;
     align-items: center;
 }
diff --git a/src/styles/forms/_elems.scss b/src/styles-new/_forms.scss
similarity index 52%
rename from src/styles/forms/_elems.scss
rename to src/styles-new/_forms.scss
index c9b3a0daf7..54b3ed1e11 100644
--- a/src/styles/forms/_elems.scss
+++ b/src/styles-new/_forms.scss
@@ -19,9 +19,34 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+.c-form {
+    display: flex;
+    flex-direction: column;
+
+    &__section {
+        display: inherit;
+        flex-direction: column;
+    }
+
+    &__row {
+        display: flex;
+    }
+
+    &__header {
+        border-radius: $basicCr;
+        background: $colorFormSectionHeaderBg;
+        color: $colorFormSectionHeaderFg;
+        font-size: inherit;
+        font-weight: normal;
+        margin: $interiorMargin 0;
+        padding: $formTBPad $formLRPad;
+        text-transform: uppercase;
+    }
+}
+
+/***************************************************** LEGACY */
 .section-header {
     border-radius: $basicCr;
-    background: $colorFormSectionHeader;
     color: lighten($colorBodyFg, 20%);
     font-size: inherit;
     margin: $interiorMargin 0;
@@ -36,7 +61,7 @@
 }
 
 .form {
-	color: $colorFormText;
+    color: $colorFormText;
     height: 100%;
     width: 100%;
 
@@ -54,69 +79,69 @@
         }
     }
 
-	.form-row {
-		$m: $interiorMargin;
-		box-sizing: border-box;
-		border-top: 1px solid $colorFormLines;
-		padding: $formTBPad 0;
-		position: relative;
+    .form-row {
+        $m: $interiorMargin;
+        box-sizing: border-box;
+        border-top: 1px solid $colorFormLines;
+        padding: $formTBPad 0;
+        position: relative;
 
-		&.first {
-			border-top: none;
-		}
+        &.first {
+            border-top: none;
+        }
 
-		>.label,
-		>.controls {
-			box-sizing: border-box;
-			font-size: 0.8rem;
-		}
+        >.label,
+        >.controls {
+            box-sizing: border-box;
+            font-size: 0.8rem;
+        }
 
-		>.label {
-			// Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
-			min-width: 120px;
+        >.label {
+            // Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form
+            min-width: 120px;
             order: 1;
             position: relative;
-			white-space: nowrap;
-			width: $formLabelW;
-		}
+            white-space: nowrap;
+            width: $formLabelW;
+        }
 
-		.value {
-			color: $colorInputFg;
-		}
+        .value {
+            color: $colorInputFg;
+        }
 
-		.controls {
+        .controls {
             order: 2;
             position: relative;
             flex: 1 1 auto;
 
-			.l-composite-control {
-				&.l-checkbox {
-					display: inline-block;
-					line-height: $formRowCtrlsH;
-					margin-right: 5px;
-				}
-			}
-			.select {
-				margin-right: $interiorMargin;
-			}
-		}
+            .l-composite-control {
+                &.l-checkbox {
+                    display: inline-block;
+                    line-height: $formRowCtrlsH;
+                    margin-right: 5px;
+                }
+            }
+            .select {
+                margin-right: $interiorMargin;
+            }
+        }
 
-		.hint, .field-hints {  color: $colorFieldHint;  }
+        .hint, .field-hints {  color: $colorFieldHint;  }
 
-		.selector-list {
-			// Used in create overlay to display tree view
-			@include nice-input();
+        .selector-list {
+            // Used in create overlay to display tree view
+            @include nice-input();
             padding: $interiorMargin;
-			position: relative;
+            position: relative;
             min-height: 150px;
-			height: 100%;
-			>.wrapper {
-				$p: $interiorMargin;
+            height: 100%;
+            >.wrapper {
+                $p: $interiorMargin;
                 box-sizing: border-box;
-				overflow: auto;
-			}
-		}
-	}
+                overflow: auto;
+            }
+        }
+    }
 }
 
 .l-controls-first .form .form-row,
@@ -148,36 +173,59 @@
     }
 }
 
-.hint,
-.s-hint {
-	font-size: 0.9em;
-    .req {
-        color: $colorFormRequired;
-        font-size: 0.7rem;
+.l-composite-control {
+    vertical-align: middle;
+    &:not(.l-inline) {
+        margin-bottom: $interiorMargin;
+    }
+    &.l-inline {
+        display: inline-block;
+    }
+    &.l-checkbox {
+        .composite-control-label {
+            line-height: 18px;
+        }
     }
 }
 
-.l-result {
-	// Used in /vista/channel-query.html and evr-query.html as of 2/24/15
-	display: inline-block;
-	min-width: 32px; min-height: 32px;
-	position: relative;
-	vertical-align: top;
-
-	div.s-hint {
-		border-radius: $basicCr;
-		background: rgba($colorFormInvalid, 0.8);
-		display: block;
-		color: lighten($colorFormInvalid, 30%);
-		padding: $interiorMargin;
-	}
+.autocomplete {
+    input {
+        width: 226px;
+        padding: 5px 0px 5px 7px;
+    }
+    .icon-arrow-down {
+        position: absolute;
+        top: 8px;
+        left: 210px;
+        font-size: 10px;
+        cursor: pointer;
+    }
+    .autocompleteOptions {
+        border: 1px solid $colorFormLines;
+        border-radius: 5px;
+        width: 224px;
+        max-height: 170px;
+        overflow-y: auto;
+        overflow-x: hidden;
+        li {
+            border: 1px solid $colorFormLines;
+            padding: 8px 0px 8px 5px;
+            .optionText {
+                cursor: pointer;
+            }
+        }
+        .optionPreSelected {
+            background-color: $colorInspectorSectionHeaderBg;
+            color: $colorInspectorSectionHeaderFg;
+        }
+    }
 }
 
-/**************************************************************************** COMPACT FORM */
+/********* COMPACT FORM */
 // ul > li > label, control
 // Make a new UL for each form section
 // Allow control-first, controls-below
-// TO-DO: migrate work in branch ch-plot-styling that users .inspector-config to use classes below instead
+// 3/8/19: Used by Summary Widgets edit UI
 
 .l-compact-form .tree ul li,
 .l-compact-form ul li {
@@ -186,39 +234,41 @@
 
 
 .l-compact-form {
+    $h: $btnStdH;
     $labelW: 40%;
     $minW: $labelW;
     ul {
-        margin-bottom: $interiorMarginLg;
         li {
             display: flex;
-            flex-wrap: wrap;
-            align-items: center;
+            align-items: stretch;
+            padding: $interiorMargin 0;
+
             label,
             .control {
                 display: flex;
             }
             label {
-                line-height: inherit;
+                line-height: $h;
                 width: $labelW;
             }
             .controls {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: flex-start;
                 flex-grow: 1;
                 margin-left: $interiorMargin;
+                min-height: $h;
+                line-height: $h;
                 input[type="text"],
                 input[type="search"],
                 input[type="number"],
-                .select {
-                    height: $btnStdH;
-                    line-height: $btnStdH;
-                    vertical-align: middle;
+                button,
+                select {
+                    min-height: $h;
                 }
 
-                .e-control {
-                    // Individual form controls
-                    &:not(:first-child) {
-                        margin-left: $interiorMarginSm;
-                    }
+                > * + * {
+                    margin-left: $interiorMarginSm;
                 }
             }
 
@@ -261,6 +311,7 @@
     }
 }
 
+/******** VALIDATION */
 .form-error {
     // Block element that visually flags an error and contains a message
     background-color: $colorFormFieldErrorBg;
@@ -275,3 +326,42 @@
         margin-right: $interiorMarginSm;
     }
 }
+
+
+@mixin labelValidate($sym, $c) {
+    > .label {
+        @include glyphAfter($sym);
+        &:after {
+            color: $c;
+            margin-left: $interiorMargin;
+        }
+    }
+}
+
+
+mct-form.validates {
+    .form-row.validates {
+        > .label {
+            padding-right: 1em; // Keep room for validation element
+            &:after {
+                font-size: .8em;
+            }
+        }
+        &.invalid,
+        &.invalid.req { @include labelValidate($glyph-icon-x, $colorFormInvalid); }
+
+        &.valid,
+        &.valid.req { @include labelValidate($glyph-icon-check, $colorFormValid); }
+
+        &.req { @include labelValidate($glyph-icon-asterisk, $colorFormRequired); }
+    }
+}
+
+body.desktop .form-row.validates > .label {
+    &:after {
+        position: absolute;
+        right: $interiorMargin;
+        height: 100%;
+        line-height: 200%;
+    }
+}
diff --git a/src/styles-new/_global.scss b/src/styles-new/_global.scss
index e2141ff1a3..ff28bc711b 100644
--- a/src/styles-new/_global.scss
+++ b/src/styles-new/_global.scss
@@ -301,6 +301,7 @@ a.disabled {
             $c $e,
             transparent $e + 5%
     );
+    box-shadow:inset rgba(black, 0.3) 0 0 0 1px;
     background-repeat: no-repeat;
     background-size: contain;
 }
diff --git a/src/styles-new/_legacy.scss b/src/styles-new/_legacy.scss
index f113f3b66e..0fde6e8f90 100644
--- a/src/styles-new/_legacy.scss
+++ b/src/styles-new/_legacy.scss
@@ -25,7 +25,7 @@ mct-plot {
     display: contents;
 }
 
-/********************************************* STACKED PLOT LAYOUT */
+/*********************** STACKED PLOT LAYOUT */
 .t-plot-stacked {
     .l-view-section {
         //  Make this a flex container
@@ -61,7 +61,7 @@ mct-plot {
     height: 100%;
     min-height: $plotMinH;
 
-    /********************************************* AXIS AND DISPLAY AREA */
+    /*********************** AXIS AND DISPLAY AREA */
     .plot-wrapper-axis-and-display-area {
         margin-top: $interiorMargin; // Keep the top tick label from getting clipped
         position: relative;
@@ -332,7 +332,7 @@ mct-plot {
     }
 }
 
-/*************************************************************************** _LEGEND.SCSS */
+/****************** _LEGEND.SCSS */
 .gl-plot-legend {
     display: flex;
     align-items: flex-start;
@@ -503,7 +503,267 @@ mct-plot {
         }
     }
 }
-/********************************************************* CLOCKS AND TIMERS */
+
+/******************************************************************* VIEWS */
+// From _views.scss
+// Legacy overlay and stacked plots depend on this for now
+// Styles for sub-dividing views generically
+.l-control-bar {
+    // Element that can be placed above l-view-section, holds controls, buttons, etc.
+    height: $controlBarH;
+}
+
+.l-view-section {
+    @include abs();
+    overflow: auto;
+}
+
+.has-control-bar {
+    .l-view-section {
+        top: $controlBarH + $interiorMargin;
+    }
+}
+
+.child-frame {
+    .has-control-bar {
+        .l-control-bar,
+        .c-control-bar {
+            // Hides buttons per plot element in a stacked plot
+            display: none;
+        }
+        .l-view-section {
+            top: 0;
+        }
+    }
+}
+
+/******************************************************************* IMAGERY */
+.l-image-main-wrapper,
+.l-image-thumbs-wrapper,
+.image-main {
+    @include abs(0);
+    overflow: hidden;
+}
+
+/*************************************** MAIN LAYOUT */
+.l-image-main-wrapper {
+    // Imagery thumbs
+    bottom: $interiorMargin*2 +  $imageThumbsWrapperH;
+
+    min-width: 150px;
+    .l-image-main {
+        margin-bottom: $interiorMargin;
+    }
+    .l-image-main-controlbar {
+        &.l-flex-row { align-items: center; }
+    }
+}
+
+.l-image-thumbs-wrapper {
+    top: auto;
+    min-height: $imageThumbsWrapperH;
+    max-height: 60%;
+    box-sizing: border-box;
+}
+
+.l-date,
+.l-time,
+.l-timezone {
+    display: inline-block;
+}
+
+/*************************************** MAIN IMAGE */
+
+.image-main,
+.l-image-thumb-item .l-thumb {
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.l-image-main-controlbar {
+    font-size: 0.8em;
+    line-height: inherit;
+    .l-datetime-w, .l-controls-w {
+        direction: rtl;
+        overflow: hidden;
+    }
+    .l-datetime-w {
+        @include ellipsize();
+        margin-right: $interiorMarginSm;
+        text-align: left;
+    }
+    .l-controls-w {
+        z-index: 2;
+    }
+    .l-date,
+    .l-time {
+        color: pullForward($colorBodyFg, 20%); // TODO: do this as a theme constant
+    }
+    .l-mag {
+        direction: ltr;
+        display: inline-block;
+        &:before {
+            content: "\000049";
+        }
+    }
+    .s-mag {
+        color: pushBack($colorBodyFg, 20%); // TODO: do this as a theme constant
+    }
+    .l-btn.show-thumbs {
+        display: none;
+    }
+}
+
+.s-image-main {
+    background-color: $colorPlotBg;
+    border: 1px solid transparent;
+    &.paused {
+        //@include sUnsynced();
+    }
+}
+
+/*************************************** THUMBS */
+
+.l-image-thumbs-wrapper {
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding-bottom: $interiorMargin;
+    white-space: nowrap;
+}
+
+.l-image-thumb-item {
+    transition: background-color 0.25s;
+    box-sizing: border-box;
+    cursor: pointer;
+    direction: ltr;
+    display: inline-block;
+    float: left;
+    font-size: 0.8em;
+    padding: 1px;
+    margin-left: $interiorMarginSm;
+    position: relative;
+    text-align: left;
+    width: $imageThumbsD + $imageThumbPad*2;
+    white-space: normal;
+    .l-thumb,
+    .l-date,
+    .l-time {
+        display: inline-block;
+    }
+    .l-date,
+    .l-time {
+        padding: 2px 3px;
+    }
+
+    &:hover {
+        background: $colorThumbHoverBg;
+        .l-date,
+        .l-time {
+            color: #fff;
+        }
+    }
+    &.selected {
+        background: $colorKeySelectedBg;
+        .l-date,
+        .l-time {
+            color: #fff;
+        }
+    }
+    .l-thumb {
+        background-color: rgba(#fff, 0.1);
+        height: $imageThumbsD;
+        width: $imageThumbsD;
+        margin-top: 0;
+    }
+}
+
+/*************************************** LOCAL CONTROLS */
+.t-imagery {
+    display: contents;
+    .h-local-controls.h-local-controls-overlay-content {
+        max-width: 200px;
+        min-width: 100px;
+        width: 35%;
+        align-items: center;
+        padding: $interiorMargin $interiorMarginLg;
+
+        input[type="range"] {
+            display: block;
+            width: 100%;
+            &:not(:first-child) {
+                margin-top: $interiorMarginLg;
+            }
+
+            &:before {
+                margin-right: $interiorMarginSm;
+            }
+        }
+
+        .t-reset-btn-holder {
+            $bc: $scrollbarTrackColorBg;
+            &:before,
+            &:after {
+                border-right: 1px solid $bc;
+                content:'';
+                display: block;
+                width: 5px;
+                height: 4px;
+            }
+
+            &:before {
+                border-top: 1px solid $bc;
+                margin-bottom: 2px;
+            }
+
+            &:after {
+                border-bottom: 1px solid $bc;
+                margin-top: 2px;
+            }
+        }
+    }
+}
+
+
+/*************************************** WHEN IN FRAME */
+.c-frame .t-imagery {
+    .l-image-main-wrapper {
+        bottom: 0 !important;
+        height: 100% !important;
+        .l-image-main-controlbar {
+            font-size: 0.7em;
+        }
+    }
+    .l-image-thumbs-wrapper,
+    mct-splitter {
+        display: none;
+    }
+}
+
+/*************************************** MOBILE */
+body.mobile.phone {
+    .t-imagery {
+        .l-image-main-wrapper,
+        .l-image-thumbs-wrapper {
+            min-height: 10px !important;
+        }
+    }
+}
+
+.c-button.pause-play {
+    // Pause icon set by default in markup
+
+    &.is-paused {
+        background: $colorPausedBg !important;
+        color: $colorPausedFg;
+
+        &:before {
+            content: $glyph-icon-play;
+        }
+    }
+}
+
+/*********************************************************************** CLOCKS AND TIMERS */
 .c-clock,
 .c-timer {
     display: flex;
@@ -573,7 +833,1162 @@ mct-plot {
     }
 }
 
+/*********************************************************************** SUMMARY WIDGETS */
+/************************* WIDGET OBJECT */
+@mixin cSummaryWidget() {
+    box-shadow: $shdwBtns;
+    border-radius: $basicCr;
+    border-style: solid;
+    border-width: 1px;
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &[href] {
+        cursor: pointer;
+    }
+
+    &__icon {
+        // Hide the icon holder element. Selector below shows this once 'icon-*' is added.
+        display: none;
+        font-size: 0.9em;
+    }
+
+    &__label {
+        @include ellipsize();
+    }
+
+    [class*='icon-'] {
+        // When 'icon-*' is added, show this element and add margin
+        display: block;
+        margin-right: $interiorMarginSm;
+    }
+
+}
+
+.c-summary-widget,
+.c-sw {
+    @include cSummaryWidget();
+    padding: $interiorMarginLg $interiorMarginLg * 2;
+
+    &--thumb {
+        max-width: 30%;
+        padding: $interiorMarginSm $interiorMargin;
+    }
+}
+
+.widget-edit-holder {
+    // Hide edit area when in browse mode
+    display: none;
+}
+
+.widget-rule-header {
+    display: flex;
+    align-items: center;
+
+    > * + * {
+        margin-left: $interiorMargin;
+    }
+}
+
+[class*='action-buttons-wrapper'] {
+    white-space: nowrap;
+    line-height: $btnStdH;
+}
+
+.widget-rules-wrapper,
+.widget-rule-content,
+.w-widget-test-data-content {
+    transition: $transIn;
+    min-height: 0;
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+.widget-rules-wrapper {
+    flex: 1 1 auto !important;
+}
+
+.widget-rule-content.expanded {
+    overflow: visible !important;
+    min-height: 50px;
+    height: auto;
+    margin-top: $interiorMargin;
+    opacity: 1;
+    pointer-events: inherit;
+}
+
+.w-widget-test-data-content {
+    .l-enable {
+        padding: $interiorMargin 0;
+    }
+
+    .w-widget-test-data-items {
+        max-height: 20vh;
+        overflow-y: scroll !important;
+        padding-right: $interiorMargin;
+    }
+}
+
+.l-widget-thumb-wrapper,
+.l-compact-form label {
+    $ruleLabelW: 40%;
+    $ruleLabelMaxW: 150px;
+    display: flex;
+    max-width: $ruleLabelMaxW;
+    width: $ruleLabelW;
+}
+
+.t-message-widget-no-data {
+    display: none;
+}
+
+/**************\ EDITING A WIDGET */
+.w-summary-widget {
+    // Classes for editor layout while editing a widget
+    // This selector is ugly and brittle, but needed to prevent interface from showing when widget is in a layout
+    // being edited.
+    @include abs();
+    display: flex;
+    flex-direction: column;
+
+    > .l-summary-widget {
+        // Main view of the summary widget
+        // Give some airspace and center the widget in the area
+        margin: 30px auto;
+    }
+
+    .widget-edit-holder {
+        display: flex; // Overrides `display: none` during Browse mode
+        .flex-accordion-holder {
+            // Needed because otherwise accordion elements "creep" when contents expand and contract
+            display: block !important;
+        }
+        &.expanded-widget-test-data {
+            .w-widget-test-data-content {
+                min-height: 50px;
+                height: auto;
+                opacity: 1;
+                pointer-events: inherit;
+            }
+            &:not(.expanded-widget-rules) {
+                // Test data is expanded and rules are collapsed
+                // Make text data take up all the vertical space
+                .flex-accordion-holder { display: flex; }
+                .widget-test-data {
+                    flex-grow: 999999;
+                }
+                .w-widget-test-data-items {
+                    max-height: inherit;
+                }
+            }
+        }
+        &.expanded-widget-rules {
+            .widget-rules-wrapper {
+                min-height: 50px;
+                height: auto;
+                opacity: 1;
+                pointer-events: inherit;
+            }
+        }
+    }
+
+    &.s-status-no-data {
+        .widget-edit-holder {
+            opacity: 0.3;
+            pointer-events: none;
+        }
+        .t-message-widget-no-data {
+            display: flex;
+        }
+    }
+
+    .l-compact-form {
+        // Overrides on .l-compact-form
+        ul {
+            &:last-child { margin: 0; }
+
+            li {
+                &:not(.widget-rule-header) {
+                    &:not(.connects-to-previous) {
+                        border-top: 1px solid $colorFormLines;
+                    }
+                }
+                &.connects-to-previous {
+                    padding: $interiorMargin 0;
+                }
+
+                > label {
+                    display: block; // Needed to align text to right
+                    text-align: right;
+                    width: 90px;
+                    flex: 0 0 auto;
+                }
+
+                .controls {
+                    display: flex;
+                    flex-wrap: wrap;
+                    align-items: center;
+                    align-content: stretch;
+                    > * + * { margin-left: $interiorMarginSm; }
+                }
+            }
+        }
+
+        &.s-widget-test-data-item {
+            // Single line of ul li label span, etc.
+            ul {
+                li {
+                    border: none !important;
+                    > label {
+                        display: inline-block;
+                        width: auto;
+                        text-align: left;
+                    }
+                }
+            }
+        }
+    }
+
+    .t-condition .controls {
+        > * { margin-bottom: $interiorMargin; }
+    }
+}
+
+.widget-edit-holder {
+    font-size: 0.8rem;
+}
+
+.widget-rules-wrapper {
+    // Wrapper area that holds n rules
+    box-sizing: border-box;
+    overflow-y: scroll;
+    padding-right: $interiorMargin;
+}
+
+.l-widget-rule,
+.l-widget-test-data-item {
+    box-sizing: border-box;
+    margin-bottom: $interiorMarginSm;
+    padding: $interiorMargin $interiorMarginLg;
+}
+
+.rule-title {
+    flex: 0 1 auto;
+    color: pullForward($colorBodyFg, 50%);
+}
+
+.rule-description {
+    flex: 1 1 auto;
+    @include ellipsize();
+    color: pushBack($colorBodyFg, 20%);
+}
+
+.s-widget-rule,
+.s-widget-test-data-item {
+    background-color: rgba($colorBodyFg, 0.1);
+    border-radius: $basicCr;
+}
+
+.c-sw-edit {
+    padding: $interiorMargin;
+
+    &__ui {
+        display: flex;
+        flex-direction: column;
+
+        &__header {
+            border-top: 1px solid $colorInteriorBorder;
+            display: flex;
+            align-items: center;
+            margin: $interiorMargin 0;
+            padding: $interiorMargin 0;
+            text-transform: uppercase;
+            > * + * { margin-left: $interiorMarginSm; }
+        }
+    }
+}
+
+.c-sw-rule {
+    &__grippy-wrapper {
+        $d: 8px;
+        width: $d; height: $d;
+        transform: translateY(-1px);
+    }
+
+    &__grippy {
+        @include grippy($c: $colorItemTreeVC, $dir: 'y');
+        @include abs();
+    }
+}
+
+/******************************************************************* CHANNEL SELECTOR */
+.channel-selector {
+    .line {
+        margin-bottom: $interiorMargin;
+        min-height: $formInputH;
+    }
+    .treeview {
+        $myBg: darken($colorBodyBg, 2%);
+        @include reactive-input();
+        min-height: 300px;
+        max-height: 400px;
+        overflow: auto;
+        padding: $interiorMargin;
+    }
+
+    .btns-add-remove {
+        margin-top: 150px;
+        .s-button {
+            display: block;
+            margin-bottom: $interiorMargin;
+            text-align: center;
+        }
+    }
+}
+
+/******************************************************************* AUTOFLOW TABULAR */
+// NOT UNIT TESTED AS OF 3/12/19
+.autoflow {
+    $headerH: $formInputH;
+    $colMargin: $interiorMargin;
+    $colW: 225px;
+    $valW: 70px;
+    $valPad: 5px;
+    $rowH: 15px;
+    font-size: 0.75rem;
+
+    &:hover {
+        .l-autoflow-header .s-button.change-column-width {
+            transition: $transIn;
+            opacity: 1;
+        }
+    }
+
+    .l-autoflow-header {
+        bottom: auto;
+        height: $headerH;
+        line-height: $headerH;
+        min-width: $colW;
+        .t-last-update {
+            overflow: hidden;
+        }
+        .s-button.change-column-width {
+            transition: $transOut;
+            opacity: 0;
+        }
+        .l-filter {
+            display: block;
+            margin-right: $interiorMargin;
+            input.t-filter-input {
+                width: 150px;
+            }
+        }
+    }
+
+    .l-autoflow-items {
+        overflow-x: scroll;
+        overflow-y: hidden;
+        top: $headerH + $interiorMargin * 2;
+        white-space: nowrap;
+        .l-autoflow-col {
+            box-sizing: border-box;
+            border-left: 1px solid $colorInteriorBorder;
+            display: inline-block;
+            padding-left: $colMargin;
+            padding-right: $colMargin;
+            vertical-align: top;
+            width: $colW;
+            .l-autoflow-row {
+                box-sizing: border-box;
+                border-bottom: 1px solid rgba(#fff,0.05);
+                display: block;
+                height: $rowH;
+                line-height: $rowH;
+                margin-bottom: 1px; margin-top: 1px;
+                position: relative;
+                &:first-child {
+                    border-top: none;
+                }
+                &:hover {
+                    background: rgba(#fff, 0.1);
+                }
+                .l-autoflow-item.r {
+                    color: lighten($colorBodyFg, 10%);
+                }
+                &.first-in-group {
+                    border-top: 1px solid lighten($colorInteriorBorder, 20%);
+                }
+                .l-autoflow-item {
+                    display: block;
+                    &.l {
+                        float: none;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
+                        width: auto;
+                    }
+                    &.r {
+                        border-radius: $smallCr;
+                        float: right;
+                        margin-left: $interiorMargin;
+                        padding-left: $valPad;
+                        padding-right: $valPad;
+                        text-align: right;
+                    }
+                }
+            }
+
+            &:first-child {
+                border-left: none;
+                padding-left: 0;
+            }
+        }
+    }
+}
+
+.frame {
+    &.child-frame.panel {
+        .autoflow .l-autoflow-header .l-filter {
+            display: none;
+        }
+    }
+}
+
+/******************************************************************* INDICATORS */
+/* Indicators are generally only displayed in the ue-bottom-bar element of the main interface */
+
+.h-indicator,
+mct-indicators mct-include {
+    display: inline; // Fallback for display: contents
+    display: contents;
+}
+
+.ls-indicator {
+    $bg: rgba(white, 0.2) !important;
+    $hbg: $colorStatusBarBg;
+    $hshdw: rgba(white, 0.4) 0 0 3px;
+    $br: $controlCr;
+    $hoverYOffset: -35px;
+    background: transparent !important;
+    border-radius: $br;
+    display: inline-block;
+    position: relative;
+    padding: 1px $interiorMarginSm; // Use padding instead of margin to keep hover chatter to a minimum
+
+    &:before {
+        display: inline-block;
+    }
+
+    .label {
+        display: inline-block;
+        a,
+        button,
+        .s-button {
+            // Make <a> in label look like buttons
+            transition: $transIn;
+            background: transparent;
+            border: 1px solid rgba($colorStatusBarFg, 0.5);
+            border-radius: $br;
+            box-sizing: border-box;
+            color: inherit;
+            font-size: inherit;
+            height: auto;
+            line-height: normal;
+            padding: 0 2px;
+            &:hover {
+                background: $bg;
+                color: #fff;
+            }
+        }
+
+        [class*='icon-'] {
+            // If any elements within label include the class 'icon-*' then deal with their :before's
+            &:before {
+                font-size: 0.8em;
+                margin-right: $interiorMarginSm;
+            }
+        }
+
+        button { text-transform: uppercase !important; }
+    }
+
+    &.no-collapse {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        > *,
+        &:before {
+            flex: 1 1 auto;
+        }
+
+        &:before {
+            margin-right: $interiorMarginSm;
+        }
+    }
+
+    &:not(.no-collapse) {
+        z-index: 0;
+
+        &:before {
+            margin-right: 0 !important;
+        }
+
+        .label {
+            transition: all 250ms ease-in 100ms;
+            background: $hbg;
+            border-radius: $br;
+            font-size: .6rem;
+            left: 0;
+            bottom: 140%;
+            opacity: 0;
+            padding: $interiorMarginSm $interiorMargin;
+            position: absolute;
+            transform-origin: 10px 100%;
+            transform: scale(0.0);
+            white-space: nowrap;
+            &:before {
+                // Infobubble-style arrow element
+                content: '';
+                display: block;
+                position: absolute;
+                top: 100%;
+                @include triangle('down', $size: 4px, $ratio: 1, $color: $hbg);
+            }
+        }
+
+        &:hover {
+            background: $bg;
+            z-index: 1;
+            .label {
+                opacity: 1;
+                transform: scale(1.0);
+                transition: all 100ms ease-out 0s;
+            }
+        }
+    }
+
+    &.float-right {
+        float: right;
+    }
+}
+
+/* Mobile */
+// Hide the clock indicator when we're phone portrait
+body.phone.portrait {
+    .ls-indicator.t-indicator-clock {
+        display: none;
+    }
+}
+
+/************************************************* DATETIME UI */
+@mixin complexFieldHolder($myW) {
+    width: $myW + $interiorMargin;
+    input[type="text"] {
+        width: $myW;
+    }
+}
+
+.complex.datetime {
+    span {
+        display: inline-block;
+        margin-right: $interiorMargin;
+    }
+    .fields {
+        margin-top: $interiorMarginSm 0;
+        padding: $interiorMarginSm 0;
+    }
+
+    .date {
+        @include complexFieldHolder(80px);
+    }
+
+    .time.md {
+        @include complexFieldHolder(60px);
+    }
+
+    .time.sm {
+        @include complexFieldHolder(40px);
+    }
+}
+
+/************************************************* INFO BUBBLES */
+.l-infobubble-wrapper {
+    $arwSize: 5px;
+    box-shadow: rgba(black, 0.4) 0 1px 5px;
+    position: relative;
+    z-index: 50;
+    .l-infobubble {
+        display: inline-block;
+        min-width: $bubbleMinW;
+        max-width: $bubbleMaxW;
+        padding: 5px 10px;
+        &:before {
+            content:"";
+            position: absolute;
+            width: 0;
+            height: 0;
+        }
+        table {
+            width: 100%;
+            tr {
+                td {
+                    padding: 2px 0;
+                    vertical-align: top;
+                    &.label {
+                        padding-right: $interiorMargin * 2;
+                        white-space: nowrap;
+                    }
+                    &.value {
+                        //word-wrap: break-word; // Doesn't work in <td>?
+                        word-break: break-all;
+                    }
+                    &.align-wrap {
+                        white-space: normal;
+                    }
+                }
+            }
+        }
+        .title {
+            @include ellipsize();
+            margin-bottom: $interiorMargin;
+        }
+    }
+
+    &.arw-down {
+        margin-bottom: $arwSize*2;
+        .l-infobubble::before {
+            left: 50%;
+            top: 100%;
+            margin-left: -1 * $arwSize;
+            border-left: $arwSize solid transparent;
+            border-right: $arwSize solid transparent;
+            border-top: ($arwSize * 1.5) solid $colorInfoBubbleBg;
+        }
+    }
+    .arw {
+        z-index: 2;
+    }
+    &.arw-up .arw.arw-down,
+    &.arw-down .arw.arw-up {
+        display: none;
+    }
+}
+
+body.desktop {
+    .l-infobubble {
+        &.arw-left {
+            margin-left: $bubbleArwSize*2;
+            &:before {
+                @include triangle('left', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+                right: 100%;
+            }
+        }
+
+        &.arw-right {
+            margin-right: $bubbleArwSize*2;
+            &:before {
+                @include triangle('right', $bubbleArwSize, 1.5, $colorInfoBubbleBg);
+                left: 100%;
+            }
+        }
+
+        &.arw-top {
+            &:before {
+                top: $bubbleArwSize * 2;
+            }
+        }
+
+        &.arw-btm {
+            &:before {
+                bottom: $bubbleArwSize * 2;
+            }
+        }
+    }
+}
+
+.l-thumbsbubble-wrapper {
+    .arw-up {
+        @include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+    }
+    .arw-down {
+        @include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
+    }
+}
+
+.s-infobubble {
+    $emFg: darken($colorInfoBubbleFg, 20%);
+    border-radius: $basicCr;
+    box-shadow: rgba(black, 0.4) 0 1px 5px;
+    background: $colorInfoBubbleBg;
+    color: $colorInfoBubbleFg;
+    font-size: 0.8rem;
+    .title {
+        color: $emFg;
+        font-weight: bold;
+    }
+    table {
+        tr {
+            td {
+                border: none;
+                border-top: 1px solid darken($colorInfoBubbleBg, 10%) !important;
+                font-size: 0.9em;
+            }
+
+            &:first-child td {
+                border-top: none !important;
+            }
+        }
+    }
+    &:first-child td {
+        border-top: none;
+    }
+
+    .label {
+        color: lighten($emFg, 30%);
+    }
+
+    .value {
+        color: $emFg;
+    }
+
+}
+
+.s-thumbsbubble {
+    background: $colorThumbsBubbleBg;
+    color: $colorThumbsBubbleFg;
+}
+
+/***************************************************************** SPLITTERS */
+.splitter {
+    display: block;
+    position: absolute;
+    z-index: 3;
+    &:after {
+        // The handle
+        content:"";
+        pointer-events: none;
+        @include abs(0);
+        background: $colorSplitterBg;
+        display: block;
+        z-index: 4;
+    }
+    &:active {
+        &:after {
+            background-color: $colorSplitterActive !important;
+        }
+    }
+
+    @if $colorSplitterHover != 'none' {
+        &:not(:active) {
+            &:hover {
+                &:after {
+                    background-color: $colorSplitterHover !important;
+                    transiiton: background-color, 150ms;
+                }
+            }
+        }
+    }
+}
+
+.split-layout {
+    $inset: $splitterHandleHitMargin;
+    &.horizontal {
+        // Slides vertically up and down, splitting the element horizontally
+        overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
+        .pane {
+            left: 0;
+            right: 0;
+            &.top {
+                bottom: auto;
+            }
+            &.bottom {
+                top: auto;
+            }
+        }
+        >.splitter {
+            cursor: row-resize;
+            left: 0;
+            right: 0;
+            height: $splitterHandleD;
+            &:after {
+                top: $inset; bottom: $inset;
+            }
+        }
+    }
+
+    &.vertical {
+        // Slides horizontally left to right, splitting the element vertically
+        .pane {
+            top: 0;
+            bottom: 0;
+            &.left {
+                right: auto;
+            }
+            &.right {
+                left: auto;
+            }
+        }
+        >.splitter {
+            cursor: col-resize;
+            top: 0;
+            bottom: 0;
+            width: $splitterHandleD;
+            &:after {
+                left: $inset; right: $inset;
+                //width: $splitterHandleD;
+            }
+            &.flush-right {
+                width: ceil($splitterHandleD / 2);
+                &:after {
+                    width: $splitterHandleD;
+                    left: auto; right: 0;
+                }
+                &.edge-shdw {
+                    background-image: linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 70%, rgba(black, 0.2) 100%);
+                }
+            }
+        }
+    }
+}
+
+/******************************************************************* WAIT SPINNERS */
+@mixin  spinner($b: 5px, $c: $colorKey) {
+    animation-name: rotation-centered;
+    animation-duration: 0.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    border-radius: 100%;
+    box-sizing: border-box;
+    border-color: rgba($c, 0.25);
+    border-top-color: rgba($c, 1.0);
+    border-style: solid;
+    border-width: $b;
+    display: block;
+    position: absolute;
+    left: 50%; top: 50%;
+    transform-origin: center;
+    transform: translate(-50%, -50%);
+}
+
+.wait-spinner {
+    @include spinner($waitSpinnerBorderW, $colorKey);
+    pointer-events: none;
+    z-index: 2;
+    &.inline {
+        display: inline-block !important;
+        margin-right: $interiorMargin;
+        position: relative !important;
+        vertical-align: middle;
+    }
+}
+
+.loading {
+    // Can be applied to any block element with height and width
+    pointer-events: none;
+    &:before,
+    &:after {
+        content: '';
+    }
+    &:before {
+        @include spinner($waitSpinnerBorderW, $colorLoadingFg);
+        height: $waitSpinnerD; width: $waitSpinnerD;
+        z-index: 10;
+    }
+    &:after {
+        @include abs();
+        background: $colorLoadingBg;
+        display: block;
+        z-index: 9;
+    }
+    &.tree-item.t-wait-node {
+        $d: $waitSpinnerTreeD;
+        $spinnerL: $interiorMargin + 19px + $d/2;
+        padding-left: $spinnerL + $d/2 + $interiorMargin;
+        .t-title-label {
+            font-style: italic;
+            opacity: 0.6;
+        }
+        &:before {
+            height: $d;
+            width: $d;
+            border-width: 4px;
+            left: $spinnerL;
+        }
+        &:after {
+            display: none;
+        }
+    }
+}
+
+/******************************************************************* FLEX STYLES */
+.l-flex-row,
+.l-flex-col {
+    display: flex;
+    flex-wrap: nowrap;
+    .flex-elem {
+        min-height: 0; // Needed to allow element to shrink within parent
+        position: relative;
+        &:not(.grows) {
+            flex: 0 0 auto;
+            &.flex-can-shrink {
+                flex: 0 1 auto;
+            }
+        }
+        &.grows {
+            flex: 1 1 auto;
+        }
+        &.contents-align-right {
+            text-align: right;
+        }
+    }
+    .flex-container {
+        // Apply to wrapping elements, mct-includes, etc.
+        display: flex;
+        flex-wrap: nowrap;
+        flex: 1 1 auto;
+        min-height:0;
+    }
+}
+
+.l-flex-row {
+    flex-direction: row;
+    &.flex-elem { flex: 1 1 auto; }
+    > .flex-elem {
+        min-width: 0;
+        &.holder:not(:last-child) { margin-right: $interiorMargin; }
+    }
+    .flex-container { flex-direction: row; }
+}
+
+.l-flex-col {
+    flex-direction: column;
+    > .flex-elem {
+        min-height: 0;
+        &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
+    }
+    &.l-flex-accordion .flex-accordion-holder {
+        display: flex;
+        flex-direction: column;
+    }
+    .flex-container { flex-direction: column; }
+}
+
+.flex-fixed {
+    flex: 0 0 auto;
+}
+
+.flex-justify-end {
+    justify-content: flex-end;
+}
+
+/******************************************************************* GRID STYLES */
+.grid-two-column,
+.grid-properties {
+    display: grid;
+    grid-row-gap: 0;
+    grid-template-columns: 1fr 1fr;
+}
+
+.grid-span-all,
+.grid-two-column-span-cols {
+    grid-column: 1 / 3;
+}
+
+.grid-elem {
+    &:not(:first-child) {
+        border-top: 1px solid $colorInteriorBorder;
+    }
+    &.label {
+        background-color: rgba(0,0,128,0.2);
+    }
+    &.value {
+        background-color: rgba(0,128,0,0.2);
+    }
+}
+
+.grid-row {
+    display: contents;
+}
+
+.grid-row {
+    .grid-cell {
+        padding: 3px $interiorMarginLg 3px 0;
+        &[title] {
+            // When a cell has a title, assume it's helpful text
+            cursor: help;
+        }
+    }
+    &.force-border,
+    &:not(:first-of-type) {
+        // Row borders, effected via border-top on child elements of the row
+        .grid-cell {
+            border-top: 1px solid $colorInspectorSectionHeaderBg;
+        }
+    }
+}
+
+/******************************************************************* ABOUT SCREEN */
+.l-about {
+    &.abs {
+        overflow: auto;
+    }
+    $contentH: 200px;
+    .l-splash {
+        position: relative;
+        height: 45%;
+    }
+    .l-content {
+        position: relative;
+        margin-top: $interiorMarginLg;
+    }
+}
+
+.s-about {
+    line-height: 120%;
+
+    a {
+        color: $colorAboutLink;
+    }
+
+    h1, h2, h3 {
+        color: pullForward($colorBodyFg, 20%);
+        margin-bottom: 1em;
+    }
+
+    h1 {
+        font-size: 2.25em;
+    }
+
+    h2 {
+        border-top: 1px solid $colorInteriorBorder;
+        font-size: 1.5em;
+        margin-top: 2em;
+        padding-top: 1em;
+    }
+
+    h3 {
+        margin-top: 2em;
+    }
+
+    .s-description,
+    .s-button {
+        line-height: 2em;
+    }
+    .l-licenses-software {
+        .l-license-software {
+            border-top: 1px solid $colorInteriorBorder;
+            padding: 0.5em 0;
+            &:first-child {
+                border-top: none;
+            }
+            em {
+                color: pushBack($colorBodyFg, 20%);
+            }
+            h3 {
+                font-size: 1.25em;
+            }
+            .s-license-text {
+                font-size: 0.9em;
+            }
+        }
+    }
+}
+
+/******************************************************************* STARTUP / SPLASH SCREEN */
+@mixin splashElem($m: 20%) {
+    top: $m; right: $m * 1.25; bottom: $m; left: $m * 1.25;
+}
+
+.l-splash,
+.l-splash:before,
+.l-splash:after {
+    background-position: center;
+    background-repeat: no-repeat;
+    position: absolute;
+}
+
+.l-splash {
+    background-size: cover;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    &:before,
+    &:after {
+        background-size: contain;
+        content: '';
+    }
+
+    &:before {
+        // NASA logo, dude
+        $w: 5%;
+        $m: 10px;
+        background-image: url('../images/logo-nasa.svg');
+        top: $m;
+        right: auto;
+        bottom: auto;
+        left: $m;
+        height: auto;
+        width: $w * 2;
+        padding-bottom: $w;
+        padding-top: $w;
+    }
+
+    &:after {
+        // App logo
+        top: 0;
+        right: 15%;
+        bottom: 0;
+        left: 15%;
+    }
+}
+
+.l-splash-holder {
+    // Main outer holder for splash.
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10000;
+    opacity: 1;
+    .l-splash {
+        // The splash element.
+        @include splashElem();
+    }
+}
+
+@media only screen and (max-device-width: 767px) {
+    .l-splash-holder .l-splash {
+        @include splashElem(0);
+        border-radius: 0;
+        box-shadow: none;
+    }
+}
+
+@media only screen and (max-device-width: 767px) and (orientation: portrait) {
+    .l-splash-holder .l-splash {
+        &:before {
+            // Make the NASA logo a bit bigger when we're in portrait mode.
+            $w: 12%;
+            width: $w * 2;
+            padding-bottom: $w;
+            padding-top: $w;
+        }
+    }
+}
+
 /******************************************************************* VARIOUS */
+.c-overlay mct-include {
+    display: inline; // Fallback for display: contents
+    display: contents;
+}
+
 .overlay {
     .outer-holder {
         background: $colorMenuBg;
@@ -581,6 +1996,10 @@ mct-plot {
     }
 }
 
+.t-popup {
+    z-index: 75;
+}
+
 .form .form-row {
     .label {
         color: $colorMenuFg !important;
@@ -603,25 +2022,35 @@ mct-plot {
     }
 }
 
-.t-imagery {
-    display: contents;
-}
-
 .t-frame-outer {
     min-width: 200px;
     min-height: 200px;
 }
 
-/******************************************************************* EDITING */
-.is-editing {
-    // Fixed position
-    .l-fixed-position {
-        &__grid-holder {
-            display: block;
-        }
+.l-iframe {
+    iframe {
+        display: block;
+        height: 100%;
+        width: 100%;
+        border: none;
+    }
+}
 
-        .c-frame-edit {
-            display: block;
+// Alert elements in views
+.s-unsynced {
+    @include sUnsynced();
+}
+
+.s-status-timeconductor-unsynced {
+    // Plot areas
+    .gl-plot .gl-plot-display-area {
+        @include sUnsynced();
+    }
+
+    // Object headers
+    .object-header {
+        .t-object-alert {
+            display: inline;
         }
     }
 }
diff --git a/src/styles-new/_mixins.scss b/src/styles-new/_mixins.scss
index d39690c9c3..25e1461d24 100644
--- a/src/styles-new/_mixins.scss
+++ b/src/styles-new/_mixins.scss
@@ -49,6 +49,37 @@
     }
 }
 
+/************************** EFFECTS */
+@mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
+    @include keyframes($animName) {
+        0%   { opacity: $opacity0; }
+        100% { opacity: $opacity100; }
+    }
+    @include animation-name($animName);
+    @include animation-duration($dur);
+    @include animation-direction(alternate);
+    @include animation-iteration-count($iteration);
+    @include animation-timing-function(ease-in-out);
+}
+
+@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
+    @include keyframes($animName) {
+        from { #{propName}: $propValStart; }
+        to { #{$propName}: $propValEnd; }
+    }
+    @include animToParams($animName, $dur: $dur, $delay: $delay, $dir: $dir, $count: $count)
+}
+
+@mixin animToParams($animName, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
+    @include animation-name($animName);
+    @include animation-duration($dur);
+    @include animation-delay($delay);
+    @include animation-fill-mode(both);
+    @include animation-direction($dir);
+    @include animation-iteration-count($count);
+    @include animation-timing-function(ease-in-out);
+}
+
 /************************** VISUALS */
 @mixin ancillaryIcon($d, $c) {
     // Used for small icons used in combination with larger icons,
@@ -164,6 +195,30 @@
     background-color: $bg;
 }
 
+@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
+    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 bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
     background-image: linear-gradient(-90deg,
         rgba($c, $a) 0%, rgba($c, $a) 50%,
@@ -184,7 +239,7 @@
     background-color: $colorInspectorSectionHeaderBg;
     color: $colorInspectorSectionHeaderFg;
     font-weight: normal;
-    margin: 0 0 $interiorMarginSm 0;
+    margin: $interiorMarginSm 0;
     padding: $interiorMarginSm $interiorMargin;
     text-transform: uppercase;
 }
@@ -553,3 +608,9 @@
     background-color: rgba($c, $a) !important;
     box-shadow: deeppink 0 0 10px 1px !important;
 }
+
+
+@mixin sUnsynced() {
+    $c: $colorPausedBg;
+    border: 1px solid $c;
+}
diff --git a/src/styles-new/core.scss b/src/styles-new/core.scss
index fd77b40a0a..4dfbfa107f 100644
--- a/src/styles-new/core.scss
+++ b/src/styles-new/core.scss
@@ -21,18 +21,13 @@
  *****************************************************************************/
 
 @import "vendor/normalize.min.css";
-@import "sass-base.scss";
+@import "sass-base";
 
 /******************** RENDERS CSS */
 @import "glyphs";
 @import "global";
 @import "status";
 @import "controls";
+@import "forms";
 @import "table";
 @import "legacy";
-
-/******************** LEGACY CSS */
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-@import "legacy-styles";
-
diff --git a/src/styles-new/legacy-styles.scss b/src/styles-new/legacy-styles.scss
deleted file mode 100644
index 7acf392a51..0000000000
--- a/src/styles-new/legacy-styles.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-@import "../styles/mixins";
-@import "../styles/mobile/mixins";
-@import "../styles/themes/snow/mixins";
-
-@import "../styles/constants";
-@import "../styles/mobile/constants";
-@import "../styles/themes/snow/constants";
-
-@import "../styles/animations";
-@import "../styles/effects";
-// @import "../styles/glyphs";
-@import "../styles/animations";
-@import "../styles/archetypes";
-//@import "../styles/about";
-//@import "../styles/text";
-@import "../styles/icons";
-//@import "../styles/status";
-@import "../styles/data-status";
-@import "../styles/helpers/bubbles";
-@import "../styles/helpers/splitter";
-@import "../styles/helpers/wait-spinner";
-//@import "../styles/inspector";
-//
-//!********************************* CONTROLS *!
-//@import "../styles/controls/breadcrumb";
-@import "../styles/controls/buttons";
-//@import "../styles/controls/palette";
-//@import "../styles/controls/controls";
-@import "../styles/controls/lists";
-@import "../styles/controls/menus";
-@import "../styles/controls/messages";
-@import "../styles/controls/indicators";
-@import "../styles/mobile/controls/menus";
-//
-//!********************************* FORMS *!
-@import "../styles/forms/elems";
-@import "../styles/forms/channel-selector";
-@import "../styles/forms/datetime";
-@import "../styles/forms/validation";
-@import "../styles/forms/filter";
-//
-//!********************************* USER ENVIRON *!
-@import "../styles/user-environ/layout";
-@import "../styles/mobile/layout";
-@import "../styles/edit/editor";
-//@import "../styles/search/search";
-//@import "../styles/mobile/search/search";
-@import "../styles/overlay/overlay";
-@import "../styles/tree/tree"; // TEMP - NEED FOR TREE IN INSPECTOR
-@import "../styles/object-label";
-//@import "../styles/mobile/tree";
-@import "../styles/user-environ/frame";
-@import "../styles/user-environ/top-bar";
-@import "../styles/user-environ/tool-bar";
-@import "../styles/user-environ/selecting";
-//
-//!********************************* VIEWS *!
-//@import "../styles/lists/tabular";
-//@import "../styles/plots/plots-main";
-//@import "../styles/plots/legend";
-@import "../styles/iframe";
-@import "../styles/views";
-@import "../styles/items/item";
-@import "../styles/mobile/item";
-@import "../styles/table";
-//@import "../styles/notebook/notebook";
-//
-//!********************************* TO BE MOVED *!
-@import "../styles/autoflow";
-@import "../styles/features/imagery";
-//@import "../styles/features/time-display";
-@import "../styles/widgets";
-//
-//!********************************* APP STARTUP *!
-//@import "../styles/app-start";
-
diff --git a/src/styles-new/sass-base.scss b/src/styles-new/sass-base.scss
index 4be4f47a8d..ca9aea73e2 100644
--- a/src/styles-new/sass-base.scss
+++ b/src/styles-new/sass-base.scss
@@ -27,4 +27,5 @@
 @import "constants-espresso"; // TEMP
 //@import "constants-snow"; // TEMP
 //@import "constants-maelstrom";
-@import "mixins";
\ No newline at end of file
+@import "mixins";
+@import "animations";
\ No newline at end of file
diff --git a/src/styles/_about.scss b/src/styles/_about.scss
deleted file mode 100644
index 368f920c3c..0000000000
--- a/src/styles/_about.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-// General About dialog styling
-// Depends on styles loaded via /platform/commonUI/general/res/sass/startup-base.scss
-.l-about {
-	&.abs {
-		overflow: auto;
-	}
-	$contentH: 200px;
-	.l-splash {
-		position: relative;
-		height: 45%;
-	}
-	.l-content {
-		position: relative;
-		margin-top: $interiorMarginLg;
-	}
-}
-
-.s-about {
-	line-height: 120%;
-
-	a {
-		color: $colorAboutLink;
-	}
-
-    h1, h2, h3 {
-        color: pullForward($colorBodyFg, 20%);
-        margin-bottom: 1em;
-    }
-
-    h1 {
-        font-size: 2.25em;
-    }
-
-    h2 {
-        border-top: 1px solid $colorInteriorBorder;
-        font-size: 1.5em;
-        margin-top: 2em;
-        padding-top: 1em;
-    }
-
-    h3 {
-        margin-top: 2em;
-    }
-
-	.s-description,
-	.s-button {
-		line-height: 2em;
-	}
-	.l-licenses-software {
-		.l-license-software {
-			border-top: 1px solid $colorInteriorBorder;
-			padding: 0.5em 0;
-			&:first-child {
-				border-top: none;
-			}
-			em {
-				color: pushBack($colorBodyFg, 20%);
-			}
-			h3 {
-				font-size: 1.25em;
-			}
-			.s-license-text {
-				font-size: 0.9em;
-			}
-		}
-	}
-}
diff --git a/src/styles/_app-start.scss b/src/styles/_app-start.scss
deleted file mode 100644
index b2ab6eed3c..0000000000
--- a/src/styles/_app-start.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// At the last, hide .l-splash-holder and show .holder-all
-.l-splash-holder.fadeout {
-    @include trans-prop-nice($props: opacity, $dur: 1000ms);
-    opacity: 0;
-    pointer-events: none;
-}
-
-.user-environ .holder-all {
-    opacity: 1;
-    pointer-events: inherit;
-}
\ No newline at end of file
diff --git a/src/styles/_archetypes.scss b/src/styles/_archetypes.scss
deleted file mode 100644
index 4a7eae8d8e..0000000000
--- a/src/styles/_archetypes.scss
+++ /dev/null
@@ -1,213 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-/********************************************* COLUMN LAYOUTS STYLES */
-@mixin cols($totalCols, $span) {
-    $cw: 100% / $totalCols;
-    min-width: (500px / $totalCols) * $span;
-    @if ($totalCols != $span) {
-        width: ($cw * $span) - $ueColMargin;
-    } @else {
-        width: $cw;
-    }
-}
-
-.cols {
-    @include clearfix;
-    .col {
-        box-sizing: border-box;
-        @include clearfix;
-        float: left;
-        margin-left: $ueColMargin;
-        padding-left: $interiorMargin;
-        position: relative;
-        &:first-child {
-            margin-left: 0;
-            padding-left: 0;
-        }
-    }
-    &.cols-2 {
-        $nc: 2;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-2-ff {
-        // 2 columns, first column is fixed, second is fluid
-        .col-100px {
-            width: 100px;
-        }
-    }
-
-    &.cols-6 {
-        $nc: 6;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-    }
-    &.cols-16 {
-        $nc: 16;
-        .col-1 {
-            @include cols($nc, 1);
-        }
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-7 {
-            @include cols($nc, 7);
-        }
-    }
-    &.cols-32 {
-        $nc: 32;
-        .col-2 {
-            @include cols($nc, 2);
-        }
-        .col-15 {
-            @include cols($nc, 15);
-        }
-    }
-    .l-row {
-        @include clearfix;
-        padding: $interiorMargin 0;
-    }
-}
-
-/********************************************* FLEX STYLES */
-.l-flex-row,
-.l-flex-col {
-    display: flex;
-    flex-wrap: nowrap;
-    .flex-elem {
-        min-height: 0; // Needed to allow element to shrink within parent
-        position: relative;
-        &:not(.grows) {
-            flex: 0 0 auto;
-            &.flex-can-shrink {
-                flex: 0 1 auto;
-            }
-        }
-        &.grows {
-            flex: 1 1 auto;
-        }
-        &.contents-align-right {
-            text-align: right;
-        }
-    }
-    .flex-container {
-        // Apply to wrapping elements, mct-includes, etc.
-        display: flex;
-        flex-wrap: nowrap;
-        flex: 1 1 auto;
-        min-height:0;
-    }
-}
-
-.l-flex-row {
-    flex-direction: row;
-    &.flex-elem { flex: 1 1 auto; }
-    > .flex-elem {
-        min-width: 0;
-        &.holder:not(:last-child) { margin-right: $interiorMargin; }
-    }
-    .flex-container { flex-direction: row; }
-}
-
-.l-flex-col {
-    flex-direction: column;
-    > .flex-elem {
-        min-height: 0;
-        &.holder:not(:last-child) { margin-bottom: $interiorMarginLg; }
-    }
-    &.l-flex-accordion .flex-accordion-holder {
-        display: flex;
-        flex-direction: column;
-        //overflow: hidden !important;
-    }
-    .flex-container { flex-direction: column; }
-}
-
-.flex-fixed {
-    flex: 0 0 auto;
-}
-
-.flex-justify-end {
-    justify-content: flex-end;
-}
-
-/********************************************* POPUPS */
-.t-popup {
-    z-index: 75;
-}
-
-/********************************************* GRID STYLES */
-.grid-two-column {
-    display: grid;
-    grid-row-gap: 0;
-    grid-template-columns: 1fr 2fr;
-    align-items: top;
-}
-
-.grid-two-column-span-cols {
-    grid-column: 1 / 3;
-}
-
-.grid-elem {
-    &:not(:first-child) {
-        border-top: 1px solid $colorInteriorBorder;
-    }
-    &.label {
-        background-color: rgba(0,0,128,0.2);
-    }
-    &.value {
-        background-color: rgba(0,128,0,0.2);
-    }
-}
-
-// Properties grids
-.grid-properties {
-    @extend .grid-two-column;
-}
-
-.grid-row {
-    display: contents;
-}
-
-.grid-span-all {
-    @extend .grid-two-column-span-cols;
-}
-
-.grid-row {
-    .grid-cell {
-        padding: 3px $interiorMarginLg 3px 0;
-        &[title] {
-            // When a cell has a title, assume it's helpful text
-            cursor: help;
-        }
-    }
-    &.force-border,
-    &:not(:first-of-type) {
-        // Row borders, effected via border-top on child elements of the row
-        .grid-cell {
-            border-top: 1px solid $colorInspectorSectionHeaderBg;
-        }
-    }
-}
diff --git a/src/styles/_autoflow.scss b/src/styles/_autoflow.scss
deleted file mode 100644
index 2c2a83d6c3..0000000000
--- a/src/styles/_autoflow.scss
+++ /dev/null
@@ -1,137 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.autoflow {
-	$headerH: $formInputH;
-	$colMargin: $interiorMargin;
-	$colW: 225px;
-	$valW: 70px;
-	$valPad: 5px;
-	$rowH: 15px;
-	font-size: 0.75rem;
-
-	&:hover {
-		.l-autoflow-header .s-button.change-column-width {
-			@include trans-prop-nice-fade(50ms);
-			opacity: 1;
-		}
-	}
-
-	.l-autoflow-header {
-		bottom: auto;
-		height: $headerH;
-		line-height: $headerH;
-        min-width: $colW;
-        .t-last-update {
-            overflow: hidden;
-        }
-		.s-button.change-column-width {
-			@include trans-prop-nice-fade(500ms);
-			opacity: 0;
-		}
-		.l-filter {
-            display: block;
-			margin-right: $interiorMargin;
-			input.t-filter-input {
-				width: 150px;
-			}
-		}
-	}
-
-	.l-autoflow-items {
-		//		@include test(green);
-		overflow-x: scroll;
-		overflow-y: hidden;
-		top: $headerH + $interiorMargin * 2;
-		white-space: nowrap;
-		.l-autoflow-col {
-//			@include test();
-			box-sizing: border-box;
-			border-left: 1px solid $colorInteriorBorder;
-			display: inline-block;
-//			height: 100%;
-			padding-left: $colMargin;
-			padding-right: $colMargin;
-			vertical-align: top;
-			width: $colW;
-			.l-autoflow-row {
-				//				@include test(red);
-				box-sizing: border-box;
-				border-bottom: 1px solid rgba(#fff,0.05);
-				display: block;
-				height: $rowH;
-				line-height: $rowH;
-				margin-bottom: 1px; margin-top: 1px;
-				position: relative;
-				&:first-child {
-					border-top: none;
-				}
-				&:hover {
-					background: rgba(#fff, 0.1);
-				}
-				&.s-stale {
-					//color: darken($colorBodyFg, 20%);
-					.l-autoflow-item.l { @include s-stale(0.3); };
-					.l-autoflow-item.r { @include s-stale(); };
-				}
-				&:not(.s-stale) {
-					.l-autoflow-item.r {
-						color: lighten($colorBodyFg, 10%);
-					}
-				}
-				&.first-in-group {
-					border-top: 1px solid lighten($colorInteriorBorder, 20%);
-				}
-				.l-autoflow-item {
-					display: block;
-					&.l {
-						float: none;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-						width: auto;
-					}
-					&.r {
-						border-radius: $smallCr;
-						float: right;
-						margin-left: $interiorMargin;
-						padding-left: $valPad;
-						padding-right: $valPad;
-						text-align: right;
-					}
-				}
-			}
-
-			&:first-child {
-				border-left: none;
-				padding-left: 0;
-			}
-		}
-	}
-}
-
-.frame {
-    &.child-frame.panel {
-        .autoflow .l-autoflow-header .l-filter {
-            display: none;
-        }
-    }
-}
diff --git a/src/styles/_badges.scss b/src/styles/_badges.scss
deleted file mode 100644
index 7b7dcd7082..0000000000
--- a/src/styles/_badges.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.badge {
-    @include background-image(linear-gradient(lighten($colorAlt1, 10%), $colorAlt1));
-    color: $colorBodyBg;
-    display: inline-block;
-    text-align: center;
-}
-
-.top-bar .badge {
-    border-radius: $controlCr * 1.5;
-    $h: $btnStdH; //$ueTopBarBtnH; // - 5px;
-    font-size: 1.4em;
-    height: $h;
-    line-height: $h;
-    margin-right: $interiorMargin;
-    width: $badgeW;
-    vertical-align: middle;
-}
-
-.super-menu .badge {
-    @include background-image(linear-gradient(lighten($colorCreateBtn, 10%), $colorCreateBtn));
-    border-radius: $controlCr;
-    @include boxShdwSubtle();
-    padding: 2px 7px;
-}
diff --git a/src/styles/_constants.scss b/src/styles/_constants.scss
deleted file mode 100644
index 748d92e80a..0000000000
--- a/src/styles/_constants.scss
+++ /dev/null
@@ -1,146 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 */
-$enableImageryThumbs: true; // Set to true if historical imagery thumbnails are supported
-
-/************************** VERY INFLUENTIAL GLOBAL DIMENSIONS */
-$bodyMargin: 10px;
-$interiorMargin: 5px;
-$interiorMarginLg: $interiorMargin * 2;
-$interiorMarginSm: 3px;
-$badgeW: 35px;
-
-/************************** RATIOS */
-$ltGamma: 20%;
-$btnFontSizeToH: 0.45;
-
-/************************** LAYOUT */
-$ueTopBarH: 24px;
-$ueTopBarEditH: 30px;
-$ueTopBarBtnH: 35px;
-$ueFooterH: 25px;
-$ueColMargin: 1.5%;
-$ueAppLogoW: 80px;
-$ueEditToolBarH: 25px;
-$ueCollapsedPaneEdgeM: 22px;
-$uePaneMiniTabH: 36px;
-$uePaneMiniTabW: 10px;
-$uePaneMiniTabFontSize: 9px;
-$uePaneMiniTabCollapsedW: 22px;
-$ueEditLeftPaneW: 75%;
-$treeSearchInputBarH: 25px;
-/*************** Panes */
-$ueBrowseLeftPaneTreeMinW: 150px;
-$ueBrowseLeftPaneTreeMaxW: 35%;
-$ueBrowseLeftPaneTreeW: 25%;
-$ueBrowseRightPaneInspectMinW: 200px;
-$ueBrowseRightPaneInspectMaxW: 35%;
-$ueBrowseRightPaneInspectW: 20%;
-$ueDesktopMinW: 600px;
-/*************** Overlay */
-$ovrTopBarH: 45px;
-$ovrFooterH: 24px;
-$overlayMargin: 25px;
-/*************** Progress Overlay */
-$durEntryMs: 50ms;
-$delayEntryMs: 100ms;
-/*************** Items */
-$ueBrowseGridItemLg: 200px;
-$ueBrowseGridItemTopBarH: 20px;
-$ueBrowseGridItemBottomBarH: 30px;
-$itemPadLR: 5px;
-/*************** Tree */
-$treeVCW: 16px;
-$treeTypeIconH: 1.4em; // was 16px
-$treeTypeIconHPx: 16px;
-$treeTypeIconW: 18px;
-$treeContextTriggerW: 20px;
-/*************** Tabular */
-$tabularHeaderH: 22px;
-$tabularTdPadLR: $itemPadLR;
-$tabularTdPadTB: 2px;
-/*************** Imagery */
-$imageMainControlBarH: 25px;
-$imageThumbsD: 100px;
-$imageThumbsWrapperH: 155px;
-$imageThumbPad: 1px;
-/*************** Ticks */
-$ticksH: 25px;
-$tickLblVMargin: 3px;
-$tickLblH: 15px;
-$tickLblW: 50px;
-$tickH: $ticksH - $tickLblVMargin - $tickLblH;
-$tickW: 1px;
-/*************** Plots */
-$plotYBarW: 60px;
-$plotYLabelMinH: 20px;
-$plotYLabelW: 10px;
-$plotXBarH: 32px;
-$plotLegendH: 20px;
-$plotSwatchD: 8px;
-// 1: Top, 2: right, 3: bottom, 4: left
-$plotDisplayArea: (0, 0, $plotXBarH, $plotYBarW);
-/* min plot height is based on user testing to find minimum useful height */
-$plotMinH: 95px;
-/*************** Bubbles */
-$bubbleArwSize: 10px;
-$bubblePad: $interiorMargin;
-$bubbleMinW: 100px;
-$bubbleMaxW: 300px;
-/*************** Forms */
-$reqSymbolW: 15px;
-$reqSymbolM: $interiorMargin * 2;
-$reqSymbolFontSize: 0.75em;
-$inputTextPTopBtm: 2px;
-$inputTextPLeftRight: 5px;
-$inputTextP: $inputTextPTopBtm $inputTextPLeftRight;
-/*************** Wait Spinner Defaults */
-$waitSpinnerD: 32px;
-$waitSpinnerTreeD: 20px;
-$waitSpinnerBorderW: 5px;
-$waitSpinnerTreeBorderW: 4px;
-
-/************************** CONTROLS */
-$controlDisabledOpacity: 0.3;
-$formLabelW: 30%;
-$formInputH: 22px;
-$formRowCtrlsH: 14px;
-$formTBPad: $interiorMargin;
-$formLRPad: $interiorMargin;
-$menuLineH: 1.5rem;
-$menuLineHPx: 24px;
-$btnStdH: 25px;
-$btnToolbarH: $btnStdH;
-$controlBarH: $btnStdH;
-$btnFrameH: 18px;
-
-/************************** PATHS */
-// Paths need to be relative to /platform/commonUI/theme/<theme-name>/css/ directory
-$dirCommonRes: '../';
-$dirFonts: $dirCommonRes + 'fonts/';
-$dirImgs: $dirCommonRes + 'images/';
-
-/************************** TIMINGS */
-$controlFadeMs: 100ms;
-$browseToEditAnimMs: 400ms;
-$editBorderPulseMs: 500ms;
diff --git a/src/styles/_data-status.scss b/src/styles/_data-status.scss
deleted file mode 100644
index d058885cf1..0000000000
--- a/src/styles/_data-status.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.s-stale {
-	@include s-stale();
-	.td {
-		@include s-stale();
-	}
-}
diff --git a/src/styles/_effects.scss b/src/styles/_effects.scss
deleted file mode 100644
index 49e6e9ec11..0000000000
--- a/src/styles/_effects.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
-    @include keyframes($animName) {
-        0%   { opacity: $opacity0; }
-        100% { opacity: $opacity100; }
-    }
-	@include animation-name($animName);
-	@include animation-duration($dur);
-	@include animation-direction(alternate);
-	@include animation-iteration-count($iteration);
-	@include animation-timing-function(ease-in-out);
-}
-
-.pulse {
-	@include pulse($animName: pulse, $dur: 750ms);
-}
-
-.pulse-subtle {
-    @include pulse($animName: pulse-subtle, $dur: 500ms, $opacity0: 0.7);
-}
-
-@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
-    @include keyframes($animName) {
-        from { #{propName}: $propValStart; }
-        to { #{$propName}: $propValEnd; }
-    }
-    @include animToParams($animName, $dur: $dur, $delay: $delay, $dir: $dir, $count: $count)
-}
-
-@mixin animToParams($animName, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
-    @include animation-name($animName);
-    @include animation-duration($dur);
-    @include animation-delay($delay);
-    @include animation-fill-mode(both);
-    @include animation-direction($dir);
-    @include animation-iteration-count($count);
-    @include animation-timing-function(ease-in-out);
-}
diff --git a/src/styles/_global.scss b/src/styles/_global.scss
deleted file mode 100644
index 22b34f6879..0000000000
--- a/src/styles/_global.scss
+++ /dev/null
@@ -1,247 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-/************************** HTML ENTITIES */
-a {
-    color: $colorA;
-    cursor: pointer;
-    text-decoration: none;
-    &:hover {
-        color: $colorAHov;
-    }
-}
-
-body, html {
-    -webkit-font-smoothing: subpixel-antialiased;
-    background-color: $colorBodyBg;
-    color: $colorBodyFg;
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 100%;
-    font-weight: normal;
-    height: 100%;
-    width: 100%;
-}
-
-em {
-    font-style: normal;
-}
-
-input, textarea {
-    font-family: inherit;
-    font-weight: inherit;
-    letter-spacing: inherit;
-}
-
-h1, h2, h3 {
-    letter-spacing: 0.04em;
-    margin: 0;
-}
-
-h1 {
-    font-size: 1.7em;
-    font-weight: normal !important;
-    letter-spacing: 0.04em;
-    line-height: 120%;
-    margin-bottom: 20px;
-    margin-top: 0;
-}
-
-p {
-    margin-bottom: $interiorMarginLg;
-}
-
-ol, ul {
-    list-style: none;
-    margin: 0;
-    padding-left: 0;
-}
-
-mct-container {
-    display: block;
-}
-
-.abs {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: auto;
-    width: auto;
-}
-
-.code {
-    font-family: "Lucida Console", monospace;
-    font-size: 0.7em;
-    line-height: 150%;
-    white-space: pre;
-}
-
-.codehilite {
-    @extend .code;
-    background-color: rgba($colorBodyFg, 0.1);
-    padding: 1em;
-}
-
-.disabled,
-a.disabled {
-    opacity: $controlDisabledOpacity;
-    pointer-events: none !important;
-    cursor: default !important;
-}
-
-.s-status-missing {
-    // Labels. Expects .s-status-missing to be applied to mct-representation that contains
-    .t-object-label .t-item-icon:before {
-        content: $glyph-icon-object-unknown;
-    }
-
-    // Item, grid item. Expects .s-status-missing to be applied to mct-representation that contains .item.grid-item
-    .item .t-item-icon-glyph:before {
-        content: $glyph-icon-object-unknown;
-    }
-
-    // Object header. Expects .s-status-missing to be applied to mct-representation.object-header
-    &.object-header {
-        .type-icon:before {
-            content: $glyph-icon-object-unknown;
-        }
-    }
-
-    // Tree item. Expects .s-status-missing to be applied to .tree-item,
-    // and mct-representation.search-item
-    &.tree-item,
-    &.search-item {
-        > .rep-object-label .t-item-icon:before {
-            content: $glyph-icon-object-unknown;
-        }
-    }
-}
-
-.align-right {
-    text-align: right;
-}
-
-.centered {
-    text-align: center;
-}
-
-.ellipsis {
-    @include ellipsize();
-}
-
-.no-selection {
-    // aka selection = "None". Used in palettes and their menu buttons.
-    $c: red; $s: 48%; $e: 52%;
-    @include background-image(linear-gradient(-45deg,
-        transparent $s - 5%,
-        $c $s,
-        $c $e,
-        transparent $e + 5%
-    ));
-    background-repeat: no-repeat;
-    background-size: contain;
-}
-
-
-.scrolling,
-.scroll {
-    overflow: auto;
-}
-
-.vscroll {
-    overflow-x: hidden;
-    overflow-y: auto;
-    &.scroll-pad {
-        padding-right: $interiorMargin;
-    }
-}
-
-.vscroll--persist {
-    overflow-x: hidden;
-    overflow-y: scroll;
-}
-
-.slidable {
-    cursor: move; // Fallback
-    cursor: grab;
-    cursor: -moz-grab;
-    cursor: -webkit-grab;
-    &.horz {
-        cursor: col-resize;
-    }
-    &.vert {
-        cursor: row-resize;
-    }
-}
-
-.no-margin {
-    margin: 0;
-}
-
-.ds {
-    box-shadow: rgba(#000, 0.7) 0 4px 10px 2px;
-}
-
-.capitalize {
-    text-transform: capitalize;
-}
-
-.hide,
-.hidden,
-.t-main-view .hide-in-t-main-view {
-    display: none !important;
-}
-
-.hide-nice {
-    opacity: 0;
-    pointer-events: none;
-}
-
-.invisible {
-    display: block;
-    visibility: hidden;
-    height: 0;
-    padding: 0;
-    border: 0;
-    margin: 0 !important;
-    transform: scale(0);
-    pointer-events: none;
-    position: absolute;
-}
-
-.sep {
-    color: rgba(#fff, 0.2);
-}
-
-.comma-list span {
-    &:not(:first-child) {
-        &:before { content: ', '; }
-    }
-}
-
-.test-stripes {
-    @include bgDiagonalStripes();
-}
-
-.test {
-    @include test();
-}
diff --git a/src/styles/_glyphs.scss b/src/styles/_glyphs.scss
deleted file mode 100644
index bc15f703e9..0000000000
--- a/src/styles/_glyphs.scss
+++ /dev/null
@@ -1,280 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 glyphBefore($unicode, $family: 'symbolsfont') {
-    &:before {
-        content: $unicode;
-        font-family: $family;
-    }
-}
-
-@mixin glyphAfter($unicode, $family: 'symbolsfont') {
-    &:after {
-        content: $unicode;
-        font-family: $family;
-    }
-}
-
-[class*="icon-"].labeled {
-    // Moved from .s-button and generalized
-    &:before {
-        // Fend off label from icon when it's included
-        margin-right: $interiorMarginSm;
-    }
-}
-
-/************************** CHAR UNICODES */
-
-$glyph-icon-alert-rect: '\e900';
-$glyph-icon-alert-triangle: '\e901';
-$glyph-icon-arrow-down: '\e902';
-$glyph-icon-arrow-left: '\e903';
-$glyph-icon-arrow-right: '\e904';
-$glyph-icon-arrow-double-up: '\e905';
-$glyph-icon-arrow-tall-up: '\e906';
-$glyph-icon-arrow-tall-down: '\e907';
-$glyph-icon-arrow-double-down: '\e908';
-$glyph-icon-arrow-up: '\e909';
-$glyph-icon-asterisk: '\e910';
-$glyph-icon-bell: '\e911';
-$glyph-icon-box: '\e912';
-$glyph-icon-box-with-arrow: '\e913';
-$glyph-icon-check: '\e914';
-$glyph-icon-connectivity: '\e915';
-$glyph-icon-database-in-brackets: '\e916';
-$glyph-icon-eye-open: '\e917';
-$glyph-icon-gear: '\e918';
-$glyph-icon-hourglass: '\e919';
-$glyph-icon-info: '\e920';
-$glyph-icon-link: '\e921';
-$glyph-icon-lock: '\e922';
-$glyph-icon-minus: '\e923';
-$glyph-icon-people: '\e924';
-$glyph-icon-person: '\e925';
-$glyph-icon-plus: '\e926';
-$glyph-icon-trash: '\e927';
-$glyph-icon-x: '\e928';
-$glyph-icon-brackets: '\e929';
-$glyph-icon-crosshair: '\e930';
-$glyph-icon-grippy: '\e931';
-$glyph-icon-arrow-right-equilateral: '\e932';
-$glyph-icon-arrows-out: '\e1000';
-$glyph-icon-arrows-right-left: '\e1001';
-$glyph-icon-arrows-up-down: '\e1002';
-$glyph-icon-bullet: '\e1004';
-$glyph-icon-calendar: '\e1005';
-$glyph-icon-chain-links: '\e1006';
-$glyph-icon-collapse-pane-left: '\e1007';
-$glyph-icon-collapse-pane-right: '\e1008';
-$glyph-icon-download: '\e1009';
-$glyph-icon-duplicate: '\e1010';
-$glyph-icon-folder-new: '\e1011';
-$glyph-icon-fullscreen-collapse: '\e1012';
-$glyph-icon-fullscreen-expand: '\e1013';
-$glyph-icon-layers: '\e1014';
-$glyph-icon-line-horz: '\e1015';
-$glyph-icon-magnify: '\e1016';
-$glyph-icon-magnify-in: '\e1017';
-$glyph-icon-magnify-out: '\e1018';
-$glyph-icon-menu-hamburger: '\e1019';
-$glyph-icon-move: '\e1020';
-$glyph-icon-new-window: '\e1021';
-$glyph-icon-paint-bucket: '\e1022';
-$glyph-icon-pause: '\e1023';
-$glyph-icon-pencil: '\e1024';
-$glyph-icon-play: '\e1025';
-$glyph-icon-plot-resource: '\e1026';
-$glyph-icon-pointer-left: '\e1027';
-$glyph-icon-pointer-right: '\e1028';
-$glyph-icon-refresh: '\e1029';
-$glyph-icon-save: '\e1030';
-$glyph-icon-sine: '\e1031';
-$glyph-icon-T: '\e1032';
-$glyph-icon-thumbs-strip: '\e1033';
-$glyph-icon-two-parts-both: '\e1034';
-$glyph-icon-two-parts-one-only: '\e1035';
-$glyph-icon-resync: '\e1036';
-$glyph-icon-reset: '\e1037';
-$glyph-icon-x-in-circle: '\e1038';
-$glyph-icon-brightness: '\e1039';
-$glyph-icon-contrast: '\e1040';
-$glyph-icon-expand: '\e1041';
-$glyph-icon-list-view: '\e1042';
-$glyph-icon-grid-snap-to: '\e1043';
-$glyph-icon-grid-snap-no: '\e1044';
-$glyph-icon-frame-show: '\e1045';
-$glyph-icon-frame-hide: '\e1046';
-$glyph-icon-import: '\e1047';
-$glyph-icon-export: '\e1048';
-$glyph-icon-activity: '\e1100';
-$glyph-icon-activity-mode: '\e1101';
-$glyph-icon-autoflow-tabular: '\e1102';
-$glyph-icon-clock: '\e1103';
-$glyph-icon-database: '\e1104';
-$glyph-icon-database-query: '\e1105';
-$glyph-icon-dataset: '\e1106';
-$glyph-icon-datatable: '\e1107';
-$glyph-icon-dictionary: '\e1108';
-$glyph-icon-folder: '\e1109';
-$glyph-icon-image: '\e1110';
-$glyph-icon-layout: '\e1111';
-$glyph-icon-object: '\e1112';
-$glyph-icon-object-unknown: '\e1113';
-$glyph-icon-packet: '\e1114';
-$glyph-icon-page: '\e1115';
-$glyph-icon-plot-overlay: '\e1116';
-$glyph-icon-plot-stacked: '\e1117';
-$glyph-icon-session: '\e1118';
-$glyph-icon-tabular: '\e1119';
-$glyph-icon-tabular-lad: '\e1120';
-$glyph-icon-tabular-lad-set: '\e1121';
-$glyph-icon-tabular-realtime: '\e1122';
-$glyph-icon-tabular-scrolling: '\e1123';
-$glyph-icon-telemetry: '\e1124';
-$glyph-icon-telemetry-panel: '\e1125';
-$glyph-icon-timeline: '\e1126';
-$glyph-icon-timer: '\e1127';
-$glyph-icon-topic: '\e1128';
-$glyph-icon-box-with-dashed-lines: '\e1129';
-$glyph-icon-summary-widget: '\e1130';
-$glyph-icon-notebook: '\e1131';
-
-/************************** 16 PX CLASSES */
-
-.icon-alert-rect {  @include glyphBefore($glyph-icon-alert-rect); }
-.icon-alert-triangle {  @include glyphBefore($glyph-icon-alert-triangle); }
-.icon-arrow-down {  @include glyphBefore($glyph-icon-arrow-down); }
-.icon-arrow-left {  @include glyphBefore($glyph-icon-arrow-left); }
-.icon-arrow-right {  @include glyphBefore($glyph-icon-arrow-right); }
-.icon-arrow-double-up {  @include glyphBefore($glyph-icon-arrow-double-up); }
-.icon-arrow-tall-up {  @include glyphBefore($glyph-icon-arrow-tall-up); }
-.icon-arrow-tall-down {  @include glyphBefore($glyph-icon-arrow-tall-down); }
-.icon-arrow-double-down {  @include glyphBefore($glyph-icon-arrow-double-down); }
-.icon-arrow-up {  @include glyphBefore($glyph-icon-arrow-up); }
-.icon-asterisk {  @include glyphBefore($glyph-icon-asterisk); }
-.icon-bell {  @include glyphBefore($glyph-icon-bell); }
-.icon-box {  @include glyphBefore($glyph-icon-box); }
-.icon-box-with-arrow {  @include glyphBefore($glyph-icon-box-with-arrow); }
-.icon-check {  @include glyphBefore($glyph-icon-check); }
-.icon-connectivity {  @include glyphBefore($glyph-icon-connectivity); }
-.icon-database-in-brackets {  @include glyphBefore($glyph-icon-database-in-brackets); }
-.icon-eye-open {  @include glyphBefore($glyph-icon-eye-open); }
-.icon-gear {  @include glyphBefore($glyph-icon-gear); }
-.icon-hourglass {  @include glyphBefore($glyph-icon-hourglass); }
-.icon-info {  @include glyphBefore($glyph-icon-info); }
-.icon-link {  @include glyphBefore($glyph-icon-link); }
-.icon-lock {  @include glyphBefore($glyph-icon-lock); }
-.icon-minus {  @include glyphBefore($glyph-icon-minus); }
-.icon-people {  @include glyphBefore($glyph-icon-people); }
-.icon-person {  @include glyphBefore($glyph-icon-person); }
-.icon-plus {  @include glyphBefore($glyph-icon-plus); }
-.icon-trash {  @include glyphBefore($glyph-icon-trash); }
-.icon-x {  @include glyphBefore($glyph-icon-x); }
-.icon-brackets {  @include glyphBefore($glyph-icon-brackets); }
-.icon-crosshair {  @include glyphBefore($glyph-icon-crosshair); }
-.icon-grippy {  @include glyphBefore($glyph-icon-grippy); }
-.icon-arrow-right-equilateral {  @include glyphBefore($glyph-icon-arrow-right-equilateral); }
-.icon-arrows-out {  @include glyphBefore($glyph-icon-arrows-out); }
-.icon-arrows-right-left {  @include glyphBefore($glyph-icon-arrows-right-left); }
-.icon-arrows-up-down {  @include glyphBefore($glyph-icon-arrows-up-down); }
-.icon-bullet {  @include glyphBefore($glyph-icon-bullet); }
-.icon-calendar {  @include glyphBefore($glyph-icon-calendar); }
-.icon-chain-links {  @include glyphBefore($glyph-icon-chain-links); }
-.icon-collapse-pane-left {  @include glyphBefore($glyph-icon-collapse-pane-left); }
-.icon-collapse-pane-right {  @include glyphBefore($glyph-icon-collapse-pane-right); }
-.icon-download {  @include glyphBefore($glyph-icon-download); }
-.icon-duplicate {  @include glyphBefore($glyph-icon-duplicate); }
-.icon-folder-new {  @include glyphBefore($glyph-icon-folder-new); }
-.icon-fullscreen-collapse {  @include glyphBefore($glyph-icon-fullscreen-collapse); }
-.icon-fullscreen-expand {  @include glyphBefore($glyph-icon-fullscreen-expand); }
-.icon-layers {  @include glyphBefore($glyph-icon-layers); }
-.icon-line-horz {  @include glyphBefore($glyph-icon-line-horz); }
-.icon-magnify {  @include glyphBefore($glyph-icon-magnify); }
-.icon-magnify-in {  @include glyphBefore($glyph-icon-magnify-in); }
-.icon-magnify-out {  @include glyphBefore($glyph-icon-magnify-out); }
-.icon-menu-hamburger {  @include glyphBefore($glyph-icon-menu-hamburger); }
-.icon-move {  @include glyphBefore($glyph-icon-move); }
-.icon-new-window {  @include glyphBefore($glyph-icon-new-window); }
-.icon-paint-bucket {  @include glyphBefore($glyph-icon-paint-bucket); }
-.icon-pause {  @include glyphBefore($glyph-icon-pause); }
-.icon-pencil {  @include glyphBefore($glyph-icon-pencil); }
-.icon-play {  @include glyphBefore($glyph-icon-play); }
-.icon-plot-resource {  @include glyphBefore($glyph-icon-plot-resource); }
-.icon-pointer-left {  @include glyphBefore($glyph-icon-pointer-left); }
-.icon-pointer-right {  @include glyphBefore($glyph-icon-pointer-right); }
-.icon-refresh {  @include glyphBefore($glyph-icon-refresh); }
-.icon-save {  @include glyphBefore($glyph-icon-save); }
-.icon-sine {  @include glyphBefore($glyph-icon-sine); }
-.icon-T {  @include glyphBefore($glyph-icon-T); }
-.icon-thumbs-strip {  @include glyphBefore($glyph-icon-thumbs-strip); }
-.icon-two-parts-both {  @include glyphBefore($glyph-icon-two-parts-both); }
-.icon-two-parts-one-only {  @include glyphBefore($glyph-icon-two-parts-one-only); }
-.icon-resync {  @include glyphBefore($glyph-icon-resync); }
-.icon-reset {  @include glyphBefore($glyph-icon-reset); }
-.icon-x-in-circle {  @include glyphBefore($glyph-icon-x-in-circle); }
-.icon-brightness {  @include glyphBefore($glyph-icon-brightness); }
-.icon-contrast {  @include glyphBefore($glyph-icon-contrast); }
-.icon-expand {  @include glyphBefore($glyph-icon-expand); }
-.icon-list-view {  @include glyphBefore($glyph-icon-list-view); }
-.icon-grid-snap-to {  @include glyphBefore($glyph-icon-grid-snap-to); }
-.icon-grid-snap-no {  @include glyphBefore($glyph-icon-grid-snap-no); }
-.icon-frame-show {  @include glyphBefore($glyph-icon-frame-show); }
-.icon-frame-hide {  @include glyphBefore($glyph-icon-frame-hide); }
-.icon-import {  @include glyphBefore($glyph-icon-import); }
-.icon-export {  @include glyphBefore($glyph-icon-export); }
-.icon-activity {  @include glyphBefore($glyph-icon-activity); }
-.icon-activity-mode {  @include glyphBefore($glyph-icon-activity-mode); }
-.icon-autoflow-tabular {  @include glyphBefore($glyph-icon-autoflow-tabular); }
-.icon-clock {  @include glyphBefore($glyph-icon-clock); }
-.icon-database {  @include glyphBefore($glyph-icon-database); }
-.icon-database-query {  @include glyphBefore($glyph-icon-database-query); }
-.icon-dataset {  @include glyphBefore($glyph-icon-dataset); }
-.icon-datatable {  @include glyphBefore($glyph-icon-datatable); }
-.icon-dictionary {  @include glyphBefore($glyph-icon-dictionary); }
-.icon-folder {  @include glyphBefore($glyph-icon-folder); }
-.icon-image {  @include glyphBefore($glyph-icon-image); }
-.icon-layout {  @include glyphBefore($glyph-icon-layout); }
-.icon-object {  @include glyphBefore($glyph-icon-object); }
-.icon-object-unknown {  @include glyphBefore($glyph-icon-object-unknown); }
-.icon-packet {  @include glyphBefore($glyph-icon-packet); }
-.icon-page {  @include glyphBefore($glyph-icon-page); }
-.icon-plot-overlay {  @include glyphBefore($glyph-icon-plot-overlay); }
-.icon-plot-stacked {  @include glyphBefore($glyph-icon-plot-stacked); }
-.icon-session {  @include glyphBefore($glyph-icon-session); }
-.icon-tabular {  @include glyphBefore($glyph-icon-tabular); }
-.icon-tabular-lad {  @include glyphBefore($glyph-icon-tabular-lad); }
-.icon-tabular-lad-set {  @include glyphBefore($glyph-icon-tabular-lad-set); }
-.icon-tabular-realtime {  @include glyphBefore($glyph-icon-tabular-realtime); }
-.icon-tabular-scrolling {  @include glyphBefore($glyph-icon-tabular-scrolling); }
-.icon-telemetry {  @include glyphBefore($glyph-icon-telemetry); }
-.icon-telemetry-panel {  @include glyphBefore($glyph-icon-telemetry-panel); }
-.icon-timeline {  @include glyphBefore($glyph-icon-timeline); }
-.icon-timer {  @include glyphBefore($glyph-icon-timer); }
-.icon-topic {  @include glyphBefore($glyph-icon-topic); }
-.icon-box-with-dashed-lines {  @include glyphBefore($glyph-icon-box-with-dashed-lines); }
-.icon-summary-widget {  @include glyphBefore($glyph-icon-summary-widget); }
-.icon-notebook {  @include glyphBefore($glyph-icon-notebook); }
-
-/************************** 12 PX CLASSES */
-.icon-crosshair-12px {  @include glyphBefore($glyph-icon-crosshair,'symbolsfont-12px'); }
-.icon-folder-12px {  @include glyphBefore($glyph-icon-folder,'symbolsfont-12px'); }
-.icon-list-view-12px {  @include glyphBefore($glyph-icon-list-view,'symbolsfont-12px'); }
-.icon-grippy-12px {  @include glyphBefore($glyph-icon-grippy,'symbolsfont-12px'); }
diff --git a/src/styles/_icons.scss b/src/styles/_icons.scss
deleted file mode 100644
index 9c7a3d574b..0000000000
--- a/src/styles/_icons.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.triangle {
-	$myColor: $colorKey;
-	$mySize: 10px;
-	@include triangle-right($mySize, $myColor);
-	&.triangle-down {
-		@include triangle-down($mySize, $myColor);
-	}
-}
-
-.ui-symbol {
-    font-family: 'symbolsfont';
-    -webkit-font-smoothing: antialiased;
-}
-
-.ui-symbol.icon {
-    color: $colorKey;
-    font-size: inherit;
-    &.alert {
-        color: $colorAlert;
-        &:hover {
-            color: lighten($colorAlert, $ltGamma);
-        }
-    }
-}
-
-
-.t-alert-unsynced {
-    @extend .icon-alert-triangle;
-    color: $colorPausedBg;
-}
-
-.bar .ui-symbol {
-	display: inline-block;
-}
-
-.invoke-menu {
-	text-shadow: none;
-	display: inline-block;
-}
-
-.s-menu-button .invoke-menu,
-.icon.major .invoke-menu {
-	margin-left: $interiorMarginSm;
-}
-
-.menu .type-icon,
-.tree-item .type-icon,
-.super-menu.menu .menu-item-a:before {
-	position: absolute;
-}
-
-.t-item-icon {
-	// Used in grid-item.html, tree-item, inspector location
-	@extend .ui-symbol;
-    @extend .icon;
-    line-height: inherit;
-    position: relative;
-    &.l-icon-link {
-        &:after {
-            color: $colorIconLink;
-            content: $glyph-icon-link;
-            height: auto; width: auto;
-            position: absolute;
-            left: 0; top: 0; right: 0; bottom: 20%;
-            transform-origin: bottom left;
-            transform: scale(0.3);
-            z-index: 2;
-        }
-    }
-}
diff --git a/src/styles/_iframe.scss b/src/styles/_iframe.scss
deleted file mode 100644
index b50ed31ac6..0000000000
--- a/src/styles/_iframe.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 */
-
-.l-iframe {
-    iframe {
-        display: block;
-        height: 100%;
-        width: 100%;
-        border: none;
-    }
-}
diff --git a/src/styles/_inspector.scss b/src/styles/_inspector.scss
deleted file mode 100644
index 2fbf24ca50..0000000000
--- a/src/styles/_inspector.scss
+++ /dev/null
@@ -1,191 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-/* New grid layout for the Inspector pane */
-.l-inspect {
-    // Overall layout
-    @extend .abs;
-    background: $colorInspectorBg;
-    color: $colorInspectorFg;
-    line-height: 140%;
-
-    .pane-header {
-        color: pushBack($colorInspectorFg, 20%);
-        font-size: 0.8rem;
-    }
-
-    .split-layout {
-        .split-pane-component.pane {
-            &.bottom {
-                height: 30%;
-                min-height: 20%;
-                max-height: 80%;
-            }
-        }
-    }
-
-    .l-inspector-part {
-        display: contents;
-    }
-
-    .tree {
-        .grid-properties {
-            margin-left: $treeVCW + $interiorMarginLg;
-        }
-    }
-
-    .grid-properties {
-        .label {
-            color: $colorInspectorPropName;
-        }
-        .value {
-            color: $colorInspectorPropVal;
-            word-break: break-all;
-            &:first-child {
-                // If there is no preceding .label element, make value span columns
-                @extend .grid-two-column-span-cols;
-            }
-        }
-    }
-
-    .inspector-location {
-        display: inline-block;
-    }
-
-    h2 {
-        // Headers for .l-inspector-part elements
-        @extend .grid-two-column-span-cols;
-        border-radius: $controlCr;
-        background-color: $colorInspectorSectionHeaderBg;
-        color: $colorInspectorSectionHeaderFg;
-        font-size: 0.8rem;
-        font-weight: normal;
-        margin: $interiorMarginLg 0 $interiorMarginSm 0;
-        padding: floor($formTBPad * .75) $formLRPad;
-        text-transform: uppercase;
-        &.first {
-            margin-top: 0;
-        }
-    }
-
-    .inspector-location {
-        .location-item {
-            $h: 1.2em;
-            box-sizing: border-box;
-            cursor: pointer;
-            display: inline-block;
-            line-height: $h;
-            position: relative;
-            padding: 2px 4px;
-            .t-object-label {
-                .t-item-icon {
-                    height: $h;
-                    width: 0.7rem;
-                }
-            }
-            &:hover {
-                background: $colorItemTreeHoverBg;
-                color: $colorItemTreeHoverFg;
-                .icon {
-                    color: $colorItemTreeIconHover;
-                }
-            }
-        }
-        &:not(.last) .t-object-label .t-title-label:after {
-            color: pushBack($colorInspectorFg, 15%);
-            content: '\e904';
-            display: inline-block;
-            font-family: symbolsfont;
-            font-size: 8px;
-            font-style: normal !important;
-            line-height: inherit;
-            margin-left: $interiorMarginSm;
-            width: 4px;
-        }
-    }
-
-    // Elements pool
-    .holder-elements {
-        .current-elements {
-            position: relative;
-            .tree-item {
-                .t-object-label {
-                    // Elements pool is a flat list, so don't indent items.
-                    font-size: 0.75rem;
-                    left: 0;
-                }
-            }
-        }
-    }
-}
-
-/* Styles for the Inspector pane */
-
-.l-inspect,
-.l-inspect table tr td {
-    font-size: 0.75rem;
-}
-
-.l-inspect {
-    .flex-elem.holder:not(:last-child) {
-        margin-bottom: $interiorMargin;
-    }
-
-    .holder-elements {
-        .current-elements {
-            position: relative;
-            .tree-item {
-                .t-object-label {
-                    // Elements pool is a flat list, so don't indent items.
-                    font-size: 0.75rem;
-                    left: 0;
-                }
-            }
-        }
-    }
-}
-
-.l-inspect {
-    .splitter-inspect-panel,
-    .split-pane-component.pane.bottom {
-        @include trans-prop-nice(opacity, 250ms); // Not working as desired currently; entire inspector seems to be destroyed and recreated when switching into and out of edit mode.
-        opacity: 0;
-        pointer-events: none;
-    }
-}
-
-mct-representation:not(.s-status-editing) .l-inspect {
-    .split-pane-component.pane.top {
-        bottom: 0 !important;
-    }
-}
-
-.s-status-editing .l-inspect {
-    .location-item {
-        pointer-events: none;
-    }
-    .splitter-inspect-panel,
-    .split-pane-component.pane.bottom {
-        opacity: 1;
-        pointer-events: inherit;
-    }
-}
diff --git a/src/styles/_logo-and-bg.scss b/src/styles/_logo-and-bg.scss
deleted file mode 100644
index 48473528b5..0000000000
--- a/src/styles/_logo-and-bg.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.l-splash,
-.l-splash:before,
-.l-splash:after {
-    background-position: center;
-    background-repeat: no-repeat;
-    position: absolute;
-}
-
-.l-splash {
-    background-size: cover;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    &:before,
-    &:after {
-        background-size: contain;
-        content: '';
-    }
-
-    &:before {
-        // NASA logo, dude
-        $w: 5%;
-        $m: 10px;
-        background-image: url('../images/logo-nasa.svg');
-        top: $m;
-        right: auto;
-        bottom: auto;
-        left: $m;
-        height: auto;
-        width: $w * 2;
-        padding-bottom: $w;
-        padding-top: $w;
-    }
-
-    &:after {
-        // App logo
-        top: 0;
-        right: 15%;
-        bottom: 0;
-        left: 15%;
-    }
-}
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
deleted file mode 100644
index 7c6d6b94b0..0000000000
--- a/src/styles/_main.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 "effects";
-@import "glyphs";
-@import "animations";
-@import "global";
-@import "archetypes";
-@import "about";
-@import "text";
-@import "icons";
-@import "status";
-@import "data-status";
-@import "helpers/bubbles";
-@import "helpers/splitter";
-@import "helpers/wait-spinner";
-@import "inspector";
-
-/********************************* CONTROLS */
-@import "controls/breadcrumb";
-@import "controls/buttons";
-@import "controls/palette";
-@import "controls/controls";
-@import "controls/lists";
-@import "controls/menus";
-@import "controls/messages";
-@import "controls/indicators";
-@import "mobile/controls/menus";
-
-/********************************* FORMS */
-@import "forms/elems";
-@import "forms/channel-selector";
-@import "forms/datetime";
-@import "forms/validation";
-@import "forms/filter";
-
-/********************************* USER ENVIRON */
-@import "user-environ/layout";
-@import "mobile/layout";
-@import "edit/editor";
-@import "search/search";
-@import "mobile/search/search";
-@import "overlay/overlay";
-@import "tree/tree";
-@import "object-label";
-@import "mobile/tree";
-@import "user-environ/frame";
-@import "user-environ/top-bar";
-@import "user-environ/tool-bar";
-@import "user-environ/selecting";
-
-/********************************* VIEWS */
-@import "lists/tabular";
-@import "plots/plots-main";
-@import "plots/legend";
-@import "iframe";
-@import "views";
-@import "items/item";
-@import "mobile/item";
-@import "table";
-@import "notebook/notebook";
-
-/********************************* TO BE MOVED */
-@import "autoflow";
-@import "features/imagery";
-@import "features/time-display";
-@import "widgets";
-
-/********************************* APP STARTUP */
-@import "app-start";
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
deleted file mode 100644
index 89e7050088..0000000000
--- a/src/styles/_mixins.scss
+++ /dev/null
@@ -1,447 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 absPosDefault($offset: 0px, $overflow: hidden) {
-    overflow: $overflow;
-    position: absolute;
-    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;
-}
-
-@mixin trans-prop-nice($props, $dur: 500ms, $delay: 0) {
-    // Multiple $props must be in parans like this: (left, right)
-    @if $dur == 0 {
-        @include transition-property(none);
-    } @else {
-        @include transition-property($props);
-        @include transition-duration($dur);
-        @include transition-timing-function(ease-in-out);
-        @include transition-delay($delay);
-    }
-}
-
-@mixin trans-prop-nice-fade($dur: 500ms, $delay: 0) {
-    @if $dur == 0 {
-        @include transition-property(none);
-    } @else {
-        @include transition-property(opacity, background-color, border-color, color);
-        @include transition-duration($dur);
-        @include transition-timing-function(ease-in-out);
-        @include transition-delay($delay);
-    }
-}
-
-@mixin trans-prop-nice-resize($t: 0.5s, $tf: ease-in-out) {
-    @include transition-property(height, width, top, right, bottom, left, opacity);
-    @include transition-duration($t);
-    @include transition-timing-function($tf);
-}
-
-@mixin trans-prop-nice-resize-h($dur: 500ms, $delay: 0) {
-    @include transition-property(height, bottom, top);
-    @include transition-duration($dur);
-    @include transition-timing-function(ease-in-out);
-    @include transition-delay($delay);
-}
-
-@mixin trans-prop-nice-resize-w($dur: 500ms, $delay: 0) {
-    @include transition-property(width, left, right);
-    @include transition-duration($dur);
-    @include transition-timing-function(ease-in-out);
-    @include transition-delay($delay);
-}
-
-@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;
-}
-
-@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;
-}
-
-@mixin triangle($dir: "left", $size: 5px, $ratio: 1, $color: red) {
-    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;
-}
-
-@mixin bgStripes($c: yellow, $a: 0.1, $bgsize: 5px, $angle: 90deg) {
-    @include background-image(linear-gradient($angle,
-        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: $bgsize $bgsize;
-}
-
-@mixin bgVertStripes($c: yellow, $a: 0.1, $d: 40px) {
-    @include background-image(linear-gradient(-90deg,
-        rgba($c, $a) 0%, rgba($c, $a) 50%,
-        transparent 50%, transparent 100%
-    ));
-    background-repeat: repeat;
-    background-size: $d $d;
-}
-
-@mixin bgVertFuzzyStripes($c: yellow, $a: 0.1, $d: 40px) {
-    @include background-image(linear-gradient(-90deg,
-        rgba($c, $a) 0%, transparent 50%,
-        transparent 50%, rgba($c, $a) 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;
-    }
-
-    @include background-image(linear-gradient($deg,
-        $c 1px, transparent 1px,
-        transparent 100%
-    ));
-    background-repeat: $repeatDir;
-}
-
-@mixin sliderTrack($bg: $scrollbarTrackColorBg) {
-    border-radius: 2px;
-    box-sizing: border-box;
-    @include boxIncised(0.7);
-    background-color: $bg;
-}
-
-@mixin controlGrippy($b, $direction: horizontal, $w: 1px, $style: dotted) {
-    content: '';
-    display: block;
-    pointer-events: none;
-    position: absolute;
-    z-index: 2;
-
-    @if $direction == "horizontal" {
-        border-top: $w $style darken($b, 15%);
-        top: 2px;
-        left: 5px;
-        right: 5px;
-        height: 1px;
-
-    } @else if $direction == "vertical" {
-        border-left: $w $style darken($b, 15%);
-        left: 2px;
-        bottom: 5px;
-        top: 5px;
-        width: 1px;
-    }
-}
-
-@mixin boxIncised($sVal: 0.6, $inset: 5px) {
-    box-shadow: inset rgba(black, $sVal) 0 1px $inset;
-}
-
-@mixin boxOutline($c: lighten($colorBodyBg, 20%)) {
-    border: 1px solid $c;
-}
-
-@mixin boxShdw($sVal: rgba(black, 0.4) 0 0 3px) {
-	@if $sVal != 'none' {
-		box-shadow: $sVal;
-	}
-}
-
-@mixin boxShdwSubtle($sVal: 0.2) {
-	@if $sVal != 'none' {
-		box-shadow: rgba(black, $sVal) 0 1px 2px;
-	}
-}
-
-@mixin boxShdwLarge($sVal: 0.7) {
-	@if $sVal != 'none' {
-		box-shadow: rgba(black, $sVal) 0 3px 10px;
-	}
-}
-
-@mixin outerGlow($color: #fff, $sVal: 0.3) {
-    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%));
-}
-
-@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%));
-}
-
-@mixin txtShdw($sVal) {
-	//@if $sVal != 'none' {
-		text-shadow: $sVal;
-	//}
-}
-
-@mixin txtShdwSubtle($sVal: 0.1) {
-	@if $sVal != 'none' {
-	    text-shadow: rgba(black, $sVal) 0 1px 2px;
-	}
-}
-
-@mixin txtShdwLarge($sVal: 0.7) {
-    text-shadow: rgba(black, $sVal) 0 3px 7px;
-}
-
-@function percentToDecimal($p) {
-	@return $p / 100%;
-}
-
-@function decimalToPercent($d) {
-	@return percentage($d);
-}
-
-@function splitterHandleInset($splitterD: 21px, $splitterHandleD: 1px) {
-    // Space to either side of the handle
-    @return ($splitterD - $splitterHandleD) / 2;
-}
-
-/*********************************************** CONTROLS, FORM ELEMENTS */
-
-@mixin containerBase($bg: $colorBodyBg, $fg: $colorBodyFg) {
-	background-color: $bg;
-	//border-radius: $controlCr;
-	box-sizing: border-box;
-	color: $fg;
-}
-
-@mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
-	@include user-select(none);
-    border-radius: $controlCr;
-    color: $fg;
-	.icon,
-    &:before {
-		color: $ic;
-	}
-  @if $bgHov != none {
-      &:not([disabled="true"]):not(.disabled):hover {
-          background: $bgHov;
-          color: $fgHov;
-          >.icon,
-          &:before {
-              color: $icHov;
-          }
-      }
-  }
-}
-
-@mixin btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
-    @include containerSubtle($bg, $fg);
-    @include btnBase($bgHov: $bgHov, $fg: $fg, $fgHov: $fgHov, $ic: $ic, $icHov: $icHov);
-    text-shadow: $shdwItemText;
-}
-
-@mixin input-base() {
-	@include appearance(none);
-	border-radius: $controlCr;
-	box-sizing: border-box;
-    &:focus { outline: 0; }
-	&.error {
-		background-color: $colorFormFieldErrorBg;
-        color: $colorFormFieldErrorFg;
-	}
-}
-
-@mixin s-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
-    @include input-base();
-    background: $bg;
-    box-shadow: inset $shdw;
-    color: $fg;
-}
-
-@mixin nice-input($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.5) 0 0px 2px) {
-    @include s-input($bg, $fg, $shdw);
-    border: none;
-    outline: none;
-}
-
-@mixin contextArrow() {
-	text-shadow: none;
-	content: $glyph-icon-arrow-down;
-	display: inline-block;
-	font-family: 'symbolsfont';
-	margin-left: $interiorMarginSm;
-}
-
-@mixin nice-textarea($bg: $colorBodyBg, $fg: $colorBodyFg) {
-    @include nice-input($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%);
-}
-
-@mixin menuUlReset() {
-    margin: 0;
-    padding: 0;
-    li {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-    }
-}
-
-@mixin cursorGrab() {
-    cursor: grab;
-    cursor: -webkit-grab;
-    &:active {
-        cursor: grabbing;
-        cursor: -webkit-grabbing;
-    }
-}
-
-@mixin verticalCenter {
-    /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
-    //position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-@mixin verticalCenterBlock($holderH, $itemH) {
-    top: floor(($holderH - $itemH) / 2);
-    bottom: auto;
-    height: $itemH;
-}
-
-@mixin ellipsize() {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-@mixin reverseEllipsis() {
-    direction: rtl;
-    unicode-bidi:bidi-override;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-@mixin scrollH($showBar: auto) {
-    overflow-x: $showBar;
-    overflow-y: hidden;
-}
-
-@mixin scrollV($showBar: auto) {
-    overflow-x: hidden;
-    overflow-y: $showBar;
-}
-
-@mixin test($c: #ffcc00, $a: 0.2) {
-    background-color: rgba($c, $a) !important;
-}
-
-@mixin tmpBorder($c: #ffcc00, $a: 0.75) {
-    box-sizing: border-box;
-    border: 1px dotted rgba($c, $a);
-}
-
-@mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) {
-    &:after {
-        box-sizing: border-box;
-        @include bgDiagonalStripes($c, $a);
-        color: rgba(white, 0.3);
-        font-style: italic;
-        content: "Test Object";
-        display: block;
-        padding: 20px;
-        position: relative;
-        width: $w;
-        height: $h;
-        transform: scaleX(1) scaleY(1) scaleZ(1);
-        transform-origin: 50% 50% 0;
-    }
-}
-
-@mixin s-stale($a: 0.5) {
-    color: rgba($colorTelemFresh, $a) !important;
-    font-style: italic;
-}
diff --git a/src/styles/_object-label.scss b/src/styles/_object-label.scss
deleted file mode 100644
index 0c55ec0d0a..0000000000
--- a/src/styles/_object-label.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-// mct-representation surrounding an object-label key="'label'"
-.rep-object-label {
-    flex-direction: row;
-    flex: 1 1 auto;
-    height: inherit;
-    line-height: inherit;
-    min-width: 0;
-}
-
-.t-object-label {
-    .t-item-icon {
-        margin-right: $interiorMargin;
-    }
-}
-
-.s-status-pending {
-    > .t-object-label {
-        .t-item-icon {
-            &:after {
-                @include spinner($waitSpinnerTreeBorderW,  $colorLoadingFg);
-                content: "";
-                height: $waitSpinnerTreeD; width: $waitSpinnerTreeD;
-            }
-            .t-item-icon-glyph,
-            &:before {
-                display: none;
-            }
-        }
-        .t-title-label {
-            font-style: italic;
-            opacity: 0.6;
-        }
-    }
-}
-
-.selected {
-    .s-status-pending .t-object-label .t-item-icon:after {
-        border-color: rgba($colorItemTreeSelectedFg, 0.25) !important;
-        border-top-color: rgba($colorItemTreeSelectedFg, 1.0) !important;
-    }
-}
diff --git a/src/styles/_openmct.scss b/src/styles/_openmct.scss
deleted file mode 100644
index 8db0f25719..0000000000
--- a/src/styles/_openmct.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.app-logo {
-    background: url('../images/logo-app.svg') no-repeat center center;
-}
-
-.l-splash-holder {
-    background: #333;
-    .s-splash {
-        border-radius: 10px;
-        box-shadow: 0 5px 50px 25px rgba(255, 255, 255, 0.1);
-    }
-}
-
-.s-splash {
-    background-image: url('../images/bg-splash.jpg');
-    &:after {
-        background-image: url('../images/logo-app-shdw.svg');
-    }
-}
diff --git a/src/styles/_startup-base.scss b/src/styles/_startup-base.scss
deleted file mode 100644
index 8395000f30..0000000000
--- a/src/styles/_startup-base.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-@import "logo-and-bg";
-
-@mixin splashElem($m: 20%) {
-    top: $m; right: $m * 1.25; bottom: $m; left: $m * 1.25;
-}
-
-body, html {
-    height: 100%;
-    width: 100%;
-}
-
-.l-splash-holder {
-    // Main outer holder for splash.
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 10000;
-    opacity: 1;
-    .l-splash {
-        // The splash element.
-        @include splashElem();
-    }
-}
-
-.user-environ .holder-all {
-    // Gets shown again by main CSS, once loaded
-    opacity: 0;
-    pointer-events: none;
-}
-
-@media only screen and (max-device-width: 767px) {
-    .l-splash-holder .l-splash {
-        @include splashElem(0);
-        border-radius: 0;
-        box-shadow: none;
-    }
-}
-
-@media only screen and (max-device-width: 767px) and (orientation: portrait) {
-    .l-splash-holder .l-splash {
-        &:before {
-            // Make the NASA logo a bit bigger when we're in portrait mode.
-            $w: 12%;
-            width: $w * 2;
-            padding-bottom: $w;
-            padding-top: $w;
-        }
-    }
-}
diff --git a/src/styles/_status.scss b/src/styles/_status.scss
deleted file mode 100644
index 85b22da691..0000000000
--- a/src/styles/_status.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-/*************************************************** MIXINS */
-@mixin elementStatusColors($c) {
-    // Sets bg and icon colors for elements
-    background: rgba($c, 0.5) !important;
-    &:before {
-        color: $c !important;
-    }
-}
-
-@mixin indicatorStatusColors($c) {
-    &:before, .count {
-        color: $c;
-    }
-}
-
-/*************************************************** GENERAL */
-.s-limit-upr,
-.s-limit-lwr,
-[class*='s-limit-icon'],
-[class*='s-status-icon'] {
-    &:before {
-        content:'';
-        display: inline-block;
-        font-family: symbolsfont;
-        font-size: 0.8em;
-    }
-}
-
-/*************************************************** LIMITS */
-[class*='s-limit'] {
-    &[class*='icon-'] {
-        &:before {
-            margin-right: $interiorMargin;
-        }
-    }
-}
-
-.s-limit-yellow, .s-limit-icon-yellow {
-    @include elementStatusColors($colorWarningLo);
-}
-
-.s-limit-red, .s-limit-icon-red {
-    @include elementStatusColors($colorWarningHi);
-}
-
-.s-limit {
-    &-upr,
-    &-lwr {
-        &:before {
-            margin-right: $interiorMargin;
-        }
-    }
-
-    &-upr:before { content: $glyph-icon-arrow-double-up; }
-    &-lwr:before { content: $glyph-icon-arrow-double-down; }
-
-    &-icon-yellow,
-    &-icon-red {
-        &:before {
-            content: $glyph-icon-alert-triangle;
-        }
-    }
-}
-
-/*************************************************** STATUS */
-[class*='s-status'] {
-    &[class*='icon-'] {
-        &:before {
-            margin-right: $interiorMargin;
-        }
-    }
-}
-
-.s-status-warning-hi, .s-status-icon-warning-hi {  @include elementStatusColors($colorWarningHi); }
-.s-status-warning-lo, .s-status-icon-warning-lo {  @include elementStatusColors($colorWarningLo); }
-.s-status-diagnostic, .s-status-icon-diagnostic {  @include elementStatusColors($colorDiagnostic); }
-.s-status-info, .s-status-icon-info {  @include elementStatusColors($colorInfo); }
-.s-status-ok, .s-status-icon-ok {  @include elementStatusColors($colorOk); }
-
-.s-status-icon-warning-hi:before { content: $glyph-icon-alert-triangle; }
-.s-status-icon-warning-lo:before { content: $glyph-icon-alert-rect; }
-.s-status-icon-diagnostic:before { content: $glyph-icon-eye-open; }
-.s-status-icon-info:before { content: $glyph-icon-info; }
-.s-status-icon-ok:before { content: $glyph-icon-check; }
-
-/*************************************************** INDICATOR COLORING */
-.ls-indicator {
-    &.s-status-info {
-        @include indicatorStatusColors($colorInfo);
-    }
-
-    &.s-status-disabled {
-        @include indicatorStatusColors($colorIndicatorDisabled);
-    }
-
-    &.s-status-available {
-        @include indicatorStatusColors($colorIndicatorAvailable);
-    }
-
-    &.s-status-on,
-    &.s-status-enabled {
-        @include indicatorStatusColors($colorIndicatorOn);
-    }
-
-    &.s-status-off {
-        @include indicatorStatusColors($colorIndicatorOff);
-    }
-
-    &.s-status-caution,
-    &.s-status-warning,
-    &.s-status-alert {
-        @include indicatorStatusColors($colorStatusAlert);
-    }
-
-    &.s-status-error {
-        @include indicatorStatusColors($colorStatusError);
-    }
-}
diff --git a/src/styles/_table.scss b/src/styles/_table.scss
deleted file mode 100644
index 7b2deccdc0..0000000000
--- a/src/styles/_table.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-.mct-sizing-table {
-    z-index: -1;
-    visibility: hidden;
-    position: absolute !important;
-
-    //Add some padding to allow for decorations such as limits indicator
-    td {
-        padding-right: 15px;
-        padding-left: 10px;
-        white-space: nowrap;
-    }
-}
-
-.mct-table {
-    tr {
-        display: flex; // flex-flow defaults to row nowrap (which is what we want) so no need to define
-        align-items: stretch;
-    }
-
-    td, th {
-        box-sizing: border-box;
-        display: block;
-        flex: 1 0 auto;
-        white-space: nowrap;
-    }
-
-    thead {
-        display: block;
-    }
-
-    tbody {
-        tr {
-            position: absolute;
-            height: 18px; // Needed when a row has empty values in its cells
-        }
-
-        td {
-            overflow: hidden;
-            box-sizing: border-box;
-            display: inline-block;
-            text-overflow: ellipsis;
-        }
-    }
-}
-
-.l-telemetry-table {
-    .l-control-bar {
-        margin-bottom: 3px;
-    }
-}
-
-.mct-table-scroll-forcer {
-    // Force horz scroll when needed; width set via JS
-    font-size: 0;
-    height: 1px; // Height 0 won't force scroll properly
-    position: relative;
-}
diff --git a/src/styles/_text.scss b/src/styles/_text.scss
deleted file mode 100644
index 5b2013ff81..0000000000
--- a/src/styles/_text.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 extended text copy
-
-.abs.l-standalone {
-	$d: 20%;
-	padding: $d/4 $d;
-}
-
-.s-text {
-	font-size: 0.8em;
-	ol, ul {
-		list-style: square;
-		margin-left: 1.5em;
-		li {
-
-		}
-	}
-
-	h1, h2, h3 {
-        font-weight: 200 !important;
-    }
-
-    table {
-        td { font-size: inherit; }
-        tr.header {
-            background-color: rgba($colorBodyFg, 0.2);
-        }
-    }
-}
diff --git a/src/styles/_views.scss b/src/styles/_views.scss
deleted file mode 100644
index 0aa41468fa..0000000000
--- a/src/styles/_views.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/* Styles for sub-dividing views generically */
-.l-control-bar {
-    // Element that can be placed above l-view-section, holds controls, buttons, etc.
-    height: $controlBarH;
-}
-
-.l-view-section {
-	@include absPosDefault($overflow: auto);
-	h2 {
-		color: #fff;
-		margin-bottom: $interiorMargin;
-	}
-	&.fixed {
-		font-size: 0.8em;
-	}
-	.controls,
-	label,
-	.inline-block {
-		display: inline-block;
-	}
-}
-
-.has-control-bar {
-    .l-view-section {
-        top: $controlBarH + $interiorMargin;
-    }
-}
-
-
-.child-frame {
-    .has-control-bar {
-        $btnExportH: $btnFrameH;
-        .l-control-bar,
-        .c-control-bar {
-            display: none;
-        }
-        .l-view-section {
-            top: 0;
-        }
-    }
-}
diff --git a/src/styles/_widgets.scss b/src/styles/_widgets.scss
deleted file mode 100644
index aebc97c5c0..0000000000
--- a/src/styles/_widgets.scss
+++ /dev/null
@@ -1,282 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-/************************************************************* WIDGET OBJECT */
-@mixin cSummaryWidget() {
-    @include boxShdw($shdwBtns);
-    border-radius: $basicCr;
-    border-style: solid;
-    border-width: 1px;
-    cursor: default;
-    &[href] {
-        cursor: pointer;
-    }
-
-    &__label {
-        &:before {
-            // Widget icon
-            font-size: 0.9em;
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-}
-
-.l-summary-widget {
-    // Widget layout classes here
-    @include ellipsize();
-    display: inline-block;
-    text-align: center;
-    .widget-label:before {
-        // Widget icon
-        font-size: 0.9em;
-        margin-right: $interiorMarginSm;
-    }
-}
-
-.c-summary-widget {
-    @include cSummaryWidget();
-    padding: $interiorMarginLg $interiorMarginLg * 2;
-}
-
-.widget-edit-holder {
-    // Hide edit area when in browse mode
-    display: none;
-}
-
-.widget-rule-header {
-    @extend .l-flex-row;
-    align-items: center;
-    margin-bottom: $interiorMargin;
-    > .flex-elem {
-        &:not(:first-child) {
-            margin-left: $interiorMargin;
-        }
-    }
-}
-
-.widget-rules-wrapper,
-.widget-rule-content,
-.w-widget-test-data-content {
-    @include trans-prop-nice($props: (height, min-height, opacity), $dur: 250ms);
-    min-height: 0;
-    height: 0;
-    opacity: 0;
-    overflow: hidden;
-    pointer-events: none;
-}
-
-.widget-rules-wrapper {
-    flex: 1 1 auto !important;
-}
-
-.widget-rule-content.expanded {
-    overflow: visible !important;
-    min-height: 50px;
-    height: auto;
-    opacity: 1;
-    pointer-events: inherit;
-}
-
-.w-widget-test-data-content {
-    .l-enable {
-        padding: $interiorMargin 0;
-    }
-
-    .w-widget-test-data-items {
-        max-height: 20vh;
-        overflow-y: scroll !important;
-        padding-right: $interiorMargin;
-    }
-}
-
-.l-widget-thumb-wrapper,
-.l-compact-form label {
-    $ruleLabelW: 40%;
-    $ruleLabelMaxW: 150px;
-    display: flex;
-    max-width: $ruleLabelMaxW;
-    width: $ruleLabelW;
-}
-
-.t-message-widget-no-data {
-    display: none;
-}
-
-/********************************************************** EDITING A WIDGET */
-.s-status-editing > mct-view > .w-summary-widget {
-    // Classes for editor layout while editing a widget
-    // This selector is ugly and brittle, but needed to prevent interface from showing when widget is in a layout
-    // being edited.
-    @include absPosDefault();
-    @extend .l-flex-col;
-
-    > .l-summary-widget {
-        // Main view of the summary widget
-        // Give some airspace and center the widget in the area
-        margin: 30px auto;
-    }
-
-    .widget-edit-holder {
-        display: flex; // Overrides `display: none` during Browse mode
-        .flex-accordion-holder {
-            // Needed because otherwise accordion elements "creep" when contents expand and contract
-            display: block !important;
-        }
-        &.expanded-widget-test-data {
-            .w-widget-test-data-content {
-                min-height: 50px;
-                height: auto;
-                opacity: 1;
-                pointer-events: inherit;
-            }
-            &:not(.expanded-widget-rules) {
-                // Test data is expanded and rules are collapsed
-                // Make text data take up all the vertical space
-                .flex-accordion-holder { display: flex; }
-                .widget-test-data {
-                    flex-grow: 999999;
-                }
-                .w-widget-test-data-items {
-                    max-height: inherit;
-                }
-            }
-        }
-        &.expanded-widget-rules {
-            .widget-rules-wrapper {
-                min-height: 50px;
-                height: auto;
-                opacity: 1;
-                pointer-events: inherit;
-            }
-        }
-    }
-
-    &.s-status-no-data {
-        .widget-edit-holder {
-            opacity: 0.3;
-            pointer-events: none;
-        }
-        .t-message-widget-no-data {
-            display: flex;
-        }
-    }
-
-
-    .l-compact-form {
-        // Overrides on .l-compact-form
-        ul {
-            &:last-child { margin: 0; }
-            li {
-                align-items: flex-start;
-                flex-wrap: nowrap;
-                line-height: 230%; // Provide enough space when controls wrap
-                padding: 2px 0;
-                &:not(.widget-rule-header) {
-                    &:not(.connects-to-previous) {
-                        border-top: 1px solid $colorFormLines;
-                    }
-                }
-                &.connects-to-previous {
-                    padding: $interiorMargin 0;
-                }
-
-                > label {
-                    display: block; // Needed to align text to right
-                    text-align: right;
-                }
-            }
-        }
-
-        &.s-widget-test-data-item {
-            // Single line of ul li label span, etc.
-            ul {
-                li {
-                    border: none !important;
-                    > label {
-                        display: inline-block;
-                        width: auto;
-                        text-align: left;
-                    }
-                }
-            }
-        }
-    }
-}
-
-.widget-edit-holder {
-    font-size: 0.8rem;
-}
-
-.widget-rules-wrapper {
-    // Wrapper area that holds n rules
-    box-sizing: border-box;
-    overflow-y: scroll;
-    padding-right: $interiorMargin;
-}
-
-.l-widget-rule,
-.l-widget-test-data-item {
-    box-sizing: border-box;
-    margin-bottom: $interiorMarginSm;
-    padding: $interiorMargin $interiorMarginLg;
-}
-
-.l-widget-thumb-wrapper {
-    @extend .l-flex-row;
-    align-items: center;
-    > span { display: block; }
-    .grippy-holder,
-    .view-control {
-        margin-right: $interiorMargin;
-        width: 1em;
-        height: 1em;
-    }
-
-    .widget-thumb {
-        flex: 1 1 auto;
-        width: 100%;
-    }
-}
-
-.rule-title {
-    flex: 0 1 auto;
-    color: pullForward($colorBodyFg, 50%);
-}
-
-.rule-description {
-    flex: 1 1 auto;
-    @include ellipsize();
-    color: pushBack($colorBodyFg, 20%);
-}
-
-.s-widget-rule,
-.s-widget-test-data-item {
-    background-color: rgba($colorBodyFg, 0.1);
-    border-radius: $basicCr;
-}
-
-.widget-thumb {
-    @include ellipsize();
-    @include cSummaryWidget();
-    padding: $interiorMarginSm $interiorMargin;
-}
\ No newline at end of file
diff --git a/src/styles/conductor/_constants.scss b/src/styles/conductor/_constants.scss
deleted file mode 100644
index 9d7bed2a60..0000000000
--- a/src/styles/conductor/_constants.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-$ueTimeConductorH: (20px, 3px, 20px); // Heights for Ticks, Data Visualization, Controls elements
-$ueTimeConductorRtH: (20px, 3px, 20px); // Heights for elements in Real-time mode
-$timeCondInputTimeSysDefW: 165px; // Default width for datetime value inputs
-$timeCondInputDeltaDefW: 65px; // Default width for delta value inputs, typically 00:00:00
-$timeCondTOIIconD: 12px; // height and width of icon used for TOI indicator
-$timeCondTOIValOffset: 0px;
-$ticksBlockerFadeW: 50px;
-$toiBlockerFadeW: 10px;
-$toiH: 12px;  // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
-$toiPad: 4px;
-$timeCondAxisLROffset: (($toiH / 2) + $toiPad, ($toiH / 2) + $toiPad); // Margin to left, right of tick axis and vis bar. For paging, use 15, 20px
diff --git a/src/styles/conductor/_time-conductor-base.scss b/src/styles/conductor/_time-conductor-base.scss
deleted file mode 100644
index 1d1bc740cc..0000000000
--- a/src/styles/conductor/_time-conductor-base.scss
+++ /dev/null
@@ -1,494 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 toiLineHovEffects() {
-    &:before,
-    &:after {
-        background-color: $timeControllerToiLineColorHov;
-    }
-}
-
-.l-time-conductor-holder {
-    border-top: 1px solid $colorInteriorBorder;
-    min-width: 500px;
-    padding-top: $interiorMargin;
-}
-
-.time-conductor-icon {
-    $c: $colorObjHdrIc;
-    $d: 18px;
-    height: $d !important;
-    width: $d;
-    position: relative;
-
-    &:before {
-        @extend .ui-symbol;
-        color: $c;
-        content: $glyph-icon-brackets;
-        font-size: $d;
-        line-height: normal;
-        display: block;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-    }
-
-    // Clock hands
-    div[class*="hand"] {
-        $handW: 2px;
-        $handH: $d * 0.4;
-        transform: translate(-50%, -50%);
-        @include animation-iteration-count(infinite);
-        @include animation-timing-function(linear);
-        position: absolute;
-        height: $handW;
-        width: $handW;
-        left: 50%;
-        top: 50%;
-        z-index: 2;
-        &:before {
-            background: $colorObjHdrIc;
-            content: '';
-            display: block;
-            position: absolute;
-            width: 100%;
-            bottom: -1px;
-        }
-        &.hand-little {
-            z-index: 2;
-            @include animation-duration(12s);
-            &:before {
-                height: ceil($handH * 0.7);
-            }
-        }
-        &.hand-big {
-            z-index: 1;
-            @include animation-duration(1s);
-            &:before {
-                height: $handH;
-            }
-        }
-    }
-}
-
-.l-time-conductor {
-    $knobHOffset: 0px;
-    $rangeValPad: $interiorMargin;
-    $rangeValOffset: $sliderKnobW + $interiorMargin;
-    $r1H: nth($ueTimeConductorH, 1);
-    $r2H: nth($ueTimeConductorH, 2);
-    $r3H: nth($ueTimeConductorH, 3);
-    position: relative;
-
-    > .l-row-elem {
-        // First order row elements
-        box-sizing: border-box;
-        width: 100%;
-        position: relative;
-    }
-
-    .mode-selector .s-menu-button,
-    .time-delta {
-        &:before {
-            @extend .ui-symbol;
-        }
-    }
-
-    .time-delta {
-        &:before {
-            color: $colorTimeCondKeyBg;
-        }
-    }
-
-    .l-time-conductor-inputs-holder,
-    .l-time-conductor-inputs-and-ticks,
-    .l-time-conductor-zoom-w {
-        font-size: 0.8rem;
-    }
-
-    .l-time-conductor-inputs-holder {
-        $iconCalendarW: 16px;
-        $wBgColor: $colorBodyBg;
-
-        height: $r1H;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 1;
-        pointer-events: none;
-        .l-time-range-w {
-            // Wraps a datetime text input field
-            height: 100%;
-            position: absolute;
-            .title {
-                display: inline-block;
-                margin-right: $interiorMarginSm;
-            }
-            &.start-w {
-                @include background-image(linear-gradient(270deg, rgba($wBgColor,0), rgba($wBgColor,1) $ticksBlockerFadeW));
-                padding-right: $ticksBlockerFadeW;
-                .title:before {
-                    content: 'Start';
-                }
-            }
-            &.end-w {
-                @include background-image(linear-gradient(90deg, rgba($wBgColor,0), rgba($wBgColor,1) $ticksBlockerFadeW));
-                padding-left: $ticksBlockerFadeW;
-                right: 0;
-                .title:before {
-                    content: 'End';
-                }
-            }
-            .l-time-conductor-inputs {
-                pointer-events: auto;
-            }
-            .time-range-input input[type="text"] {
-                width: $timeCondInputTimeSysDefW;
-            }
-            .hrs-min-input input[type="text"] {
-                width: $timeCondInputDeltaDefW;
-            }
-            .icon-calendar {
-                margin-top: 4px;
-            }
-        }
-    }
-
-    .l-time-conductor-inputs-and-ticks {
-        $c: $colorTimeCondTicks;
-        height: $r1H;
-        mct-conductor-axis {
-            display: block;
-            position: relative;
-            width: 100%;
-        }
-        .l-axis-holder {
-            height: $r1H;
-            position: absolute;
-            left: nth($timeCondAxisLROffset, 1);
-            right: nth($timeCondAxisLROffset, 2);
-            svg {
-                text-rendering: geometricPrecision;
-                width: 100%;
-                height: 100%;
-                > g {
-                    // Tick holder
-                    font-size: 0.9em;
-                    transform: translateY(23px);
-                }
-                path,
-                line {
-                    // Line beneath ticks
-                    display: none;
-                }
-                line {
-                    // Tick marks
-                    //stroke: $c;
-                    //transform: translateY(-10px);
-                }
-                text {
-                    // Tick labels
-                    fill: $c;
-                }
-            }
-        }
-    }
-    .l-data-visualization-holder {
-        height: $r2H;
-        z-index: 2; // Must lift above ticks and inputs
-
-        .l-page-button,
-        .l-data-visualization {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-        }
-
-        .l-page-button {
-            @if nth($timeCondAxisLROffset, 1) + nth($timeCondAxisLROffset, 2) > 30 {
-                left: 0;
-                width: nth($timeCondAxisLROffset, 1);
-                &.align-right {
-                    left: auto;
-                    right: 0;
-                    width: nth($timeCondAxisLROffset, 2);
-                }
-            } @else {
-                // Hide these if the offsets aren't enough
-                display: none;
-            }
-        }
-
-        .l-data-visualization {
-            background: $colorTimeCondDataVisBg;
-            left: nth($timeCondAxisLROffset, 1);
-            right: nth($timeCondAxisLROffset, 2);
-            &:hover {
-                .l-toi-holder.hover {
-                    opacity: 1;
-                }
-                .l-toi-holder.pinned.active {
-                    opacity: 0.4;
-                    .l-toi-val {
-                        pointer-events: none;
-                        opacity: 0;
-                    }
-                }
-            }
-        }
-    }
-
-    .l-time-conductor-controls {
-        align-items: center;
-        margin-top: $interiorMarginLg;
-        .l-time-conductor-zoom-w {
-            justify-content: flex-end;
-            .time-conductor-zoom {
-                height: $r3H;
-                min-width: 100px;
-                width: 20%;
-            }
-            .time-conductor-zoom-current-range {
-                color: $colorTick;
-            }
-        }
-    }
-
-    // Real-time, latest modes
-    &.realtime-mode,
-    &.lad-mode {
-        .time-conductor-icon {
-            &:before {
-                color: $colorTimeCondKeyBg;
-            }
-            div[class*="hand"] {
-                @include animation-name(clock-hands);
-                &:before {
-                    background: $colorTimeCondKeyBg;
-                }
-            }
-        }
-
-        .l-time-conductor-inputs-holder {
-            .l-time-range-input-w {
-                .icon-calendar {
-                    display: none;
-                }
-                &.start-date {
-                    display: none;
-                }
-                &.end-date {
-                    // Displays the current time
-                    pointer-events: none;
-                    input[type="text"] {
-                        background: none;
-                        box-shadow: none;
-                        color: pullForward($colorTimeCondKeyBg, 5%);
-                        margin-right: $interiorMargin;
-                        tab-index: -1;
-                    }
-                }
-            }
-        }
-
-        .l-data-visualization {
-            background: $colorTimeCondDataVisRtBg !important;
-        }
-
-        .mode-selector .s-menu-button {
-            $fg: $colorTimeCondKeyFg;
-            @include btnSubtle($bg: $colorTimeCondKeyBg, $bgHov: pullForward($colorTimeCondKeyBg, $ltGamma), $fg: $colorTimeCondKeyFg);
-            &:before {
-                color: $fg !important;
-            }
-        ;
-            color: $fg !important;
-        }
-    }
-
-    // Fixed mode
-    &.fixed-mode {
-        $i: $glyph-icon-calendar;
-        .time-conductor-icon div[class*="hand"] {
-            &.hand-little {
-                transform: rotate(120deg);
-            }
-        }
-        .mode-selector .s-menu-button:before {
-            content: $i;
-        }
-        .l-axis-holder {
-            $angle: 90deg;
-            $c0: rgba($colorBodyFg, 0.1);
-            $c1: rgba($colorBodyFg, 0.1);
-            $c2: transparent;
-            $grabTicksYOffset: 2px;
-            $grabTicksXSpace: 3px;
-            transition: background 150ms ease-in-out;
-            @include cursorGrab();
-            svg {
-                @include background-image(linear-gradient($angle,
-                    $c1 1px, $c2 1px,
-                    $c2 100%
-                ));
-                background-position: center $grabTicksYOffset;
-                background-repeat: repeat-x;
-                background-size: $grabTicksXSpace $r1H - ($grabTicksYOffset * 2);
-            }
-            &:hover {
-                background: $c0;
-            }
-        }
-    }
-
-    // Realtime mode
-    &.realtime-mode {
-        $i: $glyph-icon-clock;
-        .time-conductor-icon div[class*="hand"] {
-            @include animation-name(clock-hands);
-        }
-        .time-delta:before {
-            content: $i;
-        }
-        .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
-            content: 'Now';
-        }
-        .mode-selector .s-menu-button:before {
-            content: $i;
-        }
-    }
-
-    // LAD mode
-    &.lad-mode {
-        $i: $glyph-icon-database;
-        .time-conductor-icon div[class*="hand"] {
-            @include animation-name(clock-hands-sticky);
-            &.hand-big {
-                @include animation-duration(5s);
-            }
-            &.hand-little {
-                @include animation-duration(60s);
-            }
-        }
-        .time-delta:before {
-            content: $i;
-        }
-        .l-time-conductor-inputs-holder .l-time-range-w.end-w .title:before {
-            content: 'LAD';
-        }
-        .mode-selector .s-menu-button:before {
-            content: $i;
-        }
-    }
-}
-
-/******************************************************************** MOBILE */
-
-@include phoneandtablet {
-    .l-time-conductor-holder {
-        min-width: 0 !important;
-    }
-    .super-menu.mini {
-        width: 200px;
-        height: 100px;
-        .pane.menu-item-description {
-            display: none;
-        }
-    }
-}
-
-@include phone {
-    .l-time-conductor {
-        min-width: 0;
-        .l-time-conductor-inputs-and-ticks {
-            .l-time-conductor-inputs-holder {
-                .l-time-range-w {
-                    background-image: none !important;
-                }
-            }
-            mct-conductor-axis {
-                display: none;
-            }
-        }
-    }
-}
-
-@include phonePortrait {
-    .l-time-conductor {
-        .l-data-visualization,
-        .l-time-conductor-zoom-w,
-        .time-delta {
-            display: none;
-        }
-
-        .l-time-conductor-inputs-and-ticks {
-            height: auto !important;
-            .l-time-conductor-inputs-holder {
-                position: relative;
-                height: auto !important;
-
-                .l-time-range-w {
-                    background-image: none !important;
-                    display: block;
-                    height: auto !important;
-                    padding: 0 !important;
-                    position: relative;
-                    text-align: left;
-                    &:not(:first-child) {
-                        margin-top: $interiorMargin;
-                    }
-                }
-            }
-        }
-
-        // Fixed mode
-        &.fixed-mode {
-            .l-time-conductor-inputs-and-ticks {
-                .l-time-range-w {
-                    .title {
-                        width: 30px;
-                    }
-                }
-            }
-        }
-
-        // Real-time, latest modes
-        &.realtime-mode,
-        &.lad-mode {
-            .l-time-conductor-inputs-and-ticks {
-                .l-time-range-w {
-                    &.start-w {
-                        display: none;
-                    }
-                    &.end-w {
-                        margin-top: 0;
-                        .end-date input[type="text"] {
-                            margin: 0;
-                            text-align: left;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/styles/conductor/_time-of-interest.scss b/src/styles/conductor/_time-of-interest.scss
deleted file mode 100644
index 5a0ab4ad33..0000000000
--- a/src/styles/conductor/_time-of-interest.scss
+++ /dev/null
@@ -1,271 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-mct-include.l-toi-holder,
-.l-toi-holder:after,
-.l-toi-holder:before {
-    display: block;
-    position: absolute;
-}
-
-mct-include.l-toi-holder {
-    $blockerFadeW: $toiBlockerFadeW;
-    transform: translateX(-50%);
-    color: $toiColorBg;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: $toiH;
-    &:not(.pinned) {
-        display: none;
-    }
-
-    &.pinned {
-        display: block;
-    }
-
-    &:before,
-    &:after {
-        // Vertical lines. TC uses both; plot only uses :before
-        border-left: 1px dashed $toiColorBg;
-        box-sizing: border-box;
-        content: '';
-        display: block;
-        left: 50%;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 2px;
-        z-index: 2;
-    }
-
-    .l-toi {
-        // Holds buttons and val. Acts as a blocking element.
-        @include background-image(linear-gradient(90deg, transparent, $toiColorBlocker 10%, $toiColorBlocker 90%, transparent 100%));
-        position: absolute;
-        align-items: center;
-        box-sizing: content-box;
-        height: $toiH;
-        left: $toiPad * -2;
-        transform: translateY(-50%); top: 50%;
-        padding: $toiPad;
-        z-index: 1;
-
-        .l-toi-buttons {
-            @include trans-prop-nice($props: (width, padding), $dur: 250ms);
-            border-radius: $controlCr;
-            box-sizing: content-box;
-            font-size: $toiH;
-            height: 100%;
-            line-height: $toiH;
-            padding: $toiPad;
-            overflow: hidden;
-            white-space: nowrap;
-            justify-content: space-between;
-            width: $toiH;
-
-            &:hover {
-                // Expand and display controls; clock icon changes to resync
-                background-color: $toiColorBg;
-                cursor: pointer;
-                width: 30px;
-
-                .icon-button {
-                    color: rgba($toiColorCtrlFg, 0.5);
-                    opacity: 1;
-                    &:hover {
-                        color: $toiColorCtrlFg;
-                    }
-                }
-
-                .t-button-resync {
-                    order: 1;
-                    &:before {
-                        content: $glyph-icon-resync;
-                    }
-                }
-                .t-button-unpin {
-                    order: 2;
-                    &:hover {
-                        color: $toiColorBgAlert;
-                    }
-                }
-
-                & + .l-toi-val {
-                    // Dim the value to emphasize the controls
-                    opacity: 0.5;
-                }
-            }
-        }
-
-        .icon-button {
-            color: $toiColorBg;
-        }
-
-        .t-button-resync {
-            @extend .icon-clock;
-            &:hover { color: $toiColorCtrlFg; }
-        }
-
-        .t-button-unpin {
-            @include trans-prop-nice($props: opacity, $dur: 150ms);
-            @extend .icon-x-in-circle;
-            float: right;
-            opacity: 0;
-        }
-    }
-
-    .l-toi-val {
-        display: none; // Hide by default; see .show-val below
-    }
-
-    // TOI is showing value as well
-    &.show-val {
-        .l-toi {
-            .l-toi-buttons {
-                order: 1;
-                &:hover {
-                    margin-right: $interiorMarginSm;
-                }
-            }
-            .l-toi-val {
-                @include trans-prop-nice($props: opacity, $dur: 150ms);
-                background-color: $toiColorBg;
-                border-radius: $controlCr;
-                box-sizing: content-box;
-                color: $toiColorFg;
-                display: inline-block;
-                font-size: 0.7rem;
-                font-weight: 400;
-                height: $toiH;
-                line-height: $toiH;
-                order: 2;
-                padding: 1px 3px;
-                white-space: nowrap;
-            }
-        }
-
-        &.val-to-left {
-            .l-toi {
-                left: auto;
-                right: $toiPad * -2;
-
-                .l-toi-buttons {
-                    order: 2;
-                    &:hover {
-                        .t-button-resync { order: 2; }
-                        .t-button-unpin { order: 1; }
-                        margin-left: $interiorMarginSm;
-                    }
-                }
-
-                .l-toi-val {
-                    order: 1;
-                }
-            }
-        }
-    }
-}
-
-
-// TOI in tables
-.tabular,
-table {
-    tbody, .tbody {
-        tr, .tr {
-            &.l-toi-tablerow {
-                border-top: 1px dashed $toiColorBg;
-                z-index: 1;
-                td, .td {
-                    .l-toi-holder {
-                        left: 50% !important;
-                        &:before,
-                        &:after {
-                            display: none;
-                        }
-                        .l-toi {
-                            background: rgba($toiColorBlocker, 0.9);
-                            border-radius: 20%;
-                            height: auto;
-                            padding: $toiPad;
-                            transform: translate(-50%, -50%);
-                            left: 50%; right: auto; top: 0;
-                            .l-toi-buttons {
-                                padding: 1px;
-                                &:hover {
-                                    padding: $toiPad;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-// TOI in plots
-.gl-plot {
-    .gl-plot-wrapper-display-area-and-x-axis {
-        right: nth($plotDisplayArea, 2) + ($toiH / 2) + $toiPad; // Make room for TOI element
-
-        .l-toi-holder {
-            bottom: nth($plotDisplayArea, 3) - $interiorMargin;
-            z-index: 3;
-
-            .l-toi {
-                transform: translateY(100%);
-
-            }
-
-            .l-toi {
-                top: auto;
-                bottom: $toiPad;
-            }
-        }
-    }
-}
-
-// TOI in Time Conductor
-.l-time-conductor {
-    .l-toi-holder {
-        $linesVOffset: 2px;
-        &:before,
-        &:after {
-            // Vertical lines
-            border-left-style: solid;
-            height: ((nth($ueTimeConductorH, 2) - $timeCondTOIIconD)/2) + $linesVOffset;
-        }
-
-        &:before {
-            transform: translate(-50%, $linesVOffset * -1);
-            top: 0px;
-            bottom: auto;
-        }
-
-        &:after {
-            transform: translate(-50%, $linesVOffset);
-            top: auto;
-            bottom: 0px;
-        }
-    }
-}
diff --git a/src/styles/conductor/time-conductor-espresso.scss b/src/styles/conductor/time-conductor-espresso.scss
deleted file mode 100644
index 836c7b36c3..0000000000
--- a/src/styles/conductor/time-conductor-espresso.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-@import "constants";
-
-// Thematic constants
-$colorTimeCondTicks: pullForward($colorBodyBg, 30%);
-$colorTimeCondKeyBg: #4e70dc;
-$colorTimeCondKeyFg: #fff;
-$colorTimeCondDataVisBg: pullForward($colorBodyBg, 5%);
-$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 10%);
-
-// Time of Interest
-$toiColorBg: #6b93c6;
-$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icons
-$toiColorFg: #000; // Used by value display
-$toiColorCtrlFg: #fff;
-$toiColorBgAlert: #cf2a12; // Used by unpin button on hover
-$colorTimeCondTOIBg: darken($toiColorBg, 20%);
-$colorTimeCondTOIBgHov: $toiColorBg;
-
-@import "time-conductor-base";
-@import "time-of-interest";
diff --git a/src/styles/conductor/time-conductor-snow.scss b/src/styles/conductor/time-conductor-snow.scss
deleted file mode 100644
index ead52a20fb..0000000000
--- a/src/styles/conductor/time-conductor-snow.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-@import "constants";
-
-// Thematic constants
-$colorTimeCondTicks: pullForward($colorBodyBg, 30%);
-$colorTimeCondKeyBg: #6178dc;
-$colorTimeCondKeyFg: #fff;
-$colorTimeCondDataVisBg: pullForward($colorBodyBg, 10%);
-$colorTimeCondDataVisRtBg: pushBack($colorTimeCondKeyBg, 30%);
-
-// Time of Interest
-$toiColorBg: #6b93c6;
-$toiColorBlocker: $colorBodyBg; // Color of blocker element beneath the TOI icons
-$toiColorFg: #fff; // Used by value display
-$toiColorCtrlFg: #fff;
-$toiColorBgAlert: #ff9540; // Used by unpin button on hover
-$colorTimeCondTOIBg: darken($toiColorBg, 20%);
-$colorTimeCondTOIBgHov: $toiColorBg;
-
-@import "time-conductor-base";
-@import "time-of-interest";
diff --git a/src/styles/controls/_breadcrumb.scss b/src/styles/controls/_breadcrumb.scss
deleted file mode 100644
index cbc1a4b30b..0000000000
--- a/src/styles/controls/_breadcrumb.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.l-breadcrumb {
-	$c: darken($colorBodyFg, 15%);
-	$p: 4px;
-	font-size: 0.7rem;
-	line-height: 1em;
-	margin-bottom: $interiorMargin;
-	margin-left: -1 * $p;
-	.l-breadcrumb-item {
-		//@include test();
-		a {
-			box-sizing: border-box;
-			border-radius: $basicCr*.75;
-			@include transition(background-color, 0.25s);
-			color: darken($colorBodyFg, 15%);
-			display: inline-block;
-			//margin-right: $interiorMargin;
-			padding: $p/2 $p;
-			.icon {
-				color: $colorItemTreeIcon;
-				margin-right: $interiorMargin;
-			}
-			&:hover {
-				background: lighten($colorBodyBg, 10%);
-				color: lighten($colorBodyFg, 10%);
-				.icon {
-					color: $colorItemTreeIconHover;
-				}
-			}
-		}
-	}
-}
diff --git a/src/styles/controls/_buttons.scss b/src/styles/controls/_buttons.scss
deleted file mode 100644
index e4afc0f295..0000000000
--- a/src/styles/controls/_buttons.scss
+++ /dev/null
@@ -1,140 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-$baseRatio: 1.5;
-$pad: $interiorMargin * $baseRatio;
-
-.s-button {
-    @include user-select(none);
-    @include btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $ic: $colorBtnIcon);
-    box-sizing: border-box;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 0.7rem;
-    text-decoration: none;
-    height: $btnStdH;
-    line-height: $btnStdH;
-    padding: 0 $pad;
-
-	&.lg {
-		font-size: 1rem;
-	}
-
-    &.sm {
-        padding: 0 $pad / $baseRatio;
-    }
-
-    &.vsm {
-        padding: 0 ($pad / $baseRatio) / 2;
-    }
-
-    &.major {
-        @include btnSubtle($bg: $colorBtnMajorBg, $bgHov: $colorBtnMajorBgHov, $fg: $colorBtnMajorFg, $fgHov: $colorBtnMajorFgHov, $ic: $colorBtnMajorFg, $icHov: $colorBtnMajorFgHov);
-    }
-
-    &.no-label {
-        .label, .title-label { display: none; }
-    }
-
-    &[disabled="true"] {
-        opacity: 0.3;
-    }
-
-    &.pause-play {
-        @extend .icon-pause;
-        &.paused {
-            @include btnSubtle($bg: $colorPausedBg, $bgHov: pushBack($colorPausedBg, 10%), $fg: $colorPausedFg, $ic: $colorPausedFg);
-            @extend .icon-play;
-            &:before { @include pulse($dur: 1000ms); }
-        }
-    }
-
-    .icon {
-        font-size: 0.8rem;
-    }
-
-    .title-label {
-        vertical-align: top;
-    }
-}
-
-body.desktop .mini-tab-icon {
-    // Meant to be used as pane hide/show control elements in concert with mct-splitter
-    // Font glyphs set in _layout.scss
-    background-color: $colorMiniTabBg;
-    color: $colorMiniTabFg;
-    cursor: pointer;
-    display: block;
-    font-family: 'symbolsfont';
-    font-size: $uePaneMiniTabFontSize;
-    position: absolute;
-    height: $uePaneMiniTabH; width: $uePaneMiniTabW;
-    line-height: $uePaneMiniTabH;
-    overflow: hidden;
-    text-align: center;
-
-    &:before {
-        display: inline-block;
-    }
-
-    &:hover {
-        background-color: $colorMiniTabBgHov;
-        color: $colorMiniTabFgHov;
-    }
-}
-
-@mixin btnSetButtonFirst() {
-    @include border-left-radius($controlCr);
-    margin-left: 0;
-}
-
-@mixin btnSetButtonLast() {
-    @include border-right-radius($controlCr);
-}
-
-.l-btn-set {
-    // Buttons that have a very tight conceptual grouping - no internal space between them.
-    font-size: 0; // Remove space between s-button elements due to white space in markup
-    white-space: nowrap;
-
-    .s-button {
-        border-radius: 0;
-        margin-left: 1px !important;
-    }
-
-    > .s-button {
-        // Styles for .s-button as immediate descendants in .l-btn-set
-        &:first-child { @include btnSetButtonFirst(); }
-        &:last-child { @include btnSetButtonLast(); }
-    }
-
-    // Must use following due to DOM structure of action buttons,
-    // which have structure like .l-btn-set > mct-representation class=first|last > .s-button
-    .first > .s-button { @include btnSetButtonFirst(); }
-    .last > .s-button { @include btnSetButtonLast(); }
-}
-
-.paused {
-    &:not(.s-button) {
-        border-color: $colorPausedBg !important;
-        color: $colorPausedBg !important;
-    }
-}
diff --git a/src/styles/controls/_controls.scss b/src/styles/controls/_controls.scss
deleted file mode 100644
index cb332b7ae0..0000000000
--- a/src/styles/controls/_controls.scss
+++ /dev/null
@@ -1,878 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-.accordion {
-    $accordionHeadH: 18px;
-    margin-top: $interiorMargin;
-    &:first-child {
-        margin-top: 0;
-    }
-    .accordion-head {
-        $op: 0.2;
-        border-radius: $basicCr * 0.75;
-        box-sizing: border-box;
-        background: rgba($colorBodyFg, $op);
-        cursor: pointer;
-        font-size: 0.75em;
-        line-height: $accordionHeadH;
-        margin-bottom: $interiorMargin;
-        padding: 0 $interiorMargin;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: auto;
-        left: 0;
-        width: auto;
-        height: $accordionHeadH;
-        text-transform: uppercase;
-        &:hover {
-            background: rgba($colorBodyFg, $op * 2);
-        }
-        &:after {
-            content: "^";
-            display: block;
-            font-family: 'symbolsfont';
-            font-size: 0.9em;
-            position: absolute;
-            right: $interiorMargin;
-            text-transform: none;
-            top: 0;
-        }
-        &:not(.expanded):after {
-            content: "v";
-        }
-    }
-    .accordion-contents {
-        position: absolute;
-        top: $accordionHeadH + $interiorMargin;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        overflow-y: auto;
-        overflow-x: hidden;
-    }
-}
-
-// Hyperlink objects
-.s-hyperlink {
-    .label {
-        font-size: 0.8rem !important;
-    }
-    &:not(.s-button) {
-        color: $colorKey;
-        &:hover { color: $colorKeyHov; }
-    }
-}
-
-.s-icon-button {
-    // Clickable icon elements that have hover
-    @extend .ui-symbol;
-    color: $colorClickIcon;
-    &:hover {
-        color: $colorClickIconHov;
-    }
-}
-
-.s-toggle-icon {
-    // Has default (in-active) and .active states
-    @extend .s-icon-button;
-    color: $colorToggleIcon;
-    &:hover { color: rgba($colorToggleIconHov, 0.5); }
-    &.active { color: $colorToggleIconActive; }
-}
-
-.l-composite-control {
-    vertical-align: middle;
-    &:not(.l-inline) {
-        margin-bottom: $interiorMargin;
-    }
-    &.l-inline {
-        display: inline-block;
-    }
-    &.l-checkbox {
-        .composite-control-label {
-            line-height: 18px;
-        }
-    }
-}
-
-.l-control-group {
-    // Buttons that have a conceptual grouping - internal space between, and a divider between groups.
-    box-sizing: border-box;
-    border-left: 1px solid $colorInteriorBorder;
-    display: inline-block;
-    padding: 0 $interiorMargin;
-    position: relative;
-    &:first-child {
-        border-left: none;
-        padding-left: 0;
-    }
-}
-
-
-
-/******************************************************** LOCAL CONTROLS */
-// Controls placed in proximity to or overlaid on components and views
-
-.local-controls-hidden {
-    // Used within .has-local-controls, hidden by default
-
-}
-
-body.desktop .has-local-controls {
-    // Helper class, provides hover ability to show local controls
-
-    &:hover .local-controls-hidden {
-        @include trans-prop-nice($props: opacity, $dur: 50ms);
-        opacity: 1;
-        pointer-events: inherit;
-    }
-
-    .local-controls-hidden {
-        @include trans-prop-nice($props: opacity, $dur: 500ms);
-        opacity: 0;
-        pointer-events: none;
-    }
-}
-
-.h-local-controls {
-    // An explicit outer holder for controls. Typically placed in upper right.
-    align-items: center;
-    font-size: 0.7rem;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-
-
-    &.h-local-controls-overlay-content {
-        $p: $interiorMargin;
-        position: absolute;
-        top: $p; right: $p;
-        z-index: 2;
-    }
-
-    .l-btn-set,
-    .s-button {
-        &:not(:first-child) {
-            margin-left: $interiorMargin;
-        }
-    }
-}
-
-.h-local-controls-overlay-content {
-    background: $colorBodyBg;
-    border-radius: $controlCr + 1;
-    box-sizing: border-box;
-    border-radius: $controlCr;
-    padding: 1px;
-    .s-button {
-        background: $colorBtnBg;
-    }
-}
-
-.h-local-controls-trans {
-    background: rgba($colorTransLucBg, 0.5);
-    padding: $interiorMargin;
-}
-
-/******************************************************** VIEW CONTROLS */
-// Expand/collapse > and v arrows, used in tree and plot legend
-// Moved this over from a tree-only context 5/18/17
-
-.view-control {
-    @extend .ui-symbol;
-    cursor: pointer;
-    height: 1em; width: 1em;
-    line-height: inherit;
-    position: relative;
-    &:before {
-        position: absolute;
-        @include trans-prop-nice(transform, 100ms);
-        content: $glyph-icon-arrow-right-equilateral;
-        @include transform-origin(center);
-    }
-    &.expanded:before {
-        @include transform(rotate(90deg));
-    }
-}
-
-/******************************************************** CUSTOM CHECKBOXES */
-label.checkbox.custom,
-label.radio.custom {
-    $bg: pullForward($colorBodyBg, 10%);
-    $d: $formRowCtrlsH;
-    cursor: pointer;
-    display: inline-block;
-    line-height: 120%;
-    margin-right: $interiorMargin * 4;
-    padding-left: $d + $interiorMargin;
-    position: relative;
-    em {
-        color: $colorBodyFg;
-        display: inline-block;
-        height: $d;
-        width: $d;
-        &:before {
-            border-radius: $basicCr * .75;
-            background: $bg;
-            box-shadow: inset rgba(black, 0.4) 0 1px 2px;
-            box-sizing: border-box;
-            content: "";
-            font-family: 'symbolsfont';
-            font-size: 0.7em;
-            display: inline-block;
-            height: $d;
-            width: $d;
-            left: 0;
-            top: 0;
-            position: absolute;
-            text-align: center;
-        }
-    }
-    &.no-text {
-        overflow: hidden;
-        margin-right: 0;
-        padding-left: 0;
-        height: $d;
-        width: $d;
-        em {
-            overflow: hidden;
-        }
-    }
-    input {
-        display: none;
-        &:checked ~ em:before {
-            background: $colorCheck;
-            color: lighten($colorCheck, 50%);
-        }
-    }
-}
-
-label.checkbox.custom input:checked ~ em:before { content: $glyph-icon-check; }
-label.radio.custom input:checked ~ em:before { content: $glyph-icon-bullet; }
-
-.s-menu-button label.checkbox.custom {
-    margin-left: 5px;
-}
-
-.item .checkbox {
-    &.checked label {
-        box-shadow: none;
-        border-bottom: none;
-    }
-}
-
-label.form-control.checkbox {
-    input {
-        margin-right: $interiorMargin;
-        vertical-align: top;
-    }
-}
-
-/******************************************************** PLACEHOLDERS */
-input[type="text"],
-input[type="search"],
-textarea {
-    @include placeholder {
-        color: rgba($colorInputFg, 0.4);
-        font-style: italic;
-    }
-}
-
-/******************************************************** INPUTS */
-%input-base {
-    @include input-base();
-}
-
-input[type="text"],
-input[type="search"],
-input[type="number"] {
-    @include nice-input();
-    vertical-align: baseline;
-    padding: $inputTextPTopBtm $inputTextPLeftRight;
-    &.numeric {
-        text-align: right;
-    }
-}
-
-.l-input-sm {
-    input[type="text"],
-    input[type="search"],
-    input[type="number"] {
-        width: 50px !important;
-    }
-}
-
-.l-input-lg input[type="text"],
-input[type="text"].lg {  width: 100% !important; }
-.l-input-med input[type="text"],
-input[type="text"].med { width: 200px !important; }
-input[type="text"].sm, input[type="number"].sm {  width: 50px !important; }
-.l-numeric input[type="text"],
-input[type="text"].numeric { text-align: right; }
-
-.l-textarea-sm textarea,
-textarea.sm { position: relative; height: 50px; }
-.l-textarea-med textarea,
-textarea.med { position: relative; height: 150px; }
-.l-textarea-lg textarea,
-textarea.lg { position: relative; height: 300px; }
-
-.input-labeled {
-    // Used in toolbar
-    margin-left: $interiorMargin;
-    label {
-        display: inline-block;
-        margin-right: $interiorMarginSm;
-    }
-    &.inline {
-        display: inline-block;
-    }
-    &:first-child {
-        margin-left: 0;
-    }
-}
-
-*[contenteditable].s-input-inline,
-input[type="text"].s-input-inline,
-.s-input-inline input[type="text"] {
-    // A text input or contenteditable element that indicates edit affordance on hover and looks like an input on focus
-    @extend %input-base;
-    @include trans-prop-nice((padding, box-shadow), 250ms);
-    background: none;
-    box-shadow: none;
-    border: 1px solid transparent;
-    min-width: 20px;
-    padding-left: 0;
-    padding-right: 0;
-    &:hover,
-    &:focus {
-        padding-left: $inputTextPLeftRight;
-        padding-right: $inputTextPLeftRight;
-    }
-    &:hover {
-        border-color: rgba($colorBodyFg, 0.2);
-    }
-    &:focus {
-        @include s-input();
-        border-color: transparent;
-    }
-}
-
-/******************************************************** SELECTS */
-.select {
-    @include btnSubtle($bg: $colorSelectBg);
-    @extend .icon-arrow-down; // Context arrow
-    display: inline-block;
-    flex: 0 0 auto; // When used in a flex context, controls need to hold their width
-    padding: 0 $interiorMargin;
-    overflow: hidden;
-    position: relative;
-    select {
-        @include appearance(none);
-        box-sizing: border-box;
-        &:focus { outline: 0; }
-        background: none;
-        color: $colorSelectFg;
-        cursor: pointer;
-        border: none !important;
-        padding: 4px 25px 2px 0px;
-        width: 130%;
-        option {
-            margin: $interiorMargin 0; // Firefox
-        }
-    }
-    &:before {
-        transform: translateY(-50%);
-        color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
-        display: block;
-        pointer-events: none;
-        position: absolute;
-        right: $interiorMargin;
-        top: 50%;
-    }
-}
-
-/******************************************************** AUTOCOMPLETE */
-.autocomplete {
-    input {
-        width: 226px;
-        padding: 5px 0px 5px 7px;
-    }
-    .icon-arrow-down {
-        position: absolute;
-        top: 8px;
-        left: 210px;
-        font-size: 10px;
-        cursor: pointer;
-    }
-    .autocompleteOptions {
-        border: 1px solid $colorFormLines;
-        border-radius: 5px;
-        width: 224px;
-        max-height: 170px;
-        overflow-y: auto;
-        overflow-x: hidden;
-        li {
-            border: 1px solid $colorFormLines;
-            padding: 8px 0px 8px 5px;
-            .optionText {
-                cursor: pointer;
-            }
-        }
-        .optionPreSelected {
-            background-color: $colorInspectorSectionHeaderBg;
-            color: $colorInspectorSectionHeaderFg;
-        }
-    }
-}
-
-/******************************************************** OBJECT-HEADER */
-.object-header {
-    font-size: 1em;
-
-    > .type-icon {
-        color: $colorObjHdrIc;
-        font-size: 120%;
-        float: left;
-        margin-right: $interiorMargin;
-    }
-
-    .l-elem-wrapper {
-        mct-representation {
-            // Holds the context-available item
-            // Must have min-width to make flex work properly in Safari
-            min-width: 0.7em;
-        }
-    }
-
-    .action {
-        margin-right: $interiorMargin;
-    }
-
-    .title-label {
-        color: $colorObjHdrTxt;
-        @include ellipsize();
-    }
-
-    .context-available-w {
-        z-index: 5;
-    }
-
-    .context-available {
-        font-size: 0.7em;
-        flex: 0 0 1;
-    }
-
-    .t-object-alert {
-        display: none;
-    }
-}
-
-/******************************************************** PROGRESS BAR */
-@include keyframes(progress) {
-    100% { background-position: $progressBarStripeW center; }
-}
-
-@mixin bgProgressAnim($c: yellow, $a: 0.1, $d: 20px) {
-    @include background-image(linear-gradient(-90deg,
-        rgba($c, $a) 0%, transparent 50%,
-        transparent 50%, rgba($c, $a) 100%
-    ));
-    background-position: 0 center;
-    background-repeat: repeat-x;
-    background-size: $d 40%;
-}
-
-.l-progress-bar {
-    // Assume will be determinate by default
-    display: inline-block;
-    overflow: hidden;
-    position: relative;
-
-    .progress-amt-holder {
-        @include absPosDefault(1px);
-    }
-    .progress-amt,
-    .progress-amt:before,
-    .progress-amt:after {
-        @include absPosDefault();
-        display: block;
-        content: '';
-    }
-
-    .progress-amt {
-        right: auto; // Allow inline width to control }
-    }
-
-    &.indeterminate {
-        .progress-amt {
-            width: 100% !important;
-        }
-    }
-}
-
-.s-progress-bar {
-    border-radius: $basicCr;
-    @include boxIncised(0.3, 4px);
-    background: $colorProgressBarOuter;
-    .progress-amt {
-        border-radius: $basicCr;
-        @include boxShdw();
-        border-radius: $basicCr - 1;
-        @include trans-prop-nice(width);
-        &:before {
-            background-color: $colorProgressBarAmt;
-        }
-        &:after {
-            // Sheen
-            @include background-image(linear-gradient(
-                    transparent 5%, rgba(#fff,0.25) 30%, transparent 100%
-            ));
-        }
-    }
-
-    &:not(.indeterminate) {
-        .progress-amt:before {
-            // More subtle anim for determinate progress
-            @include animation(progress .4s linear infinite);
-            @include bgProgressAnim(#fff, 0.1, $progressBarStripeW);
-        }
-    }
-
-    &.indeterminate .progress-amt {
-        &:before {
-            // More visible std diag stripe anim for indeterminate progress
-            @include animation(progress .6s linear infinite);
-            @include bgDiagonalStripes(#fff, 0.2, $progressBarStripeW);
-        }
-        &:after { display: none; }
-    }
-}
-
-/******************************************************** SLIDERS */
-.slider {
-    $knobH: 100%;
-    .slot {
-        width: auto;
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-    }
-    .knob {
-        @include trans-prop-nice-fade(.25s);
-        background-color: $sliderColorKnob;
-        &:hover {
-            background-color: $sliderColorKnobHov;
-        }
-        position: absolute;
-        height: $knobH;
-        width: $sliderKnobW;
-        top: 0;
-        auto: 0;
-        bottom: auto;
-        left: auto;
-    }
-    .knob-l {
-        @include border-left-radius($sliderKnobR);
-        cursor: w-resize;
-    }
-    .knob-r {
-        @include border-right-radius($sliderKnobR);
-        cursor: e-resize;
-    }
-    .range {
-        @include trans-prop-nice-fade(.25s);
-        background-color: $sliderColorRange;
-        cursor: ew-resize;
-        position: absolute;
-        top: 0;
-        right: auto;
-        bottom: 0;
-        left: auto;
-        height: auto;
-        width: auto;
-        &:hover {
-            background-color: $sliderColorRangeHov;
-        }
-    }
-}
-
-@mixin sliderKnob() {
-    $h: 16px;
-    cursor: pointer;
-    width: floor($h/1.75);
-    height: $h;
-    margin-top: 1 + floor($h/2) * -1;
-    @include btnSubtle(pullForward($colorBtnBg, 10%));
-}
-
-@mixin sliderKnobRound() {
-    $h: 12px;
-    cursor: pointer;
-    width: $h;
-    height: $h;
-    margin-top: 1 + floor($h/2) * -1;
-    @include btnSubtle(pullForward($colorBtnBg, 20%));
-    border-radius: 50% !important;
-}
-
-input[type="range"] {
-    // HTML5 range inputs
-    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
-    background: transparent; /* Otherwise white in Chrome */
-    &:focus {
-        outline: none; /* Removes the blue border. */
-    }
-
-    // Thumb
-    &::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        @include sliderKnobRound();
-    }
-    &::-moz-range-thumb {
-        border: none;
-        @include sliderKnobRound();
-    }
-    &::-ms-thumb {
-        border: none;
-        @include sliderKnobRound();
-    }
-
-    // Track
-    &::-webkit-slider-runnable-track {
-        width: 100%;
-        height: 3px;
-        @include sliderTrack();
-    }
-
-    &::-moz-range-track {
-        width: 100%;
-        height: 3px;
-        @include sliderTrack();
-    }
-}
-
-/******************************************************** DATETIME PICKER */
-.l-datetime-picker {
-    $r1H: 15px;
-    @include user-select(none);
-    font-size: 0.8rem;
-    padding: $interiorMarginLg !important;
-    .l-month-year-pager {
-        $pagerW: 20px;
-        height: $r1H;
-        margin-bottom: $interiorMargin;
-        position: relative;
-        .pager,
-        .val {
-            @extend .abs;
-        }
-        .pager {
-            width: $pagerW;
-            @extend .ui-symbol;
-            &.prev {
-                @extend .icon-arrow-left;
-                right: auto;
-            }
-            &.next {
-                @extend .icon-arrow-right;
-                left: auto;
-                text-align: right;
-            }
-        }
-        .val {
-            text-align: center;
-            left: $pagerW + $interiorMargin;
-            right: $pagerW + $interiorMargin;
-        }
-    }
-    .l-calendar,
-    .l-time-selects {
-        border-top: 1px solid $colorInteriorBorder
-    }
-    .l-time-selects {
-        line-height: inherit;
-    }
-}
-
-/******************************************************** CALENDAR */
-.l-calendar {
-    $colorMuted: pushBack($colorMenuFg, 30%);
-    ul.l-cal-row {
-        display: flex;
-        flex-flow: row nowrap;
-        margin-top: 1px;
-        &:first-child {
-            margin-top: 0;
-        }
-        li {
-            flex: 1 0;
-            margin-left: 1px;
-            padding: $interiorMargin;
-            text-align: center;
-            &:first-child {
-                margin-left: 0;
-            }
-        }
-        &.l-header li {
-            color: $colorMuted;
-        }
-        &.l-body li {
-            @include trans-prop-nice(background-color, .25s);
-            cursor: pointer;
-            &.in-month {
-                background-color: $colorCalCellInMonthBg;
-            }
-            .sub {
-                color: $colorMuted;
-                font-size: 0.8em;
-            }
-            &.selected {
-                background: $colorCalCellSelectedBg;
-                color: $colorCalCellSelectedFg;
-                .sub {
-                    color: inherit;
-                }
-            }
-            &:hover {
-                background-color: $colorCalCellHovBg;
-                color: $colorCalCellHovFg;
-                .sub {
-                    color: inherit;
-                }
-            }
-        }
-    }
-}
-
-@include phone {
-    .l-datetime-picker {
-        padding: $interiorMargin !important;
-    }
-    .l-calendar {
-        ul.l-cal-row {
-            li {
-                padding: 2px $interiorMargin;
-            }
-        }
-    }
-}
-
-/******************************************************** TEXTAREA */
-textarea {
-    @include nice-textarea($colorInputBg, $colorInputFg);
-    position: absolute;
-    height: 100%;
-    width: 100%;
-}
-
-/******************************************************** MISC */
-.context-available {
-    @extend .icon-arrow-down;
-    color: $colorKey;
-    &:hover {
-        color: $colorKeyHov;
-    }
-}
-
-.view-switcher,
-.t-btn-view-large {
-    @include trans-prop-nice-fade($controlFadeMs);
-}
-
-.view-control {
-    @extend .icon-arrow-right;
-    cursor: pointer;
-    font-size: 0.75em;
-    width: $treeVCW;
-    &:before {
-        // Arrow glyph
-        left: 50%;
-        position: absolute;
-        @include trans-prop-nice(transform, 100ms);
-        transform: translateX(-50%);
-        transform-origin: center;
-    }
-    &.expanded:before {
-        transform: translateX(-50%) rotate(90deg);
-    }
-}
-
-.grippy,
-.grippy-sm,
-.drag-vertical,
-.drag-vertical-sm {
-    cursor: move;
-}
-
-.drag-vertical {
-    @extend .icon-list-view;
-}
-
-.drag-vertical-sm {
-    @extend .icon-list-view-12px;
-}
-
-.grippy {
-    // Used in Summary Widgets
-    @extend .icon-grippy;
-}
-
-.grippy-sm {
-    // Used in editor Elements pool
-    @extend .icon-grippy-12px;
-}
-
-/******************************************************** BROWSER ELEMENTS */
-body.desktop {
-    ::-webkit-scrollbar {
-        box-sizing: border-box;
-        box-shadow: inset $scrollbarTrackShdw;
-        background-color: $scrollbarTrackColorBg;
-        height: $scrollbarTrackSize;
-        width: $scrollbarTrackSize;
-    }
-
-    ::-webkit-scrollbar-thumb {
-        box-sizing: border-box;
-        background: $scrollbarThumbColor;
-        &:hover { background: $scrollbarThumbColorHov; }
-    }
-
-    .overlay ::-webkit-scrollbar-thumb {
-        background: $scrollbarThumbColorOverlay;
-        &:hover { background: $scrollbarThumbColorOverlayHov; }
-    }
-
-    .menu ::-webkit-scrollbar-thumb {
-        background: $scrollbarThumbColorMenu;
-        &:hover { background: $scrollbarThumbColorMenuHov; }
-    }
-
-    ::-webkit-scrollbar-corner {
-        background: $scrollbarTrackColorBg;
-    }
-}
-
diff --git a/src/styles/controls/_indicators.scss b/src/styles/controls/_indicators.scss
deleted file mode 100644
index 604594f67f..0000000000
--- a/src/styles/controls/_indicators.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-/* Indicators are generally only displayed in the ue-bottom-bar element of the main interface */
-
-.h-indicator,
-mct-indicators mct-include {
-    display: inline; // Fallback for display: contents
-    display: contents;
-}
-
-.ls-indicator {
-    $bg: rgba(white, 0.2) !important;
-    $hbg: $colorStatusBarBg;
-    $hshdw: rgba(white, 0.4) 0 0 3px;
-    $br: $controlCr;
-    $hoverYOffset: -35px;
-    background: transparent !important;
-    border-radius: $br;
-    display: inline-block;
-    position: relative;
-    padding: 1px $interiorMarginSm; // Use padding instead of margin to keep hover chatter to a minimum
-
-    &:before {
-        display: inline-block;
-    }
-
-    .label {
-        display: inline-block;
-        a,
-        button,
-        .s-button {
-            // Make <a> in label look like buttons
-            @include trans-prop-nice($props: all, $dur: 100ms);
-            background: transparent;
-            border: 1px solid rgba($colorStatusBarFg, 0.5);
-            border-radius: $br;
-            box-sizing: border-box;
-            color: inherit;
-            font-size: inherit;
-            height: auto;
-            line-height: normal;
-            padding: 0 2px;
-            &:hover {
-                background: $bg;
-                color: #fff;
-            }
-        }
-
-        [class*='icon-'] {
-            // If any elements within label include the class 'icon-*' then deal with their :before's
-            &:before {
-                font-size: 0.8em;
-                margin-right: $interiorMarginSm;
-            }
-        }
-
-        button { text-transform: uppercase !important; }
-    }
-
-    &.no-collapse {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-
-        > *,
-        &:before {
-            flex: 1 1 auto;
-        }
-
-        &:before {
-            margin-right: $interiorMarginSm;
-        }
-    }
-
-    &:not(.no-collapse) {
-        z-index: 0;
-
-        &:before {
-            margin-right: 0 !important;
-        }
-
-        .label {
-            transition: all 250ms ease-in 100ms;
-            background: $hbg;
-            border-radius: $br;
-            font-size: .6rem;
-            left: 0;
-            bottom: 140%;
-            opacity: 0;
-            padding: $interiorMarginSm $interiorMargin;
-            position: absolute;
-            transform-origin: 10px 100%;
-            transform: scale(0.0);
-            white-space: nowrap;
-            &:before {
-                // Infobubble-style arrow element
-                content: '';
-                display: block;
-                position: absolute;
-                top: 100%;
-                @include triangle('down', $size: 4px, $ratio: 1, $color: $hbg);
-            }
-        }
-
-        &:hover {
-            background: $bg;
-            z-index: 1;
-            .label {
-                opacity: 1;
-                transform: scale(1.0);
-                transition: all 100ms ease-out 0s;
-            }
-        }
-    }
-
-    &.float-right {
-        float: right;
-    }
-}
-
-/* Mobile */
-// Hide the clock indicator when we're phone portrait
-body.phone.portrait {
-    .ls-indicator.t-indicator-clock {
-        display: none;
-    }
-}
diff --git a/src/styles/controls/_lists.scss b/src/styles/controls/_lists.scss
deleted file mode 100644
index 807af01222..0000000000
--- a/src/styles/controls/_lists.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.checkbox-list {
-	label.checkbox.custom {
-		display: block;
-		margin-bottom: $interiorMargin;
-	}
-	li {
-		margin-bottom: $interiorMargin;
-	}
-}
-
-.l-tree-item-flat-list {
-	// For lists of tree-items that are flat. Remove margin, etc. normally needed for the expansion arrow.
-	.tree-item {
-		.t-object-label {
-			left: $interiorMargin !important;
-		}
-	}
-}
diff --git a/src/styles/controls/_menus.scss b/src/styles/controls/_menus.scss
deleted file mode 100644
index a2aaa94e77..0000000000
--- a/src/styles/controls/_menus.scss
+++ /dev/null
@@ -1,331 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 */
-.s-menu-button {
-    // Formerly .btn-menu
-    @extend .s-button;
-    span.l-click-area {
-        // In markup, this element should not enclose anything.
-        @extend .abs;
-    }
-
-    .icon {
-        font-size: 16px;
-    }
-
-    .title-label {
-        margin-left: $interiorMarginSm;
-    }
-
-    .icon-swatch,
-    .color-swatch {
-        // Used in color menu buttons in toolbar
-        $d: 10px;
-        display: inline-block;
-        border: 1px solid rgba($colorBtnFg, 0.2);
-        height: $d; width: $d;
-        line-height: $d;
-        vertical-align: middle;
-        margin-left: $interiorMarginSm;
-        margin-top: -2px;
-        &:not(.no-selection) {
-            border-color: transparent;
-        }
-    }
-
-    &:after {
-        // Adds the downward facing 'context available / invoke menu' arrow element
-        @include contextArrow();
-        color: rgba($colorInvokeMenu, percentToDecimal($contrastInvokeMenuPercent));
-    }
-
-    &.create-button {
-        @extend .icon-plus;
-        .title-label {
-            font-size: 1rem;
-        }
-    }
-
-    .menu {
-        left: 0;
-        text-align: left;
-    }
-}
-
-/******************************************************** MENUS THEMSELVES */
-.menu-element {
-    cursor: pointer;
-    position: relative;
-}
-
-.s-menu {
-    border-radius: $basicCr;
-    @include containerSubtle($colorMenuBg, $colorMenuFg);
-    @include boxShdw($shdwMenu);
-    @include txtShdw($shdwMenuText);
-    padding: $interiorMarginSm 0;
-}
-
-.menu {
-    border-radius: $basicCr;
-    @include containerSubtle($colorMenuBg, $colorMenuFg);
-    @include boxShdw($shdwMenu);
-    @include txtShdw($shdwMenuText);
-    padding: $interiorMarginSm 0;
-    display: block;
-    position: absolute;
-    z-index: 10;
-    ul {
-        @include menuUlReset();
-        li {
-            box-sizing: border-box;
-            border-top: 1px solid pullForward($colorMenuBg, 10%);
-            color: $colorMenuFg;
-            line-height: $menuLineH;
-            padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
-            position: relative;
-            white-space: nowrap;
-            &:first-child {
-                border: none;
-            }
-            &:hover {
-                background: $colorMenuHovBg;
-                color: $colorMenuHovFg;
-                &:before {
-                    color: $colorMenuHovIc;
-                }
-            }
-            &:before {
-                @extend .ui-symbol;
-                @extend .type-icon;
-                @extend .icon;
-                display: inline-block;
-                left: $interiorMargin * 2;
-            }
-        }
-    }
-}
-
-.menu,
-.icon-menu,
-.context-menu,
-.super-menu,
-.s-menu-button .menu {
-    pointer-events: auto;
-    ul li {
-        a.menu-item-a {
-            color: $colorMenuFg;
-            display: block;
-        }
-        &:before,
-        a.menu-item-a:before {
-            color: $colorMenuIc;
-            left: $interiorMargin;
-        }
-    }
-}
-
-.checkbox-menu {
-    // Used in search dropdown in tree
-    @extend .context-menu;
-    ul li {
-        padding-left: 50px;
-        .checkbox {
-            $d: 0.7rem;
-            position: absolute;
-            left: $interiorMargin;
-            top: ($menuLineH - $d) / 1.5;
-            em {
-                height: $d;
-                width: $d;
-                &:before {
-                    font-size: 7px !important;
-                    height: $d;
-                    width: $d;
-                    line-height: $d;
-                }
-            }
-        }
-        &:before {
-            // Type icon
-            left: 25px;
-        }
-    }
-}
-
-.super-menu,
-.super-menu > mct-representation,
-.super-menu > .contents {
-    box-sizing: border-box;
-    display: block;
-    position: relative;
-}
-
-.super-menu {
-    $plw: 50%;
-    $prw: 100% - $plw;
-    position: absolute;
-    .w-menu {
-        align-items: stretch;
-        display: flex;
-        flex-direction: row;
-        margin: $interiorMarginLg;
-    }
-    .col {
-        box-sizing: border-box;
-        flex: 1 1 auto;
-        overflow-x: hidden;
-        &.menu-items {
-            border-right: 1px solid pullForward($colorMenuBg, 10%);
-            overflow-y: auto;
-            padding-right: $interiorMargin;
-            width: $plw;
-            ul {
-                li {
-                    border-radius: $controlCr;
-                    padding-left: 30px;
-                    border-top: none;
-                }
-            }
-        }
-        &.menu-item-description {
-            $p: $interiorMargin * 3;
-            overflow-y: hidden;
-            padding: $p $p 0 $p;
-            width: $prw;
-
-            .desc-area {
-                &.icon {
-                    color: $colorCreateMenuLgIcon;
-                    position: relative;
-                    text-align: center;
-                }
-                &.title {
-                    color: $colorCreateMenuText;
-                }
-                &.description {
-                    color: pushBack($colorCreateMenuText, 20%);
-                    font-size: 0.8em;
-                    line-height: 1.5em;
-                }
-            }
-        }
-    }
-
-    .w-title-desc {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden; // Height set in specific menu instances
-    }
-
-    // Specific menu instances
-    &.l-create-menu {
-        width: 500px;
-        .col {
-            max-height: 70vh;
-        }
-        .w-title-desc {
-            height: 190px;
-        }
-        .desc-area {
-            &.icon {
-                font-size: 8em;
-                height: 135px;
-                margin-bottom: $interiorMargin * 3;
-            }
-            &.title {
-                font-size: 1.2em;
-                margin-bottom: $interiorMargin * 2;
-            }
-        }
-    }
-
-    &.mini {
-        width: 400px;
-        .col {
-            max-height: 50vh;
-            &.menu-items {
-                font-size: 0.8em;
-            }
-            &.menu-item-description {
-                $p: $interiorMargin * 2;
-                padding: $p $p 0 $p;
-            }
-        }
-        .w-title-desc {
-            height: 180px;
-        }
-        .desc-area {
-            &.icon {
-                font-size: 4em;
-                height: 70px;
-                margin-bottom: $interiorMargin * 3;
-            }
-            &.title {
-                font-size: 1em;
-                margin-bottom: $interiorMargin * 2;
-            }
-        }
-    }
-}
-
-.context-menu {
-    font-size: 0.80rem;
-}
-
-.context-menu-holder,
-.menu-holder {
-    position: absolute;
-    z-index: 120;
-    .context-menu-wrapper {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-    }
-    &.go-left .context-menu,
-    &.go-left .menu {
-        right: 0;
-    }
-    &.go-up .context-menu,
-    &.go-up .menu {
-        bottom: 0;
-    }
-}
-
-.context-menu-holder {
-    pointer-events: none;
-    height: 200px;
-    width: 170px;
-}
-
-.btn-bar.right .menu,
-.menus-to-left .menu {
-    z-index: 79;
-    left: auto;
-    right: 0;
-    width: auto;
-}
-
-.menus-up .menu {
-    bottom: $btnStdH;
-    top: auto;
-}
diff --git a/src/styles/controls/_messages.scss b/src/styles/controls/_messages.scss
deleted file mode 100644
index 9086961871..0000000000
--- a/src/styles/controls/_messages.scss
+++ /dev/null
@@ -1,299 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 statusBannerColors($bg, $fg: $colorStatusFg) {
-	$bgPb: 10%;
-	$bgPbD: 10%;
-	background-color: darken($bg, $bgPb);
-	color: $fg;
-	&:hover {
-		background-color: darken($bg, $bgPb - $bgPbD);
-	}
-	.s-action {
-		background-color: darken($bg, $bgPb + $bgPbD);
-		&:hover {
-			background-color: darken($bg, $bgPb);
-		}
-	}
-}
-
-/******************************************************************* MESSAGE BANNERS */
-.message {
-	&.block {
-		border-radius: $basicCr;
-		padding: $interiorMarginLg;
-	}
-	&.error {
-		background-color: rgba($colorAlert,0.3);
-		color: lighten($colorAlert, 20%);
-	}
-}
-
-.l-message-banner {
-	$m: $interiorMarginSm;
-	$lh: $ueFooterH - ($m*2) - 1;
-	box-sizing: border-box;
-	@include ellipsize();
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	position: absolute;
-	top: $m; right: auto; bottom: $m; left: 50%;
-	height: auto; width: auto;
-	line-height: $lh;
-	max-width: 300px;
-	padding: 0 $interiorMargin 0 $interiorMargin;
-	transform: translateX(-50%);
-
-	&.minimized {
-        @include transition-property(left, opacity);
-        @include transition-duration(0.3s);
-        @include transition-timing-function(ease-in-out);
-		left: 0;
-        opacity: 0;
-	}
-
-    &.new {
-        left: 50%;
-        opacity: 1;
-        &:not(.info) {
-            @include pulse($dur: 100ms, $iteration: 10);
-        }
-    }
-
-	.banner-elem {
-		flex: 0 1 auto;
-		margin-left: $interiorMargin;
-	}
-	a {
-		display: inline-block;
-	}
-	.l-action {
-		line-height: $lh - 3;
-		padding: 0 $interiorMargin;
-	}
-    .close {
-		cursor: pointer;
-        font-size: 7px;
-		width: 8px;
-    }
-	.l-progress-bar {
-		$h: $lh - 10;
-		height: $h;
-		line-height: $h;
-		width: 100px;
-	}
-    .progress-info { display: none; }
-	z-index: 10;
-}
-
-.s-message-banner {
-	border-radius: $controlCr;
-	@include statusBannerColors($colorStatusDefault, $colorStatusFg);
-	cursor: pointer;
-	a { color: inherit; }
-	.s-action {
-		border-radius: $basicCr;
-        @include trans-prop-nice(background-color);
-	}
-	.close {
-		opacity: 0.5;
-		&:hover {
-			opacity: 1;
-		}
-	}
-	&.ok,
-    &.info {
-		@include statusBannerColors($colorInfo);
-	}
-	&.caution,
-    &.warning,
-    &.alert {
-		@include statusBannerColors($colorWarningLo);
-	}
-    &.error {
-        @include statusBannerColors($colorWarningHi);
-    }
-}
-
-/******************************************************************* MESSAGES */
-
-/* Contexts:
-    In .t-message-list
-    In .overlay as a singleton
-    Inline in the view area
- */
-
-// Archetypal message
-.l-message {
-    $iconW: 32px;
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    padding: $interiorMarginLg;
-
-    &:before {
-        // Icon
-        flex: 0 1 auto;
-        @include txtShdw($shdwStatusIc);
-        @extend .icon-bell;
-        color: $colorStatusDefault;
-        font-size: $iconW;
-        width: $iconW + 2;
-        margin-right: $interiorMarginLg;
-    }
-
-    &.message-severity-info:before {
-        @extend .icon-info;
-        color: $colorInfo;
-    }
-
-    &.message-severity-alert:before {
-        color: $colorWarningLo;
-    }
-
-    &.message-severity-error:before {
-        @extend .icon-alert-rect;
-        color: $colorWarningHi;
-    }
-}
-
-
-.w-message-contents {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-
-    > div,
-    > span {
-        margin-bottom: $interiorMargin;
-    }
-
-    .message-body {
-        flex: 1 1 100%;
-    }
-}
-
-// Singleton in an overlay dialog
-.t-message-single .l-message,
-.t-message-single.l-message {
-        $iconW: 80px;
-        @include absPosDefault();
-        padding: 0;
-        &:before {
-            font-size: $iconW;
-            width: $iconW + 2;
-        }
-        .title {
-            font-size: 1.2em;
-        }
-}
-
-// Singleton inline in a view
-.t-message-inline .l-message,
-.t-message-inline.l-message {
-    border-radius: $controlCr;
-    &.message-severity-info { background-color: rgba($colorInfo, 0.3); }
-    &.message-severity-alert { background-color: rgba($colorWarningLo, 0.3); }
-    &.message-severity-error { background-color: rgba($colorWarningHi, 0.3); }
-
-    .w-message-contents.l-message-body-only {
-        .message-body {
-            margin-top: $interiorMargin;
-        }
-    }
-}
-
-// In a list
-.t-message-list {
-    @include absPosDefault();
-    display: flex;
-    flex-direction: column;
-
-    > div,
-    > span {
-        margin-bottom: $interiorMargin;
-    }
-
-    .w-messages {
-        flex: 1 1 100%;
-        overflow-y: auto;
-        padding-right: $interiorMargin;
-    }
-    // Each message
-    .l-message {
-        border-radius: $controlCr;
-        background: rgba($colorOvrFg, 0.1);
-        margin-bottom: $interiorMargin;
-        .hint,
-        .bottom-bar {
-            text-align: left;
-        }
-    }
-
-}
-
-@include phonePortrait {
-    .t-message-single .l-message,
-    .t-message-single.l-message {
-        flex-direction: column;
-        &:before {
-            margin-right: 0;
-            margin-bottom: $interiorMarginLg;
-            text-align: center;
-            width: 100%;
-        }
-
-        .bottom-bar {
-            text-align: center;
-            .s-button {
-                display: block;
-                width: 100%;
-            }
-        }
-    }
-}
-
-body.desktop .t-message-list {
-    .w-message-contents { padding-right: $interiorMargin; }
-}
-
-// Alert elements in views
-.s-unsynced {
-    $c: $colorPausedBg;
-    border: 1px solid $c;
-}
-
-.s-status-timeconductor-unsynced {
-    // Plot areas
-    .gl-plot .gl-plot-display-area {
-        @extend .s-unsynced;
-    }
-
-    // Object headers
-    .object-header {
-        .t-object-alert {
-            display: inline;
-        }
-    }
-}
-
diff --git a/src/styles/controls/_palette.scss b/src/styles/controls/_palette.scss
deleted file mode 100644
index 91f8854b76..0000000000
--- a/src/styles/controls/_palette.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.l-palette {
-	box-sizing: border-box;
-	padding: $interiorMargin !important;
-}
-
-.l-palette-row {
-    $d: 16px;
-    $m: 1;
-    $colorsPerRow: 10;
-    display: flex;
-    flex-wrap: wrap;
-    line-height: $d;
-    width: ($d * $colorsPerRow) + ($m * $colorsPerRow);
-
-    &.l-option-row {
-        margin-bottom: $interiorMargin;
-        .s-palette-item {
-            border-color: $colorPaletteFg;
-        }
-    }
-
-    .l-palette-item {
-        box-sizing: border-box;
-        display: block;
-        height: $d; width: $d;
-        min-width: $d;
-        line-height: $d * 0.9;
-        margin: 0 ($m * 1px) ($m * 1px) 0;
-        position: relative;
-        text-align: center;
-    }
-}
-
-.s-palette-item {
-    border: 1px solid transparent;
-    color: $colorPaletteFg;
-    text-shadow: $shdwPaletteFg;
-    @include trans-prop-nice-fade(0.25s);
-    &:hover {
-        @include trans-prop-nice-fade(0);
-        border-color: $colorPaletteSelected !important;
-    }
-    &.selected {
-        border-color: $colorPaletteSelected;
-        box-shadow: $shdwPaletteSelected; //Needed to see selection rect on light colored swatches
-    }
-}
-
-.l-palette-item-label {
-    margin-left: $interiorMargin;
-}
-
-.l-inline-palette {
-    .l-palette-row {
-        width: 100%;
-        .l-palette-item {
-            //@include display(flex);
-            @include flex(1 0 auto);
-            margin: 1px;
-            min-width: auto;
-            width: auto;
-            &:before {
-                content: '';
-                padding-top: 75%;
-            }
-        }
-    }
-}
diff --git a/src/styles/controls/_ticks.scss b/src/styles/controls/_ticks.scss
deleted file mode 100644
index ae4821a11b..0000000000
--- a/src/styles/controls/_ticks.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.wrapper-ticks {
-//	@include test();
-	height: $ticksH; //temp!
-	position: relative;
-}
-
-.tick {
-	line-height: $tickLblH;
-	position: absolute;
-	top: 0; right: auto; bottom: 0; left: auto;
-	z-index: 2;
-	&.no-label .label { display: none; }
-	&:before {
-		background: rgba(#fff, 0.3);
-//		border-bottom: 1px solid blue;
-		content: "";
-		display: block;
-		position: absolute;
-		top: 0; right: auto; bottom: auto; left: auto;
-		height: $tickH; width: $tickW;
-	}
-	.label {
-//		@include test();
-		font-size: 0.6em;
-		position: absolute;
-		text-align: center;
-		height: $tickLblH; width: $tickLblW;
-		margin-left: -1 * $tickLblW / 2;
-		top: auto; right: auto; bottom: 0; left: 0;
-
-	}
-}
diff --git a/src/styles/core.scss b/src/styles/core.scss
deleted file mode 100644
index 2a7d354e9f..0000000000
--- a/src/styles/core.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 "vendor/normalize.min.css";
-@import "startup-base";
-@import "openmct";
diff --git a/src/styles/edit/_editor.scss b/src/styles/edit/_editor.scss
deleted file mode 100644
index 338b200d45..0000000000
--- a/src/styles/edit/_editor.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.t-edit-handle-holder { display: none; }
-
-.l-grid-holder {
-    display: none;
-    @extend .abs;
-    pointer-events: none;
-    z-index: 0;
-    .l-grid {
-        @extend .abs;
-        &.l-grid-y { background-position: 0 1px; }
-    }
-}
-
-.s-status-editing {
-    $handleD: 5px;
-    .t-edit-handle-holder { display: block; }
-    .edit-corner,
-    .edit-handle {
-        position: absolute;
-        z-index: 2;
-    }
-
-    .edit-corner {
-        background: rgba($colorSelectableSelectedPrimary, 0.5);
-        cursor: crosshair;
-        display: none; // Hide by default
-        border: 1px solid $colorSelectableSelectedPrimary;
-        width: $handleD;
-        height: $handleD;
-        $o: (-1 * $handleD) + 1px;
-        &:hover {
-            z-index: 11;
-        }
-        &.edit-resize-nw { top: $o; left: $o; }
-        &.edit-resize-ne { top: $o; right: $o; }
-        &.edit-resize-se { bottom: $o; right: $o; }
-        &.edit-resize-sw { bottom: $o; left: $o; }
-    }
-
-    .edit-handle.edit-move {
-        // main move box for the whole frame element
-        $m: 0;
-        left: $m;
-        right: $m;
-        top: $m;
-        bottom: $m;
-        z-index: 1;
-    }
-
-    .frame.child-frame.panel {
-        &:hover {
-            .view-switcher {
-                opacity: 1;
-            }
-        }
-    }
-
-    // Editing Grids
-    .l-grid-holder {
-        .l-grid {
-            &.l-grid-x { @include bgTicks($colorGridLines, 'x'); }
-            &.l-grid-y { @include bgTicks($colorGridLines, 'y'); }
-        }
-    }
-
-    // Display grid when selected or selection parent.
-    [s-selected] .l-grid-holder,
-    [s-selected-parent] .l-grid-holder {
-        display: block;
-    }
-
-    // Display in nested frames...
-    .t-frame-outer {
-        // ...when drilled in or selection parent...
-        &.s-drilled-in, &[s-selected-parent] {
-            .l-grid-holder {
-                display: block;
-            }
-            .t-frame-outer:not(.s-drilled-in) .l-grid-holder {
-                display: none;
-            }
-        }
-        // ...but hide otherwise.
-        .l-grid-holder {
-            display: none;
-        }
-    }
-}
diff --git a/src/styles/features/_imagery.scss b/src/styles/features/_imagery.scss
deleted file mode 100644
index 857ef23522..0000000000
--- a/src/styles/features/_imagery.scss
+++ /dev/null
@@ -1,215 +0,0 @@
-.l-image-main-wrapper,
-.l-image-thumbs-wrapper,
-.image-main {
-	@include absPosDefault(0, false);
-}
-
-/*************************************** MAIN LAYOUT */
-.l-image-main-wrapper {
-	@if $enableImageryThumbs == true {
-		bottom: $interiorMargin*2 +  $imageThumbsWrapperH;
-	}
-	min-width: 150px;
-	.l-image-main {
-        margin-bottom: $interiorMargin;
-	}
-	.l-image-main-controlbar {
-        &.l-flex-row { align-items: center; }
-	}
-}
-
-.l-image-thumbs-wrapper {
-	top: auto;
-	min-height: $imageThumbsWrapperH;
-	max-height: 60%;
-	box-sizing: border-box;
-}
-
-.l-date,
-.l-time,
-.l-timezone {
-	display: inline-block;
-}
-
-/*************************************** MAIN IMAGE */
-
-.image-main,
-.l-image-thumb-item .l-thumb {
-	background-size: contain;
-	background-position: center;
-	background-repeat: no-repeat;
-}
-
-.l-image-main-controlbar {
-	font-size: 0.8em;
-	line-height: inherit;
-	.l-datetime-w, .l-controls-w {
-		direction: rtl;
-		overflow: hidden;
-	}
-	.l-datetime-w {
-        @include ellipsize();
-        margin-right: $interiorMarginSm;
-		text-align: left;
-	}
-	.l-controls-w {
-		z-index: 2;
-	}
-	.l-date,
-	.l-time {
-		color: pullForward($colorBodyFg, 20%);
-	}
-	.l-mag {
-		direction: ltr;
-		display: inline-block;
-		&:before {
-			content: "\000049";
-		}
-	}
-	.s-mag {
-		color: pushBack($colorBodyFg, 20%);
-	}
-	.l-btn.show-thumbs {
-		display: none;
-	}
-}
-
-.s-image-main {
-    background-color: $colorPlotBg;
-	border: 1px solid transparent;
-	&.paused {
-		@extend .s-unsynced;
-	}
-}
-
-/*************************************** THUMBS */
-
-.l-image-thumbs-wrapper {
-	overflow-x: hidden;
-	overflow-y: auto;
-	padding-bottom: $interiorMargin;
-	white-space: nowrap;
-}
-
-.l-image-thumb-item {
-	@include transition(background-color, 0.25s);
-	box-sizing: border-box;
-    cursor: pointer;
-    direction: ltr;
-    display: inline-block;
-    float: left;
-    font-size: 0.8em;
-	padding: 1px;
-    margin-left: $interiorMarginSm;
-    position: relative;
-    text-align: left;
-    width: $imageThumbsD + $imageThumbPad*2;
-    white-space: normal;
-	.l-thumb,
-	.l-date,
-	.l-time {
-		display: inline-block;
-	}
-	.l-date,
-	.l-time {
-		padding: 2px 3px;
-	}
-
-	&:hover {
-		background: $colorThumbHoverBg;
-		.l-date,
-		.l-time {
-			color: #fff;
-		}
-	}
-	&.selected {
-		background: $colorKeySelectedBg;
-		.l-date,
-		.l-time {
-			color: #fff;
-		}
-	}
-	.l-thumb {
-		background-color: rgba(#fff, 0.1);
-		height: $imageThumbsD;
-		width: $imageThumbsD;
-		margin-top: 0;
-	}
-}
-
-/*************************************** LOCAL CONTROLS */
-.t-imagery {
-	.h-local-controls.h-local-controls-overlay-content {
-		max-width: 200px;
-		min-width: 100px;
-		width: 35%;
-        align-items: center;
-        padding: $interiorMargin $interiorMarginLg;
-
-		input[type="range"] {
-			display: block;
-			width: 100%;
-			&:not(:first-child) {
-				margin-top: $interiorMarginLg;
-			}
-
-			&:before {
-				margin-right: $interiorMarginSm;
-			}
-		}
-
-		.t-reset-btn-holder {
-			$bc: $scrollbarTrackColorBg;
-			&:before,
-			&:after {
-				border-right: 1px solid $bc;
-				content:'';
-				display: block;
-				width: 5px;
-				height: 4px;
-			}
-
-			&:before {
-				border-top: 1px solid $bc;
-				margin-bottom: 2px;
-			}
-
-			&:after {
-				border-bottom: 1px solid $bc;
-				margin-top: 2px;
-			}
-		}
-	}
-}
-
-
-/*************************************** WHEN IN FRAME */
-.frame .t-imagery {
-	.l-image-main-wrapper {
-		bottom: 0 !important;
-        height: 100% !important;
-		.l-image-main-controlbar {
-			font-size: 0.7em;
-		}
-		@if $enableImageryThumbs == true {
-			.l-btn.show-thumbs {
-				display: inline-block;
-			}
-		}
-	}
-	.l-image-thumbs-wrapper,
-    mct-splitter {
-		display: none;
-	}
-}
-
-/*************************************** MOBILE */
-body.mobile.phone {
-  .t-imagery {
-    .l-image-main-wrapper,
-    .l-image-thumbs-wrapper {
-      //background: red;
-      min-height: 10px !important;
-    }
-  }
-}
diff --git a/src/styles/features/_time-display.scss b/src/styles/features/_time-display.scss
deleted file mode 100644
index 8c019860ad..0000000000
--- a/src/styles/features/_time-display.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-.l-time-display {
-	$transTime: 200ms;
-    $controlSize: 14px;
-    $control1ControlW: $controlSize + $interiorMargin;
-    $control2ControlW: $control1ControlW * 2;
-    line-height: 140%;
-	&:hover {
-		.l-btn.controls {
-			opacity: 1;
-		}
-	}
-
-	&.l-timer {
-        .l-value:before {
-            // Direction +/- element
-            font-size: $controlSize;
-            margin-right: $interiorMarginSm;
-
-        }
-        .controls {
-            @include trans-prop-nice((width, opacity), $transTime);
-            font-size: $controlSize;
-            line-height: inherit;
-            margin-right: 0;
-            opacity: 0;
-            width: 0;
-            .flex-elem {
-                margin-right: $interiorMargin;
-            }
-        }
-		&:hover .controls {
-            opacity: 1;
-			width: $control2ControlW;
-		}
-	}
-
-    .value {
-        color: pullForward($colorBodyFg, 50%);
-        font-weight: 400;
-    }
-
-    // States
-    &.s-state-stopped,
-    &.s-state-paused {
-        .l-value {
-            opacity: 0.4;
-        }
-    }
-
-    &.s-state-started {
-        .l-value {
-            opacity: 1;
-        }
-    }
-
-    &.s-state-stopped {
-        // Hide Stop button, 1controlW
-        .t-btn-stop {
-            display: none;
-        }
-        &:hover .controls {  width: $control1ControlW;  }
-
-    }
-
-    &.s-state-paused {
-        // Paused, do something visual
-        .l-value {
-            &:before { @extend .pulse; }
-        }
-    }
-}
diff --git a/src/styles/forms/_channel-selector.scss b/src/styles/forms/_channel-selector.scss
deleted file mode 100644
index c296f4c222..0000000000
--- a/src/styles/forms/_channel-selector.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.channel-selector {
-	.line {
-		margin-bottom: $interiorMargin;
-        min-height: $formInputH;
-	}
-	.treeview {
-		$myBg: darken($colorBodyBg, 2%);
-		@include subdued-input();
-		min-height: 300px;
-        max-height: 400px;
-		overflow: auto;
-		padding: $interiorMargin;
-	}
-	
-	.btns-add-remove {
-		margin-top: 150px;
-		.s-button {
-			display: block;
-			margin-bottom: $interiorMargin;
-			text-align: center;
-		}
-	}
-}
diff --git a/src/styles/forms/_datetime.scss b/src/styles/forms/_datetime.scss
deleted file mode 100644
index 57698e1f6e..0000000000
--- a/src/styles/forms/_datetime.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 complexFieldHolder($myW) {
-	width: $myW + $interiorMargin;
-	input[type="text"] {
-		width: $myW;
-	}
-}
-
-.complex.datetime {
-	span {
-		display: inline-block;
-		margin-right: $interiorMargin;
-	}
-
-/*
-	.field-hints,
-	.fields {
-	}
-
-	
-	.field-hints {
-
-	}
-	*/
-
-	.fields {
-		margin-top: $interiorMarginSm 0;
-		padding: $interiorMarginSm 0;
-	}
-	
-	.date {
-		@include complexFieldHolder(80px);
-	}
-
-	.time.md {
-		@include complexFieldHolder(60px);
-	}
-	
-	.time.sm {
-		@include complexFieldHolder(40px);
-	}
-}
diff --git a/src/styles/forms/_filter.scss b/src/styles/forms/_filter.scss
deleted file mode 100644
index d657b075f7..0000000000
--- a/src/styles/forms/_filter.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.filter,
-.t-filter {
-	input.t-filter-input {
-		&:not(.ng-dirty) + .t-a-clear {
-			display: none;
-		}
-	}
-	.icon.ui-symbol {
-		border-radius: $controlCr;
-		display: inline-block;
-		font-size: 1.3em;
-		height: $formInputH;
-		line-height: $formInputH;
-		padding: 0px 5px;
-		vertical-align: middle;
-		&:hover {
-			background: rgba(white, 0.1);
-		}
-	}
-	.s-a-clear.ui-symbol {
-		$mgn: 4.5px;
-		$d: $formInputH - $mgn * 2;
-		$cb: #fff;
-		$cf: #333;
-		border-radius: $controlCr;
-		box-sizing: border-box;
-		opacity: 0.2;
-		background: $cb;
-		color: $cf;
-		display: block;
-		position: absolute;
-		height: $d; width: $d;
-		line-height: $d;
-		margin-top: $d * -0.5;
-		overflow: hidden;
-		padding-top: 1px;
-		right: $mgn; top: 50%;
-		text-align: center;
-		z-index: 5;
-		&:hover {
-			opacity: 0.6;
-			background-color: $colorKey;
-		}
-	}
-}
-
-.top-bar {
-	input.filter {
-		$h: $ueTopBarH;
-		$ip: 10px;
-		font-size: .9em;
-		height: $h;
-		line-height: $h;
-		margin-right: $interiorMargin;
-		padding-left: $ip;
-		padding-right: $ip;
-		vertical-align: top;
-	}
-	.icon-filter {
-		font-size: 1.4em;
-	}
-}
-
-.l-filter {
-    $iconEdgeM: 4px;
-    $iconD: $formInputH - ($iconEdgeM * 2);
-    @extend .icon-magnify;
-    // Adds a magnifying glass before, holds an input and a clear button
-    position: relative;
-
-    input[type="search"] {
-        padding: 2px ($iconD + $interiorMargin);
-    }
-    .clear-icon,
-    .menu-icon,
-    &:before {
-        box-sizing: border-box;
-		color: $colorInputIcon;
-        display: inline-block;
-        line-height: inherit;
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 1;
-    }
-
-    &:before {
-        // Magnify glass icon
-        opacity: 0.7;
-        left: $interiorMargin;
-        @include trans-prop-nice(opacity, 250ms);
-        pointer-events: none;
-    }
-
-    &:hover:before {
-        opacity: 1;
-    }
-
-    .clear-icon {
-        right: $iconEdgeM;
-        // Icon is visible only when there is text input
-        visibility: hidden;
-        opacity: 0;
-        &.show {
-            visibility: visible;
-            opacity: 1;
-        }
-
-        &:hover {
-            color: pullForward($colorInputIcon, 10%);
-        }
-    }
-}
-
-.s-filter {
-    .clear-icon,
-    .menu-icon,
-    &:before {
-        color: $colorInputIcon;
-        cursor: pointer;
-        font-family: symbolsfont;
-        @include trans-prop-nice((opacity, color), 150ms);
-    }
-    // Make icon lighten when hovering over search bar
-    &:hover:before {
-        color: pullForward($colorInputIcon, 10%);
-    }
-}
diff --git a/src/styles/forms/_validation.scss b/src/styles/forms/_validation.scss
deleted file mode 100644
index 33180629aa..0000000000
--- a/src/styles/forms/_validation.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 labelValidate($sym, $c) {
-    > .label {
-        @include glyphAfter($sym);
-        &:after {
-            color: $c;
-            margin-left: $interiorMargin;
-        }
-    }
-}
-
-
-mct-form.validates {
-    .form-row.validates {
-        > .label {
-            padding-right: $reqSymbolM; // Keep room for validation element
-            &:after {
-                font-size: $reqSymbolFontSize;
-            }
-        }
-        &.invalid,
-        &.invalid.req { @include labelValidate($glyph-icon-x, $colorFormInvalid); }
-
-        &.valid,
-        &.valid.req { @include labelValidate($glyph-icon-check, $colorFormValid); }
-
-        &.req { @include labelValidate($glyph-icon-asterisk, $colorFormRequired); }
-    }
-}
-
-body.desktop .form-row.validates > .label {
-    &:after {
-        position: absolute;
-        right: $interiorMargin;
-        height: 100%;
-        line-height: 200%;
-    }
-}
diff --git a/src/styles/helpers/_bubbles.scss b/src/styles/helpers/_bubbles.scss
deleted file mode 100644
index b562b02b59..0000000000
--- a/src/styles/helpers/_bubbles.scss
+++ /dev/null
@@ -1,188 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-//************************************************* GENERAL
-
-
-//************************************************* LAYOUT
-
-.l-infobubble-wrapper {
-	$arwSize: 5px;
-	box-shadow: rgba(black, 0.4) 0 1px 5px;
-	position: relative;
-	z-index: 50;
-	.l-infobubble {
-		display: inline-block;
-		min-width: $bubbleMinW;
-		max-width: $bubbleMaxW;
-		padding: 5px 10px;
-		&:before {
-			content:"";
-			position: absolute;
-			width: 0;
-			height: 0;
-		}
-		table {
-			width: 100%;
-			tr {
-				td {
-					padding: 2px 0;
-					vertical-align: top;
-					&.label {
-						padding-right: $interiorMargin * 2;
-						white-space: nowrap;
-					}
-					&.value {
-						//word-wrap: break-word; // Doesn't work in <td>?
-						word-break: break-all;
-					}
-					&.align-wrap {
-						white-space: normal;
-					}
-				}
-			}
-		}
-		.title {
-			@include ellipsize();
-			margin-bottom: $interiorMargin;
-			//max-width: 200px;
-		}
-	}
-
-	&.arw-left {
-		margin-left: $bubbleArwSize*2;
-		.l-infobubble::before {
-			right: 100%;
-            // 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 {
-        // 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%;
-            // 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);
-            }
-		}
-	}
-
-	&.arw-top {
-		.l-infobubble::before {
-			top: $bubbleArwSize * 2;
-		}
-	}
-
-	&.arw-btm {
-		.l-infobubble::before {
-			bottom: $bubbleArwSize * 2;
-		}
-	}
-
-	&.arw-down {
-		margin-bottom: $arwSize*2;
-		.l-infobubble::before {
-			left: 50%;
-			top: 100%;
-			margin-left: -1 * $arwSize;
-			border-left: $arwSize solid transparent;
-			border-right: $arwSize solid transparent;
-			border-top: ($arwSize * 1.5) solid $colorInfoBubbleBg;
-		}
-	}
-	.arw {
-		z-index: 2;
-	}
-	&.arw-up .arw.arw-down,
-	&.arw-down .arw.arw-up {
-		display: none;
-	}
-}
-
-//************************************************* LOOK AND FEEL
-
-.l-thumbsbubble-wrapper {
-    .arw-up {
-        @include triangle('up', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-    }
-    .arw-down {
-        @include triangle('down', $bubbleArwSize, 1.5, $colorThumbsBubbleBg);
-    }
-}
-
-.s-infobubble {
-	$emFg: darken($colorInfoBubbleFg, 20%);
-	border-radius: $basicCr;
-	box-shadow: rgba(black, 0.4) 0 1px 5px;
-	background: $colorInfoBubbleBg;
-	color: $colorInfoBubbleFg;
-	font-size: 0.8rem;
-	.title {
-		color: $emFg;
-		font-weight: bold;
-	}
-	table {
-		tr {
-			td {
-				border: none;
-				border-top: 1px solid darken($colorInfoBubbleBg, 10%) !important;
-				font-size: 0.9em;
-			}
-
-			&:first-child td {
-				border-top: none !important;
-			}
-		}
-	}
-	&:first-child td {
-		border-top: none;
-	}
-
-	.label {
-		color: lighten($emFg, 30%);
-	}
-
-	.value {
-		color: $emFg;
-	}
-
-}
-
-.s-thumbsbubble {
-	background: $colorThumbsBubbleBg;
-	color: $colorThumbsBubbleFg;
-}
diff --git a/src/styles/helpers/_splitter.scss b/src/styles/helpers/_splitter.scss
deleted file mode 100644
index db7a5b1d0e..0000000000
--- a/src/styles/helpers/_splitter.scss
+++ /dev/null
@@ -1,133 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-.splitter {
-    // Redo the splitter.
-    // New look is a simple line.
-    // Main width is used to provide a good click area, and is always transparent
-    // :after will be a positioned and colored element that is the handle
-
-    display: block;
-    position: absolute;
-    z-index: 3;
-    &:after {
-        // The handle
-        content:"";
-        pointer-events: none;
-        @include absPosDefault(0);
-        background: $colorSplitterBg;
-        display: block;
-        z-index: 4;
-
-        @if $splitterEndCr != 'none' {
-            border-radius: $splitterEndCr;
-        }
-    }
-    &:active {
-        &:after {
-            background-color: $colorSplitterActive !important;
-        }
-    }
-
-    @if $colorSplitterHover != 'none' {
-        &:not(:active) {
-            &:hover {
-                &:after {
-                    background-color: $colorSplitterHover !important;
-                    @include trans-prop-nice(background-color, 150ms);
-                }
-            }
-        }
-    }
-}
-
-.split-layout {
-    $inset: splitterHandleInset($splitterD, $splitterHandleD);
-    &.horizontal {
-        // Slides vertically up and down, splitting the element horizontally
-        overflow: hidden; // Suppress overall scroll; each internal pane handles its own overflow
-        .pane {
-            left: 0;
-            right: 0;
-            &.top {
-                bottom: auto;
-            }
-            &.bottom {
-                top: auto;
-            }
-        }
-        >.splitter {
-            cursor: row-resize;
-            left: 0;
-            right: 0;
-            height: $splitterD;
-            &:after {
-                top: $inset; bottom: $inset;
-            }
-        }
-    }
-
-    &.vertical {
-        // Slides horizontally left to right, splitting the element vertically
-        .pane {
-            top: 0;
-            bottom: 0;
-            &.left {
-                right: auto;
-            }
-            &.right {
-                left: auto;
-            }
-        }
-        >.splitter {
-            cursor: col-resize;
-            top: 0;
-            bottom: 0;
-            width: $splitterD;
-            &:after {
-                left: $inset; right: $inset;
-                //width: $splitterHandleD;
-            }
-            &.flush-right {
-                width: ceil($splitterD / 2);
-                &:after {
-                    width: $splitterHandleD;
-                    left: auto; right: 0;
-                }
-                &.edge-shdw {
-                    @include background-image(linear-gradient(90deg, rgba(black, 0) 40%, rgba(black, 0.05) 70%, rgba(black, 0.2) 100%));
-                }
-            }
-        }
-    }
-    &.splitter-sm {
-        $inset: splitterHandleInset($splitterDSm, $splitterHandleD);
-        .horizontal >.splitter {
-            height: $splitterDSm;
-            &:after { top: $inset; bottom: $inset; }
-        }
-        .vertical >.splitter {
-            width: $splitterDSm;
-            &:after { left: $inset; right: $inset; }
-        }
-    }
-}
diff --git a/src/styles/helpers/_wait-spinner.scss b/src/styles/helpers/_wait-spinner.scss
deleted file mode 100644
index 3c80e52cf4..0000000000
--- a/src/styles/helpers/_wait-spinner.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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  spinner($b: 5px, $c: $colorKey) {
-    transform-origin: center;
-    @include animation-name(rotation-centered);
-    @include animation-duration(0.5s);
-    @include animation-iteration-count(infinite);
-    @include animation-timing-function(linear);
-    border-radius: 100%;
-    box-sizing: border-box;
-    border-color: rgba($c, 0.25);
-    border-top-color: rgba($c, 1.0);
-    border-style: solid;
-    border-width: $b;
-    display: block;
-    position: absolute;
-    left: 50%; top: 50%;
-}
-
-.wait-spinner {
-	@include spinner($waitSpinnerBorderW, $colorKey);
-	pointer-events: none;
-	z-index: 2;
-	&.inline {
-		display: inline-block !important;
-		margin-right: $interiorMargin;
-		position: relative !important;
-		vertical-align: middle;
-	}
-}
-
-.loading {
-	// Can be applied to any block element with height and width
-    pointer-events: none;
-    &:before,
-    &:after {
-        content: '';
-    }
-	&:before {
-        @include spinner($waitSpinnerBorderW, $colorLoadingFg);
-        height: $waitSpinnerD; width: $waitSpinnerD;
-        z-index: 10;
-	}
-    &:after {
-        @include absPosDefault();
-        background: $colorLoadingBg;
-        display: block;
-        z-index: 9;
-    }
-    &.tree-item.t-wait-node {
-        $d: $waitSpinnerTreeD;
-        $spinnerL: $treeVCW + $interiorMargin + 3px + $d/2;
-        padding-left: $spinnerL + $d/2 + $interiorMargin;
-        .t-title-label {
-            font-style: italic;
-            opacity: 0.6;
-        }
-        &:before {
-            height: $d;
-            width: $d;
-            border-width: 4px;
-            left: $spinnerL;
-        }
-        &:after {
-            display: none;
-        }
-    }
-}
diff --git a/src/styles/items/_item.scss b/src/styles/items/_item.scss
deleted file mode 100644
index b7897b13ec..0000000000
--- a/src/styles/items/_item.scss
+++ /dev/null
@@ -1,164 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 {
-    @include clearfix;
-    overflow-y: auto;
-	.contents {
-		top: 0;
-	}
-    .item {
-        $d: $ueBrowseGridItemLg;
-        $iconMargin: 40px;
-        $iconD: ($d - ($iconMargin * 2)) * 0.85;
-        box-sizing: border-box;
-        float: left;
-        height: $d;
-        width: $d;
-        margin-bottom: $interiorMarginSm;
-        margin-right: $interiorMarginSm;
-        position: relative;
-        &.grid-item {
-            $transTime: 200ms;
-            @include btnSubtle($bg: $colorItemBg, $bgHov: $colorItemBgHov, $fg: $colorItemFg, $fgHov: pullForward($colorItemFg, $hoverRatioPercent), $ic: $colorItemIc);
-            cursor: pointer;
-            &:hover .item-main {
-	            .item-type {
-		            color: lighten($colorKey, 10%);
-                    .l-icon-link {
-                        color: $colorIconLink;
-                    }
-                }
-	            .item-open {
-                    opacity: 1;
-	            }
-            }
-	        .abs.contents {
-                $m: $interiorMarginLg;
-		        top: $m; right: $m; bottom: $m; left: $m;
-	        }
-            .bar {
-                &.top-bar {
-                    bottom: auto;
-	                color: $colorItemSubIcons;
-                    height: $ueBrowseGridItemTopBarH;
-                    line-height: $ueBrowseGridItemTopBarH;
-                    text-align: right;
-	                z-index: 5;
-	                .left, .right {
-		                width: auto;
-		                .icon {
-			                margin-left: $interiorMarginSm;
-                            &.l-icon-link {
-                                color: $colorIconLink;
-                            }
-		                }
-	                }
-                }
-                &.bottom-bar {
-                    top: auto;
-                    line-height: 110%;
-                }
-            }
-            .item-main {
-	            $h: $ueBrowseGridItemLg;
-	            $lh: $h * 0.8;
-                line-height: $lh;
-	            z-index: 1;
-                .item-type,
-                .t-item-icon {
-                    transform: translateX(-50%) translateY(-55%);
-                    position: absolute;
-                    top: 50%; left: 50%;
-                    font-size: $iconD * 0.95;
-                    &.l-icon-link {
-                        .t-item-icon-glyph {
-                            &:after {
-                                transform: scale(0.25);
-                            }
-                        }
-                    }
-                }
-                .item-open {
-                    @include trans-prop-nice("opacity", $transTime);
-                    opacity: 0;
-	                color: $colorItemOpenIcon;
-                    font-size: 3em;
-                    left: auto; width: 50px;
-                    pointer-events: none;
-                    text-align: right;
-                }
-            }
-            .title {
-	            @include txtShdw($shdwItemText);
-                @include ellipsize();
-                color: $colorItemFg;
-            }
-            .details {
-                @include txtShdw($shdwItemText);
-                @include ellipsize();
-	            color: $colorItemFgDetails;
-                font-size: 0.8em;
-            }
-	        &.selected {
-		        $cfg: lighten($colorItemBgSelected, 35%);
-		        $cfgh: lighten($cfg, 30%);
-		        @include btnSubtle($bg: $colorItemBgSelected);
-		        color: $cfg;
-		        .item-type, .top-bar .icon:not(.alert) { color: $cfg }
-		        .item-main .item-open { color: $cfg }
-		        .title { color: $cfgh; }
-		        &:hover {
-			        .item-main .item-type { color: $cfgh !important; }
-		        }
-	        }
-        }
-    }
-}
-
-table.list-view {
-    $s: 1.2em;
-    width: 100%;
-    th, td {
-        cursor: pointer;
-    }
-    tr:hover td {
-        background-color: $colorItemBg;
-        color: $colorItemFg;
-    }
-    td {
-        $p: $interiorMargin;
-        @include ellipsize;
-        color: $colorItemFg;
-        font-size: 1em;
-        line-height: $s;
-        max-width: 0;
-        padding-top: $p;
-        padding-bottom: $p;
-    }
-    .t-item-icon {
-        font-size: $s;
-        margin-right: $interiorMargin;
-    }
-    .t-title-label {
-        @include ellipsize; // Yep, need it here too as well as the <td>
-    }
-}
diff --git a/src/styles/lists/_tabular.scss b/src/styles/lists/_tabular.scss
deleted file mode 100644
index 662ca693af..0000000000
--- a/src/styles/lists/_tabular.scss
+++ /dev/null
@@ -1,172 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.w1, .w2 {
-	position: relative;
-	height: 100%;
-}
-
-.tabular-holder {
-    @include absPosDefault();
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: flex-start;
-    > * {
-        position: relative;
-        flex: 0 0 auto;
-    }
-
-    &.l-sticky-headers {
-        .l-tabular-body {
-            flex: 1 1 99%;
-			overflow-x: auto;
-        }
-    }
-}
-
-.tabular,
-table {
-	box-sizing: border-box;
-	border-spacing: 0;
-	border-collapse: collapse;
-	display: table;
-	font-size: 0.75rem;
-	position: relative;
-	width: 100%;
-	thead, .thead,
-	tbody tr, .tbody .tr {
-		width: 100%;
-	}
-
-    thead tr th {
-        // Add some bg to the headers. Note that this is overwritten below
-        // by .mct-table-headers-w when headers are wrapped by that container.
-        background-color: $colorTabHeaderBg;
-    }
-
-	tbody, .tbody {
-		display: table-row-group;
-        tr, .tr {
-            border-top: 1px solid $colorTabBorder;
-        }
-	}
-	tr, .tr {
-		display: table-row;
-		&:first-child .td {
-			border-top: none;
-		}
-		&.group-header {
-			td, .td {
-				$d: 5%;
-				background-color: pushBack($colorTabHeaderBg, $d);
-				color: pushBack($colorTabHeaderFg, $d);
-			}
-		}
-		th, .th, td, .td {
-			display: table-cell;
-            font-size: 0.7rem;
-		}
-		th, .th {
-			border-left: 1px solid $colorTabHeaderBorder;
-			color: $colorTabHeaderFg;
-			padding: $tabularTdPadTB $tabularTdPadLR;
-			white-space: nowrap;
-			vertical-align: middle; // This is crucial to hiding f**king 4px height injected by browser by default
-			&:first-child {
-				border-left: none;
-			}
-			&.sort {
-				&.sort:after {
-					color: $colorIconLink;
-					font-family: symbolsfont;
-					font-size: 8px;
-					content: "\e906";
-					display: inline-block;
-					margin-left: $interiorMarginSm;
-				}
-				&.sort.desc:after {
-					content: "\e907";
-				}
-			}
-			&.sortable {
-				cursor: pointer;
-			}
-		}
-		td, .td {
-			min-width: 20px;
-			color: $colorTelemFresh;
-			padding: $tabularTdPadTB $tabularTdPadLR;
-			word-wrap: break-word;
-			vertical-align: top;
-			&.numeric {
-				text-align: right;
-			}
-			&.s-cell-type-value {
-				text-align: right;
-				.l-cell-contents {
-					border-radius: $smallCr;
-					padding-left: $itemPadLR;
-					padding-right: $itemPadLR;
-				}
-			}
-		}
-	}
-	&.filterable {
-		tbody, .tbody {
-			top: $tabularHeaderH * 2;
-		}
-        .l-filter {
-            input[type="text"],
-            input[type="search"] {
-                $p: 20px;
-                transition: padding 200ms ease-in-out;
-                box-sizing: border-box;
-                padding-right: $p; // Fend off from icon
-                padding-left: $p; // Fend off from icon
-                width: 100%;
-            }
-            &.active {
-                // When user has typed something, hide the icon and collapse left padding
-                &:before {
-                    opacity: 0;
-                }
-                input[type="text"],
-                input[type="search"] {
-                    padding-left: $interiorMargin;
-                }
-            }
-        }
-	}
-
-	&.t-event-messages {
-		td, .td {
-			min-width: 150px;
-		}
-	}
-}
-
-.mct-table-headers-w {
-    background: $colorTabHeaderBg;
-    overflow: hidden;
-    thead tr th {
-        background: none;
-    }
-}
diff --git a/src/styles/mobile/_constants.scss b/src/styles/mobile/_constants.scss
deleted file mode 100644
index 823c2910cf..0000000000
--- a/src/styles/mobile/_constants.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-/* REQUIRES /platform/commonUI/general/res/sass/_constants.scss */
-
-/************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */
-$mobileListIconSize: 30px;
-$mobileTitleDescH: 35px;
-$mobileOverlayMargin: 20px;
-$phoneItemH: floor($ueBrowseGridItemLg/4);
-$tabletItemH: floor($ueBrowseGridItemLg/3);
-
-/************************** MOBILE TREE MENU DIMENSIONS */
-$mobileTreeItemH: 35px;
-$mobileTreeItemIndent: 15px;
-$mobileTreeRightArrowW: 30px;
-
-/************************** DEVICE WIDTHS */
-// IMPORTANT! Usage assumes that ranges are mutually exclusive and have no gaps
-$phoMaxW: 767px;
-$tabMinW: 768px;
-$tabMaxW: 1024px;
-$desktopMinW: 1025px;
-
-/************************** MEDIA QUERIES: WINDOW CHECKS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-$screenPortrait: "(orientation: portrait)";
-$screenLandscape: "(orientation: landscape)";
-
-//$mobileDevice: "(max-device-width: #{$tabMaxW})";
-
-$phoneCheck: "(max-device-width: #{$phoMaxW})";
-$tabletCheck: "(min-device-width: #{$tabMinW}) and (max-device-width: #{$tabMaxW})";
-$desktopCheck: "(min-device-width: #{$desktopMinW}) and (-webkit-min-device-pixel-ratio: 1)";
-
-/************************** MEDIA QUERIES: WINDOWS FOR SPECIFIC ORIENTATIONS FOR EACH DEVICE */
-$phonePortrait: "only screen and #{$screenPortrait} and #{$phoneCheck}";
-$phoneLandscape: "only screen and #{$screenLandscape} and #{$phoneCheck}";
-
-$tabletPortrait: "only screen and #{$screenPortrait} and #{$tabletCheck}";
-$tabletLandscape: "only screen and #{$screenLandscape} and #{$tabletCheck}";
-
-$desktop: "only screen and #{$desktopCheck}";
-
-/************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */
-$proporMenuOnly: 90%;
-$proporMenuWithView: 40%;
diff --git a/src/styles/mobile/_item.scss b/src/styles/mobile/_item.scss
deleted file mode 100644
index c11f3c4fca..0000000000
--- a/src/styles/mobile/_item.scss
+++ /dev/null
@@ -1,133 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-// Sets the size of the items in the folder
-// representation. Instead of a grid,
-// a list is used.
-
-
-// Refactored to use Victorizr
-.items-holder {
-    .item {
-        &.grid-item {
-            $titleH: 30px;
-        }
-    }
-}
-
-body.phone,
-body.tablet {
-    .items-holder {
-        .item {
-            &.grid-item {
-                width: 100%;
-                >.contents {
-                    top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg;
-                }
-                .bar {
-                    &.top-bar {
-                        // Becomes the right side of the item
-                        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,
-                    .t-item-icon {
-                        font-size: $mobileListIconSize;
-                        left: $interiorMarginLg + $interiorMargin;
-                        line-height: normal;
-                    }
-                    .item-open {
-                        display: block;
-                        opacity: 1;
-                        font-size: 1em;
-                        width: auto;
-                    }
-                }
-            }
-        }
-    }
-}
-
-body.phone {
-    .items-holder {
-        .item {
-            &.grid-item {
-                $dHei: $phoneItemH;
-                height: $dHei;
-                .bar {
-                    &.top-bar {
-                        // Becomes the right side of the item
-                        line-height: $dHei !important;
-                    }
-                    &.bottom-bar {
-                        @include verticalCenterBlock($dHei, $mobileTitleDescH);
-                    }
-                }
-                .item-main {
-                    .item-type {
-                        @include verticalCenterBlock($dHei, $mobileListIconSize);
-                    }
-                    .item-open {
-                        line-height: $dHei;
-                    }
-                }
-            }
-        }
-    }
-}
-
-body.tablet {
-    .items-holder {
-        .item {
-            &.grid-item {
-                $dHei: $tabletItemH;
-                height: $dHei;
-                .bar {
-                    &.top-bar {
-                        // Becomes the right side of the item
-                        line-height: $dHei !important;
-                    }
-                    &.bottom-bar {
-                        @include verticalCenterBlock($dHei, $mobileTitleDescH);
-                    }
-                }
-                .item-main {
-                    .item-type {
-                        @include verticalCenterBlock($dHei, $mobileListIconSize);
-                    }
-                    .item-open {
-                        line-height: $dHei;
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/styles/mobile/_layout.scss b/src/styles/mobile/_layout.scss
deleted file mode 100644
index 07e64ae2af..0000000000
--- a/src/styles/mobile/_layout.scss
+++ /dev/null
@@ -1,158 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-body.mobile {
-    .pane.left.treeview {
-        background-color: $colorMobilePaneLeft;
-    }
-
-    .pane.right.items {
-        @include slMenuTransitions;
-        left: 0 !important;
-        margin-left: 0 !important;
-        .holder-object-and-inspector {
-            @include slMenuTransitions;
-            left: $bodyMargin;
-            right: $bodyMargin;
-            opacity: 1;
-        }
-    }
-
-    .create-button-holder {
-        // Hide the create button by default in mobile;
-        // This can be overridden by the examples/mobile bundle
-        display: none;
-    }
-
-    .holder.holder-treeview-elements {
-        right: $bodyMargin !important;
-    }
-
-    // Assume landscape layout or either orientation for tablet
-    // Phone portrait overrides below via media query
-    .pane-tree-hidden {
-        // Sets the left tree menu when the tree is hidden.
-        .pane.left.treeview {
-            @include trans-prop-nice(opacity, 150ms);
-            opacity: 0 !important;
-        }
-        .pane.right.items {
-            left: 0 !important;
-        }
-    }
-    
-    .pane-tree-showing {
-        // NOTE: DISABLED SELECTION
-        // Selection disabled in both panes
-        // causing cut/copy/paste menu to
-        // not appear. Should me moved in
-        // future to properly work
-
-        // Sets the left tree menu when the tree is shown.
-        .pane.left.treeview {
-            @include trans-prop-nice(opacity, 250ms, $delay: 250ms);
-            @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%));
-            right: auto !important;
-            width: $proporMenuWithView !important;
-        }
-        // Sets the right representation when the tree is shown.
-        .pane.right.items {
-            transform: translateX($proporMenuWithView);
-        }
-    }
-
-    .toggle-tree {
-        color: $colorKey !important;
-        font-size: 110%;
-        position: absolute;
-        top: $bodyMargin + 2;
-        left: $bodyMargin;
-        @extend .icon-menu-hamburger;
-    }
-
-    .object-browse-bar {
-        &.t-primary {
-            margin-left: 30px;
-
-            .title-label {
-                // Prevent inline editing of the object title in the main view in mobile
-                pointer-events: none;
-            }
-        }
-        .context-available {
-            font-size: 0.9em;
-            opacity: 1 !important;
-        }
-        .view-switcher {
-            .title-label {
-                // Hide the name in mobile
-                display: none;
-            }
-        }
-    }
-
-    .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;
-    }
-}
-
-body.phone.portrait {
-    .pane-tree-showing {
-        .pane.left.treeview {
-            width: $proporMenuOnly !important;
-        }
-        .pane.right.items {
-            left: 0 !important;
-            transform: translateX($proporMenuOnly);
-            .holder-object-and-inspector {
-                opacity: 0;
-            }
-        }
-    }
-}
-
-body.desktop {
-    .desktop-hide {
-        display: none;
-    }
-}
diff --git a/src/styles/mobile/_mixins.scss b/src/styles/mobile/_mixins.scss
deleted file mode 100644
index a3b41fcb03..0000000000
--- a/src/styles/mobile/_mixins.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-/* REQUIRES /platform/commonUI/general/res/sass/mobile/_constants.scss */
-
-// Phones in any orientation
-@mixin phone {
-    @media #{$phonePortrait},
-           #{$phoneLandscape} {
-        @content
-    }
-}
-
-//Phones in portrait orientation
-@mixin phonePortrait {
-    @media #{$phonePortrait} {
-        @content
-    }
-}
-
-// Phones in landscape orientation
-@mixin phoneLandscape {
-    @media #{$phoneLandscape} {
-        @content
-    }
-}
-
-// Tablets in any orientation
-@mixin tablet {
-    @media #{$tabletPortrait},
-           #{$tabletLandscape} {
-        @content
-    }
-}
-
-// Tablets in portrait orientation
-@mixin tabletPortrait {
-    @media #{$tabletPortrait} {
-        @content
-    }
-}
-
-// Tablets in landscape orientation
-@mixin tabletLandscape {
-    @media #{$tabletLandscape} {
-        @content
-    }
-}
-
-// Phones and tablets in any orientation
-@mixin phoneandtablet {
-    @media #{$phonePortrait},
-           #{$phoneLandscape},
-           #{$tabletPortrait},
-           #{$tabletLandscape} {
-        @content
-    }
-}
-
-// Desktop monitors in any orientation
-@mixin desktopandtablet {
-    // Keeping only for legacy - should not be used moving forward
-    // Use body.desktop, body.tablet instead.
-    @media #{$tabletPortrait},
-           #{$tabletLandscape},
-           #{$desktop} {
-        @content
-    }
-}
-
-// Desktop monitors in any orientation
-@mixin desktop {
-    // Keeping only for legacy - should not be used moving forward
-    // Use body.desktop instead.
-    @media #{$desktop} {
-        @content
-    }
-}
-
-// Transition used for the slide menu
-@mixin slMenuTransitions {
-    @include transition-duration(.35s);
-    transition-timing-function: ease;
-    backface-visibility: hidden;
-}
diff --git a/src/styles/mobile/_tree.scss b/src/styles/mobile/_tree.scss
deleted file mode 100644
index 2afd2a1185..0000000000
--- a/src/styles/mobile/_tree.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-body.touch {
-    ul.tree {
-        // 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 !important;
-		line-height: $mobileTreeItemH !important;
-		.view-control {
-            font-size: 1em;
-            width: ceil($mobileTreeItemH * 0.75);
-		}
-		.t-object-label {
-			line-height: inherit;
-            .t-item-icon.l-icon-link .t-item-icon-glyph:after {
-                bottom: 20%; // Shift up due to height of mobile menu items
-            }
-		}
-	}
-
-    .pane.treeview {
-        .tree-item,
-        .search-result-item {
-            @include containerSubtle($bg: $colorMobilePaneLeftTreeItemBg, $gradRatio: 2%);
-        }
-    }
-
-    .selector-list .tree-item {
-        @include containerBase($bg: $colorMobileSelectListTreeItemBg);
-    }
-}
diff --git a/src/styles/mobile/controls/_menus.scss b/src/styles/mobile/controls/_menus.scss
deleted file mode 100644
index 1b43ceb227..0000000000
--- a/src/styles/mobile/controls/_menus.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-// Override the Create menu for mobile
-@include phoneandtablet {
-    .super-menu {
-        $d: 250px;
-        width: $d;
-        height: $d;
-
-        .pane {
-            &.left {
-                border-right: none;
-                padding-right: 0;
-                width: 100%;
-            }
-            &.right {
-                display: none;
-            }
-        }
-    }
-}
diff --git a/src/styles/mobile/search/_search.scss b/src/styles/mobile/search/_search.scss
deleted file mode 100644
index ed45191f5c..0000000000
--- a/src/styles/mobile/search/_search.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@include phone {
-	.search-holder {
-		.search-bar {
-			// Hide menu-icon and adjust spacing when in phone mode
-			.menu-icon {
-				display: none;
-			}
-			.clear-icon {
-				right: $interiorMargin;
-			}
-		}
-	}
-}
diff --git a/src/styles/notebook/_notebook-base.scss b/src/styles/notebook/_notebook-base.scss
deleted file mode 100644
index fa3376c350..0000000000
--- a/src/styles/notebook/_notebook-base.scss
+++ /dev/null
@@ -1,294 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.w-notebook {
-    font-size: 0.8rem;
-    overflow: hidden;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
-    width: auto;
-    height: auto;
-}
-
-.notebook-view-controls.l-flex-row {
-    > * {
-        // filter and sort selects
-        &:not(:first-child) { margin-left: $interiorMargin; }
-    }
-}
-
-.l-notebook-drag-area {
-    padding: 10px;
-    font-style: italic;
-    cursor: pointer;
-    &:before { margin-right: 7px !important; }
-    .label {
-        @include ellipsize();
-    }
-}
-
-.frame {
-   .icon-notebook {
-        margin-right: 5px;
-    } 
-}
-
-.overlay.l-dialog .title{
-    white-space: normal;
-}
-
-.w-notebook-entries {
-    padding-right: $interiorMarginSm;
-    position: relative;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    .t-entries-list {
-    }
-}
-
-.l-notebook-entry {
-    $p: $interiorMarginSm;
-    box-sizing: border-box;
-    margin-bottom: $p;
-    padding: $p $interiorMargin;
-
-    .s-notebook-entry-time,
-    .s-notebook-entry-text,
-    .notebook-entry-delete {
-        padding-top: $p;
-        padding-bottom: $p;
-    }
-
-    .s-notebook-entry-time {
-        border: 1px solid transparent; // Needed to maintain vertical alignment with s-notebook-entry-text
-    }
-
-    .l-notebook-entry-content{
-        .s-notebook-entry-text {
-            // Contenteditable div that holds text
-            min-height: 24px; // Needed in Firefox when field is blank
-            white-space: pre-wrap;
-        }
-        .entry-embeds{
-            flex-wrap: wrap;
-        }
-        .snap-thumb {
-            cursor: pointer;
-        }
-    }
-}
-
-.l-entry-embed {
-    $m: $interiorMarginSm;
-    position: relative;
-    margin: $m $m 0 0;
-    padding: $interiorMarginSm;
-
-    &.has-snapshot {
-        &:before {
-            position: absolute;
-            text-shadow: rgba(black, 0.7) 0 1px 5px;
-            z-index: 2;
-        }
-    }
-    .snap-thumb {
-        $d: 50px;
-        width: $d;
-        height: $d;
-        border-radius: 5px;
-        overflow: hidden;
-        img {
-            height: 100%;
-            width: 100%;
-        }
-    }
-
-    .embed-info {
-        margin-left: $interiorMargin;
-        .embed-title {
-            font-weight: bold;
-        }
-    }
-}
-
-.t-contents,
-.snap-annotation {
-    // Todo: don't write this to t-contents, add a l- class
-    overflow: hidden;
-}
-
-.notebook-filters {
-    .select {
-        margin-left: $interiorMargin;
-    }
-}
-
-.s-status-taking-snapshot,
-.overlay.snapshot {
-    // Handle overflow-y issues with tables and html2canvas
-    .l-sticky-headers .l-tabular-body { overflow: auto; }
-}
-
-
-/********************************************* MOBILE */
-body.mobile {
-    // Hide the start entry area, and disable ability to edit or delete an entry in mobile context
-    .l-notebook-drag-area {
-        display: none;
-    }
-
-    .l-notebook-entry {
-        pointer-events: none;
-    }
-
-    &.phone.portrait {
-        .w-notebook-entry-time-and-content {
-            flex-direction: column !important;
-        }
-        .s-notebook-entry-time,
-        .notebook-entry-delete {
-            padding-top: 0;
-            padding-bottom: 0;
-        }
-    }
-}
-
-body.phone.portrait {
-    .l-notebook-head.l-flex-row {
-        flex-direction: column !important;
-        > * {
-            &:not(:first-child) { margin-top: $interiorMargin; }
-        }
-    }
-}
-
-/********************************************* PAINTERRO OVERRIDES */
-.annotation-dialog .abs.editor {
-    border-radius: 0;
-}
-
-#snap-annotation {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: 0; right: 0; bottom: 0; left: 0;
-}
-
-#snap-annotation-wrapper,
-#snap-annotation-bar {
-    position: relative;
-    top: auto; right: auto; bottom: auto; left: auto;
-}
-
-#snap-annotation-wrapper {
-    order: 2;
-    flex: 10 0 auto;
-}
-
-#snap-annotation-bar {
-    order: 1;
-    flex: 0 0 auto;
-    height: auto;
-    background-color: transparent !important;
-    margin-bottom: $interiorMargin;
-
-    > div,
-    > div > span,
-    .ptro-icon-btn,
-    .ptro-named-btn,
-    .ptro-color-btn,
-    .ptro-bordered-btn,
-    .ptro-tool-ctl-name,
-    .ptro-color-btn,
-    .tool-controls,
-    .ptro-input {
-        // Lot of resets for crappy CSS in Painterro
-        &:first-child {
-            margin-left: 0 !important;
-        }
-        $h: $btnToolbarH;
-        display: inline-block;
-        font-family: inherit;
-        font-size: auto;
-        height: $h !important;
-        margin: 0 0 0 5px;
-        position: relative;
-        width: auto !important;
-        line-height: $h !important;
-        top: auto;
-        right: auto;
-        bottom: auto;
-        left: auto;
-        vertical-align: top;
-    }
-
-    .ptro-tool-ctl-name {
-        border-radius: 0;
-        background: none;
-        top: auto;
-        font-family: inherit;
-        padding: 0;
-    }
-
-    .ptro-color-btn {
-        width: $btnToolbarH !important;
-    }
-
-    .ptro-icon-btn,
-    .ptro-named-btn {
-        // .s-button class is added via JS in AnnotateSnapshot.js
-        // TODO: redo this so that we don't need to use Zepto and JS
-        i {
-            font-size: 1.25em !important;
-        }
-    }
-
-    .tool-controls {
-        font-size: 0.8rem !important;
-    }
-
-    .ptro-info,
-    .ptro-btn-color-checkers-bar,
-    *[title="Font name"],
-    *[title="Stroke color"],
-    *[title="Stroke width"],
-    *[data-id="fontName"],
-    *[data-id="fontStrokeSize"],
-    *[data-id="stroke"] {
-        display: none;
-    }
-}
-
-/********************************************* NO IDEA WHAT THERE ARE APPLYING TO */
-.context-available {
-    outline: none;
-}
-
-.menu-element.menu-view{
-    z-index: 999;
-}
-
-.overlay.l-dialog .abs.editor {
-    padding-right: 0;
-}
diff --git a/src/styles/notebook/_notebook-thematic.scss b/src/styles/notebook/_notebook-thematic.scss
deleted file mode 100644
index 0dc1c76eff..0000000000
--- a/src/styles/notebook/_notebook-thematic.scss
+++ /dev/null
@@ -1,94 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-.l-notebook-drag-area {
-    border: 1px dashed rgba($colorKey, 0.7);
-    border-radius: $controlCr;
-    color: rgba($colorBodyFg, 0.7);
-    &:hover {
-        background: rgba($colorKey, 0.2);
-        color: $colorBodyFg;
-    }
-    &.drag-active{
-        border-color: $colorKey;
-    }
-}
-
-.s-notebook-entry {
-    transition: background-color 500ms ease-out;
-    background-color: rgba($colorBodyFg, 0.1);
-    border-radius: $basicCr;
-
-    &:hover {
-        transition: background-color 50ms ease-in;
-        background-color: rgba($colorBodyFg, 0.2);
-    }
-
-    .s-notebook-entry-time {
-        color: rgba($colorBodyFg, 0.5);
-    }
-}
-
-.l-entry-embed {
-    border-radius: $controlCr;
-    background-color: rgba($colorBodyFg, 0.1);
-    &.has-snapshot {
-        &:before {
-            color: $colorBodyFg;
-        }
-    }
-}
-
-.s-snapshot-datetime {
-    color: rgba($colorBodyFg, 0.4);
-    font-size: 0.8em;
-}
-
-.snap-thumb {
-    border: 1px solid $colorInteriorBorder;
-}
-
-.s-status-taking-snapshot,
-.overlay.snapshot {
-    // Applied to an object view when it's in the process of being snapshotted
-    background: $colorBodyBg;
-}
-
-/********************************************* PAINTERRO OVERRIDES */
-.ptro-wrapper {
-    background: rgba($colorBodyBg, 0.3) !important;
-}
-
-#snap-annotation-bar {
-    .tool-controls {
-        color: $colorBodyFg !important;
-    }
-}
-
-.s-button.ptro-color-active-control {
-    background: $colorBtnMajorBg  !important;
-    color: $colorBtnMajorFg !important;
-    &:hover {
-        background: $colorBtnMajorBgHov !important;
-        color: $colorBtnMajorFgHov !important;
-    }
-}
\ No newline at end of file
diff --git a/src/styles/notebook/notebook-espresso.scss b/src/styles/notebook/notebook-espresso.scss
deleted file mode 100644
index 42574e5033..0000000000
--- a/src/styles/notebook/notebook-espresso.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-
-@import "notebook-thematic";
diff --git a/src/styles/notebook/notebook-snow.scss b/src/styles/notebook/notebook-snow.scss
deleted file mode 100644
index 42574e5033..0000000000
--- a/src/styles/notebook/notebook-snow.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2017, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-
-@import "notebook-thematic";
diff --git a/src/styles/notebook/notebook.scss b/src/styles/notebook/notebook.scss
deleted file mode 100644
index 81a39e4bd7..0000000000
--- a/src/styles/notebook/notebook.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-@import "notebook-base";
diff --git a/src/styles/overlay/_overlay.scss b/src/styles/overlay/_overlay.scss
deleted file mode 100644
index c757dda289..0000000000
--- a/src/styles/overlay/_overlay.scss
+++ /dev/null
@@ -1,250 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-.overlay {
-    &.delayEntry100ms {
-        @include keyframes(fadeInFromNone) {
-            0% {
-                display: none;
-                opacity: 0;
-            }
-            100% {
-                display: block;
-                opacity: 1;
-            }
-        }
-        @include animation-delay($delayEntryMs);
-        @include animation(fadeInFromNone $durEntryMs ease-in);
-    }
-    .blocker {
-        background: $colorOvrBlocker;
-        z-index: 70;
-    }
-    .close {
-        $d: $interiorMargin;
-        opacity: 0.3;
-        position: absolute;
-        top: $d;
-        right: $d;
-        bottom: auto;
-        left: auto;
-        &:hover {
-            opacity: 0.6;
-        }
-    }
-
-    > .abs.outer-holder {
-        z-index: 70;
-        > .abs.inner-holder {
-            $m: $overlayMargin;
-            top: $m;
-            right: $m;
-            bottom: $m;
-            left: $m;
-        }
-    }
-
-    .bottom-bar {
-        text-align: right;
-        .s-button {
-            font-size: 95%;
-            height: $ovrFooterH;
-            line-height: $ovrFooterH;
-            margin-bottom: $interiorMarginSm;
-            padding: 0 $interiorMargin * 3;
-            &:not(:last-child) {
-                margin-right: $interiorMargin;
-            }
-        }
-    }
-
-    // Dialog boxes, size constrained and centered in desktop/tablet
-    &.l-dialog {
-        font-size: 0.8rem;
-        .s-button {
-            &:not(.major) {
-                @include btnSubtle($bg: $colorOvrBtnBg, $bgHov: pullForward($colorOvrBtnBg, 10%), $fg: $colorOvrBtnFg, $fgHov: $colorOvrBtnFg, $ic: $colorOvrBtnFg, $icHov: $colorOvrBtnFg);
-            }
-        }
-
-        > .abs.outer-holder {
-            @include desktopandtablet {
-                $max: 1280px;
-                transform: translate(-50%, -50%);
-                border-radius: $overlayCr;
-                top: 50%; right: auto; bottom: auto; left: 50%;
-                width: 70%; height: 70%;
-                min-width: 520px;
-                max-width: $max; max-height: $max;
-            }
-            @include phone {
-                overflow: auto;
-
-                .editor .form .form-row.l-flex-row  {
-                    // Display elements in a columnar view
-                    flex-direction: column;
-                    > .flex-elem {
-                        &:not(:first-child) {
-                            margin-top: $interiorMargin;
-                        }
-                        &.label {
-                            width: 100%;
-                        }
-                        &.controls {
-                            overflow: auto;
-                        }
-                    }
-
-                    &.validates > .label:before {
-                        position: relative;
-                        right: auto;
-                        line-height: inherit;
-                        margin-right: $interiorMargin;
-                    }
-                }
-            }
-
-            //@include containerSubtle($colorOvrBg, $colorOvrFg);
-        }
-
-        .dialog-title {
-            @include ellipsize();
-            font-size: 1.5em;
-            line-height: 120%;
-            margin-bottom: $interiorMargin;
-        }
-
-        .hint, .field-hints {
-            color: $colorFieldHintOverlay !important;
-        }
-
-        .abs.top-bar {
-            height: $ovrTopBarH;
-        }
-
-        .abs.bottom-bar {
-            top: auto;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            overflow: visible;
-            height: $ovrFooterH;
-        }
-
-        .abs.editor,
-        .abs.message-body {
-            top: $ovrTopBarH + $interiorMarginLg;
-            bottom: $ovrFooterH + $interiorMarginLg;
-            left: 0;
-            right: 0;
-            overflow: auto;
-            padding-right: $interiorMargin;
-            padding-bottom: $interiorMargin;
-            .field.l-input-med {
-                input[type='text'] {
-                    width: 100%;
-                }
-            }
-        }
-
-        .l-progress-bar {
-            $h: $progressBarHOverlay;
-            display: block;
-            height: $h;
-            line-height: $h;
-            margin: .5em 0;
-            width: 100%;
-        }
-
-        .select {
-            box-shadow: $shdwBtnsOverlay;
-        }
-    }
-
-    // Large view overlays for mobile and desktop
-    &.l-large-view {
-        > .abs.outer-holder {
-            @include keyframes(overlayIn) {
-                from {
-                    opacity: 0;
-                    transform: scale(0, 0);
-                }
-                to {
-                    opacity: 1;
-                    transform: scale(1.0, 1.0);
-                }
-            }
-
-            @include animToParams(overlayIn, $dur: $durLargeViewExpand, $delay: 0);
-            background: $colorBodyBg;
-            z-index: 71;
-
-            .abs.inner-holder {
-                opacity: 0;
-                @include keyframes(contentsIn) {
-                    from { opacity: 0; }
-                    to { opacity: 1; }
-                }
-                @include animToParams(contentsIn, $dur: 50ms, $delay: $durLargeViewExpand * 1.25);
-            }
-
-            // Hide View Large button
-            .t-btn-view-large {
-                display: none;
-            }
-
-            // But show View Large button when it's nested inside a Layout
-            .t-frame-inner .t-frame-inner .t-btn-view-large { display: block; }
-        }
-    }
-    // When multiple Large Views are visible, hide the blocker for all but the first
-    & + .l-large-view {
-        .blocker {
-            display: none;
-        }
-    }
-}
-
-body.desktop {
-    .overlay {
-        > .abs.outer-holder {
-            border-radius: $overlayCr;
-        }
-
-        &.l-large-view {
-            > .abs.outer-holder {
-                width: 90%;
-                height: 90%;
-                top: 5%;
-                left: 5%;
-                @include boxShdwLarge();
-            }
-        }
-    }
-
-    .t-dialog-sm .overlay > .outer-holder {
-        // Used for blocker and in-progress dialogs, modal alerts, etc.
-        $h: 225px;
-        max-height: $h;
-        height: $h;
-    }
-}
diff --git a/src/styles/plots/_legend.scss b/src/styles/plots/_legend.scss
deleted file mode 100644
index 9df9af0bf5..0000000000
--- a/src/styles/plots/_legend.scss
+++ /dev/null
@@ -1,208 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.gl-plot {
-    .gl-plot-legend {
-        min-height: $plotLegendH;
-
-        .view-control {
-            font-size: 1em;
-            margin-right: $interiorMarginSm;
-        }
-
-        table {
-            table-layout: fixed;
-            tr {
-                display: table-row;
-            }
-            th,
-            td {
-                @include ellipsize(); // Note: this won't work if table-layout uses anything other than fixed.
-                display: table-cell;
-                padding: 1px 3px; // Tighter than standard tabular padding
-            }
-        }
-
-        &.hover-on-plot {
-            // User is hovering over the plot to get a value at a point
-            .hover-value-enabled {
-                background-color: $legendHoverValueBg;
-                border-radius: $smallCr;
-                padding: 0 $interiorMarginSm;
-                &:before {
-                    opacity: 0.5;
-                }
-                &.cursor-hover,
-                .value-to-display-nearestTimestamp,
-                .value-to-display-nearestValue
-                {
-                    @extend .icon-crosshair-12px;
-                    &:before {
-                        font-size: 9px;
-                    }
-                }
-
-                &.value-to-display-min:before {
-                    content: 'MIN ';
-                }
-                &.value-to-display-max:before {
-                    content: 'MAX ';
-                }
-            }
-        }
-    }
-
-    &.plot-legend-collapsed .plot-wrapper-expanded-legend { display: none; }
-    &.plot-legend-expanded .plot-wrapper-collapsed-legend { display: none; }
-
-    /***************** GENERAL STYLES, ALL STATES */
-    .plot-legend-item {
-        // General styles for legend items, both expanded and collapsed legend states
-        .plot-series-color-swatch {
-            border-radius: $smallCr;
-            border: 1px solid $colorBodyBg;
-            display: inline-block;
-            height: $plotSwatchD;
-            width: $plotSwatchD;
-        }
-        .plot-series-name {
-            display: inline;
-        }
-
-        .plot-series-value {
-            @include ellipsize();
-        }
-    }
-
-    /***************** GENERAL STYLES, COLLAPSED */
-    &.plot-legend-collapsed {
-        // .plot-legend-item is a span of spans.
-        &.plot-legend-top .gl-plot-legend { margin-bottom: $interiorMargin; }
-        &.plot-legend-bottom .gl-plot-legend { margin-top: $interiorMargin; }
-        &.plot-legend-right .gl-plot-legend { margin-left: $interiorMargin; }
-        &.plot-legend-left .gl-plot-legend { margin-right: $interiorMargin; }
-
-        .plot-legend-item {
-            display: flex;
-            align-items: center;
-            &:not(:first-child) {
-                margin-left: $interiorMarginLg;
-            }
-            .plot-series-swatch-and-name,
-            .plot-series-value {
-                @include ellipsize();
-                flex: 1 1 auto;
-            }
-
-            .plot-series-swatch-and-name {
-                margin-right: $interiorMarginSm;
-            }
-
-            .plot-series-value {
-                text-align: left;
-                width: 170px;
-            }
-        }
-    }
-
-    /***************** GENERAL STYLES, EXPANDED */
-    &.plot-legend-expanded {
-        .gl-plot-legend {
-            max-height: 70%;
-        }
-
-        .plot-wrapper-expanded-legend {
-            overflow-y: auto;
-        }
-
-        &.plot-legend-top .gl-plot-legend {
-            margin-bottom: $interiorMargin;
-        }
-        &.plot-legend-bottom .gl-plot-legend {
-            margin-top: $interiorMargin;
-        }
-    }
-
-    /***************** TOP OR BOTTOM */
-    &.plot-legend-top,
-    &.plot-legend-bottom {
-        // General styles when legend is on the top or bottom
-        @extend .l-flex-col;
-        &.plot-legend-collapsed {
-            // COLLAPSED ON TOP OR BOTTOM
-            .plot-wrapper-collapsed-legend {
-                display: flex;
-                flex: 1 1 auto;
-                overflow: hidden;
-            }
-        }
-    }
-
-    /***************** EITHER SIDE */
-    &.plot-legend-left,
-    &.plot-legend-right {
-        @extend .l-flex-row;
-        // If the legend is expanded, use flex-col instead so that the legend gets the width it needs.
-        &.plot-legend-expanded {
-            // EXPANDED, ON EITHER SIDE
-            @extend .l-flex-col;
-        }
-
-        &.plot-legend-collapsed {
-            // COLLAPSED, ON EITHER SIDE
-            .gl-plot-legend {
-                max-height: inherit;
-                width: 25%;
-            }
-            .plot-wrapper-collapsed-legend {
-                display: flex;
-                flex-flow: column nowrap;
-                min-width: 0;
-                flex: 1 1 auto;
-                overflow-y: auto;
-            }
-            .plot-legend-item {
-                margin-bottom: 1px;
-                margin-left: 0;
-                flex-wrap: wrap;
-                .plot-series-swatch-and-name {
-                    flex: 0 1 auto;
-                    min-width: 20%;
-                }
-                .plot-series-value {
-                    flex: 0 1 auto;
-                    width: auto;
-                }
-            }
-        }
-    }
-
-    /***************** ON BOTTOM OR RIGHT */
-    &.plot-legend-right:not(.plot-legend-expanded),
-    &.plot-legend-bottom {
-        .gl-plot-legend {
-            order: 2;
-        }
-        .plot-wrapper-axis-and-display-area {
-            order: 1;
-        }
-    }
-}
diff --git a/src/styles/plots/_plots-main.scss b/src/styles/plots/_plots-main.scss
deleted file mode 100644
index fe034cf9e1..0000000000
--- a/src/styles/plots/_plots-main.scss
+++ /dev/null
@@ -1,379 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.abs.holder-plot {
-    right: $interiorMargin; // Fend off the scrollbar when less than min-height;
-    .t-object-alert.t-alert-unsynced {
-        display: none;
-    }
-}
-
-/********************************************* STACKED PLOT LAYOUT */
-.t-plot-stacked {
-    .l-view-section {
-        //  Make this a flex container
-        display: flex;
-        flex-flow: column nowrap;
-        .gl-plot.child-frame {
-            mct-plot {
-                display: flex;
-                flex: 1 1 auto;
-                height: 100%;
-                position: relative;
-            }
-            flex: 1 1 auto;
-            &:not(:first-child) {
-                margin-top: $interiorMargin;
-            }
-        }
-    }
-
-    .s-status-timeconductor-unsynced .holder-plot {
-        .t-object-alert.t-alert-unsynced {
-            display: block;
-        }
-    }
-}
-
-.gl-plot {
-    color: $colorPlotFg;
-    display: flex;
-    font-size: 0.7rem;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    min-height: $plotMinH;
-
-    /********************************************* AXIS AND DISPLAY AREA */
-    .plot-wrapper-axis-and-display-area {
-        margin-top: $interiorMargin; // Keep the top tick label from getting clipped
-        position: relative;
-        flex: 1 1 auto;
-        .t-object-alert {
-            position: absolute;
-            display: block;
-            font-size: 1.5em;
-            top: $interiorMarginSm;
-            left: $interiorMarginSm;
-        }
-    }
-
-    .gl-plot-wrapper-display-area-and-x-axis {
-        // Holds the plot area and the X-axis only
-        position: absolute;
-        top: nth($plotDisplayArea, 1);
-        right: nth($plotDisplayArea, 2);
-        bottom: 0;
-        left: nth($plotDisplayArea, 4);
-
-        .gl-plot-display-area {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: nth($plotDisplayArea, 3);
-            left: 0;
-        }
-
-        .gl-plot-axis-area.gl-plot-x {
-            top: auto;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            height: $plotXBarH;
-            width: auto;
-            overflow: hidden;
-        }
-    }
-
-    .gl-plot-axis-area {
-        position: absolute;
-        &.gl-plot-y {
-            top: nth($plotDisplayArea, 1);
-            right: auto;
-            bottom: nth($plotDisplayArea, 3);
-            left: 0;
-            width: $plotYBarW;
-        }
-    }
-
-    .gl-plot-coords {
-        box-sizing: border-box;
-        border-radius: $controlCr;
-        background: black;
-        color: lighten($colorBodyFg, 30%);
-        padding: 2px 5px;
-        position: absolute;
-        top: nth($plotDisplayArea,1) + $interiorMarginLg;
-        right: auto;
-        bottom: auto;
-        left: nth($plotDisplayArea,4) + $interiorMarginLg;
-        z-index: 10;
-        &:empty {
-            display: none;
-        }
-    }
-
-    .gl-plot-label,
-    .l-plot-label {
-        color: $colorPlotLabelFg;
-        position: absolute;
-        text-align: center;
-
-        &.gl-plot-x-label,
-        &.l-plot-x-label {
-            top: auto;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            height: auto;
-        }
-
-        &.gl-plot-y-label,
-        &.l-plot-y-label {
-            $x: -50%;
-            $r: -90deg;
-            transform-origin: 50% 0;
-            transform: translateX($x) rotate($r);
-            display: inline-block;
-            margin-left: $interiorMargin; // Kick off the left edge
-            left: 0;
-            top: 50%;
-            white-space: nowrap;
-        }
-    }
-
-    .gl-plot-x-options,
-    .gl-plot-y-options {
-        $h: 24px;
-        position: absolute;
-        height: $h;
-        min-height: $h;
-        z-index: 2;
-    }
-
-    .gl-plot-x-options {
-        transform: translateX(-50%);
-        bottom: 0;
-        left: 50%;
-    }
-
-    .gl-plot-y-options {
-        transform: translateY(-50%);
-        min-width: 150px; // Need this due to enclosure of .select
-        top: 50%;
-        left: $plotYLabelW + $interiorMargin * 2;
-    }
-
-    .t-plot-display-controls {
-        position: absolute;
-        top: $interiorMargin;
-        right: $interiorMargin;
-    }
-
-    .gl-plot-hash {
-        position: absolute;
-        opacity: $opacityPlotHash;
-        &.hash-v {
-            border-right: 1px $colorPlotHash $stylePlotHash;
-            height: 100%;
-        }
-        &.hash-h {
-            border-bottom: 1px $colorPlotHash $stylePlotHash;
-            width: 100%;
-        }
-    }
-
-    /****************************** Limits and Out-of-Bounds data */
-
-    .l-limit-bar,
-    .l-oob-data {
-        position: absolute;
-        left: 0;
-        right: 0;
-        width: auto;
-    }
-
-    .l-limit-bar {
-        // Limits in plot display area
-        @mixin limitBg($c) {
-            background: rgba($c, 0.2);
-        }
-
-        height: auto;
-        z-index: 0;
-        &.s-limit-yellow {
-            @include limitBg($colorLimitYellowBg);
-        }
-        &.s-limit-red {
-            @include limitBg($colorLimitRedBg);
-        }
-    }
-
-    .l-oob-data {
-        $c: #7748d6;
-        $a: 0.5;
-        $h: 10px;
-        @include absPosDefault();
-        pointer-events: none;
-        height: $h;
-        z-index: 1;
-        &.l-oob-data-up {
-            top: 0;
-            bottom: auto;
-            @include linearGlow(0deg, $c, $a);
-        }
-        &.l-oob-data-dwn {
-            bottom: 0;
-            top: auto;
-            @include linearGlow(180deg, $c, $a);
-        }
-    }
-}
-
-.gl-plot-display-area,
-.plot-display-area {
-    @if $colorPlotBg != none {
-        background-color: $colorPlotBg;
-    }
-    cursor: crosshair;
-    border: 1px solid $colorPlotAreaBorder;
-}
-
-.tick {
-    position: absolute;
-    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;
-    }
-}
-
-.gl-plot-tick,
-.tick-label {
-    @include reverseEllipsis();
-    font-size: 0.7rem;
-    position: absolute;
-    &.gl-plot-x-tick-label,
-    &.tick-label-x {
-        right: auto;
-        bottom: auto;
-        left: auto;
-        height: auto;
-        width: 20%;
-        margin-left: -10%;
-        text-align: center;
-    }
-    &.gl-plot-y-tick-label,
-    &.tick-label-y {
-        top: auto;
-        height: 1em;
-        width: auto;
-        margin-bottom: -0.5em;
-        text-align: right;
-    }
-}
-
-.gl-plot-tick {
-    &.gl-plot-x-tick-label {
-        top: $interiorMargin;
-    }
-    &.gl-plot-y-tick-label {
-        right: $interiorMargin;
-        left: $interiorMargin;
-    }
-}
-
-.tick-label {
-    &.tick-label-x {
-        top: 0;
-    }
-    &.tick-label-y {
-        right: 0;
-        left: 0;
-    }
-}
-
-.export-plot {
-    $bg: white;
-    $fg: black;
-    $gry: #999;
-
-    background: $bg !important;
-    z-index: -10;
-
-    .l-view-section {
-        $m: $interiorMargin;
-        top: $m !important;
-        right: $m;
-        bottom: $m;
-        left: $m;
-
-        .s-status-timeconductor-unsynced .holder-plot {
-            .t-object-alert.t-alert-unsynced {
-                display: none;
-            }
-        }
-    }
-
-    .gl-plot-display-area {
-        background: none !important;
-        border-color: $gry !important;
-
-        .gl-plot-local-controls,
-        .h-local-controls {
-            opacity: 0;
-        }
-    }
-
-    .gl-plot {
-        color: $fg;
-
-        .gl-plot-hash {
-            opacity: 0.1;
-            border-color: $fg;
-        }
-    }
-
-    table {
-        thead {
-            border-bottom: none;
-
-            th {
-                background: #eee;
-                border-left-color: $bg;
-                color: #666;
-            }
-
-            tr {
-                border: none;
-            }
-        }
-        tbody {
-            tr {
-                border-top: 1px solid #ccc;
-            }
-
-            td {
-                color: $fg;
-            }
-        }
-    }
-}
diff --git a/src/styles/search/_search.scss b/src/styles/search/_search.scss
deleted file mode 100644
index fb24734cde..0000000000
--- a/src/styles/search/_search.scss
+++ /dev/null
@@ -1,162 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-.clear-icon,
-.menu-icon {
-    cursor: pointer;
-    @include trans-prop-nice((opacity, color), 150ms);
-}
-
-.c-search-btn-wrapper,
-.c-search {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    position: relative;
-
-    > * {
-        &:not(:first-child) { margin-left: $interiorMargin; }
-    }
-}
-
-.c-search-btn-wrapper {
-    // Holds c-search and Cancel button
-    //@include test();
-    &.holder {
-        margin-bottom: $interiorMargin;
-    }
-
-}
-
-.c-search {
-    // New approach to search and filter inputs
-    // Block element
-    // Holds magnify glass icon, html input, cancel button, etc.
-    $m: $interiorMarginSm;
-    @include nice-input();
-    flex: 1 1 99%;
-    font-size: 0.8rem;
-    height: $btnStdH;
-    padding: 1px $interiorMargin;
-
-    > * {
-        display: inline-block;
-        flex: 0 0 auto;
-        position: relative;
-    }
-
-    &:before {
-        // Magnify glass icon
-        content: $glyph-icon-magnify;
-        font-family: symbolsfont;
-        opacity: 0.3;
-        pointer-events: none;
-        transition: opacity 500ms;
-    }
-
-    &:hover:before {
-        opacity: 0.6;
-    }
-}
-
-.c-search__clear-input {
-    // Icon is visible only when there is text input
-    visibility: hidden;
-    opacity: 0;
-    &.show {
-        visibility: visible;
-        opacity: 1;
-    }
-
-    &:hover {
-        opacity: 1;
-    }
-}
-
-input.c-search__search-input {
-    background: none  !important;
-    box-shadow: none !important; // !important needed to override default for [input]
-    flex: 1 1 99%;
-    min-width: 10px;
-    width: 100%;
-}
-
-.c-search__search-menu-holder {
-    left: 100%;
-    position: absolute;
-    transform: translate(-30px, 10px);
-    z-index: 70;
-}
-
-.holder-search {
-	$iconWidth: 20px;
-
-    .c-search-btn-wrapper {
-        margin-right: $interiorMarginLg; // Fend off rights side from pane splitter control
-    }
-
-    .results-msg {
-        font-size: 0.8rem;
-        opacity: 0.6;
-    }
-
-	.active-filter-display {
-		$s: 0.7rem;
-		$p: $interiorMargin;
-		box-sizing: border-box;
-		line-height: 130%;
-		padding-left: $s * 1.5;
-		font-size: $s;
-
-		.clear-filters {
-			opacity: 1;
-			font-size: 0.9em;
-            margin-right: $interiorMarginSm;
-			position: absolute;
-			left: 1px;
-			cursor: pointer;
-		}
-	}
-
-	.search-results {
-        @include trans-prop-nice((opacity, visibility), 250ms);
-		padding-right: $interiorMargin;
-        .hint {
-            margin-bottom: $interiorMarginLg;
-            font-size: 0.65em;
-            opacity: 0.6;
-        }
-        &.active {
-            visibility: visible;
-            opacity: 1;
-        }
-		.load-more-button {
-            transform: translateX(-50%);
-            display: inline-block;
-			margin-top: $interiorMargin;
-            padding: 0 $interiorMarginLg;
-			font-size: 0.75em;
-			margin-left: 50%;
-			white-space: nowrap;
-		}
-	}
-}
diff --git a/src/styles/style-guide/_style-guide-base.scss b/src/styles/style-guide/_style-guide-base.scss
deleted file mode 100644
index f92517e63c..0000000000
--- a/src/styles/style-guide/_style-guide-base.scss
+++ /dev/null
@@ -1,210 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.l-style-guide {
-    font-size: 0.9em;
-    text-align: justify;
-    margin: auto 10%;
-
-    a.link {
-        color: $colorKey;
-    }
-
-    h1, h2, strong, b {
-        color: pullForward($colorBodyFg, 50%);
-    }
-
-    h2 {
-        font-size: 1.25em;
-    }
-
-    h3 {
-        font-size: 0.9em;
-        margin: $interiorMargin 0;
-        &:not(:first-child) {
-            margin-top: $interiorMarginLg * 2;
-        }
-        text-transform: uppercase;
-    }
-
-    strong, b {
-        font-weight: normal;
-    }
-
-    .w-markup {
-        //Wrap markup example "pre" element
-        background-color: $colorCode;
-        border-radius: $interiorMargin;
-        display: block;
-        padding: $interiorMarginLg $interiorMarginLg;
-        position: relative;
-    }
-
-    .w-mct-example {
-        color: #ccc;
-        > div { margin-bottom: $interiorMarginLg; }
-    }
-
-    code,
-    pre {
-        font-size: 0.8rem;
-    }
-
-    code {
-        background-color: $colorCode;
-        border-radius: $controlCr;
-        display: inline-block;
-        padding: 1px $interiorMargin;
-    }
-
-    pre {
-        display: block;
-        margin: 0;
-        max-height: 300px;
-        overflow: auto;
-        padding-bottom: $interiorMarginLg;
-        white-space: pre;
-    }
-
-    table, ul {
-        margin-bottom: $interiorMarginLg;
-        width: auto;
-    }
-
-    .themed {
-        display: none; // Each themed styleguide file will set this to block.
-    }
-
-    .doc-title {
-        color: rgba(#fff, 0.3);
-        text-transform: uppercase;
-    }
-
-    .l-section {
-        border-top: 1px solid rgba(#999, 0.3);
-        margin-top: 2em;
-        padding-top: 1em;
-
-        .cols {
-            display: flex;
-            flex-direction: row;
-
-            .col {
-                flex: 1 1 auto;
-                &:not(:last-child) {
-                    $v: $interiorMargin * 4;
-                    border-right: 1px solid $colorInteriorBorder;
-                    margin-right: $v;
-                    padding-right: $v;
-                }
-                min-width: 300px;
-                img {
-                    width: 100%;
-                }
-            }
-
-            &.cols1-1 {
-                // 2 cols, equal width
-                .col {
-                    width: 50%;
-                }
-            }
-
-            &.cols1-2 {
-                // 3 cols, first is 1/3 of the width
-                .col:first-child {
-                    width: 33%;
-                }
-                .col:last-child {
-                    width: 66%;
-                }
-            }
-
-            &.cols2-1 {
-                // 3 cols, first is 2/3 of the width
-                .col:first-child {
-                    width: 66%;
-                }
-                .col:last-child {
-                    width: 33%;
-                }
-            }
-        }
-    }
-
-    // Example grid of glyphs
-    .items-holder.grid {
-        table.details {
-            width: 100%;
-            td {
-                font-size: inherit;
-                &.label {
-                    color: pushBack($colorBodyFg, 10%);
-                    text-transform: uppercase;
-                    white-space: nowrap;
-                }
-            }
-        }
-        .item.glyph-item,
-        .item.swatch-item {
-            margin-bottom: 50px;
-            margin-right: 10px;
-            position: relative;
-            text-align: left;
-            .glyph {
-                color: $colorGlyphExample;
-                font-size: 5em;
-                margin: $interiorMarginLg 0;
-                text-align: center;
-            }
-        }
-
-        .item.glyph-item {
-            width: 225px;
-            height: 200px;
-        }
-
-        .item.swatch-item {
-            $h: 150px;
-            $d: 75px;
-            width: 200px;
-            height: $h;
-            .glyph {
-                text-shadow: 0px 1px 10px rgba(black, 0.3);
-            }
-
-            .h-swatch {
-                position: relative;
-                height: $d + $interiorMarginLg;
-            }
-
-            .swatch {
-                height: $d; width: $d;
-                border: 1px solid $colorInteriorBorder;
-                border-radius: 15%;
-                position: absolute;
-                left: 50%;
-                transform: translateX(-50%);
-            }
-        }
-    }
-}
-
diff --git a/src/styles/style-guide/style-guide-espresso.scss b/src/styles/style-guide/style-guide-espresso.scss
deleted file mode 100644
index 1da75938f5..0000000000
--- a/src/styles/style-guide/style-guide-espresso.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 "bourbon";
-
-// Thematic constants
-$colorCode: rgba(black, 0.2);
-$colorGlyphExample: #fff;
-
-@import "style-guide-base";
-
-div.themed.espresso { display: block; }
-span.themed.espresso { display: inline; }
diff --git a/src/styles/style-guide/style-guide-snow.scss b/src/styles/style-guide/style-guide-snow.scss
deleted file mode 100644
index b057288d5b..0000000000
--- a/src/styles/style-guide/style-guide-snow.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2015, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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 "bourbon";
-
-// Thematic constants
-$colorCode: rgba(black, 0.1);
-$colorGlyphExample: darken($colorBodyBg, 30%);
-
-@import "style-guide-base";
-
-div.themed.snow { display: block; }
-span.themed.snow { display: inline; }
diff --git a/src/styles/theme-espresso.scss b/src/styles/theme-espresso.scss
deleted file mode 100644
index 920dd90ace..0000000000
--- a/src/styles/theme-espresso.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-
-@import "mixins";
-@import "mobile/mixins";
-@import "themes/espresso/mixins";
-
-@import "constants";
-@import "mobile/constants";
-@import "themes/espresso/constants";
-
-@import "main";
-@import "conductor/time-conductor-espresso";
-@import "notebook/notebook-espresso";
-@import "style-guide/style-guide-espresso";
diff --git a/src/styles/theme-snow.scss b/src/styles/theme-snow.scss
deleted file mode 100644
index 8303382d7b..0000000000
--- a/src/styles/theme-snow.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-$output-bourbon-deprecation-warnings: false;
-@import "bourbon";
-
-@import "mixins";
-@import "mobile/mixins";
-@import "themes/snow/mixins";
-
-@import "constants";
-@import "mobile/constants";
-@import "themes/snow/constants";
-
-@import "main";
-@import "themes/snow/controls";
-
-@import "conductor/time-conductor-snow";
-@import "notebook/notebook-snow";
-@import "style-guide/style-guide-snow";
-
-
-
-
-
-
-
-
diff --git a/src/styles/themes/espresso/_constants.scss b/src/styles/themes/espresso/_constants.scss
deleted file mode 100644
index 68f1af2101..0000000000
--- a/src/styles/themes/espresso/_constants.scss
+++ /dev/null
@@ -1,264 +0,0 @@
-// Global
-$colorBodyBg: #333;
-$colorBodyFg: #999;
-$colorGenBg: #222;
-$colorStatusBarBg: #000;
-$colorStatusBarFg: #999;
-$colorStatusBarFgHov: #aaa;
-$colorKey: #0099cc;
-$colorKeySelectedBg: #005177;
-$colorKeyFg: #fff;
-$colorKeyHov: #00c0f6;
-$colorEditAreaBg: #31363e;
-$colorEditAreaFg: #587ab5;
-$colorInteriorBorder: rgba($colorBodyFg, 0.1);
-$colorA: #ccc;
-$colorAHov: #fff;
-$contrastRatioPercent: 7%;
-$hoverRatioPercent: 10%;
-$basicCr: 3px;
-$controlCr: 2px;
-$smallCr: 2px;
-$overlayCr: 11px;
-
-// Buttons and Controls
-$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
-$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
-$colorBtnFg: $colorBodyFg;
-$colorBtnFgHov: pullForward($colorBtnFg, $hoverRatioPercent);
-$colorBtnIcon: $colorBtnFg;
-$colorBtnIconHov: $colorBtnFgHov;
-$colorBtnMajorBg: $colorKey;
-$colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent);
-$colorBtnMajorFg: $colorKeyFg;
-$colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent);
-$colorClickIcon: $colorKey;
-$colorClickIconHov: $colorKeyHov;
-$colorToggleIcon: rgba($colorBodyFg, 0.5);
-$colorToggleIconActive: $colorKey;
-$colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
-$colorInvokeMenu: #fff;
-$contrastInvokeMenuPercent: 30%;
-$shdwBtns: rgba(black, 0.2) 0 1px 2px;
-$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
-$sliderColorBase: $colorKey;
-$sliderColorRangeHolder: rgba(black, 0.1);
-$sliderColorRange: rgba($sliderColorBase, 0.3);
-$sliderColorRangeHov: rgba($sliderColorBase, 0.5);
-$sliderColorKnob: $sliderColorBase;
-$sliderColorKnobHov: pullForward($sliderColorKnob, $ltGamma);
-$sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
-$sliderColorRangeValHovFg: $colorKeyFg;
-$sliderKnobW: 15px;
-$sliderKnobR: 2px;
-$timeControllerToiLineColor: #00c2ff;
-$timeControllerToiLineColorHov: #fff;
-$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
-
-// Foundation Colors
-$colorAlt1: #ffc700;
-$colorAlert: #ff9900;
-$colorWarningHi: #cc0000;
-$colorWarningLo: #ff9900;
-$colorDiagnostic: #a4b442;
-$colorCommand: #3693bd;
-$colorInfo: #2294a2;
-$colorOk: #33cc33;
-$colorIconLink: #49dedb;
-$colorPausedBg: #c56f01;
-$colorPausedFg: #fff;
-$colorCreateBtn: $colorKey;
-$colorGridLines: rgba(#fff, 0.05);
-$colorInvokeMenu: #fff;
-$colorObjHdrTxt: $colorBodyFg;
-$colorObjHdrIc: lighten($colorObjHdrTxt, 20%);
-$colorTick: rgba(white, 0.2);
-$colorSelectableSelectedPrimary: $colorKey;
-$colorSelectableHov: rgba($colorBodyFg, 0.3);
-
-// Menu colors
-$colorMenuBg: pullForward($colorBodyBg, 23%);
-$colorMenuFg: pullForward($colorMenuBg, 70%);
-$colorMenuIc: pullForward($colorKey, 17%);
-$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
-$colorMenuHovFg: #fff;
-$colorMenuHovIc: $colorMenuHovFg;
-$shdwMenu: none;
-$shdwMenuText: rgba(black, 0.1) 0 1px 2px;
-$colorCreateMenuLgIcon: $colorMenuFg;
-$colorCreateMenuText: $colorMenuFg;
-
-// Form colors
-$colorCheck: $colorKey;
-$colorFormRequired: $colorAlt1;
-$colorFormValid: $colorOk;
-$colorFormError: $colorWarningHi;
-$colorFormInvalid: #ff3300;
-$colorFormFieldErrorBg: $colorFormError;
-$colorFormFieldErrorFg: rgba(#fff, 0.6);
-$colorFormLines: rgba(#fff, 0.1);
-$colorFormSectionHeader: rgba(#fff, 0.1);
-$colorInputBg: rgba(#000, 0.1);
-$colorInputFg: pullForward($colorBodyFg, 20%);
-$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
-$colorFormText: rgba(#fff, 0.5);
-$colorInputIcon: pushBack($colorBodyFg, 15%);
-$colorFieldHint: pullForward($colorBodyFg, 20%);
-
-// Inspector
-$colorInspectorBg: pullForward($colorBodyBg, 3%);
-$colorInspectorFg: $colorBodyFg;
-$colorInspectorPropName: pushBack($colorBodyFg, 15%);
-$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
-$colorInspectorSectionHeaderBg: $colorFormSectionHeader;
-$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
-
-// Status colors, mainly used for messaging and item ancillary symbols
-$colorStatusFg: #ccc;
-$colorStatusDefault: #999;
-$colorStatusInfo: $colorInfo;
-$colorStatusAlert: $colorAlert;
-$colorStatusError: #da0004;
-$colorStatusBtnBg: $colorBtnBg;
-$colorProgressBarOuter: rgba(#000, 0.1);
-$colorProgressBarAmt: $colorKey;
-$progressBarHOverlay: 15px;
-$progressBarStripeW: 20px;
-$shdwStatusIc: rgba(black, 0.4) 0 1px 2px;
-$animPausedPulseDur: 500ms;
-
-// Indicator colors
-$colorIndicatorAvailable: $colorKey;
-$colorIndicatorDisabled: #444;
-$colorIndicatorOn: $colorOk;
-$colorIndicatorOff: #666;
-
-// Selects
-$colorSelectBg: $colorBtnBg;
-$colorSelectFg: $colorBtnFg;
-
-// Limits, status and staleness colors
-$colorTelemFresh: pullForward($colorBodyFg, 20%);
-$colorTelemStale: pushBack($colorBodyFg, 20%);
-$styleTelemStale: italic;
-$colorLimitYellowBg: rgba($colorWarningLo, 0.3);
-$colorLimitYellowIc: $colorWarningLo;
-$colorLimitRedBg: rgba($colorWarningHi, 0.3);
-$colorLimitRedIc: $colorWarningHi;
-
-// Bubble colors
-$colorInfoBubbleBg: #ddd;
-$colorInfoBubbleFg: #666;
-$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
-$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
-
-// Overlay
-$colorOvrBlocker: rgba(black, 0.7);
-$colorOvrBg: pullForward($colorBodyBg, 10%);
-$colorOvrFg: pullForward($colorBodyFg, 30%);
-$colorOvrBtnBg: pullForward($colorOvrBg, 20%);
-$colorOvrBtnFg: #fff;
-$colorFieldHintOverlay: pullForward($colorOvrBg, 30%);
-$durLargeViewExpand: 250ms;
-
-// Items
-$colorItemBg: lighten($colorBodyBg, 5%);
-$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
-$colorItemFg: lighten($colorItemBg, 50%);
-$colorItemFgDetails: lighten($colorItemBg, 30%);
-$colorItemIc: $colorKey;
-$colorItemSubIcons: $colorItemFgDetails;
-$colorItemOpenIcon: $colorItemFgDetails;
-$shdwItemText: rgba(black, 0.1) 0 1px 2px;
-$colorItemBgSelected: $colorKey;
-
-// Tabular
-$colorTabBorder: pullForward($colorBodyBg, 5%);
-$colorTabBodyBg: darken($colorBodyBg, 10%);
-$colorTabBodyFg: lighten($colorTabBodyBg, 40%);
-$colorTabHeaderBg: rgba(white, 0.1);
-$colorTabHeaderFg: $colorBodyFg;
-$colorTabHeaderBorder: $colorBodyBg;
-
-// Plot
-$colorPlotBg: rgba(black, 0.1);
-$colorPlotFg: $colorBodyFg;
-$colorPlotHash: white;
-$opacityPlotHash: 0.2;
-$stylePlotHash: dashed;
-$colorPlotAreaBorder: $colorInteriorBorder;
-$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
-$legendCollapsedNameMaxW: 50%;
-$legendHoverValueBg: rgba($colorBodyFg, 0.1);
-
-// Tree
-$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
-$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
-$colorItemTreeIcon: $colorKey;
-$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
-$colorItemTreeFg: $colorBodyFg;
-$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
-$colorItemTreeSelectedFg: pullForward($colorBodyFg, 20%);
-$colorItemTreeEditingBg: #344154;
-$colorItemTreeEditingFg: $colorEditAreaFg;
-$colorItemTreeVC: $colorBodyFg;
-$colorItemTreeVCHover: pullForward($colorItemTreeVC, 20%);
-$colorItemTreeSelectedVC: $colorItemTreeVC;
-$shdwItemTreeIcon: 0.6;
-
-// Images
-$colorThumbHoverBg: $colorItemTreeHoverBg;
-
-// Scrollbar
-$scrollbarTrackSize: 7px;
-$scrollbarTrackShdw: rgba(#000, 0.5) 0 1px 5px;
-$scrollbarTrackColorBg: transparent; //rgba(#000, 0.4);
-$scrollbarThumbColor: pullForward($colorBodyBg, 10%);
-$scrollbarThumbColorHov: pullForward($scrollbarThumbColor, 2%);
-$scrollbarThumbColorOverlay: pullForward($colorOvrBg, 10%);
-$scrollbarThumbColorOverlayHov: pullForward($scrollbarThumbColorOverlay, 2%);
-$scrollbarThumbColorMenu: pullForward($colorMenuBg, 20%);
-$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
-
-// Splitter
-// All splitterD* values MUST both be either odd or even numbers
-$splitterD: 20px;
-$splitterDSm: 10px; // Smaller splitter, used inside elements like a Timeline view
-$splitterHandleD: 2px;
-$colorSplitterBaseBg: pullForward($colorBodyBg, 10%);
-$colorSplitterBg: $colorSplitterBaseBg;
-$splitterShdw: rgba(black, 0.4) 0 0 3px;
-$splitterEndCr: none;
-$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent);
-$colorSplitterActive: $colorKey;
-
-// Minitabs
-$colorMiniTabBg: $colorSplitterBg;
-$colorMiniTabFg: pushBack($colorMiniTabBg, 10%);
-$colorMiniTabBgHov: $colorSplitterHover;
-$colorMiniTabFgHov: #fff;
-
-// Mobile
-$colorMobilePaneLeft: darken($colorBodyBg, 5%);
-$colorMobilePaneLeftTreeItemBg: pullForward($colorMobilePaneLeft, 3%);
-$colorMobileSelectListTreeItemBg: rgba(#fff, 0.05);
-
-// Datetime Picker
-$colorCalCellHovBg: $colorKey;
-$colorCalCellHovFg: $colorKeyFg;
-$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
-$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
-$colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
-
-// Palettes
-$colorPaletteFg: pullForward($colorMenuBg, 30%);
-$colorPaletteSelected: #fff;
-$shdwPaletteFg: black 0 0 2px;
-$shdwPaletteSelected: inset 0 0 0 1px #000;
-
-// About Screen
-$colorAboutLink: #84b3ff;
-
-// Loading
-$colorLoadingFg: $colorAlt1;
-$colorLoadingBg: rgba($colorBodyFg, 0.2);
diff --git a/src/styles/themes/espresso/_mixins.scss b/src/styles/themes/espresso/_mixins.scss
deleted file mode 100644
index 43ee6718ab..0000000000
--- a/src/styles/themes/espresso/_mixins.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $gradRatio: 5%) {
-	@include containerBase($bg, $fg);
-	@include background-image(linear-gradient(pullForward($bg, $gradRatio), $bg));
-	@include boxShdw($shdwBtns);
-}
-
-@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);
-}
-
-@function bgFg($c) {
-    // Given a single color, return valid background and foreground versions of that color
-    $bg: darken($c, 20%);
-    $fg: lighten($c, 20%);
-    @return $bg, $fg;
-}
diff --git a/src/styles/themes/snow/_constants.scss b/src/styles/themes/snow/_constants.scss
deleted file mode 100644
index 2511902f68..0000000000
--- a/src/styles/themes/snow/_constants.scss
+++ /dev/null
@@ -1,264 +0,0 @@
-// Global
-$colorBodyBg: #fcfcfc;
-$colorBodyFg: #666;
-$colorGenBg: #fff;
-$colorStatusBarBg: #000;
-$colorStatusBarFg: #999;
-$colorStatusBarFgHov: #aaa;
-$colorKey: #0099cc;
-$colorKeySelectedBg: $colorKey;
-$colorKeyFg: #fff;
-$colorKeyHov: #00c0f6;
-$colorEditAreaBg: #eafaff;
-$colorEditAreaFg: #4bb1c7;
-$colorInteriorBorder: rgba($colorBodyFg, 0.2);
-$colorA: #999;
-$colorAHov: $colorKey;
-$contrastRatioPercent: 40%;
-$hoverRatioPercent: 10%;
-$basicCr: 4px;
-$controlCr: $basicCr;
-$smallCr: 3px;
-$overlayCr: 11px;
-
-// Buttons and Controls
-$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
-$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
-$colorBtnFg: #fff;
-$colorBtnFgHov: $colorBtnFg;
-$colorBtnIcon: #eee;
-$colorBtnIconHov: $colorBtnFgHov;
-$colorBtnMajorBg: $colorKey;
-$colorBtnMajorBgHov: $colorKeyHov;
-$colorBtnMajorFg: $colorKeyFg;
-$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
-$colorClickIcon: $colorKey;
-$colorClickIconHov: $colorKeyHov;
-$colorToggleIcon: rgba($colorClickIcon, 0.5);
-$colorToggleIconActive: $colorKey;
-$colorToggleIconHov: rgba($colorToggleIconActive, 0.5);
-$colorInvokeMenu: #000;
-$contrastInvokeMenuPercent: 40%;
-$shdwBtns: none;
-$shdwBtnsOverlay: none;
-$sliderColorBase: $colorKey;
-$sliderColorRangeHolder: rgba(black, 0.07);
-$sliderColorRange: rgba($sliderColorBase, 0.2);
-$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
-$sliderColorKnob: pushBack($sliderColorBase, 20%);
-$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
-$sliderColorRangeValHovBg: $sliderColorRange;
-$sliderColorRangeValHovFg: $colorBodyFg;
-$sliderKnobW: 15px;
-$sliderKnobR: 2px;
-$timeControllerToiLineColor: $colorBodyFg;
-$timeControllerToiLineColorHov: #0052b5;
-$colorTransLucBg: #666; // Used as a visual blocking element over variable backgrounds, like imagery
-
-// Foundation Colors
-$colorAlt1: #776ba2;
-$colorAlert: #ff3c00;
-$colorWarningHi: #990000;
-$colorWarningLo: #ff9900;
-$colorDiagnostic: #a4b442;
-$colorCommand: #3693bd;
-$colorInfo: #2294a2;
-$colorOk: #33cc33;
-$colorIconLink: #49dedb;
-$colorPausedBg: #ff9900;
-$colorPausedFg: #fff;
-$colorCreateBtn: $colorKey;
-$colorGridLines: rgba(#000, 0.05);
-$colorInvokeMenu: #fff;
-$colorObjHdrTxt: $colorBodyFg;
-$colorObjHdrIc: lighten($colorObjHdrTxt, 30%);
-$colorTick: rgba(black, 0.2);
-$colorSelectableSelectedPrimary: $colorKey;
-$colorSelectableHov: rgba($colorBodyFg, 0.4);
-
-// Menu colors
-$colorMenuBg: pushBack($colorBodyBg, 10%);
-$colorMenuFg: pullForward($colorMenuBg, 70%);
-$colorMenuIc: $colorKey;
-$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
-$colorMenuHovFg: $colorMenuFg;
-$colorMenuHovIc: $colorMenuIc;
-$shdwMenu: rgba(black, 0.5) 0 1px 5px;
-$shdwMenuText: none;
-$colorCreateMenuLgIcon: $colorKey;
-$colorCreateMenuText: $colorBodyFg;
-
-// Form colors
-$colorCheck: $colorKey;
-$colorFormRequired: $colorKey;
-$colorFormValid: $colorOk;
-$colorFormError: $colorWarningHi;
-$colorFormInvalid: #ff2200;
-$colorFormFieldErrorBg: $colorFormError;
-$colorFormFieldErrorFg: rgba(#fff, 0.6);
-$colorFormLines: rgba(#000, 0.1);
-$colorFormSectionHeader: rgba(#000, 0.05);
-$colorInputBg: $colorGenBg;
-$colorInputFg: $colorBodyFg;
-$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
-$colorFormText: pushBack($colorBodyFg, 10%);
-$colorInputIcon: pushBack($colorBodyFg, 25%);
-$colorFieldHint: pullForward($colorBodyFg, 40%);
-
-// Inspector
-$colorInspectorBg: pullForward($colorBodyBg, 5%);
-$colorInspectorFg: $colorBodyFg;
-$colorInspectorPropName: pushBack($colorBodyFg, 20%);
-$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
-$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
-$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
-
-// Status colors, mainly used for messaging and item ancillary symbols
-$colorStatusFg: #999;
-$colorStatusDefault: #ccc;
-$colorStatusInfo: #60ba7b;
-$colorStatusAlert: #ffb66c;
-$colorStatusError: #da0004;
-$colorStatusBtnBg: #666;
-$colorProgressBarOuter: rgba(#000, 0.1);
-$colorProgressBarAmt: #0a0;
-$progressBarHOverlay: 15px;
-$progressBarStripeW: 20px;
-$shdwStatusIc: rgba(white, 0.8) 0 0px 5px;
-$animPausedPulseDur: 1s;
-
-// Indicator colors
-$colorIndicatorAvailable: $colorKey;
-$colorIndicatorDisabled: #444;
-$colorIndicatorOn: $colorOk;
-$colorIndicatorOff: #666;
-
-// Selects
-$colorSelectBg: $colorBtnBg;
-$colorSelectFg: $colorBtnFg;
-
-// Limits and staleness colors//
-$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
-$colorInfoBubbleBg: $colorMenuBg;
-$colorInfoBubbleFg: #666;
-$colorThumbsBubbleFg: pullForward($colorBodyFg, 10%);
-$colorThumbsBubbleBg: pullForward($colorBodyBg, 10%);
-
-// Overlay
-$colorOvrBlocker: rgba(black, 0.7);//
-$colorOvrBg: $colorBodyBg;
-$colorOvrFg: $colorBodyFg;
-$colorOvrBtnBg: pullForward($colorOvrBg, 40%);
-$colorOvrBtnFg: #fff;
-$colorFieldHintOverlay: pullForward($colorOvrBg, 40%);
-$durLargeViewExpand: 250ms;
-
-// Items
-$colorItemBg: #ddd;
-$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent * 0.7);
-$colorItemFg: $colorBodyFg;
-$colorItemFgDetails: pushBack($colorItemFg, 15%);
-$colorItemIc: $colorKey;
-$colorItemSubIcons: $colorItemFgDetails;
-$colorItemOpenIcon: $colorItemFgDetails;
-$shdwItemText: none;
-$colorItemBgSelected: $colorKey;
-
-// Tabular
-$colorTabBorder: pullForward($colorBodyBg, 10%);
-$colorTabBodyBg: $colorBodyBg;
-$colorTabBodyFg: pullForward($colorBodyFg, 20%);
-$colorTabHeaderBg: pullForward($colorBodyBg, 10%);
-$colorTabHeaderFg: pullForward($colorBodyFg, 20%);
-$colorTabHeaderBorder: $colorBodyBg;
-
-// Plot
-$colorPlotBg: rgba(black, 0.05);
-$colorPlotFg: $colorBodyFg;
-$colorPlotHash: black;
-$opacityPlotHash: 0.2;
-$stylePlotHash: dashed;
-$colorPlotAreaBorder: $colorInteriorBorder;
-$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
-$legendCollapsedNameMaxW: 50%;
-$legendHoverValueBg: rgba($colorBodyFg, 0.2);
-
-// Tree
-$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
-$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
-$colorItemTreeIcon: $colorKey;
-$colorItemTreeIconHover: $colorItemTreeIcon;
-$colorItemTreeFg: $colorBodyFg;
-$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
-$colorItemTreeSelectedFg: $colorBodyBg;
-$colorItemTreeEditingBg: #caf1ff;
-$colorItemTreeEditingFg: $colorEditAreaFg;
-$colorItemTreeVC: $colorBodyFg;
-$colorItemTreeVCHover: $colorKey;
-$colorItemTreeSelectedVC: $colorBodyBg;
-$shdwItemTreeIcon: none;
-
-// Images
-$colorThumbHoverBg: $colorItemTreeHoverBg;
-
-// Scrollbar
-$scrollbarTrackSize: 7px;
-$scrollbarTrackShdw: rgba(#000, 0.2) 0 1px 2px;
-$scrollbarTrackColorBg: rgba(#000, 0.2);
-$scrollbarThumbColor: darken($colorBodyBg, 50%);
-$scrollbarThumbColorHov: $colorKey;
-$scrollbarThumbColorOverlay: darken($colorOvrBg, 50%);
-$scrollbarThumbColorOverlayHov: $scrollbarThumbColorHov;
-$scrollbarThumbColorMenu: pullForward($colorMenuBg, 10%);
-$scrollbarThumbColorMenuHov: pullForward($scrollbarThumbColorMenu, 2%);
-
-// Splitter
-// All splitterD* values MUST both be either odd or even numbers
-$splitterD: 16px;
-$splitterDSm: 10px; // Smaller splitter, used inside elements like a Timeline view
-$splitterHandleD: 2px;
-$colorSplitterBaseBg: $colorBodyBg;
-$colorSplitterBg: pullForward($colorSplitterBaseBg, 15%);
-$splitterShdw: none;
-$splitterEndCr: none;
-$colorSplitterHover: pullForward($colorSplitterBg, $hoverRatioPercent * 2);
-$colorSplitterActive: $colorKey;
-
-// Minitabs
-$colorMiniTabBg: $colorSplitterBg;
-$colorMiniTabFg: pullForward($colorMiniTabBg, 30%);
-$colorMiniTabBgHov: $colorSplitterHover;
-$colorMiniTabFgHov: #fff;
-
-// Mobile
-$colorMobilePaneLeft: darken($colorBodyBg, 2%);
-$colorMobilePaneLeftTreeItemBg: pullForward($colorMobilePaneLeft, 3%);
-$colorMobileSelectListTreeItemBg: rgba(#000, 0.05);
-
-// Datetime Picker, Calendar
-$colorCalCellHovBg: $colorKey;
-$colorCalCellHovFg: $colorKeyFg;
-$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
-$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
-$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
-
-// Palettes
-$colorPaletteFg: pullForward($colorMenuBg, 30%);
-$colorPaletteSelected: #333;
-$shdwPaletteFg: none;
-$shdwPaletteSelected: inset 0 0 0 1px #fff;
-
-// About Screen
-$colorAboutLink: #84b3ff;
-
-// Loading
-$colorLoadingFg: $colorAlt1;
-$colorLoadingBg: rgba($colorLoadingFg, 0.1);
diff --git a/src/styles/themes/snow/_controls.scss b/src/styles/themes/snow/_controls.scss
deleted file mode 100644
index f2156a656f..0000000000
--- a/src/styles/themes/snow/_controls.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.s-button {
-	&.major {
-		.title-label {
-			text-transform: uppercase;
-		}
-	}
-}
diff --git a/src/styles/themes/snow/_mixins.scss b/src/styles/themes/snow/_mixins.scss
deleted file mode 100644
index 03ad93685f..0000000000
--- a/src/styles/themes/snow/_mixins.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $gradRatio: 5%) {
-	@include containerBase($bg, $fg);
-	@include boxShdw($shdwBtns);
-}
-
-@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);
-}
-
-@function bgFg($c) {
-    // Given a single color, return valid background and foreground versions of that color
-    $bg: darken($c, 20%);
-    $fg: lighten($c, 20%);
-    @return $bg, $fg;
-}
-
diff --git a/src/styles/tree/_tree.scss b/src/styles/tree/_tree.scss
deleted file mode 100644
index 7f20277f5d..0000000000
--- a/src/styles/tree/_tree.scss
+++ /dev/null
@@ -1,192 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-ul.tree {
-    @include menuUlReset();
-    @include user-select(none);
-    > li {
-        display: block;
-        align-content: flex-end;
-        position: relative;
-        .grippy-sm {
-            font-size: 12px;
-            margin-right: $interiorMargin;
-            opacity: 0.5;
-            width: 1em;
-        }
-    }
-    ul.tree {
-        margin-left: $treeVCW + $interiorMargin;
-    }
-}
-
-.tree-item,
-.search-result-item {
-    @extend .l-flex-row;
-    box-sizing: border-box;
-    border-radius: $basicCr;
-    @include transition(background-color, 0.25s);
-    font-size: 0.8rem;
-    height: $menuLineH;
-    line-height: $menuLineH;
-    margin-bottom: $interiorMarginSm;
-    padding: 0 $interiorMarginSm;
-    position: relative;
-
-    .flex-elem {
-        height: inherit !important;
-        line-height: inherit !important;
-    }
-
-    .view-control {
-        color: $colorItemTreeVC;
-        margin-right: $interiorMargin;
-        width: $treeVCW;
-        &:before { display: block; }
-        &.no-children {
-            &:before { display: none; }
-        }
-    }
-
-    .t-object-label {
-        line-height: $menuLineH;
-        .t-item-icon {
-            @include txtShdwSubtle($shdwItemTreeIcon);
-            font-size: $treeTypeIconH;
-            color: $colorItemTreeIcon;
-            width: $treeTypeIconW;
-        }
-        .t-title-label {
-            @include ellipsize();
-        }
-    }
-
-    &.selected {
-        background: $colorItemTreeSelectedBg !important;
-        color: $colorItemTreeSelectedFg !important;
-        .view-control {
-            color: $colorItemTreeSelectedVC;
-        }
-        .t-object-label .t-item-icon {
-            color: $colorItemTreeSelectedFg;
-        }
-    }
-
-    &:not(.loading) {
-        cursor: pointer;
-    }
-
-    .context-trigger {
-        $h: 0.9rem;
-        top: -1px;
-        position: absolute;
-        right: $interiorMarginSm;
-        .invoke-menu {
-            font-size: 0.75em;
-            height: $h;
-            line-height: $h;
-        }
-    }
-}
-
-body.desktop {
-    .tree-item,
-    .search-result-item {
-        .view-control {
-            &:hover {
-                color: $colorItemTreeVCHover !important;
-            }
-        }
-        &:not(.selected) {
-            &:hover {
-                background: $colorItemTreeHoverBg;
-                color: $colorItemTreeHoverFg;
-                .t-item-icon {
-                    color: $colorItemTreeIconHover;
-                }
-            }
-        }
-    }
-}
-
-ul.tree.reordering {
-    // User is drag reordering a tree item in a container that allows the action
-    .tree-item:not(.reorder-actor):hover {
-        background: rgba($colorKey, 0.2);
-        border: 1px dashed rgba($colorKey, 1);
-        > * {
-            opacity: 0.25;
-        }
-    }
-}
-
-mct-representation {
-    &.s-status-pending {
-        .t-object-label {
-            .t-item-icon {
-                &:before {
-                    border-color: rgba($colorItemTreeIcon, 0.25);
-                    border-top-color: rgba($colorItemTreeIcon, 1.0);
-                }
-            }
-        }
-    }
-}
-
-.tree .s-status-editing,
-.search-results .s-status-editing {
-    // Item is being edited
-    .tree-item,
-    .search-result-item {
-        background: $colorItemTreeEditingBg;
-        pointer-events: none;
-        &:before {
-            // Pencil icon
-            @extend .ui-symbol;
-            @include pulse($dur: 1s, $opacity0: 0.25);
-            color: $colorItemTreeEditingFg;
-            content: $glyph-icon-pencil;
-            margin-right: $interiorMarginSm;
-        }
-        .t-object-label {
-            .t-item-icon,
-            .t-title-label {
-                color: $colorItemTreeEditingFg;
-                text-shadow: none;
-            }
-            .t-title-label {
-                font-style: italic;
-            }
-        }
-        .view-control, + .tree-item-subtree {
-            display: none;
-        }
-
-        &.selected {
-            .t-title-label,
-            .t-item-icon,
-            &:before {
-                color: rgba($colorItemTreeSelectedFg, 0.5);
-            }
-        }
-    }
-}
diff --git a/src/styles/user-environ/_frame.scss b/src/styles/user-environ/_frame.scss
deleted file mode 100644
index 10f959c5fe..0000000000
--- a/src/styles/user-environ/_frame.scss
+++ /dev/null
@@ -1,264 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.frame {
-    $ohH: $btnFrameH;
-    $bc: $colorInteriorBorder;
-
-    position: absolute;
-
-    &.child-frame.panel {
-        z-index: 0; // Needed to prevent child-frame controls from showing through when another child-frame is above
-        &:not(.no-frame) {
-            background: $colorBodyBg;
-            border-color: $bc;
-        }
-    }
-
-    .object-browse-bar {
-        font-size: 0.75em;
-        height: $ohH;
-        line-height: $ohH;
-        .right {
-            @include trans-prop-nice-fade($controlFadeMs);
-            padding-left: $interiorMargin;
-        }
-    }
-
-    &.t-object-type-timer,
-    &.t-object-type-clock,
-    &.t-object-type-hyperlink,
-    &.t-object-type-summary-widget {
-        // Hide the right side buttons for objects where they don't make sense
-        // Note that this will hide the view Switcher button if applied
-        // to an object that has it.
-        .object-browse-bar .right { display: none; }
-    }
-
-    > .object-holder.abs {
-        top: $ohH + $interiorMargin;
-    }
-    .contents {
-        $m: $interiorMargin;
-        top: $m;
-        right: $m;
-        bottom: $m;
-        left: $m;
-    }
-    &.frame-template {
-        .h-local-controls {
-            .s-button,
-            .s-menu-button {
-                height: $btnFrameH;
-                line-height: $btnFrameH;
-                padding: 0 $interiorMargin;
-                > span,
-                &:before {
-                    font-size: 0.65rem;
-                }
-            }
-        }
-
-        .s-menu-button:after {
-            font-size: 8px;
-        }
-
-        .view-switcher {
-            z-index: 10;
-        }
-    }
-    .view-switcher {
-        margin-right: $interiorMargin; // Kick other top bar elements away when I'm present.
-        // Hide the name when the view switcher is in a frame context
-        .title-label {
-            display: none;
-        }
-    }
-
-    &.no-frame {
-        background: transparent !important;
-        border-color: transparent;
-        .object-browse-bar .right {
-            $m: 0;
-            padding: $interiorMarginSm;
-            position: absolute;
-            top: $m; right: $m;
-            z-index: 2;
-        }
-        &.t-frame-outer > .t-rep-frame {
-            &.contents {
-                $m: 0px;
-                top: $m;
-                right: $m;
-                bottom: $m;
-                left: $m;
-            }
-
-            > .t-frame-inner {
-                &.t-object-type-layout {
-                    > .object-browse-bar {
-                        .t-btn-view-large {
-                            // When a nested layout has its frame hidden, don't display a view large button
-                            display: none;
-                        }
-                    }
-                }
-
-                > .object-browse-bar {
-                    .left {
-                        display: none;
-                    }
-                }
-
-                > .object-holder.abs {
-                    overflow: hidden;
-                    top: 0 !important;
-                }
-            }
-        }
-    }
-
-    &.t-frame-outer .title-label.s-input-inline {
-        // Prevent frame titles from being edited when nested in a Layout
-        pointer-events: none !important;
-    }
-
-    /********************************************************** OBJECT TYPES */
-    .t-object-type-hyperlink,
-    .t-object-type-summary-widget {
-        .object-holder {
-            overflow: hidden;
-        }
-        .w-summary-widget,
-        .l-summary-widget,
-        .l-hyperlink.s-button {
-            // Some object types expand to the full size of the object-holder.
-            @extend .abs;
-        }
-
-        .l-summary-widget,
-        .l-hyperlink.s-button {
-            .label {
-                @include ellipsize();
-                transform: translateY(-50%);
-                padding: 0 $interiorMargin;
-                position: absolute;
-                min-width: 0;
-                left: 0; right: 0;
-                text-align: center;
-                top: 50%;
-            }
-        }
-    }
-}
-
-body.desktop .frame {
-    // Hide local controls initially and show it them on hover when they're in an element that's in a frame context
-    // Frame template is used because we need to target the lowest nested frame
-    .object-browse-bar .btn-bar {
-        @include trans-prop-nice($props: opacity, $dur: 250ms);
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    // Target the first descendant so that we only show the elements in the outermost container.
-    // Handles the case where we have layouts in layouts.
-    &:hover > .object-browse-bar {
-        .btn-bar {
-            @include trans-prop-nice($props: opacity, $dur: 10ms);
-            opacity: 1;
-            pointer-events: inherit;
-        }
-    }
-}
-
-.holder-object:not(.s-status-editing) {
-    .l-layout {
-        &.fl-column,
-        &.fl-row,
-        &.fl-wrap,
-        &.fl-phone-best-fit,
-        &.fl-mobile-best-fit {
-            display: flex;
-            flex-wrap: nowrap;
-            align-content: stretch;
-            align-items: stretch;
-            > .frame {
-                display: block;
-                flex: 1 1 auto;
-                width: auto !important;
-                height: auto !important;
-                &.t-object-type-summary-widget {
-                    &.no-frame.t-frame-outer > .t-rep-frame {
-                        &.contents {
-                            // When frame is hidden, add a bit of margin to the contents
-                            $m: $interiorMargin;
-                            top: $m; right: $m; bottom: $m; left: $m;
-                        }
-                    }
-                }
-            }
-        }
-        &.fl-column {
-            flex-direction: column;
-            padding-right: $interiorMargin;
-        }
-        &.fl-row {
-            flex-direction: row;
-            padding-bottom: $interiorMargin;
-        }
-
-        &.fl-wrap {
-            align-content: flex-start;
-            align-items: flex-start;
-            flex-wrap: wrap;
-        }
-    }
-}
-
-.holder-object {
-    .l-layout {
-        &.fl-column,
-        &.fl-row,
-        &.fl-wrap,
-        &.fl-phone-best-fit,
-        &.fl-mobile-best-fit {
-            > .frame {
-                top: auto !important;
-                left: auto !important;
-                position: relative;
-            }
-        }
-    }
-}
-
-body.mobile {
-    .l-layout.fl-mobile-best-fit {
-        flex-wrap: wrap !important;
-        padding: 0 !important;
-    }
-    &.portrait .l-layout.fl-mobile-best-fit {
-        flex-direction: column !important;
-    }
-    &.landscape .l-layout.fl-mobile-best-fit {
-        flex-direction: row !important;
-    }
-}
diff --git a/src/styles/user-environ/_layout.scss b/src/styles/user-environ/_layout.scss
deleted file mode 100644
index 8cccbbad15..0000000000
--- a/src/styles/user-environ/_layout.scss
+++ /dev/null
@@ -1,382 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-.user-environ,
-.browse-area,
-.edit-area,
-.editor {
-    position: absolute;
-}
-
-.editor {
-    border-radius: $basicCr * 1.5;
-}
-
-.contents {
-    $myM: 0;
-    box-sizing: border-box;
-    position: absolute;
-    top: $myM;
-    right: $myM;
-    bottom: $myM;
-    left: $myM;
-    &.nomargin {
-        $myM: 0px;
-        right: $myM;
-        bottom: $myM;
-        left: $myM;
-    }
-}
-
-
-.status-holder {
-    text-transform: uppercase;
-}
-
-.s-ue-bottom-bar {
-    background: $colorStatusBarBg;
-    color: $colorStatusBarFg;
-    cursor: default;
-    font-size: .7rem;
-}
-
-.user-environ {
-    height: 100%;
-    width: 100%;
-    overflow: hidden !important;
-    .browse-area,
-    .editor {
-        top: 0; left: 0; right: 0; bottom: $ueFooterH;
-    }
-
-    .browse-area,
-    .edit-area {
-        > .contents {
-            left: 0;
-            right: 0;
-        }
-    }
-
-    .edit-area {
-        $tbH: $btnToolbarH + $interiorMargin;
-        top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
-        left: $bodyMargin;
-        right: $bodyMargin;
-        bottom: $bodyMargin + $ueFooterH;
-        .tool-bar {
-            bottom: auto;
-            height: $tbH;
-            line-height: $btnToolbarH;
-        }
-        .object-holder.work-area {
-            top: $tbH + $interiorMargin * 2;
-            overflow: auto;
-        }
-    }
-
-    .l-ue-bottom-bar {
-        $m: $interiorMarginSm;
-        @include absPosDefault(0, $overflow: visible);// New status bar design
-        top: auto;
-        height: $ueFooterH;
-        line-height: $ueFooterH - ($m * 2);
-        .status-holder {
-            box-sizing: border-box;
-            @include absPosDefault($m, $overflow: visible);
-            right: 120px;
-            z-index: 10;
-        }
-        .app-logo {
-            background-position: right center;
-            box-sizing: border-box;
-            @include absPosDefault($interiorMargin - 1);
-            cursor: pointer;
-            left: auto; right: $interiorMargin;
-            width: $ueAppLogoW;
-            z-index: 2;
-        }
-    }
-}
-
-.edit-mode {
-    // Old edit mode
-    .split-layout {
-        .split-pane-component.pane.right {
-            width: 15%;
-            .pane.bottom {
-                min-height: 50px;
-                height: 30%;
-            }
-        }
-    }
-}
-
-.pane {
-    box-sizing: border-box;
-    position: absolute;
-
-    .pane-header {
-        text-transform: uppercase;
-        height: $ueTopBarH;
-        line-height: $ueTopBarH;
-    }
-
-    .t-object.primary-pane {
-        // Need to lift up this pane to ensure that 'collapsed' panes don't block user interactions
-        z-index: 4;
-    }
-
-    .mini-tab-icon.toggle-pane {
-        z-index: 5;
-    }
-}
-
-body.desktop .pane .mini-tab-icon.toggle-pane {
-    $hi: splitterHandleInset($splitterD, $splitterHandleD);
-    $paneExpandedOffset: $hi + $splitterHandleD + $uePaneMiniTabW;
-    top: 0;
-
-    &.toggle-tree.anchor-left.collapsed,
-    &.toggle-inspect.anchor-right:not(.collapsed) {
-        @extend .icon-arrow-right;
-        border-bottom-right-radius: $controlCr;
-    }
-
-    &.toggle-tree.anchor-left:not(.collapsed),
-    &.toggle-inspect.anchor-right.collapsed {
-        @extend .icon-arrow-left;
-        border-bottom-left-radius: $controlCr;
-    }
-
-    &.toggle-tree.anchor-left {
-        left: 0;
-        transform: translateX(-1 * $paneExpandedOffset);
-        &.collapsed {
-            transform: translateX(-1 * $ueCollapsedPaneEdgeM);
-        }
-    }
-
-    &.toggle-inspect.anchor-right {
-        right: 0;
-        transform: translateX($paneExpandedOffset);
-        &.flush-right {
-            transform: translateX(($uePaneMiniTabW + ceil($splitterD / 2)));
-        }
-        &.collapsed {
-            transform: translateX($ueCollapsedPaneEdgeM);
-        }
-    }
-}
-
-.split-layout {
-    // Specific elements margins
-    .holder.holder-treeview-elements {
-        top: $bodyMargin;
-        right: 0;
-        bottom: $interiorMargin;
-        left: $bodyMargin;
-        .create-button-holder {
-            &.s-status-editing {
-                display: none;
-                & + .search-holder .search-bar {
-                    // .search-holder is adjacent sibling to .create-button-holder
-                    // Add right margin when create button is hidden, to make room for the collapse pane 'x' button
-                    margin-right: $interiorMarginLg * 2;
-                }
-            }
-        }
-    }
-
-    .holder.holder-object-and-inspector {
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        .holder-object {
-            top: $bodyMargin;
-            bottom: $interiorMargin;
-            // Clip element that have min-widths
-            overflow: hidden;
-        }
-        .holder-inspector {
-            top: $bodyMargin;
-            bottom: $interiorMargin;
-            left: $bodyMargin + $interiorMargin;
-            right: $bodyMargin;
-        }
-        .holder-elements {
-            top: 0;
-            bottom: $interiorMargin;
-            left: $bodyMargin;
-            right: $bodyMargin;
-        }
-    }
-}
-
-.object-holder {
-    @include absPosDefault(0, auto);
-    top: $ueTopBarH + $interiorMarginLg;
-}
-
-.l-object-wrapper {
-    padding: 0;
-    @include trans-prop-nice((padding), 0.25s);
-    .l-edit-controls {
-        @include trans-prop-nice((height), 0.5s);
-        height: 0;
-    }
-}
-
-.top-bar .buttons-main .s-button,
-.top-bar .s-menu-button,
-.tool-bar .s-button,
-.tool-bar .s-menu-button,
-.tool-bar .select,
-.tool-bar .input-labeled {
-    $h: $btnToolbarH;
-    height: $h;
-    line-height: $h;
-    vertical-align: top;
-}
-
-.object-browse-bar {
-    .l-object-action-buttons {
-        margin-left: $interiorMarginLg; // Kick the view switcher and other elements away
-    }
-}
-
-/***************************************************** OBJECT BROWSE BAR */
-.object-browse-bar {
-    box-sizing: border-box;
-    height: $ueTopBarH;
-    line-height: $ueTopBarH;
-    white-space: nowrap;
-
-    .left {
-        .l-back {
-            a {
-                display: inline-block;
-                text-align: center;
-                width: 24px;
-            }
-            margin-right: $interiorMargin;
-            &.s-status-editing { display: none; }
-        }
-    }
-}
-
-// When the tree is hidden, these are the classes used for the left menu and the right representation.
-.pane-tree-hidden {
-    // Sets the left tree menu when the tree is hidden.
-    .tree-holder,
-    .splitter-treeview,
-    .holder-treeview-elements {
-        opacity: 0;
-        pointer-events: none;
-    }
-}
-
-.pane-tree-showing {
-    // Sets the left tree menu when the tree is shown.
-    .tree-holder,
-    .splitter-treeview {
-        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
-        opacity: 1;
-    }
-
-    .holder-treeview-elements {
-        @include trans-prop-nice(opacity, $dur: 250ms, $delay: 200ms);
-    }
-}
-
-.pane-inspect-showing {
-    .l-object-and-inspector {
-        .l-inspect,
-        .splitter-inspect {
-            @include trans-prop-nice(opacity, $dur: 250ms, $delay: 250ms);
-            opacity: 1;
-        }
-    }
-}
-
-.pane-inspect-hidden {
-    .l-object-and-inspector {
-        .l-inspect,
-        .splitter-inspect {
-            opacity: 0;
-            pointer-events: none;
-        }
-    }
-}
-
-body.desktop {
-    .holder-all {
-        min-width: $ueDesktopMinW;
-    }
-    .split-layout {
-        .split-pane-component.pane {
-            &.treeview.left {
-                min-width: $ueBrowseLeftPaneTreeMinW;
-                max-width: $ueBrowseLeftPaneTreeMaxW;
-                width: $ueBrowseLeftPaneTreeW;
-            }
-            &.t-inspect.right {
-                min-width: $ueBrowseRightPaneInspectMinW;
-                max-width: $ueBrowseRightPaneInspectMaxW;
-                width: $ueBrowseRightPaneInspectW;
-                z-index: 3; // Must lift up beyond primary pane to allow overflow to go underneath
-            }
-        }
-    }
-    .pane.treeview.left .tree-holder {
-        padding-right: $interiorMargin;
-    }
-    .pane-tree-hidden {
-        .pane.right.primary-pane { left: $ueCollapsedPaneEdgeM !important; }
-    }
-    .pane-inspect-hidden .l-object-and-inspector {
-        .pane.left { right: $ueCollapsedPaneEdgeM !important; }
-    }
-    .pane:not(.resizing) {
-        @include trans-prop-nice-resize-w(250ms);
-    }
-    .pane.primary-pane > .object-browse-bar {
-        min-width: 200px; // Needed for nice display when primary pane is constrained severely via splitters
-    }
-}
-
-.s-status-editing {
-    .l-object-wrapper {
-        background-color: $colorEditAreaBg;
-        border-radius: $controlCr;
-        border: 1px dotted $colorEditAreaFg;
-        padding: $interiorMargin;
-
-        .l-edit-controls {
-            height: $ueEditToolBarH + $interiorMargin; margin-bottom: $interiorMargin;
-            border-bottom: 1px solid $colorInteriorBorder;
-            .tool-bar {
-                right: $interiorMargin;
-            }
-        }
-    }
-}
diff --git a/src/styles/user-environ/_selecting.scss b/src/styles/user-environ/_selecting.scss
deleted file mode 100644
index b63125a86e..0000000000
--- a/src/styles/user-environ/_selecting.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-
-.s-hover-border {
-    border: 1px solid transparent;
-}
-
-body.desktop {
-    .s-hover-border {
-        &:hover {
-            border-color: rgba($colorBodyFg, 0.3) !important;
-        }
-    }
-
-    .s-status-editing {
-        // Limit to editing mode
-        $o: 0.5;
-        $oHover: 0.8;
-        $bc: $colorSelectableSelectedPrimary;
-        .s-hover-border {
-            // Show a border by default so user can see object bounds and empty objects
-            border-color: rgba($bc, $o) !important;
-            border-style: dotted !important;
-
-            &:hover {
-                border-color: rgba($bc, $oHover) !important;
-            }
-
-            &.t-object-type-layout {
-                border-style: dashed !important;
-            }
-        }
-        [s-selected] {
-            > .s-hover-border,
-            &.s-hover-border {
-                // Styles for a selected object. Also used by legacy Fixed Position/Panel objects.
-                @include boxShdwLarge();
-                // Show edit-corners if you got 'em
-                .edit-corner {
-                    display: block;
-                    &:hover {
-                        background-color: rgba($colorKey, 1);
-                    }
-                }
-            }
-
-            &.s-moveable {
-                &:not(.s-drilled-in) {
-                    cursor: move;
-                }
-            }
-        }
-    }
-
-    [s-selected] > .s-hover-border,
-    [s-selected].s-hover-border {
-        border-color: $colorSelectableSelectedPrimary !important;
-        //z-index: 1; // Bring selected item from beneath others. BUT, this breaks editing in Fixed Position.
-    }
-}
-
-
-
diff --git a/src/styles/user-environ/_tool-bar.scss b/src/styles/user-environ/_tool-bar.scss
deleted file mode 100644
index e4ce0de07e..0000000000
--- a/src/styles/user-environ/_tool-bar.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.tool-bar {
-    font-size: 0.7rem;
-    &.btn-bar {
-        white-space: nowrap;
-    }
-	.l-control-group {
-		height: $btnToolbarH;
-	}
-	input[type="text"],
-    input[type="search"],
-    input[type="number"] {
-		box-sizing: border-box;
-		height: $btnToolbarH;
-		position: relative;
-		&.sm {
-			width: $btnToolbarH;
-		}
-	}
-	.input-labeled label {
-		font-size: $btnToolbarH * $btnFontSizeToH;
-	}
-}
diff --git a/src/styles/user-environ/_top-bar.scss b/src/styles/user-environ/_top-bar.scss
deleted file mode 100644
index 221425ed01..0000000000
--- a/src/styles/user-environ/_top-bar.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2018, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT 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 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.
- *****************************************************************************/
-.top-bar {
-    &.browse,
-    &.edit {
-	    border-bottom: 1px solid $colorInteriorBorder;
-        top: $bodyMargin; right: $bodyMargin; bottom: auto; left: $bodyMargin;
-        height: $ueTopBarEditH;
-		line-height: $ueTopBarH;
-    }
-	
-/*	.title {
-		color: #fff;
-	}*/
-	
-	.buttons-main {
-		font-size: 0.8em;
-		left: auto;
-		text-align: right;
-//		width: 200px;
-//		.btn {
-//			margin-left: $interiorMargin;
-//		}
-	}
-}
-
-.edit-mode {
-	.top-bar {
-		.buttons-main {
-            // Old edit mode
-			white-space: nowrap;
-			&.abs {
-				bottom: auto;
-				left: auto;
-			}
-		}
-	}
-}
diff --git a/src/styles/vendor/normalize.min.css b/src/styles/vendor/normalize.min.css
deleted file mode 100644
index 002716b92f..0000000000
--- a/src/styles/vendor/normalize.min.css
+++ /dev/null
@@ -1 +0,0 @@
-/*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
diff --git a/src/ui/components/ObjectLabel.vue b/src/ui/components/ObjectLabel.vue
index 77382233ff..a74a253d4d 100644
--- a/src/ui/components/ObjectLabel.vue
+++ b/src/ui/components/ObjectLabel.vue
@@ -1,15 +1,48 @@
 <template>
-<a class="c-tree__item__label"
+<a class="c-tree__item__label c-object-label"
     draggable="true"
     @dragstart="dragStart"
     @click="navigateOrPreview"
     :href="objectLink">
-    <div class="c-tree__item__type-icon"
+    <div class="c-tree__item__type-icon c-object-label__type-icon"
         :class="typeClass"></div>
-    <div class="c-tree__item__name">{{ observedObject.name }}</div>
+    <div class="c-tree__item__name c-object-label__name">{{ observedObject.name }}</div>
 </a>
 </template>
 
+<style lang="scss">
+    @import "~styles/sass-base";
+    .c-object-label {
+        // <a> tag and draggable element that holds type icon and name.
+        // Used mostly in trees and lists
+        border-radius: $controlCr;
+        display: flex;
+        align-items: center;
+        flex: 1 1 auto;
+        overflow: hidden;
+        padding: $interiorMarginSm;
+        white-space: nowrap;
+
+        &__name {
+            @include ellipsize();
+            display: inline;
+            color: $colorItemTreeFg;
+            width: 100%;
+        }
+
+        &__type-icon {
+            // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
+            display: block;
+            flex: 0 0 auto;
+            font-size: 1.3em;
+            margin-right: $interiorMarginSm;
+            color: $colorItemTreeIcon;
+            width: $treeTypeIconW;
+        }
+    }
+</style>
+
+
 <script>
 
 import ObjectLink from '../mixins/object-link';
diff --git a/src/ui/inspector/Elements.vue b/src/ui/inspector/Elements.vue
index 78ed569c2f..f5ad0bf473 100644
--- a/src/ui/inspector/Elements.vue
+++ b/src/ui/inspector/Elements.vue
@@ -6,7 +6,7 @@
         @clear="applySearch">
     </Search>
     <div class="c-elements-pool__elements">
-        <ul class="tree c-tree c-elements-pool__tree" id="inspector-elements-tree"
+        <ul class="c-tree c-elements-pool__tree" id="inspector-elements-tree"
             v-if="elements.length > 0">
             <li :key="element.identifier.key" v-for="(element, index) in elements" @drop="moveTo(index)" @dragover="allowDrop">
                 <div class="c-tree__item c-elements-pool__item">
diff --git a/src/ui/inspector/Inspector.vue b/src/ui/inspector/Inspector.vue
index 5a903efcc8..c4e65f75b3 100644
--- a/src/ui/inspector/Inspector.vue
+++ b/src/ui/inspector/Inspector.vue
@@ -57,6 +57,12 @@
             height: $d;
         }
 
+        .c-tree {
+            // When a tree is in the Inspector, remove scrolling and right pad
+            overflow: visible;
+            padding-right: 0;
+        }
+
         /************************************************************** LEGACY */
         // TODO: refactor when legacy properties markup can be converted
         .inspector-location {
diff --git a/src/ui/layout/Layout.vue b/src/ui/layout/Layout.vue
index 1c35dffbac..5beb290f85 100644
--- a/src/ui/layout/Layout.vue
+++ b/src/ui/layout/Layout.vue
@@ -227,6 +227,14 @@
                 width: 200px;
             }
         }
+
+        &__toolbar {
+            $p: $interiorMargin;
+            background: $editUIBaseColor;
+            border-radius: $basicCr;
+            height: $p + 24px; // Need to standardize the height
+            padding: $p;
+        }
     }
 
     .is-editing {
@@ -239,6 +247,7 @@
             }
         }
     }
+
 </style>
 
 <script>
diff --git a/src/ui/layout/mct-tree.vue b/src/ui/layout/mct-tree.vue
index 6649bc630c..5ba0f1a2fb 100644
--- a/src/ui/layout/mct-tree.vue
+++ b/src/ui/layout/mct-tree.vue
@@ -1,17 +1,16 @@
 <template>
-    <div class="c-tree__wrapper">
-        <div class="l-shell__search">
-            <search class="c-search--major" ref="shell-search"
+    <div class="c-tree-and-search">
+        <div class="c-tree-and-search__search">
+            <search class="c-search" ref="shell-search"
                 :value="searchValue"
                 @input="searchTree"
                 @clear="searchTree">
             </search>
         </div>
-        <div
-            v-if="treeItems.length === 0">
+        <div class="c-tree-and-search__no-results" v-if="treeItems.length === 0">
             No results found
         </div>
-        <ul class="c-tree">
+        <ul class="c-tree-and-search__tree c-tree">
             <tree-item v-for="treeItem in treeItems"
                        :key="treeItem.id"
                        :node="treeItem">
@@ -23,16 +22,34 @@
 <style lang="scss">
     @import "~styles/sass-base";
 
+    .c-tree-and-search {
+        display: flex;
+        flex-direction: column;
+        padding-right: $interiorMarginSm;
+        overflow: auto;
+
+        > * + * { margin-top: $interiorMargin; }
+
+        &__search {
+            flex: 0 0 auto;
+        }
+
+        &__no-results {
+            font-style: italic;
+            opacity: 0.6;
+        }
+
+        &__tree {
+            flex: 1 1 auto;
+            height: 100%;
+        }
+    }
+
     .c-tree {
         @include userSelectNone();
         overflow-x: hidden;
         overflow-y: auto;
-        height: 100%;
-
-        &__wrapper {
-            overflow-y: auto;
-            padding-right: $interiorMarginSm;
-        }
+        padding-right: $interiorMargin;
 
         .c-tree {
             margin-left: 15px;
@@ -59,7 +76,8 @@
                 }
             }
 
-            &.is-navigated-object {
+            &.is-navigated-object,
+            &.is-selected {
                 background: $colorItemTreeSelectedBg;
                 .c-tree__item__type-icon:before {
                     color: $colorItemTreeIconHover;
@@ -86,33 +104,34 @@
                 margin-right: $interiorMarginSm;
             }
 
+            // Object labels in trees
             &__label {
                 // <a> tag that holds type icon and name.
                 // Draggable element.
-                border-radius: $controlCr;
+                /*border-radius: $controlCr;
                 display: flex;
                 align-items: center;
                 flex: 1 1 auto;
                 overflow: hidden;
                 padding: $aPad;
-                white-space: nowrap;
+                white-space: nowrap;*/
             }
 
             &__name {
-                @include ellipsize();
-                display: inline;
+               // @include ellipsize();
+               // display: inline;
                 color: $colorItemTreeFg;
-                width: 100%;
+              //  width: 100%;
             }
 
             &__type-icon {
-                // Type icon. Must be HTML entity to allow inclusion of alias indicator.
-                display: block;
-                flex: 0 0 auto;
-                font-size: 1.3em;
-                margin-right: $interiorMarginSm;
+                // Type icon. Must be an HTML entity to allow inclusion of alias indicator.
+               // display: block;
+             //   flex: 0 0 auto;
+              //  font-size: 1.3em;
+              //  margin-right: $interiorMarginSm;
                 color: $colorItemTreeIcon;
-                width: $treeTypeIconW;
+              //  width: $treeTypeIconW;
             }
 
             &.is-alias {
diff --git a/webpack.config.js b/webpack.config.js
index 44072de562..588ac23f33 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -25,8 +25,6 @@ const webpackConfig = {
             "csv": "comma-separated-values",
             "EventEmitter": "eventemitter3",
             "bourbon": "bourbon.scss",
-            "espresso": path.join(__dirname, "src/styles/theme-espresso.scss"),
-            "snow": path.join(__dirname, "src/styles/theme-snow.scss"),
             "vue": path.join(__dirname, "node_modules/vue/dist/vue.js"),
             "d3-scale": path.join(__dirname, "node_modules/d3-scale/build/d3-scale.min.js"),
             "styles": path.join(__dirname, "src/styles-new")