clock.css

@-webkit-keyframes blink {
  0%     { opacity: 0 } 50% { opacity: 0 }
  50.01% { opacity: 1 } 100% { opacity: 1 }
}

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: -moz-box;
  display: -webkit-box;
  display: box;

  -moz-box-orient : horizontal;
  -moz-box-pack : center;
  -moz-box-align : center;
  
  -webkit-box-orient : horizontal;
  -webkit-box-pack : center;
  -webkit-box-align : center;
  
  box-orient : horizontal;
  box-pack : center;
  box-align : center;
    
  background-color: #000;
  
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,.4)));
  background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0, .4));
  
  -moz-transition-property: background-color;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition: background-color 1s linear; 
  -o-transition: background-color 1s linear; 
  transition: background-color 1s linear; 
  
  font-family: Arial, sans-serif;
  font-size: 12px;
}

time {
  display: block;
  color: rgba(255,255,255,1); 
  /*text-shadow: 0 0 15px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.3);*/
  text-shadow: 0px 1px 0px rgba(255,255,255,0.3), 0px -1px 1px rgba(0,0,0,0.3), 0 0 15px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.3);
  text-align: center;
  font-family: "Permanent Marker", Arial, sans-serif;
}

time .digit, time .colon {
  display: block;
  position: relative;
  float: left;
  font-size: 180px;
  width: 100px;
  width: .6em;
}

time .colon {
  /*margin-top: -18px;*/
  font-size: 160px;
  text-decoration: blink;
  -webkit-animation: blink 0.5s infinite linear alternate;
}

nav {
  position: absolute;
  right: 15px;
  top: 10px;
  
  opacity: 0;
  
  margin: 0;
  padding: 0;
  line-height: 100%;
    
  -moz-transition-property: opacity 500ms linear;
  -webkit-transition: opacity 500ms linear; 
  -o-transition: opacity 500ms linear; 
  transition: opacity 500ms linear;
  
  overflow: hidden;
}
body:hover nav {
  opacity: 0.3;
}
body:hover nav:hover {
  opacity: 0.8;
}
nav h1 {
  background: url(glyphicons__008_cogwheel.png) no-repeat 50% 50%;
  height: 30px;
  width: 30px;
  text-indent: -999em;
  overflow: hidden;
  float: right;
  cursor: pointer;
}
nav ul {
  display: none;
  opacity: 0;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  list-style-type: none;
  margin: 10px 40px 0 0;
  padding: 4px 0;
  background: #fff;
  height: 0;
  width: 160px;
  -moz-transition-property: height 200ms linear;
  -webkit-transition: height 200ms linear; 
  -o-transition: height 200ms linear; 
  transition: height 200ms linear;
  
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  box-shadow: 0 1px 3px rgba(0,0,0, .4);;
}
nav:hover ul {
  display: block;
  opacity: 1;
  height: auto;
  overflow: hidden;
/*  height: 650px;*/
}
nav li {
  cursor: pointer;
  font-weight: bold;
  color: #0078ff;
  text-decoration: none;
  display: block;
  padding:  8px 20px;
  margin: 0;
}
nav li.selected {
  background: #222;
  color: #fff !important;
  text-shadow: 0 1px 1px rgba(0,0,0,1);
}
nav li:hover {
  background: #0078ff;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0, .1);
}

.ribbon {
  background-color: rgba(0,0,0,0.5);
  overflow: hidden;
  /* top left corner */
  position: absolute;
  left: -4.5em;
  top: 3.5em;
  /* 45 deg ccw rotation */
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  /* shadow */
  -moz-box-shadow: 0 0 1em #888;
  -webkit-box-shadow: 0 0 1em #888;
  opacity: 0.2;
  -moz-transition-property: opacity 200ms linear;
  -webkit-transition: opacity 200ms linear; 
  -o-transition: opacity 200ms linear; 
  transition: opacity 200ms linear;
}
.ribbon a {
  border: 1px solid #fff;
  color: #fff;
  display: block;
  font: bold 14px 'Helvetiva Neue', Helvetica, Arial, sans-serif;
  margin: 0.05em 0 0.075em 0;
  padding: 0.5em 3.5em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 0.5em #444;
}
body:hover .ribbon {
  opacity: 1;
}