@import mixins

.p-rel
  +p-rel
.p-abs
  +p-abs
.bold
  +bold
.t-4
  +t-4
.t-3
  +t-3
.t-2
  +t-2
.t-1
  +t-1
.t-upper
  +t-upper
.t-center
  +t-center
.padded
  +padded
.left
  +left
.right
  +right
.inline, .inl
  +inline

.img-shadow-dark
  +img-shadow-dark

body
  .mceContentBody
    font-size: 20px

h1
  +t-shadow
  +t-center
  +bold
  margin-top: 0px
h2
  +t-shadow

hr
  +colruler

.field 
  +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)


.container
  +clear-border
  .colborder
    +colborder

.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

.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

.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