input,
textarea { /* Bootstrap reset */
  &,
  &:active,
  &:invalid,
  &:invalid:required, {
    border-color: $border-grey;
    box-shadow: none;
  }

  &:focus,
  &:active:focus,
  &:invalid:focus,
  &:invalid:required:focus {
    border-color: $border-dark-grey;
    box-shadow: none;
  }
}

/* autocomplete colors */
input:-webkit-autofill{
  background-color: #fff !important;
  background-image: none !important;
}

/* Forms described here are only used on the public pages at the moment */
form.block-form {
  margin: 20px auto;

  label {
    color : $text-dark-grey;
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  fieldset {
    margin-bottom: 1em;
    background-color: #fff;
    position: relative; /* To correctly place the entypo icon */

    input {
      color : $text-dark-grey;
      margin: 0px;
      border-bottom-width: 0px;
      border-radius: 0px;
    }

    .form-control {
      font-size: 16px;
      height: 40px;
      padding: 10px;
      padding-left: 40px;
    }

    .form-control:first-of-type {
      &,
      &:focus,
      &:invalid,
      &:invalid:focus,
      &:invalid:required,
      &:invalid:required:focus {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
    }

    .form-control:last-of-type {
      &,
      &:focus,
      &:invalid,
      &:invalid:focus,
      &:invalid:required,
      &:invalid:required:focus {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-width: 1px;
      }
    }

    .form-control:focus {
      &,
      &:invalid,
      &:invalid:required {
        border-color: $border-dark-grey;
        border-bottom-width: 1px;
      }
      /* remove the border of the element under the one with the focus */
      & + label + .entypo + .form-control {
        border-top-width: 0px;
      }
    }

    .entypo {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 20px;
      text-align: center;
      color: $text-grey;
      font-size: 20px;
    }

    .entypo:nth-of-type(2) {
      top: 50px;
    }

    .entypo:nth-of-type(3) {
      top: 90px;
    }

    .entypo:nth-of-type(4) {
      top: 130px;
    }

    input:-moz-placeholder { text-transform: uppercase; }
    input::-webkit-input-placeholder { text-transform: uppercase; }
    input:-ms-input-placeholder { text-transform: uppercase; }
  }

  input[type=submit] {
    text-align: center;
    display: block;
    width: 100%;
    padding: 8px 0;
  }
}

/* buttons to be extracted? */
.new-btn {
  @include transition(box-shadow);
  @include linear-gradient(#fff, rgb(233,233,233));

  box-shadow: 0 1px 2px rgba(0,0,0,0);
  background-color : rgb(233,233,233);
  color : $text-grey;
  border-radius: 5px;
  border : 1px solid $border-dark-grey;

  //font-family : Roboto-Bold;
  font-size : 14px;
  text-shadow : 0 1px 2px #eee;

  &:hover {
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }

  &:active {
    box-shadow : inset 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(255,255,255,0.7);
  }
}