@import "bootstrap/mixins"
@import "bootstrap/variables"

#play-view
  .row
    margin: 20px 0px 0px 0px

  .campaign-container
    margin-bottom: 40px

  .campaign-description
    font-style: italic
    margin-top: -10px

  a[disabled] .level
    opacity: 0.7

  a.complete h3:after
    content: " - Complete!"
    color: green

  a.started h3:after
    content: " - Started"
    color: desaturate(green, 50%)

  .level
    @include box-sizing(border-box)
    border: 1px solid transparent

    &:hover, &:focus
      border: 1px solid cyan
      background-color: rgba(128, 192, 212, 0.25)

    .level-image
      float: left

    .level-info
      float: left
      width: 330px
      margin-left: 20px

      h3
        margin-bottom: 0px

      .level-description
        color: black
        text-shadow: 0 1px 0 white