
/*
CSS to be applied ONLY on the snapshot page
*/

@import reusable

#snapshot-page

  #healthy-cluster, #unhealthy-cluster
    padding-top : 25px
    
    section
      padding-left : 336px
      
    h2
      padding-top : 20px
      
    h3
      margin-top : 30px
      line-height : 1.5
      
    h4
      copy-font()
      margin-top : 20px
      font-size: 14px
      font-style: italic
      line-height : 1.5

    ul
      margin : 10px 0 0 20px
    
    li
      headline-font()
      line-height : 1.5
      font-size   : 15px
      
      a
        color : lightGray

  #health-indicator
    float        : left
    margin-right : 25px

  #healthy-cluster #health-indicator
    dimensions(337px, 310px)

  #unhealthy-cluster #health-indicator
    dimensions(311px, 309px)

  /* RESPONSIVE MEDIA QUERIES */

  @media screen and (max-width : 899px)

    #healthy-cluster #health-indicator
      dimensions(279px, 249px)

    #unhealthy-cluster #health-indicator
      dimensions(250px, 249px)
      
    #healthy-cluster section, #unhealthy-cluster section
      padding-left : 275px
      
  @media screen and (max-width : 499px)

    .health-info
      text-align : center

    #health-indicator
      margin  : 0 auto
      float   : none
      display : block
      
    #healthy-cluster section, #unhealthy-cluster section
      padding-left : 0
      margin       : 0 auto
      text-align   : left


  /* END RESPONSIVE MEDIA QUERIES */

