//   Copyright (c) 2010-2011, Diaspora Inc.  This file is
//   licensed under the Affero General Public License version 3 or later.  See
//   the COPYRIGHT file.

@import "mixins";

#login {
  width: 400px;
  text: {
    align: center;
  };

  display: inline-block;

  form {
    input,
    label {
      display: inline;
    }

    label {
      top: 10px;
      left: 12px;
      text-shadow: none;
    }

    input[type='text'],
    input[type='password'] {
      -webkit-box-shadow: 0 1px 0px white, 0 -1px 0px #888888;
      -moz-box-shadow: 0 1px 0px white, 0 -1px 0px #888888;
      box-shadow: 0 1px 0px white, 0 -1px 0px #888888;
      width: 180px;
      max-width: 180px;
      font-size: 14px;
    }

    p {
      display: inline-block;
      position: relative;
      width: 200px;

      span {
        display: inline-block;
      }

      &.submit {
        width: auto;
        bottom: 15px;
        input {
          width: auto;
          position: relative;
          height: 40px;
          top: 0px;
          color: #666666;
          margin: {
            bottom: 10px;
          };
          &:hover {
            color: #444444;
          }
        }
      }
    }

    #forgot_password_link {
      text-align: left;
      position: absolute;
      left: 205px;
      top: 2em;
      width: 150px;
      color: #aaa;
    }

    #controls {
      @include transition(opacity);
      &.hidden {
        @include opacity(0);
      }
    }
  }
}

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

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

.rideSpinners
{
  -webkit-animation-name: rotate; 
  -webkit-animation-duration: 5s; 
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: rotate; 
  -moz-animation-duration: 5s; 
  -moz-animation-iteration-count: infinite;

}
