* {box-sizing:border-box;}
body {font-family: Verdana,sans-serif;}
.box{
  position:relative;
  height:282px;
  width:300px;
  border: 1px solid black;
  margin:auto;
  background-image:url('http://cifri.res.in/cal.jpg');
  opacity:0.8;
 }
.calender{
  position:absolute;
  height:170px;
  width:250px;
  //border: 1px solid black;
  right:0%;
  text-align:center;
}
.Month {
  position:absolute;
	color: #000;
  top:2%;
	height: 25px;
	width: 100%;
  font-size:24px;
  font-weight:bold;
  font-family: 'Tangerine', serif;
}  

#days {
  position:absolute;
  top:16%;
}

table.days {
	color: #000;
	font-size: 13px;
	width: 100%;
}

.dates{
  position:absolute;
  top:28%;
}
table.day td, table.days td {
	width: 35px;
  height:20px;
}

table.day td {
	//background: #f4f0f7;
  font-size:13px;
	color: #000;
	height: 22px;
	box-shadow: 0 -1px 0 white;
}


table.day td:hover {
  background: #e9e9ee;
  cursor: pointer;
}

#birthday .birthday_message {
    visibility: hidden;
    width: 90px;
    background:radial-gradient(circle, rgba(137,229,137,0.5), rgba(95,220,95,0.8));
    //background:linear-gradient()
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}
#birthday:hover .birthday_message {
    visibility: visible;
}

.current-date-box{
  position:absolute;
  height:100px;
  width:100px;
  //border: 1px solid blue;
  left:5%;
  bottom:5%;
  text-align:center;
  border-radius:20%;
  //box-shadow: 5px 5px #0000bb;
}
.current-month{
  position:absolute;
  height:30px;
  left:12%;
  bottom:95%;
  font-weight:bold;
  font-size:30px;
  font-family: 'Tangerine', serif;
}
.current-date{
  font-size:40px;
  font-weight:bold;
}