grid_demo_small.css

.grid_builder{
  font-size: 12px;
  font-family: monospace;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.grid_label_top{
  height: 20px;
  text-align: center;
}
.grid_label_left{
  width: 20px;
  text-align: right;
  padding: 4px 6px 0 0;
}
.grid_label_corner{
  height: 20px;
  width: 20px;
}
.grid_label{
  vertical-align: top;
  color: #BABABA;
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
}
.grid_cell{
  color: #000;
  font-weight: bold;
  background-color: #E4E4E4;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  height: 100%;
}
.layout_item{
  position: absolute;
  border: 2px solid #BABABA;
  cursor: default;
  opacity: 0.6;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.layout_code{
  position: absolute;
  border: 2px solid #BABABA;
  padding: 8px;
  font-family: monospace;
  overflow: hidden;
}
.bg_0{
  background-color: #F9FEDE;
}
.bg_1{
  background-color: #FFD7DE;
}
.bg_2{
  background-color: #D7FEEA;
}
.bg_3{
  background-color: #BEF3FF;
}
.grid_container{
  width: 380px;
  height: 614px;
  padding: 8px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  background-repeat: no-repeat;
  background-size: 340px 594px;
  background-position: 20px 20px;
}
.num_input{
  width: 40px;
}
.inactive{
  display: none;
}
.control_container{
  float: left;
}