@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700);


.calendar{
  width:358px;
  margin:0 auto;
  margin-top:2%;
  margin-bottom:2%;
  border-radius:5px;
  font-family:'Open Sans',sans-serif;
  text-align:center;
  color:#555;
  box-shadow:0 0 50px -14px rgba(0,0,0,.8);
}

.calendar h1{
  background:#4fa3ff;
  border-radius:5px 5px 0 0;
  padding:20px;
  font-size:140%;
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#fff;
  cursor:default;
  text-shadow:0 0 10px rgba(0,0,0,.8);
}

.calendar table{
  border-top:1px solid #ddd;
  border-left:1px solid #ddd;
  border-spacing:0;
  border-radius:0 0 5px 5px;
}

.calendar td{
  width:38px;
  height:38px;
  background:#eee;
  border-right:1px solid #ddd;
  border-bottom:1px solid #ddd;
  padding:6px;
  cursor:pointer;
  transition:background .3s;
  -webkit-transition:background .3s;
}

.calendar td:hover:not(.current){
  background:#ddd;
}

.calendar .lastmonth,.calendar .nextmonth,.calendar .nextmonth ~ *{
  background:#fff;
  color:#999;
}

.calendar .current{
  background:#ee3333;
  font-weight:700;
  color:#fff;
  text-shadow:0 0 10px rgba(0,0,0,.5);
}

.calendar .hastask{
  font-weight:700;
}

.calendar tr:last-of-type td:first-of-type{border-radius:0 0 0 5px;}
.calendar tr:last-of-type td:last-of-type{border-radius:0 0 5px 0;}