/* COMMON INCLUDE CSS FILE FOR ALL CLOCKS */

/* Main clock page container */
#clockPageC {
  position: relative;
  min-height: 600px;
  margin: 0px 20px 20px;
}


/* Container for clock image */
#clockImageC {
  overflow: hidden;
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 100; /* This needs to be there so the rounded borders show up in chrome/etc */
  border-radius: 8px;
  border: 1px solid #777;
  margin: 0px auto;
}

/* Regular view: control bar: Popout / Fullscreen buttons */
#clockControls {
  position: absolute;
  bottom: 0px;
  z-index: 20;
  width: 100%;
  height: 30px;
  color: #FFF;
  background-color: rgba(153,153,153,.7);
  display: none;
}


#clockControls .btn {
  top: 5px;
  font-size: 20px;
  position: absolute;
  cursor: pointer;
  color: #000;
}

/* Note: button placement defined in each css file */
.btnSettings {
  right: 5px;
}

.btnPopout {
  top: 7px !important;
  right: 30px;
}

.btnFull {
  top: 6px !important;
  z-index: 100;
  right: 60px;
}

.btnPause {
  left: 330px;
}

.btnPlay {
  left: 360px;

}

.btnVolumeUp {
  left: 520px;
}



/* Touchpad styles for credits container that is moved below photo */
#touchCreditsC {
  overflow: auto;
  opacity: .3;
}

#touch_recordedC {
  float: left;
}

#touch_recordedC .creditTitle {
  color: #000 !important;
  margin-top: 2px;
}

#touch_recordedC .infoBar {
  color: #000 !important;
  font-size: 11px;
}

#touch_audioC {
  float: right;
}

#touch_audioC #audioTextC {
  margin-top: 2px;
}

#touch_audioC .creditTitle {
  color: #000 !important;
}

#touch_audioC #audioTextC {
  color: #000 !important;
}

#touch_audioC #audioTextC a{
  color: #000 !important;
}


#clock_topAd {
  position: absolute; right: 20px; top: 15px;
}


@media (max-width: 1100px) {
#clock_topAd { position: relative; left: 50px; top: 5px; }

}



/* Seconds counter */
#secondsBar {
  -webkit-touch-callout: none; /* Make it so things can't be highlighted */
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  border: 1px solid #EEE;
  border-radius: 3px;
  height: 19px;
  margin: 0px auto;
  color: #AAA;
  padding-left: 6px;
  font-size: 12px;
  letter-spacing: 2px;
  width: 475px;
  text-align: center;
  background-color: #FFF;
}

.secsChar {
  position: relative;
  width: 8px;
  float: left;
}

/* Close button common to the news, nav, touchpad notifications */
.closeButton {
  position: absolute;
  right: 2px;
  top: 2px;
  cursor: pointer;
  float: left;
  font-weight: bold;
  font-size: 20px;
  color: #000;
}


/* News/social ticker*/
#clockMain_nav_news {
  z-index: 3000;
  position: absolute;
  width: 260px;
  padding: 4px;
  margin: 10px;
  top: 80px;
  right: 10px;
}

#clockMain_nav_newsTitle { position: relative; }
#clockMain_nav_newsContent {
  font-size: 12px;
  margin: 0px 15px;
}

#clockMain_nav_social {
  height: 90px;
}
.socialMin a{
  color: #eee;
  font-size: 14px;
}


/* Credit popup */
/* Video/Audio text area */
#infoBarC {
  position: absolute;
  z-index: 35;
  bottom: 0px;
  display: none;
  background-color: rgba(55,11,11,.9);
  color: #bbb;
  left: 0px !important;
  border-top-right-radius: 10px;

  padding-top: 8px;
  padding-left: 15px;
  padding-bottom: 10px;
  width: 230px !important;
  text-align: left;
  font-size: 10px;
  overflow: hidden;
  border-top: 1px solid #777;
  border-right: 1px solid #777;
}
.creditTitle {
  color: #FFF;
  font-weight: bold;
  font-size: 10px;
}

.infoBar {
  padding-left: 8px;
}
.audioText {
  padding-left: 8px;
}

#audioTextC {
  margin-top: 10px;
  display: none;
  font-size: 9px;
}


#audioTextC a {
  color: #bbb;

}

/* Fullscreen elements */
.btnAction {
  z-index: 5000;
  position: absolute;
  right: 5px;
  top: 40px;
  cursor: pointer;
}


#fsBtnFullClose {
  display: none;
  text-align: center;
  color: #bbb;
  font-size: 48px;
  font-weight: bold;
  text-shadow: 2px 2px 0px #777;

}

#fs_logo {
    border: 1px solid #444;
    border-radius: 5px;
    padding: 5px;
    background-color: #444;
  display: none;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  color: #FFFF33;
  bottom: 15px;
  right: 5px;
  position: absolute;
  z-index: 250;
  font-size: 28px;
  font-weight: bold;
  opacity: .6;
}


/* Hack to body tag make it so the scrollbars do not show up in Safari during fullscreen */
.hide-scrollbars {
  height: 100%;
  overflow: hidden;
}

/* Non Javascript Message */
#nojsBoxClock {
  border: 10px solid #000;
  border-radius: 10px;
  background-color: #FFF;
  padding: 10px;
  width: 550px;
  margin:0px auto;
}