@keyframes shake {
	0%   { transform: translateX(0) }
	25%  { transform: translateX(15px) }
	50%  { transform: translateX(-15px) }
	75%  { transform: translateX(15px) }
	100% { transform: translateX(0) }
}

.calendar {
	position     : relative;
	width        : 1000px;
	margin       : auto;
	text-align   : center;

}

.shaking {
		animation : shake 0.25s;
		animation-iteration-count: 1;
}

.calendar a {
	width        : 100px;
}

.calendar .calendar_canvas{
	position     : relative;
	display      : grid;

}

.calendar .calendar_year {
	top          : 0px;
	left         : 0px;
	width        : 1000px;
	margin       : auto;
	text-align   : center;
	grid-row     : 2;
	grid-column  : 1;
}

.calendar .year_heading {
	font-size      : 25px;
	grid-row       : 1;
	grid-column    : 1;
}

.calendar .year_heading .calendar_arrow {
	height         : 50px;
	vertical-align : middle;
	cursor         : pointer;
}

.calendar .year_heading a {
	margin         : auto;
	height         : 50px;
	font-weight    : bold;
	vertical-align : middle;
	margin-left    : 15px;
	margin-right   : 15px;
}

.calendar .month {
	display      : inline-block;
	margin       : 20px;
}


.calendar .month_heading {
	font-size    : 22px;
	font-weight  : bold;
}


.calendar .month .calendar_day {
	width          : 30px;
	height         : 30px;
	text-align     : center;
	vertical-align : bottom;
	font-weight    : bold;;
}

.calendar .month .calendar_date {
	width      : 30px;
	height     : 30px;
	border     : 1px solid black;
	cursor     : pointer;
	text-align : center;
}

.calendar .month .calendar_date:hover {
	outline      : 2px solid black;
	font-weight  : bold;;
}

.calendar .month .dead_cell {
	width      : 30px;
	height     : 30px;
}