draw.css

* { 
  box-sizing: border-box; 
}
html, body {
  background: rgb(238,238,238);
  padding: 0;
  margin: 0;
  font-family: arial;
}

header {
  background: rgb(245,245,245);
  border-bottom: solid 1px rgb(220,220,220);
  padding: 8px 16px;
}

.clear {
  display: block;
  clear: both;
}

.btn {
  float: left;
  border-radius: 4px;
  background: rgb(250,250,250);
  border: solid 1px rgb(220,220,220);
  border-bottom: solid 1px rgb(180,180,180);
  padding: 3px 12px;
  font-size: 14px;
  margin-right: 4px;
  cursor: pointer;
}

.rec span {
  border: solid 2px rgb(255,0,0);
  height: 15px;
  width: 20px;
  display: inline-block;
}
.rec.black span {
  border: solid 2px rgb(0,0,0);
  background: #000;
  height: 15px;
  width: 20px;
  display: inline-block;
}
.rec.red span {
  border: solid 2px rgb(255,0,0);
  height: 15px;
  width: 20px;
  display: inline-block;
}

.marker span {
  display: inline-block;
  background: rgb(255,0,0);
  color: #fff;
  padding: 1px 6px;
  border-radius: 4px;
}

.btn.save {
  float: right;
  margin-left: 4px;
}

.btn:hover {
  border: solid 1px rgb(120,120,120);
}

.btn.selected {
  background: rgb(200,240,240);
  border: solid 1px rgb(0,0,100);
}

article {
  position: relative
}

section {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
}

canvas {
  margin: 0px auto;
  display: block;
}

img {
  z-index: 50;
  display: block;
  margin: 0 auto;
}