@import "_mixins/all"

.help
  display: inline-block
  height: 19px
  width: 16px
  margin: -4px 0 0 3px
  vertical-align: middle
  background: inline-image('ui/help.png') no-repeat scroll 0 3px transparent
  cursor: pointer

.popup
  top: 50%
  left: 50%
  width: 400px
  margin: -200px 0 0 -200px
  padding: 20px
  @include popup

  .close
    position: absolute
    display: block
    right: 10px
    top: 10px
    width: 16px
    height: 16px
    background: inline-image('ui/close.png') no-repeat 0 0

  h4
    margin-top: 0
    font-size: 18px
    font-weight: bold
    color: $color-text

  p
    font-size: $font-size-normal

  pre
    background-color: $color-bg-pre
    margin: 0
    padding: 10px 20px
    @include border-radius(4px)

#status-images
  display: none
  width: 600px
  margin: -95px 0 0 -300px

  p
    margin: 10px 0
    label
      width: 80px
      display: inline-block
    input
      border: 1px solid $color-border-light
      width: 505px
      padding: 4px
      @include border-radius(3px)

#regenerate-key
  .cancel
    text-decoration: underline
  p
    text-align: center
  .or
    display: inline-block
    margin: 20px 10px 0 10px
  p:last-of-type
    margin-bottom: 5px
  a.button
    font-size: 13px

#status-images, #regenerate-key
  input
    border: 1px solid $color-border-light
    width: 505px
    padding: 4px
    @include border-radius(3px)

#regenerate-key, #regeneration-success
  display: none
  width: 400px
  margin: -95px 0 0 -300px

#code-climate
  margin: -150px 0 0 -200px
  width: 500px
  padding: 5px 20px

  pre
    padding: 5px 10px

  ol
    padding-left: 15px