@import "compass/css3/text-shadow"

@import "partials/campaign-progress"
@import "partials/outfit"

/* 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.campaigns-show, body.campaigns-current
  +campaign-progress
  color: #004

  a
    color: #004 + #222

  #userbar, #footer
    color: $text-color
    a
      color: $link-color

  #home-link
    color: $link-color

  #title
    display: none

  #donation-form
    +module
    background: $campaign-background-color
    border-color: $campaign-border-color
    margin-top: 1em
    margin-bottom: 1.5em
    padding-bottom: 32px
    padding-left: 24px
    padding-top: 32px

    &[data-campaign-theme="hug"]
      background:
        image: url(image_path("campaigns/hug.gif"))
        position: ($container-width - 150px - 8px) -4px
        repeat: no-repeat

    &[data-campaign-theme="bird"]
      background:
        image: url(image_path("campaigns/bird.gif"))
        position: ($container-width - 150px - 8px) -4px
        repeat: no-repeat

    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]
      border-color: #cce
      color: #004
      width: 3em

    button
      +loud-awesome-button-color

  #campaign-text[data-campaign-complete]
    #description
      display: none
      &[data-show]
        display: block

  #success-thanks
    border: 1px dashed $module-border-color
    margin-bottom: 1em
    padding: 1em
    position: relative

    p:last-child
      margin-bottom: 0

  #success-thanks-toggle-description
    position: absolute
    bottom: 1em
    font-style: italic
    right: 1em

  #outfits
    +outfits-list
    text-align: center

    > li
      +outfit

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

      header, footer
        font-size: 85%
        padding: $outfit-banner-v-padding $outfit-banner-h-padding
        width: $outfit-banner-inner-width

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

      &.banner
        background-image: url(http://images.neopets.com/themes/004_bir_a2e60/footer_bg.png)
        background-position: 0 -60px
        border: 2px solid #006
        color: white
        height: 100px
        line-height: 100px
        margin: 4px 0
        text-shadow: #335 2px 2px 1px
        width: $container-width - 4px

        span
          +inline-block
          font-size: 32px
          font-weight: bold
          line-height: 1.5
          vertical-align: middle

  #last-years-donors
    font-weight: bold
    margin-top: 1em
    text-align: center

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