#gates-status-page

  .blacklink
    color: black
    a
      color: black
      &:hover
        text-decoration: none


  h3
    margin-bottom: 0

  .gate-list-update-info
    font-size: 0.8em
    margin-bottom: 5px

  .gate-group-all
    border: 1px solid gray
    border-radius: 6px    
    margin-bottom: 2px
    
    .gate-group-all-name
      color: white
      background-color: gray
      +border-top-radius(6px)
      text-align: center
      border-right: 1px solid gray
      width: 100%
      font-size: 0.9em

  .gate-container
    margin: 4px 4px 4px 4px
    border: 1px solid #e3e3e3
    background-color: #f5f5f5
    +border-radius(6px)

    .gate-group-name
      color: white
      background-color: #333339
      text-align: center
      +border-top-radius(6px)
      border-right: 1px solid #333339
      width: 100%
      font-size: 0.9em

    header
      +clearfix
      height: 60px
      cursor: pointer
      border-bottom: 1px solid #E3E3E3

      .status-alive
        color: white
        background-color: #51A351

      .status-dead,
      .status-warning,
      .status-undef
        color: white
        background-color: #C13B35



      .gate-time
        +float-left
        position: relative
        width: 30%
        text-align: center
        height: 100%
        +text-shadow(1px 1px 1px rgba(0,0,0,0.5))
        +box-shadow(0 0 5px rgba(0,0,0,0.3) inset)
        +border-top-left-radius(6px)

        .last-signal-time,
        .last-signal-date
          display: block
          font-size: 20px
          font-weight: bold
          font-family: 'lato'

        .last-signal-time
          margin-top: 5px

        .last-signal-date
          font-size: 10px

        .last-signal-label
          position: absolute
          bottom: 1px
          left: 0
          text-align: center
          font-size: 12px
          width: 100%

      .gate-description
        +float-right
        position: relative
        width: 70%
        height: 100%

        .gate-name
          position: relative
          height: 70px
          display: table
          text-align: center
          font-size: 1em
          width: 100%

          p
            margin: 0
            display: table-cell
            vertical-align: middle
            font-family: "lato"
            font-weight: bold
            padding: 0 10px

          .gate-type,
          .gate-matriculation-number
            position: absolute
            top: 2px
            font-size: 0.8em
            font-family: "lato"
            font-style: italic

          .gate-matriculation-number
            left: 2px

          .gate-type
            right: 2px

    .gate-data-container
      section
        border-bottom: 1px solid #E3E3E3

        .title
          display: inline-block
          font-size: 0.9em
          margin-bottom: 2px
          font-style: italic
          width: 150px

        .x30
          position: relative
          left: 30px
        .x60
          position: relative
          left: 60px

      .gate-function-icons
        color: black
        a
          color: black
          
          &:hover
            text-decoration: none

        
      .events-alert-link
        cursor: pointer
        text-align: right
        font-size: 0.9em
        font-weight: bold

        .icon-chevron-right
          line-height: 24px

        &:hover
          background-color: #E3E3E3

      footer
        text-align: right
        font-size: 0.8em
        color: #666
        padding-right: 6px

  #alerts-container

    header

      .gate-description
        margin-bottom: 10px

        p
          margin: 0

        .gate-name
          font-family: "lato"
          font-size: 1.2em
          font-weight: bold

        .update-time
          font-size: 0.8em

      .update-controls
        text-align: right

    table
      .alert-description
        font-size: 0.8em
      .alert-gate-description
        font-size: 0.8em   
      .alert-date-column
        font-size: 0.9em   
      .alert-date-column
        font-size: 0.9em   

  #violations-container

    header

      .gate-description
        margin-bottom: 10px

        p
          margin: 0

        .gate-name
          font-family: "lato"
          font-size: 1.2em
          font-weight: bold

        .update-time
          font-size: 0.8em

      .update-controls
        text-align: right

    table
      .alert-description
        font-size: 0.8em
      .alert-gate-description
        font-size: 0.8em   
      .alert-date-column
        font-size: 0.9em   
      .alert-date-column
        font-size: 0.9em   
        