@charset "UTF-8";

// <copyright>
// Copyright (c) 2012, Motorola Mobility LLC.
// All Rights Reserved.
// 
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// 
// * Redistributions of source code must retain the above copyright notice,
//   this list of conditions and the following disclaimer.
// 
// * Redistributions in binary form must reproduce the above copyright notice,
//   this list of conditions and the following disclaimer in the documentation
//   and/or other materials provided with the distribution.
// 
// * Neither the name of Motorola Mobility LLC nor the names of its
//   contributors may be used to endorse or promote products derived from this
//   software without specific prior written permission.
// 
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// 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>

//
// Tools.scss
// For individual tool styles in the toolbar, see toolbar.scss.
// Note that colors and font definitions go in
// _scss/themes/themename/_colors.scss and _scss/themes/themename/_fonts.scss
//

.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);
}

.toolOptionsFloatChildren > * {
    float:left;
}

.toolOptionsSpacer {
    margin-right: 9px;
}

.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: rgb(40, 40, 40);
}

// 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);
}

.subToolHolderPanel input.toolOptsRadioButton:hover {
    box-shadow:  0px 0px 2px 2px #999;
    -webkit-transform: scale(1);
}

.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;
   min-width:10em;
   // height:14px;
   margin-left:5px;
   position:relative;
   margin-top:0px;
}

.selectBox {
   width:10em;
   opacity: 0.9;
   margin-left: 10px;
   float:left;
   display:block;
   background-color: $color-tool-select-bg;
   // -webkit-border-radius: 0;
   border: 1px solid $color-tool-select-border;
   color:$color-tool-text;
   outline:none;
}

.selectBox:hover, .selectBox:active {
    background-color: $color-tool-select-hover-bg;
    opacity: 1;
    color:$color-tool-select-border;
}

.label{
   padding-top:3px;
   margin-left:10px;
   font-size:12px;
   // display:inline;
   // line-height:10px;
   float:left;
   margin-right:5px;
}

.subToolPropertiespanel{
   margin-left:43px;
}

.cornerRadius {
    background-image: url("../images/optionsbar/rectangle/cornerRadius.png");
    background-repeat:no-repeat;
    width:16px;
    height:16px;

    opacity:0.7;
}

.cornerRadius:hover, .cornerRadius:active {
    opacity:1;
}

.cornerRadius.topLeft {
    -webkit-transform: rotate(0deg);
    margin-top: 1px;
    margin-right: 3px;
}

.cornerRadius.topRight {
    -webkit-transform: rotate(90deg);
    margin-right: 3px;
    margin-top: 1px;
}

.cornerRadius.bottomLeft {
    -webkit-transform: rotate(270deg);
    margin-right: 2px;
     margin-top: -1px;
}

.cornerRadius.bottomRight {
    -webkit-transform: rotate(180deg);
    margin-right: 4px;
    margin-top: -1px;
}

#toolOptionsContainer
{
    display:inline;
    float:left;
    // margin-left: 20px;
}

.leftLabel{
    margin-top: 3px;
    float:left;
}

//  Skin Radio Buttons
input[type="radio"] {
    -webkit-appearance: none;
    background: $color-radio-bg;
    width: 28px;
    height: 24px;
    vertical-align: middle;
    border-width: 1px;
    border-style: solid;
    border-color:$color-radio-border;
    font-size:10px;
    color:$color-radio;
    margin:4px;

}

input[type="radio"]:hover {
    border-width: 1px;
    border-style: solid;
}

input[type="radio"]:checked {
    background:$color-radio-border;
    border-width: 1px;
    border-style: solid;
}

// disabled settings for checkbox and radiobutton
input[type="radio"]:disabled {
    opacity: .3;
    background: $color-radio-border;
    border-width: 1px;
    border-style: solid;
}

.toolPropertiesContainer{
    float:left;
    margin-left:10%;
    width:100%;
}


.optionButtons{
    padding:2px;
    margin:1px 4px;
    float:left;
}

.checkBoxLabel{
    // margin-top:0.5em;
    // margin-left:-5em;
    padding-top:3px;
    font-size:12px;
    float:left;
    margin-right:5px;
}

.customTextBox{
    float:right;
    margin-left:2em;
    margin-right:4em;
    margin-top:3px;
    height:15px;

}
.toolButtonColor {
    background: $color-tool-bg;
    border-color: $color-tool-bg;
}

.toolButtonColor:active {
    background: $color-tool-bg-active;
}

.toolButtonSelectedColor {
    border-top-color: $color-tool-border-selected;
    border-left-color: $color-tool-border-selected;
  //   background: $color-tool-bg-active;

}

.toolSeparatorTopColor {
    background: $color-tool-separator-top;
}

.toolSeparatorMiddleColor {
    background: $color-tool-separator-middle;
}

.toolSeparatorBottomColor {
    background: $color-tool-separator-bottom;
}


.selectedOption{
   background: $color-tool-bg-active;
   padding:2px;
   border:3px;


}
.noBorder{
    border-style:none;
}

.deselectedOption{
   background: $color-tool-bg;
   border-style:none;
   border:3px;
}

.checkBoxAlign{
  @include marginTop(-2px);
}

.optionLabel{
  @include marginTop(5px);
}

//  Begin: styles for tag toolbar
.tagRadioButtons input.divTool {
    background-image: url("../images/optionsbar/tag/div-tag.png");
}
.tagRadioButtons input.imageTool {
    background-image: url("../images/optionsbar/tag/img-tag.png");
}
.tagRadioButtons input.videoTool {
    background-image: url("../images/optionsbar/tag/vid-tag.png");
}
.tagRadioButtons input.canvasTool {
    background-image: url("../images/optionsbar/tag/canvas-tag.png");
}
.tagRadioButtons input.customTool {
    background-image: url("../images/optionsbar/tag/custom-tag.png");
}

.tagRadioButtons .nj-divider {
    height: 100%;
    float: left;
    position: relative;
}

//  End: styles for tag toolbar

#zoomToolOptionHolder .zoomOutToolIcon {
    background-image:url("../images/optionsbar/zoom/zoom_minus.png");
}

#zoomToolOptionHolder .zoomInToolIcon {
    background-image:url("../images/optionsbar/zoom/zoom_plus.png");
}

// object 3D container styles
.object3DToolContainer input.rotateLocally {
    background-image: url("../images/optionsbar/options3D/rotate-locally.png");
}
.object3DToolContainer input.rotateGlobally {
    background-image: url("../images/optionsbar/options3D/rotate-globally.png");
}

// Selection Tool Options Styles
.optionsSelectionTool button {
    padding-top: 0px;
}

.selectionToolIcon {
    width: 16px;
    height: 16px;
    background-repeat:no-repeat;
    background-position: 1px 2px;
}

.alignTopIcon {
    background-image: url("../images/optionsbar/selection/AlignTop.png");
}

.alignMiddleIcon {
    background-image: url("../images/optionsbar/selection/AlignMiddle.png");
}

.alignBottomIcon {
    background-image: url("../images/optionsbar/selection/AlignBottom.png");
}

.alignLeftIcon {
    background-image: url("../images/optionsbar/selection/AlignLeft.png");
}

.alignCenterIcon {
    background-image: url("../images/optionsbar/selection/AlignCenter.png");
}

.alignRightIcon {
    background-image: url("../images/optionsbar/selection/AlignRight.png");
}

.arrangeBringForwardIcon {
    background-image: url("../images/optionsbar/selection/ArrangeBringForward.png");
}

.arrangeSendBackwardIcon {
    background-image: url("../images/optionsbar/selection/ArrangeSendBackward.png");
}

.arrangeBringToFrontIcon {
    background-image: url("../images/optionsbar/selection/ArrangeBringToFront.png");
}

.arrangeSendToBackIcon {
    background-image: url("../images/optionsbar/selection/ArrangeSendToBack.png");
}

.distTopIcon {
    background-image: url("../images/optionsbar/selection/DistTop.png");
}

.distMiddleIcon {
    background-image: url("../images/optionsbar/selection/DistMiddle.png");
}

.distBottomIcon {
    background-image: url("../images/optionsbar/selection/DistBottom.png");
}

.distLeftIcon {
    background-image: url("../images/optionsbar/selection/DistLeft.png");
}

.distCenterIcon {
    background-image: url("../images/optionsbar/selection/DistCenter.png");
}

.distRightIcon {
    background-image: url("../images/optionsbar/selection/DistRight.png");
}

.optionsPenTool {
}

.optionsPenTool input.penToolIcon {
    background-image:url("../images/tools/Tool-Pen.png");
}

.optionsPenTool input.penPlusToolIcon {
    background-image:url("../images/optionsbar/pen/penPlus.png");
}

.optionsPenTool input.penMinusToolIcon {
    background-image:url("../images/optionsbar/pen/penMinus.png");
}