1 files changed, 46 insertions, 92 deletions

diff --git a/scss/imports/scss/_Tools.scss b/scss/imports/scss/_Tools.scss
index c2d2498a..1813fb14 100755
--- a/scss/imports/scss/_Tools.scss
+++ b/scss/imports/scss/_Tools.scss
@@ -31,11 +31,6 @@
     float:left;
 }
 
-// .toolOptionsFloatChildren select.nj-skinned {
-//     margin-top: 2px;
-// }
-
-
 .toolOptionsSpacer {
     margin-right: 9px;
 }
@@ -57,6 +52,45 @@
     background-color: rgb(40, 40, 40);
 }
 
+// generic styles for image radio button groups used in the tool options bar
+.subToolHolderPanel input.toolOptsRadioButton {
+        background: none;
+        width: 20px;
+        height: 20px;
+        display: block;
+        margin: 0px;
+        padding: 0px;
+        margin-right: 5px;
+        margin-top: 0px;
+        background-repeat: no-repeat;
+        opacity: 0.8;
+        text-indent: -9999px;
+        cursor: pointer;
+        -webkit-border-radius: 3px;
+        -webkit-user-select: none;
+        border: 1px solid transparent;
+        background-position: 1px 1px;
+}
+
+.subToolHolderPanel input.toolOptsRadioButton:active {
+        border: 1px solid transparent;
+}
+
+.subToolHolderPanel input.toolOptsRadioButton:hover {
+        opacity: 1.0;
+        -webkit-box-shadow: 0px 0px 4px #fff;
+}
+
+.subToolHolderPanel input.toolOptsRadioButton:checked {
+        background-color: $color-tool-bg-active;
+        opacity: 1.0;
+        cursor: default;
+        -webkit-box-shadow: none;
+        background-repeat: no-repeat;
+        background-position: 1px 1px;
+}
+
+
 //  Added new styling Sub Tool Shape Options 
 .textBox {
 
@@ -270,70 +304,20 @@ input[type="radio"]:disabled {
 }
 
 //  Begin: styles for tag toolbar  
-.tagRadioButtons input.tag-type {
-        background: none;
-        width: 20px;
-        height: 20px;
-        display: block;
-        float: left;
-        margin: 0px;
-        padding: 0px;
-        margin-right: 5px;
-        margin-top: 0px;
-        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.tag-type {
-        background-image: url("../images/tools/sprite-toolbar-tag.png");
-}
-.tagRadioButtons input.tag-type:active {
-        border: 1px solid transparent;
-}
-.tagRadioButtons input.tag-type:hover {
-        opacity: 1.0;
-        -webkit-box-shadow: 0px 0px 4px #fff;
-}
-.tagRadioButtons input.tag-type:checked {
-        background-color: transparent;
-        opacity: 1.0;
-        cursor: default;
-        -webkit-box-shadow: none;
-}
 .tagRadioButtons input.divTool {
-        margin-left: 8px;
-        background-position: -40px 0px;
-}
-.tagRadioButtons input.divTool:checked {
-        background-position: -40px -20px;
+        background-image: url("../images/optionsbar/tag/div-tag.png");
 }
 .tagRadioButtons input.imageTool {
-        background-position: -60px 0px;
-}
-.tagRadioButtons input.imageTool:checked {
-        background-position: -60px -20px;
+        background-image: url("../images/optionsbar/tag/img-tag.png");
 }
 .tagRadioButtons input.videoTool {
-        background-position: -100px 0px;
-}
-.tagRadioButtons input.videoTool:checked {
-        background-position: -100px -20px;
+        background-image: url("../images/optionsbar/tag/vid-tag.png");
 }
 .tagRadioButtons input.canvasTool {
-        background-position: -20px 0px;
-}
-.tagRadioButtons input.canvasTool:checked {
-        background-position: -20px -20px;
+        background-image: url("../images/optionsbar/tag/canvas-tag.png");
 }
 .tagRadioButtons input.customTool {
-        background-position: 0px 0px;
-}
-.tagRadioButtons input.customTool:checked {
-        background-position: 0px -20px;
+        background-image: url("../images/optionsbar/tag/custom-tag.png");
 }
 
 .tagRadioButtons .nj-divider {
@@ -354,42 +338,12 @@ input[type="radio"]:disabled {
 }
 //  End: styles for tag toolbar  
 
-#zoomToolOptionHolder input#zoomInTool:checked{
-    border-style:solid;
-    border-width:1px ;
-    border-color: $color-input;
-    background-image:url("../images/optionsbar/zoom/zoom_plus.png");
-    background-repeat: no-repeat;
-    background-position:4px 3px;
-}
-
-#zoomToolOptionHolder input#zoomOutTool:checked{
-    border-style:solid;
-    border-width:1px ;
-    border-color: $color-input;
+#zoomToolOptionHolder .zoomOutToolIcon {
     background-image:url("../images/optionsbar/zoom/zoom_minus.png");
-    background-repeat: no-repeat;
-    background-position:4px 3px;
 }
 
-#zoomToolOptionHolder input#zoomInTool{
-    border-style:solid;
-    border-width:1px ;
+#zoomToolOptionHolder .zoomInToolIcon {
     background-image:url("../images/optionsbar/zoom/zoom_plus.png");
-    background-repeat: no-repeat;
-    background-position:4px 3px;
-}
-
-#zoomToolOptionHolder input#zoomOutTool{
-    border-style:solid;
-    border-width:1px ;
-    background-image:url("../images/optionsbar/zoom/zoom_minus.png");
-    background-repeat: no-repeat;
-    background-position:4px 3px;
-
-}
-#zoomToolOptionHolder input.zoom-option {
-    background:none;
 }
 
 // object 3D container styles