@import '../../shared/mixins',
        '../../shared/reset',
        '../../shared/about-dark';

/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */

input { @include box-sizing(border-box); }
::-moz-focus-inner { padding: 0; border: 0 }
:-moz-placeholder { color: #999 !important; }
::-webkit-input-placeholder { color: #999; }

html, body { min-height: 100%; }

body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #ccc;
  @include radial-gradient(center, circle cover, #ddd, #a7a7a7 80%);
}

.subscribe {
  margin: 80px auto;
  padding: 20px;
  width: 300px;
  background: white;
  border-radius: 5px;
  @include box-shadow(0 1px 2px rgba(black, .5));
}

.subscribe-pitch {
  padding-left: 120px;
  background: url('../img/email.png') 5px center no-repeat;

  > h3 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: bold;
    color: #222;
    text-transform: uppercase;
  }

  > p {
    line-height: 22px;
    color: #484848;
  }
}

.subscribe-form {
  position: relative;
  margin: 20px -20px -20px;
  padding: 15px;
  background: #fafafa;
  border-top: 1px solid #ccc;
  border-radius: 0 0 6px 6px;
  @include linear-gradient(top, #fafafa, #eaeaea 50%, #e1e1e1 51%, #f2f2f2);
  @include box-shadow(inset 0 1px white);
}

.subscribe-input {
  padding: 0 16px;
  width: 100%;
  height: 35px;
  font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
  font-size: 15px;
  color: #444;
  background: #fefefe;
  background-clip: padding-box;
  border: 1px solid;
  border-color: #999 #aaa #aaa;
  border-radius: 20px;
  @include box-shadow(inset 0 1px 1px rgba(black, .2), 0 1px #f8f8f8);

  &:focus { outline: 0; }
}

.subscribe-submit {
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
  padding-left: 15px;
  height: 35px;
  width: 60px;
  background: #60e160;
  border: 1px solid;
  border-color: #4c9d50 #4c9d50 #4c9d50 #55af5a;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
  @include hide-text;
  @include linear-gradient(top, #84f087, #4cd94a);
  @include box-shadow(inset 0 1px rgba(white, .4));

  &:active {
    background: #4cdf4d;
    @include box-shadow(inset 0 0 3px rgba(black, .3));
  }

  &:before {
    content: '';
    display: block;
    margin-top: 1px;
    width: 25px;
    height: 19px;
    background: url('../img/tick.png');
  }
}

.lt-ie9 .subscribe-input { line-height: 33px; }
