styles.css

/* Agenda26 (AgendaStart26, AgendaItem26, AgendaEnd26): responsive conference agenda.
 * The layout is the Bootstrap grid (row, col-sm-*, col-md-*), which Bootstrap 3 to 5 share;
 * everything else is scoped to .agenda26. Colours follow the SMWCon agenda of earlier years,
 * as flat colours without gradients. Three blues only, one hue at three lightness levels,
 * hsl( 204, 49%, 17% / 68% / 88% ): #163041 for text and links, #85b5d5 for lines, the day header
 * and the start-time pill, #d1e3ef for session headings, the duration pill, badges
 * and initials.
 * From 992px up, where Bootstrap 3 and 5 both show the columns side by side, the time column gets
 * a fixed width here and the talk column the rest: Bootstrap 3 has no col-*-auto for this. */
.agenda26 {
	margin: 1.5em 0 2.5em;
	font-size: 14px;
	line-height: 1.4;
}
.agenda26 .row {
	margin-left: 0;
	margin-right: 0;
}
.agenda26-day {
	padding: 10px 15px;
	border: 1px solid #85b5d5;
	border-radius: 4px 4px 0 0;
	background-color: #85b5d5;
	color: #163041;
}
.agenda26-day-title {
	font-size: 22px;
	font-weight: bold;
	line-height: 1.3;
}
.agenda26-day-subtitle {
	font-size: 15px;
}
.agenda26-list {
	overflow: hidden;
	border: 1px solid #85b5d5;
	border-top: 0;
	border-radius: 0 0 4px 4px;
	background-color: #fff;
}
.agenda26-session {
	padding: 10px 15px 8px;
	border-top: 1px dotted #85b5d5;
	background-color: #d1e3ef;
	color: #163041;
	font-size: 18px;
}
.agenda26-row {
	padding-top: 10px;
	padding-bottom: 10px;
}
.agenda26-row + .agenda26-row {
	border-top: 1px solid #ddd;
}
.agenda26-when {
	padding-right: 12px;
	padding-bottom: 6px;
	padding-left: 12px;
}
.agenda26-time,
.agenda26-duration {
	display: inline-block;
	min-width: 74px;
	margin: 0 4px 4px 0;
	padding: 3px 6px;
	border-radius: 3px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
.agenda26-time {
	background-color: #85b5d5;
	color: #163041;
}
.agenda26-duration {
	background-color: #d1e3ef;
	color: #163041;
}
.agenda26-what {
	display: flex;
	align-items: flex-start;
}
.agenda26-pic {
	flex: 0 0 auto;
	margin-right: 14px;
}
.agenda26-pic img,
.agenda26-initials {
	display: block;
	width: 74px;
	height: 74px;
	border-radius: 3px;
	box-sizing: border-box;
}
.agenda26-initials {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	padding: 4px;
	background-color: #d1e3ef;
	color: #163041;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.15;
	text-align: center;
}
.agenda26-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.agenda26-pic .agenda26-icon img {
	display: block;
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
}
.agenda26-body {
	flex: 1 1 auto;
	min-width: 0;
}
.agenda26-title {
	color: #163041;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.3;
}
.agenda26 a,
.agenda26 a:visited {
	color: #163041;
	text-decoration: none;
}
.agenda26-title a:hover,
.agenda26-more a:hover {
	text-decoration: underline;
}
.agenda26-badge {
	display: inline-block;
	min-width: 74px;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 10px;
	background-color: #d1e3ef;
	color: #163041;
	font-size: 11px;
	font-weight: normal;
	text-align: center;
	vertical-align: 2px;
}
.agenda26-speakers {
	margin-top: 3px;
}
.agenda26-speaker {
	color: #555;
	font-weight: bold;
}
.agenda26-job {
	margin-left: 4px;
	color: #7a7a7a;
	font-size: 13px;
}
.agenda26-text {
	margin-top: 4px;
	color: #666;
	font-size: 13px;
	line-height: 1.5;
}
/* a description's lists and paragraphs run on as one teaser, as in typed-in rows */
.agenda26-text p,
.agenda26-text ul,
.agenda26-text ol,
.agenda26-text li,
.agenda26-text dl,
.agenda26-text dd {
	display: inline;
	margin: 0;
	padding: 0;
}
.agenda26-text li:not(:last-child)::after {
	content: ";";
}
.agenda26-type-break {
	background-color: #f5f6f7;
}
.agenda26-type-keynote {
	background-color: #fcf3c4;
}
.agenda26-type-keynote .agenda26-badge {
	background-color: #f79621;
	color: #fff;
}
.agenda26-nobs {
	margin-bottom: 1em;
	padding: 8px 12px;
	border: 1px solid #d33;
	background-color: #fee7e6;
}
@media ( min-width: 992px ) {
	.agenda26-when {
		flex: 0 0 auto;
		width: 98px;
		text-align: right;
	}
	.agenda26-what {
		flex: 1 1 0%;
		width: auto;
		float: none;
		overflow: hidden;
	}
	.agenda26-time,
	.agenda26-duration {
		display: block;
		min-width: 0;
		margin: 0 0 6px;
	}
}
@media ( max-width: 575px ) {
	.agenda26-day-title {
		font-size: 18px;
	}
}