14 files changed, 51 insertions, 59 deletions
diff --git a/css/ninja.css b/css/ninja.css
index 297ed7cd..7fa654bd 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 { display: none; background: gray url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; border-right: 11px solid black; }
+#mainContainer .rulerTop { display: none; background: gray url("../images/temp/ruler-top.png"); height: 15px; margin-bottom: 0px; border-right: 11px solid black; }
-#rulerLeft { display: none; background: gray url("../images/temp/ruler-left.png"); width: 16px; border-bottom: 11px solid black; }
+.rulerLeft { display: none; background: gray url("../images/temp/ruler-left.png"); width: 16px; border-bottom: 11px solid black; }
 #stateBar { height: 20px; background-color: #282828; margin-bottom: 0px; }
@@ -164,9 +164,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 .verticalBox { -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; }
-#rightPanelContent { overflow-y: hidden; }
+.openDocumentsTab { height: 25px; position: relative; overflow: hidden; color: white; }
-#openDocumentsTabComponent { height: 25px; position: relative; overflow: hidden; color: white; }
 #openDocuments { float: left; height: 25px; width: 100%; font-size: 12px; list-style: none; margin: 0; padding: 0; position: relative; text-decoration: none; }
@@ -174,7 +172,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 #openDocuments li:hover, #openDocuments li:active, #openDocuments li.activeTab { background-color: #7f7f7f; }
-#documentBar { height: 25px; width: 1000px; position: relative; overflow: hidden; color: white; }
+.documentBar { height: 25px; width: 1000px; position: relative; overflow: hidden; color: white; }
 .montage-popup-modal-mask { opacity: 1; background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.8) 80%); }
@@ -212,7 +210,7 @@ body { position: absolute; margin: 0px; width: 100%; height: 100%; background-co
 #mainContent .CodeMirror { width: 100%; height: 100%; background: white; }
-#mainContent .CodeMirror-scroll { height: 100%; overflow:auto; }
+#mainContent .CodeMirror-scroll { height: 100%; overflow: auto; }
 .montage-editor-frame { position: absolute; z-index: 7; top: 0; left: 0; display: none; -webkit-user-select: initial; }
@@ -648,7 +646,7 @@ button.panel-button { -webkit-appearance: none; font-size: 9px; color: white; ba
 .panel.collapsed .arrowIcon { -webkit-transform: rotate(-90deg); }
-.rightPanelContent { position: absolute; height: 100%; width: 100%; }
+.rightPanelContent { position: absolute; overflow-y: hidden; height: 100%; width: 100%; }
 #rightPanelContainer .panel { -webkit-box-flex: 100; }
diff --git a/js/components/about-box.reel/about-box.html b/js/components/about-box.reel/about-box.html
index 1f41699e..ecdd4389 100644
--- a/js/components/about-box.reel/about-box.html
+++ b/js/components/about-box.reel/about-box.html
@@ -21,7 +21,7 @@
     </script>
 </head>
 <body>
-<div class="mainAboutBoxContainer" id="mainAboutBoxContainer">
+<div data-montage-id="mainAboutBoxContainer" class="mainAboutBoxContainer">
    <div id="about_box_ninja_logo"></div>
    <div id="aboutBoxTextBlock" class="baseAboutBoxText">
        <p class="mediumAboutBoxText">Version: <span id="aboutBoxVersionNumber">0.0.0.0</span></p>
diff --git a/js/components/layout/document-entry.reel/document-entry.html b/js/components/layout/document-entry.reel/document-entry.html
index 8fd978a3..679ebb62 100755
--- a/js/components/layout/document-entry.reel/document-entry.html
+++ b/js/components/layout/document-entry.reel/document-entry.html
@@ -25,7 +25,7 @@
    <body>
        <li data-montage-id="documentEntry" class="documentEntry">
            <div data-montage-id="isActive"></div>
-            <span id="name"></span>
+            <span data-montage-id="name"></span>
            <img src="js/components/layout/document-entry.reel/close_button.gif">
        </li>
    </body>
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html
index b3221456..68ab85f6 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.html
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html
@@ -38,7 +38,7 @@
    <body>
    <div data-montage-id="penProperties" class="subToolHolderPanel">
-        <div da="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
+        <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
            <label class="label"> Stroke:</label>
            <div data-montage-id="strokeSize" class="label"></div>
        </div>
diff --git a/js/components/tools-properties/selection-properties.reel/selection-properties.html b/js/components/tools-properties/selection-properties.reel/selection-properties.html
index 728ffb0a..b93aacd0 100755
--- a/js/components/tools-properties/selection-properties.reel/selection-properties.html
+++ b/js/components/tools-properties/selection-properties.reel/selection-properties.html
@@ -26,7 +26,7 @@
    <body>
        <div data-montage-id="selectionProperties" class="subToolHolderPanel">
-            <label class="label subOption optionLabel"><input id="transformCheck" type="checkbox" name="transformControl" class="checkBoxAlign"/>Transform Controls</label>
+            <label class="label subOption optionLabel"><input data-montage-id="transformCheck" type="checkbox" name="transformControl" class="checkBoxAlign"/>Transform Controls</label>
            <div id="toolPropertiesPanel-selectionDivOptions">
                <div class="subOption"><div id="topAlign" class="topAlignUp" title="Top Align"></div></div>
                <div class="subOption"><div id="rightAlign" class="rightAlignUp" title="Right Align"></div></div>
diff --git a/js/components/treeview/branch.reel/branch.html b/js/components/treeview/branch.reel/branch.html
index 97b03382..d3060d96 100644
--- a/js/components/treeview/branch.reel/branch.html
+++ b/js/components/treeview/branch.reel/branch.html
@@ -129,11 +129,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
    </script>
 </head>
 <body>
-    <div id="branch" class="branch">
+    <div data-montage-id="branch" class="branch">
-        <span id="label" class="branch-label"></span>
+        <span data-montage-id="label" class="branch-label"></span>
-        <ul id="branchList">
+        <ul data-montage-id="branchList">
-            <li id="treeItem"></li>
+            <li data-montage-id="treeItem"></li>
        </ul>
    </div>
 </body>
diff --git a/js/components/treeview/leaf.reel/leaf.html b/js/components/treeview/leaf.reel/leaf.html
index 360b85a9..a644d4f9 100644
--- a/js/components/treeview/leaf.reel/leaf.html
+++ b/js/components/treeview/leaf.reel/leaf.html
@@ -34,8 +34,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                </script>
 </head>
 <body>
-    <div id="leaf" class="leaf">
+    <div data-montage-id="leaf" class="leaf">
-        <span id="label" class="leaf-label"></span>
+        <span data-montage-id="label" class="leaf-label"></span>
    </div>
 </body>
 </html>
 \ No newline at end of file
diff --git a/js/components/treeview/ninja-branch.reel/ninja-branch.html b/js/components/treeview/ninja-branch.reel/ninja-branch.html
index 3a3f3658..60894fbc 100644
--- a/js/components/treeview/ninja-branch.reel/ninja-branch.html
+++ b/js/components/treeview/ninja-branch.reel/ninja-branch.html
@@ -131,11 +131,11 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
    </script>
 </head>
 <body>
-    <div id="branch" class="branch">
+    <div data-montage-id="branch" class="branch">
-        <div id="label" class="branch-label"></div>
+        <div data-montage-id="label" class="branch-label"></div>
-        <div id="branchCollapser" class="branchCollapser">
+        <div data-montage-id="branchCollapser" class="branchCollapser">
-            <ul id="branchList">
+            <ul data-montage-id="branchList">
-                <li id="treeItem"></li>
+                <li data-montage-id="treeItem"></li>
            </ul>    
        </div>
        
diff --git a/js/components/treeview/ninja-leaf.reel/ninja-leaf.html b/js/components/treeview/ninja-leaf.reel/ninja-leaf.html
index b759b723..6d00bb21 100644
--- a/js/components/treeview/ninja-leaf.reel/ninja-leaf.html
+++ b/js/components/treeview/ninja-leaf.reel/ninja-leaf.html
@@ -34,8 +34,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                </script>
 </head>
 <body>
-    <div id="leaf" class="leaf">
+    <div data-montage-id="leaf" class="leaf">
-        <div id="label" class="leaf-label" draggable="true"></div>
+        <div data-montage-id="label" class="leaf-label" draggable="true"></div>
    </div>
 </body>
 </html>
 \ No newline at end of file
diff --git a/js/components/treeview/treeview.reel/treeview.html b/js/components/treeview/treeview.reel/treeview.html
index 3ef9f116..1bed0f0b 100644
--- a/js/components/treeview/treeview.reel/treeview.html
+++ b/js/components/treeview/treeview.reel/treeview.html
@@ -43,8 +43,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
                </script>
 </head>
 <body>
-    <div id="treeView" class="treeView">
+    <div data-montage-id="t