/* 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-analog-abbr {
  color: #333;
  font-family:Helvetica,Arial,sans-serif;
  font-size:1.25em;
  position: absolute;
  left: 25%;
  top: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 3;
}

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

.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-day .timepiece-analog-abbr {
  color: #333;
}

.timepiece-analog-night .timepiece-analog-abbr {
  color: #eee;
}

.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;
}