#calendar   {
	position: absolute;
	background-color: #ccc;
	padding: 30px 20px;
	border: 1px solid #999;
	z-index: 100;
	left: 50%;
	margin: 0 0 0 -25%;
}

#calendar  table {
	margin: 0px 0 0 0;
	width: 500px;
	height: 240px;
}

#calendar .closed{
	font: bold 60px  Arial;
	position: absolute;
	right:0;
	margin: -31px -70px 0 0;
	cursor: pointer;
	padding: 0px 17px;
	background-color: #ccc;
	border-top: 1px solid #999;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
	color: #000;
	border-radius: 0 10px 10px 0;
	-webkit-border-radius: 0 10px 10px 0;
	-moz-border-radius: 0 10px 10px 0;
	-khtml-border-radius: 0 10px 10px 0;
}

#calendar .closed:hover{
	color: #fff;
}

#calendar{
	border-radius: 10px 0 10px 10px;
	-webkit-border-radius: 10px 0 10px 10px;
	-moz-border-radius: 10px 0 10px 10px;
	-khtml-border-radius: 10px 0 10px 10px;
}

#calendar  .radius {
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
}

#calendar .cal:hover, 
#calendar .cal_select,
#calendar .caltoday:hover {
	background: #91b3f2;
	cursor: pointer;
}

#calendar .cal, 
#calendar .cal_select,
#calendar .caltoday{
	border: 1px solid #ccc;
	color: #333;
	background: #F6F6F6;
	font: 'Roboto Condensed', Arial;
	font-size: 18px;
	text-align: center;
}

#calendar .caltoday{
	background: #a0dea0;
	color: #000;
}

#calendar .cal_select{
	background: #999;
	color: #444;
}

#calendar  .navi{
	font: normal 22px 'Roboto Condensed', Tahoma;
	text-align: center;
	text-transform: uppercase;
	background: #5C8EB3;
	color: #fff;
	height: 50px;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;	
}

#calendar  .navi span{
	display: inline-block;
	width: 260px;
	position: relative;
	top: -3px;
}

#calendar  .navi a{
	position: relative;
	display: inline-block;
	top: -2px;
	font: bold 30px Tahoma;
	text-decoration: none;
	color: #fff;
	padding: 5px 7px 8px 7px;
}

#calendar  .navi span:hover,
#calendar  .navi a:hover{
	color: yellow;
}

#calendar  .navi span:active,
#calendar  .navi a:active{
	color: red;
}


#calendar  .datehead{
	font: bold 18px 'Roboto Condensed', Tahoma;
	text-align: center;
}


@media (max-width:900px){
	#calendar   {
		width: 90%;
		padding: 15px 5%;
		border: 1px solid #999;
		z-index: 100;
		left: 0;
		margin: 0 0 0 0%;
	}

	#calendar  table {
		margin: 0px 0 0 0;
		width: 100%;
		min-height: 140px;
	}

	#calendar .closed{
		font: bold 30px  Arial;
		position: absolute;
		right:0;
		margin: -60px -1px 0 0;
		padding: 6px 17px;
		border-radius: 10px 10px 0px 0;
		-webkit-border-radius: 10px 10px 0px 0;
		-moz-border-radius: 10px 10px 0px 0;
		border-top: 1px solid #999;
		border-right: 1px solid #999;
		border-bottom: none;
		border-left: 1px solid #999;
	}


	#calendar .cal, 
	#calendar .cal_select,
	#calendar .caltoday{
		font-size: 12px;
	}


	#calendar  .navi{
		font: normal 15px 'Roboto Condensed', Tahoma;
		height: 44px;
	}

	#calendar  .navi span{
		width: 100px;
		overflow: hidden;
		top: 4px;
		font-size: 14px;
	}

	#calendar  .navi a{
		top: 0px;
		margin: 0 5px;
		font: bold 17px Tahoma;
	}

	#calendar  .navi a:hover{
		color: red;
	}
	#calendar  .datehead{
		font: bold 18px 'Roboto Condensed', Tahoma;
		text-align: center;
	}
	
}