@import "config";
@import "compass";
@import "icons";
@import "wells";
@import "calendarwidget";

form {
  margin: 0 0 $base-line-height;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
fieldset.collapsed * {
  display: none;
}

fieldset.collapsed h2, fieldset.collapsed {
  display: block !important;
}

fieldset.collapsed .collapse-toggle {
  background: transparent;
  display: inline !important;
}

fieldset .description {
  color: lighten($text-color, 15%); // lighten the text some for contrast
  display: block; // account for any element using help-block
  margin-left: 20px;
  margin-right: 20px;
  font-size: .9rem;
  line-height: $base-line-height * .9;
  padding-top: 9px;
  padding-bottom: 20px;
}

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: $base-line-height;
  font-size: $base-font-size * 1.5;
  line-height: $base-line-height * 2;
  color: $text-color;
  border: 0;
  border-bottom: $table-border;
  small {
    font-size: $base-line-height * .75;
    color: #999999;
  }
}

label,
input,
button,
select,
textarea {
  font-size: $base-font-size;
  font-weight: normal;
  line-height: $base-line-height;
  margin-bottom: 0;
  vertical-align: middle;
}

input,
button,
select,
textarea {
  font-family: $font-family;
  *display: inline-block;
  *margin-left: 0;
  &:first-child {
    *padding-left: 20px;
  }
}

label {
  display: block;
  margin-bottom: 5px;
  margin-right: 20px;
  float: left;
  width: 160px;
  padding-top: 5px;
  text-align: right;
}
label.required {
  font-weight: bold;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  display: inline-block;
  height: $base-line-height;
  padding: 4px 6px;
  font-size: $base-font-size;
  line-height: $base-line-height;
  color: $text-color;
  @include border-radius($border-radius);
  vertical-align: middle;
}

input {
  width: 206px;
}

textarea {
  height: auto;
  width: 400px;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  background-color: #ffffff;
  border: $table-border;
  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
  @include transition-property(border);
  @include transition-duration(0.2s);
  @include transition-property(box-shadow);
  @include transition-duration(0.2s);

  &:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted \9; /* IE6-9 */

    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6));
  }
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0;
  *margin-top: 0; /* IE7 */
  margin-top: 1px \9; /* IE8-9 */
  line-height: normal;
  cursor: pointer;
  margin-left: 180px;
}

input[type="radio"] + label,
input[type="checkbox"] + label {
  float: none;
  text-align: left;
  width: auto;
  display: inline-block;
  margin-left: 10px;
}

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

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

// Make select elements obey height by applying a border
select {
  width: 220px;  // default input width + 10px of padding that doesn't get applied
  background-color: #ffffff; // Chrome on Linux and Mobile Safari need background-color
  border: $table-border;
}

select[multiple],
select[size] {
  height: auto;
  min-height: 300px;
}

select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
  color: $placeholder-color;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: $placeholder-color;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: $placeholder-color;
}


// FORM FIELD FEEDBACK STATES
// --------------------------

.form-row.errors label,
.form-row.errors .help {
  color: $error-color;
}

.form-row.errors .checkbox,
.form-row.errors .radio,
.form-row.errors input,
.form-row.errors select,
.form-row.errors textarea {
  color: $error-color;
}

.form-row.errors input,
.form-row.errors select,
.form-row.errors textarea {
  border-color: $error-color;
  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
}

.form-row.errors input:focus,
.form-row.errors select:focus,
.form-row.errors textarea:focus {
  border-color: #953b39;
  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392);
}


.errornote, .errorlist {
  color: $error-color;
  @include text-shadow(0 1px 0 rgba(255, 255, 255, 0.5));
  border: 1px solid #EED3D7;
  background-color: #F2DEDE;
}

.errornote {
  padding: 8px 35px 8px 14px;
  margin-bottom: $base-line-height / 2;
  @include border-radius($border-radius);
  @include icon-ban-circle;
}

.errorlist {
  padding: 0 35px 0 14px;
  margin: 4px 0;
  li {
    list-style: none;
  }
}

// FORM ACTIONS
// ------------

.form-actions {
  padding: ($base-line-height - 1) 20px $base-line-height;
  margin-top: $base-line-height;
  margin-bottom: $base-line-height;
  background-color: #f5f5f5;
  border-top: 1px solid #e5e5e5;

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

  &:after {
    clear: both;
  }
}



// HELP TEXT
// ---------

.help {
  color: lighten($text-color, 15%); // lighten the text some for contrast
  display: block; // account for any element using help-block
  margin-left: 200px;
  margin-right: 20px;
  font-size: .9rem;
  line-height: $base-line-height * .9;
  text-indent: -20px;
  @include icon-info-sign;
}

.help.help-tooltip {
  margin: 0;
  display: inline-block;
}


// SEARCH FORM
// -----------

input.search-query {
  padding-right: 14px;
  padding-right: 4px \9;
  padding-left: 14px;
  padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */
  margin-bottom: 0; // Remove the default margin on all inputs
  @include border-radius(15px);
}


// Margin to space out fieldsets
.form-row {
  padding-bottom: $base-line-height / 2;
  margin-bottom: $base-line-height / 2;
  border-bottom: $table-border;
}
.form-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.form-row:first-child {
  margin-top: $base-line-height / 2;
}
// Legend collapses margin, so next element is responsible for spacing
h2 + .form-row {
  margin-top: $base-line-height / 2;
  -webkit-margin-top-collapse: separate;
}

a.related-lookup {
  @include unstyled-link;
}

.submit-row {
  @include well;
  padding: 9px;
  text-align: right;
  margin-bottom: .3rem;
  input {
      margin: 0 0 0 5px;
  }
  p.deletelink-box {
    float: left;
    margin: 0;
  }
  .default {
    float:right;
  }
  .deletelink {
    @include button;
    @include cancelBackground;
  }
}