
.draw-desktop {
	background-size: cover;
	background-position: 50% 50%;
}

.preview-mode .manager, .print-mode .manager {
	height: 840px;
}

.tool-dock {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1188px;
	height: 257px;
	background: url("../images/ui/drawing/footer-panel.png");

	transition: bottom 0.5s;
	z-index: 999999;
	transform: scale(1);
}

.preview-mode .tool-dock, .print-mode .tool-dock {
    bottom: -161px;
}

.undo-button {
	position: absolute;
	left: 16px;
	top: 66px;
	cursor: pointer;
	transition: transform 0.3s;
	width:77px;
	height:82px;
	background: url("../images/ui/drawing/undo_icon.png") no-repeat;
}

.redo-button {
	position: absolute;
	left: 16px;
	top: 161px;
  	cursor: pointer;
  	transition: transform 0.3s;
  	width:77px;
	height:82px;
	background: url("../images/ui/drawing/redo_icon.png") no-repeat;
}

.undo-button-hover:hover{
	background: url("../images/ui/drawing/undo_icon_hover.png") no-repeat;
	opacity: 1;
	transform: scale(1.1);
}

.redo-button-hover:hover {
	background: url("../images/ui/drawing/redo_icon_hover.png") no-repeat;
	transform: scale(1.1);
}

.redo-disabled {
  pointer-events: none;
  opacity: 0.35;
}

.greyOutBtn {
	filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

ul.swatch-inset {
	position: absolute;
    width: 648px;
    height: 138px;
    background: url(../images/ui/drawing/swatch-inset.png);
    background-size: 100% 100%;
    left: 513px;
    top: 97px;
    padding: 9px 0 0 9px;
}
	
ul.swatch-inset li {
	float: left;
	width: 64px;
	height: 65px;
	transition: outline 0.4s;
	position: relative;
	cursor: pointer;

}

ul.swatch-inset li:hover {
	/*z-index: 9999;*/
}

ul.swatch-inset li.colour-active {
	outline : 10px #FFF solid;
	z-index: 99; 
}

.brush-list {
	position: absolute;
	top: 65px;
	transform: translate(0,100%);
	left: 116px;
}

	.brush-list li {
		float: left;
		transform: translate(0,-100%);
	}


toolset .button-left {
	position: absolute;
	left: 996px;
    top: 25px;
    cursor: pointer;
}

toolset .button-right {
	position: absolute;
	left: 805px;
    top: 25px;
    cursor: pointer;
}

.edit-button{
	width:177px;
	height:62px;
	background: url("../images/ui/drawing/edit_text.png") no-repeat;
	transition: transform 0.3s;
}

.edit-button:hover {
	background: url("../images/ui/drawing/edit_text_hover.png") no-repeat;
	transform: scale(1.1);
}

.save-draw{
	width:177px;
	height:62px;
	background: url("../images/ui/drawing/view_text_icon.png") no-repeat;
	transition: transform 0.3s;
}

.save-draw:hover {
	background: url("../images/ui/drawing/view_text_icon_hover.png") no-repeat;
	transform: scale(1.1);
}

.view-button{
	width:177px;
	height:62px;
	background: url("../images/ui/drawing/view_text_icon.png") no-repeat;
	transition: transform 0.3s;
}

.view-button:hover {
	background: url("../images/ui/drawing/view_text_icon_hover.png") no-repeat;
	transform: scale(1.1);
}

.print-button{
	width:177px;
	height:62px;
	background: url("../images/ui/drawing/print_icon.png") no-repeat;
	transition: transform 0.3s;
}

.print-button:hover {
	background: url("../images/ui/drawing/print_icon_hover.png") no-repeat;
	transform: scale(1.1);
}

.execute-print {
	visibility: hidden;
	position: absolute;
	width:177px;
	height:62px;
	z-index: 9999;
	left: 50%;
	bottom: -102px;
	cursor: pointer;
	background: url("../images/ui/drawing/print_icon.png");
	transform: translate(-50%,0) scale(0.9,0.9);
}

.execute-print:hover {
	background: url("../images/ui/drawing/print_icon_hover.png");
	transform: translate(-50%,0) scale(1,1);
}

.nextDinoRight {
	position: absolute;
	width: 75px;
	height: 84px;
	left: 1080px;
	top: -120px;
    cursor: pointer;
    background: url("../images/ui/drawing/btn_back.png") no-repeat;

    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    transition: transform 0.3s;
}

.nextDinoRight:hover {
    background: url("../images/ui/drawing/btn_arrowback_rollover.png") no-repeat;

    -webkit-transform: scale(-1.1, 1.1);
    transform: scale(-1.1, 1.1);
}

.nextDinoLeft {
	position: absolute;
	width: 75px;
	height: 84px;
	left: 30px;
    top: -120px;
    cursor: pointer;
    transition: transform 0.3s;
    background: url("../images/ui/drawing/btn_back.png") no-repeat;
}

.nextDinoLeft:hover {
    background: url("../images/ui/drawing/btn_arrowback_rollover.png") no-repeat;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.mask-canvas {
	position: absolute;
	z-index: 9999;
}

.black-tool-cover {
	position: absolute;
	top: 891px;
	width: 100%;
	height: 175px;
	background: #000;
	z-index: 9999999999;
}