3 files changed, 42 insertions, 65 deletions

diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index c39f3a56..5c1c9eeb 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -35,6 +35,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                         return this._isSelected;
                 },
                 set: function(newVal) {
+
                         if (newVal !== this._isSelected) {
                                 this._isSelected = newVal;
                                 this.needsDraw = true;
@@ -191,9 +192,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                         this._showView();
                 }
                 if (this.isSelected) {
-                        this.element.classList.add("selected");
+                        this.element.classList.add("style-selected");
                 } else {
-                        this.element.classList.remove("selected");
+                        this.element.classList.remove("style-selected");
                 }
         }
     },
diff --git a/js/panels/Timeline/Style.reel/css/Style.css b/js/panels/Timeline/Style.reel/css/Style.css
index 6c7542cb..bb65b0c7 100644
--- a/js/panels/Timeline/Style.reel/css/Style.css
+++ b/js/panels/Timeline/Style.reel/css/Style.css
@@ -1,88 +1,36 @@
-/* Layer.scss
- * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
- */
 /* <copyright>
  This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
-/*
- * _colors.scss
- * Defines the colors for the UI of the application.
- * To create a new theme, copy this file and change the values as desired.
- * Note: Some colors are defined as both rgb and rgba; some of the rgba versions have multiple a values.
- */
-/* Colors for radio buttons and other form elements */
-/* Base colors for dividers 
- *
- * Dividers consist of a div with a background color and either 
- * a top & bottom border (in the case of horizontal dividers)
- * or a left & right border (in the case of vertical dividers),
- * for a total of three different colors.
- * 
- */
-/* top and left */
-/* Middle */
-/* Bottom and right */
-/* Main background color of entire app */
-/* Main app background color. */
-/* rgba version */
-/* Main app border color */
-/* color of drop shadows */
-/* Stage color */
-/* body border color */
-/* Body background color */
-/* Colors for main dropdown menus: background & text for both regular and highlighted states, dividers */
-/* Colors for tools: background, text, how they interact with the UI */
-/* Colors for panels: background & text, both regular and highlighted states, dividers, borders, shadows, etc. */
-/* used for editable items in their non-edit state, etc. */
-/* Border for panel and for block elements */
-/* Shadow for text and block elements */
-/* Colors for scroll bars */
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
-/*
- * themes/themename/mixins.scss
- * Mixins that are theme-dependent (e.g. sprite mixins, etc)
- */
-/* <copyright>
- This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
- No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
- (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
- </copyright> */
-/*
- * mixins.scss
- * Generic mixins.  Theme-specific mixins (e.g. for sprites) 
- * should go in the theme/themename/mixins.scss file.
+/* Layer.scss
+ * Main SCSS file for Layer component, compiled by SASS into the file css/Layer.css.
  */
-/* line 12, ../scss/Style.scss */
+/* line 18, ../scss/Style.scss */
 .hidden {
   display: none;
 }
 
-/* line 15, ../scss/Style.scss */
+/* line 21, ../scss/Style.scss */
 .row-editor {
   position: relative;
   height: 14px;
 }
 
-/* line 19, ../scss/Style.scss */
+/* line 25, ../scss/Style.scss */
 .style-padding {
   padding-left: 5px;
   padding-top: 3px;
   padding-right: 5px;
 }
 
-/* line 24, ../scss/Style.scss */
+/* line 30, ../scss/Style.scss */
 .style-row {
   height: 20px;
   border-bottom: 1px solid #505050;
 }
 
-/* line 29, ../scss/Style.scss */
+/* line 35, ../scss/Style.scss */
 div.content-style div.editable2 {
   height: 14px;
   background-color: #242424 !important;
@@ -96,7 +44,7 @@ div.content-style div.editable2 {
   width: 100%;
 }
 
-/* line 43, ../scss/Style.scss */
+/* line 49, ../scss/Style.scss */
 .content-style.collapsible-content,
 .content-style.collapsible-content div,
 .content-style.collapsible-content span {
@@ -104,7 +52,7 @@ div.content-style div.editable2 {
   text-overflow: visible;
 }
 
-/* line 48, ../scss/Style.scss */
+/* line 54, ../scss/Style.scss */
 div.content-style div.cell-property,
 div.content-style div.cell-value {
   width: 45%;
@@ -116,7 +64,7 @@ div.content-style div.cell-value {
   line-height: 18px;
 }
 
-/* line 57, ../scss/Style.scss */
+/* line 63, ../scss/Style.scss */
 div.content-style div.cell-property div {
   min-width: 90%;
   height: 100%;
@@ -125,9 +73,26 @@ div.content-style div.cell-property div {
   white-space: nowrap;
 }
 
-/* line 65, ../scss/Style.scss */
+/* line 71, ../scss/Style.scss */
 div.content-style input.nj-skinned {
   height: 10px;
   font-size: 12px;
   top: -3px;
 }
+
+/* line 76, ../scss/Style.scss */
+div.style-row .container-propvals {
+  overflow: hidden;
+}
+
+/* line 80, ../scss/Style.scss */
+.content-style .style-row.selected {
+  background-color: #474747;
+  color: white;
+}
+
+/* line 84, ../scss/Style.scss */
+.content-style .style-row.style-selected {
+  background-color: #b2b2b2;
+  color: #242424;
+}
diff --git a/js/panels/Timeline/Style.reel/scss/Style.scss b/js/panels/Timeline/Style.reel/scss/Style.scss
index 30bf43fe..c5287b00 100644
--- a/js/panels/Timeline/Style.reel/scss/Style.scss
+++ b/js/panels/Timeline/Style.reel/scss/Style.scss
@@ -73,4 +73,15 @@ div.content-style input.nj-skinned {
         font-size: 12px;
         top: -3px;
 }
+div.style-row .container-propvals {
+        overflow: hidden;
+}
 
+.content-style .style-row.selected {
+  background-color: $color-panel-bg;
+  color: $color-panel-text;
+}
+.content-style .style-row.style-selected {
+  background-color: $color-panel-hilite-bg;
+  color: $color-panel-hilite-text;
+}