body {
}

#canvas_container {  
	position: fixed;
	left: 30px;
	top: 140px;
	width: 660px;
	height: 1050px;
    border: 1px solid #aaa;  
}

#tools {
	text-align: center;
	margin-left: 20px;
	width: 97%;
}

.ui-field-contain .ui-controlgroup-controls {
	width: 100% !important;
}

.ui-slider-track.ui-mini .ui-slider-handle {
	height: 30px !important;
	width: 30px !important;
	margin: -16px 0 0 -7px !important;
}

.ui-slider-track.ui-mini .ui-slider-handle .ui-btn-inner {
	margin: 0 !important;
}

#move-scale-rotate {
	margin-left: 30px;
	vertical-align: middle;
}

#rotate-div {
	width: 400px;
	margin-left: 10px;
	z-index: 2;
	position: absolute;
}

.transformations { 
	width: 200px; 
	height: 50px;
	margin: 5px;
	text-align: center;
	font-size: 20px;
}

#color-picker {
	position: absolute;
	left: 360px;
	top: 160px;
	width: 300px;
	background-color: rgba(255, 255, 255, 0.8);
}

#output { 
	text-align: center;
	-webkit-border-radius: 0 !important;
	border-radius: 0 !important;
}

div.ui-input-text {
	padding: 0 !important;
}

.tools-icon {
	height: 60px;
	width: 60px;
}

#arrow-label {
	background-image: url(../css/images/tools/arrow.png); 
}

#rect-label {
	background-image: url(../css/images/tools/rect.png); 
}

#square-label {
	background-image: url(../css/images/tools/square.png); 
}

#triangle-label {
	background-image: url(../css/images/tools/triangle.png); 
}

#circle-label {
	background-image: url(../css/images/tools/circle.png); 
}

#ellipse-label {
	background-image: url(../css/images/tools/ellipse.png); 
}

#star-label {
	background-image: url(../css/images/tools/star.png); 
}

#eraser-label {
	background-image: url(../css/images/tools/eraser.png); 
}

#fill-color-label {
	background-image: url(../css/images/tools/fill.png) ; 
}

#stroke-color-label {
	background-image: url(../css/images/tools/stroke.png); 
}

#clear-label {
	background-image: url(../css/images/tools/clear_canvas.png); 
}