livescore.sass

.ls-container
  background-color: #f1f1f1

  &, &:before, &:after, *, *:before, *:after
    box-sizing: border-box
  
  .ls-header h3,
  .ls-content .ls-row .ls-row-date,
  .ls-content .ls-row .ls-row-time,
  .ls-content .ls-row .ls-row-queue,
  .ls-content .ls-row .ls-row-match .ls-row-player,
  .ls-content .ls-row .ls-row-match .ls-row-score,
    font-family: 'Bebas'

  .clear
    clear: both

  .ls-header
    background-color: #45db9b
    height: 45px
    padding-top: 8px
    text-align: center

    h3
      margin: 0px
      padding: 0px
      color: white

  .ls-content
    padding-top: 25px
  
    .ls-row
      position: relative
      height: 90px

      .ls-row-date
        color: #95a6b0
        font-size: 9px
        position: absolute
        left: 12px
        top: 4px
        width: 44px
        text-align: center

      .ls-row-time
        text-align: center
        position: absolute
        color: #4aa3da
        left: 12px
        width: 44px
        top: 15px

      .ls-row-queue
        height: 26px
        width: 26px
        position: absolute
        left: 62px
        background-color: #4aa3da
        border-radius: 50%
        color: white
        padding: 3px 2px 1px 2px
        border: 5px solid #b0dcf8
        box-sizing: content-box
        text-align: center

        &:after
          content: " "
          width: 8px
          position: absolute
          top: 31px
          left: 11px
          background-color: #b0dcf8
          height: 55px

      .ls-row-match
        height: 69px
        position: absolute
        left: 120px
        right: 15px + 29px
        background-color: #3698db
        border-radius: 5px
        font-size: 17px
        color: #fff
        padding: 6px 16px

        &:before
          right: 100%
          border: solid transparent
          content: " "
          height: 0
          width: 0
          position: absolute
          pointer-events: none
          border-right-color: #3698db
          border-width: 10px
          top: 10px

        &:after
          content: " "
          position: absolute
          background-color: inherit
          right: 0px
          top: 0px
          bottom: 0px
          width: 4px

        .ls-row-player
          float: left
          margin: 0px
          padding: 0px
          display: block

          &:after
            content: " "
            background-color: #fbbe20
            width: 26px
            height: 26px
            position: absolute
            border-radius: 50%
            right: 23px
            margin-top: -1px
            z-index: 1

        .ls-row-score
          float: right
          margin: 0px
          margin-right: 3px
          text-align: center
          width: 35px
          padding: 0px
          display: block
          font-weight: lighter
          position: relative
          z-index: 2

        .ls-row-separator
          padding: 4px 0px
          position: relative

          &:before
            left: 0
            right: 0
            background-color: #b0dcf8
            height: 1px
            content: " "
            position: absolute

      .ls-row-twitter
        height: 69px
        position: absolute
        width: 29px
        right: 15px
        background-color: #6fbeee
        border: none
        border-radius: 5px
        font-size: 17px
        color: #fff

        &:before
          content: " "
          position: absolute
          background-color: inherit
          left: 0px
          top: 0px
          bottom: 0px
          width: 4px

        &:hover
          background-color: #69B8E7

    .ls-row-last
      height: 69px
      overflow: hidden

    .ls-row-empty
      top: 155px
      font-size: 29px
      opacity: .1