@charset "utf-8";
/* CSS Document */
.tool {
margin-right: 9px;
margin-left:-5px;
    display:inline-block;
    width: 40px;
    height: 53px;
    overflow: hidden;
    cursor: pointer;
    cursor: hand;
	/*left:30px;*/
	/*right:50px;*/
	
}

.tool.disabled {
    opacity: 0.5;
    cursor : default;
}

#tbpen {
    background: url(resources/layout/toolbar/pen.png) no-repeat;
}

#tbmarker {
    background: url(resources/layout/toolbar/marker.png) no-repeat;
}

#tberaser {
    background: url(resources/layout/toolbar/eraser.png) no-repeat;
}

#tbhideshow {
    background: url(resources/layout/toolbar/hideshow.png) no-repeat;
}
#tbzoom {
    background: url(resources/layout/toolbar/zoom.png) no-repeat;
}

.size-square {
    background-color:#ffffff;
    display:inline-block;
    vertical-align:middle;
    margin-top:12px;
    margin-left:auto;
    margin-right:auto;
    cursor: pointer;
    cursor: hand;
}
.pen-rect {
    background-color:#ffffff;
}

#marker-size-open {
    background: url(resources/layout/toolbar/mark2.png) no-repeat;
}

#marker-sizes > div:nth-child(1) > div.pen-rect {
   /* background-color:red;*/
     background: url(resources/layout/toolbar/line1.png) no-repeat;
}

#marker-sizes > div:nth-child(2) > div.pen-rect {
  /*  background-color:blue;*/
    background: url(resources/layout/toolbar/line2.png) no-repeat;
}

#marker-sizes > div:nth-child(3) > div.pen-rect {
  /*  background-color:green;*/
    background: url(resources/layout/toolbar/line3.png) no-repeat;
}

#marker-sizes > div:nth-child(4) > div.pen-rect {
  /*  background-color:yellow;*/
    background: url(resources/layout/toolbar/line4.png) no-repeat;
}

#marker-sizes > div:nth-child(5) > div.pen-rect {
   /*  background-color:pink;*/
   background: url(resources/layout/toolbar/line5.png) no-repeat;
}

#eraser-sizes > div:nth-child(1) > div.size-square {  
     background: url(resources/layout/toolbar/erase1.png) no-repeat;   
}

#eraser-sizes > div:nth-child(2) > div.size-square {
     background: url(resources/layout/toolbar/erase2.png) no-repeat;   }

#eraser-sizes > div:nth-child(3) > div.size-square {
     background: url(resources/layout/toolbar/erase3.png) no-repeat;   }

#eraser-sizes > div:nth-child(4) > div.size-square {
     background: url(resources/layout/toolbar/erase4.png) no-repeat;   }

#eraser-sizes > div:nth-child(5) > div.size-square {
     background: url(resources/layout/toolbar/erase5.png) no-repeat;   }

#pen-sizes > div:nth-child(1) > div.pen-rect {
     /*background-color:purple;*/   
    background: url(resources/layout/toolbar/line1.png) no-repeat;
}

#pen-sizes > div:nth-child(2) > div.pen-rect {
  /*  background-color:red;*/ 
     background: url(resources/layout/toolbar/line2.png) no-repeat;  
}

#pen-sizes > div:nth-child(3) > div.pen-rect {
   /*  background-color:green;*/
    background: url(resources/layout/toolbar/line3.png) no-repeat;   
}

#pen-sizes > div:nth-child(4) > div.pen-rect {
   /* background-color:blue;*/
     background: url(resources/layout/toolbar/line4.png) no-repeat;   
}

#pen-sizes > div:nth-child(5) > div.pen-rect {
   /*  background-color:yellow;*/   
    background: url(resources/layout/toolbar/line5.png) no-repeat;
}
#pen-size-open {
    background: url(resources/layout/toolbar/pen2.png) no-repeat;
}
#select-hide {
    background: url(resources/layout/toolbar/eye1.png) no-repeat;
}

#select-show {
    background: url(resources/layout/toolbar/eye2.png) no-repeat;
}

#select-del {
    background: url(resources/layout/toolbar/eye3.png) no-repeat;
}
#zoom-in {
    background: url(resources/layout/toolbar/zoomin.png) no-repeat;
}
#zoom-out {
    background: url(resources/layout/toolbar/zoomout.png) no-repeat;
}
#zoom-reset {
    background: url(resources/layout/toolbar/zoomreset.png) no-repeat;
}

.simpleColorDisplay {
       background: url(resources/layout/toolbar/mark1.png) no-repeat;
}

.eraser-size-choice {
    text-align:center;
    width:31px;
    height:31px;
    display:inline-block;
    cursor: pointer;
    cursor: hand;
}
#pen-size-open {
    cursor: pointer;
    cursor: hand;
}
.pen-size-choice {
    cursor: pointer;
    cursor: hand;
    height:20px;
}
#marker-size-open {
    cursor: pointer;
    cursor: hand;
}
.marker-size-choice {
    cursor: pointer;
    cursor: hand;
    height:20px;
}

.hideshowbutton {
    cursor: pointer;
    cursor: hand;
}
.zoom-button {
    cursor: pointer;
    cursor: hand;
}
.simpleColorChooser {
    left:-67px !important;
}

#elementResizable {
    border: 1px solid #000000;
    width: 300px;
    height: 40px;
    /*overflow: hidden;*/
    background-color:#3399FF;
    border-color:#3399FF;
}

#nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
}
#nwgrip {
    left: -5px;
    top: -5px;
}
#negrip{
     top: -5px;
     right: -5px;
}
#swgrip{
    bottom: -5px;
    left: -5px;
}
#segrip{
     bottom: -5px;
     right:-5px;
}
#ngrip{
     top: -5px;
     left:50%;
     margin-left:-6px;
}
#sgrip{
     bottom: -5px;
     left: 50%;
     margin-left:-6px;
}
#wgrip{
     left:-5px;
     top:50%;
     margin-top:-6px;
}
#egrip{
     right:-5px;
     top:50%;
     margin-top:-6px;
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}