// CSS for the analogue clock version of timepiece, and maybe some optional styles for the digital.

.timepiece-analog {
  //border:solid 1em;
  //border-color:#222;
  border-radius: 50%;
  background-color: #eee;
  background-size: 88%;
  position: relative;
}

.timepiece-analog:after {
  background: #d00;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 5%;
  height: 5%;
  z-index: 10;
}

.timepiece-minutes-container, .timepiece-hours-container, .timepiece-seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.timepiece-analog-hours {
  background: #333;
  height: 25%; //
  left: 48.75%;
  position: absolute;
  top: 25%; //
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  width: 2.5%;
}

.timepiece-analog-minutes {
  background: #333;
  height: 40%; //
  left: 49%;
  position: absolute;
  top: 10%; //
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  width: 2%;
}

.timepiece-analog-seconds {
  background: #d00;
  height: 45%; //
  left: 49.5%;
  position: absolute;
  top: 14%; //
  -ms-transform-origin: 50% 80%;
  -webkit-transform-origin: 50% 80%;
  transform-origin: 50% 80%;
  width: 1%;
  z-index: 8;
}

// Animation code - unused but kept for reference:
// We should animate the clocks into correct positions when the clock refreshes on page reentry.
/*
@-webkit-keyframes rotate {
  100% {-webkit-transform: rotateZ(360deg);}
}

.timepiece-hours-container {
  -webkit-animation: rotate 43200s infinite linear;
}
.timepiece-minutes-container {
  -webkit-animation: rotate 3600s infinite steps(60);
}
.timepiece-seconds-container {
  -webkit-animation: rotate 60s infinite steps(60);
}
*/

.timepiece-analog-day{
  //border-color:#222;
  background-color:#eee;
}
.timepiece-analog-day:after, .timepiece-analog-day .timepiece-analog-seconds {
  background: #d00;
}
.timepiece-analog-day .timepiece-analog-hours, .timepiece-analog-day .timepiece-analog-minutes {
  background: #333;
}


.timepiece-analog-night{
  //border-color:#222;
  background-color:#333;
}
.timepiece-analog-night:after, .timepiece-analog-night .timepiece-analog-seconds {
  background: #d00;
}
.timepiece-analog-night .timepiece-analog-hours, .timepiece-analog-night .timepiece-analog-minutes {
  background: #eee;
}