@import 'mixins'

.placefield 
  +p-rel
  +inline
  input, textarea
    +animate
    +box-shadow(0 1px 1px rgba(0,0,0,0.2) inset)
    outline: none
  label
    +animate
    +p-abs
    +no-select
    top: 20px
    left: 10px
    z-index: 20
    color: #D7D7D7
  input:focus + label, textarea:focus + label
    opacity: 0.5
  input:focus, textarea:focus
    +box-shadow(0 1px 1px rgba(0,0,0,0.2) inset,0 0 6px #8ed928)

.backdrop
  +animate(0.5s)
  position: fixed
  width: 100%
  height: 100%
  background: -webkit-radial-gradient(50% 50%, ellipse closest-corner, rgba(0, 0, 0, 0.3) 1%, rgba(0, 0, 0, 0.725) 100%)
  background: -moz-radial-gradient(50% 50%, ellipse closest-corner, rgba(0, 0, 0, 0.3) 1%, rgba(0, 0, 0, 0.725) 100%)
  top: 0px
  left: 0px
  z-index: 10

.overlay
  +animate(0.5s)
  +p-fix
  width: 800px
  top: 50px
  left: 50%
  margin: 0px -400px

  .content
    +clear-border(0.1)
    +bfg-grad($white, #000, 20)
    +p-rel
    +border-radius
    padding: 10px
    overflow: auto

  .header
    +bfg-grad($blue, $white, 10)
    +t-shadow-dark
    +bold
    +t-4
    +padded
    +t-center
    +border-radius
    margin-bottom: 10px

  img.overlay-close
    +p-abs
    top: -20px
    right: -20px
    width: 40px
    z-index: inherit

.notify
  +padded
  +p-fix
  +img-shadow
  +t-4
  +t-center
  +t-shadow-dark
  width: 500px
  top: 0px
  left: 50%
  margin-left: -265px
  z-index: 10000
  background: $green
  color: white
  border-left: 2px solid $white
  border-right: 2px solid $white
  border-bottom: 2px solid $white
  font-weight: bold
  opacity: 0.9

.confirm
  +padded
  +p-fix
  +img-shadow
  +t-4
  +t-center
  +t-shadow
  +clear-border(0.1)
  +bfg-grad($white, #000, 20)
  +border-radius
  width: 700px
  top: -5px
  left: 50%
  margin-left: -360px
  z-index: 10000
  opacity: 0.9
  .msg
    float: left
  .opts
    float: right

.loading-overlay
  +p-abs
  +border-radius
  +img-shadow
  background: -webkit-radial-gradient(50% 50%, ellipse closest-corner, rgba(0, 0, 0, 0.3) 1%, rgba(0, 0, 0, 0.725) 100%)
  background: -moz-radial-gradient(50% 50%, ellipse closest-corner, rgba(0, 0, 0, 0.3) 1%, rgba(0, 0, 0, 0.725) 100%)
  z-index: 10
  top: 0px
  bottom: 0px
  left: 0px
  right: 0px

  span
    +p-abs
    +border-radius
    +padded
    +clear-border(0.1)
    text-transform: uppercase
    letter-spacing: 3px
    display: block
    height: 30px
    top: 50%
    left: 50%
    margin: -25px -100px
    color: #FFF
    text-align: center
    font-size: 20px
    font-weight: bold
    width: 200px
    background-color: rgba(255, 255, 255, .2)

.section-header
  +t-0
  +f-ga
  +t-center
  +t-upper
  +ls(2px)
  +bfg($red, $white)
  +img-shadow-dark
  &.title
    +bold
    font-size: 20px

.view-slider
  overflow: hidden
  position: relative
  .slide-item
    +transition(0.60s ease-in-out left)
    position: relative
    overflow-y: auto
    display: none
    &.next
      left: 100%
      &.left
        left: 0
    &.prev
      left: -100%
      &.right
        left: 0
    &.active, &.prev, &.next
      display: block
    &.prev, &.next
      top: 0
      position: absolute
      z-index: 1
    &.active.left
      left: -100%
    &.active.right
      left: 100%
    &.active
      left: 0px
      z-index: 0