@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  height: @h;
  width: @w;
  @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;
  @media @highdpi {
    background-image: url("@{at2x_path}");
    background-size: @w @h;
  }
}

@import "normalize.css";

html{
  font: 400 14px LucidaGrande, "Lucida Sans Unicode", sans-serif;
  color: #666;
  background: #f4f4f4;
}

a{
  color: #388CCF;
  text-decoration: none;
}

p{
  line-height: 1.5em;
}

.clearfix {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

.star{
  margin-bottom: 0;
}

.container {
  margin: 0 auto;
  padding: 1rem 3rem 3em;
  max-width: 40rem;
  box-sizing: border-box;
}

.contribute{
  text-align: center;
}

.highlight{
  color: #388CCF;
}

.header{
  h3{
    font-weight: normal;
  }
  .container{
    font-size: 1.2em;
    text-align: center;
  }
}

.body{
  h1{
    font-size: 1.5em;
    font-weight: normal;
    line-height: 2em;
  }
  .container{
    margin: 1rem auto 3rem;
    padding: 3rem;
    background-color: white;
    border-radius: 5px;
  }
}

input[type=text], input[type=password], textarea {
  display: block;
  width: 100%;
  height: 38px;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.556;
  color: #2a3036;
  background-color: white;
  background-image: none;
  border: 1px solid #d7dbdf;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}


button, .button{
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 7px 12px;
  font-size: 14px;
  line-height: 1.556;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: white;
  background-color: #48a3ed;
  border-color: #3198ea;
}

.container{
  #subscription{
    margin-top: 1em;
    background: #5B9DD1;
    border-radius: 3px;
    padding: 0.5em 1em;
    color: #fff;
  }
  #subscription_url{
    line-height: 2em;
    float: left;
  }
  #sub_link{
    width: auto;
    background: #2173B6;
    border-color: #1E73B6;
    padding: 3px 10px;
  }

  input{
    width: 57%;
    float: left;
    box-sizing: border-box;
  }
  button, .button {
    width: 40%;
    float: right;
    box-sizing: border-box;
  }
}

.footer{
  p{
    margin: 0;
    font-size: .9em;
  }
  .copyright{
    padding: 1rem;
  }
  .left{
    float: left;
  }
  .right{
    float: right;
  }
}

@import "mobile";