// <copyright>
// This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
// (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
// </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
// 
  

// Made changes to toolButton  

.toolButton {
    width:26px;
    height:23px;
    padding: 0px;
    margin:1px;
    border-width: 1px;
    border-style: solid; 
}

.subToolButton {
    float:left;
}

#topPanelContainer .subToolButton {

}

.subOption{
    float:left;
    // margin:10px; 
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.toolButton:active {   
    border-top-width: 1px;
    border-top-style: solid; 
    border-left-width: 1px;
    border-left-style: solid; 
}

.toolButtonSelected {
    border-top-width: 1px;
    border-top-style: solid; 
    border-left-width: 1px;
    border-left-style: solid;

}

.toolSeparator {
    height:1px;
    width:30px;
    // margin-left: 3px; 
    // margin-right: 3px; 
}

.toolSeparatorTop {
    margin-top: 3px;
    margin-bottom: 0px;
}

.toolSeparatorMiddle {
    margin-top: 0px;
    margin-bottom: 0px;
}

.toolSeparatorBottom {
    margin-top: 0px;
    margin-bottom: 3px;
}

.toolImageBase {
    padding: 0px;
    width: 26px;
    height: 23px;
    opacity: 0.7;
    background-repeat:no-repeat;
}

.toolImageBase:hover {
   opacity: 1.0;
   }


.drawingMode {
    outline:blue solid thin;
}


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


.LockToolUp {
    background-image: url("../images/optionsbar/link.png");
    background-repeat:no-repeat;
    width:17px;
    height:18px;

    margin-right:10px;
}

.UnLockToolUp {
    background-image: url("../images/optionsbar/unlinked.png");

    background-repeat:no-repeat;
    width:17px;
    height:18px;

    margin-right:10px;
}


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

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

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

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

#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  
#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;
}
#tagToolContainer input.tag-type {
	background-image: url("../images/tools/sprite-toolbar-tag.png");
}
#rotateObjectToolContainer input.tag-type {
	background-image: url("../images/tools/sprite-toolbar-3d.png");
}
#translateObjectToolContainer input.tag-type {
	background-image: url("../images/tools/sprite-toolbar-3d.png");
}

#tagToolContainer input.tag-type:active,
#rotateObjectToolContainer input.tag-type:active,
#translateObjectToolContainer input.tag-type:active {
	border: 1px solid transparent;
}
#tagToolContainer input.tag-type:hover,
#rotateObjectToolContainer input.tag-type:hover,
#translateObjectToolContainer input.tag-type:hover {
	opacity: 1.0;
	-webkit-box-shadow: 0px 0px 4px #fff;
}
#tagToolContainer input.tag-type:checked,
#rotateObjectToolContainer input.tag-type:checked,
#translateObjectToolContainer input.tag-type:checked {
	background-color: transparent;
	opacity: 1.0;
	cursor: default;
	-webkit-box-shadow: none;
}
#tagToolContainer input#divTool {
	background-position: -40px 0px;
}
#tagToolContainer input#divTool:checked {
	background-position: -40px -20px;
}
#tagToolContainer input#imageTool {
	background-position: -60px 0px;
}
#tagToolContainer input#imageTool:checked {
	background-position: -60px -20px;
}
#tagToolContainer input#videoTool {
	background-position: -100px 0px;
}
#tagToolContainer input#videoTool:checked {
	background-position: -100px -20px;
}
#tagToolContainer input#canvasTool,
#rotateObjectToolContainer input#rotateLocally,
#translateObjectToolContainer input#translateLocally   {
	background-position: -20px 0px;
}
#tagToolContainer input#canvasTool:checked,
#rotateObjectToolContainer input#rotateLocally:checked,
#translateObjectToolContainer input#translateLocally:checked {
	background-position: -20px -20px;
}
#tagToolContainer input#flashTool {
	background-position: -80px 0px;
}
#tagToolContainer input#flashTool:checked {
	background-position: -80px -20px;
}
#tagToolContainer input#customTool,
#rotateObjectToolContainer input#rotateGlobally,
#translateObjectToolContainer input#translateGlobally {
	background-position: 0px 0px;
}
#tagToolContainer input#customTool:checked,
#rotateObjectToolContainer input#rotateGlobally:checked,
#translateObjectToolContainer input#translateGlobally:checked {
	background-position: 0px -20px;
}


#tagToolContainer .nj-divider {
	height: 100%;
	float: left;
	position: relative;
	top: 5px;
}

#tagToolContainer select.nj-skinned {
	visibility: visible;
	position: relative;
}

#tagToolContainer select[disabled="true"].nj-skinned,
#tagToolContainer select[disabled].nj-skinned  {
	visibility: hidden;
}

#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;
    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 ;
    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;

}

//  Endi: styles for tag toolbar