qlock.css

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);

#qlock * { box-sizing: border-box; }

#qlock_inner{
  font-family:'Josefin Sans', Arial, "Trebuchet MS", sans-serif;
  font-weight: normal;
  position:relative;
  display:block;
  font-size:50px;
  background: black;
  background: black -webkit-linear-gradient(-75deg, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.0) 100%);
  width:1024px;
  padding:70px 178px;
  margin:0 auto;
  transition:background-color 0.5s linear;
  text-shadow: None;
}

#letters, #letters span{
   display:inline-block;
   line-height:61px;
   text-align:center;
   transition:all 0.5s linear;
}
#letters span{
    width:60px;
}

#qlock_inner span {
   color:dimgrey;
}

#qlock_inner .light{
  font-weight: bold;
  color:#fff !important;
  text-shadow: 0px 0px 5px #fff;
}

#settings, #settings a{
  color:#555;
  font-size:13px;
  width:160px;
  margin:15px auto 10px auto; 
}
#settings a:hover{
  text-shadow: 0 0 1px #fff;
}
#settings p{
  margin:0;
  width:100%;
  text-align:center;
}

.button{
  position:relative;
  display:inline-block;
  margin:0 4px;
  background: linear-gradient(-75deg, rgba(0,0,0,0) 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.0) 100%);
  height:20px;
  opacity:0.3;
  -webkit-transition:opacity 0.5s linear;
     -moz-transition:opacity 0.5s linear;
      -ms-transition:opacity 0.5s linear;
       -o-transition:opacity 0.5s linear;
          transition:opacity 0.5s linear;
  width:20px;
}

#settings:hover .button{
    opacity:1;
}
.button:hover{
    box-shadow:0 0 3px 0 white inset;
}


.selected:before{
   	content:'✔';
    position:absolute;
    color:rgba(255,255,255,0.4);
    left:5px;
    top:3px;
}
/* Background colors for the color Setting*/
#darkblue{
    background-color:rgb(0,0,139);
}
#darkred{
    background-color:rgb(139,0,0);
}
#green{
    background-color:rgb(100,120,0);
}
#purple{
    background-color:rgb(70,40,120);
}
#orange{
    background-color:rgb(150,80,0);
}

/* dots in the edge for showing the minutes */
#e0,#e1,#e2,#e3{ 
    position:absolute;
    color:black;    
    font-size:15px;
}

#e0, #e1{
  top:15px;
}
#e2, #e1{
  right:25px;
}
#e0, #e3{
  left:25px;
}
#e2, #e3{
  bottom:20px;
}