/************************
******   Forms    *******
**** Version: 0.0.1 *****
*************************/

form {
  margin: 0 0 1.25em;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 1.25em;
  font-size: em(21);
  line-height: 2.5;
  color: $black-70;
  border: 0;
  border-bottom: 1px solid #e5e5e5;

  small {
    font-size: em(14);
    color: #999;
  }

}

label, input, button, select, textarea {
  font-size: em(14);
  font-weight: normal;
  line-height: 1.25;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

label {
  display: block;
  margin-bottom: .3125em;
}

select, 
textarea {
  display: inline-block;
  height: auto;
  padding: .5em .375em;
  margin-bottom: .5625em;
  font-size: em(14);
  line-height: 1.25;
  color: $black-50;
  -webkit-border-radius: .1875em;
  -moz-border-radius: .1875em;
  border-radius: .1875em;
}

input {

  &[type="text"], 
  &[type="password"], 
  &[type="datetime"], 
  &[type="datetime-local"], 
  &[type="date"], 
  &[type="month"], 
  &[type="time"], 
  &[type="week"], 
  &[type="number"], 
  &[type="email"], 
  &[type="url"], 
  &[type="search"], 
  &[type="tel"], 
  &[type="color"] {
    display: inline-block;
    height: auto;
    padding: .5em .375em;
    margin-bottom: .5625em;
    font-size: em(14);
    line-height: 1.25;
    color: $black-50;
    -webkit-border-radius: .1875em;
    -moz-border-radius: .1875em;
    border-radius: .1875em;
  }

}

.uneditable-input {
  display: inline-block;
  height: auto;
  padding: .5em .375em;
  margin-bottom: .5625em;
  font-size: em(14);
  line-height: 1.25em;
  color: $black-50;
  -webkit-border-radius: .1875em;
  -moz-border-radius: .1875em;
  border-radius: .1875em;
}

input, textarea, 
.uneditable-input {
  width: auto
}

textarea {
  width:100%;
  height: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border linear .2s, box-shadow linear .2s;
  -moz-transition: border linear .2s, box-shadow linear 0.2s;
  -o-transition: border linear .2s, box-shadow linear .2s;
  transition: border linear .2s, box-shadow linear .2s;

  &:focus {
    border-color: rgba(82, 168, 236, .8);
    outline: 0;
    outline: thin dotted \9;
    /* IE6-9 */
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
  }

}

input {

  &[type="text"], 
  &[type="password"], 
  &[type="datetime"], 
  &[type="datetime-local"], 
  &[type="date"], 
  &[type="month"], 
  &[type="time"], 
  &[type="week"], 
  &[type="number"], 
  &[type="email"], 
  &[type="url"], 
  &[type="search"], 
  &[type="tel"], 
  &[type="color"] {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;

    &:focus {
      border-color: rgba(82, 168, 236, 0.8);
      outline: 0;
      outline: thin dotted \9;
      /* IE6-9 */
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); 
    }

  }

  &[type="radio"], 
  &[type="checkbox"] {
    margin: .25em 0 0;
    margin-top: 1px \9;
    *margin-top: 0;
    line-height: normal;
    cursor: pointer;
  }

  &[type="file"], 
  &[type="image"], 
  &[type="submit"], 
  &[type="reset"], 
  &[type="button"], 
  &[type="radio"], 
  &[type="checkbox"] {
    width: auto;
  }

  &[type="file"], 
  &[type="radio"], 
  &[type="checkbox"] {
    
    &:focus {
      outline: thin dotted $black-70;
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }

  }

}

.uneditable-input {
  background-color: #fff;
  border: 1px solid #ccc;
  @include vendorize(box-shadow,inset 0 1px 2px rgba(0, 0, 0, .075));
  -webkit-transition: border linear .2s,box-shadow linear .2s;
  -moz-transition: border linear .2s,box-shadow linear .2s;
  -o-transition: border linear .2s,box-shadow linear .2s;
  transition: border linear .2s,box-shadow linear .2s;

  &:focus {
    border-color: rgba(82, 168, 236, .8);
    outline: 0;
    outline: thin dotted \9;
    /* IE6-9 */
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
  }

}

select, 
input[type="file"] {
  height: 1.875em;
  /* In IE7,the height of the select element cannot be changed by height,only font-size */
  *margin-top: .25em;
  /* For IE7,add top margin to align select with labels */
  line-height: 1.875em;
}

select {
  width: 13.75em;
  background-color: #fff;
  border: 1px solid #ccc;

  &[multiple], 
  &[size] {
    height: auto;
  }

  &:focus {
    outline: thin dotted $black-70;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }

}

.uneditable-input, 
.uneditable-textarea {
  color: #999;
  cursor: not-allowed;
  background-color: #fcfcfc;
  border-color: #ccc;
  @include vendorize(box-shadow, inset 0 1px 2px rgba(0, 0, 0, .025))
}

.uneditable-input {
  overflow: hidden;
  white-space: nowrap;
}

.uneditable-textarea {
  width: auto;
  height: auto;
}

input:-moz-placeholder, 
textarea:-moz-placeholder, 
input:-ms-input-placeholder, 
textarea:-ms-input-placeholder, 
input::-webkit-input-placeholder, 
textarea::-webkit-input-placeholder {
  color: #999;
}

.radio, 
.checkbox {
  min-height: 1.125em;
  padding-left: 1.125em;

  &.inline {
    display: inline-block;
    padding-top: .3125em;
    margin-bottom: 0;
    vertical-align: middle;
  }
}

.radio input[type="radio"], 
.checkbox input[type="checkbox"] {
  float: left;
  margin-left: -1.125em;
}

.controls > {

  .radio:first-child, .checkbox:first-child {
    padding-top: .3125em;
  }

}

.radio.inline + .radio.inline, .checkbox.inline + .checkbox.inline {
  margin-left: .625em;
}

.input-mini, 
.input-small, 
.input-medium, 
.input-large, 
.input-xlarge, 
.input-xxlarge {
  width: 100%;
}

input, 
select, 
textarea, 
.uneditable-input {

  &[class*="span"] {
    float: none;
    margin-left: 0;
  }

}

.row-fluid {
  input, 
  select, 
  textarea, 
  .uneditable-input {

    &[class*="span"] {
      float: none;
      margin-left: 0;
      display: inline-block;
    }

  }

}

.input-append,
.input-prepend {
  input, 
  .uneditable-input {

    &[class*="span"] {
      display: inline-block;
    }

  }

}


input, 
textarea, 
.uneditable-input {
  margin-left: 0;
}

.controls-row {

  [class*="span"] + [class*="span"] {
    margin-left: 1.25em;
  }

  @include clearfix();

  [class*="span"] {
    float: left;
  }

}

input, 
select, 
textarea, 
input, 
select, 
textarea {

  &[disabled],
  &[readonly] {
    cursor: not-allowed;
    background-color: #eee;
  }

}

input {
  &[type="radio"], 
  &[type="checkbox"] {
    
    &[disabled],
    &[readonly] {
      background-color: transparent;
    }

  }

}

.control-group {

  &.warning {

    > label, 
    .help-block, 
    .help-inline, 
    .checkbox, 
    .radio, 
    input, 
    select, 
    textarea {
      color: #c09853;
    }

    input, 
    select, 
    textarea {
      border-color: #c09853;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      
      &:focus {
	    border-color: #a47e3c;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #dbc59e;
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #dbc59e;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #dbc59e;
      }

    }

    .input-prepend, 
    .input-append {

      .add-on {
        color: #c09853;
        background-color: #fcf8e3;
        border-color: #c09853;
      }

    }

  }
  &.error {

    > label, 
    .help-block, 
    .help-inline, 
    .checkbox, 
    .radio, 
    input, 
    select, 
    textarea {
      color: #b94a48;
    }
    input, 
    select, 
    textarea {
      border-color: #b94a48;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      
      &:focus {
        border-color: #953b39;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #d59392;
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #d59392;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #d59392;
      }

    }

    .input-prepend, .input-append {
      
      .add-on {
        color: #b94a48;
        background-color: #f2dede;
        border-color: #b94a48;
      }

    }

  }
  &.success {

    > label, 
    .help-block, 
    .help-inline, 
    .checkbox, 
    .radio, 
    input, 
    select, 
    textarea {
      color: #468847;
    }

    input, 
    select, 
    textarea {
      border-color: #468847;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      
      &:focus {
        border-color: #356635;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
      }

    }

    .input-prepend, 
    .input-append {

      .add-on {
        color: #468847;
        background-color: #dff0d8;
        border-color: #468847;
      }

    }

  }
  &.info {

    > label, 
    .help-block, 
    .help-inline, 
    .checkbox, 
    .radio, 
    input, 
    select, 
    textarea {
      color: #3a87ad;
    }

    input, 
    select, 
    textarea {
      border-color: #3a87ad;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      
      &:focus {
        border-color: #2d6987;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #7ab5d3;
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #7ab5d3;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #7ab5d3;
      }

    }
    .input-prepend, .input-append {

      .add-on {
        color: #3a87ad;
        background-color: #d9edf7;
        border-color: #3a87ad;
      }
  
    }

  }

}

input:focus:required:invalid, 
textarea:focus:required:invalid, 
select:focus:required:invalid {
  color: #b94a48;
  border-color: #ee5f5b;

  &:focus {
    border-color: #e9322d;
    -webkit-box-shadow: 0 0 6px #f8b9b7;
    -moz-box-shadow: 0 0 6px #f8b9b7;
    box-shadow: 0 0 6px #f8b9b7;
  }

}

.form-actions {
  padding: 1.1875em 1.25em 1.25em;
  margin: 1.125em 0;
  background-color: #f5f5f5;
  border-top: 1px solid #e5e5e5;
  *zoom: 1;

  &:before {
    display: table;
    line-height: 0;
    content: "";
  }

  &:after {
    display: table;
    line-height: 0;
    content: "";
    clear: both;
  }

}

.help-block, 
.help-inline {
  color: #595959;
}

.help-block {
  display: block;
  margin-bottom: .625em;
}

.help-inline {
  display: inline-block;
  *display: inline;
  padding-left: .3125em;
  vertical-align: middle;
  *zoom: 1;
}

.input-append, 
.input-prepend {
  margin-bottom: .3125em;
  font-size: 0;
  white-space: nowrap;
}

.input-append, 
.input-prepend {

  input,
  select,
  .uneditable-input {
    position: relative;
    margin-bottom: 0;
    *margin-left: 0;
    font-size: em(14);
    vertical-align: top;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;

    &:focus {
	  z-index: 2;
	}

  }

  &.add-on {
    display: inline-block;
    width: auto;
    height: auto;
    min-width: 1em;
    padding: .5em .3125em;
    font-size: em(14);
    font-weight: normal;
    line-height: 1.25em;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    background-color: #eee;
    border: 1px solid #ccc;
  }

  &.add-on,
  &.btn {
    vertical-align: middle;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }

  .active {
    background-color: #a9dba9;
    border-color: #46a546;
  }

}

.input-prepend {

  .active {
    background-color: #a9dba9;
    border-color: #46a546;
  }

  .add-on, 
  .btn {
    margin-right: -.0625em;

    &:first-child {
      -webkit-border-radius: 3px 0 0 3px;
      -moz-border-radius: 3px 0 0 3px;
      border-radius: 3px 0 0 3px;
    }

  }

}

.input-append {

  input, 
  select, 
  .uneditable-input {
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
  }

  .add-on, 
  .btn {
    margin-left: -.0625em;

    &:last-child {
	  -webkit-border-radius: 0 3px 3px 0;
	  -moz-border-radius: 0 3px 3px 0;
	  border-radius: 0 3px 3px 0;
	}
  }

}

.input-prepend.input-append {

  input, 
  select, 
  .uneditable-input {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }

  .add-on:first-child, .btn:first-child {
    margin-right: -1px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
  }
  .add-on:last-child, .btn:last-child {
    margin-left: -.0625em;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
  }
}

input.search-query {
  padding-right: .875em;
  padding-right: .25em \9;
  padding-left: .875em;
  padding-left: .25em \9;
  /* IE7-8 doesn't have border-radius,so don't indent the padding */
  margin-bottom: 0;
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  border-radius: 1em;
}

/* Allow for input prepend/append in search forms */

.form-search {

  .input-append .search-query, .input-prepend .search-query {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
  }

  .input-append {

    .search-query {
      -webkit-border-radius: .875em 0 0 .875em;
      -moz-border-radius: .875em 0 0 .875em;
      border-radius: .875em 0 0 .875em;
    }

    .btn {

      -webkit-border-radius: 0 .875em .875em 0;
      -moz-border-radius: 0 .875em .875em 0;
      border-radius: 0 .875em .875em 0;
    }

  }
  .input-prepend {

    .search-query {
      -webkit-border-radius: 0 .875em .875em 0;
      -moz-border-radius: 0 .875em .875em 0;
      border-radius: 0 .875em .875em 0;
    }

    .btn {
      -webkit-border-radius: .875em 0 0 .875em;
      -moz-border-radius: .875em 0 0 .875em;
      border-radius: .875em 0 0 .875em;
      height: auto;
    }

  }

  input {
    display: inline-block;
    *display: inline;
    margin-bottom: 0;
    vertical-align: top;
    *zoom: 1;
  }

}

.form-inline input, 
.form-horizontal input, 
.form-search textarea, 
.form-inline textarea, 
.form-horizontal textarea, 
.form-search select, 
.form-inline select, 
.form-horizontal select, 
.form-search .help-inline, 
.form-inline .help-inline, 
.form-horizontal .help-inline, 
.form-search .uneditable-input, 
.form-inline .uneditable-input, 
.form-horizontal .uneditable-input, 
.form-search .input-prepend, 
.form-inline .input-prepend, 
.form-horizontal .input-prepend, 
.form-search .input-append, 
.form-inline .input-append, 
.form-horizontal .input-append {
  display: inline-block;
  *display: inline;
  margin-bottom: 0;
  vertical-align: top;
  *zoom: 1;
}

.form-search .hide, 
.form-inline .hide, 
.form-horizontal .hide {
  display: none;
}

.form-search label, 
.form-inline label, 
.form-search .btn-group, 
.form-inline .btn-group {
  display: inline-block;
}

.form-search .input-append, 
.form-inline .input-append, 
.form-search .input-prepend, 
.form-inline .input-prepend {
  margin-bottom: 0;
}

.form-search {

  .radio, .checkbox {
    padding-left: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }

}

.form-inline {

  .radio, .checkbox {
    padding-left: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }

}

.form-search {

  .radio input[type="radio"], 
  .checkbox input[type="checkbox"] {
    float: left;
    margin-right: .1875em;
    margin-left: 0;
  }

}

.form-inline {

  .radio input[type="radio"], 
  .checkbox input[type="checkbox"] {
    float: left;
    margin-right: .1875em;
    margin-left: 0;
  }

}

.control-group {
  margin-bottom: .625em;
}

legend + .control-group {
  margin-top: 1.25em;
  -webkit-margin-top-collapse: separate;
}

.form-horizontal {
  width: 90%;

  .control-group {
    margin-bottom: 1.25em;
    @include clearfix();
  }

  .control-label {
    float: left;
    width: auto;
    padding-top: .7125em;
    text-align: left;
    margin-right: 4%;
  }

  .controls {
    *display: inline-block;
    *padding-left: 1.25em;
    *margin-left: 0;

    &:first-child {
      *padding-left: 11.25em;
    }

  }

  .help-block {
    margin-bottom: 0;
  }

  input + .help-block, 
  select + .help-block, 
  textarea + .help-block {
    margin-top: .625em;
  }

  .form-actions {
    padding-left: 11.25em;
  }

}
