// The following styles were taken from Formalize by Nathan Smith
// URL: http://formalize.me
@mixin kindofblue-formalize {
  .ui-form {
    input,
    select,
    textarea {
      margin: 0; 
      vertical-align: middle;
    }

    input.ui-button {
      vertical-align: top;
    }

    input[type="radio"],
    input[type="checkbox"] {
      position: relative;
      vertical-align: top;
      top: 3px;
      // IE8, IE9, IE10
      top: 0 \0;
      // IE7
      *top: -3px;
    }

    // iPad
    @media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1024px) {
      input[type="radio"],
      input[type="checkbox"] {
        vertical-align: baseline;
        top: 2px; } }

    // iPhone 3
    @media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 480px) {
      input[type="radio"],
      input[type="checkbox"] {
        vertical-align: baseline;
        top: 0; } }

    // iPhone 4
    @media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) {
      input[type="radio"],
      input[type="checkbox"] {
        vertical-align: baseline;
        top: 0; } }
    textarea,
    select,
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="month"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="text"],
    input[type="time"],
    input[type="url"],
    input[type="week"] {
      -webkit-appearance: none;
      -moz-border-radius: 0;
      -webkit-border-radius: 0;
      border-radius: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -moz-background-clip: padding;
      -webkit-background-clip: padding;
      background-clip: padding-box;
      background-color: white;
      border: 1px solid;
      border-color: #848484 #c1c1c1 #e1e1e1;
      color: black;
      outline: 0;
      padding: 2px 3px;
      font-size: 13px;
      // Leaving out Helvetica Neue, to not throw off size="..."
      // on inputs. Arial is more reliable, on Windows and OS X.
      font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
      height: 1.8em;
      // IE7
      *padding-top: 2px;
      *padding-bottom: 1px;
      *height: auto; }

    // Separate rule for Firefox.
    // Separate rule for IE, too.
    // Cannot stack with WebKit's.
    ::-webkit-input-placeholder {
      color: #888888; }

    input:-moz-placeholder,
    textarea:-moz-placeholder {
      color: #888888; }

    input.placeholder-text,
    textarea.placeholder-text {
      color: #888888; }

    :invalid {
      // Suppress red glow that Firefox
      // adds to form fields by default,
      // even when user is still typing.
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none; }

    button:focus,
    button:active,
    input:focus,
    input:active,
    select:focus,
    select:active,
    textarea:focus,
    textarea:active {
      @include single-box-shadow($kob-blue-medium, 0, 0, 7px);
      z-index: 1; }

    input[type="file"]:focus,
    input[type="file"]:active,
    input[type="radio"]:focus,
    input[type="radio"]:active,
    input[type="checkbox"]:focus,
    input[type="checkbox"]:active {
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none; }

    select[disabled],
    textarea[disabled],
    input[type="date"][disabled],
    input[type="datetime"][disabled],
    input[type="datetime-local"][disabled],
    input[type="email"][disabled],
    input[type="month"][disabled],
    input[type="number"][disabled],
    input[type="password"][disabled],
    input[type="search"][disabled],
    input[type="tel"][disabled],
    input[type="text"][disabled],
    input[type="time"][disabled],
    input[type="url"][disabled],
    input[type="week"][disabled] {
      background-color: #eeeeee; }

    button[disabled],
    input[disabled],
    select[disabled],
    select[disabled] option,
    select[disabled] optgroup,
    textarea[disabled] {
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      color: #888888;
      cursor: default; }

    textarea,
    select[size],
    select[multiple] {
      height: auto; }

    // Tweaks for Safari + Chrome.
    @media (-webkit-min-device-pixel-ratio: 0) {
      select {
        background-image: image-url("#{$ui-images-url}select_arrow.gif");
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 20px; }
      select[size],
      select[multiple] {
        background-image: none;
        padding: 0; }
      ::-webkit-validation-bubble-message {
        box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black));
        border: 1px solid;
        border-color: #747474 #5e5e5e #4f4f4f;
        color: white;
        font: 13px / 17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif;
        overflow: hidden;
        padding: 15px 15px 17px;
        text-shadow: black 0 0 1px;
        height: 16px; }
      ::-webkit-validation-bubble-arrow,
      ::-webkit-validation-bubble-top-outer-arrow,
      ::-webkit-validation-bubble-top-inner-arrow {
        -webkit-box-shadow: none;
        box-shadow: none;
        background: #666666;
        border: 0; } }

    textarea {
      min-height: 40px;
      overflow: auto;
      resize: vertical;
      width: 100%; }

    optgroup {
      color: black;
      font-style: normal;
      font-weight: normal; }
  }
}