/*
 * TODO
 * the positioning of the meta information for each day is
 * quite badly done, and mostly a hack.
 */

body {
	/* This is for the day meta information */
	padding-top: 50px;
}

.calendar {
	height: calc(90vh - 50px);

	/* This is relative for the .clock */
	position: relative;
}

.days {
	display: flex;
	width: 100%;
	height: 100%;
	padding: 0;
}

/*
 * This makes the borders of the object be part of the size.
 * Making placing it on the correct line much simpler.
 */
.clock, .event {
	position: absolute;
	box-sizing: border-box;
	margin: 0;
	display: block;
}

.clock {
	color: gray;
	border-top: 1px dotted gray;
	width: 100000; /* calc(100% + 5ex); */
}

.days > :first-child {
	margin-left: 6ex;
}

.day {
	position: relative;

	height: 100%;
	width: 100%;
	min-width: 300px;

	margin-left: 0.5em;
	border: 1px solid black;
}

.meta {
	position: absolute;
	height: 50px;
	top: -50px;

	width: 100%;

}

.meta .dayname {
	font-size: 2em;
}

.event {
	width: 100%;

	border-style: solid;
	border-width: 2px;
	font-size: 8pt;

	overflow: hidden;

	z-index: 0;
}

.event.continuing {
	border-bottom: none;
	background-image: linear-gradient(to top, #fefcea 0%,#FFF0 20%);
}

.event.continued {
	border-top: none;
	background-image: linear-gradient(to bottom, #fefcea 0%,#FFF0 20%);
}

.event.continued.continuing {
	border-top: none;
	border-top: bottom;
	background-image:
		linear-gradient(to bottom, #fefcea 0%, #FFF0   20%,
		                           #FFF0  80%, #fefcea 100%);
}

.selected {
	width: 100% !important;
	left: 0 !important;
	z-index: 1 !important;

	margin-top: 3mm;
	margin-left: 3mm;
}

#clock-0  { top: calc(100%/24 *  0); }
#clock-2  { top: calc(100%/24 *  2); }
#clock-4  { top: calc(100%/24 *  4); }
#clock-6  { top: calc(100%/24 *  6); }
#clock-8  { top: calc(100%/24 *  8); }
#clock-10 { top: calc(100%/24 * 10); }
#clock-12 { top: calc(100%/24 * 12); }
#clock-14 { top: calc(100%/24 * 14); }
#clock-16 { top: calc(100%/24 * 16); }
#clock-18 { top: calc(100%/24 * 18); }
#clock-20 { top: calc(100%/24 * 20); }
#clock-22 { top: calc(100%/24 * 22); }
#clock-24 { top: calc(100%/24 * 24); }