/*
Document   : loader
Created on : 18/06/2013, 10:03:11 AM
Author     : Alex
Description:
Purpose of the stylesheet follows.
*/
#spinner {
  position: relative;
  margin: 250px auto;
  text-align: center;
}

#count-seconds {
  font-size: 9px;
  letter-spacing: 3px;
  top: 61px;
  position: relative;
}

.loader-hidden {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.9);
  z-index: 999;
}

.loader-wrapper {
  font-size: 15px; /* 1em */
  width: 8em;
  height: 8em;
  position: relative;
  margin: 250px auto;

  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1em dashed rgba(255,0,0,0.5);
  box-shadow:
  inset 0 0 2em rgba(255,255,255,0.3),
  0 0 0 0.7em rgba(255,255,255,0.3);

  line-height: 6em;
  text-align: center;
  font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Arial","Lucida Grande",sans-serif;
  color: #444;
  text-shadow: 0 .04em rgba(255,255,255,0.9);

  -webkit-animation: steam 3.5s linear infinite;
  -moz-animation: steam 3.5s linear infinite;
  -ms-animation: steam 3.5s linear infinite;
  -o-animation: steam 3.5s linear infinite;
  animation: steam 3.5s linear infinite;
}

.loader-wrapper:after,
.loader-wrapper:before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: inset 0 0 2em rgba(255,255,255,0.3);
  border: 1em dashed rgba(255,0,0,0.2);
}

.loader-wrapper:before {
  top: 1em; bottom: 1em; right: 1em; left: 1em;
  border: 1em dashed rgba(255,0,0,0.4);
}

.loader-inner {
  width: 100%;
  height: 100%;
  -webkit-animation: steam 3.5s linear reverse infinite;
  -moz-animation: steam 3.5s linear reverse infinite;
  -ms-animation: steam 3.5s linear reverse infinite;
  -o-animation: steam 3.5s linear reverse infinite;
  animation: steam 3.5s linear reverse infinite;
}

@-webkit-keyframes steam {
  to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes steam {
  to { -moz-transform: rotate(360deg); }
}
@-ms-keyframes steam {
  to { -ms-transform: rotate(360deg); }
}
@-o-keyframes steam {
  to { -o-transform: rotate(360deg); }
}
@keyframes steam {
  to { transform: rotate(360deg); }
}