@import "compass/css3";

* { @include box-sizing(border-box); }
body { 
  font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  font-size: 14px;
  line-height: 1.4;
  padding: 20px;
}
h1, h2 {
  font-family: Sans-Serif; 
}

.pro-form {
  width: 350px;
  border-radius: 20px;
  @include background(linear-gradient(#268ad0, #59c1d4));
  padding: 2px 20px 20px 20px;
  .field {
    margin: 0 0 10px 0;
    input[type=text], input[type=number] {
      width: 100%;
    }
  }
}
#card_zip {
  width: 50%;
}
#card_code {
  width: 30%;
}
#card_address_2 {
  margin-top: 3px;
}

.actions {
  margin-top: 25px;
  .button {
    display: block;
    width: 100%;
    float: none;
    text-align: center;
    font-size: 120%;
  }
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='text'],
input[type='date'], {
  -webkit-appearance: none;
  @include background(linear-gradient(#ccc, #fff));
  padding: 4px 20px 4px 5px;
  outline: 0;
  border: 0;
  box-shadow: inset 1px 1px 1px rgba(black, 0.3);
  &:focus {
    background: white;
  }
}

.button {
  border: 0;
  padding: 12px 16px;
  @include background(linear-gradient(#323232, #272727));
  box-shadow: inset 0 1px 0 #3c3c3c;
  border-radius: 5px;
  border: 1px solid #111;
  font-size: 16px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);
  text-overflow: ellipsis;
  cursor: pointer;
  &:hover, &:focus, &.gsc-cursor-current-page {
    background: #333;
    text-decoration: none !important;
    @include box-shadow((0 2px 3px -2px rgba(0, 0, 0, 0.5)));
    strong {
      background: #999;
      color: black;
    }
  }
  &:active {
    position: relative;
    top: 1px;
    box-shadow: none;
  }
}

.progress-wrap {
  text-align: center;
  font-size: 10px;
  color: white;
  margin: 0 0 20px 0;
  progress {
    width: 100%;
    margin: 0 0 5px 0;
  }
}