codecombat/app/styles/courses/teacher-courses-view.sass

#teacher-courses-view
  margin-bottom: 50px

  .active-courses
    font-size: 12px
    font-weight: bold
    text-transform: uppercase

  .class-count
    font-size: 30px

  .class-name
    font-size: 20px
    font-weight: bold

  .corner-ribbon-container
    overflow: hidden
    position: relative

  .corner-ribbon
    width: 200px
    background: #0BFF76
    position: absolute
    top: 15px
    left: -65px
    text-align: center
    line-height: 24px
    letter-spacing: 1px
    color: white
    transform: rotate(-30deg)
    -webkit-transform: rotate(-30deg)

    .sticky
      position: fixed

    .shadow
      box-shadow: 0 0 3px rgba(0,0,0,.3)

    .top-left
      top: 25px
      left: -50px
      transform: rotate(-45deg)
      -webkit-transform: rotate(-45deg)

  .course-concept
    display: inline-block
    white-space: nowrap
    font-size: 12px
    line-height: 12px
    border: 1px solid lightgray
    margin-right: 4px
    margin-top: 4px
    padding: 6px
    background-color: #AAEA6E

  .course-enrolled
    font-size: 12px
    font-weight: bold

  .course-name
    font-size: 18px
    font-weight: bold

  .divider
    border-bottom: 1px solid black
    margin-bottom: 20px

  img.media-object
    width: 300px

  .edit-classroom-small
    cursor: pointer
    &:hover
      color: grey

  .no-students
    font-size: 22px
    font-style: italic
    margin: 10px
    text-align: center

  .star-container
    position: absolute
    left: 10px
    bottom: 10px

  .star-text
    position: absolute
    left: 4px
    bottom: 5px
    width: 40px
    z-index: 1

  .round-star-label
    -webkit-box-sizing: content-box
    -moz-box-sizing: content-box
    box-sizing: content-box
    width: 30px
    height: 30px
    position: relative
    border: none
    font: normal 100%/normal Arial, Helvetica, sans-serif
    color: rgba(0,0,0,1)
    text-align: center
    -o-text-overflow: clip
    text-overflow: clip
    background: #E9E417

    &:before
      -webkit-box-sizing: content-box
      -moz-box-sizing: content-box
      box-sizing: content-box
      width: 30px
      height: 30px
      position: absolute
      content: ""
      top: 0
      left: 0
      border: none
      font: normal 100%/normal Arial, Helvetica, sans-serif
      color: rgba(0,0,0,1)
      -o-text-overflow: clip
      text-overflow: clip
      background: #E9E417
      text-shadow: none
      -webkit-transform: rotateZ(30deg)
      transform: rotateZ(30deg)

    &:after
      -webkit-box-sizing: content-box
      -moz-box-sizing: content-box
      box-sizing: content-box
      width: 30px
      height: 30px
      position: absolute
      content: ""
      top: 0
      left: 0
      border: none
      font: normal 100%/normal Arial, Helvetica, sans-serif
      color: rgba(0,0,0,1)
      -o-text-overflow: clip
      text-overflow: clip
      background: #E9E417
      text-shadow: none
      -webkit-transform: rotateZ(60deg)
      transform: rotateZ(60deg)

  .star-text-big
    position: absolute
    left: 4px
    bottom: 10px
    width: 40px
    z-index: 1

  .round-star-label-big
    -webkit-box-sizing: content-box
    -moz-box-sizing: content-box
    box-sizing: content-box
    width: 40px
    height: 40px
    position: relative
    border: none
    font: normal 100%/normal Arial, Helvetica, sans-serif
    color: rgba(0,0,0,1)
    text-align: center
    -o-text-overflow: clip
    text-overflow: clip
    background: #E9E417

    &:before
      -webkit-box-sizing: content-box
      -moz-box-sizing: content-box
      box-sizing: content-box
      width: 40px
      height: 40px
      position: absolute
      content: ""
      top: 0
      left: 0
      border: none
      font: normal 100%/normal Arial, Helvetica, sans-serif
      color: rgba(0,0,0,1)
      -o-text-overflow: clip
      text-overflow: clip
      background: #E9E417
      text-shadow: none
      -webkit-transform: rotateZ(30deg)
      transform: rotateZ(30deg)

    &:after
      -webkit-box-sizing: content-box
      -moz-box-sizing: content-box
      box-sizing: content-box
      width: 40px
      height: 40px
      position: absolute
      content: ""
      top: 0
      left: 0
      border: none
      font: normal 100%/normal Arial, Helvetica, sans-serif
      color: rgba(0,0,0,1)
      -o-text-overflow: clip
      text-overflow: clip
      background: #E9E417
      text-shadow: none
      -webkit-transform: rotateZ(60deg)
      transform: rotateZ(60deg)

  .section-header
    border-bottom: 1px solid black
    font-size: 20px
    font-weight: bold
    margin-bottom: 20px
    text-transform: uppercase


  .text-center
    text-align: center

  .uppercase
    text-transform: uppercase

  .welcome
    font-size: 24px
    font-weight: bold
    margin-bottom: 20px