html,body,.w3-container{border:0;margin:0;padding:0;background-color:#000;}
div{max-width:800px;width:100%;}
img{float:left;max-width:800px;width:100%;}

#main{background-color:#fff;}
#grid{position:absolute;z-index:3;width:100%;}

.z4,.z9,.z12{position:relative;width:48%;z-index:3;background-size:100%;}
.z9{width:32%;}
.z12{width:7.2%;}
.bk,.bz,#k4{position:relative;width:20%;cursor:crosshair;background-size:100%;}
.bz{left:8px;top:8px;width:18%;}
#k4{width:80%;padding:8px 0;}
.b,.b0,.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8,.b9,.b10{width:20%;background-size:100%;}
.t0,.t1,.t2,.t3,.t4,.t5,.t6,.t7,.t8,.t9,.t10{width:10%;background-size:100%;}
.c{width:10%;background-color:#ccc;cursor:crosshair;background-size:100%}
.a{width:10%;background-color:#0f0;transform:rotate(90deg);cursor:crosshair;}
.r{width:10%;background-color:#f00;transform:rotate(90deg);cursor:crosshair;}

.b0,.t0{background-image:url("i/b0.png");}
.b1,.t1{background-image:url("i/b1.png");}
.b2,.t2{background-image:url("i/b2.png");}
.b3,.t3{background-image:url("i/b3.png");}
.b4,.t4{background-image:url("i/b4.png");}
.b5,.t5{background-image:url("i/b5.png");}
.b6,.t6{background-image:url("i/b6.png");}
.b7,.t7{background-image:url("i/b7.png");}
.b8,.t8{background-image:url("i/b8.png");}
.b9,.t9{background-image:url("i/b9.png");}
.b10,.t10{background-image:url("i/b0.png");}
.w3-container{width:19%;}