/*
	SIAT.CSS 
	v1r2 rev. Feb 2020

	Defines some specific styling for the SIAT pages.



	HANDY CLASSES & RESETS

	Allows for some additional default styling using the AEM 'add wrapper class' functionality, as well as styles some elements not otherwise styled in the SFU CLF.
*/
	.text.parbase.section p, .text.parbase.section li {
		max-width: 40em;
	}

	.text.parbase.section .more p, .text.parbase.section .more li {
		max-width: initial;	
	}

	.text.parbase.section .center-text p {
		margin: 0 auto;
	}

	.max-width-40em {
		max-width: 40em;
	}
/*
	blockquote {
		font-size: 1.25em;
		font-style: italic;
		line-height: 1.35em;
	}*/

	.pad-top {
		padding-top: 2em;
	}

	.pad-top-bottom {
		padding-top: 2em;
		padding-bottom: 4em;
	}

	.pad-top.more {
		padding-top: 5.2em;
	}


/*

	PATCHES

	These are little fixes for the existing SFU CLF styling. Mostly areas where the styling is problematic for accessibility, readability or legibility. 

	!!! THESE SHOULD BE CHECKED AFTER ANY MAJOR UPDATES TO THE CLF !!!

*/

	.custom.flex {
		/*
		-webkit-
		-moz-
		-ms-
		*/
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	ul.custom.flex {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	.flex li {
		margin: 0;
		padding: 0;
		-webkit-flex: 0 0 100%;
		-moz-flex: 0 0 100%;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
	}

	@media (min-width: 42.5em) {
		.flex li {
			-webkit-flex-basis: 50%;
			-moz-flex-basis: 50%;
			-ms-flex-basis: 50%;
			flex-basis: 50%;
			padding-right: 4rem;
		}
	}

	@media (min-width: 68.5em) {
		.flex li {
			-webkit-flex-basis: 33.333%;
			-moz-flex-basis: 33.333%;
			-ms-flex-basis: 33.333%;
			flex-basis: 33.333%;
		}
	}

	@media (min-width: 125em) {
		.flex li {
			-webkit-flex-basis: 25%;
			-moz-flex-basis: 25%;
			-ms-flex-basis: 25%;
			flex-basis: 25%;
		}
	}

	.more p {
		line-height: 1.25em !important;
	}

	.more a:hover, .more a:focus {
		text-decoration: underline !important;
	}

	img.bordered {
		border: 1px solid #CCC;
		transition: border 0.4s;
	}

	a {
		transition: opacity 0.35s;
	}

	img.bordered:hover, img.bordered:focus {
		border: 1px solid #EEE;
	}


	.overlay-bottom a,
	.overlay a {
		text-decoration: underline !important;
		display: inline !important;
	}

	.overlay-bottom a:hover, .overlay-bottom a:focus,
	.overlay a:hover, .overlay a:focus {
		text-decoration: none !important;
	}

	.red.block a {
		text-decoration: underline !important;
	}

	.red.block a:hover, .red.block a:focus {
		text-decoration: none !important;
	}

	.sfu-columns.collapse-top>div {
		padding-top: 0;
	}

	.sfu-columns.collapse-bottom>div {
		padding-bottom: 0;
	}

	.sfu-columns.extra-bottom>div {
		padding-bottom: 50px;
	}

	#main-content .profile.position h2 {
		margin-top: 0.5rem;
		padding-top: 0;
	}

	#main-content .sitemap-node h3 {
		margin-top: 2.2rem;
		margin-bottom: 0;
	}

	#main-content .job-posting-node h2 {
		margin-bottom: 0.5rem;
	}

	#main-content .job-posting-node h3 {
		font-family: "DINWeb", sans-serif;
		margin-top: 0;
	}

	#main-content .sitemap-node {
		padding-bottom: 3rem;
	}

	#main-content .sitemap-node .more {
		line-height: 1.4rem;
	}

	#main-content .more.match-h3-pad-top {
		margin-top: 6rem;
	}

	#main-content .caption {
		margin-top: -1.5em;
		color: #666;
	}

	#main-content .no-pad-top [data-col-layout] {
		padding-top: 0;
	}

	[data-row-full-width] .list {
		padding: 0 !important;
	}

	#home-page-container [data-row-full-width] {
		padding-bottom: 0;
	}

	.siat-header {
		position: relative;
	}

	.siat-header .image-wrapper {
		max-height: 65vh;
		overflow-y: hidden;
		min-height: 40rem;
	}

	.siat-header .text-wrapper {
		width: 100%;
		background: rgba(0,0,0,0.8);
		padding: 1rem 1.25rem 1.25rem;
		color: white;
	}

	@media (min-width: 70em) {
		.siat-header .text-wrapper {
			position: absolute;
			bottom: 2rem;
			max-width: 48em;
			background: rgba(0,0,0,0.6);
		}
	}

	.siat-header img {
		width: 100%;
		display: block;
	}

	#main-content .siat-header h1 {
		font-family: "Oswald", sans-serif;
		text-transform: uppercase;
		font-size: 2.75rem;
		letter-spacing: 0.02em;
	}

	#main-content .siat-header h2 {
		font-family: "Oswald", sans-serif;
		font-size: 2.75rem;
		letter-spacing: 0.02em;
		margin-top: 0;
		padding-top: 0;
	}

	#main-content .siat-header .lowercase {
		text-transform: lowercase;
	}

	#main-content .siat-header a {
		color: white;
		text-decoration: underline;
	}

	#main-content .siat-header a:hover, #main-content .siat-header a:focus {
		opacity: 0.8;
		text-decoration: none !important;
	}

	#main-content .siat-header p {
		font-family: "DINWEb", sans-serif;
		line-height: 1.2em;
		max-width: 40em;
		color: white;
	}

	#main-content .siat-header .more {
		line-height: 1em;
	}


	#main-content ul.no-bullets {
		list-style-type: none;
	}



	.siat-home-story {
		position: relative;
	}

	.siat-home-story .image-bg {
		width: 100%;
		padding-bottom: 100%;
		background-size: cover;
		background-position: right center;
	}

	.siat-home-story .text-wrapper {
		width: 100%;
		background: rgba(0,0,0,0.8);
		padding: 1rem 1.25rem 1.25rem;
		color: white;
	}

	@media (min-width: 85em) {
		.siat-home-story .text-wrapper {
			position: absolute;
			bottom: 0;
			max-width: 48em;
			background: rgba(0,0,0,0.6);
		}
	}

	
	#main-content .siat-home-story h2 {
		font-family: "Oswald", sans-serif;
		font-size: 2rem;
		letter-spacing: 0.02em;
		margin-top: 0;
		padding-top: 0;
	}

	#main-content .siat-home-story a {
		color: white;
		text-decoration: underline;
	}

	#main-content .siat-home-story a:hover, #main-content .siat-home-story a:focus {
		opacity: 0.8;
		text-decoration: none !important;
	}

	#main-content .siat-home-story p {
		font-family: "DINWEb", sans-serif;
		line-height: 1.2em;
		max-width: 40em;
		color: white;
	}

	#main-content .siat-home-story .more {
		line-height: 1em;
	}


	#main-content .siat-story {
		padding-bottom: 6rem;
	}

	#main-content .siat-story .image-bg {
		width: 100%;
		padding-bottom: 100%;
		background-size: cover;
		background-position: right center;
	}

	.highlight {
		background-color: #ff03;
		padding: 0 1.5rem 0.1rem;
	}

	ul.custom.flex.pad-top {
		padding-top: 2em;
	}

	.more {
		line-height: 1em;
	}


/* 
	COURSE LISTING ADJUSTED STYLING

	Improving on the existing course listing styles to make it more legible at desktop and mobile sizing.
*/

	/* @not-mobile */
	@media (min-width: 768px) {

		/* Set a transition for row backgrounds */
		.course-list table tr {
			transition: background-color 0.4s, transform 0.4s;
		}

		/* Set background for even row entries */
		.course-list table tr:nth-of-type(odd) {
			background-color: #EEE;
		}

		/* Clarify the headings */
		.course-list table tr:first-of-type {
			font-weight: bold;
			font-size: 1.25em;
			background-color: #DDD;
		}

		.course-list table tr:first-of-type th {
			padding: 0.75em;
		}

		/* Add a light hover effect for rows */
		.course-list table tr:not(:first-of-type):hover {
			background-color: #ffffcf;
			transform: scale(1.02);
		}

		/* Set some cell-specific values */
		.course-list .table tr td, .course-list table th {
			vertical-align: top;
			padding: 0.75em;
		}

		.course-list table tr:nth-of-type(odd) td:not(:last-of-type) {
			border-right: 1px solid #FFF;
		}

		.course-list table tr:nth-of-type(even) td:not(:last-of-type) {
			border-right: 1px solid #DDD;
		}


	}

	.profile-item {
		padding-bottom: 6rem;
	}

	#main-content .profile-item-info-name {
		margin: 0.25rem 0 0;
		padding: 0;
	}

	#main-content .profile-item-info-position {
		margin: 0.2rem 0 1.25rem;
	}

	
	#main-content .profile-item-image img[src=""] {
		display: none;
	}


	.profile-item-image img {
		width: 100%;
	}

	.profile-item-info-contact {
		list-style-type: none;
	}

	#main-content .bottom-link {
		background: #f3f3f3;
		padding-bottom: 0;
		margin-bottom: -2rem;
	}