input:focus {outline: none}

#drawing {position: relative; background: #FFF; z-index: 2}

#drawingo {position: absolute; top: 0; left: 0; z-index: 10}
#drawingt {position: absolute; top: 0; left: 0; z-index: -1}

.gallery img {width: 50px; display: block; cursor: pointer}
.gallery ul {list-style: none; margin: 0; padding: 0}
.gallery {width: 100px; float: right}
.gallery li {float: left}
.gallery h6 {margin: 0; padding: 5px 0}

.mtr-drawing-widget {width: 512px; min-width: 512px; background: #edf5fd; /*#515f6d;*/}
.mtr-drawing-widget .canvas {position: relative; border: 1px #cccccc solid; height: 270px;}

/*
.mtr-drawing-widget .tools {clear: both; border: 1px #CCC dotted; border-left: none; border-right: none; padding: 10px 0}
.mtr-drawing-widget .tools {margin-top: 20px; float: left}
*/

.mtr-drawing-widget .tools ul {list-style: none; margin: 0; padding: 0}
.mtr-drawing-widget .tools img {cursor: pointer}
/*.mtr-drawing-widget .tools li {float: left; padding: 0 5px}*/
.mtr-drawing-widget .tools .text {width: 30px; height: 30px; display: block; color: #000; text-decoration: none; font-weight: bold; text-align: center; line-height: 30px}
.mtr-drawing-widget .tools .color {width: 50px}

#canvas {position: relative; border: 1px #CCC solid}

.oncanvas-wrapper {position: absolute; background: none}
.oncanvas-wrapper.active { border: 2px #CCC dashed}

.text-holder {background: transparent; border: 1px #DFDFDF solid; padding: 0; margin: 0}

#afterActionVersion img {width: 100px; border: 1px green solid; margin: 2px}
#afterActionVersion ul {list-style: none; margin: 0; padding: 0}
#afterActionVersion li {position: relative; float: left}
#afterActionVersion a {text-decoration: none}
#afterActionVersion span {position: absolute; top: 50%; left: 50%; width: 46px; height: 30px; line-height: 30px; margin: -15px 0 0 -23px; background: red; display: block; color: #FFF; text-decoration: none; font-size: 12px; text-align: center}

.mtr-canvas canvas {display: inline-block; margin: 0; padding: 0; float: left}

/*#mtr-change-index {color: #FF0000}*/

.mtr-warning, .mtr-process-loading {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.mtr-warning {
	z-index: 21;
	color: white;
	background: url(../../img/site/drawing/warning3.png) left top no-repeat;
	text-align: center;
	display: none;
}
.mtr-warning p {
	padding-top: 95px;
	padding-bottom: 20px !important;
	font-size: 20px;
	text-shadow: 1px 1px #000000;
}
.mtr-warning button {
	padding: 2px 10px;
	font-size: 15px;
	cursor: pointer;
}

.mtr-process-loading {
	z-index: 22;
	background: #FFF url(../../img/drawing-widget/process-loading.gif) no-repeat center;
	display: none;
}

.mtr-first-action {position: absolute; top: 0; left: 0; z-index: 20; width: 100%; height: 100%; background: rgba( 0, 0, 0, 0.5); font-size: 13px; color: #FFF; text-align: center}
.mtr-first-action p {padding-top: 100px}

/*
.mtr-drawing-widget-slide {width: 200px; float: left; background: #9f9f9f; padding: 0 7px 7px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; font-family: "Tahoma", sans-serif; box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.6)}*/
/*.mtr-drawing-widget-slide .slide-group {padding: 0 25px 0 50px; position: relative; height: 25px; font-size: 10px; color: #FFF; line-height: 30px}*/
/*.mtr-drawing-widget-slide .slide-group .label {position: absolute; top: 0; left: 0}
.mtr-drawing-widget-slide .slide-group .value {position: absolute; top: 0; right: -5px}
.mtr-drawing-widget-slide .slide-group .slide {position: relative; padding-top: 25px}*/
.mtr-drawing-widget-slide .slide-group .gutter {
	position: absolute;
	height: 7px;
	border: 1px solid #9bb9dd;
	background: url(../../img/slider-bg.png) repeat-x left top;
	width: 100%;
	top: 50%;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
	z-index: 5;
}
.mtr-drawing-widget-slide .slide-group .slide .head {
	display: block;
	border: 1px solid #c0c0c0;
	width: 25px;
	height: 25px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	-khtml-border-radius: 50px;
	border-radius: 50px;
	background: #292929;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#777777');
	background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#777777));
	background: -moz-linear-gradient(top, #dddddd, #777777);
	position: absolute;
	top: 50%;
	margin-top: -13px;
	left: 0;
	cursor: pointer;
	z-index: 10;
}

.mtr-drawing-widget .tools {
	padding-top: 15px;
}

.mtr-drawing-widget .tools .mtr-drawing-tool-preview {
	width: 73px;
	height: 73px;
	float: left;
	margin-right: 10px;
	border: 1px solid #c3d9f4;
	background: #fff;
	position: relative;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
}

/*
.mtr-drawing-widget .tools .mtr-drawing-tool-preview span {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	-khtml-border-radius: 50px;
	border-radius: 50px;
}
*/

.mtr-drawing-tool-preview.mtr-drawing-fontselector-preview {
	line-height: 75px;
	text-align: center;
}

.mtr-drawing-tool-preview.mtr-drawing-fontselector-preview span {

	}

.mtr-drawing-widget .tools .mtr-colorpicker {
	float: left;
	position: relative;
	padding: 0px;
	margin-right: 00px;
	margin-top: 0px;
	margin-left: 5px;
	border: 0px solid #c3d9f4;
	/*background: #fff;*/
	display: block;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
}

.mtr-drawing-widget .tools .mtr-tool-option #mtr-tool-colorpipet {
	width: 36px;
	height: 36px;
	text-indent: -9999px;
	cursor: pointer;
	margin-right: 3px;
	margin-left: 5px;
	display: block;
	/*float: left;*/
	background: url(../../img/site/drawing/tabs/colorpicker.png) left top no-repeat;
}

.mtr-drawing-widget .tools .mtr-tool-option #mtr-tool-colorpipet:hover {
	background-position: left -41px;
}

.mtr-drawing-widget .tools .mtr-tool-option #mtr-tool-colorpipet.active {
	background-position: left -41px;
}

.mtr-drawing-widget .tools .mtr-tool-option #mtr-tool-colorpipet.active:hover {
	background-position: left -41px;
}

.mtr-drawing-widget .tools .mtr-colorpicker .picked-color {
	height: 32px;
	width: 32px;
	background: #000;
	cursor: pointer;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
	border: 2px solid #c0c0c0;
}

.mtr-drawing-widget .tools .mtr-drawing-widget-slide {
	float: left;
	margin-right: 10px;
	margin-top: 0px;
}

.mtr-drawing-widget .mtr-tool-controls-fontselector .mtr-drawing-widget-slide {
	margin-top: 3px;
}

.mtr-drawing-widget .tools .mtr-drawing-widget-slide .slide-group {
	float: left;
	position: relative;
	width: 175px;
	margin-right: 10px;
	background: #dceaf9;
	padding: 5px;
	padding-top: 7px;
	padding-bottom: 7px;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	-khtml-border-radius: 9px;
	border-radius: 9px;
	border: 0px solid #999999;
}

.mtr-drawing-widget-slide .slide-group .label,
.mtr-drawing-widget-slide .slide-group .value {
	color: #397dc1;
	font-size: 12px;
	font-weight: normal;
	position: absolute;
	top: 11px;
}

.mtr-drawing-widget-slide .slide-group .label {
	left: 5px;
	font-weight: bold;
}

.mtr-drawing-widget-slide .slide-group .value {
	right: 5px;
}

.mtr-drawing-widget-slide .slide-group .slide {
	padding-top: 58px;
	position: relative;
}

.mtr-drawing-widget .mtr-tool-controls {
	border: 1px solid #87a1bd;
	background: #dceaf9;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dceaf9', endColorstr='#dceaf9');
	background: -webkit-gradient(linear, left top, left bottom, from(#dceaf9), to(#dceaf9));
	background: -moz-linear-gradient(top, #dceaf9, #dceaf9);
	
	padding: 10px;
	margin-top: 10px;
	position: relative;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
	/*
	-moz-border-radiustopleft: 0;
	-webkit-border-top-left-radius: 0;
	-khtml-border-top-left-radius: 0;
	border-top-left-radius: 0;
	*/
	display: none;
}

.mtr-drawing-widget .mtr-tool-controls .fonts-selector {
	position: absolute;
	top: 56px;
	left: 174px;
	width: 177px;
	border: 1px solid #9bb9dd;
	padding: 2px;
	font-family: Arial;
	color: #444444;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
}

.mtr-drawing-widget .change-percent,
.mtr-drawing-widget .tool.reset,
.mtr-drawing-widget .tool.save,
.mtr-drawing-widget .tool.undo,
.mtr-drawing-widget .tool.redo {
	display: block;
	width: 36px;
	height: 37px;
	position: absolute;
	top: 7px;
	right: 25px;
	text-indent: -9999px;
	overflow: hidden;
	background-position: left top;
	background-repeat: no-repeat;
	background-color: trensparent;
}

.mtr-drawing-widget .change-percent {
	/*width: 49px;*/
	width: auto;
	padding: 0;
	text-indent: 0;
	text-align: center;
	color: #fff;
	cursor: default;
	/*background-image: url(../../img/site/drawing/change-percent.png);*/
	right: 253px;
}

.mtr-drawing-widget .change-percent span {
    display: block;
    font-size: 8px;
    font-weight: bold;
    padding: 0 0 0 1px;
    text-transform: uppercase;
}

.mtr-drawing-widget .change-percent div {
    font-size: 16px;
    font-weight: normal;
	color: #ffffff;
}

.mtr-drawing-widget .change-percent div.loading {
    background: #000;
}

.mtr-drawing-widget .change-percent div b {
	color: #b80d0d;
}

.mtr-drawing-widget .tool.reset {
	background-image: url(../../img/site/drawing/buttons/reset2.png);
	right: 202px;
}

.mtr-drawing-widget .tool.undo {
	background-image: url(../../img/site/drawing/buttons/undo.png);
	right: 161px;
}

.mtr-drawing-widget .tool.redo {
	background-image: url(../../img/site/drawing/buttons/redo.png);
	right: 120px;
}

.mtr-drawing-widget .tool.save {
	background-image: url(../../img/site/drawing/buttons/save2.png);
	width: 90px;
}

.mtr-drawing-widget .tool.reset:hover,
/*.mtr-drawing-widget .change-percent:hover,*/
.mtr-drawing-widget .tool.save:hover,
.mtr-drawing-widget .tool.undo:hover,
.mtr-drawing-widget .tool.redo:hover {
	background-position: left -37px;
}

.mtr-drawing-widget .tool.reset.disable,
.mtr-drawing-widget .tool.save.disable,
.mtr-drawing-widget .tool.undo.disable,
.mtr-drawing-widget .tool.redo.disable,
.mtr-drawing-widget .tools > ul.disabled .tool.reset,
.mtr-drawing-widget .tools > ul.disabled .tool.save,
.mtr-drawing-widget .tools > ul.disabled .tool.undo,
.mtr-drawing-widget .tools > ul.disabled .tool.redo {
	background-position: left -74px;
	cursor: default;
}

.mtr-drawing-widget .mtr-tool-option {
	float: left;
	margin-right: 5px;
	font-size: 9px;
	color: #397dc1;
}

.mtr-drawing-widget .mtr-tool-option .tool-brush-label {
	margin-left: 7px;	
}

.mtr-drawing-widget .mtr-tool-option .tool-paintbucket-label {
	margin-left: 14px;	
}

.mtr-drawing-widget .mtr-tool-option .tool-colorpipet-label {
	margin-left: 6px;	
}

.tool-colorpicker-label {
	float: left;
	margin-left: 6px;	
}

.mtr-drawing-widget #mtr-tool-brush,
.mtr-drawing-widget #mtr-tool-text,
.mtr-drawing-widget #mtr-tool-colorpipet,
.mtr-drawing-widget #mtr-tool-paintbucket {
	display: block;
	width: 42px;
	height: 42px;
	cursor: pointer;
	position: relative;
	z-index: 1;
	background-position: left -42px;
	background-repeat: no-repeat;
	background-color: transparent;
	background-image: url(../../img/site/drawing/tabs/brush.png);
}

.mtr-drawing-widget #mtr-tool-colorpipet {
	background-position: left top;
	background-image: url(../../img/site/drawing/tabs/colorpicker.png);
}

.mtr-drawing-widget #mtr-tool-paintbucket {
	background-position: left center;
	background-image: url(../../img/site/drawing/tabs/paintbucket.png);
}

.mtr-drawing-widget #mtr-tool-text {
	background-image: url(../../img/site/drawing/tabs/text.png);
}

.mtr-drawing-widget #mtr-tool-brush:hover,
.mtr-drawing-widget #mtr-tool-colorpipet:hover,
.mtr-drawing-widget #mtr-tool-text:hover,
.mtr-drawing-widget #mtr-tool-paintbucket:hover {
	background-position: left bottom;
}

.mtr-drawing-widget .mtr-tool-active-wrap #mtr-tool-text,
.mtr-drawing-widget .mtr-tool-active-wrap #mtr-tool-brush {
	background-position: left bottom;
}

.mtr-drawing-widget .mtr-tool-active-wrap #mtr-tool-colorpipet {
	background-position: left bottom;
	}

.mtr-drawing-widget .mtr-tool-active-wrap #mtr-tool-paintbucket {
	background-position: center bottom;
}
/*
.mtr-drawing-widget .tool.undo,
.mtr-drawing-widget .tool.redo {width: 24px; height: 24px; display: block; float: left; background: url(/img/drawing-widget/tool_undo_redo.png) no-repeat left top}
.mtr-drawing-widget .tool.undo {background-position: 0 0}
.mtr-drawing-widget .tool.redo {background-position: 0 -24px}
.mtr-drawing-widget .tool.undo.disable {background-position: -24px 0}
.mtr-drawing-widget .tool.redo.disable {background-position: -24px -24px}
*/

.mtr-drawing-widget .tool.colorpicker {width: 24px; height: 24px; background: #FFF; border: 1px #9f9f9f solid; display: block; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden; }
.mtr-drawing-widget .tool.colorpicker input {width: 24px; height: 24px; border: none; background: #FFF; padding: 0; margin: 0; text-indent: -9999px; cursor: pointer; border: none; -moz-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.3); box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.3)}

/*.mtr-tool-active-wrap {width: 26px; background: #cccccc; padding: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.6); -webkit-box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.6); box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.6)}*/

.mtr-colorpicker .colors-palette-mode {
	width: 281px;
	height: 170px;
	position: relative
	}

.mtr-colorpicker .colors-palette-mode-basic {
	display: none;
	width: 321px;
	}

.mtr-colorpicker .swatches {
	border: 1px #000 solid;
	/* overflow: hidden; */
	height: 159px;
	clear: both
	}

.mtr-colorpicker .swatches .swatch {
	display: block;
	float: left;
	border: 1px #000000 solid;
	border-left: none;
	border-top: none;
	width: 19px;
	height: 19px;
	position: relative;
	}

.mtr-colorpicker .swatches .swatches-row {
	clear: both;
	}

.mtr-colorpicker .swatches .swatches-row .swatch:last-child {
	border-right: none
	}

.mtr-colorpicker .swatches .swatches-row:last-child .swatch {
	border-bottom: none
	}

.mtr-colorpicker .swatches .swatches-row:last-child .swatch:last-child {
	border-right: 1px #000 solid;
	}

.mtr-colorpicker .swatches .swatch.active::before, .mtr-colorpicker .swatches .swatch:hover::before {
	content: "";
	display: block;
	width: 19px;
	height: 19px;
	top: -1px;
	left: -1px;
	position: absolute;
	border: 1px #FFF solid;
	}

/*.mtr-colorpicker {clear: both; position: relative}*/
.mtr-colorpicker {font-size: 9px; color: #397dc1; margin-left: 14px;}
.mtr-colorpicker .main-palette {width: 256px; height: 170px; background: url(../../img/drawing-widget/tool_colorpicker_palette_full.png) repeat-y left top; position: absolute; right: 0; top: 0}
.mtr-colorpicker .greyscale-palette {width: 20px; height: 170px; background: url(../../img/drawing-widget/tool_colorpicker_palette_greyscale.png) repeat-x left top; position: absolute; left: 0; top: 0}
/*.mtr-colorpicker .picked-color {height: 19px; width: 19px; background: #000; float: left; cursor: pointer}*/
.mtr-colorpicker .satval-palette {width: 100%; height: 256px; clear: both}
.mtr-colorpicker .satval-palette .over {width: 256px; height: 256px; background: url(../../img/drawing-widget/tool_colorpicker_palette_s.png) no-repeat left top; cursor: crosshair; position: relative; overflow: hidden}
.mtr-colorpicker .circle {display: block; position: absolute; top: 0; left: 0; margin: -11px 0 0 14px}
.mtr-colorpicker .colors-palette {
	display: none;
	position: absolute;
	bottom: -1px;
	left: 40px;
	border: 1px solid #c3d9f4;
	background: #e9e9e9;
	padding: 5px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
	z-index: 10;
}


.text-tool-input {
	position: absolute;
	z-index: 9;
	}

.text-tool-input textarea {
	background: transparent;
	border: 1px black dashed;
	padding: 10px;
	overflow: hidden;
	width: 200px;
	height: 50px;
	}

.text-tool-input .resize-handle {
	width: 20px;
	height: 20px;
	position: absolute;
	bottom: 0;
	right: 0;
	background: green;
	cursor: move
	}

.mode-change-hex-input {
	overflow: hidden;
	padding: 5px;
	}

.mode-change-hex-input .mode-change,
.mode-change-hex-input .close-button {
	float: left;
	}

.mode-change-hex-input .mode-change a,
.mode-change-hex-input .close-button a {
	background: #406EA5;
	display: block;
	font-size: 11px;
	color: #FFF;
	font-weight: bold;
	padding: 8px;
	text-decoration: none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
	border-radius: 6px;
	width: 50px;
	text-align: center;
	}

.mode-change-hex-input .hex-input {
	float: right;
	border: 1px #000 solid
	}

.mode-change-hex-input .hex-input input {
	width: 100px;
	padding: 3px
	}