* {
  box-sizing: border-box;
}
body {
  margin: 20px;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #555;
}

// general form styling
input,
button {
  height: 35px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 2px;

  // same font style, size and color as rest of site
  font-family: inherit;
  font-size: 100%;
  color: inherit;

  &[disabled] {
    background-color: #eee;
  }
}

// select useful for examples
input,
select {
  border: 1px solid #ccc;
  width: 220px;
}
input::placeholder {
  color: #bbb;
}

// borrowed from bootstrap
button {
  color: #fff;
  background-color: #428bca;
  border: 1px solid #357ebd;
  margin-left: 5px;
  &:hover {
    background-color: #3276b1;
    border-color: #285e8e;
    cursor: pointer;
  }
}

// for react demo
.notice {
  margin-top: 15px;
}
