/*
 * Form Styles */
form {
  /*
	input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=file]):required:valid,
	textarea:required:valid,
	select:required:valid {  }
	input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=file]):required:invalid,
	textarea:required:invalid,
	select:required:invalid,
	input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=file]).error,
	textarea.error,
	select.error { border-color: red; box-shadow: 0 0 5px #f60, inset 0 0 1px #fa0 }
	*/
}
form input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=file]),
form select,
form textarea {
  border-radius: 7px;
  border: 1px solid #999999;
  font: 13px arial;
  box-sizing: border-box;
  margin: 2px 0;
  padding: 3px 2px 3px 7px;
  transition: border 0.4s linear, box-shadow 0.4s linear;
}
form select {
  padding: 2px 3px 2px 3px;
}
form input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=file]):focus,
form select:focus,
form textarea:focus {
  border: 1px solid #0088cc;
  box-shadow: 0 0 5px #88ccff, inset 0 0 1px #88ccff;
  outline: 0;
  transition: border 0 linear, box-shadow 0 linear;
}
form input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=file]).s-small,
form select.s-small,
form textarea.s-small {
  padding: 1px 1px 1px 1px;
  border-radius: 3px;
  font-size: 12px;
}
form input.expand:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=file]) {
  width: 150px;
  transition: width 0.5s ease-out;
}
form input.expand:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=file]):focus {
  width: 180px;
  transition: width 0.5s ease-out;
}
form input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=file]):required:invalid:focus,
form textarea:required:invalid:focus,
form select:required:invalid:focus {
  box-shadow: 0 0 5px #ff8888, inset 0 0 1px #ff8888;
}
form ::-webkit-input-placeholder {
  color: aaa;
}
form ::-moz-placeholder {
  color: #aaa;
}
form :-ms-input-placeholder {
  color: #aaa;
}
form input[type=checkbox],
form input[type=radio] {
  vertical-align: middle;
}
form input[type=checkbox]:focus,
form input[type=radio]:focus {
  outline: 0;
  box-shadow: 0 0 5px #0088cc;
}
form button,
form .button {
  position: relative;
  padding: 6px 15px;
  border: 1px solid #888;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  color: black;
  background: linear-gradient(to bottom, #ffffff, #dddddd);
  transition: border 0.4s linear, box-shadow 0.4s linear;
}
form button:hover,
form .button:hover,
form button:focus,
form .button:focus {
  border: 1px solid #0088cc;
  box-shadow: 0 0 5px #88ccff, inset 0 0 1px #88ccff;
  outline: 0;
  text-decoration: none;
  transition: border 0 linear, box-shadow 0 linear;
}
form button:active:not([disabled]),
form .button:active:not([disabled]) {
  background: linear-gradient(to top, #ffffff, #dddddd);
}
form button.highlight,
form .button.highlight {
  background: linear-gradient(to bottom, #0088cc, #0088cc 1px, #0088cc 1px, #225577);
  border: 1px solid #257;
  color: white;
}
form button.highlight:hover:not([disabled]),
form .button.highlight:hover:not([disabled]),
form button.highlight:focus,
form .button.highlight:focus {
  border: 1px solid #88ccff;
  box-shadow: 0 0 5px #0088cc;
  transition: border 0 linear, box-shadow 0 linear;
}
form button.highlight:active:not([disabled]),
form .button.highlight:active:not([disabled]) {
  background: linear-gradient(to top, #0088cc, #225577);
}
form button.small,
form .button.small {
  padding: 3px 10px;
}
form .button {
  text-align: center;
  display: inline-block;
}
form .button input[type=file] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
form span.small {
  color: gray;
  font-size: 12px;
}
form div.formRow {
  clear: left;
  margin-bottom: 6px;
}
form div.formColumn {
  margin: 6px 10px 0 0;
  float: left;
}
form fieldset {
  border: 1px dashed #bbb;
  margin: 0 3px 12px 3px;
  padding: 0 10px;
  position: relative;
}
form legend {
  font: bold 11px arial;
  color: #225577;
}
form fieldset.outer {
  background-color: #eee;
  border: 1px solid black;
  margin: 10px 0;
  padding: 10px 18px;
}
form fieldset.outer > legend {
  color: white;
  font: bold 14px arial;
  padding: 3px 5px;
  background-color: #225577;
  border: 1px solid black;
  border-radius: 10px;
}