*{
     margin:0px; padding:0px;
     box-sizing: border-box;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
     font-family: arial, sans-serif;
}
body{
     background-image: url('../images/fon.jpg');
     background-position: top;
}
html, body{ 
     /*height:100%;*/ 
}
input, textarea, select, button{outline:none;}
img{border:none;}



.risovalka-container{
     position:relative;
     display:block;
     min-width: 990px;
     padding: 10px 0px;
}

.risovalka{
     position: relative; 
     display: block; 
     width: 970px;
     margin: 0px auto;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.risovalka__menu{
     position: relative; 
     display: block; 
     min-height: 125px; 
     padding-left: 6px;
}

.risovalka-window__cont{
     position: relative;
     display: block;
}
.risovalka__window{
     position: relative; 
     display: inline-block;
     vertical-align: top; 
}

.window-box{
    position: relative; 
    display: block;  
    border: 1px solid #cacaca; 
    /*
    background-image: url('../images/grid.png');  
    background-color: #666; 
    */
}
.upper-canvas{background-color: transparent; }





/* .butt-popUp ------------------------------- */
.butt-popUp{
     position: absolute; 
     opacity: 0; 
     top: -50px; 
     left: 50%; 
     width: 200px; 
     height: 0px; 
     margin-left: -100px; 
     text-align: center; 
    -webkit-transition: 0.2s opacity, 0.2s top; 	 
       -moz-transition: 0.2s opacity, 0.2s top; 
         -o-transition: 0.2s opacity, 0.2s top;  
            transition: 0.2s opacity, 0.2s top; 
}
.butt-popUp span{
     position: relative; 
     vertical-align: top;
     display: none;
     height: 27px;
     padding: 6px 10px 0px 10px;
     font-size: 12px;
     line-height: 12px;
     color: #808184; 
     border: 1px solid #808184;
     background-color: #fff;
}
.butt-popUp span:before{
     position: absolute;
     content: '';
     bottom: -6px;
     left: 50%;
     margin-left: -6px;
     width: 13px;
     height: 6px;
     background-image: url('../images/buttons.png'); 
     background-position: 0px -600px;
     background-repeat: no-repeat;
}

.butt-controls:hover .butt-popUp,
.butt-retain:hover .butt-popUp,
.cancelAll:hover .butt-popUp,
.cancellation:hover .butt-popUp{opacity: 1; top: -37px; }

.butt-controls.active:hover .butt-popUp,
.butt-retain.active:hover .butt-popUp,
.cancelAll.active:hover .butt-popUp, 
.cancellation.active:hover .butt-popUp{opacity: 0; }

.butt-controls:hover .butt-popUp span,
.butt-retain:hover .butt-popUp span,
.cancelAll:hover .butt-popUp span,
.cancellation:hover .butt-popUp span{display: inline-block; }

.butt-controls.active:hover .butt-popUp span,
.butt-retain.active:hover .butt-popUp span,
.cancelAll.active:hover .butt-popUp span,
.cancellation.active:hover .butt-popUp span{display: none; }





/* .butt-controls ---------------------------- */
.butt-controls{
     position: relative;
     display: inline-block;
     vertical-align: top;
     width: 52px;
     height: 54px;
     margin: 36px 20px 0px 0px;
     cursor: pointer;
     background-image: url('../images/buttons.png'); 
     background-repeat: no-repeat;
}

.butt-dragDrop{background-position: 0px -100px; }
.butt-fill{background-position: 0px 0px; }

.butt-controls:before{
     position: absolute;
     display: none;
     content: '';
     top: -6px;
     left: -6px;
     width: 64px;
     height: 67px;
     background-image: url('../images/buttons.png'); 
     background-repeat: no-repeat; 
}

.butt-dragDrop:before{background-position: -100px -100px; }
.butt-fill:before{background-position: -100px 0px; }

.butt-controls.active:before{display: block; }





/* .butt-retain ------------------------------ */
.butt-retain{
     position: absolute;
     top: 36px;
     right: 183px;
     width: 52px;
     height: 54px;
     cursor: pointer;
     background-image: url('../images/buttons.png'); 
     background-position: 0px -200px;
     background-repeat: no-repeat;
}




/* .butt-paletteColor ------------------------ */
.butt-paletteColor{position: absolute; top: 18px; right: 243px; }
.butt-paletteColor span{position: relative; display: inline-block; vertical-align: top; margin-bottom: 13px; font-size: 12px; line-height: 12px; color: #000; }

.butt-paletteColor ul{position: relative; display: block; max-width: 280px; margin-bottom: 2px; }
.butt-paletteColor ul li{
     position: relative; 
     display: inline-block;
     vertical-align: top;
     opacity: 0.3;
     margin: 0px 0px 5px 0px;
     width: 18px; 
     height: 18px; 
     border: 1px solid #fff;
     background-size: 100% auto;
    -webkit-transition: 0.2s all; 	 
       -moz-transition: 0.2s all; 
         -o-transition: 0.2s all; 
            transition: 0.2s all;
}
.butt-paletteColor ul li.active{
     z-index: 1;
     border: 1px solid #333;
    -webkit-box-shadow: 0px 0px 0px 2px #333, 0px 0px 15px 3px #333;	
       -moz-box-shadow: 0px 0px 0px 2px #333, 0px 0px 15px 3px #333;	
            box-shadow: 0px 0px 0px 2px #333, 0px 0px 15px 3px #333;	
}
.butt-paletteColor ul.active li{cursor: pointer; opacity: 1; }




.risovalka__library{
     position: absolute;
     top: 0px;
     right: 0px;
     width: 235px; 
     height: 100%; 
     padding: 4px 8px;
     border: 1px solid #cacaca; 
     opacity: 0.4;
    -webkit-transition: 0.2s opacity; 	 
       -moz-transition: 0.2s opacity; 
         -o-transition: 0.2s opacity; 
            transition: 0.2s opacity;
}

/* .library ---------------------------------- */
.library{position: relative; display: block; margin: 4px 0px; }
.library__title{
     position: relative;
     display: block;
     height: 32px;
     z-index: 1;
    -webkit-border-radius: 4px;
     -khtml-border-radius: 4px;
       -moz-border-radius: 4px;
	       border-radius: 4px;
}
.library__title span{
     position: relative;
     display: block;
     height: 100%;
     padding: 7px 12px 0px 12px;
     font-size: 16px;
     line-height: 18px;
     text-transform: uppercase;
     color: #fff;
}
.library__cont{
     position: relative; 
     display: none; 
     max-height: 310px;
     overflow: auto;
     padding: 0px 2px;
     top: -4px;
     margin-bottom: -4px;
     background-color: #797979;
     border: 1px solid #908e90;
     border-top: none;
}
.libraryBox{position: relative; display: block; padding: 6px 0px; }
.library.active .library__cont{display: block; }


.libraryPic__box{
     position: relative; 
     display: inline-block;
     vertical-align: top;
     float: left;
     width: 33.33%;
     height: 70px;
     padding: 2px;
     text-align: center;  
}
.picBox{position: relative; display: inline-block; vertical-align: top; max-width: 100%; height: 90%; padding: 5px; }



/* .library gradient ------------------------- */
.lib-leaves .library__title{
     border: 1px solid #90be46;
     background: -moz-linear-gradient(top, #d8eab3, #a1cc4a 100%); 
     background-image: -o-linear-gradient(top, #d8eab3, #a1cc4a 100%); 
     background-image: -webkit-linear-gradient(top, #d8eab3, #a1cc4a 100%); 
     background-image: -webkit-gradient(linear, left top, left bottom, from(#d8eab3), to(#a1cc4a));
     background-image: -ms-linear-gradient(top, #d8eab3 0%, #a1cc4a 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#d8eab3, endColorstr=#a1cc4a, GradientType=0);   
}
.lib-flowers .library__title{
     border: 1px solid #00963a;
     background: -moz-linear-gradient(top, #93d8b6, #00a24e 100%); 
     background-image: -o-linear-gradient(top, #93d8b6, #00a24e 100%); 
     background-image: -webkit-linear-gradient(top, #93d8b6, #00a24e 100%); 
     background-image: -webkit-gradient(linear, left top, left bottom, from(#93d8b6), to(#00a24e));
     background-image: -ms-linear-gradient(top, #93d8b6 0%, #00a24e 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#93d8b6, endColorstr=#00a24e, GradientType=0); 
}
.lib-stalks .library__title{
     border: 1px solid #00a0cd;
     background: -moz-linear-gradient(top, #93e2f1, #00b6dc 100%); 
     background-image: -o-linear-gradient(top, #93e2f1, #00b6dc 100%); 
     background-image: -webkit-linear-gradient(top, #93e2f1, #00b6dc 100%); 
     background-image: -webkit-gradient(linear, left top, left bottom, from(#93e2f1), to(#00b6dc));
     background-image: -ms-linear-gradient(top, #93e2f1 0%, #00b6dc 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#93e2f1, endColorstr=#00b6dc, GradientType=0); 
}
.lib-butterfly .library__title{
     border: 1px solid #45407e;
     background: -moz-linear-gradient(top, #bdaec9, #60407e 100%); 
     background-image: -o-linear-gradient(top, #bdaec9, #60407e 100%); 
     background-image: -webkit-linear-gradient(top, #bdaec9, #60407e 100%); 
     background-image: -webkit-gradient(linear, left top, left bottom, from(#bdaec9), to(#60407e));
     background-image: -ms-linear-gradient(top, #bdaec9 0%, #60407e 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#bdaec9, endColorstr=#60407e, GradientType=0); 
}
.lib-stamps .library__title{
     border: 1px solid #df3c7c;
     background: -moz-linear-gradient(top, #f7aec0, #eb3e6d 100%); 
     background-image: -o-linear-gradient(top, #f7aec0, #eb3e6d 100%); 
     background-image: -webkit-linear-gradient(top, #f7aec0, #eb3e6d 100%); 
     background-image: -webkit-gradient(linear, left top, left bottom, from(#f7aec0), to(#eb3e6d));
     background-image: -ms-linear-gradient(top, #f7aec0 0%, #eb3e6d 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#f7aec0, endColorstr=#eb3e6d, GradientType=0); 
}


/* .library gradient active ------------------ */
.lib-leaves.active .library__title{
     background: -moz-linear-gradient(top, #6b8832, #a4ce4c 100%); 
     background-image: -o-linear-gradient(top, #6b8832, #a4ce4c 100%); 
     background-image: -webkit-linear-gradient(top, #6b8832, #a4ce4c 100%); 
     background-image: -webkit-gradient(linear, left top, left bottom, from(#6b8832), to(#a4ce4c));
     background-image: -ms-linear-gradient(top, #6b8832 0%, #a4ce4c 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#6b8832, endColorstr=#a4ce4c, GradientType=0);   
}
.lib-flowers.active .library__title{
     background: -moz-linear-gradient(top, #006d36, #00a551 100%); 
     background-image: -o-linear-gradient(top, #006d36, #00a551 100%); 
     background-image: -webkit-linear-gradient(top, #006d36, #00a551 100%); 
     background-image: -webkit-gradient(linear, left top, left bottom, from(#006d36), to(#00a551));
     background-image: -ms-linear-gradient(top, #006d36 0%, #00a551 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#006d36, endColorstr=#00a551, GradientType=0); 
}
.lib-stalks.active .library__title{
     background: -moz-linear-gradient(top, #007b93, #00bade 100%); 
     background-image: -o-linear-gradient(top, #007b93, #00bade 100%); 
     background-image: -webkit-linear-gradient(top, #007b93, #00bade 100%); 
     background-image: -webkit-gradient(linear, left top, left bottom, from(#007b93), to(#00bade));
     background-image: -ms-linear-gradient(top, #007b93 0%, #00bade 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#007b93, endColorstr=#00bade, GradientType=0); 
}
.lib-butterfly.active .library__title{
     background: -moz-linear-gradient(top, #422a54, #65407f 100%); 
     background-image: -o-linear-gradient(top, #422a54, #65407f 100%); 
     background-image: -webkit-linear-gradient(top, #422a54, #65407f 100%); 
     background-image: -webkit-gradient(linear, left top, left bottom, from(#422a54), to(#65407f));
     background-image: -ms-linear-gradient(top, #422a54 0%, #65407f 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#422a54, endColorstr=#65407f, GradientType=0); 
}
.lib-stamps.active .library__title{
     background: -moz-linear-gradient(top, #9c2947, #ee3f6b 100%); 
     background-image: -o-linear-gradient(top, #9c2947, #ee3f6b 100%); 
     background-image: -webkit-linear-gradient(top, #9c2947, #ee3f6b 100%); 
     background-image: -webkit-gradient(linear, left top, left bottom, from(#9c2947), to(#ee3f6b));
     background-image: -ms-linear-gradient(top, #9c2947 0%, #ee3f6b 100%);
     filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#9c2947, endColorstr=#ee3f6b, GradientType=0); 
}

.risovalka__library.active{opacity: 1; }
.risovalka__library.active .library__title{cursor: pointer; }
.risovalka__library.active .libraryPic__box{cursor: pointer; }
.risovalka__library.active .libraryPic__box:hover{background-color: #615f5f; }




.ris-bottom{position: absolute; width: 400px; left: 20px; bottom: 20px; display: none; }



.cancelAll, .cancellation{
     position: absolute;
     bottom: 10px;
     width: 38px;
     height: 40px;
     cursor: pointer;
     background-image: url('../images/buttons.png'); 
     background-repeat: no-repeat;
}
.cancelAll{left: 80px; background-position: 0px -400px; }
.cancellation{left: 25px; background-position: 0px -300px; }





/* .actionHistory ---------------------------- */
.actionHistory{
     position: relative;
     display: block;
     clear: both;
     background-color: #6b6ca3; 
     border-top: 1px solid #404040;  
}
.actionHistory span{position: relative; display: block; margin-bottom: 1px; background-color: #fff; font-size: 16px; color: #000; padding: 10px 10px; }

.actionHistory ul{position: relative; display: block; height: 158px; overflow: auto; }
.actionHistory ul:before{position: absolute; content: 'Нет истории действий'; top: 5px; left: 10px; font-size: 12px; color: #ccc; font-style: italic; }

.actionHistory li{
     position: relative; 
     display: block; 
     font-size: 14px; 
     padding: 2px 10px; 
     color: #000; 
     background-color: #f1f0f4; 
     cursor: pointer; 
    -webkit-transition: 0.1s background-color, 0.1s color; 	 
       -moz-transition: 0.1s background-color, 0.1s color; 
         -o-transition: 0.1s background-color, 0.1s color; 
            transition: 0.1s background-color, 0.1s color; 
}
.actionHistory li:nth-child(2n+1){background-color: #dfdee0; }
.actionHistory li:hover{background-color: #cac9cb; }





/* .popUp ------------------------------------ */
.popUp{position: fixed; display: none; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1000; background-color: rgba(0,9,0,0.5);  }
.popUp__wind{
     position: absolute;
     top: 50%;
     left: 50%;
     width: 420px;
     min-height: 195px;
     margin: -98px 0px 0px -210px;
     background-color: #f1f1f2;
     border: 1px solid #000;
}

.popUp-title{position: relative; display: block; height: 34px; }
.popUp-titleText{
     position: relative;
     display: block;
     font-size: 14px;
     font-weight: bold;
     color: #fff;
     line-height: 16px;
     padding: 9px 0px 0px 14px;
}
.popUp-close{
     position: absolute;
     top: 8px;
     right: 6px;
     width: 21px;
     height: 20px;
     cursor: pointer;
     background-image: url('../images/buttons.png'); 
     background-position: 0px -500px;
     background-repeat: no-repeat; 
}

.popUp-buttCont{position: absolute; bottom: 25px; left: 0px; width: 100%; text-align: center; }
.popUp-button{
     position: relative;
     display: inline-block;
     vertical-align: top;
     margin: 0px 4px;
     padding: 5px 6px 0px 6px;
     width: 112px;
     height: 28px;
     background-color: #fff;
     border: 1px solid #898989;
     text-align: center;
     font-size: 12px;
     font-weight: bold;
     line-height: 16px;
     color: #808184;
     cursor: pointer;
    -webkit-transition: 0.1s background-color, 0.1s color; 	 
       -moz-transition: 0.1s background-color, 0.1s color; 
         -o-transition: 0.1s background-color, 0.1s color; 
            transition: 0.1s background-color, 0.1s color; 
}
.popUp-button:hover{background-color: #6d6e70; color: #fff; }

.popUp-input{position: relative; display: block; padding: 21px 27px 0px 27px; }
.input-email{
     position: relative; 
     display: block;
     width: 100%; 
     padding: 0px 10px;
     height: 32px;
     background-color: #fff;
     border: 1px solid #707070;
     font-size: 14px;
     color: #808184;
}

.popUp-dataInfo{position: relative; display: block; padding-top: 50px; }

.input-textInfo, .data-textInfo{position: relative; display: block; font-size: 14px; color: #808184; line-height: 16px; font-weight: bold; text-align: center; }
.input-textInfo{margin-top: 12px; }
.data-textInfo{margin-bottom: 10px; }

.send-popUp .popUp-title{background-color: #808184; }
.error-popUp .popUp-title{background-color: #eb1c23; }
.success-popUp .popUp-title{background-color: #00a451; }