#x{position:relative;display:block;width:100%;max-width:800px;height:240px;font-size:16px;border: 1px solid #aaa;background-color: #f8f8f0;}
#x div{display:block;position:absolute;}
#x > div{width:12%;height:100%;}
#x > div:nth-child(1){left:0;}
#x > div:nth-child(2){left:12%;}
#x > div:nth-child(3){left:24%;}
#x > div:nth-child(4){left:36%;}
#x > div:nth-child(5){width:15%;left:57%;}
#x > div:nth-child(6){left:72%;}
#x > div:nth-child(7){left:84%;}
.xt > div{width:95%;height:12.5%;text-align:right;padding:4px 0;}
.xt > div:nth-child(1){top:0;}
.xt > div:nth-child(2){top:12.5%;}
.xt > div:nth-child(3){top:25%;}
.xt > div:nth-child(4){top:37.5%;}
.xt > div:nth-child(5){top:50%;}
.xt > div:nth-child(6){top:62.5%;}
.xt > div:nth-child(7){top:75%;}
.xt > div:nth-child(8){top:87.5%;}
.xb1 > div{width:100%;height:12.5%;} 
.xb1 > div:nth-child(1){top:6.25%;}
.xb1 > div:nth-child(2){top:31.25%;}
.xb1 > div:nth-child(3){top:56.25%;}
.xb1 > div:nth-child(4){top:81.25%;}
.xb2 > div{width:100%;height:25%;}
.xb2 > div:nth-child(1){top:12.5%;}
.xb2 > div:nth-child(2){top:62.5%;}
.xb3 > div{width:100%;height:50%;top:25%;}
.xb4 > div{width:100%;height:25%;top:37.5%;}
.b > div:nth-child(1){border-top:1px solid #222;border-right:1px solid #222;width:100%;height:50%;}
.b > div:nth-child(2){border-bottom:1px solid #222;border-right:1px solid #222;width:100%;height:50%;top:50%;}
.u > div:nth-child(1){border-top:2px solid #f00;border-right:2px solid #f00;}
.d > div:nth-child(2){border-bottom:2px solid #f00;border-right:2px solid #f00;}
.b > div:nth-child(1) > div{width:20px;height:20px;right:-25px;bottom:-10px;}
.b > div:nth-child(2) > div{width:40px;height:20px;right:5px;top:-11px;text-align: right;}
.b > div:nth-child(3){width:20px;height:20px;right:-25px;top:-10px;}
.b > div:nth-child(4){width:20px;height:20px;right:-25px;bottom:-10px;}