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

* { box-sizing: border-box; }

body{
  font-family:'Josefin Sans', Arial, "Trebuchet MS", sans-serif;
  background-color:black;
  text-align: center;
}

#clock{
  position:relative;
  display:inline-block;
  color:#000;
  font-size:30px;
  background-color: rgb(0,0,139);
  background-image: -moz-linear-gradient(140deg, rgba(0,0,0,0) 50.0%,rgba(255,255,255,0.05) 50.0%,rgba(255,255,255,0.0) 100.0%);
  background-image: -webkit-linear-gradient(140deg, rgba(255,255,255,0.0), rgba(0,0,0,0) 50.0%,rgba(255,255,255,0.05) 50.0%,rgba(255,255,255,0.0) 100.0%);
  background-image: -o-linear-gradient(140deg, rgba(0,0,0,0) 50.0%,rgba(255,255,255,0.05) 50.0%,rgba(255,255,255,0.0) 100.0%);
  background-image: -ms-linear-gradient(140deg, rgba(0,0,0,0) 50.0%,rgba(255,255,255,0.05) 50.0%,rgba(255,255,255,0.0) 100.0%);
  background-image: linear-gradient(140deg, rgba(0,0,0,0) 50.0%,rgba(255,255,255,0.05) 50.0%,rgba(255,255,255,0.0) 100.0%);
/* background: -moz-linear-gradient(-45deg, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%);
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1)), color-stop(100%,rgba(27,27,27,1)));
  background-image: -webkit-linear-gradient(-45deg, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%);
  background-image: -o-linear-gradient(-45deg, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%);
  background-image: -ms-linear-gradient(-45deg, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%);
  background-image: linear-gradient(135deg, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); */
/*  width:550px; */
  padding:70px;
  margin:0 auto;
  -webkit-transition:background-color 1s linear;
     -moz-transition:background-color 1s linear;
      -ms-transition:background-color 1s linear;
       -o-transition:background-color 1s linear;
          transition:background-color 1s linear;
}

#letters, #letters span{
   display:inline-block;
   line-height:41px;
   text-align:center;
}
#letters span{
    width:32px;
}


.light{
  color:#fff !important;
  text-shadow: 0px 0px 5px #fff;
  -webkit-transition:all 0.75s linear;
     -moz-transition:all 0.75s linear;
      -ms-transition:all 0.75s linear;
       -o-transition:all 0.75s linear;
          transition:all 0.75s linear;
}


#settings, #settings a{
  color:#555;
  font-size:13px;
  width:160px;
/*  margin:0 auto 10px auto; */
  margin: 20px auto 10px;
}
#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;
}
/* 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);
}


#desc{
  margin:50px auto;
  width:420px;
  height:520px;
  color:white;
  font-size:18px;
}

/* 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;
}

/* Just some basic styling */
h1{
  display:block;
  color:white;
  width:100%;
  text-align:center;
}

a{
  color:#555;
  text-decoration:none;
}

a:hover{
  text-shadow:0 0 2px #555;
}​