body
{
	overflow:hidden;
	background-color: #FFF;
}

/*CANVAS TOOLS*/
#canvasContainer
{
	position:relative;
}
#colorpickerContainer
{
	position: absolute;
	width: 7%;
	bottom: 25%;
	left: 10%;
	z-index: 10;
	height: 44px;
	padding: 5px;
}

.toolbar
{
	position: absolute;
	z-index: 9;
	bottom: 8%;
	left: 10%;
	height: 15%;
	width: 35%;
}

.tool-control
{
	float:left;
	margin-right:2%;
	width:20%;
	padding:5px;
}

.tool-link
{
	cursor:pointer;
}

.tool-button
{
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	border: none;
}

.tool-button:focus
{
	outline:none;
}

.tool-button.brocha
{
	background-image: url(./imgs/controles/Brocha.png);
}

.tool-button.brocha:hover, .tool-button.brocha.act
{
	background-image: url(./imgs/controles/BROCHA.png);
}

.tool-button.borrador
{
	background-image: url(./imgs/controles/BORRADOR.png);
}

.tool-button.borrador:hover, .tool-button.borrador.act
{
	background-image: url(./imgs/controles/BORRADOR.png);
}

.tool-button.guardar
{
	background-image: url(./imgs/controles/GUARDAR.png);
}

.tool-button.guardar:hover
{
	background-image: url(./imgs/controles/GUARDAR.png);
}
.tool-button.reiniciar
{
	background-image: url(./imgs/controles/REINICIAR.png);
}

.tool-button.reiniciar:hover
{
	background-image: url(./imgs/controles/REINICIAR.png);
}


.tool-control .tool-link img
{
	width:100%;
}

#toolbar
{
	position: absolute;
	display:none;
	width: 130px;
	float: left;
	border-radius: 10px;
	padding: 8px;
	margin-left:5px;
	z-index:9;
	bottom: 52px;
	left: 0px;
	background-color: #00000099;
}

.colorButtons {
	display: block;
	margin: 20px 0;
}

canvas {
	cursor: crosshair;
}

div#sidebar {
	position: absolute;
	left: 0;
	width: 150px;
	padding: 20px 20px;
	top: 0;
}

canvas#canvas {
	left: 150px;
	top: 45px;
}

.btn {
	margin-bottom: 10px;
	width: 100%;
}
input {
	width: 100%;
	margin-bottom: 10px;
}

.input-group {
	margin-bottom: 10px;
}

.toolsButtons .btn {
	width: 48%;
}

.sizeButtons .btn {
	width: 48%;
}

.colorpicker {
	background: transparent;
	height: 30px;
}
/* FIN CANVAS TOOLS */

}
