3 files changed, 49 insertions, 48 deletions

diff --git a/js/components/tools-properties/text-properties.reel/text-properties.css b/js/components/tools-properties/text-properties.reel/text-properties.css
index f7bb8295..218105a7 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -5,7 +5,10 @@
  </copyright> */
 
 .optionsTextTool {
-    padding: 6px;
+}
+
+.optionsTextTool .overrideMargin{
+    margin-left: 0px;
 }
 
 .optionsTextTool .btnGroup {
@@ -16,26 +19,27 @@
     margin: 2px;
 }
 
-.optionsTextTool > *, .optionsTextTool .btnGroup > * {
-    float:left;
+.optionsTextTool .btnGroup .textButton {
+    width: auto;
+    padding: 4px 8px;
+    margin-left: 0px;
 }
 
-.optionsTextTool button {
-    width: auto;
-    padding: 4px 8px !important;
-    margin-left:4px;
+.optionsTextTool .btnGroup .imageButton {
+    padding-top: 2px;
+    height: 22px;
 }
 
 .optionsTextTool .label, .optionsTextTool .hottextunit {
     font-size:11px;
+    margin-top: 1px;
 }
 
 .optionsTextTool .fontSelection {
-    width:100px;
+    width: 160px;
 }
 
-.optionsTextTool .fontColor {
-    width: 20px;
-    height: 18px;
-    margin: 2px 6px;
+.optionsTextTool .toolColorChipCtrl {
+    margin-left: 6px;
+    margin-right: 0px;
 }
\ No newline at end of file
diff --git a/js/components/tools-properties/text-properties.reel/text-properties.html b/js/components/tools-properties/text-properties.reel/text-properties.html
index 03786d76..725e1d22 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -21,13 +21,11 @@
                     "fontSelection": {"@": "fontSelection"},
                     "fontSettings": {"@": "fontSettings"},
                     "fontSize": {"@": "fontSize"},
-                    "fontColor": {"@": "fontColor"},
+                    "fontColor": {"#": "fontColorCtrl"},
                     "btnBold": {"@": "btnBold"},
                     "btnItalic": {"@": "btnItalic"},
                     "btnUnderline": {"@": "btnUnderline"},
                     "btnStrikethrough": {"@": "btnStrikethrough"},
-                    "txtLink": {"@": "txtLink"},
-                    "linkTarget": {"@": "linkTarget"},
                     "alignLeft": {"@": "alignLeft"},
                     "alignCenter": {"@": "alignCenter"},
                     "alignRight": {"@": "alignRight"},
@@ -162,8 +160,8 @@
                     "pressedClass": "active",
                     "preventFocus": true,
                     "identifier": "alignLeft",
-                    "pressedLabel": "Left",
-                    "unpressedLabel": "Left"
+                    "pressedLabel": "",
+                    "unpressedLabel": ""
                 },
                 "listeners": [
                     {
@@ -179,8 +177,8 @@
                     "pressedClass": "active",
                     "preventFocus": true,
                     "identifier": "alignCenter",
-                    "pressedLabel": "Center",
-                    "unpressedLabel": "Center"
+                    "pressedLabel": "",
+                    "unpressedLabel": ""
                 },
                 "listeners": [
                     {
@@ -196,8 +194,8 @@
                     "pressedClass": "active",
                     "preventFocus": true,
                     "identifier": "alignRight",
-                    "pressedLabel": "Right",
-                    "unpressedLabel": "Right"
+                    "pressedLabel": "",
+                    "unpressedLabel": ""
                 },
                 "listeners": [
                     {
@@ -213,8 +211,8 @@
                     "pressedClass": "active",
                     "preventFocus": true,
                     "identifier": "alignJustify",
-                    "pressedLabel": "Justify",
-                    "unpressedLabel": "Justify"
+                    "pressedLabel": "",
+                    "unpressedLabel": ""
                 },
                 "listeners": [
                     {
@@ -296,36 +294,36 @@
     </head>
 
     <body>
-        <div id="textProperties" class="subToolHolderPanel optionsTextTool">
+        <div data-montage-id="textProperties" class="subToolHolderPanel optionsTextTool toolOptionsFloatChildren">
             <label class="label" style="display: none">Class:</label>
-            <input id="className" style="display: none" />
+            <input data-montage-id="className" style="display: none" />
             <label class="label" style="display: none">Tag:</label>
-            <select id="tagType" style="display: none"></select>
-            <label class="label">Font:</label>
-            <select id="fontSelection" class="nj-skinned fontSelection"></select>
-            <button id="fontSettings" style="display: none"></button>
+            <select data-montage-id="tagType" style="display: none"></select>
+            <label class="label overrideMargin">Font:</label>
+            <select data-montage-id="fontSelection" class="nj-skinned fontSelection"></select>
+            <button data-montage-id="fontSettings" style="display: none"></button>
             <label class="label">Size:</label>
-            <select id="fontSize" class="nj-skinned"></select>
-            <div class="fontColor"></div>
-            <div class="btnGroup">
-                <button id="btnBold" class="btnBold nj-skinned" style="font-weight:bold"></button>
-                <button id="btnItalic" class="btnItalic nj-skinned" style="font-style: italic;"></button>
-                <button id="btnUnderline" class="btnUnderline nj-skinned" style="text-decoration: underline;"></button>
-                <button id="btnStrikethrough" class="btnStriketrough nj-skinned" style="text-decoration: line-through;"></button>
+            <select data-montage-id="fontSize" class="nj-skinned"></select>
+            <div data-montage-id="fontColorCtrl" class="toolColorChipCtrl"></div>
+            <div class="btnGroup toolOptionsFloatChildren">
+                <button data-montage-id="btnBold" class="btnBold nj-skinned textButton" style="font-weight:bold" title="Bold"></button>
+                <button data-montage-id="btnItalic" class="btnItalic nj-skinned textButton" style="font-style: italic;"></button>
+                <button data-montage-id="btnUnderline" class="btnUnderline nj-skinned textButton" style="text-decoration: underline;"></button>
+                <button data-montage-id="btnStrikethrough" class="btnStriketrough nj-skinned textButton" style="text-decoration: line-through;"></button>
             </div>
-            <div class="btnGroup">
-                <button id="alignLeft" class="nj-skinned"></button>
-                <button id="alignCenter" class="nj-skinned"></button>
-                <button id="alignRight" class="nj-skinned"></button>
-                <button id="alignJustify" class="nj-skinned"></button>
+            <div class="btnGroup toolOptionsFloatChildren">
+                <button data-montage-id="alignLeft" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/AlignLeft.png" class="unselectable"/></button>
+                <button data-montage-id="alignCenter" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/AlignCenter.png"  class="unselectable"/></button>
+                <button data-montage-id="alignRight" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/AlignRight.png"  class="unselectable"/></button>
+                <button data-montage-id="alignJustify" class="nj-skinned imageButton"><img src="../../../../images/optionsbar/text/AlignJustified.png"  class="unselectable"/></button>
             </div>
-            <div class="btnGroup">
-                <button id="indent" class="nj-skinned"></button>
-                <button id="outdent" class="nj-skinned"></button>
+            <div class="btnGroup toolOptionsFloatChildren">
+                <button data-montage-id="indent" class="nj-skinned textButton"></button>
+                <button data-montage-id="outdent" class="nj-skinned textButton"></button>
             </div>
-            <div class="btnGroup">
-                <button id="bulletedList" class="nj-skinned"></button>
+            <div class="btnGroup toolOptionsFloatChildren">
+