4 files changed, 23 insertions, 12 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 824a675a..96ae6caf 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -118,9 +118,9 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 
 #sceneBar { height: 70px; background-color: #474747; }
 
-#mainContainer #rulerTop { background: url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; display:none;}
+#mainContainer #rulerTop { background: gray; height: 15px; margin-bottom: 0px; }
 
-#rulerLeft { background: url("../images/temp/ruler-left.png"); width: 16px; display:none;}
+#rulerLeft { background: gray; width: 16px; }
 
 #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; }
 
diff --git a/js/stage/stage-view.reel/stage-view.js b/js/stage/stage-view.reel/stage-view.js
index cd19f361..46d74e13 100755
--- a/js/stage/stage-view.reel/stage-view.js
+++ b/js/stage/stage-view.reel/stage-view.js
@@ -198,14 +198,14 @@ exports.StageView = Montage.create(Component, {
     },
     showRulers:{
         value:function(){
-            this.application.ninja.rulerTop.style.display = "block";
-            this.application.ninja.rulerLeft.style.display = "block";
+            this.application.ninja.rulerTop.style.background = "url('../images/temp/ruler-top.png')";
+            this.application.ninja.rulerLeft.style.background = "url('../images/temp/ruler-left.png')";
         }
     },
     hideRulers:{
         value:function(){
-            this.application.ninja.rulerTop.style.display = "none";
-            this.application.ninja.rulerLeft.style.display = "none";
+            this.application.ninja.rulerTop.style.background = "rgb(128,128,128)";
+            this.application.ninja.rulerLeft.style.background = "rgb(128,128,128)";
         }
     },
 
diff --git a/scss/imports/scss/_MainWindow.scss b/scss/imports/scss/_MainWindow.scss
index 0b0649dc..97344b1e 100755
--- a/scss/imports/scss/_MainWindow.scss
+++ b/scss/imports/scss/_MainWindow.scss
@@ -200,18 +200,16 @@
 }
 
 #mainContainer #rulerTop {
-    // TODO: temporary background please replace when component is implemented  
-    background: url("../images/temp/ruler-top.png");
+    // TODO: temporary background please replace when component is implemented
+    background:$color-stage;
     height:15px;
     margin-bottom: 0px;
-    display:none;
 }
 
 #rulerLeft {
-    // TODO: temporary background please replace when component is implemented  
-    background: url("../images/temp/ruler-left.png");
+    // TODO: temporary background please replace when component is implemented
+    background:$color-stage;
     width:16px;
-    display:none;
 }
 
 #stateBar {
diff --git a/scss/imports/scss/_Stage.scss b/scss/imports/scss/_Stage.scss
index 7b7db576..587903d2 100644
--- a/scss/imports/scss/_Stage.scss
+++ b/scss/imports/scss/_Stage.scss
@@ -192,3 +192,16 @@
     overflow-x: auto;
     overflow-y: auto;
 }
+
+.montage-editor-frame {
+    position:absolute;
+    z-index:7;
+    top: 0;
+    left:0;
+    display:none;
+    -webkit-user-select: initial;
+}
+.montage-editor {
+    padding:0px;
+    word-wrap: normal;
+}
\ No newline at end of file