.calendarContainer {
	overflow-x:auto;
}
table.calendar {
	width:100%;
	max-width:1000px;
	background-color:var(--primary-bg-colour);
	border-radius: 5px;
	border-spacing: 0 2px;
	padding: 2px 4px;
}
html.gds table.calendar td, 
html.gds table.calendar th {
	padding:0;
}
tr {
	height:52px;
}
td {
	vertical-align:top;
	padding: 2px 0;
}
td.month1 {
	background-color:var(--calendar-month-1-bg-colour);
}
td.month2 {
	background-color:var(--calendar-month-2-bg-colour);
}
td.today {
	background-color:var(--calendar-today-bg-colour);
	font-weight: bold;
	box-shadow: 0px 0px 7px 3px var(--calendar-today-border-colour) inset;
}
div.date {
	text-align:right;
	font-size:80%;
	padding-right:3px;
}
div.newYear {
	text-align:center;
	font-size: 38px;
	font-weight: bold;
}
div.event {
	color:white;
	margin-top:1px;
	border-top:1px solid;
	border-bottom:1px solid;
	text-align:center;
}

div.day { /*one-day events*/
	border:1px solid;
	margin-left:8px;
	margin-right:8px;
	-moz-border-radius: 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
	-o-border-radius: 6px;
	border-radius: 6px;
}

div.start {
	border-left:1px solid;
	margin-left:8px;
	padding-right:8px;
	-moz-border-radius: 6px 0 0 6px;
	-khtml-border-radius: 6px 0 0 6px;
	-webkit-border-radius: 6px 0 0 6px;
	-o-border-radius: 6px 0 0 6px;
	border-radius: 6px 0 0 6px;
}

div.end {
	border-right:1px solid;
	margin-right:8px;
	padding-left:8px;
	-moz-border-radius: 0 6px 6px 0;
	-khtml-border-radius: 0 6px 6px 0;
	-webkit-border-radius: 0 6px 6px 0;
	-o-border-radius: 0 6px 6px 0;
	border-radius: 0 6px 6px 0;
}

div.mid {
	margin-left:0;
	margin-right:0;
	padding-left:8px;
	padding-right:9px;
}

#eventDetails div.details {
	margin: 0 auto;
    max-width: min(80%, 600px);
    text-align: center;
	background: var(--secondary-bg-colour);
	padding:1em;
}
#eventDetails span.close {
	float:right;
	padding-right:2px;
	cursor:pointer;
}
#modalEventTitle {
	padding: 1em;
    font-size: 32px;
    font-weight: bold;
    color: var(--text-colour-highlight);
}
#modalEventDate {
    padding: 0 0 1em;
}
#modalEventAddress {
    padding: 0 0 1em;
    font-size: 24px;
}
@media screen and (max-width: 666px) {
	.event {
		font-size: 15px;
	}
}
@media screen and (max-width: 666px) {
	.event {
		font-size: 15px;
		padding-top: 2px;
		padding-bottom: 2px;
	}
	div.newYear {
		font-size: 28px;
	}
}