From 333f7cb8487b02c371579c8fcf61040cf16ec46f Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charles.f.hacskaylo@nasa.gov>
Date: Tue, 29 Sep 2015 08:43:34 -0700
Subject: [PATCH] [Frontend] Time controller-related styling

open #1515
open #117
Markup changed to utilize mct-representation via CSS;
time-controller now uses list-based _constants values;
ConductorRepresenter.js modded to remove inline styling
and to add CSS classes to enclosing mct-representation;
---
 .../browse/res/templates/browse-object.html   |   9 +-
 .../edit/res/templates/edit-object.html       |  11 +-
 .../commonUI/general/res/sass/_constants.scss |   1 +
 .../commonUI/general/res/sass/_global.scss    |   8 +
 .../commonUI/general/res/sass/_views.scss     |   3 -
 .../res/sass/controls/_time-controller.scss   |  10 +-
 .../res/sass/user-environ/_layout.scss        | 278 +++++++++---------
 .../espresso/res/css/theme-espresso.css       | 157 +++++-----
 .../themes/espresso/res/sass/_constants.scss  |   3 +-
 .../themes/snow/res/css/theme-snow.css        | 157 +++++-----
 .../themes/snow/res/sass/_constants.scss      |   3 +-
 .../conductor/src/ConductorRepresenter.js     |  10 +-
 .../features/layout/res/templates/layout.html |   2 +-
 platform/features/pages/res/iframe.html       |   2 +-
 14 files changed, 339 insertions(+), 315 deletions(-)

diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index ebe53b368f..3bd6138da6 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -42,9 +42,8 @@
         </div>
     </div>
 
-    <div class='object-holder abs vscroll'>
-        <mct-representation key="representation.selected.key"
-                            mct-object="representation.selected.key && domainObject">
-        </mct-representation>
-    </div>
+    <mct-representation key="representation.selected.key"
+                        mct-object="representation.selected.key && domainObject"
+                        class="abs object-holder">
+    </mct-representation>
 </span>
diff --git a/platform/commonUI/edit/res/templates/edit-object.html b/platform/commonUI/edit/res/templates/edit-object.html
index c2089781a4..71dc233a82 100644
--- a/platform/commonUI/edit/res/templates/edit-object.html
+++ b/platform/commonUI/edit/res/templates/edit-object.html
@@ -30,12 +30,11 @@
                          structure="toolbar.structure"
                          ng-model="toolbar.state">
             </mct-toolbar>
-            <div class='holder abs object-holder work-area'>
-                <mct-representation key="representation.selected.key"
-                                    toolbar="toolbar"
-                                    mct-object="representation.selected.key && domainObject">
-                </mct-representation>
-            </div>
+            <mct-representation key="representation.selected.key"
+                                toolbar="toolbar"
+                                mct-object="representation.selected.key && domainObject"
+                                class="holder abs object-holder work-area">
+            </mct-representation>
         </div>
         <mct-splitter></mct-splitter>
         <div
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 78c7c916dd..918ace8c0f 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -45,6 +45,7 @@ $ueEditToolBarH: 25px;
 $ueBrowseLeftPaneW: 25%;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
+$ueTimeControlH: (33px, 20px, 20px);
 // Overlay
 $ovrTopBarH: 60px;
 $ovrFooterH: 30px;
diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss
index 7aaa066bb3..45b868922b 100644
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -125,6 +125,14 @@ mct-container {
 	text-align: center;
 }
 
+.scrolling {
+	overflow: auto;
+}
+
+.vscroll {
+	overflow-y: auto;
+}
+
 .no-margin {
 	margin: 0;
 }
diff --git a/platform/commonUI/general/res/sass/_views.scss b/platform/commonUI/general/res/sass/_views.scss
index ef83e3c29b..96c78f1dd2 100644
--- a/platform/commonUI/general/res/sass/_views.scss
+++ b/platform/commonUI/general/res/sass/_views.scss
@@ -10,9 +10,6 @@
 	&.fixed {
 		font-size: 0.8em;
 	}
-	&.scrolling {
-		overflow: auto;
-	}
 	.controls,
 	label,
 	.inline-block {
diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss
index 6942b8b57a..2167518494 100644
--- a/platform/commonUI/general/res/sass/controls/_time-controller.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss
@@ -6,6 +6,10 @@
 	}
 }
 
+.l-time-controller-visible {
+
+}
+
 .l-time-controller {
 	$minW: 400px;
 	$knobHOffset: 0px;
@@ -14,9 +18,9 @@
 	$rangeValOffset: $sliderKnobW;
 	//$knobCr: $sliderKnobW;
 	$timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset;
-	$r1H: 33px;
-	$r2H: $sliderH;
-	$r3H: 20px;
+	$r1H: nth($ueTimeControlH,1);
+	$r2H: nth($ueTimeControlH,2);
+	$r3H: nth($ueTimeControlH,3);
 
 	//height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
 
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 025a87e627..bdfe716be3 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -30,21 +30,21 @@
 }
 
 .holder-all {
-	$myM: 0; // $interiorMarginSm;
-	top: $myM;
-	right: $myM;
-	bottom: $myM;
-	left: $myM;
+    $myM: 0; // $interiorMarginSm;
+    top: $myM;
+    right: $myM;
+    bottom: $myM;
+    left: $myM;
 }
 
 .browse-area,
 .edit-area,
 .editor {
-	position: absolute;
+    position: absolute;
 }
 
 .editor {
-	@include border-radius($basicCr * 1.5);
+    @include border-radius($basicCr * 1.5);
 }
 
 .contents {
@@ -68,8 +68,8 @@
         margin-right: $interiorMargin;
     }
     &.abs {
-	    text-wrap: none;
-	    white-space: nowrap;
+        text-wrap: none;
+        white-space: nowrap;
         &.left,
         .left {
             width: 45%;
@@ -95,51 +95,51 @@
 }
 
 .user-environ {
-	.browse-area,
-	.edit-area,
-	.editor {
-		top: $bodyMargin + $ueTopBarH + ($interiorMargin);
-		right: $bodyMargin;
-		bottom: $ueFooterH + $bodyMargin;
-		left: $bodyMargin;
-	}
+    .browse-area,
+    .edit-area,
+    .editor {
+        top: $bodyMargin + $ueTopBarH + ($interiorMargin);
+        right: $bodyMargin;
+        bottom: $ueFooterH + $bodyMargin;
+        left: $bodyMargin;
+    }
 
-	.browse-area,
-	.edit-area {
-		> .contents {
-			left: 0;
-			right: 0;
-		}
-	}
+    .browse-area,
+    .edit-area {
+        > .contents {
+            left: 0;
+            right: 0;
+        }
+    }
 
-	.edit-area {
-		$tbH: $btnToolbarH + $interiorMargin;
-		top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
-		.tool-bar {
-			bottom: auto;
-			height: $tbH;
-			line-height: $btnToolbarH;
-		}
-		.work-area {
-			top: $tbH + $interiorMargin * 2;
-		}
-	}
+    .edit-area {
+        $tbH: $btnToolbarH + $interiorMargin;
+        top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
+        .tool-bar {
+            bottom: auto;
+            height: $tbH;
+            line-height: $btnToolbarH;
+        }
+        .work-area {
+            top: $tbH + $interiorMargin * 2;
+        }
+    }
 
-	.ue-bottom-bar {
+    .ue-bottom-bar {
         //@include absPosDefault($bodyMargin);
-		@include absPosDefault(0);// New status bar design
-		top: auto;
-		height: $ueFooterH;
-		.status-holder {
-			//right: $ueAppLogoW + $bodyMargin; New status bar design
-			z-index: 1;
-		}
-		.app-logo {
-			left: auto;
-			width: $ueAppLogoW;
-			z-index: 2;
-		}
-	}
+        @include absPosDefault(0); // New status bar design
+        top: auto;
+        height: $ueFooterH;
+        .status-holder {
+            //right: $ueAppLogoW + $bodyMargin; New status bar design
+            z-index: 1;
+        }
+        .app-logo {
+            left: auto;
+            width: $ueAppLogoW;
+            z-index: 2;
+        }
+    }
 }
 
 .cols {
@@ -225,78 +225,80 @@
     }
 }
 
-
-
 .pane {
     position: absolute;
     &.treeview.left {
-	    .create-btn-holder {
-		    bottom: auto; top: 0;
-		    height: $ueTopBarH;
-		    .wrapper.menu-element {
-			    position: absolute;
-			    bottom: $interiorMargin;
-		    }
-	    }
-	    .search-holder {
-		    top: $ueTopBarH + $interiorMarginLg;
-	    }
-	    .tree-holder {
-		    overflow: auto;
-			top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
-	    }
+        .create-btn-holder {
+            bottom: auto;
+            top: 0;
+            height: $ueTopBarH;
+            .wrapper.menu-element {
+                position: absolute;
+                bottom: $interiorMargin;
+            }
+        }
+        .search-holder {
+            top: $ueTopBarH + $interiorMarginLg;
+        }
+        .tree-holder {
+            overflow: auto;
+            top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
+        }
     }
     &.items {
         .object-browse-bar {
-	        .left.abs,
-	        .right.abs {
-		        top: auto;
-	        }
-            //.left.abs {
-            //    @include tmpBorder(green);
-            //}
-            //.right.abs {
-            //    @include tmpBorder(red);
-            //}
-        }
-        .object-holder {
-            top: $ueTopBarH + $interiorMarginLg;
+            .left.abs,
+            .right.abs {
+                top: auto;
+            }
         }
     }
-	.object-holder {
-		overflow: auto;
-	}
 }
 
 .split-layout {
-	&.horizontal {
-		// Slides up and down
-		>.pane {
-//			@include test();
-			margin-top: $interiorMargin;
-			&:first-child {
-				margin-top: 0;
-			}
-		}
-	}
-	&.vertical {
-		// Slides left and right
-		>.pane {
-//            @include test();
-			margin-left: $interiorMargin;
-			>.holder {
-				left: 0;
-				right: 0;
-			}
-			&:first-child {
-				margin-left: 0;
-				.holder {
-					right: $interiorMarginSm;
-				}
-			}
-		}
+    &.horizontal {
+        // Slides up and down
+        > .pane {
+            //			@include test();
+            margin-top: $interiorMargin;
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+    }
+    &.vertical {
+        // Slides left and right
+        > .pane {
+            //            @include test();
+            margin-left: $interiorMargin;
+            > .holder {
+                left: 0;
+                right: 0;
+            }
+            &:first-child {
+                margin-left: 0;
+                .holder {
+                    right: $interiorMarginSm;
+                }
+            }
+        }
 
-	}
+    }
+}
+
+.object-holder {
+    overflow: hidden; // Contained objects need to handle their own overflow now
+    top: $ueTopBarH + $interiorMarginLg;
+    > ng-include {
+        @include absPosDefault(0, auto);
+    }
+    &.l-controls-visible {
+        &.l-time-controller-visible {
+            > ng-include {
+                bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
+            }
+        }
+    }
 }
 
 .object-browse-bar .s-btn,
@@ -304,10 +306,10 @@
 .top-bar .s-menu-btn,
 .tool-bar .s-btn,
 .tool-bar .s-menu-btn {
-	$h: $btnToolbarH;
-	height: $h;
-	line-height: $h;
-	vertical-align: top;
+    $h: $btnToolbarH;
+    height: $h;
+    line-height: $h;
+    vertical-align: top;
 }
 
 .object-browse-bar,
@@ -318,33 +320,29 @@
 }
 
 .object-browse-bar {
-	//@include test(blue);
-	@include absPosDefault(0, visible);
-	@include box-sizing(border-box);
-	height: $ueTopBarH;
-	line-height: $ueTopBarH;
-	white-space: nowrap;
+    //@include test(blue);
+    @include absPosDefault(0, visible);
+    @include box-sizing(border-box);
+    height: $ueTopBarH;
+    line-height: $ueTopBarH;
+    white-space: nowrap;
 
-	.left {
-		padding-right: $interiorMarginLg * 2;
-		.l-back {
-			display: inline-block;
-			float: left;
-			margin-right: $interiorMarginLg;
-		}
-	}
+    .left {
+        padding-right: $interiorMarginLg * 2;
+        .l-back {
+            display: inline-block;
+            float: left;
+            margin-right: $interiorMarginLg;
+        }
+    }
 }
 
 .l-flex {
-	@include webkitVal('display', 'flex');
-	@include webkitProp('flex-flow', 'row nowrap');
-	.left {
-		//@include test(red);
-		@include webkitProp(flex, '1 1 0');
-		padding-right: $interiorMarginLg;
-	}
-}
-
-.vscroll {
-    overflow-y: auto;
-}
+    @include webkitVal('display', 'flex');
+    @include webkitProp('flex-flow', 'row nowrap');
+    .left {
+        //@include test(red);
+        @include webkitProp(flex, '1 1 0');
+        padding-right: $interiorMarginLg;
+    }
+}
\ No newline at end of file
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 346af1ba45..4950c5b6c2 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -404,21 +404,29 @@ mct-container {
   text-align: center; }
 
 /* line 128, ../../../../general/res/sass/_global.scss */
+.scrolling {
+  overflow: auto; }
+
+/* line 132, ../../../../general/res/sass/_global.scss */
+.vscroll {
+  overflow-y: auto; }
+
+/* line 136, ../../../../general/res/sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 132, ../../../../general/res/sass/_global.scss */
+/* line 140, ../../../../general/res/sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 136, ../../../../general/res/sass/_global.scss */
+/* line 144, ../../../../general/res/sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 141, ../../../../general/res/sass/_global.scss */
+/* line 149, ../../../../general/res/sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -2370,11 +2378,11 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
-/* line 23, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 27, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-inputs-holder,
 .l-time-controller .l-time-range-slider {
   font-size: 0.8em; }
-/* line 28, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 32, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-inputs-holder,
 .l-time-controller .l-time-range-slider-holder,
 .l-time-controller .l-time-range-ticks-holder {
@@ -2391,7 +2399,7 @@ label.checkbox.custom {
   box-sizing: border-box;
   min-width: 400px;
   top: auto; }
-/* line 38, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 42, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-slider,
 .l-time-controller .l-time-range-ticks {
   overflow: visible;
@@ -2404,43 +2412,43 @@ label.checkbox.custom {
   height: auto;
   left: 150px;
   right: 150px; }
-/* line 45, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 49, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-inputs-holder {
   height: 33px;
   bottom: 46px;
   padding-top: 5px;
   border-top: 1px solid rgba(153, 153, 153, 0.1); }
-  /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-inputs-holder .type-icon {
     font-size: 120%;
     vertical-align: middle; }
-  /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 58, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-inputs-holder .l-time-range-input,
   .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
     margin-right: 5px; }
-    /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 61, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl,
     .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
       color: #666666; }
-    /* line 60, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 64, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager,
     .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon,
     .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager,
     .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager {
       font-size: 11px;
       width: 11px; }
-/* line 67, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 71, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-slider-holder {
   height: 20px;
   bottom: 23px; }
-  /* line 70, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 74, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-slider-holder .range-holder {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
     background: none;
     border: none; }
-    /* line 75, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 79, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line {
       -moz-transform: translateX(50%);
       -ms-transform: translateX(50%);
@@ -2454,19 +2462,19 @@ label.checkbox.custom {
       width: 8px;
       height: auto;
       z-index: 2; }
-      /* line 85, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 89, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
         background-color: #00c2ff;
         content: "";
         position: absolute; }
-      /* line 91, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 95, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before {
         top: 0;
         right: auto;
         bottom: -10px;
         left: 3px;
         width: 2px; }
-      /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 101, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
         -moz-border-radius: 8px;
         -webkit-border-radius: 8px;
@@ -2484,7 +2492,7 @@ label.checkbox.custom {
     /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after {
       background-color: #fff; }
-  /* line 113, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 117, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-slider-holder:not(:active) .knob,
   .l-time-controller .l-time-range-slider-holder:not(:active) .range {
     -moz-transition-property: left, right;
@@ -2499,13 +2507,13 @@ label.checkbox.custom {
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out; }
-/* line 122, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 126, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-ticks-holder {
   height: 20px; }
-  /* line 124, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 128, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
     border-top: 1px solid rgba(255, 255, 255, 0.2); }
-    /* line 126, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 130, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
       background-color: rgba(255, 255, 255, 0.2);
       border: none;
@@ -2513,10 +2521,10 @@ label.checkbox.custom {
       width: 1px;
       margin-left: -1px;
       position: absolute; }
-      /* line 133, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 137, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
         margin-left: 0; }
-      /* line 136, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 140, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
         transform: translateX(-50%);
         -webkit-transform: translateX(-50%);
@@ -2527,10 +2535,10 @@ label.checkbox.custom {
         top: 8px;
         white-space: nowrap;
         z-index: 2; }
-/* line 150, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 154, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .knob {
   z-index: 2; }
-  /* line 152, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 156, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob .range-value {
     -moz-transition-property: visibility, opacity, background-color, border-color;
     -o-transition-property: visibility, opacity, background-color, border-color;
@@ -2549,27 +2557,27 @@ label.checkbox.custom {
     height: 20px;
     line-height: 20px;
     white-space: nowrap; }
-  /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 165, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob:hover .range-value {
     color: #0099cc; }
-  /* line 164, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 168, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob.knob-l {
     margin-left: -10px; }
-    /* line 167, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 171, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-l .range-value {
       text-align: right;
       right: 10px; }
-  /* line 172, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 176, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob.knob-r {
     margin-right: -10px; }
-    /* line 175, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 179, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-r .range-value {
       left: 10px; }
     /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after {
       background-color: #fff; }
 
-/* line 189, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 193, ../../../../general/res/sass/controls/_time-controller.scss */
 .s-time-range-val {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
@@ -3438,26 +3446,26 @@ span.req {
     min-height: 50px;
     height: 30%; }
 
-/* line 230, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 228, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 233, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 231, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 235, ../../../../general/res/sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 240, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .search-holder {
     top: 34px; }
-  /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 243, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 64px; }
-  /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 250, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
   .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
   .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
@@ -3469,34 +3477,46 @@ span.req {
   .pane.items .object-browse-bar .s-menu-btn span.right.l-click-area,
   .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane.items .object-holder {
-    top: 34px; }
-  /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane .object-holder {
-    overflow: auto; }
 
-/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 261, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 264, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 287, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 280, ../../../../general/res/sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 289, ../../../../general/res/sass/user-environ/_layout.scss */
+.object-holder {
+  overflow: hidden;
+  top: 34px; }
+  /* line 292, ../../../../general/res/sass/user-environ/_layout.scss */
+  .object-holder > ng-include {
+    overflow: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    height: auto; }
+  /* line 297, ../../../../general/res/sass/user-environ/_layout.scss */
+  .object-holder.l-controls-visible.l-time-controller-visible > ng-include {
+    bottom: 88px; }
+
+/* line 304, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu-btn,
@@ -3508,12 +3528,12 @@ span.req {
   line-height: 25px;
   vertical-align: top; }
 
-/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 322, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -3529,31 +3549,27 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 332, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 340, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
   display: -webkit-flex;
   flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap; }
-  /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 343, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
     -webkit-flex: 1 1 0;
     padding-right: 10px; }
 
-/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */
-.vscroll {
-  overflow-y: auto; }
-
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -5518,9 +5534,6 @@ table {
   .l-view-section.fixed {
     font-size: 0.8em; }
   /* line 13, ../../../../general/res/sass/_views.scss */
-  .l-view-section.scrolling {
-    overflow: auto; }
-  /* line 16, ../../../../general/res/sass/_views.scss */
   .l-view-section .controls,
   .l-view-section label,
   .l-view-section .inline-block {
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index 9a39f73bf3..e6106d049c 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -31,8 +31,7 @@ $sliderColorKnob: rgba($sliderColorBase, 0.6);
 $sliderColorKnobHov: $sliderColorBase;
 $sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
 $sliderColorRangeValHovFg: $colorKeyFg;
-$sliderH: 20px;
-$sliderKnobW: $sliderH/2;
+$sliderKnobW: nth($ueTimeControlH,2)/2;
 $timeControllerToiLineColor: #00c2ff;
 $timeControllerToiLineColorHov: #fff;
 
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index f9c179231c..2650b2b90b 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -20,7 +20,7 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 5, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 5, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -41,38 +41,38 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline; }
 
-/* line 22, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 22, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 html {
   line-height: 1; }
 
-/* line 24, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 24, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 ol, ul {
   list-style: none; }
 
-/* line 26, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 26, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 table {
   border-collapse: collapse;
   border-spacing: 0; }
 
-/* line 28, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 28, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 caption, th, td {
   text-align: left;
   font-weight: normal;
   vertical-align: middle; }
 
-/* line 30, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 30, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 q, blockquote {
   quotes: none; }
-  /* line 103, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+  /* line 103, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
   q:before, q:after, blockquote:before, blockquote:after {
     content: "";
     content: none; }
 
-/* line 32, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 32, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 a img {
   border: none; }
 
-/* line 116, ../../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+/* line 116, ../../../../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
 article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block; }
 
@@ -404,21 +404,29 @@ mct-container {
   text-align: center; }
 
 /* line 128, ../../../../general/res/sass/_global.scss */
+.scrolling {
+  overflow: auto; }
+
+/* line 132, ../../../../general/res/sass/_global.scss */
+.vscroll {
+  overflow-y: auto; }
+
+/* line 136, ../../../../general/res/sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 132, ../../../../general/res/sass/_global.scss */
+/* line 140, ../../../../general/res/sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 136, ../../../../general/res/sass/_global.scss */
+/* line 144, ../../../../general/res/sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 141, ../../../../general/res/sass/_global.scss */
+/* line 149, ../../../../general/res/sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -2334,11 +2342,11 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
-/* line 23, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 27, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-inputs-holder,
 .l-time-controller .l-time-range-slider {
   font-size: 0.8em; }
-/* line 28, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 32, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-inputs-holder,
 .l-time-controller .l-time-range-slider-holder,
 .l-time-controller .l-time-range-ticks-holder {
@@ -2355,7 +2363,7 @@ label.checkbox.custom {
   box-sizing: border-box;
   min-width: 400px;
   top: auto; }
-/* line 38, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 42, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-slider,
 .l-time-controller .l-time-range-ticks {
   overflow: visible;
@@ -2368,43 +2376,43 @@ label.checkbox.custom {
   height: auto;
   left: 150px;
   right: 150px; }
-/* line 45, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 49, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-inputs-holder {
   height: 33px;
   bottom: 46px;
   padding-top: 5px;
   border-top: 1px solid rgba(102, 102, 102, 0.2); }
-  /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-inputs-holder .type-icon {
     font-size: 120%;
     vertical-align: middle; }
-  /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 58, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-inputs-holder .l-time-range-input,
   .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
     margin-right: 5px; }
-    /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 61, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl,
     .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
       color: #999999; }
-    /* line 60, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 64, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager,
     .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon,
     .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager,
     .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager {
       font-size: 11px;
       width: 11px; }
-/* line 67, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 71, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-slider-holder {
   height: 20px;
   bottom: 23px; }
-  /* line 70, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 74, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-slider-holder .range-holder {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
     background: none;
     border: none; }
-    /* line 75, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 79, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line {
       -moz-transform: translateX(50%);
       -ms-transform: translateX(50%);
@@ -2418,19 +2426,19 @@ label.checkbox.custom {
       width: 8px;
       height: auto;
       z-index: 2; }
-      /* line 85, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 89, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
         background-color: #666;
         content: "";
         position: absolute; }
-      /* line 91, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 95, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before {
         top: 0;
         right: auto;
         bottom: -10px;
         left: 3px;
         width: 2px; }
-      /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 101, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
         -moz-border-radius: 8px;
         -webkit-border-radius: 8px;
@@ -2448,7 +2456,7 @@ label.checkbox.custom {
     /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after {
       background-color: #0052b5; }
-  /* line 113, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 117, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-slider-holder:not(:active) .knob,
   .l-time-controller .l-time-range-slider-holder:not(:active) .range {
     -moz-transition-property: left, right;
@@ -2463,13 +2471,13 @@ label.checkbox.custom {
     -o-transition-timing-function: ease-in-out;
     -webkit-transition-timing-function: ease-in-out;
     transition-timing-function: ease-in-out; }
-/* line 122, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 126, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-ticks-holder {
   height: 20px; }
-  /* line 124, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 128, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
     border-top: 1px solid rgba(0, 0, 0, 0.2); }
-    /* line 126, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 130, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
       background-color: rgba(0, 0, 0, 0.2);
       border: none;
@@ -2477,10 +2485,10 @@ label.checkbox.custom {
       width: 1px;
       margin-left: -1px;
       position: absolute; }
-      /* line 133, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 137, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
         margin-left: 0; }
-      /* line 136, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 140, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
         transform: translateX(-50%);
         -webkit-transform: translateX(-50%);
@@ -2491,10 +2499,10 @@ label.checkbox.custom {
         top: 8px;
         white-space: nowrap;
         z-index: 2; }
-/* line 150, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 154, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .knob {
   z-index: 2; }
-  /* line 152, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 156, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob .range-value {
     -moz-transition-property: visibility, opacity, background-color, border-color;
     -o-transition-property: visibility, opacity, background-color, border-color;
@@ -2513,27 +2521,27 @@ label.checkbox.custom {
     height: 20px;
     line-height: 20px;
     white-space: nowrap; }
-  /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 165, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob:hover .range-value {
     color: rgba(0, 153, 204, 0.7); }
-  /* line 164, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 168, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob.knob-l {
     margin-left: -10px; }
-    /* line 167, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 171, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-l .range-value {
       text-align: right;
       right: 10px; }
-  /* line 172, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 176, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob.knob-r {
     margin-right: -10px; }
-    /* line 175, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 179, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-r .range-value {
       left: 10px; }
     /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after {
       background-color: #0052b5; }
 
-/* line 189, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 193, ../../../../general/res/sass/controls/_time-controller.scss */
 .s-time-range-val {
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
@@ -3385,26 +3393,26 @@ span.req {
     min-height: 50px;
     height: 30%; }
 
-/* line 230, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 228, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 233, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 231, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 235, ../../../../general/res/sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 240, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .search-holder {
     top: 34px; }
-  /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 243, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 64px; }
-  /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 250, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
   .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
   .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
@@ -3416,34 +3424,46 @@ span.req {
   .pane.items .object-browse-bar .s-menu-btn span.right.l-click-area,
   .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane.items .object-holder {
-    top: 34px; }
-  /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane .object-holder {
-    overflow: auto; }
 
-/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 261, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 264, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 287, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 280, ../../../../general/res/sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 289, ../../../../general/res/sass/user-environ/_layout.scss */
+.object-holder {
+  overflow: hidden;
+  top: 34px; }
+  /* line 292, ../../../../general/res/sass/user-environ/_layout.scss */
+  .object-holder > ng-include {
+    overflow: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    height: auto; }
+  /* line 297, ../../../../general/res/sass/user-environ/_layout.scss */
+  .object-holder.l-controls-visible.l-time-controller-visible > ng-include {
+    bottom: 88px; }
+
+/* line 304, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
 .top-bar .buttons-main .s-btn,
 .top-bar .buttons-main .s-menu-btn,
@@ -3455,12 +3475,12 @@ span.req {
   line-height: 25px;
   vertical-align: top; }
 
-/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 322, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -3476,31 +3496,27 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 332, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/* line 338, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 340, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
   display: -webkit-flex;
   flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap; }
-  /* line 341, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 343, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
     -webkit-flex: 1 1 0;
     padding-right: 10px; }
 
-/* line 348, ../../../../general/res/sass/user-environ/_layout.scss */
-.vscroll {
-  overflow-y: auto; }
-
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -5446,9 +5462,6 @@ table {
   .l-view-section.fixed {
     font-size: 0.8em; }
   /* line 13, ../../../../general/res/sass/_views.scss */
-  .l-view-section.scrolling {
-    overflow: auto; }
-  /* line 16, ../../../../general/res/sass/_views.scss */
   .l-view-section .controls,
   .l-view-section label,
   .l-view-section .inline-block {
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 3fc49b1486..e24d0d8b5a 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -31,8 +31,7 @@ $sliderColorKnob: rgba($sliderColorBase, 0.5);
 $sliderColorKnobHov: rgba($sliderColorBase, 0.7);
 $sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1);
 $sliderColorRangeValHovFg: $colorBodyFg;
-$sliderH: 20px;
-$sliderKnobW: $sliderH/2;
+$sliderKnobW: nth($ueTimeControlH,2)/2;
 $timeControllerToiLineColor: $colorBodyFg;
 $timeControllerToiLineColorHov: #0052b5;
 
diff --git a/platform/features/conductor/src/ConductorRepresenter.js b/platform/features/conductor/src/ConductorRepresenter.js
index b1b35477b6..423ab1813e 100644
--- a/platform/features/conductor/src/ConductorRepresenter.js
+++ b/platform/features/conductor/src/ConductorRepresenter.js
@@ -28,13 +28,8 @@ define(
 
         var CONDUCTOR_HEIGHT = "100px",
             TEMPLATE = [
-                '<div style=',
-                '"position: absolute; bottom: 0; width: 100%; ',
-                'overflow: hidden; ',
-                'height: ' + CONDUCTOR_HEIGHT + '">',
                 "<mct-include key=\"'time-controller'\" ng-model='conductor'>",
-                "</mct-include>",
-                '</div>'
+                "</mct-include>"
             ].join(''),
             GLOBAL_SHOWING = false;
 
@@ -126,8 +121,7 @@ define(
                 this.conductorElement =
                     this.$compile(TEMPLATE)(this.conductorScope());
                 this.element.after(this.conductorElement[0]);
-                this.element.addClass('abs');
-                this.element.css('bottom', CONDUCTOR_HEIGHT);
+                this.element.addClass('l-controls-visible l-time-controller-visible');
                 GLOBAL_SHOWING = true;
             }
         };
diff --git a/platform/features/layout/res/templates/layout.html b/platform/features/layout/res/templates/layout.html
index ca3a359dba..1811f35236 100644
--- a/platform/features/layout/res/templates/layout.html
+++ b/platform/features/layout/res/templates/layout.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 style="width: 100%; height: 100%;"
+<div class="l-layout"
      ng-controller="LayoutController as controller">
 
     <div class='frame child-frame panel abs'
diff --git a/platform/features/pages/res/iframe.html b/platform/features/pages/res/iframe.html
index a1a1c5ccae..ba4fa67c73 100644
--- a/platform/features/pages/res/iframe.html
+++ b/platform/features/pages/res/iframe.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="abs l-iframe">
+<div class="l-iframe abs">
 <iframe ng-controller="EmbeddedPageController as ctl"
         ng-src="{{ctl.trust(model.url)}}">
 </iframe>