@charset "utf-8";
/* CSS Document */
canvas {
	border: 1px solid #ccc;
	position: absolute; margin: 0px; left:10%; right: 0px; top:290px; bottom: 0px; 
min-width: 0; min-height:0; overflow: hidden; height: 400px; width:80%; 
transform-origin:0 0;
-ms-transform-origin:0 0;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
+-o-transform-origin:0 0;
transform: scale(1);

}
.tools {position: absolute; margin: 0px; left:10%; right: 0px; top: 210px; bottom: 0px; 
min-width: 0; min-height:0; overflow: hidden; height:600px; max-width: 1366px; width: 80%; 
transform-origin:0 0;
-ms-transform-origin:0 0;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
+-o-transform-origin:0 0;
transform: scale(1);
}
.tools a { border: 1px solid #ccc; 
margin: 0px;  right: 0px; top: 200px; bottom: 0px; 
min-width: 0; min-height:0; overflow: hidden; height:60px; max-width: 60px; width: 60px; 
vertical-align: middle; text-align: center; text-decoration: none; display: inline-block; color: black; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; font-size: 10px; margin: 10px 0 0 0;
transform-origin:0 0;
-ms-transform-origin:0 0;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
+-o-transform-origin:0 0;
transform: scale(1);
 }
.tools img{ background-repeat:no-repeat; 
 -webkit-background-size: contain;
 -moz-background-size: contain;
 -o-background-size: contain;
 background-size: contain;
 resize: both;
 transform-origin:0 0;
-ms-transform-origin:0 0;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
+-o-transform-origin:0 0;
transform: scale(1);
 width:100%;
 height:100%;}

 

.verde{  background-image:url(../images/sketch/b_verde.png);
}
.cian{  background-image:url(../images/sketch/b_cian.png);
}
.azul{  background-image:url(../images/sketch/b_azul.png);
}
.violeta{  background-image:url(../images/sketch/b_violeta.png);
}
.magenta{  background-image:url(../images/sketch/b_magenta.png);
}
.rojo{  background-image:url(../images/sketch/b_rojo.png);
}
.naranja{  background-image:url(../images/sketch/b_naranja.png);
}
.amarillo{  background-image:url(../images/sketch/b_amarillo.png);
}
.negro{  background-image:url(../images/sketch/b_negro.png);
}
.gris{ background-image:url(../images/sketch/b_gris.png);
}
.blanco{ background-image:url(../images/sketch/b_blanco.png);
}
.b_1{ background-image:url(../images/sketch/b_1.png);
}
.b_3{ background-image:url(../images/sketch/b_3.png);
}
.b_5{ background-image:url(../images/sketch/b_5.png);
}
.b_10{ background-image:url(../images/sketch/b_10.png);
}
.b_15{ background-image:url(../images/sketch/b_15.png);
}
.b_dibujar{ background-image:url(../images/sketch/b_dibujar.png);
}
.b_descargar{ background-image:url(../images/sketch/b_descargar.png);
}
.b_borrador{ background-image:url(../images/sketch/b_borrador.png);
}
/*
@media only screen and (min-width: 481px) {
	canvas {
	border: 1px solid #ccc;
	float: left;
	position: relative;
	margin: 20px auto auto 20px;
	background-color: #FFFFFF;
	width:481px;
	max-width:481px;
}
}
@media only screen and (min-width: 769px) {
	canvas {
	border: 1px solid #ccc;
	float: left;
	position: relative;
	margin: 20px auto auto 20px;
	background-color: #FFFFFF;
	width:760px;
	max-width:760px;
}
}*/