@import includes/settings
@import includes/mixins
@import includes/colors
/* Artfully masterminded by ZURB :: Make sure to include app.js if using inline label inputs */

/* Standard Forms */
form
  margin: 0 0 18px
  label 
    display: block
    +font-size(13)
    line-height: 18px
    cursor: pointer
    margin-bottom: 9px
    
input.input-text, textarea
  border-right: 1px solid #bbb
  border-bottom: 1px solid #bbb
input.input-text, textarea, select
  display: block 
  margin-bottom: 9px
label + input.input-text, label + textarea, label + select, label + div.dropdown, select + div.dropdown
  margin-top: -9px
  
/* Text input and textarea font and padding */
input.input-text, textarea
  +font-size(13)
  padding: 4px 3px 2px
  outline: none !important
  background: #fff
  &.oversize
    +font-size(18, $is-important: true)
    padding: 4px 5px !important
  &:focus
    background: #f9f9f9
  
/* Inlined Label Style */
input, textarea
  .placeholder
    color: #888

/* Text input and textarea sizes */
input
  &.input-text
    width: 254px
textarea
  width: 254px
input, textarea
  &.small
    width: 134px
  &.medium
    width: 254px
  &.large
    width: 434px

/* Fieldsets */
form
  fieldset
    padding: 9px 9px 2px 9px
    border: solid 1px #ddd
    margin: 18px 0
    
/* Errors */
input
  &.input-text
    &.red
      border-color: red
      background-color: rgba(255,0,0,0.15)
label.red
  color: red
small.error
  margin-top: -6px
  display: block
  margin-bottom: 9px
  +font-size(11)
  color: red
  width: 260px
.small+.error
  width: 140px
.medium+.error
  width: 260px
.large+.error
  width: 440px

/* Nicer Forms */
form.nice
  input.input-text, textarea
    border: solid 1px #bbb
    +border-radius(2px)
    +font-size(13)
    padding: 6px 3px 4px
    outline: none !important
    background: image-url('misc/input-bg.png') #fff
    &:focus
      background-color: #f9f9f9
    fieldset
      +border-radius(3px)
  small.error
    padding: 6px 4px
    border: solid 0px red
    border-width: 0 1px 1px 1px
    margin-top: -10px
    background: red
    color: #fff
    +font-size(12)
    font-weight: bold
    +border-bottom-left-radius(2px)
    +border-bottom-right-radius(2px)
  .small+.error
    width: 132px
  .medium+.error
    width: 252px
  .large+.error
    width: 432px
    
/* Custom Forms */
form.custom
  span.custom
    display: inline-block
    width: 14px
    height: 14px
    position: relative
    top: 2px
    border: solid 1px #ccc
    background: image-url('misc/custom-form-sprites.png') 0 0 no-repeat
    &.radio
      +border-radius(7px)
      &.checked
        background-position: 0 -14px
    &.checkbox
      &.checked
        background-position: 0 -28px
  div.custom
    &.dropdown
      position: relative
      display: inline-block
      width: auto
      height: 28px
      margin-bottom: 9px
      a.current
        display: block
        width: auto
        line-height: 26px
        padding: 0 38px 0 6px
        border: solid 1px #ddd
        color: #141414
      a.selector
        position: absolute
        width: 26px
        height: 26px
        display: block
        background: image-url('misc/custom-form-sprites.png') -14px 0 no-repeat
        right: 0px
        top: 0px
        border: solid 1px #ddd
      ul
        position: absolute
        width: auto
        display: none
        margin: 0
        left: 0
        top: 27px
        margin: 0
        padding: 0
        background: rgba(255,255,255,0.9)
        border: solid 1px #ddd
        z-index: 10
        &.show
          display: block
        li
          cursor: pointer
          padding: 3px 38px 3px 6px
          margin: 0
          &.selected
            background: image-url('misc/custom-form-sprites.png') right -52px no-repeat
            &:hover
              background: image-url('misc/custom-form-sprites.png') $blue right -78px no-repeat
          &:hover
            background-color: $blue
            color: #fff
      &:hover
        a.selector
          background-position: -14px -26px
      &.open
        ul
          display: block
        a.selector
          background-position: -14px -26px