/*===================================
                GENERAL
=====================================*/
html, body {
	width:100%;
	height:100%;
}



/*===================================
                CANVAS
=====================================*/
canvas.main, canvas.grid, canvas.tools {
	position:absolute;
	top:0;
	left:0;
	/*width:100%;
	height:100%;*/
	z-index: 100;
}
canvas.main {
	background: url('../img/transparent-square.png');
	background-size: 8px;
	background-repeat:repeat;
}
canvas.grid {
	z-index: 120;
}
canvas.tools{
	z-index: 140;
}






/*===================================
               EDITOR
=====================================*/

#color-picker {
	width: 100%;
	height:100%;
	outline:none;
	border:none;
	position:absolute;
	top:0;
	left:0;
	cursor:pointer;
}




/*===================================
               MENU BAR
=====================================*/
.menu-bar-outer {
	width: 50px;
	/*padding-right: 20px;*/
	height: auto;
	z-index: 3000;
	
	position:fixed;
	left: 0px;
	top: 0px;
	
	overflow:hidden;

	/*-moz-transition: left 0.15s ease-in-out;
	-ms-transition: left 0.15s ease-in-out;
	-o-transition: left 0.15s ease-in-out;
	-webkit-transition: left 0.15s ease-in-out;
	transition: left 0.15s ease-in-out;*/
}/*.menu-bar-outer:hover {
	left: 0px;
	padding-right:0px;
}*/

.menu-bar {
	width: 50px;
	height:100%;
	background: #333333;
	
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

	-moz-border-radius: 2px 0 0 2px;
	-ms-border-radius: 2px 0 0 2px;
	-o-border-radius: 2px 0 0 2px;
	-webkit-border-radius: 2px 0 0 2px;
	border-radius: 2px 0 0 2px;
}

.menu-bar .item {
	position:relative;
	width: 50px;
	height: 50px;
	border-top: 1px solid #585858;
	cursor:pointer;
	
	line-height:50px;
	text-align:center;
	opacity: 0.8;
}.menu-bar .item:first {
	border-top: 1px solid transparent;
}.menu-bar .item:hover {
	opacity: 1;
}
.menu-bar .palette-button {
	opacity: 1;
}

.menu-bar .item img.icon {
	display: inline-block;
	padding-bottom: 4px;
	max-width: 30px;
	max-height: 30px;
	vertical-align: middle;
}
.menu-bar .item div.tint {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index: 3030;
	background: #ffffff;
	opacity: 0.3;
	display:none;
}