/* FORMS */

/* Simple form layouts.
 *
 * Use the "vertical" class to make the labels sit above the input fields:
 *
 *     Label
 *     [        ]
 *
 *     [x] Checkbox
 *
 *     [Submit]
 *
 *
 * Use the "horizontal" class if you want a more "horizontal" layout:
 *
 *     Label    [       ]
 *
 *     Another  [       ]
 *
 *              [x] Checkbox
 *
 *              [Submit]
 *
 * You need to explicitly add one of the layout classes to make it easier to use
 * forms as simple UI elements.
 */


/* GENERIC STYLES */
input[type="text"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
input[type="range"],
input[type="number"],
textarea,
select {
  font: 1rem/100% sans-serif;          /* Use  sans-serif font with the default font size. */
  padding: .3em .2em;                  /* TODO: looks inconsistent on FF/Chrome. */
}

textarea {
  width: 100%;                         /* Use entire width of container. */
  height: 10rem;                       /* A reasonable default height for most purposes. */
  line-height: 130%;                   /* Reduce line-height since we set a sans-serif font. */
}

form > strong, fieldset > strong {     /* Header. */
  display: inline-block;
  margin-top: .5em;
}

form > div, fieldset > div {           /* TODO: what is this and why did I add it?! */
  float: left;
  margin-right: 1em;
}



/* VERTICAL FORM */

/* TODO: optgroup? */
/* https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css */
.vertical input[type="text"],
.vertical input[type="search"],
.vertical input[type="tel"],
.vertical input[type="url"],
.vertical input[type="email"],
.vertical input[type="password"],
.vertical input[type="date"],
.vertical input[type="month"],
.vertical input[type="week"],
.vertical input[type="time"],
.vertical input[type="datetime-local"],
.vertical input[type="range"],
.vertical input[type="number"],
.vertical textarea,
.vertical select {
  display: block;                      /* One input per line. */
  min-width: 20rem;                    /* Roughly half the page. */
}

.vertical input[type="number"] {
  min-width: 10rem;                    /* Numbers don't need to be so wide. */
  width: 10rem;
}

.vertical label/*[for]*/ {
  display: block;                      /* One label per line. */
  margin-top: .5em;                    /* Clear from the previous input. */
}

/*
input[type="color"],
input[type="file"],
input[type="image"],
*/

/*
input[type="reset"],
input[type="button"]
*/


/* HORIZONTAL FORM */
form.horizontal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

form.horizontal label {
  width: 25%;
}

form.horizontal input {
  width: 75%;
}

/*
form.horizontal strong {
  display: inline-block;
  margin-left: 15rem;
  margin-top: .5em;
}

form.horizontal label[for] {
  margin-left: 0;

  min-width: 15rem;
  margin-bottom: .5em;
}

form.horizontal input[type=submit], form.horizontal button[type=submit] {
  margin-left: 15rem;
}

form.horizontal span {
  margin-left: 15.5rem;
  color: #666;
  position: relative;
  top: -8px;
}

form.horizontal fieldset {
  margin:0;
  padding-left: 0;
  border: none;
}

form.horizontal legend {
  font-weight: bold;
  border-bottom: 1px solid #d5d5d5;
  display: block;
  width: 100%;
  margin: 3px 0;
}
*/