* {
    margin: 0; padding: 0;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}
body {
    background-color: #666;
}
canvas {
    float: left;
    margin: 10px 0 0 10px;
    /* background: url(/assets/b/3/m/t/b3mtA) repeat scroll 0 0; */
    background: url(bg.svg) repeat scroll 0 0;
    cursor: crosshair;
}
.tool {
    float: left;
    width: 40px;
    padding: 10px;
}
.btns {
    margin-bottom: 10px;
}
.btn {
    display: block;
    height: 40px;
    /* background: #999 url(/assets/7/h/O/n/7hOnz) scroll center center; */
    background: #999 url(sprites.svg) scroll center center;
    box-shadow: -1px -1px 0 #333 inset, 1px 1px 0 #ccc inset;
    cursor: pointer;
}
.btn.pen      { background-position:    0   0; }
.btn.eraser   { background-position:  -40px 0; }
.btn.small    { background-position:  -80px 0; }
.btn.medium   { background-position: -120px 0; }
.btn.large    { background-position: -160px 0; }
.btn:hover {
    opacity: .75;
}

/* 選択済の表示 */
body[data-mode='pen']    .btn.pen,
body[data-mode='eraser'] .btn.eraser,
body[data-size="small"]  .btn.small,
body[data-size="medium"] .btn.medium,
body[data-size="large"]  .btn.large {
    background-color: #333;
    box-shadow: 1px 1px 0 #000 inset;
}

/* カラーパレット */
.palette {
    margin-bottom: 10px;
    overflow: hidden;
}
.color {
    float: left;
    width: 20px; height: 20px;
    box-shadow: -1px -1px 0 #333 inset, 1px 1px 0 #fff inset;
    cursor: pointer;
}

/* 選択中のカラーサンプル */
.sample {
    position: relative;
    height: 36px;
    background-color: #000;
    border: 2px solid #333;
}