5 files changed, 165 insertions, 340 deletions

diff --git a/scss/imports/scss/_MainWindow.scss b/scss/imports/scss/_MainWindow.scss
index f6068ddb..2fdf0ac6 100755
--- a/scss/imports/scss/_MainWindow.scss
+++ b/scss/imports/scss/_MainWindow.scss
@@ -200,7 +200,7 @@
     background-color: #474747;
 }
 
-#mainContainer #rulerTop {
+#mainContainer .rulerTop {
   display: none;
     // TODO: temporary background please replace when component is implemented
     background:$color-stage url('../images/temp/ruler-top.png');
@@ -209,7 +209,7 @@
   border-right: 11px solid black;
 }
 
-#rulerLeft {
+.rulerLeft {
   display: none;
     // TODO: temporary background please replace when component is implemented
     background:$color-stage url('../images/temp/ruler-left.png');
@@ -305,12 +305,7 @@
     box-orient: vertical;
 }
 
-// TODO: REMOVE THIS
-#rightPanelContent {
-    overflow-y:hidden;
-}
-
-#openDocumentsTabComponent {
+.openDocumentsTab {
         height: 25px;
     position: relative;
     overflow: hidden;
@@ -343,9 +338,8 @@
         background-color: #7f7f7f;
 }
 
-#documentBar {
+.documentBar {
         height: 25px;
-        width: 1000px;
         position: relative;
         overflow: hidden;
         color: white;
diff --git a/scss/imports/scss/_PanelUI.scss b/scss/imports/scss/_PanelUI.scss
index d60dae59..8baffc95 100755
--- a/scss/imports/scss/_PanelUI.scss
+++ b/scss/imports/scss/_PanelUI.scss
@@ -855,20 +855,7 @@ div.pp-button.button-divider div {
 
 //  End: Tree component for Project Panel  
 
-
-.subToolHolderPanel{
-    margin-left:42px
-}
-
-.subToolPanel{
-    margin-top:-6px
-}
-
-// .marginposition{ 
-    // margin-top:-26px 
-// } 
 //  Begin: Properties Panel styles  
-
 .properties_panel {
         overflow-x: hidden;
         color: $color-panel-text;
@@ -1240,6 +1227,7 @@ display: -webkit-box;
 
 .rightPanelContent {
     position:absolute;
+    overflow-y:hidden;
     height:100%;
     width:100%;
 }
diff --git a/scss/imports/scss/_Stage.scss b/scss/imports/scss/_Stage.scss
index 587903d2..ed8d0656 100644
--- a/scss/imports/scss/_Stage.scss
+++ b/scss/imports/scss/_Stage.scss
@@ -133,7 +133,7 @@
    
 }
 
-#drawingCanvas {
+.drawingCanvas {
     position: absolute;
     margin: 0px;
     border: none;
@@ -144,7 +144,7 @@
 }
 
 
-#stageCanvas {
+.stageCanvas {
     position: absolute;
     margin: 0px;
     border: none;
@@ -154,7 +154,7 @@
     z-index: 5;
 }
 
-#layoutCanvas {
+.layoutCanvas {
     position: absolute;
     margin: 0px;
     border: none;
@@ -164,35 +164,6 @@
     z-index: 4;
 }
 
-#codeViewContainer {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    margin: 0px;
-    padding: 0px;
-    background: $color-app-bg;
-    width:100%;
-    height:100%;
-    display:none;
-}
-
-#mainContent #codeMirror_1 {
-    height:100%;
-}
-
-#mainContent .CodeMirror {
-    width: 100%;
-    height: 100%;
-    background: white;
-}
-
-#mainContent .CodeMirror-scroll {
-    height: 100%;
-    overflow: scroll;
-    overflow-x: auto;
-    overflow-y: auto;
-}
-
 .montage-editor-frame {
     position:absolute;
     z-index:7;
diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss
index 55c37d02..c63e695d 100755
--- a/scss/imports/scss/_Tools.scss
+++ b/scss/imports/scss/_Tools.scss
@@ -11,68 +11,77 @@
 // _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
 // 
   
-
-// Made changes to toolButton  }
+.subToolHolderPanel {
+    margin-left: 42px;
+    padding: 6px;
+    float:left;
+}
 
 .subToolHolderPanel .toolbutton {
     float:left;
     -webkit-transform: scale(0.6);
+        margin-top: -4px;
 }
 
 .subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active {
     -webkit-transform: scale(0.75);
 }
 
-.subOption{
+.toolOptionsFloatChildren > * {
     float:left;
-    // margin:10px; 
-    margin-top: 5px;
-    margin-left: 10px;
-    margin-right: 10px;
 }
 
-.toolSeparator {
-    height:1px;
-    width:30px;
-    // margin-left: 3px; 
-    // margin-right: 3px; 
+.toolOptionsSpacer {
+    margin-right: 9px;
 }
 
-.toolSeparatorTop {
-    margin-top: 3px;
-    margin-bottom: 0px;
+.toolColorChipCtrl {
+    width: 18px;
+    height: 18px;
+    margin-top: 1px;
+    margin-left: 3px;    
+    margin-right: 8px;    
+    border: 1px black solid;
 }
 
-.toolSeparatorMiddle {
-    margin-top: 0px;
-    margin-bottom: 0px;
+.toolColorChipIcon {
+    width: 20px;
+    height: 20px;
+    margin-top: 1px;
+    -webkit-transform: scale(0.8);
+    background-color: rgb(40, 40, 40);
 }
 
-.toolSeparatorBottom {
-    margin-top: 0px;
-    margin-bottom: 3px;
+// generic styles for image radio button groups used in the tool options bar
+.subToolHolderPanel input.toolOptsRadioButton {
+        width: 24px;
+        height: 24px;
+        margin: 0px 5px 0px 0px;
+        padding: 0px;
+        cursor: pointer;
+        border-radius: 3px;
+        -webkit-user-select: none;
+        border: 1px solid transparent;
+        background: none;
+        background-repeat: no-repeat;