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

@import reusable

#ring-page

  .error-message
    copy-font()
    vendor('box-shadow', 0 2px 3px darkened)
    corners()
    font-size  : 14px
    font-style : italic
    color      : mediumGray
    padding    : 8px 10px 9px 12px
    background : rgba(232, 78, 78, .5)
    border     : 1px solid lighten(rgba(232, 78, 78, .5), 15%)
    margin-top : 25px
    
    .error-link
      headline-bold()
      padding-left : 5px
      
      &:hover
        text-decoration : underline
    
    .close-error
      dimensions(16px, 16px)
      opaque(.6)
      cursor         : pointer
      display        : inline-block
      float          : right
      vertical-align : middle
      background     : url('/admin/ui/images/close-error.png') left top no-repeat transparent
      
      &:hover
        opaque(1)

  select
    float      : right
    min-width  : 100px
    outline    : none
    margin-top : 3px

  h4
    margin-bottom : 20px

  strong
    headline-bold()

  .right
    float : right

  .gui-dropdown-bg
    margin-right : 3px

  .gui-dropdown
    margin-top  : -8px
    margin-left : -6px
    position    : absolute
    z-index     : 200

  .gui-dropdown-cap
    z-index : 100

  #current-ring
    max-width   : 850px
    margin      : 0 auto 45px auto
    padding-top : 40px

    & > span.gui-text-flat
      line-height : 1.5
      display     : block

  .clear
    clear : both

  .chart-wrapper
    position : relative
    overflow : visible

  .nval-dropdown-container
    position : absolute
    right    : 5px
    top      : 0

    .gui-dropdown-wrapper
      width : 120px
      float : right

    h4
      margin-bottom : 5px

  .chart-spacer
    float  : left
    width  : 30px
    height : 1px

  .chart
    corners()
    background     : rgba(0, 0, 0, .15)
    border         : 1px solid rgba(0, 0, 0, .6)
    float          : left
    margin         : 25px 3px 30px
    padding-top    : 15px
    width          : 254px
    vertical-align : top
    overflow       : visible
    position       : relative

    > div
      text-align : center

    > span
      headline-font()
      singleCorner(left, bottom)
      singleCorner(right, bottom)
      display        : inline-block
      font-size      : 15px
      padding        : 15px
      line-height    : 1.3
      vertical-align : top

    .gui-rect-button
      margin: 10px auto

  .details
    corners()
    copy-font()
    position    : relative
    line-height : 1.4
    font-size   : 14px
    font-style  : italic
    background  : rgba(0, 0, 0, .35)
    padding     : 25px
    margin      : 10px auto 0
    overflow    : visible
    text-align  : left
    display     : none

    a
      color : riakorange

      &:hover
        text-decoration : underline

    h4
      font-style : normal

    .actions-pointer
      dimensions(72px, 13px)
      absoluteLeft(50%, -21px)
      background  : url('/admin/ui/images/pointer.png') center top no-repeat transparent
      margin-top  : 8px
      margin-left : -36px

  .partition-section
    margin-top : 45px

  #legend
    dimensions(385px, auto)
    border-left  : 1px solid lightWhite;
    float        : left
    margin       : 25px 0 25px 0
    padding-left : 35px

    span
      headline-font()
      display   : inline-block
      width     : 80%
      margin    : 3px 0 10px 0
      font-size : 15px
      line-height    : 1.3
      vertical-align : top

      &.footnote
        width         : auto
        border-top    : 1px solid lightWhite
        padding       : 20px 20px 0 0
        margin-bottom : 10px

    .partition
      display        : inline-block
      float          : none
      margin-right   : 8px
      vertical-align : top

    #contextual-info
      margin-bottom : 35px

    .contextual-container
      border-radius : 4px
      background    : rgba(0,0,0,0.15)
      border        : 1px solid rgba(0,0,0,0.6)
      width         : 345px
      min-height    : 68px
      padding       : 15px 15px 10px

      h4
        margin : 0

      .hover-message
        copy-font()
        padding : 10px 0 0 0

      .monospace
        monospace()
        font-size : 12px

      .info-section
        margin-bottom : 15px

      ul
        list-style  : disc
        margin-left : 15px

      li
        copy-font()
        font-size      : 14px
        padding-bottom : 5px

  #partition-container
    dimensions(388px, auto)
    max-height    : 312px
    overflow      : auto
    margin        : 25px 4% 25px 0
    float         : left
    padding-right : 5px;

  .partition
    css-transition(background-color .3s ease, border-color .3s ease)
    dimensions(14px, 14px)
    corners(2px)
    background : #626262
    display    : block
    float      : left
    margin     : 3px
    border     : 2px solid rgba(0, 0, 0, .78)

    &:hover
      cursor : pointer
      dimensions(16px, 16px)
      margin : 2px

    &.pulse
      dimensions(16px, 16px)
      margin : 2px

    &.gray
      radialGradient(#626262, #555555)

    &.orange
      css-transition(background-color .3s ease, border-color .3s ease)
      radialGradient(rgba(255, 183, 101, 1), rgba(255, 183, 101, 0))
      vendor('box-shadow', 0 0 8px rgba(255, 183, 101, .45))
      border-color     : #36280e
      background-color : #feac4f

      &.pulse
        vendor('animation', pulseOrange 1s infinite)

    &.red
      css-transition(background-color .3s ease, border-color .3s ease)
      radialGradient(rgba(246, 93, 93, 1), rgba(246, 93, 93, 0))
      vendor('box-shadow', 0 0 8px rgba(246, 93, 93, .45))
      border-color     : #2b0c0c
      background-color : #ea5050

      &.pulse
        vendor('animation', pulseRed 1s infinite)

    &.blue
      css-transition(background-color .3s ease, border-color .3s ease)
      radialGradient(rgba(59, 170, 255, 1), rgba(59, 170, 255, 0))
      vendor('box-shadow', 0 0 8px rgba(59, 170, 255, .45))
      border-color     : #071a20
      background-color : #299ce5

      &.pulse
        vendor('animation', pulseBlue 1s infinite)

    &.green
      css-transition(background-color .3s ease, border-color .3s ease)
      radialGradient(rgba(132, 255, 126, 1), rgba(132, 255, 126, 0))
      vendor('box-shadow', 0 0 8px rgba(132, 255, 126, .45))
      border-color     : #071a03
      background-color : #6ce157

      &.pulse
        vendor('animation', pulseGreen 1s infinite)

  @media screen and (max-width: 1050px)
    .nval-dropdown-container

      div.tooltip
    
        & > span
          absoluteLeft(-750%, 30px)
    
          &:before
            absoluteLeft(83%, -6px)

  @media screen and (max-width: 950px)
    .nval-dropdown-container
      position : static

      h4
        margin-top : 15px

      select
        float      : none
        margin-top : 0

      div.tooltip
        float   : none
        display : inline-block
        vertical-align : middle

        & > span
          absoluteLeft(-18%, 30px)

          &:before
            absoluteLeft(4%, -6px)

    .chart-wrapper
      float         : left
      border-right  : 1px solid lightWhite
      padding-right : 40px
      margin-right  : 0

    .chart-spacer
      display : none

    .chart
      margin : 25px auto 30px
      float  : none
      width  : 300px

    .partition-wrapper
      float        : left
      padding-left : 40px

    #legend, #partition-container
      width : auto

    #legend
      border-left  : 0
      float        : left
      clear        : left
      width        : 350px
      padding-left : 0

    #partition-container
      float        : left
      width        : 388px
      margin-right : 0
      margin-left  : 0

    .partition-section
      margin-top : 0

  @media screen and (max-width: 850px)
    .chart-wrapper
      padding-right : 25px

    .partition-wrapper
      padding-left : 25px

  @media screen and (max-width: 800px)
    .chart-wrapper
      float         : none
      border-right  : 0
      padding-right : 0

    .partition-wrapper
      padding-left : 0
      width        : auto

    .chart
      width      : auto
      text-align : center

    .details
      text-align : center

    #contextual-info
      display : none

  @media screen and (max-width: 620px)
    .partition-wrapper
      float : none

    #legend, #partition-container
      float        : none
      width        : auto
      border-right : none
      margin-left  : 0

/*
 * Keyframes for green pulsing effect.
 */
@-webkit-keyframes pulseGreen {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(132, 255, 126, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(132, 255, 126, .45))
    background-color: #6ce157
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(132, 255, 126, .1))
    background-color: #555555
  }
}
@-moz-keyframes pulseGreen {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(132, 255, 126, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(132, 255, 126, .45))
    background-color: #6ce157
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(132, 255, 126, .1))
    background-color: #555555
  }
}
@-o-keyframes pulseGreen {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(132, 255, 126, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(132, 255, 126, .45))
    background-color: #6ce157
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(132, 255, 126, .1))
    background-color: #555555
  }
}
@keyframes pulseGreen {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(132, 255, 126, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(132, 255, 126, .45))
    background-color: #6ce157
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(132, 255, 126, .1))
    background-color: #555555
  }
}

/*
 * Keyframes for red pulsing effect.
 */
@-webkit-keyframes pulseRed {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(246, 93, 93, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(246, 93, 93, .45))
    background-color: #ea5050
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(246, 93, 93, .1))
    background-color: #555555
  }
}
@-moz-keyframes pulseRed {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(246, 93, 93, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(246, 93, 93, .45))
    background-color: #ea5050
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(246, 93, 93, .1))
    background-color: #555555
  }
}
@-o-keyframes pulseRed {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(246, 93, 93, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(246, 93, 93, .45))
    background-color: #ea5050
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(246, 93, 93, .1))
    background-color: #555555
  }
}
@keyframes pulseRed {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(246, 93, 93, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(246, 93, 93, .45))
    background-color: #ea5050
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(246, 93, 93, .1))
    background-color: #555555
  }
}

/*
 * Keyframes for blue pulsing effect.
 */
@-webkit-keyframes pulseBlue {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(59, 170, 255, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(59, 170, 255, .45))
    background-color: #299ce5
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(59, 170, 255, .1))
    background-color: #555555
  }
}
@-moz-keyframes pulseBlue {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(59, 170, 255, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(59, 170, 255, .45))
    background-color: #299ce5
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(59, 170, 255, .1))
    background-color: #555555
  }
}
@-o-keyframes pulseBlue {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(59, 170, 255, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(59, 170, 255, .45))
    background-color: #299ce5
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(59, 170, 255, .1))
    background-color: #555555
  }
}
@keyframes pulseBlue {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(59, 170, 255, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(59, 170, 255, .45))
    background-color: #299ce5
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(59, 170, 255, .1))
    background-color: #555555
  }
}

/*
 * Keyframes for orange pulsing effect.
 */
@-webkit-keyframes pulseOrange {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(255, 183, 101, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(255, 183, 101, .45))
    background-color: #feac4f
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(255, 183, 101, .1))
    background-color: #555555
  }
}
@-moz-keyframes pulseOrange {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(255, 183, 101, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(255, 183, 101, .45))
    background-color: #feac4f
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(255, 183, 101, .1))
    background-color: #555555
  }
}
@-o-keyframes pulseOrange {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(255, 183, 101, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(255, 183, 101, .45))
    background-color: #feac4f
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(255, 183, 101, .1))
    background-color: #555555
  }
}
@keyframes pulseOrange {
  0%   {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(255, 183, 101, .1))
    background-color: #555555
  }
  50%  {
    opaque(1)
    vendor('box-shadow', 0 0 8px rgba(255, 183, 101, .45))
    background-color: #feac4f
  }
  100% {
    opaque(.8)
    vendor('box-shadow', 0 0 8px rgba(255, 183, 101, .1))
    background-color: #555555
  }
}


