@import compass
@import colors

// Header
.session-header
  text-align: center
  margin: 0px
  height: 80px
  background-color: rgba(190, 190, 190, 0.5)
  border-bottom: 2px solid $gray

  img
    width: 60px
    height: 60px
    margin: 10px

/**************************************
 * .lonely Login form, registration form
 *************************************/
.initial
  +border-radius(8px)
  max-width: 450px
  margin: 30px auto 70px
  background: rgba(0, 0, 0, 0.5)
  border: 10px solid darken($bonsai, 8%)
  margin: 10px auto
  padding: 58px 20px 20px

  .large
    position: relative
    font-size: 28px
    .icon
      position: absolute
      top: 8px
      left: 54px
      z-index: 100
    input
      font-size: 18px
      width: 300px
      padding: 13px 10px 10px 48px
      margin-bottom: 2px

    input[type='checkbox'], input[type='radio']
      width: auto
      vertical-align: middle

  .input-append > .large
    input
      +border-right-radius(0px)
    .add-on.append
      margin-left: -10px
      height: 35px
      label
        line-height: 30px
        font-size: 20px


  .link
    margin-top: 4px

  .btn
    +border-radius(4px)
    +border-radius(4px)
    font-size: 22px
    padding: 16px 50px
    margin: 24px 0px 10px
    width: 356px

h1.login
  +text-shadow(1px 1px white)
  font-size: 40px
  margin: 20px 0px
  color: $dark

@media (max-width: 530px)
  .initial
    .icon
      display: none
    .large
      input[type="text"],
      input[type="password"]
        padding: 13px 10px
        width: 220px !important
    .btn
      width: 100%

.registration
  input.password
    width: 240px

.error
  font-size: 13px
  display: block !important
  padding: 6px
  color: lighten(red, 40%)
