@import "../includes/button"

form.simple_form
  background: white
  border: 1px solid #ccc
  margin: 0 0 1em
  padding: 0 1em
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05)
  label
    text-align: right
    margin-right: 1em
  .required
    label
      font-weight: bold
  border-radius: 5px
  .input
    margin-bottom: 0em
    margin-top: 0em
    overflow: hidden
    padding: 0.5em 0
    label
      display: block
      float: left
      line-height: 1.8
      width: 13em
  input
    @include placeholder
      color: rgba(0, 0, 0, 0.4)
  textarea
    height: 10em
  input, textarea
    font-family: "Helvetica Neue", "Arial", sans-serif
    font-size: 1em
    margin: 0 5px 0 0
    border-width: 1px
    border-style: solid
    border-color: #999 #DDD #DDD #999
    padding: 0.3em
    border-radius: 2px
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.1)
    &:focus
      border-color: #67A #9AF #9AF #67A
      box-shadow: 0 0 4px rgba(0, 128, 255, 0.5), inset 1px 1px 4px rgba(0, 0, 0, 0.1)
    &[type=text], &[type=email], &[type=url]
      width: 15em
    &[type=number]
      width: 3.5em
      text-align: right
      &:-webkit-inner-spin-button, &:-webkit-outer-spin-button
        -webkit-appearance: none
        margin: 0

  .fragments
    .label label
      width: 13em

  .fragments-group
    padding-left: 14em

  input[type=submit], a.button
    @include button
    &[name=commit]
      background-color: #9C7
      border-color: #370
      color: white
      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5)
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset -1px -1px 0 rgba(255, 255, 255, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3)
      &:hover, &:focus
        background-color: #8B6

  .input.boolean
    padding-left: 14em
    label
      text-align: left
    input
      float: left
      margin-top: 0.4em
      margin-right: 0.6em

  .field_with_errors input
    border-width: 1px
    border-style: solid
    border-color: #933 #FBB #FBB #933
    background: #FFEFEF
    padding: 0.3em
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.1)

  span.error
    display: inline
    margin-left: 1em
    color: #933

  fieldset
    border: 0
    margin-bottom: 0.5em

  fieldset.inputs
    padding: 1em 0
    border-bottom: 1px solid #ccc
  fieldset.actions
    padding: 1.5em 0 1em 14em
  .string, .email, .password, .text
    input, textarea
      width: 40%

  .help
    margin-left: 14em
    margin-top: -0.5em
    p
      font-size: 0.8em
      color: #999

a.button
  @include button

a.button.new
  background-color: #7AC
  border-color: #047
  color: white
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5)
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), inset -1px -1px 0 rgba(255, 255, 255, 0.2), inset 1px 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 6px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3)
  &:hover, &:focus
    background-color: #69B