/** Global variables **/
:root {
  --calOrange: #E77500;
  --calGray: rgba(20%,20%,20%,0.8);
  --calWhite: white;
  --calBlack: black;
}



/*************************
 * GRID SCHEDULE LAYOUT
 *************************/
@media screen and (min-width:700px) {
	.schedule {
    line-height: 1.2;
    border: outset;
    border-color:var(--calOrange);
    display: grid;
		grid-gap: 0.5em;
		grid-template-rows:
		    [events] auto
		    [time-0900] 0.3fr
			[time-0930] 1fr
			[time-1000] 1fr
			[time-1030] 1fr
			[time-1100] 1fr
			[time-1130] 1fr
      [time-1200] 0.6fr
      [time-1230] 1fr
			[time-1300] 1fr
			[time-1330] 1fr
      [time-1400] 1fr
			[time-1430] 1fr
      [time-1500] 1fr
			[time-1530] 1fr
      [time-1600] 1fr
			[time-1630] 0.6fr
      [time-1700] 0.6fr
			[time-1730] 0.6fr
      [time-1800] 0.6fr
			[time-1830] 0.6fr
      [time-1900] 0.6fr
			[time-1930] 1fr
      [time-2000] 1fr
      [time-2030] 0.6fr
      [time-2100] 0.6fr
      [time-2130] 0.6fr
      [time-2200] 0.6fr
      [time-2230] 0.6fr
      [time-2300] 0.6fr
      ;
                        
                                                
			/* Note 1:
			Use 24hr time for gridline names for simplicity

			Note 2: Use "auto" instead of "1fr" for a more compact schedule where height of a slot is not proportional to the session length. Implementing a "compact" shortcode attribute might make sense for this!
			Try 0.4fr for more compact equal rows. I don't quite understand how that works :)
			*/
		
		grid-template-columns:
			[times] 4em
			[m-start] 0.8fr
			[m-end t-start] 1.2fr
			[t-end w-start] 0.8fr
			[w-end th-start] 1.2fr
      [th-end f-start] 0.6fr
      [f-end sa-start] 0.6fr
			[sa-end su-start] 0.6fr
      [su-end] 0fr;
	}
}

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

.track-slot {
	display: none; /* hidden on small screens and browsers without grid support */
}

@supports( display:grid ) {
	@media screen and (min-width:700px) {
		.track-slot {
			display: block;
			padding: 10px 5px 5px;
			position: sticky;
			top: 0;
			z-index: 1000;
			background-color: rgba(255,255,255,.9);
      text-align:center;
		}
	}
}

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

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

/*************************
 * VISUAL STYLES
 *************************/

.session {
	padding: .2em;
	border-radius: 2px;
	font-size: 0.85em;
	box-shadow:
		rgba(255,255,255,.6) 1px 1px 0,
		rgba(0,0,0,.3) 4px 4px 0;
}

.session-title,
.session-time {
    display: inline;
}

.session-presenter {
    display: block;
 
}

.session-title,
.time-slot {
    margin: 0;
    font-size: 1em;
}

.session-title {
    font-weight: bold;
    color: var(--calWhite);
}

.time-slot {
    font-weight: normal;
}

.track-slot {
    font-weight: bold;
}

.session-title a {
    color: var(--calWhite);
    font-weight: bold;
    text-decoration-style: dotted;
}

.session-time a {
    color: var(--calWhite);
    text-decoration-style: dotted;
}

.session-title,
.session-title a {
    font-size:1em;
}

.session-presenter,
.session-time,
.track-slot,
.time-slot {
    font-size:.85em;
}

.session-presenter a {
    color: var(--calWhite);
    text-decoration-style: dotted;
}

.lecture,
.precept {
    background-color: var(--calBlack);
    color: var(--calWhite);
    z-index:2;
}

.officehours {
        background-color: var(--calOrange);
    	color: var(--calWhite);
        z-index:1;
}

.labtas {
	background-color: var(--calGray);
	color: var(--calWhite);
        z-index:0;
}

.verytop {
    z-index: 5;
}

.ontop {
    z-index: 4;
}

.underneath {
    z-index: 3;
}

.overlap1 {
    width: 45%;
    justify-self: start;
    z-index: 2;
}

.overlap2 {
    width: 45%;
    justify-self: end;
    z-index:2;
}

.overlap1of3 {
    width: 29%;
    justify-self: start;
    z-index: 2;
}

.overlap2of3 {
    width: 29%;
    justify-self: center;
    z-index:2;
}

.overlap3of3 {
    width: 30%;
    justify-self: end;
    z-index:3;
}

.overlap12of3 {
    width: 63.5%;
    justify-self: start;
    z-index:2;
}