38 files changed, 536 insertions, 381 deletions

diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index 4181dd89..7c2554df 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -289,7 +289,7 @@ NinjaCvsRt.GLRuntime = Object.create(Object.prototype, {
             this.renderer.cameraManager().setActiveCamera(cam);
 
             // change clear color
-            this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]);
+            this.renderer.setClearColor([0.0, 0.0, 0.0, 0.0]);
 
             // create an empty scene graph
             this.myScene = new RDGE.SceneGraph();
diff --git a/css/ninja.css b/css/ninja.css
index bc82f50d..8e1666c2 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -789,10 +789,6 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 
 .tagRadioButtons .nj-divider { height: 100%; float: left; position: relative; }
 
-.tagRadioButtons select.nj-skinned { visibility: visible; position: relative; margin-top: 1px; }
-
-.tagRadioButtons select[disabled="true"].nj-skinned, .tagRadioButtons select[disabled].nj-skinned { visibility: hidden; }
-
 #zoomToolOptionHolder .zoomOutToolIcon { background-image: url("../images/optionsbar/zoom/zoom_minus.png"); }
 
 #zoomToolOptionHolder .zoomInToolIcon { background-image: url("../images/optionsbar/zoom/zoom_plus.png"); }
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.css b/js/components/tools-properties/tag-properties.reel/tag-properties.css
index 9d6c37a7..99ddf8e6 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.css
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.css
@@ -28,3 +28,21 @@ CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
+
+.tagRadioButtons select.nj-skinned {
+    visibility: visible;
+    position: relative;
+    margin-top: 1px;
+}
+
+.tag-position select.nj-skinned {
+    border-radius: 0px;
+    padding-left: 5px;
+    height: 18px;
+    width: 100px;
+    border-color: #181818;
+}
+
+input.tag-class {
+    border-color: #181818 !important;
+}
\ No newline at end of file
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.html b/js/components/tools-properties/tag-properties.reel/tag-properties.html
index 7db1b7cf..46568d8b 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.html
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html
@@ -53,7 +53,9 @@ POSSIBILITY OF SUCH DAMAGE.
                     "classField": {"#": "className"},
 
                     "customName": {"#": "customTagCB"},
-                    "customLabel": {"#": "customContainer"}
+                    "customLabel": {"#": "customLabel"},
+
+                    "elementPosition": {"#": "positionCB"}
                 }
             }
         }
@@ -76,12 +78,12 @@ POSSIBILITY OF SUCH DAMAGE.
                 <div class="toolColorChipContainer"><div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div></div>
                 <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
 
-                <div id="classNameContainer">
+                <div>
                     <label class="label"> Class:</label>
-                    <input data-montage-id="className" type="text" name="ClassNameTextBox" class="textBox nj-skinned"/>
+                    <input data-montage-id="className" type="text" name="ClassNameTextBox" class="textBox nj-skinned tag-class"/>
                 </div>
 
-                <div id="customContainer">
+                <div data-montage-id="customLabel">
                     <label class="label"> Tag Name:</label>
                     <select data-montage-id="customTagCB" class="nj-skinned">
                         <option>article</option>
@@ -90,14 +92,15 @@ POSSIBILITY OF SUCH DAMAGE.
                     </select>
                 </div>
 
-                <div id="positionContainer">
-                    <label class="label"> Position:</label>
+                <div class="tag-position">
+                    <label class="label">Position:</label>
                     <select data-montage-id="positionCB" class="nj-skinned">
-                        <option>Static</option>
-                        <option>Absolute</option>
-                        <option>Relative</option>
+                        <option></option>
+                        <option selected>Absolute</option>
                         <option>Fixed</option>
                         <option>Inherit</option>
+                        <option>Relative</option>
+                        <option>Static</option>
                     </select>
                 </div>
             </div>
diff --git a/js/components/tools-properties/tag-properties.reel/tag-properties.js b/js/components/tools-properties/tag-properties.reel/tag-properties.js
index 9ff23a41..603d8dbe 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.js
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.js
@@ -29,9 +29,8 @@ ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 POSSIBILITY OF SUCH DAMAGE.
 </copyright> */
 
-var Montage = require("montage/core/core").Montage;
-var Component = require("montage/ui/component").Component;
-var ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
+var Montage = require("montage/core/core").Montage,
+    ToolProperties = require("js/components/tools-properties/tool-properties").ToolProperties;
 
 var TagProperties = exports.TagProperties = Montage.create(ToolProperties, {
     divElement: {
@@ -71,6 +70,11 @@ var TagProperties = exports.TagProperties = Montage.create(ToolProperties, {
         }
     },
 
+    elementPosition: {
+        value: null,
+        serializable: true
+    },
+
     _subPrepare: {
         value: function() {