.replay-button {
  position: relative;
  width: 35px;
  height: 35px;
  overflow: hidden;
}

.replay-button button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  outline: none;
  border-style: none;
  background-size: 100% 100%;
  background-color: transparent;
}

.replay-button .checking {
  background-image: url("../assets/button-images/btn_replay_pending.png");
  -webkit-animation:spin 2s linear infinite;
  cursor: default;
}

.replay-button .found {
  background-image: url("../assets/button-images/btn_replay_pending.png");
  -webkit-animation:spin 2s linear infinite;
  cursor: default;
}

.replay-button .incompatible {
  background-image: url("../assets/button-images/btn_replay_watch_disabled.png");
  cursor: default;
}

.replay-button .missing-or-expired {
  background-image: url("../assets/button-images/btn_replay_error.png");
  cursor: default;
}

.replay-button .missing-or-expired:hover {
  background-image: url("../assets/button-images/btn_replay_error_hover.png");
  cursor: default;
}

.replay-button .error {
  background-image: url("../assets/button-images/btn_replay_error.png");
  cursor: default;
}

.replay-button .error:hover {
  background-image: url("../assets/button-images/btn_replay_error_hover.png");
  cursor: default;
}

.replay-button .watch {
  background-image: url("../assets/button-images/btn_replay_watch.png");
  cursor: pointer;
}

.replay-button .watch:hover {
  background-image: url("../assets/button-images/btn_replay_watch_hover.png");
}

.replay-button .watch:active {
  background-image: url("../assets/button-images/btn_replay_watch_click.png");
}

.replay-button .watch-disabled {
  background-image: url("../assets/button-images/btn_replay_watch_disabled.png");
  cursor: default;
}

.replay-button .download {
  background-image: url("../assets/button-images/btn_replay_download.png");
  cursor: pointer;
}

.replay-button .download:hover {
  background-image: url("../assets/button-images/btn_replay_download_hover.png");
}

.replay-button .download:active {
  background-image: url("../assets/button-images/btn_replay_download_click.png");
}

.replay-button .downloading {
  background-image: url("../assets/button-images/btn_replay_pending.png");
  -webkit-animation:spin 2s linear infinite;
  cursor: default;
}

.replay-button .retry-download {
  background-image: url("../assets/button-images/btn_replay_download.png");
  cursor: pointer;
}

.replay-button .retry-download:hover {
  background-image: url("../assets/button-images/btn_replay_download_hover.png");
}

.replay-button .retry-download:active {
  background-image: url("../assets/button-images/btn_replay_download_click.png");
}

.replay-button .download-disabled {
  background-image: url("../assets/button-images/btn_replay_download_disabled.png");
  cursor: default;
}

.replay-button .unsupported {
  background-image: url("../assets/button-images/btn_replay_download_disabled.png");
  cursor: default;
}

/*  these preload classes are used by the template file to force the images to be cached. Without forcing this caching
    the button would disappear when changing to a state which has not yet been seen by the player */
div.preload-download-click {
  display: none;
  background-image: url("../assets/button-images/btn_replay_download_click.png");
}

div.preload-download-disabled {
  display: none;
  background-image: url("../assets/button-images/btn_replay_download_disabled.png");
}

div.preload-download-hover {
  display: none;
  background-image: url("../assets/button-images/btn_replay_download_hover.png");
}

div.preload-download {
  display: none;
  background-image: url("../assets/button-images/btn_replay_download.png");
}

div.preload-error-hover {
  display: none;
  background-image: url("../assets/button-images/btn_replay_error_hover.png");
}

div.preload-error {
  display: none;
  background-image: url("../assets/button-images/btn_replay_error.png");
}

div.preload-pending {
  display: none;
  background-image: url("../assets/button-images/btn_replay_pending.png");
}

div.preload-watch-click {
  display: none;
  background-image: url("../assets/button-images/btn_replay_watch_click.png");
}

div.preload-watch-disabled {
  display: none;
  background-image: url("../assets/button-images/btn_replay_watch_disabled.png");
}

div.preload-watch-hover {
  display: none;
  background-image: url("../assets/button-images/btn_replay_watch_hover.png");
}

div.preload-watch {
  display: none;
  background-image: url("../assets/button-images/btn_replay_watch.png");
}

.lol-replays-first-time-tip {
  width: 12em;
  margin: 1em;
}

@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(360deg); }
}