@-webkit-keyframes pulsate {
  from {
    -webkit-box-shadow: 0 0 100px rgba(0, 0, 0, 0.2); }

  to {
    -webkit-box-shadow: 0 0 120px rgba(0, 0, 0, 0.4); } }

@-webkit-keyframes header-pulsate {
  from {
    background: rgba(255, 255, 255, 0); }

  to {
    background: rgba(255, 255, 255, 0.3); } }

* {
  margin: 0;
  padding: 0; }

html {
  height: 100%;
  background: #eeeeee;
  background: -moz-linear-gradient(135deg, #aaaaaa, #eeeeee);
  background: -webkit-gradient(linear, right bottom, left top, from(#aaaaaa), to(#eeeeee));
  background-attachment: fixed; }

#login-container, #logistra-container {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
  border: 1px outset #a8a8a8;
  width: 50%;
  margin: 5em auto 0 auto;
  text-align: center;
  font-family: Verdana, Arial, sans-serif;
  -webkit-transition-property: -webkit-box-shadow, width;
  -webkit-transition-duration: 0.2s, 0.5s; }

#login-container {
  color: #333333;
  background: #dddddd;
  background: -moz-linear-gradient(bottom, #bbbbbb, #dddddd);
  background: -webkit-gradient(linear, left bottom, left top, from(#bbbbbb), to(#dddddd)); }
  #login-container h1 {
    background: #cccccc;
    background: -moz-linear-gradient(bottom, #bbbbbb, #cccccc);
    background: -webkit-gradient(linear, left bottom, left top, from(#bbbbbb), to(#cccccc));
    border-bottom: 1px solid #999999;
    font-size: 180%; }
    #login-container h1 a {
      display: block;
      padding: 0.25em;
      padding-top: 0;
      color: #333333;
      text-decoration: none;
      text-shadow: 1px 1px rgba(255, 255, 255, 0.3); }
      #login-container h1 a:hover, #login-container h1 a:focus {
        text-decoration: underline; }
      #login-container h1 a.logistra {
        font-size: 40%;
        padding-bottom: 0;
        padding-top: 1em; }
  #login-container.loading {
    width: 25%;
    -webkit-animation: pulsate 0.8s alternate infinite;
    -webkit-animation-delay: 0.2s;
    -webkit-animation-timing-function: linear; }
    #login-container.loading h1 a {
      -webkit-animation: header-pulsate 0.8s alternate infinite;
      -webkit-animation-delay: 0.2s;
      -webkit-animation-timing-function: linear; }
    #login-container.loading #content {
      height: 0;
      opacity: 0; }
  #login-container #content {
    position: relative;
    overflow: hidden;
    -webkit-transition-property: height, opacity;
    -webkit-transition-duration: 0.5s, 0.2s; }
    #login-container #content #messages {
      font-size: 90%; }
      #login-container #content #messages p {
        width: 70%;
        margin: 0.5em auto 0 auto;
        padding: 0.25em;
        color: white;
        -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); }
        #login-container #content #messages p.error {
          background: #990000;
          background: -moz-linear-gradient(bottom, #993333, #cc3333);
          background: -webkit-gradient(linear, left bottom, left top, from(#993333), to(#cc3333));
          border: 1px outset #990000; }
        #login-container #content #messages p.notice {
          background: #009900;
          background: -moz-linear-gradient(bottom, #339933, #33cc33);
          background: -webkit-gradient(linear, left bottom, left top, from(#339933), to(#33cc33));
          border: 1px outset #009900; }
    #login-container #content p {
      margin: 1em 0; }
    #login-container #content form {
      margin: 2em; }
      #login-container #content form .errorExplanation h2, #login-container #content form .errorExplanation p {
        display: none; }
      #login-container #content form .errorExplanation ul {
        list-style-type: none; }
        #login-container #content form .errorExplanation ul li {
          padding: 0.2em;
          background: #990000;
          color: white; }
      #login-container #content form p {
        margin: 1em 0; }
        #login-container #content form p label {
          display: block;
          font-size: 80%;
          color: #666666;
          margin-bottom: 0.25em; }
        #login-container #content form p input {
          display: block;
          width: 15em;
          margin: auto;
          border: 1px solid #666666;
          background: #eeeeee;
          background: -moz-linear-gradient(top, #eeeeee, white);
          background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(white));
          color: #666666;
          padding: 0.25em;
          text-align: center;
          outline: none;
          -moz-transition-property: border-color background -moz-box-shadow;
          -moz-transition-duration: 0.3s;
          -webkit-transition-property: border-color background -moz-box-shadow;
          -webkit-transition-duration: 0.3s; }
          #login-container #content form p input:focus {
            border-color: #333333;
            color: black;
            -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
            -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); }
        #login-container #content form p.button input {
          width: 10em;
          border: 1px outset #333333;
          background: #333333;
          background: -moz-linear-gradient(bottom, #444444, #666666);
          background: -webkit-gradient(linear, left bottom, left top, from(#444444), to(#666666));
          color: #dddddd;
          font-weight: bold;
          -moz-transition: -moz-box-shadow 0.5s;
          -webkit-transition: -webkit-box-shadow 0.5s; }
          #login-container #content form p.button input:hover, #login-container #content form p.button input:focus {
            -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
            -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.5); }
          #login-container #content form p.button input:active {
            border-style: inset; }
    #login-container #content .locales {
      list-style-type: none;
      position: absolute;
      bottom: 0.25em;
      right: 0.25em;
      font-size: 70%;
      overflow: hidden; }
      #login-container #content .locales li {
        float: left;
        margin-left: 0.5em; }
        #login-container #content .locales li a {
          display: block;
          color: #666666;
          text-decoration: none;
          outline: none;
          padding: 0.2em 0.4em; }
          #login-container #content .locales li a:focus, #login-container #content .locales li a:hover {
            text-decoration: underline; }
        #login-container #content .locales li.current a {
          background: #cccccc;
          background: rgba(0, 0, 0, 0.05); }
          #login-container #content .locales li.current a:focus, #login-container #content .locales li.current a:hover {
            text-decoration: none; }

#logistra-container {
  padding: 1em;
  font-size: 80%;
  box-sizing: border-box;
  color: #222222;
  background: #eeeeee;
  background: -moz-linear-gradient(bottom, #ddddcc, #ffffee);
  background: -webkit-gradient(linear, left bottom, left top, from(#ddddcc), to(#ffffee)); }
  #logistra-container p {
    margin: 2em 0; }
    #logistra-container p a {
      display: inline-block;
      padding: 0.5em;
      color: white;
      background: #333333;
      text-decoration: none; }