div#dragMap {
  margin-left:-8em;
  margin-right:-8em;
}
div#dragMap > div {
  height:680px;
  width:760px;
  background-color:#F5EFE7;
  border:solid #2B1F18 4px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
  -o-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -ms-user-select: none;
  user-select: none;
  box-shadow:6px 6px 5px #222;
}
div#grid {
  padding:10px;
  border:solid #2B1F18 4px;
  position:absolute;
  left:20px;
  top:20px;
  background-image:url(../fels.jpg);
  background-repeat:repeat;
}
div#grid > div > div{
  height:42px;
  width:42px;
  background-color:rgba(195,195,195,0.5);
  border-style:solid;
  border-top-color:rgba(50,50,50,0.7);
  border-left-color:rgba(50,50,50,0.7);
  border-right-color:rgba(190,190,190,0.7);
  border-bottom-color:rgba(190,190,190,0.7);
  border-width:4px;
  float:left;
}
div.piece {
  position:absolute;
  left:410px;
  top:10px;
  cursor:move;
  cursor:-moz-grab;
  cursor:-webkit-grab;
  cursor:grab;
}
div.piece.grabbing {
  cursor:move;
  cursor:-moz-grabbing;
  cursor:-webkit-grabbing;
  cursor:grabbing;
}
div.piece.rotate {
  cursor:crosshair;
  cursor:url('cursor_rotate_right.gif'), crosshair;
  cursor:url('cursor_rotate_right.gif') 16 16, crosshair;
  cursor:url('cursor_rotate_right.cur'), crosshair;
  cursor:url('cursor_rotate_right.cur') 16 16, crosshair;
}
div.piece.mirror {
  cursor:e-resize;
  cursor:ew-resize;
/*  cursor:col-resize;  */
}
#n1 {
  left:410px;
  top:10px;
  z-index:10;
}
#n2 {
  left:560px;
  top:10px;
  z-index:11;
}
#n3 {
  left:60px;
  top:410px;
  z-index:12;
}
#n4 {
  left:210px;
  top:410px;
  z-index:13;
}
#n5 {
  left:410px;
  top:310px;
  z-index:14;
}
#n6 {
  left:560px;
  top:310px;
  z-index:15;
}
#n7 {
  left:410px;
  top:510px;
  z-index:16;
}

div.piece > div {
  height:42px;
  width:42px;
  background-color:#808080;
  border-style:outset;
  border-color:grey;
  border-width:4px;
  position:absolute;
  font-size:30px;
  text-align:center;
}

/*
#n.r > div:nth-child(1) { left:0px; top:0px; }
#n.r > div:nth-child(2) { left:0px; top:0px; }
#n.r > div:nth-child(3) { left:0px; top:0px; }
#n.r > div:nth-child(4) { left:0px; top:0px; }
#n.r > div:nth-child(5) { left:0px; top:0px; }
#n.r > div:nth-child(6) { left:0px; top:0px; }
*/

#n1 > div {
  background-color:red;
  border-color:red;
}
#n1 > div:nth-child(1) { left:50px; top:0px; }
#n1 > div:nth-child(2) { left:50px; top:50px; }
#n1 > div:nth-child(3) { left:50px; top:100px; }
#n1 > div:nth-child(4) { left:0px; top:100px; }
#n1 > div:nth-child(5) { left:0px; top:150px; }
#n1 > div:nth-child(6) { left:0px; top:200px; }

#n1.r1 > div:nth-child(1) { left:200px; top:50px; }
#n1.r1 > div:nth-child(2) { left:150px; top:50px; }
#n1.r1 > div:nth-child(3) { left:100px; top:50px; }
#n1.r1 > div:nth-child(4) { left:100px; top:0px; }
#n1.r1 > div:nth-child(5) { left:50px; top:0px; }
#n1.r1 > div:nth-child(6) { left:0px; top:0px; }

#n1.r2 > div:nth-child(1) { left:0px; top:200px; }
#n1.r2 > div:nth-child(2) { left:0px; top:150px; }
#n1.r2 > div:nth-child(3) { left:0px; top:100px; }
#n1.r2 > div:nth-child(4) { left:50px; top:100px; }
#n1.r2 > div:nth-child(5) { left:50px; top:50px; }
#n1.r2 > div:nth-child(6) { left:50px; top:0px; }

#n1.r3 > div:nth-child(1) { left:0px; top:0px; }
#n1.r3 > div:nth-child(2) { left:50px; top:0px; }
#n1.r3 > div:nth-child(3) { left:100px; top:0px; }
#n1.r3 > div:nth-child(4) { left:100px; top:50px; }
#n1.r3 > div:nth-child(5) { left:150px; top:50px; }
#n1.r3 > div:nth-child(6) { left:200px; top:50px; }

#n1.m1 > div:nth-child(1) { left:0px; top:0px; }
#n1.m1 > div:nth-child(2) { left:0px; top:50px; }
#n1.m1 > div:nth-child(3) { left:0px; top:100px; }
#n1.m1 > div:nth-child(4) { left:50px; top:100px; }
#n1.m1 > div:nth-child(5) { left:50px; top:150px; }
#n1.m1 > div:nth-child(6) { left:50px; top:200px; }

#n1.r1.m1 > div:nth-child(1) { left:0px; top:50px; }
#n1.r1.m1 > div:nth-child(2) { left:50px; top:50px; }
#n1.r1.m1 > div:nth-child(3) { left:100px; top:50px; }
#n1.r1.m1 > div:nth-child(4) { left:100px; top:0px; }
#n1.r1.m1 > div:nth-child(5) { left:150px; top:0px; }
#n1.r1.m1 > div:nth-child(6) { left:200px; top:0px; }

#n1.r2.m1 > div:nth-child(1) { left:50px; top:200px; }
#n1.r2.m1 > div:nth-child(2) { left:50px; top:150px; }
#n1.r2.m1 > div:nth-child(3) { left:50px; top:100px; }
#n1.r2.m1 > div:nth-child(4) { left:0px; top:100px; }
#n1.r2.m1 > div:nth-child(5) { left:0px; top:50px; }
#n1.r2.m1 > div:nth-child(6) { left:0px; top:0px; }

#n1.r3.m1 > div:nth-child(1) { left:200px; top:0px; }
#n1.r3.m1 > div:nth-child(2) { left:150px; top:0px; }
#n1.r3.m1 > div:nth-child(3) { left:100px; top:0px; }
#n1.r3.m1 > div:nth-child(4) { left:100px; top:50px; }
#n1.r3.m1 > div:nth-child(5) { left:50px; top:50px; }
#n1.r3.m1 > div:nth-child(6) { left:0px; top:50px; }


#n2 div {
  background-color:purple;
  border-color:purple;
}
#n2 > div:nth-child(1) { left:0px; top:0px; }
#n2 > div:nth-child(2) { left:0px; top:50px; }
#n2 > div:nth-child(3) { left:0px; top:100px; }
#n2 > div:nth-child(4) { left:0px; top:150px; }
#n2 > div:nth-child(5) { left:50px; top:150px; }
#n2 > div:nth-child(6) { left:100px; top:150px; }

#n2.r1 > div:nth-child(1) { left:150px; top:0px; }
#n2.r1 > div:nth-child(2) { left:100px; top:0px; }
#n2.r1 > div:nth-child(3) { left:50px; top:0px; }
#n2.r1 > div:nth-child(4) { left:0px; top:0px; }
#n2.r1 > div:nth-child(5) { left:0px; top:50px; }
#n2.r1 > div:nth-child(6) { left:0px; top:100px; }

#n2.r2 > div:nth-child(1) { left:100px; top:150px; }
#n2.r2 > div:nth-child(2) { left:100px; top:100px; }
#n2.r2 > div:nth-child(3) { left:100px; top:50px; }
#n2.r2 > div:nth-child(4) { left:100px; top:0px; }
#n2.r2 > div:nth-child(5) { left:50px; top:0px; }
#n2.r2 > div:nth-child(6) { left:0px; top:0px; }

#n2.r3 > div:nth-child(1) { left:0px; top:100px; }
#n2.r3 > div:nth-child(2) { left:50px; top:100px; }
#n2.r3 > div:nth-child(3) { left:100px; top:100px; }
#n2.r3 > div:nth-child(4) { left:150px; top:100px; }
#n2.r3 > div:nth-child(5) { left:150px; top:50px; }
#n2.r3 > div:nth-child(6) { left:150px; top:0px; }

#n2.m1 > div:nth-child(1) { left:100px; top:0px; }
#n2.m1 > div:nth-child(2) { left:100px; top:50px; }
#n2.m1 > div:nth-child(3) { left:100px; top:100px; }
#n2.m1 > div:nth-child(4) { left:100px; top:150px; }
#n2.m1 > div:nth-child(5) { left:50px; top:150px; }
#n2.m1 > div:nth-child(6) { left:0px; top:150px; }

#n2.r1.m1 > div:nth-child(1) { left:00px; top:0px; }
#n2.r1.m1 > div:nth-child(2) { left:50px; top:0px; }
#n2.r1.m1 > div:nth-child(3) { left:100px; top:0px; }
#n2.r1.m1 > div:nth-child(4) { left:150px; top:0px; }
#n2.r1.m1 > div:nth-child(5) { left:150px; top:50px; }
#n2.r1.m1 > div:nth-child(6) { left:150px; top:100px; }

#n2.r2.m1 > div:nth-child(1) { left:0px; top:150px; }
#n2.r2.m1 > div:nth-child(2) { left:0px; top:100px; }
#n2.r2.m1 > div:nth-child(3) { left:0px; top:50px; }
#n2.r2.m1 > div:nth-child(4) { left:0px; top:0px; }
#n2.r2.m1 > div:nth-child(5) { left:50px; top:0px; }
#n2.r2.m1 > div:nth-child(6) { left:100px; top:0px; }

#n2.r3.m1 > div:nth-child(1) { left:150px; top:100px; }
#n2.r3.m1 > div:nth-child(2) { left:100px; top:100px; }
#n2.r3.m1 > div:nth-child(3) { left:50px; top:100px; }
#n2.r3.m1 > div:nth-child(4) { left:0px; top:100px; }
#n2.r3.m1 > div:nth-child(5) { left:0px; top:50px; }
#n2.r3.m1 > div:nth-child(6) { left:0px; top:0px; }


#n3 div {
  background-color:blue;
  border-color:blue;
}
#n3 > div:nth-child(1) { left:50px; top:0px; }
#n3 > div:nth-child(2) { left:0px; top:0px; }
#n3 > div:nth-child(3) { left:0px; top:50px; }
#n3 > div:nth-child(4) { left:0px; top:100px; }
#n3 > div:nth-child(5) { left:0px; top:150px; }
#n3 > div:nth-child(6) { left:50px; top:150px; }

#n3.r1 > div:nth-child(1) { left:150px; top:50px; }
#n3.r1 > div:nth-child(2) { left:150px; top:0px; }
#n3.r1 > div:nth-child(3) { left:100px; top:0px; }
#n3.r1 > div:nth-child(4) { left:50px; top:0px; }
#n3.r1 > div:nth-child(5) { left:0px; top:0px; }
#n3.r1 > div:nth-child(6) { left:0px; top:50px; }

#n3.r2 > div:nth-child(1) { left:0px; top:150px; }
#n3.r2 > div:nth-child(2) { left:50px; top:150px; }
#n3.r2 > div:nth-child(3) { left:50px; top:100px; }
#n3.r2 > div:nth-child(4) { left:50px; top:50px; }
#n3.r2 > div:nth-child(5) { left:50px; top:0px; }
#n3.r2 > div:nth-child(6) { left:0px; top:0px; }

#n3.r3 > div:nth-child(1) { left:0px; top:0px; }
#n3.r3 > div:nth-child(2) { left:0px; top:50px; }
#n3.r3 > div:nth-child(3) { left:50px; top:50px; }
#n3.r3 > div:nth-child(4) { left:100px; top:50px; }
#n3.r3 > div:nth-child(5) { left:150px; top:50px; }
#n3.r3 > div:nth-child(6) { left:150px; top:0px; }

#n3.m1 > div:nth-child(1) { left:0px; top:0px; }
#n3.m1 > div:nth-child(2) { left:50px; top:0px; }
#n3.m1 > div:nth-child(3) { left:50px; top:50px; }
#n3.m1 > div:nth-child(4) { left:50px; top:100px; }
#n3.m1 > div:nth-child(5) { left:50px; top:150px; }
#n3.m1 > div:nth-child(6) { left:0px; top:150px; }

#n3.r1.m1 > div:nth-child(1) { left:0px; top:50px; }
#n3.r1.m1 > div:nth-child(2) { left:0px; top:0px; }
#n3.r1.m1 > div:nth-child(3) { left:50px; top:0px; }
#n3.r1.m1 > div:nth-child(4) { left:100px; top:0px; }
#n3.r1.m1 > div:nth-child(5) { left:150px; top:0px; }
#n3.r1.m1 > div:nth-child(6) { left:150px; top:50px; }

#n3.r2.m1 > div:nth-child(1) { left:50px; top:150px; }
#n3.r2.m1 > div:nth-child(2) { left:0px; top:150px; }
#n3.r2.m1 > div:nth-child(3) { left:0px; top:100px; }
#n3.r2.m1 > div:nth-child(4) { left:0px; top:50px; }
#n3.r2.m1 > div:nth-child(5) { left:0px; top:0px; }
#n3.r2.m1 > div:nth-child(6) { left:50px; top:0px; }

#n3.r3.m1 > div:nth-child(1) { left:150px; top:0px; }
#n3.r3.m1 > div:nth-child(2) { left:150px; top:50px; }
#n3.r3.m1 > div:nth-child(3) { left:100px; top:50px; }
#n3.r3.m1 > div:nth-child(4) { left:50px; top:50px; }
#n3.r3.m1 > div:nth-child(5) { left:0px; top:50px; }
#n3.r3.m1 > div:nth-child(6) { left:0px; top:0px; }


#n4 div {
  background-color:lightblue;
  border-color:lightblue;
}
#n4 > div:nth-child(1) { left:0px; top:0px; }
#n4 > div:nth-child(2) { left:50px; top:0px; }
#n4 > div:nth-child(3) { left:50px; top:50px; }
#n4 > div:nth-child(4) { left:50px; top:100px; }
#n4 > div:nth-child(5) { left:100px; top:100px; }
#n4 > div:nth-child(6) { left:100px; top:150px; }

#n4.r1 > div:nth-child(1) { left:150px; top:0px; }
#n4.r1 > div:nth-child(2) { left:150px; top:50px; }
#n4.r1 > div:nth-child(3) { left:100px; top:50px; }
#n4.r1 > div:nth-child(4) { left:50px; top:50px; }
#n4.r1 > div:nth-child(5) { left:50px; top:100px; }
#n4.r1 > div:nth-child(6) { left:0px; top:100px; }

#n4.r2 > div:nth-child(1) { left:100px; top:150px; }
#n4.r2 > div:nth-child(2) { left:50px; top:150px; }
#n4.r2 > div:nth-child(3) { left:50px; top:100px; }
#n4.r2 > div:nth-child(4) { left:50px; top:50px; }
#n4.r2 > div:nth-child(5) { left:0px; top:50px; }
#n4.r2 > div:nth-child(6) { left:0px; top:0px; }

#n4.r3 > div:nth-child(1) { left:0px; top:100px; }
#n4.r3 > div:nth-child(2) { left:0px; top:50px; }
#n4.r3 > div:nth-child(3) { left:50px; top:50px; }
#n4.r3 > div:nth-child(4) { left:100px; top:50px; }
#n4.r3 > div:nth-child(5) { left:100px; top:0px; }
#n4.r3 > div:nth-child(6) { left:150px; top:0px; }

#n4.m1 > div:nth-child(1) { left:100px; top:0px; }
#n4.m1 > div:nth-child(2) { left:50px; top:0px; }
#n4.m1 > div:nth-child(3) { left:50px; top:50px; }
#n4.m1 > div:nth-child(4) { left:50px; top:100px; }
#n4.m1 > div:nth-child(5) { left:0px; top:100px; }
#n4.m1 > div:nth-child(6) { left:0px; top:150px; }

#n4.r1.m1 > div:nth-child(1) { left:0px; top:0px; }
#n4.r1.m1 > div:nth-child(2) { left:0px; top:50px; }
#n4.r1.m1 > div:nth-child(3) { left:50px; top:50px; }
#n4.r1.m1 > div:nth-child(4) { left:100px; top:50px; }
#n4.r1.m1 > div:nth-child(5) { left:100px; top:100px; }
#n4.r1.m1 > div:nth-child(6) { left:150px; top:100px; }

#n4.r2.m1 > div:nth-child(1) { left:0px; top:150px; }
#n4.r2.m1 > div:nth-child(2) { left:50px; top:150px; }
#n4.r2.m1 > div:nth-child(3) { left:50px; top:100px; }
#n4.r2.m1 > div:nth-child(4) { left:50px; top:50px; }
#n4.r2.m1 > div:nth-child(5) { left:100px; top:50px; }
#n4.r2.m1 > div:nth-child(6) { left:100px; top:0px; }

#n4.r3.m1 > div:nth-child(1) { left:150px; top:100px; }
#n4.r3.m1 > div:nth-child(2) { left:150px; top:50px; }
#n4.r3.m1 > div:nth-child(3) { left:100px; top:50px; }
#n4.r3.m1 > div:nth-child(4) { left:50px; top:50px; }
#n4.r3.m1 > div:nth-child(5) { left:50px; top:0px; }
#n4.r3.m1 > div:nth-child(6) { left:0px; top:0px; }


#n5 div {
  background-color:green;
  border-color:green;
}
#n5 > div:nth-child(1) { left:0px; top:0px; }
#n5 > div:nth-child(2) { left:0px; top:50px; }
#n5 > div:nth-child(3) { left:0px; top:100px; }
#n5 > div:nth-child(4) { left:0px; top:150px; }
#n5 > div:nth-child(5) { left:50px; top:150px; }
#n5 > div:nth-child(6) { left:50px; top:100px; }

#n5.r1 > div:nth-child(1) { left:150px; top:0px; }
#n5.r1 > div:nth-child(2) { left:100px; top:0px; }
#n5.r1 > div:nth-child(3) { left:50px; top:0px; }
#n5.r1 > div:nth-child(4) { left:0px; top:0px; }
#n5.r1 > div:nth-child(5) { left:0px; top:50px; }
#n5.r1 > div:nth-child(6) { left:50px; top:50px; }

#n5.r2 > div:nth-child(1) { left:50px; top:150px; }
#n5.r2 > div:nth-child(2) { left:50px; top:100px; }
#n5.r2 > div:nth-child(3) { left:50px; top:50px; }
#n5.r2 > div:nth-child(4) { left:50px; top:0px; }
#n5.r2 > div:nth-child(5) { left:0px; top:0px; }
#n5.r2 > div:nth-child(6) { left:0px; top:50px; }

#n5.r3 > div:nth-child(1) { left:0px; top:50px; }
#n5.r3 > div:nth-child(2) { left:50px; top:50px; }
#n5.r3 > div:nth-child(3) { left:100px; top:50px; }
#n5.r3 > div:nth-child(4) { left:150px; top:50px; }
#n5.r3 > div:nth-child(5) { left:150px; top:0px; }
#n5.r3 > div:nth-child(6) { left:100px; top:0px; }

#n5.m1 > div:nth-child(1) { left:50px; top:0px; }
#n5.m1 > div:nth-child(2) { left:50px; top:50px; }
#n5.m1 > div:nth-child(3) { left:50px; top:100px; }
#n5.m1 > div:nth-child(4) { left:50px; top:150px; }
#n5.m1 > div:nth-child(5) { left:0px; top:150px; }
#n5.m1 > div:nth-child(6) { left:0px; top:100px; }

#n5.r1.m1 > div:nth-child(1) { left:0px; top:0px; }
#n5.r1.m1 > div:nth-child(2) { left:50px; top:0px; }
#n5.r1.m1 > div:nth-child(3) { left:100px; top:0px; }
#n5.r1.m1 > div:nth-child(4) { left:150px; top:0px; }
#n5.r1.m1 > div:nth-child(5) { left:150px; top:50px; }
#n5.r1.m1 > div:nth-child(6) { left:100px; top:50px; }

#n5.r2.m1 > div:nth-child(1) { left:0px; top:150px; }
#n5.r2.m1 > div:nth-child(2) { left:0px; top:100px; }
#n5.r2.m1 > div:nth-child(3) { left:0px; top:50px; }
#n5.r2.m1 > div:nth-child(4) { left:0px; top:0px; }
#n5.r2.m1 > div:nth-child(5) { left:50px; top:0px; }
#n5.r2.m1 > div:nth-child(6) { left:50px; top:50px; }

#n5.r3.m1 > div:nth-child(1) { left:150px; top:50px; }
#n5.r3.m1 > div:nth-child(2) { left:100px; top:50px; }
#n5.r3.m1 > div:nth-child(3) { left:50px; top:50px; }
#n5.r3.m1 > div:nth-child(4) { left:0px; top:50px; }
#n5.r3.m1 > div:nth-child(5) { left:0px; top:0px; }
#n5.r3.m1 > div:nth-child(6) { left:50px; top:0px; }


#n6 div {
  background-color:yellow;
  border-color:yellow;
}
#n6 > div:nth-child(1) { left:0px; top:100px; }
#n6 > div:nth-child(2) { left:50px; top:100px; }
#n6 > div:nth-child(3) { left:50px; top:50px; }
#n6 > div:nth-child(4) { left:50px; top:0px; }
#n6 > div:nth-child(5) { left:100px; top:0px; }
#n6 > div:nth-child(6) { left:100px; top:50px; }

#n6.r1 > div:nth-child(1) { left:0px; top:0px; }
#n6.r1 > div:nth-child(2) { left:0px; top:50px; }
#n6.r1 > div:nth-child(3) { left:50px; top:50px; }
#n6.r1 > div:nth-child(4) { left:100px; top:50px; }
#n6.r1 > div:nth-child(5) { left:100px; top:100px; }
#n6.r1 > div:nth-child(6) { left:50px; top:100px; }

#n6.r2 > div:nth-child(1) { left:100px; top:0px; }
#n6.r2 > div:nth-child(2) { left:50px; top:0px; }
#n6.r2 > div:nth-child(3) { left:50px; top:50px; }
#n6.r2 > div:nth-child(4) { left:50px; top:100px; }
#n6.r2 > div:nth-child(5) { left:0px; top:100px; }
#n6.r2 > div:nth-child(6) { left:0px; top:50px; }

#n6.r3 > div:nth-child(1) { left:100px; top:100px; }
#n6.r3 > div:nth-child(2) { left:100px; top:50px; }
#n6.r3 > div:nth-child(3) { left:50px; top:50px; }
#n6.r3 > div:nth-child(4) { left:0px; top:50px; }
#n6.r3 > div:nth-child(5) { left:0px; top:0px; }
#n6.r3 > div:nth-child(6) { left:50px; top:0px; }

#n6.m1 > div:nth-child(1) { left:100px; top:100px; }
#n6.m1 > div:nth-child(2) { left:50px; top:100px; }
#n6.m1 > div:nth-child(3) { left:50px; top:50px; }
#n6.m1 > div:nth-child(4) { left:50px; top:0px; }
#n6.m1 > div:nth-child(5) { left:0px; top:0px; }
#n6.m1 > div:nth-child(6) { left:0px; top:50px; }

#n6.r1.m1 > div:nth-child(1) { left:100px; top:0px; }
#n6.r1.m1 > div:nth-child(2) { left:100px; top:50px; }
#n6.r1.m1 > div:nth-child(3) { left:50px; top:50px; }
#n6.r1.m1 > div:nth-child(4) { left:0px; top:50px; }
#n6.r1.m1 > div:nth-child(5) { left:0px; top:100px; }
#n6.r1.m1 > div:nth-child(6) { left:50px; top:100px; }

#n6.r2.m1 > div:nth-child(1) { left:0px; top:0px; }
#n6.r2.m1 > div:nth-child(2) { left:50px; top:0px; }
#n6.r2.m1 > div:nth-child(3) { left:50px; top:50px; }
#n6.r2.m1 > div:nth-child(4) { left:50px; top:100px; }
#n6.r2.m1 > div:nth-child(5) { left:100px; top:100px; }
#n6.r2.m1 > div:nth-child(6) { left:100px; top:50px; }

#n6.r3.m1 > div:nth-child(1) { left:0px; top:100px; }
#n6.r3.m1 > div:nth-child(2) { left:0px; top:50px; }
#n6.r3.m1 > div:nth-child(3) { left:50px; top:50px; }
#n6.r3.m1 > div:nth-child(4) { left:100px; top:50px; }
#n6.r3.m1 > div:nth-child(5) { left:100px; top:0px; }
#n6.r3.m1 > div:nth-child(6) { left:50px; top:0px; }


#n7 div {
  background-color:orange;
  border-color:orange;
}
#n7 > div:nth-child(1) { left:0px; top:50px; }
#n7 > div:nth-child(2) { left:50px; top:50px; }
#n7 > div:nth-child(3) { left:100px; top:50px; }
#n7 > div:nth-child(4) { left:150px; top:50px; }
#n7 > div:nth-child(5) { left:200px; top:50px; }
#n7 > div:nth-child(6) { left:200px; top:00px; }

#n7.r1 > div:nth-child(1) { left:0px; top:0px; }
#n7.r1 > div:nth-child(2) { left:0px; top:50px; }
#n7.r1 > div:nth-child(3) { left:0px; top:100px; }
#n7.r1 > div:nth-child(4) { left:0px; top:150px; }
#n7.r1 > div:nth-child(5) { left:0px; top:200px; }
#n7.r1 > div:nth-child(6) { left:50px; top:200px; }

#n7.r2 > div:nth-child(1) { left:200px; top:0px; }
#n7.r2 > div:nth-child(2) { left:150px; top:0px; }
#n7.r2 > div:nth-child(3) { left:100px; top:0px; }
#n7.r2 > div:nth-child(4) { left:50px; top:0px; }
#n7.r2 > div:nth-child(5) { left:0px; top:0px; }
#n7.r2 > div:nth-child(6) { left:0px; top:50px; }

#n7.r3 > div:nth-child(1) { left:50px; top:200px; }
#n7.r3 > div:nth-child(2) { left:50px; top:150px; }
#n7.r3 > div:nth-child(3) { left:50px; top:100px; }
#n7.r3 > div:nth-child(4) { left:50px; top:50px; }
#n7.r3 > div:nth-child(5) { left:50px; top:0px; }
#n7.r3 > div:nth-child(6) { left:0px; top:0px; }

#n7.m1 > div:nth-child(1) { left:200px; top:50px; }
#n7.m1 > div:nth-child(2) { left:150px; top:50px; }
#n7.m1 > div:nth-child(3) { left:100px; top:50px; }
#n7.m1 > div:nth-child(4) { left:50px; top:50px; }
#n7.m1 > div:nth-child(5) { left:0px; top:50px; }
#n7.m1 > div:nth-child(6) { left:0px; top:00px; }

#n7.r1.m1 > div:nth-child(1) { left:50px; top:0px; }
#n7.r1.m1 > div:nth-child(2) { left:50px; top:50px; }
#n7.r1.m1 > div:nth-child(3) { left:50px; top:100px; }
#n7.r1.m1 > div:nth-child(4) { left:50px; top:150px; }
#n7.r1.m1 > div:nth-child(5) { left:50px; top:200px; }
#n7.r1.m1 > div:nth-child(6) { left:0px; top:200px; }

#n7.r2.m1 > div:nth-child(1) { left:0px; top:0px; }
#n7.r2.m1 > div:nth-child(2) { left:50px; top:0px; }
#n7.r2.m1 > div:nth-child(3) { left:100px; top:0px; }
#n7.r2.m1 > div:nth-child(4) { left:150px; top:0px; }
#n7.r2.m1 > div:nth-child(5) { left:200px; top:0px; }
#n7.r2.m1 > div:nth-child(6) { left:200px; top:50px; }

#n7.r3.m1 > div:nth-child(1) { left:0px; top:200px; }
#n7.r3.m1 > div:nth-child(2) { left:0px; top:150px; }
#n7.r3.m1 > div:nth-child(3) { left:0px; top:100px; }
#n7.r3.m1 > div:nth-child(4) { left:0px; top:50px; }
#n7.r3.m1 > div:nth-child(5) { left:0px; top:0px; }
#n7.r3.m1 > div:nth-child(6) { left:50px; top:0px; }