/*************************
 * GRID SCHEDULE LAYOUT
 *************************/
@media screen and (min-width:700px) {
	.schedule {
		display: grid;
		grid-gap: 1em;
		grid-template-rows:
			[tracks] auto
			[time-0900] 3fr
			[time-0930] 1fr
			[time-0940] 2fr
			[time-1000] 1fr
			[time-1010] 4fr
			[time-1050] 1fr
			[time-1100] 3fr
			[time-1130] 2fr
			[time-1150] 1fr
			[time-1200] 6fr
			[time-1300] 2fr
			[time-1320] 4fr
			[time-1400] 2fr
			[time-1420] 1fr 
			[time-1430] 3fr
			[time-1500] 2fr
			[time-1520] 4fr
			[time-1600] 2fr
			[time-1620] 1fr
			[time-1630] 3fr
			[time-1700] 4fr
			[time-1740] 2fr
			[time-1800] 2fr 
			[time-1830] 2fr 
			[time-1900] 1fr /* From here we shrink time */ 
			[time-2000] 1fr
			[time-2100] 1fr
			[time-2200] 1fr
			[time-2300] 1fr;

		grid-template-columns:
			[times] 3em
			[track-1-start] 1fr
			[track-1-end track-2-start] 1fr
			[track-2-end track-3-start] 1fr
			[track-3-end];
	}
}

.time-slot {
	grid-column: times;
}

.time-slot.-grid-only {
	display: none; /* hidden on small screens and browsers without grid support */
}
 
@supports( display:grid ) {
	@media screen and (min-width:700px) {
		.time-slot.-grid-only {
			display: initial;
		}
		.track-slot,
		{
			display: block;
			padding: 10px 5px 5px;
			position: sticky;
			top: 0;
			z-index: 1000;
			background-color: rgba(255,255,255,.9);
		}
	}
}

/* Small-screen & fallback styles */
.session {
	margin-bottom:  1em;
}

@supports( display:grid ) {
	@media screen and (min-width: 700px) {
		.session {
			margin: 0;
		}	
	}
}

/*************************
 * VISUAL STYLES
 * Design-y stuff ot particularly important to the demo
 *************************/


/* This should go away, see e.g. --m-session */
.session {
	padding: .5em;
	border-radius: 2px;
	font-size: 12pt;
	box-shadow:
		rgba(255,255,255,.6) 1px 1px 0,
		rgba(0,0,0,.3) 4px 4px 0;
}

/* should change for the ABEM style names at the end, but what it dows is redefine div (uses span for no reason) */
.session-title,
.session-time,
.session-track,
.session-presenter {
	display: block;
}

/* will be removed, see --m-session-title */
.session-title,
.time-slot {
	margin: 0;
	font-size: 1em;
}

.session-title a {
	color: #000;
	text-decoration-style: dotted;
	
	&:hover {
		font-style: italic;
	}
	
	&:focus {
		outline: 2px dotted rgba(255,255,255,.8);
	}
}

.track-slot,
.time-slot {
	font-weight: bold;
	font-size:.9em;
}

.--m-slot {
	margin: 0;
	font-size: .7em;
	background: yellow;
	line-height: 1.2em;
	padding: .5em;
	border-radius: 2px;
	box-shadow:
		rgba(255,255,255,.6) 1px 1px 0,
		rgba(0,0,0,.3) 4px 4px 0;
}
.-break {
	background: rgba(252,252,252,0.8);
	border:     3px solid rgba(70,70,70,0.8);
}
.-misc, 
.-panel,
.-keynote
{
	background: rgba(235,235,255,0.8);
	border:     3px solid rgba(220,220,20,0.8);
}
.-session {
	background: rgba(255,255,235,0.8);
	border:     3px solid rgba(20,20,220,0.8);
}

.--a-slot-title
{
	font-size: 1em;
	margin: 0;
	margin-bottom: .4em;
	color: #000;
}
.-session .--a-slot-title:before
{
	content: 'Session: ';
}
.-panel .--a-slot-title:before
{
	content: 'Panel: ';
}

.--a-slot-chair
{
	margin: 0;
	color: rgba(100, 0, 0, 1);
	font-weight: bold;
}
.--a-slot-chair:lang(sv):before
{
	content: 'Ordförande: ';
}
.--a-slot-chair:lang(en):before
{
	content: 'Chair: ';
}
.--a-slot-time
{
	margin: 0;
	color: #000;
}
.--m-slot-details {
	font-size: 1em;	
}
.--m-contrib {
	margin: 0;	
	margin-top: 0.4em;	
}
.--m-contrib-title {
	margin: 0;
	font-style: italic;
}
.--m-contrib-authors {
	margin: 0;
}
.--m-contrib-authors .-presenting {
	font-weight: bold;
}

.track-all {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #ccc;
	color: #000;
	box-shadow: none;
}

.text {
	max-width: 750px;
	font-size: 18px;
	margin: 0 auto 50px;
}

.meta {
	color: #555;
	font-style: italic;
}

.meta a {
	color: #555;
}

hr {
	margin: 40px 0;
}