6 files changed, 89 insertions, 5 deletions

diff --git a/js/panels/css-panel/css-panel.reel/css-panel.css b/js/panels/css-panel/css-panel.reel/css-panel.css
index 7a4191b9..8ef5ec27 100644
--- a/js/panels/css-panel/css-panel.reel/css-panel.css
+++ b/js/panels/css-panel/css-panel.reel/css-panel.css
@@ -31,12 +31,14 @@
 }
 
 .css-panel .style-sheets-view-container {
-    -webkit-box-flex: 0;
+    display: -webkit-box;
     min-height: 41px;
+    -webkit-box-flex: 0;
+    -webkit-box-orient: vertical;
 }
 .css-panel .styles-view-container {
-    -webkit-box-flex: 1;
     display: -webkit-box;
+    -webkit-box-flex: 1;
     -webkit-box-orient: vertical;
 }
 .panel-message {
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.css b/js/panels/css-panel/style-sheet.reel/style-sheet.css
index 9ea03be8..1d26b041 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.css
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.css
@@ -127,6 +127,10 @@
     margin-right: 25px;
 }
 
+.default-style-sheet > span {
+    font-weight: bold;
+}
+
 .ss-invisible {
     display: none;
 }
\ No newline at end of file
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.html b/js/panels/css-panel/style-sheet.reel/style-sheet.html
index 6a9dee65..ca24487d 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.html
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.html
@@ -29,6 +29,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                 "name": "DynamicText",
                 "properties": {
                     "element": {"#": "sheet-name"},
+                    "identifier": "nameText",
                     "defaultText": "Style sheet"
                 },
                 "bindings": {
diff --git a/js/panels/css-panel/style-sheet.reel/style-sheet.js b/js/panels/css-panel/style-sheet.reel/style-sheet.js
index 9ad48a62..3ddd8454 100644
--- a/js/panels/css-panel/style-sheet.reel/style-sheet.js
+++ b/js/panels/css-panel/style-sheet.reel/style-sheet.js
@@ -12,6 +12,12 @@ exports.StyleSheet = Montage.create(Component, {
         value: null
     },
 
+    prepareForDraw : {
+        value: function() {
+            this.nameText.element.addEventListener('click', this, false);
+        }
+    },
+
     willDraw : {
         value: function() {
             if(this.editing) {
@@ -45,6 +51,12 @@ exports.StyleSheet = Montage.create(Component, {
                 this.importButton.element.classList.add('ss-invisible');
             }
 
+            if(this.default) {
+                this._element.classList.add('default-style-sheet');
+            } else {
+                this._element.classList.remove('default-style-sheet');
+            }
+
         }
     },
 
@@ -66,6 +78,12 @@ exports.StyleSheet = Montage.create(Component, {
         }
     },
 
+    handleClick : {
+        value: function(e) {
+            this.parentComponent.parentComponent.defaultStyleSheet = this.source;
+        }
+    },
+
     handleEditButtonAction: {
         value: function(e) {
             this.editing = true;
@@ -130,6 +148,17 @@ exports.StyleSheet = Montage.create(Component, {
         }
     },
 
+    _default : { value: null },
+    default : {
+        get: function() {
+            return this._default;
+        },
+        set: function(value) {
+            this._default = value;
+            this.needsDraw = true;
+        }
+    },
+
     _disabled : {
         value: null
     },
diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css
index a3e13c77..a6e83a2c 100644
--- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css
+++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.css
@@ -12,7 +12,10 @@
 .style-sheets-view-container .sheet-list {
     margin: 0;
     padding: 0;
-    min-height: 55px;
+    min-height: 35px;
+    -webkit-box-flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 .style-sheets-view-container .sheet-list li {
     list-style-type: none;
@@ -30,10 +33,11 @@
 ------------------- */
 
 .style-sheets-toolbar-container {
-    bottom: 0;
+    /*bottom: 0;*/
     height: 24px;
-    position: absolute;
+    /*position: absolute;*/
     width: 100%;
+    -webkit-box-flex: 0;
 }
 
 /* ------------------
diff --git a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
index 2d6e18ed..b2d2c0fb 100644
--- a/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
+++ b/js/panels/css-panel/style-sheets-view.reel/style-sheets-view.js
@@ -13,6 +13,7 @@ exports.StyleSheetsView = Montage.create(Component, {
     stylesController     : { value: null },
     styleSheets          : { value: [] },
     _initView            : { value: false },
+    _needsScroll         : { value: false },
     documentNameLabel    : { value: null },
     noDocumentLabelClass : { value: "no-document" },
 
@@ -28,6 +29,29 @@ exports.StyleSheetsView = Montage.create(Component, {
             this.needsDraw = true;
         }
     },
+    _defaultStyleSheet: { value: null },
+    defaultStyleSheet: {
+        get: function() {
+            return this._defaultStyleSheet;
+        },
+        set: function(sheet) {
+            if(sheet === this._defaultStyleSheet) { return false; }
+
+            var sheetComponent, oldDefaultSheet;
+
+            if(this.styleSheetList) {
+                sheetComponent = this.styleSheetList.childComponents[this.styleSheets.indexOf(sheet)];
+                sheetComponent.default = true;
+                if(this._defaultStyleSheet) {
+                    oldDefaultSheet = this.styleSheetList.childComponents[this.styleSheets.indexOf(this._defaultStyleSheet)];
+                    oldDefaultSheet.default = false;
+                }
+            }
+
+            this._defaultStyleSheet = sheet;
+            this.needsDraw = true;
+        }
+    },
     
     /// Toolbar Button Actions
     /// --------------------------------
@@ -36,6 +60,8 @@ exports.StyleSheetsView = Montage.create(Component, {
     handleAddAction : {
         value: function(e) {
             this.stylesController.createStylesheet();
+            this.needsDraw = this._needsScroll = true;
+
         }
     },
 
@@ -46,6 +72,13 @@ exports.StyleSheetsView = Montage.create(Component, {