// #########################################################
// #                                                       #
// # We're trying to keep all colors defined in this file, #
// # to allow custom styles to over-ride easily.           #
// #                                                       #
// #########################################################
$text-color:         #333
$link-color:         #2ba6cb
$link-color-hover:   #258faf
$light-text-color:   #999
$dark-text-color:    #171717
$faded-text-color:   #b7b7b7
$heading-color:      #555
$border-color:       #ddd
$page-bg-color:      #e9e9e9
$box-bg-color:       rgba(255, 255, 255, 0.95)
$input-bg-color:     #f0f0f0
$input-border-color: #d1d1d1
$input-text-color:   #717171
$image-border-color: #cccccc
$modal-header-color: #f7f7f7

// Alerts
$success-border-color: #3a945b
$success-text-color:   #fff
$success-bg-color:     #43ac6a
$warning-border-color: #cf280e
$warning-text-color:   #fff
$warning-bg-color:     #f04124




// #########################################################
// #                                                       #
// #                      C O L O R S                      #
// #                                                       #
// #########################################################
body.sr-skin-default
  background-color: $page-bg-color
  color: $text-color
  background-size: cover
  min-height: 100%

  h1
    color: $heading-color

  h2
    color: $heading-color

  a
    color: $link-color

    &:hover,
    &:focus
      color: $link-color-hover

  .incorrect-password
    background: $warning-bg-color
    color: $warning-text-color !important
    padding: 4px
    border-radius: 4px
    margin-top: 5px

  textarea
    background: $input-bg-color
    border: 1px solid $input-border-color
    color: $input-text-color

  input[type=text], input[type=email], input[type=password]
    background: $input-bg-color
    border: 1px solid $input-border-color
    color: $input-text-color

  .sr-avatar
    border: 1px solid $image-border-color

  .sr-button
    background-color: #f0f0f0
    background: linear-gradient(#ffffff, #f0f0f0)
    border: 1px solid $image-border-color
    color: #5f5f5f
    text-shadow: 0 1px #fff

  .sr-button[disabled='disabled'],
  .sr-button:disabled
    border: 1px solid #ddd
    color: #aaa

  .sr-fine-print
    color: $light-text-color

    a,
    a:hover,
    a:active,
    a:visited
      color: $light-text-color

  .sr-plain-link
    color: $text-color

  .sr-faded
    color: $faded-text-color

  .sr-light
    color: $light-text-color

  .sr-dark
    color: $dark-text-color

  .sr-box-bg
    background-color: $box-bg-color

  .sr-meta-wrapper .sr-meta-item
    color: $faded-text-color

  .sr-box
    background-color: $box-bg-color

  .sr-border-bottom
    border-bottom: 1px solid $border-color

  .sr-border-top
    border-top: 1px solid $border-color

  .sr-facebook-button,
  .sr-facebook-button:hover
    color: #fff
    background-color: #43609b
    background: -webkit-linear-gradient(#5678bc, #314a7b)
    background: linear-gradient(#5678bc, #314a7b)
    border: 1px solid #293f69
    border-top-color: #314a7b

  .sr-twitter-button,
  .sr-twitter-button:hover
    color: #fff
    background-color: #51a351
    background: -webkit-linear-gradient(#62c462, #51a351)
    background: linear-gradient(#62c462, #51a351)

  .sr-menu-wrapper
    background-color: #232323

    ul li
      background-color: #232323
      border-bottom: 1px solid #151515
      border-top: 1px solid #282828

      a
        color: #fff
        text-decoration: none

  .sr-alert

    .sr-alert-header
      background-color: $modal-header-color
      border: 1px solid $border-color

    .sr-alert-body
      background-color: $box-bg-color
      border: 1px solid $border-color
      border-top: none

    &.sr-alert-success .sr-alert-header
      border: 1px solid $success-border-color
      color: $success-text-color
      background-color: $success-bg-color

      h2
        color: $success-text-color

    &.sr-alert-warning .sr-alert-header
      border: 1px solid $warning-border-color
      color: $warning-text-color
      background-color: $warning-bg-color

      h2
        color: $success-text-color

  .sr-modal-wrapper
    background-color: rgba(0, 0, 0, 0.7)

    .sr-modal
      background-color: $box-bg-color

      .sr-modal-header
        background-color: $modal-header-color

      &.sr-modal-success .sr-modal-header
        border: 1px solid $success-border-color
        color: $success-text-color
        background-color: $success-bg-color

      &.sr-modal-warning .sr-modal-header
        border: 1px solid $warning-border-color
        color: $warning-text-color
        background-color: $warning-bg-color

      .sr-modal-footer
        background-color: $modal-header-color



  // #########################################################
  // #                                                       #
  // #            F L A T   V S   G R A D I E N T            #
  // #                                                       #
  // #########################################################
  textarea
    border-radius: 1px
    box-sizing: border-box

  input[type=text], input[type=email], input[type=password]
    border-radius: 1px

  .sr-box
    border-radius: 3px
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.18)

  .sr-avatar
    border-radius: 3px
    box-shadow: rgba(255, 255, 255, 0.980392) 1px -1px 1px 0px inset, rgba(255, 255, 255, 0.980392) -1px 0px 1px 0px inset

  .sr-button
    border-radius: 3px
    box-shadow: rgba(255, 255, 255, 0.980392) 1px -1px 1px 0px inset, rgba(255, 255, 255, 0.980392) -1px 0px 1px 0px inset

  #sr-header
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1),0 1px 0 0 rgba(0, 0, 0, 0.1)

  .sr-entry-image img
    border-radius: 3px 3px 0 0

  .sr-entry-comment:first-child
    border-radius: 3px 3px 0 0

  .sr-facebook-button,
  .sr-facebook-button:hover
    box-shadow: none
    text-shadow: 0 -1px rgba(0, 0, 0, 0.25)

  .sr-alert
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.18)

    .sr-alert-header
      border-radius: 3px 3px 0 0

    .sr-alert-body
      border-radius: 0 0 3px 3px

  .sr-modal,
    border-radius: 3px

    .sr-modal-header
      border-radius: 3px 3px 0 0

    .sr-modal-footer
      border-radius: 0 0 3px 3px

  .clearfix
    clear: both

  #sr-coupon-code
    border: 1px solid $success-border-color
    color: $success-border-color

    &.sr-invalid
      border: 1px solid $warning-border-color
      color: $warning-border-color

  #sr-coupon-thumbnail img
    border: 1px solid $border-color

  .sr-button-success
    background-color: $success-bg-color
    border: 1px solid $success-border-color
    background: linear-gradient($success-bg-color, $success-bg-color)
    color: $success-text-color
    text-shadow: none
  .sr-button-warning
    background-color: $warning-bg-color
    border: 1px solid $warning-border-color
    background: linear-gradient($warning-bg-color, $warning-bg-color)
    color: $warning-text-color
    text-shadow: none

  .sr-button-success, .sr-button-warning
    box-shadow: none

  #sr-coupon-code
    border-radius: 3px
  #sr-coupon-thumbnail img
    border-radius: 3px