@import "compass/css3/gradient"
@import "compass/css3/text-shadow"

body.static-donate
  #title
    margin-bottom: 0

  h2
    font-style: italic
    font-weight: normal

  #title, h2
    float: left

  h2
    margin-bottom: .25em

  .pledgie-link
    +awesome-button
    +loud-awesome-button-color

  #pledgie-link-with-title
    float: right
    font-size: 150%
    margin-top: .5em
    padding: .75em

  #campaign-progress-wrapper
    +border-radius(8px)
    background: #aaa
    +linear-gradient(color-stops(#ccc, #aaa))

    border: 4px solid $module-border-color
    clear: both
    margin-bottom: 1.5em
    position: relative
    visibility: hidden

  #campaign-progress
    background: $module-border-color
    +linear-gradient(color-stops($module-border-color + #222, $module-border-color))
    border-right: 1px solid $module-border-color

  #campaign-progress-wrapper, #campaign-progress
    height: 2.5em

  #campaign-progress-label
    +text-shadow(#777, -1px, -1px, 0)
    color: white
    font-size: 150%
    left: 0
    position: absolute
    top: 0
    text-align: center
    width: 100%

  $image-mode-preview-image-width: 300px
  $image-mode-preview-image-border-width: 1px
  $image-mode-preview-h-padding: 20px
  $image-mode-preview-border-width: 1px
  $image-mode-preview-right-margin: 20px
  $image-mode-preview-width: $image-mode-preview-image-width + 2 * ($image-mode-preview-image-border-width + $image-mode-preview-h-padding + $image-mode-preview-border-width)
  $image-mode-preview-outer-width: $image-mode-preview-width + $image-mode-preview-right-margin

  #image-mode-data
    clear: both
    display: block
    float: left
    margin-right: $image-mode-preview-right-margin
    width: $image-mode-preview-width

  #image-mode-preview
    border: $image-mode-preview-border-width solid $module-border-color
    margin: 0 0 2em 0
    padding:
      top: $image-mode-preview-h-padding
      right: $image-mode-preview-h-padding
      bottom: $image-mode-preview-h-padding / 1.5
      left: $image-mode-preview-h-padding

    img
      border: $image-mode-preview-border-width solid $module-border-color
      margin-bottom: .5em

    figcaption
      display: block
      font-family: Calligraffitti
      font-size: 250%
      text-align: center

  #campaign-donors
    display: none
    margin-right: $image-mode-preview-right-margin
    width: $image-mode-preview-width

    ol
      font-size: 85%
      padding-left: 2em

      span
        color: $soft-text-color
        float: right

  $image-mode-description-width: $container-width - $image-mode-preview-outer-width

  $image-mode-beta-h-padding: 15px
  $image-mode-beta-border-width: 1px
  $image-mode-beta-inner-width: $image-mode-description-width - 2 * ($image-mode-beta-h-padding + $image-mode-beta-border-width)

  #image-mode-beta
    +module
    border-width: $image-mode-beta-border-width
    display: block
    float: left
    margin-bottom: 1em
    padding: ($image-mode-beta-h-padding / 1.5) $image-mode-beta-h-padding
    text-align: center
    width: $image-mode-beta-inner-width

    header
      display: block
      font-weight: bold

    p
      font-family: $main-font
      font-size: 75%
      margin: 0

    .pledgie-link
      margin: .75em 0

  #image-mode-description, #image-mode-comments
    float: left
    width: $image-mode-description-width

  &.campaign-loaded
    #campaign-progress-wrapper
      visibility: visible

    #campaign-donors
      display: block