.modal .spinner
  background: url('/img/spinner.gif') no-repeat
  height: 16px
  width: @height

form
  &.fivecol
    margin: 80px auto
    width: 50%
    float: none

    h1
      text-align: center

  button
    display: block
    margin-top: 25px

  fieldset
    border: 0
    padding: 0

  label
    color: #666
    display: block
    font-weight: bold
    margin-bottom: 15px

  legend
    border-bottom: 1px solid $divider
    font-size: 18px
    font-weight: bold
    margin-bottom: 1em
    padding-bottom: 5px
    width: 100%

    s
      font-size: 14px

  input
  textarea
  select
    border-radius: 5px
    border: 1px solid $divider
    box-shadow: inset 2px 2px 5px $input-box-shadow;
    color: $base-color
    display: block
    font-weight: normal
    padding: 8px 10px
    width: 100%

    &[readonly]
      color: $input-color

  .box
    padding: 30px
    width: 100%

  .forgotten
    float: right
    font-weight: normal
    margin-top: 30px

  // should be readable, but not that noticible
  .fine-print
    display: inline-block
    text-align: center

  label.checkbox
  label.radio
    font-weight: normal
    vertical-align: top
    height: 20px

    &:first-of-type
      margin-top: 10px

    &:hover span:before
      content: '✓'
      display: inline-block
      margin: 1px 0 0 3px

    span
      color: #FFF
      background-color: #DDD
      border-radius: 3px
      display: inline-block
      font-family: SSStandard
      height: @height
      width: @height

    input
      display: none

      &:checked + span
        background: $link

        &:before
          content: '✓'
          display: inline-block
          margin: 1px 0 0 3px

  label.radio
    span:before
      float: left
      font-size: 10px
      margin: 1px 0 0 3px

    &:hover span:before
    input:checked + span:before
      content: '●'

    span
      border-radius: 50%