:root {
	--college-purple: #80379b;
/* Colours for City Attributes */
	--ca-curiosity-red: #de2524;
	--ca-optimism-orange: #f07d17;
	--ca-global-green: #008892;
	--ca-contribution-blue: #005188;
/* Colours for Universal Design for Learning */
	--udl-purple: #301c5c;
	--udl-engage-green: #078743;
	--udl-represent-purple: #6f5094;
	--udl-action-blue: #037db8;
}

html {
	font-family: Arial,"Helvetica Neue",Helvetica,"Lato Extended","Lato",sans-serif;
}


/*
* Universal Design for Learning Course
* The :has pseudo-class is used to select h1 elements, as classes can't be added to these in the RCE
*/
/* General heading styling for all pages. Note: doubling of .udl-wrapper selector is to increase specificity */
.page-title:has(~ .udl-wrapper.udl-wrapper), .udl-wrapper h2 {
	background-color: var(--udl-purple);
	color: white;
	padding: 10px;
	border-radius: 5px 20px 0px 0px;
}

.udl-wrapper h3 {
	background-color: var(--udl-purple);
	color: white;
	padding: 5px 5px 5px 10px;
	border-radius: 5px 10px 0px 0px;
}

.udl-wrapper blockquote {
	border-color: var(--udl-purple);
}

/* To give Ally icon a white background when placed next to UDL h1 elements */
.page-title:has(~ .udl-wrapper.udl-wrapper) .ally-prominent-af-download-button {
	padding: 3px;
    border-radius: 3px;
	background-color: white;
	background-repeat: no-repeat;
	background-position: center;
	margin-left: 5px;
}

/* Engagement headings colour gradient */
.page-title:has(~ .udl-wrapper.udl-engage), .udl-wrapper.udl-engage h2, .udl-wrapper.udl-engage h3  {
	background-image: linear-gradient(to right, var(--udl-purple) 60%, var(--udl-engage-green));
}

/* Representation headings colour gradient */
.page-title:has(~ .udl-wrapper.udl-represent), .udl-wrapper.udl-represent h2, .udl-wrapper.udl-represent h3 {
	background-image: linear-gradient(to right, var(--udl-purple) 60%, var(--udl-represent-purple));
}

/* Action and Expression headings colour gradient */
.page-title:has(~ .udl-wrapper.udl-action), .udl-wrapper.udl-action h2, .udl-wrapper.udl-action h3 {
	background-image: linear-gradient(to right, var(--udl-purple) 60%, var(--udl-action-blue));
}

/* To give video transcripts a distinct appearance when expanded */
.udl-wrapper summary {
	padding: 5px;
}

.udl-wrapper summary::marker {
	color: var(--udl-purple);
}

.udl-wrapper details::details-content{
	background-color: #f0f0f0;
}

.udl-wrapper details p {
	padding: 5px;
}

/* Styling for Plus-One examples details elements */
.udl-plus-examples-engage summary{
  background-image: linear-gradient(to right, var(--udl-purple) 60%, var(--udl-engage-green));
  color: white;
  border-radius: 10px;
  padding: 10px;
}

.udl-plus-examples-engage summary::marker {
	color: white;
}

.udl-plus-examples-represent summary{
  background-image: linear-gradient(to right, var(--udl-purple) 60%, var(--udl-represent-purple));
  color: white;
  border-radius: 10px;
  padding: 10px;
}

.udl-plus-examples-represent summary::marker {
	color: white;
}

.udl-plus-examples-action summary{
  background-image: linear-gradient(to right, var(--udl-purple) 60%, var(--udl-action-blue));
  color: white;
  border-radius: 10px;
  padding: 10px;
}

.udl-plus-examples-action summary::marker {
	color: white;
}


/*
* City Attributes
*/
/* To be applied to <div> wrapping home and individual attribute pages */
.ca-wrapper {
	text-align: center;
	list-style-position: inside;
}

.ca-wrapper p {
	font-size: 14pt;
	padding: 5px;
}

.ca-wrapper ol {
	display: inline-block;
	text-align: left;
}

.ca-wrapper li {
  	font-size: 14pt;
}

.ca-wrapper img {
  	padding: 30px 0px 30px 0px;
}

/* To space out navigation icons on home page */
#ca-nav img {
  	padding-left: 30px;
  	padding-right: 30px;
}

/* To style titles of various information pages */
.ca-page-head {
	background: linear-gradient(to bottom, #591a7d, var(--college-purple));
	color: white;
	padding: 40px;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.ca-page-head h2 {
	font-size: 28pt;
	font-weight: bold;
}

/* To create responsive columns within individual attribute pages */
.ca-row {
	display: flex;
}

.ca-column {
	background-color: white;
	flex: 50%;
	margin: 5px;
	padding: 10px;
	text-align: left;
	border-radius: 10px 15px;
}

.ca-column p {
	background-color: white;
	color: black;
}

.ca-column h3 {
	background-color: white;
	color: black;
	font-weight: bold;
	padding: 5px;
}

/* Column overrides for tablets and mobile devices */
@media screen and (max-width: 600px) {
	.ca-row {
    		display: inline;
	}
	.ca-page-head img {
		display: none;
	}
}

@media screen and (max-width: 1320px) {
	.ca-row {
    		flex-wrap: wrap;
	}

	.ca-column {
		flex: 30%;
	}
}

/* To style elements with attribute colours */
#ca-curios, #ca-curios * {
  	background-color: var(--ca-curiosity-red);
	color: white;
}

#ca-open, #ca-open * {
  	background-color: var(--ca-optimism-orange);
	color: white;
}

#ca-global, #ca-global * {
  	background-color: var(--ca-global-green);
	color: white;
}

#ca-cont, #ca-cont * {
  	background-color: var(--ca-contribution-blue);
	color: white;
}


/*
* Tiles formats for project-based learning
*/
#parent {
	display: grid;
	align: center;
	grid-template-columns: repeat(auto-fill, 275px);
	grid-auto-rows: minmax(auto, 205px);
	grid-column-gap: 24px;
	grid-row-gap: 24px;
	padding: 70px 50px;
}

.picingrid {
 	padding-top: 5px;
	padding-right: 3px;
	padding-bottom: 5px;
	padding-left: 0px;
	background-size: cover;
	width: 100%;
	max-height: 100%;
	opacity: 1.0;
	align: center;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 2px 3px rgba(0,0,0,0.24);
	transition: all 0.22s cubic-bezier(.25,.8,.25,1);
}

.picingrid:hover {
	opacity: 1.0;
	text-decoration:none;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	animation-name: example;
	animation-duration: 0.22s;
	border-top: 5px solid #80379b;
	box-shadow: 0 10px 24px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.tiletitle {
	box-sizing: content-box;
	width: 100%;
	padding: 4px 6px 4px 6px;
	color: white;
	background-color: #80379b;
	box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 2px 3px rgba(0,0,0,0.24);
}