body,ul{margin:0px;padding: 0px;}
body{cursor: url(../img/pen.ico),crosshair}
canvas {display:block;margin-left: 100px;}
hr{margin:10px auto;}

#controls {width: 100px;padding: 0px 10px;position: absolute;left: 0;top: 56px;background: #f1f1f1;}

/*#color{
    appearance: square-button;
    background-color: #f7f7f7;
    color: #000;
    vertical-align: top;
}
input[type="color"]:focus{outline: none;}
*/
#text_input{padding: 5px 5px;border: 1px #e0e0e0 solid;font-size: 16px;width: 230px;}
#text_size{width: 100%;margin:10px 0px;padding: 0px;}

.canvas-tool-item {
    width: 35px;
    height: 35px;
    padding: 3px;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 50px;
    border: 1px dashed #999;
    margin: 1px;
}

.tools .active, .canvas-tool-item:hover{border: 1px solid #f00 !important;}

#width{height: 26px;border:1px #e0e0e0 solid;}
#width li{list-style: none;float: left;width: 25%;}
#width>li>a {display: block;text-decoration: none;text-align: center;}
#width a.active{background:#ccc}

#color{height: 120px;}
#color li{list-style: none;float: left;width: 24px;height: 24px;background: #ccc;margin: 2px 1px;}
#color>li>a {display: inline-block;text-decoration: none;text-align: center;width: 24px;height: 24px;border: 1px #f1f1f1 solid;}
#color a.active{border: 1px #f00 solid;}
.c1{background: #000}
.c2{background: #fff}
.c3{background: #ccc}
.c4{background: #ff191a}
.c5{background: #ff3b1d}
.c6{background: #ff6a25}
.c7{background: #fdd03c}
.c8{background: #f9ff49}
.c9{background: #00ff44}
.c10{background: #009b25}
.c11{background: #009798}
.c12{background: #3b00f6}
.c13{background: #6d0095}
.c14{background: #9e0095}
.c15{background: #9c0063}

.stroke-size{display: inline-block;border: 0;margin: 0;padding: 0;background-color: #000;vertical-align: middle;border-radius: 10px;}
.ss-1px{height:2px;width:2px;}
.ss-2px{height:5px;width:5px;}
.ss-4px{height:9px;width:9px;}
.ss-8px{height:15px;width:15px;}

#side li{list-style: none;}
#side>li>a {display: block;padding: 1px 4px;clear: both;border:1px #999 dashed;color: #333;white-space: nowrap;text-decoration: none;width: 73px;margin: 2px;}

#fontsize li{list-style: none;}
#fontsize>li>a {display: block;padding: 1px 4px;clear: both;border:1px #999 dashed;color: #333;white-space: nowrap;text-decoration: none;width: 73px;margin: 2px;}

#style {width:100%;padding:5px;margin-top: 10px;border:none;}
input[type=button]{width: 60px;height: 30px;background: #C40000;color: #FFF;border-radius: 5px;border: none;}