11 files changed, 33 insertions, 15 deletions
diff --git a/css/ninja.css b/css/ninja.css
index e3d560ab..1a6bd654 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -677,7 +677,9 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul
 .toolOptionsSpacer { margin-right: 9px; }
-.toolColorChipCtrl { width: 18px; height: 18px; margin-top: 1px; margin-left: 3px; margin-right: 8px; border: 1px black solid; }
+.toolColorChipCtrl { width: 16px; height: 16px; border: 1px #000 solid; }
+.toolColorChipContainer { background: url(../../../../../images/colorpanel/transparent.png) repeat; width: 18px; height: 18px; margin-top: 1px; margin-left: 3px; margin-right: 8px; border: 1px #777 solid; }
 .toolColorChipIcon { width: 20px; height: 20px; margin-top: 1px; -webkit-transform: scale(0.8); background-color: #282828; }
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html
index 7d99a42a..8753e921 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.html
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html
@@ -82,7 +82,7 @@
    <body>
        <div data-montage-id="brushProperties" class="subToolHolderPanel toolOptionsFloatChildren">
            <div class="toolColorChipIcon FillTool"></div>
-            <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
+            <div class="toolColorChipContainer"><div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div></div>
            <div class="nj-divider divider-vertical">&nbsp;</div>
            <label class="label"> Width:</label>
            <div data-montage-id="strokeSize" class="label"></div>
diff --git a/js/components/tools-properties/fill-properties.reel/fill-properties.html b/js/components/tools-properties/fill-properties.reel/fill-properties.html
index ca447b8b..a479dbda 100755
--- a/js/components/tools-properties/fill-properties.reel/fill-properties.html
+++ b/js/components/tools-properties/fill-properties.reel/fill-properties.html
@@ -66,7 +66,7 @@
        <div data-montage-id="fillProperties" class="subToolHolderPanel optionsFillTool toolOptionsFloatChildren">
            <input data-montage-id="useFillColor" type="checkbox" name="useFillColorControl" class="nj-skinned"/>
            <div class="toolColorChipIcon FillTool"></div>
-            <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
+            <div class="toolColorChipContainer"><div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div></div>
            <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
            <input data-montage-id="useWebGL" type="checkbox" name="useWebGLControl" class="nj-skinned"/>
diff --git a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
index 5620eed8..41c55bc0 100755
--- a/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
+++ b/js/components/tools-properties/ink-bottle-properties.reel/ink-bottle-properties.html
@@ -151,7 +151,7 @@
                <input data-montage-id="useStrokeColor" type="checkbox" name="useStrokeColor" class="nj-skinned" title="Apply stroke or border-color"/>
                <div class="toolColorChipIcon PencilTool"></div>
-                <div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div>
+                <div class="toolColorChipContainer"><div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div></div>
                <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
                <input data-montage-id="useBorderWidth" type="checkbox" name="useBorderWidthControl" class="nj-skinned" title="Apply border-width"/>
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 adb5cd7d..c77ac660 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.html
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html
@@ -51,9 +51,9 @@
        <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
        <div class="toolColorChipIcon PencilTool"></div>
-        <div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div>
+        <div class="toolColorChipContainer"><div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div></div>
        <div class="toolColorChipIcon FillTool"></div>
-        <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
+        <div class="toolColorChipContainer"><div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div></div>
        <div class="nj-divider divider-vertical">&nbsp;</div>
            <label class="label"> Stroke:</label>
            <div data-montage-id="strokeSize" class="label"></div>
diff --git a/js/components/tools-properties/shape-properties.reel/shape-properties.html b/js/components/tools-properties/shape-properties.reel/shape-properties.html
index ea246ea8..22ea7431 100755
--- a/js/components/tools-properties/shape-properties.reel/shape-properties.html
+++ b/js/components/tools-properties/shape-properties.reel/shape-properties.html
@@ -135,9 +135,9 @@
            </div>
            <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
            <div class="toolColorChipIcon PencilTool"></div>
-            <div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div>
+            <div class="toolColorChipContainer"><div data-montage-id="strokeColorCtrl" class="toolColorChipCtrl"></div></div>
            <div data-montage-id="fillColorCtrlIcon" class="toolColorChipIcon FillTool"></div>
-            <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
+            <div class="toolColorChipContainer"><div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div></div>
            <div class="nj-divider divider-vertical">&nbsp;</div>
            <label class="label">Stroke:</label>
            <div data-montage-id="strokeControl" class="label"></div>
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 87f87aff..082384db 100755
--- a/js/components/tools-properties/tag-properties.reel/tag-properties.html
+++ b/js/components/tools-properties/tag-properties.reel/tag-properties.html
@@ -48,7 +48,7 @@
                <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
                <div class="toolColorChipIcon FillTool"></div>
-                <div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div>
+                <div class="toolColorChipContainer"><div data-montage-id="fillColorCtrl" class="toolColorChipCtrl"></div></div>
                <div class="nj-divider divider-vertical toolOptionsSpacer">&nbsp;</div>
                <div id="classNameContainer">
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 218105a7..586cdcd5 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.css
+++ b/js/components/tools-properties/text-properties.reel/text-properties.css
@@ -39,7 +39,7 @@
    width: 160px;
 }
-.optionsTextTool .toolColorChipCtrl {
+.fontColorChipContainer {
-    margin-left: 6px;
+    margin-left: 10px !important;
    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 e7fafd0d..f47ca0c8 100755
--- a/js/components/tools-properties/text-properties.reel/text-properties.html
+++ b/js/components/tools-properties/text-properties.reel/text-properties.html
@@ -290,7 +290,7 @@
            <button data-montage-id="fontSettings" style="display: none"></button>
            <label class="label">Size:</label>
            <select data-montage-id="fontSize" class="nj-skinned"></select>
-            <div data-montage-id="fontColorCtrl" class="toolColorChipCtrl"></div>
+            <div class="toolColorChipContainer fontColorChipContainer"><div data-montage-id="fontColorCtrl" class="toolColorChipCtrl"></div></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>
diff --git a/js/panels/properties.reel/properties.css b/js/panels/properties.reel/properties.css
index 84f52ed4..d1aa750a 100755
--- a/js/panels/properties.reel/properties.css
+++ b/js/panels/properties.reel/properties.css
@@ -239,8 +239,9 @@ padding-right:6px;
 }
 .propertiesPanel .colortoolbar div {
-    margin: 0px 10px 0px 20px;
+    margin: 0px 5px 0px 10px;
    clear:none;
+    float: left;
 }
 /* color select */
@@ -250,6 +251,13 @@ padding-right:6px;
    clear:none;
 }
+.propertiesPanel .colortoolbar .chipContainer {
+        margin-top: 2px;
+        background: url(../../../../../images/colorpanel/transparent.png) repeat;
+        width: 40px;
+        height: 20px;
+}
 .propertiesPanel .button:active {
    outline: none;
 }
diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss
index c63e695d..e599668f 100755
--- a/scss/imports/scss/_Tools.scss
+++ b/scss/imports/scss/_Tools.scss
@@ -36,12 +36,20 @@
 }
 .toolColorChipCtrl {
-    width: 18px;
+    width: 16px;
+    height: 16px;
+    border: 1px #000 solid;
+}
+.toolColorChipContainer
+{