/* ##############################################################

   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms

   Usage:
   * For text fields, use class .title or .text

   Originally based on blueprint-css v0.7.1

############################################################## */

/*
 *= require jquery-ui/datepicker
 */

fieldset .trap { display: none }

form.formtastic {
  width: 900px;
}

.formtastic .inputs {
  padding-top: .5em;
}

.formtastic .actions {
  padding-bottom: 3em;
}

.formtastic .stringish input,
.formtastic .text textarea,
.formtastic #event_times input {
  font-family: inherit;
  font-size: inherit;
  padding: 6px;
}

.formtastic .input .label {
  font-weight: bold;
  text-align: right;
  padding-right: 1em;
  margin-left: -1em;
  width: 15%;
}

.formtastic .input .inline-hints,
.formtastic .errors,
.formtastic .inline-errors {
  margin-left: 15%;
  width: 74%;
}

.formtastic .actions,
.formtastic .boolean label {
  padding-left: 15%;
}

/* @group Autocomplete
-------------------------------------------------------------- */
ul.jq-ui-autocomplete {
    position: absolute;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #aaa;
    margin: 0px;
    padding: 0;
    list-style: none;
    color: #333;
}
ul.jq-ui-autocomplete li {
  display: block;
  padding: .3em .5em .3em .3em;
  overflow: hidden;
  width: 100%;
}

ul.jq-ui-autocomplete li.active {
  background-color: saturate(lighten($green, 20%), 25%);;
  color: $dk_green;
}

/* @end */

/* @group Form fields
-------------------------------------------------------------- */


#event_times input, #event_times span {
  margin-right: 1em;
  float: left;
}

form.standard_form {
  width: 100%;
}

.standard_form input[type="text"],
.standard_form input[type="url"],
.standard_form input[type="number"],
.standard_form input[type="email"],
.standard_form input[type="tel"],
.standard_form textarea,
.standard_form .text textarea
{
  width: 370px;
}

.standard_form input.date_picker
{
  width: 7em;
}

.standard_form input.time_picker
{
  width: 5em;
}

div.time-picker li {
  white-space: nowrap;
}

/* @end */

/* @group Success, notice and error boxes
-------------------------------------------------------------- */

.flash      { padding: .8em; margin: 1em 250px 1em 0 ;  }

.error, .failure      { background: #FFC5A3; color: #C00; border: #C00}
.notice     { background: #bcf794; }
.success    { background: #98f0f7; color: $dk_green;  }
.error a    { color:  #FF640A; }
.notice a   { color: #514721; }
.success a  { color: #264409; }

.flash.flash_failure, .errorExplanation {
  color: #C00;
  border: 2px solid  #C00;
  background: #F5DBD7;
  padding: 1em;
}

ul.errors {
  clear: both;
  padding-top: .5em;
}

/* @end */