.loading {
    opacity: 0;
}

.spinner {
    /* placeholder for stuff like $.find('.spinner').detach() */
}

.spinner-32px {
    background-image: url('<%= asset_path('spinner_32px.gif') %>');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
}

.spinner-h-center {
    margin-left: auto;
    margin-right: auto;
}

.spinner-v-center {
    position: relative;
    top: 45%;
}

.rotating {
    color: #f00;
    /* Chrome and Firefox, at least in Linux, render a horrible shaky
       mess -- better not to bother.

      animation-name: rotateThis;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      -moz-animation-name: rotateThis;
      -moz-animation-duration: 2s;
      -moz-animation-iteration-count: infinite;
      -moz-animation-timing-function: linear;
      -ms-animation-name: rotateThis;
      -ms-animation-duration: 2s;
      -ms-animation-iteration-count: infinite;
      -ms-animation-timing-function: linear;
      -webkit-animation-name: rotateThis;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      */
}

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

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

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

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