@import "compass/css3/text-shadow"

@import "partials/campaign-progress"

/* TODO: redundant with outfits/index; why is it not in the partial? */
$outfit-inner-height: 150px
$outfit-inner-width: 150px
$outfit-banner-h-padding: 4px
$outfit-banner-v-padding: 2px
$outfit-banner-inner-width: $outfit-inner-width - (2 * $outfit-banner-h-padding)

body.static-donate
  +campaign-progress

  #title
    margin-bottom: .25em

  #title
    clear: left
    float: left

  #donation-form
    +module

    background:
      image: url(http://images.neopets.com/new_shopkeepers/t_993.gif)
      position: ($container-width - 150px - 8px) -8px
      repeat: no-repeat
    margin-bottom: 1.5em
    padding-bottom: 24px
    padding-left: 24px
    padding-top: 24px

    header, div
      +inline-block

      p
        font-family: $main-font
        margin: 0

    div
      font-size: 115%
      margin-left: 20px

    #donation-form-title
      font-size: 125%
      font-weight: bold
      margin-bottom: .25em

    p
      font-size: 85%
      margin-bottom: 0
      margin-top: .5em

    input[type=text]
      width: 3em

    button
      +loud-awesome-button-color

  #outfits
    +outfits-list

    > li
      +outfit

      height: $outfit-inner-height
      margin: 2px
      width: $outfit-inner-width

      header, footer
        padding: $outfit-banner-v-padding $outfit-banner-h-padding
        text-align: center
        width: $outfit-banner-inner-width

      img
        height: $outfit-inner-height
        width: $outfit-inner-width

  #fine-print
    font-size: 85%
    margin-top: 2em