/* Border box all the things by default */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  background-color: #f1f1f1;
  background-image: -webkit-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);
  background-image:    -moz-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);
  background-image:     -ms-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);
  background-image:      -o-linear-gradient(-90deg, #fefefe 0%, #f1f1f1 100%);
  background-image:         linear-gradient(-180deg, #fefefe 0%, #f1f1f1 100%);
  background-repeat: no-repeat;
}

body {
  color: #424F59;
  font-family: "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

a {
  color: #0096DD;
  cursor: pointer; /* Use the correct cursor for anchors without an href */
}

noscript {
  color: #f00;
  display: block;
  margin: 160px 0 0 0;
}

#stage {
  background: #fff url(../images/fox.png) no-repeat left 50% bottom 30px;
  background-size: 30px 31px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);;
  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.25);
  margin: 60px auto 0;
  min-height: 550px;
  opacity: 0;
  /* padding-bottom = 30px (below icon) + 31px (firefox icon) + 40px (above icon) */
  padding: 50px 25px 101px 25px;
  text-align: center;
  width: 320px;
}

header h1, header h2 {
  font-family: "Fira Sans", Helvetica, Arial, sans-serif;
  line-height: 1em;
  margin: 0;
}

header h1 {
  font-size: 24px;
  font-weight: normal;
  margin-bottom: 21px;
}

header h2 {
  font-size: 20px;
  font-weight: 200;
  margin-bottom: 40px;
}

section p {
  font-size: 18px;
}

.error {
  background: #D63920;
  color: #fff;
  margin-bottom: 5px;
  padding: 5px;
}

.error:empty {
  display: none;
}

.graphic {
  background-repeat: none;
  background-size: 150px 130px;
  height: 130px;
  margin: 0 auto;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: 150px;
}

.graphic-checkbox {
  background-image: url(../images/graphic_checkbox.png);
}

.graphic-mail {
  background-image: url(../images/graphic_mail.png);
}

.input-row {
  margin-bottom: 15px;
  width: 100%;
}

.input-row input, .input-row select {
  border: 1px solid #C0C9D0;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #454f59;
  font-size: 18px;
  height: 45px;
  padding: 0 20px;
  width: 100%;
}

.input-row input::-webkit-input-placeholder {
   color: #C0C9D0;
}

.input-row input:-moz-placeholder { /* Firefox 18- */
   color: #C0C9D0;
}

.input-row input::-moz-placeholder {  /* Firefox 19+ */
   color: #C0C9D0;
}

.input-row input:-ms-input-placeholder {
   color: #C0C9D0;
}

.input-row select {
  -webkit-appearance: none;
     -moz-appearance: none;
    -moz-user-select: none;
          appearance: none;
  background: transparent url(../images/ddarrow_inactive.png) no-repeat right 14px top 50%;
  background-size: 10px 17px;
  color: #C0C9D0;
  height: auto;
  outline: none;
  padding: 8px 20px;

  /* Some hackery for Firefox since moz-appearance: none doesn't remove the arrow */
  text-indent: 0.01px;
  text-overflow: "";

  width: 100%;
}

.input-row input:focus, .input-row select:focus {
  border-color: #6f7a85;
}

.input-row select:focus {
  background-image: url(../images/ddarrow_active.png);
  color: #454f59;
}

.input-row:last-child {
  margin-bottom: 0;
}

.input-row .input-help {
  margin-top: 10px;
  color: #C0C9D0;
}

.button-row {
  margin-bottom: 20px;
  margin-top: 45px;
}

.button-row button, .button-row a.button {
  background: #E66000;
  border: none;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  font-size: 24px;
  padding: 15px 0;
  width: 100%;
}

.button-row a.button {
  display: inline-block;
  text-decoration: none;
}

.button-row button:active,
.button-row button:hover,
.button-row button:focus {
  background: #FF9500;
}

.button-row button:disabled {
  background: #C0C9D0;
}

/* Custom rows */
.input-row-month-day select {
  width: 45%;
}

.description {
  font-size: 18px;
}

.links {
  margin-bottom: 20px;
  overflow: auto;
}

.links a {
  text-decoration: none;
}

.links a:hover {
  text-decoration: underline;
}

.links .left {
  float: left;
}

.links .right {
  float: right;
}

.privacy-links, .privacy-links a {
  color: #C0C9D0;
  margin-top: 35px;
}

.privacy-links + .button-row {
  margin-top: 20px;
}

.verification-email-message {
  word-wrap: break-word;
}

.password-row {
  position: relative;
}

.password-row > .password {
  padding-right: 75px;
}

.password-row > .password + label {
  border-left: 1px solid #C0C9D0;
  color: #C0C9D0;
  cursor: pointer;
  font-size: 16px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  /* it is very easy to accidentally select the text when clicking */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  width: 55px;
}

.password-row > .password:focus + label {
  border-color: #6F7A85;
}

.password-row > .password + label > input[type=checkbox] {
  visibility: hidden;
}

.links + .privacy-links {
  margin: 20px 0 15px 0;
}

.cannot-create-account-content {
  margin-top: 105px;
}

.spinner {
  -webkit-animation: 0.9s spin infinite linear;
  -moz-animation: 0.9s spin infinite linear;
  animation: 0.9s spin infinite linear;
  background-image: url(../images/spinnerlight.png);
  background-size: 30px 30px;
  display: block;
  margin: 130px auto 0;
  width: 30px;
  height: 30px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(365deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(365deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(365deg);
  }
}

/* TODO: These need further consideration */

.hidden {
  display: none;
}

/* Responsiveness */

/* TODO: Confirm breakpoint sizes */
@media only screen and (max-width: 500px) {
  html {
    background: #fff;
  }

  #stage {
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0 auto;
    min-height: none;
    width: 100%;
  }
}

/* Retina */

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (   -moz-min-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
  #stage {
    background-image: url(../images/fox@2x.png);
  }

  .graphic-checkbox {
    background-image: url(../images/graphic_checkbox@2x.png);
  }

  .graphic-mail {
    background-image: url(../images/graphic_mail@2x.png);
  }

  .spinner {
    background-image: url(../images/spinnerlight@2x.png);
  }

  .input-row select {
    background-image: url(../images/ddarrow_inactive@2x.png)
  }

  .input-row select:focus {
    background-image: url(../images/ddarrow_active@2x.png);
  }
}