html {
  font-size: 17px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

#outer-frame {
  width: 500px;
  height: 500px;
  background-color: #C8C8C8;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,

    repeat-x,
    repeat-y,
    repeat-y,
    repeat-x;
  background-position:
    top left,
    top right,
    bottom right,
    bottom left,

    center top,
    left center,
    right center,
    center bottom;

  padding-top: 140px;
  padding-left: 150px
}

.blue {
  background-image:
    url('images/blue/tl.png'),
    url('images/blue/tr.png'),
    url('images/blue/br.png'),
    url('images/blue/bl.png'),

    url('images/blue/t.png'),
    url('images/blue/l.png'),
    url('images/blue/r.png'),
    url('images/blue/b.png');
}

.red {
  background-image:
    url('images/red/tl.png'),
    url('images/red/tr.png'),
    url('images/red/br.png'),
    url('images/red/bl.png'),

    url('images/red/t.png'),
    url('images/red/l.png'),
    url('images/red/r.png'),
    url('images/red/b.png');
}

.yellow {
  background-image:
    url('images/yellow/tl.png'),
    url('images/yellow/tr.png'),
    url('images/yellow/br.png'),
    url('images/yellow/bl.png'),

    url('images/yellow/t.png'),
    url('images/yellow/l.png'),
    url('images/yellow/r.png'),
    url('images/yellow/b.png');
}

#inner-frame {
  background: #0c0;
  border-radius: 10px;
  width: 330px;
  height: 330px;
  box-shadow: 10px 10px 5px black;
}

p {
  padding: 5px;
}

#selector {
  width: 640px;
  text-align: center;
}

#goleft {
  float: left;
  margin-top: 100px;
}

#goright {
  float: right;
  margin-top: 100px;
}

#selector div {
  display: inline-block;
}

#selector div img:last-child {
  display: none;
}