.S {
  position: relative;
  display: block;
  background-color: white;
  border: 2px solid black;
  margin: 0px auto;
}

.S .s, .S .RL, .S .RR {
  position: absolute;
}

.S .C {
  position: absolute;
/* background: red; */
}

.SSW .C, .SSE .C, .SNE .C, .SNW .C {
  width: 34px;
  height: 34px;
}

.SSS .C, .SNN .C, .SEE .C, .SWW .C {
  width: 23px;
  height: 23px;
}

.SSW .s, .SSW .RL, .SSW .RR {
  background-image: url('/img/sw.gif');
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
}
.SSW .a {
 background-position: 0px -250px;
}
.SSW .as {
  background-position: -50px -250px;
}
.SSW .x {
 background-position: 0px -150px;
}
.SSW .xs {
  background-position: -50px -150px;
}
.SSW .b {
 background-position: 0px -300px;
}
.SSW .bs {
  background-position: -50px -300px;
}
.SSW .xy {
 background-position: 0px -100px;
}
.SSW .xys {
  background-position: -50px -100px;
}
.SSW .xr {
 background-position: 0px -200px;
}
.SSW .xrs {
  background-position: -50px -200px;
}
.SSW .RL {
 background-position: 0px -50px;
}
.SSW .RR {
  background-position: -50px -50px;
}
.SWW .s, .SWW .RL, .SWW .RR {
  background-image: url('/img/ww.gif');
  background-repeat: no-repeat;
  width: 34px;
  height: 34px;
}
.SWW .a {
 background-position: 0px -170px;
}
.SWW .as {
  background-position: -34px -170px;
}
.SWW .x {
 background-position: 0px -102px;
}
.SWW .xs {
  background-position: -34px -102px;
}
.SWW .b {
 background-position: 0px -204px;
}
.SWW .bs {
  background-position: -34px -204px;
}
.SWW .xy {
 background-position: 0px -68px;
}
.SWW .xys {
  background-position: -34px -68px;
}
.SWW .xr {
 background-position: 0px -136px;
}
.SWW .xrs {
  background-position: -34px -136px;
}
.SWW .RL {
 background-position: 0px -34px;
}
.SWW .RR {
  background-position: -34px -34px;
}
.SNW .s, .SNW .RL, .SNW .RR {
  background-image: url('/img/nw.gif');
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
}
.SNW .a {
 background-position: 0px -250px;
}
.SNW .as {
  background-position: -50px -250px;
}
.SNW .x {
 background-position: 0px -150px;
}
.SNW .xs {
  background-position: -50px -150px;
}
.SNW .b {
 background-position: 0px -300px;
}
.SNW .bs {
  background-position: -50px -300px;
}
.SNW .xy {
 background-position: 0px -100px;
}
.SNW .xys {
  background-position: -50px -100px;
}
.SNW .xr {
 background-position: 0px -200px;
}
.SNW .xrs {
  background-position: -50px -200px;
}
.SNW .RL {
 background-position: 0px -50px;
}
.SNW .RR {
  background-position: -50px -50px;
}
.SNN .s, .SNN .RL, .SNN .RR {
  background-image: url('/img/nn.gif');
  background-repeat: no-repeat;
  width: 34px;
  height: 34px;
}
.SNN .a {
 background-position: 0px -170px;
}
.SNN .as {
  background-position: -34px -170px;
}
.SNN .x {
 background-position: 0px -102px;
}
.SNN .xs {
  background-position: -34px -102px;
}
.SNN .b {
 background-position: 0px -204px;
}
.SNN .bs {
  background-position: -34px -204px;
}
.SNN .xy {
 background-position: 0px -68px;
}
.SNN .xys {
  background-position: -34px -68px;
}
.SNN .xr {
 background-position: 0px -136px;
}
.SNN .xrs {
  background-position: -34px -136px;
}
.SNN .RL {
 background-position: 0px -34px;
}
.SNN .RR {
  background-position: -34px -34px;
}
.SNE .s, .SNE .RL, .SNE .RR {
  background-image: url('/img/ne.gif');
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
}
.SNE .a {
 background-position: 0px -250px;
}
.SNE .as {
  background-position: -50px -250px;
}
.SNE .x {
 background-position: 0px -150px;
}
.SNE .xs {
  background-position: -50px -150px;
}
.SNE .b {
 background-position: 0px -300px;
}
.SNE .bs {
  background-position: -50px -300px;
}
.SNE .xy {
 background-position: 0px -100px;
}
.SNE .xys {
  background-position: -50px -100px;
}
.SNE .xr {
 background-position: 0px -200px;
}
.SNE .xrs {
  background-position: -50px -200px;
}
.SNE .RL {
 background-position: 0px -50px;
}
.SNE .RR {
  background-position: -50px -50px;
}
.SEE .s, .SEE .RL, .SEE .RR {
  background-image: url('/img/ee.gif');
  background-repeat: no-repeat;
  width: 34px;
  height: 34px;
}
.SEE .a {
 background-position: 0px -170px;
}
.SEE .as {
  background-position: -34px -170px;
}
.SEE .x {
 background-position: 0px -102px;
}
.SEE .xs {
  background-position: -34px -102px;
}
.SEE .b {
 background-position: 0px -204px;
}
.SEE .bs {
  background-position: -34px -204px;
}
.SEE .xy {
 background-position: 0px -68px;
}
.SEE .xys {
  background-position: -34px -68px;
}
.SEE .xr {
 background-position: 0px -136px;
}
.SEE .xrs {
  background-position: -34px -136px;
}
.SEE .RL {
 background-position: 0px -34px;
}
.SEE .RR {
  background-position: -34px -34px;
}
.SSE .s, .SSE .RL, .SSE .RR {
  background-image: url('/img/se.gif');
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
}
.SSE .a {
 background-position: 0px -250px;
}
.SSE .as {
  background-position: -50px -250px;
}
.SSE .x {
 background-position: 0px -150px;
}
.SSE .xs {
  background-position: -50px -150px;
}
.SSE .b {
 background-position: 0px -300px;
}
.SSE .bs {
  background-position: -50px -300px;
}
.SSE .xy {
 background-position: 0px -100px;
}
.SSE .xys {
  background-position: -50px -100px;
}
.SSE .xr {
 background-position: 0px -200px;
}
.SSE .xrs {
  background-position: -50px -200px;
}
.SSE .RL {
 background-position: 0px -50px;
}
.SSE .RR {
  background-position: -50px -50px;
}
.SSS .s, .SSS .RL, .SSS .RR {
  background-image: url('/img/ss.gif');
  background-repeat: no-repeat;
  width: 34px;
  height: 34px;
}
.SSS .a {
 background-position: 0px -170px;
}
.SSS .as {
  background-position: -34px -170px;
}
.SSS .x {
 background-position: 0px -102px;
}
.SSS .xs {
  background-position: -34px -102px;
}
.SSS .b {
 background-position: 0px -204px;
}
.SSS .bs {
  background-position: -34px -204px;
}
.SSS .xy {
 background-position: 0px -68px;
}
.SSS .xys {
  background-position: -34px -68px;
}
.SSS .xr {
 background-position: 0px -136px;
}
.SSS .xrs {
  background-position: -34px -136px;
}
.SSS .RL {
 background-position: 0px -34px;
}
.SSS .RR {
  background-position: -34px -34px;
}