3 files changed, 156 insertions, 298 deletions

diff --git a/scss/imports/scss/_PanelUI.scss b/scss/imports/scss/_PanelUI.scss
index dd8cee04..8baffc95 100755
--- a/scss/imports/scss/_PanelUI.scss
+++ b/scss/imports/scss/_PanelUI.scss
@@ -855,20 +855,7 @@ div.pp-button.button-divider div {
 
 //  End: Tree component for Project Panel  
 
-
-.subToolHolderPanel{
-    margin-left:42px
-}
-
-.subToolPanel{
-    margin-top:-6px
-}
-
-// .marginposition{ 
-    // margin-top:-26px 
-// } 
 //  Begin: Properties Panel styles  
-
 .properties_panel {
         overflow-x: hidden;
         color: $color-panel-text;
diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss
index 55c37d02..c63e695d 100755
--- a/scss/imports/scss/_Tools.scss
+++ b/scss/imports/scss/_Tools.scss
@@ -11,68 +11,77 @@
 // _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
 // 
   
-
-// Made changes to toolButton  }
+.subToolHolderPanel {
+    margin-left: 42px;
+    padding: 6px;
+    float:left;
+}
 
 .subToolHolderPanel .toolbutton {
     float:left;
     -webkit-transform: scale(0.6);
+        margin-top: -4px;
 }
 
 .subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active {
     -webkit-transform: scale(0.75);
 }
 
-.subOption{
+.toolOptionsFloatChildren > * {
     float:left;
-    // margin:10px; 
-    margin-top: 5px;
-    margin-left: 10px;
-    margin-right: 10px;
 }
 
-.toolSeparator {
-    height:1px;
-    width:30px;
-    // margin-left: 3px; 
-    // margin-right: 3px; 
+.toolOptionsSpacer {
+    margin-right: 9px;
 }
 
-.toolSeparatorTop {
-    margin-top: 3px;
-    margin-bottom: 0px;
+.toolColorChipCtrl {
+    width: 18px;
+    height: 18px;
+    margin-top: 1px;
+    margin-left: 3px;    
+    margin-right: 8px;    
+    border: 1px black solid;
 }
 
-.toolSeparatorMiddle {
-    margin-top: 0px;
-    margin-bottom: 0px;
+.toolColorChipIcon {
+    width: 20px;
+    height: 20px;
+    margin-top: 1px;
+    -webkit-transform: scale(0.8);
+    background-color: rgb(40, 40, 40);
 }
 
-.toolSeparatorBottom {
-    margin-top: 0px;
-    margin-bottom: 3px;
+// generic styles for image radio button groups used in the tool options bar
+.subToolHolderPanel input.toolOptsRadioButton {
+        width: 24px;
+        height: 24px;
+        margin: 0px 5px 0px 0px;
+        padding: 0px;
+        cursor: pointer;
+        border-radius: 3px;
+        -webkit-user-select: none;
+        border: 1px solid transparent;
+        background: none;
+        background-repeat: no-repeat;
+        background-position: center center;
+        -webkit-transform: scale(0.9);
 }
 
-.toolImageBase {
-    padding: 0px;
-    width: 26px;
-    height: 23px;
-    opacity: 0.7;
-    background-repeat:no-repeat;
+.subToolHolderPanel input.toolOptsRadioButton:hover {
+        box-shadow:  0px 0px 2px 2px #999;
+    -webkit-transform: scale(1);
 }
 
-.toolImageBase:hover {
-   opacity: 1.0;
-   }
-
-
-.drawingMode {
-    outline:blue solid thin;
+.subToolHolderPanel input.toolOptsRadioButton:checked {
+    box-shadow: inset 0px 0px 2px 2px #999;
+    background-color:#363636;
+        background-position: center center;
+        background-repeat: no-repeat;
+    -webkit-transform: scale(1);
 }
 
-
 //  Added new styling Sub Tool Shape Options 
-
 .textBox {
 
    padding-top:3px;
@@ -129,28 +138,28 @@
     opacity:1;
 }
 
-.cornerRadius.topLeft
-{
+.cornerRadius.topLeft {
     -webkit-transform: rotate(0deg);
+        margin-top: 1px;
+        margin-right: 3px;
 }
 
-.cornerRadius.topRight
-{
+.cornerRadius.topRight {
     -webkit-transform: rotate(90deg);
-    margin-right : -2px;
+        margin-right: 3px;
+        margin-top: 1px;
 }
 
-.cornerRadius.bottomLeft
-{
-    margin-top: 3px;
+.cornerRadius.bottomLeft {
     -webkit-transform: rotate(270deg);
+        margin-right: 2px;
+     margin-top: -1px;
 }
 
-.cornerRadius.bottomRight
-{
-    margin-top: 3px;
+.cornerRadius.bottomRight {
     -webkit-transform: rotate(180deg);
-    margin-right : -2px;
+        margin-right: 4px;
+        margin-top: -1px;
 }
 
 #toolOptionsContainer
@@ -285,159 +294,143 @@ input[type="radio"]:disabled {
 }
 
 //  Begin: styles for tag toolbar  
-#tagToolContainer input.tag-type,
-#rotateObjectToolContainer input.tag-type,
-#translateObjectToolContainer input.tag-type {
-        background: none;
-        width: 20px;
-        height: 20px;
-        display: block;
-        float: left;
-        margin: 0px;
-        padding: 0px;
-        margin-right: 5px;
-        margin-top: 4px;
-        background-repeat: no-repeat;
-        opacity: 0.8;
-        text-indent: -9999px;
-        cursor: pointer;
-        -webkit-border-radius: 3px;
-        -webkit-user-select: none;
-        border: 1px solid transparent;
+.tagRadioButtons input.divTool {
+        background-image: url("../images/optionsbar/tag/div-tag.png");
+}
+.tagRadioButtons input.imageTool {
+        background-image: url("../images/optionsbar/tag/img-tag.png");
 }
-#tagToolContainer input.tag-type {
-        background-image: url("../images/tools/sprite-toolbar-tag.png");
+.tagRadioButtons input.videoTool {
+        background-image: url("../images/optionsbar/tag/vid-tag.png");
 }
-#rotateObjectToolContainer input.tag-type {
-        background-image: url("../images/tools/sprite-toolbar-3d.png");
+.tagRadioButtons input.canvasTool {
+        background-image: url("../images/optionsbar/tag/canvas-tag.png");
 }
-#translateObjectToolContainer input.tag-type {
-        background-image: url("../images/tools/sprite-toolbar-3d.png");
+.tagRadioButtons input.customTool {
+        background-image: url("../images/optionsbar/tag/custom-tag.png");
 }
 
-#tagToolContainer input.tag-type:active,
-#rotateObjectToolContainer input.tag-type:active,
-#translateObjectToolContainer input.tag-type:active {
+.tagRadioButtons .nj-divider {
+        height: 100%;
+        float: