.timetable {
	margin-top: 5px;
	overflow: hidden;
}

.timetable-header {
	@include td-margin(left, 12em);
}

.timetable-days,
.timetable-hours {
	height: 2em;
	margin-bottom: 2px;
	position: relative;
}

.timetable-day {
	border: solid;
	border-color: #f5f5f5;
	border-width: 3px 0 0 .5px;
	height: 2em;
	margin-bottom: 2px;
	position: absolute;
	text-align: center;
}

.timetable-hour {
	border: solid;
	border-color: #f5f5f5;
	border-width: 3px 0 0 .5px;
	height: 10000px;
	position: absolute;
	text-align: center;
}

.timetable-row {
	border-top: 2px solid #ddd;
	position: relative;
	z-index: 0;

	&:hover {
		z-index: 1;
	}
}

.timetable-location {
	@include td-pos(left, -1em);
	@include td-text-align(left);
	padding: 0 1em;
	position: absolute;
	width: 12em;
}

.timetable-row-section {
	@include td-margin(left, 12em);
	height: 45px;
	position: relative;

	&:hover {
		z-index: 1;
	}
}

.timetable-event {
	color: $black;
	margin: .1em;
	position: absolute;

	&:hover {
		z-index: 1;
	}
}

.timetable-event-title {
	background-color: $brand-success;
	font-size: 28px;
	height: 43px;
	line-height: 1.2em;
	overflow: hidden;
	padding: 4px 12px;

	&:hover {
		box-shadow: 0 5px 8px $default-shadow;
		height: 70px;
		min-width: 200px;
	}
}

.timetable-event-time {
	background-color: #eee;
	display: none;
	height: 1.4em;
	overflow: hidden;
	padding: 0 6px;
	position: absolute;
	top: -20px;
}

.timetable-event-description {
	background-color: $blue-lighter;
	display: none;
	height: 12em;
	overflow: hidden;
	padding: 4px 8px;
}

.timetable-event-title:hover ~ .timetable-event-time,
.timetable-event-title:hover ~ .timetable-event-description {
	box-shadow: 0 5px 8px $default-shadow;
	display: block;
	z-index: 1;
}

.timetable-event-title:hover ~ .timetable-event-description {
	min-width: 200px;
}
