#evencal {
	width: 900px;
	margin: 0 auto;
}

#evencal div.calendar {
	float: left;
	width: 400px;
}

#evencal div.event_detail {
	float: left;
	width: 500px;
}

select {
	min-width: 50px;
	padding: 6px 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 12px;
}

table.date {
	border: 1px solid #ccc;
	border-collapse: collapse;
	font-family: Georgia, Times, serif;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	background: #fff;
}

.date th {
	border: 1px solid #999;
	text-transform: uppercase;
	background: linear-gradient(to bottom, #9E3DFF 0%, #8020FF 100%);
	font-size: 80%;
	color: #F2FFFF;
	height: 2.5em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.date td {
	border: 1px solid #ddd;
	height: 3em;
	width: 3em;
	vertical-align: top;
	background: #fff;
}

caption {
	font-size: 200%;
	font-style: italic;
	margin-bottom: 5px;
	color: #333;
}

a {
	text-decoration: none;
}

a.prev_date,
a.next_date {
	font-size: 50%;
	color: #666;
	transition: color 0.2s ease;
}

a.prev_date:hover,
a.next_date:hover {
	color: #9E3DFF;
}

div.active_date_event,
div.date_event,
div.active_no_event,
div.no_event {
	width: inherit;
	height: inherit;
	cursor: pointer;
	transition: all 0.2s ease;
}

div.active_date_event:hover,
div.date_event:hover,
div.active_no_event:hover,
div.no_event:hover {
	background-color: #E8D5FF;
	transform: scale(1.02);
}

div.active_date_event {
	background: linear-gradient(to bottom, #FF9999 0%, #FF7575 100%);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

div.active_no_event {
	background: linear-gradient(to bottom, #99FFD9 0%, #80FFBF 100%);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

div.date_event {
	background: #fff;
}

div.no_event {
	background: #fafafa;
}

span.date {
	font-family: 'Times New Roman';
	font-size: 13px;
	font-weight: bold;
	margin-left: 3px;
	height: 1em;
	display: block;
	color: #333;
}

span.event {
	font-family: Arial;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	padding-top: 5px;
	display: block;
	color: #0066cc;
}

.weekend_sat {
	background-color: #F9F9F9;
}

.weekend_sun {
	background-color: #FFF0F0;
}

.require {
	color: #d9534f;
	font-weight: bold;
}

.error_require {
	background-color: #ffd2d4;
	border: 1px solid #d9534f;
	padding: 8px;
	border-radius: 4px;
}

.spacer {
	clear: both;
	color: #d9534f;
	text-align: center;
	font-size: 12px;
	padding: 5px;
	margin: 5px 0;
}

.add_event {
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
	font-size: 14px;
	color: #ffffff;
	padding: 8px 12px 8px 30px;
	background: #5cb85c url('images/add.png') no-repeat 8px center;
	border-radius: 4px;
	border: 1px solid #4cae4c;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
	margin: 10px 0 0 22px;
	transition: all 0.2s ease;
}

.add_event:hover {
	background-color: #449d44;
	border-color: #398439;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* from : http://www.paulund.co.uk/ */
.info1,
.info2,
.message {
	margin: 5px 20px 5px 20px;
	padding: 8px 12px 8px 50px;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	font-size: 12px;
}

h4 {
	margin: 5px 5px 5px 50px;
	padding: 0;
	font-size: 16px;
	color: #333;
}

h4 img.edit,
h4 img.delete {
	float: right;
	padding: 2px 5px 0 5px;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

h4 img.edit:hover,
h4 img.delete:hover {
	opacity: 0.7;
}

p {
	font-size: 12px;
	color: #000;
	margin: 5px 5px 5px 50px;
	line-height: 1.5;
}

.info1 {
	border: 1px solid #9d9c49;
	color: #9d9c49;
	background: #fdfdcb url('images/warning.png') no-repeat 10px center;
}

.info2 {
	border: 1px solid #0e7fad;
	color: #0e7fad;
	background: #c0e9fa url('images/info.png') no-repeat 10px center;
}

.message {
	border: 1px solid #666;
	color: #333;
	background: #efefef url('images/message.png') no-repeat 10px center;
}

/* Responsive Calendar */
@media (max-width: 768px) {
	#evencal {
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}

	#evencal div.calendar,
	#evencal div.event_detail {
		float: none;
		width: 100%;
	}

	table.date {
		font-size: 11px;
	}

	.date td {
		height: 2.5em;
		width: 2.5em;
	}

	span.date {
		font-size: 11px;
	}

	span.event {
		font-size: 18px;
	}
}