.grid {
  display: inline-block;
  vertical-align: top; }
  .grid .row {
    height: 100px; }
  .grid .cell {
    width: 100px;
    height: 100%;
    display: inline-block;
    position: relative; }
    .grid .cell .slot {
      width: 100%;
      height: 100%;
      background: whitesmoke; }
      .grid .cell .slot .machine {
        top: 20%;
        left: 20%;
        width: 60%;
        height: 60%;
        border: thin solid black;
        background: greenyellow;
        position: relative; }
        .grid .cell .slot .machine .port {
          border: thin solid black;
          position: absolute;
          width: 30%;
          height: 30%; }
          .grid .cell .slot .machine .port.input {
            background: blue; }
          .grid .cell .slot .machine .port.output {
            background: red; }
          .grid .cell .slot .machine .port.up, .grid .cell .slot .machine .port.down {
            left: 35%; }
          .grid .cell .slot .machine .port.up {
            top: -15%; }
          .grid .cell .slot .machine .port.down {
            top: 85%; }
          .grid .cell .slot .machine .port.left, .grid .cell .slot .machine .port.right {
            top: 35%; }
          .grid .cell .slot .machine .port.left {
            left: -15%; }
          .grid .cell .slot .machine .port.right {
            left: 85%; }
    .grid .cell .number {
      position: absolute;
      width: 30%;
      height: 15%;
      text-align: center; }
      .grid .cell .number.left {
        top: 45%;
        left: -15%; }
      .grid .cell .number.up {
        top: -5%;
        left: 35%; }
  .grid .row:nth-child(even) > .cell:nth-child(even) > .slot,
  .grid .row:nth-child(odd) > .cell:nth-child(odd) > .slot {
    background: lightgray; }

#inventory .row {
  height: 70px; }
  #inventory .row .cell {
    width: 70px; }

/*# sourceMappingURL=index.css.map */