purelymental-demo/assets/stylesheets/modules/_lesson_plan.css.scss

.lesson-plan {
  @extend .no-bullets;
  margin-bottom: 0;
  margin-top: 10px;
  padding: 10px 32px;

  li.game {
    display: inline-block;
    margin-right: 20px;
    height: 108px;
    position: relative;
    margin-bottom: 50px;
    width: 108px;
/*    background: transparent image-url("global/bg_lesson_spr.png") -601px  0 no-repeat;*/

    img, a img {
      bottom: 0;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      top: 0;
    }

    span.game-title, a span.game-title {
      display: block;
      font-size: emCalc(14px);
      padding-top: 114px;
      text-align: center;
    }

    a {
      @extend .cf;
      color: #687376;
      display: block;
    }

    &.active {
      &.category-memory {
        a {
          background: transparent image-url("global/bg_lesson_spr.png") 0 0 no-repeat;
        }
      }
      &.category-spatial_recognition {
        a {
          background: transparent image-url("global/bg_lesson_spr.png") -151px 0 no-repeat;
        }
      }
      &.category-problem_solving {
        a {
          background: transparent image-url("global/bg_lesson_spr.png") -301px 0 no-repeat;
        }
      }
      &.category-focus {
        a {
          background: transparent image-url("global/bg_lesson_spr.png") -451px 0 no-repeat;
        }
      }
    }
    &.played {
      &.category-memory {
        background: transparent image-url("global/bg_lesson_spr.png") 0 0 no-repeat;
      }
      &.category-spatial_recognition {
        background: transparent image-url("global/bg_lesson_spr.png") -151px 0 no-repeat;
      }
      &.category-problem_solving {
        background: transparent image-url("global/bg_lesson_spr.png") -301px 0 no-repeat;
      }
      &.category-focus {
        background: transparent image-url("global/bg_lesson_spr.png") -451px 0 no-repeat;
      }
    }
  }
}

.next-game {
  @extend .cf;
  border-radius: 2px;
  background: #FFF7D8;
  border: 1px solid darken(#fff7d8, 20%);
  margin: 0 20px 20px;
  line-height: 60px;

  .next-game-wrapper {
    @extend .cf;
  }

  .next-game-description {
    border-top: 1px solid #FFE272;
    padding: 10px;
    color: #D55F60;

    p {
      margin-bottom: 0;
    }
  }

  img {
    float: left;
    height: 50%;
    width: auto;
    position: relative;
    top: 15px;
    margin-left: 10px;
  }

  .next-game-title {
    float: left;
    font-size: 24px;
    margin-left: 10px;

    span {
      color: $pm_red;
      font-weight: 700;
    }
  }

  a {
    background: $pm_red;
    float: right;
    margin-bottom: 0;
    margin: 8px;
  }
}