/*
 * This is the stylesheet for the majority of the programme pages on the site, that are
 * part of a chosen course. These pages feature menus for navigation at their top.
 * (The homepage and sitemaps pages use a different stylesheet.)
 */


body {
	padding: 0px;  margin: 0px;
	font-family: var(--fontList);  font-size: var(--fontMasterSize);
	background-color: var(--themeColour0);
	color: var(--ljmuDarkColour);
}

h1 {
	display: Block;
	font-family: var(--fontList);  font-weight: Normal;  font-size: 1.8rem;  line-height: 1.5em;
	margin: 1.5rem 0px 1rem 0px;  padding: 0.5rem 1rem;
	color: var(--themeColour0);  background-color: var(--themeColour1);
	border-radius: var(--themeBorderRadius);
	text-align: Left;
}
/* These are all headers with dark backgrounds and light text. */
h2 {
	display: Block;
	font-family: var(--fontList); 
	color: var(--themeColour0);
	background-color: var(--themeColour1);
	font-size: 1.2rem;
	padding: 0.5rem 1rem;
	margin: 1.5rem 0px 1rem 0px;
	border-radius: var(--themeBorderRadius);
}
h2:first-child /*, h3:first-child, h4:first-child, h5:first-child*/ {
	margin-top: 0.5rem;
}
h3 {
	color: var(--themeColour1);
	font-size: 1.2rem;
}

/*
 * Banners are the large image-background areas at the top of the index pages, with
 * slanted blue translucent boxed containing a heaader (similar to the home page.) 
 * Examples being: ug-primary/general-information.php and section-a/index.php
 */

div.banner h1 {
	display: block;
	min-width: 50%;
	max-width: 450px;
	background: var(--themeColour2Transparent);
	padding: 30px 0;
	color: var(--themeColour0);
	text-align: right;
	
	border-radius: 0px 3rem 3rem 0px;
}
div.banner h1 span {
	display: inline-block;
	width: auto;
	text-align: left;
	font-size: 1.2em;
	font-weight: normal;
	padding: 0 30px 0;
	max-width: 450px;
}

h1.welcome {
	font-family: Tahu;  font-size: 60pt;  font-weight: Unset;  line-height: 1em;
	color: var(--themeColour2Mid);  background-color: Unset;  	border-radius: Unset;
	text-align: Left;
	margin: Unset;  padding: Unset;  margin-bottom: 0px;
}
img.welcome {  /* Alternative Welcome text that uses a SVG to avoid W3C accessibility contrast issues. */
	display: Block; font-size: 60pt; min-height: 1em;  margin-bottom: 0.2em;
}

/* Headers with cursive handwritten text, with fancy background colour. */
h1.cursive , h2.cursive {
	font-family: Tahu;  font-weight: Unset;  line-height: 1em;
	color: var(--themeColour1);  background-color: Unset;  	border-radius: Unset;
	text-align: Left;
	margin: Unset;  margin-top: 1.5rem;  margin-bottom: 1rem;  
	padding: Unset;  padding-left: 1rem;  padding-right: 1rem;
	/*background: linear-gradient( 180deg  ,  
		Transparent 0% ,
		var(--themeColour2High) calc( 100% - 2px ) ,
		var(--themeColour1Mid) 2px 
	);*/
	/*background: linear-gradient( 180deg  ,  
		Transparent 0% ,
		var(--themeColour2High) 30% ,
		var(--themeColour2High) 70% ,
		Transparent 100% 
	);*/
}
h1.cursive { font-size: 60pt; }
h2.cursive { font-size: 30pt; }


/*
 * Links, paras, and other standard elements.
 */

a {
	color: var(--themeColour1);
	text-decoration: None;
}
a:hover, a:active, a:focus { 
	color: var(--themeColour1);
	text-decoration: Underline;
}

button {
	display: Inline-Block;
	color: var(--buttonTextColour);  background-color: var(--buttonBackgroundColour);
	padding: 0.5rem 1rem;  margin: 1rem 0px; 
	font-weight: Normal;  font-size: 1.1rem;
	
	border-width: var(--buttonBorderWidth);
	border-style: Solid;
	border-color: var(--buttonBorderColour);
	border-radius: var(--themeBorderRadius);
}
button:active , 
button:focus ,
button:hover {
	background-color: var(--buttonBackgroundColourHover);
	text-decoration: None;
	border-color: var(--buttonBorderColourHover);
}

/* Footer navigation -- new style that replaces a.button above. */
nav.footerNavigation {
	display: Flex;  flex-direction: Row;
	flex-wrap: NoWrap;  justify-content: Flex-End;  align-items: Center;  gap: 0.5rem 5rem;
	margin: 2rem 2rem 1.5rem 2rem;
}
div.buttonRow {
	display: Flex;  flex-direction: Row;
	flex-wrap: Wrap;  justify-content: Space-Around; 
	align-items: Stretch;  gap: 2rem;
	
	max-width: 100rem;  margin-left: Auto;  margin-right: Auto;
}
/*
 * FIXME: we need to remove, if possible, the qualifier selectors like nav.footerNavigation or 
 *   div.rowButton -- are there any a.button elements that these rules don't apply to?
 */
/* Next page navigation button at foot of each page. */
nav.footerNavigation a.button ,
div.buttonRow a.button , 
main.ect.ectMenu div.backNavigation a.button {
	display: Inline-Block;
	color: var(--buttonTextColour);  background-color: var(--buttonBackgroundColour);
	padding: 0.5rem 1rem;
	font-weight: Normal;  font-size: 1.1rem;
	
	border-width: var(--buttonBorderWidth);
	border-style: Solid;
	border-color: var(--buttonBorderColour);
	border-radius: var(--themeBorderRadius);
}
nav.footerNavigation a.button:active , 
nav.footerNavigation a.button:focus ,
nav.footerNavigation a.button:hover ,
div.buttonRow a.button:hover , 
div.buttonRow a.button:active , 
div.buttonRow a.button:focus ,
main.ect.ectMenu div.backNavigation a.button:hover , 
main.ect.ectMenu div.backNavigation a.button:active , 
main.ect.ectMenu div.backNavigation a.button:focus {
	background-color: var(--buttonBackgroundColourHover);
	text-decoration: None;
	border-color: var(--buttonBorderColourHover);
}
nav.footerNavigation a.button {
	white-space: NoWrap;
}
nav.footerNavigation a.button::after {
	font-family: FontAwesome;  font-size: Inherit;
	content: '\00a0\00a0\f054';
	color: var(--buttonTextColour);
}
/* When <a> wrapped in <span> to apply restrictions, we need the <a> to stretch vertically
   to fill the <span>, in the same way the <span> is stretched to fill the <div.buttonRow> . */
div.buttonRow > span {
	display: flex;  align-items: Stretch;
}
div.buttonRow a.button {
	text-align: Center;
	min-width: 100px;  max-width: 200px;
}
div.buttonRow a.button span.icon ,
div.buttonRow a.button span.icon {
	display: Block;  margin-bottom: 0.5rem;
	font-family: FontAwesome;  font-size: Inherit;
	font-size: 300%;
}
div.buttonRow a.button span.icon.sitemap::before { content: "\f279"; }
div.buttonRow a.button span.icon.downloads::before { content: "\f019"; }
div.buttonRow a.button span.icon.keyinfo::before { content: "\f059"; }
div.buttonRow a.button span.icon.mentor::before { content: "\f1d7"; }  /* f2BE f19D */
div.buttonRow a.button span.icon.youtube::before { content: "\f167"; }
div.buttonRow a.button span.icon.abyasa::before { content: "\f19D"; }
div.buttonRow a.button span.icon.survey::before { content: "\f040"; }
div.buttonRow a.button.horizontal {
	display: Flex;  flex-direction: Row;  flex-wrap: NoWrap;  justify-content: Space-Between;
	align-items: Center;
}
div.buttonRow a.button.horizontal span.icon {
	display: Inline;  margin-right: 0.5rem;  margin-bottom: 0px;
	font-size: 200%;
}
div.buttonRow a.button.horizontal img {
	height: 5em;
	margin-right: 1rem;
}
div.buttonRow.tableOfContents {
	margin-top: 1.5rem;  margin-bottom: 1.5rem;
}
div.buttonRow.tableOfContents a.button {
	flex-grow: 1;  flex-basis: 0;
	width: 10em;
}
div.buttonRow.tableOfContents.largeButtons  a.button {  /* Prototype */
	min-width: 250px;  max-width: 250px;
}
div.buttonRow.tableOfContents.largeButtons  a.button b {  /* Prototype */
	display: Block;
}
div.buttonRow.tableOfContents  a.button span.section {
	display: Block;
	font-size: 80%;  font-weight: Bold;
	border-bottom: 1px Solid var(--themeColour1Mid);
	margin-bottom: 0.25rem;
}
div.buttonRow.tableOfContents.scrollNavigation {
	background-color: Red;
}
header.wide div.tableOfContentsContainer {  /* If inside a <header>, add a margin like <main> . */
	margin-left: 2rem;  margin-right: 2rem;
}
header div.tableOfContentsContainer.pinline {
	margin-bottom: 1rem;  /*padding-bottom: 1rem;*/
	border-bottom: 1px Solid var(--themeColour0High);
}

/* Concertina to hide button row. */
header div.tableOfContentsConcertina { }
header div.tableOfContentsConcertina div.tableOfContentsContainer {
	display: None;
}
header div.tableOfContentsConcertinaButton {
	background-color: Initial;
	font-size: 12pt;
	color: var(--buttonTextColour);
	text-align: Center;
	padding-top: 0.5rem;  padding-bottom: 0.5rem;
}
header div.tableOfContentsConcertinaButton:hover ,
header div.tableOfContentsConcertinaButton:focus ,
header div.tableOfContentsConcertinaButton:active {
	background-color: var(--buttonBackgroundColourHover);
	background: linear-gradient(90deg  ,  
		Transparent 0% ,
		var(--buttonBackgroundColourHover) 5rem ,
		var(--buttonBackgroundColourHover) calc( 100% - 5rem ) ,
		Transparent 100% );
	color: var(--buttonTextSubColourHover);
	cursor: Hand;
}
header div.tableOfContentsConcertinaButton::before {
	font-family: FontAwesome,Roboto;
	content: "\f0c9\0020\0020Menu";
}

/* Scrolling button row navigation. */
header div.horizontalScroll {
	--buttonSizeHalf: 1.5em;
	--buttonSize: 3em;
	padding-left: var(--buttonSizeHalf);  padding-right: var(--buttonSizeHalf);
}
header div.horizontalScroll.dragging {
	user-select: None;  /* Block content highlight when dragging. */
}
header div.horizontalScroll div.buttonRow.tableOfContents {
	flex-wrap: NoWrap;
	overflow-x: Hidden;
}
header div.horizontalScroll.showScroll div.buttonRow.tableOfContents {  /* When scrolling, add grab to white space in button row. */
	cursor: Grab;
}
header div.horizontalScroll div.scrollUI {
	display: Flex;  position: Absolute;
	align-items: Center;
	pointer-events: None;  /* Mouse events are passed through to underlying button row. */
}
header div.horizontalScroll:not(.showScroll) div.scrollUI {
	display: None;  /* Hide the scroll UI when showScroll is missing. */
}
header div.horizontalScroll div.scrollUI .scrollUIButton {
	position: Absolute;
	text-align: Center;
	width: var(--buttonSize);  height: var(--buttonSize);  line-height: var(--buttonSize);
	border-radius: 50%;
	background-color: rgba(153,153,153 , 0.25);
	color: White;
	text-shadow: 0px 0px 2px Black;
	cursor: Pointer;  pointer-events: Auto;  /* Capture pointer event, as button. */
}
header div.horizontalScroll div.scrollUI .scrollUIButton:hover {
	background-color: var(--buttonBackgroundColourHover); /* rgba(44,213,196 , 0.5); */
	color: var(--buttonTextColourHover);
	text-shadow: Unset;
}
header div.horizontalScroll div.scrollUI .scrollUIButton:selected {
	background-color: var(--buttonBackgroundColourSelected);
	color: var(--buttonTextColourHover);
	text-shadow: Unset;
}
header div.horizontalScroll div.scrollUI .scrollUIButton.scrollUIButtonLeft {
	left: calc( 0px - var(--buttonSizeHalf) );
}
header div.horizontalScroll div.scrollUI .scrollUIButton.scrollUIButtonLeft::before {
	font-family: FontAwesome;
	content: '\f053';
}
header div.horizontalScroll div.scrollUI .scrollUIButton.scrollUIButtonRight {
	right: calc( 0px - var(--buttonSizeHalf) );
}
header div.horizontalScroll div.scrollUI .scrollUIButton.scrollUIButtonRight::before {
	font-family: FontAwesome;
	content: '\f054';
}

/* Related links. */
nav.footerNavigation .relatedLinks {
	--relatedWidth: 1px;
	--relatedBackgroundColour: var(--themeColour2High);
	--relatedBorderColour: var(--themeColour1);
	
	display: Flex;  flex-direction: Row;  flex-wrap: Wrap;  justify-content: Flex-Start;
	align-items: Center;  gap: 0.5rem 1rem;  	flex-grow: 1;
	
	padding: 0.5rem 1rem;
	
	border: var(--relatedWidth) Solid var(--relatedBorderColour);
	border-radius: var(--themeBorderRadius);
	background-color: var(--relatedBackgroundColour);
	
	font-size: 11pt;
}
nav.footerNavigation .relatedLinks::before {
	color: var(--themeColour1);
	content: 'Related: ';
	font-weight: Bold;
}
nav.footerNavigation .relatedLinks a {
	color: var(--buttonTextColour);  /*background-color: var(--buttonBackgroundColour);
	border-width: 0px 0px 0px var(--selectedBorderWidth);
	border-style: Solid;  border-color: var(--buttonBorderColour);
	padding: 0.25em 1em;  border-radius: 0.25em;*/
}
nav.footerNavigation .relatedLinks a:hover {
	/*color: var(--buttonTextColourHover);  background-color: var(--buttonBackgroundColourHover);
	border-color: var(--themeColour1);*/
	text-decoration: Underline;
}
nav.footerNavigation .relatedLinks a:active {
	/*color: var(--buttonTextColourHover);  background-color: var(--buttonBackgroundColourSelected);
	border-color: var(--themeColour1);*/
	text-decoration: Underline;
}
nav.footerNavigation .relatedLinks a::before {
	color: var(--themeColour2Mid);
	font-family: FontAwesome;  font-size: Inherit;
	content: "\f02e\0020";
}
nav.footerNavigation .relatedLinks a.dlPDF::before { content: "\f1c1\0020";}
nav.footerNavigation .relatedLinks a.dlWord::before { content: "\f1c2\0020";}
nav.footerNavigation .relatedLinks a.dlXLS::before { content: "\f1c3\0020";}
nav.footerNavigation .relatedLinks a.dlExternalLink::before { content: "\f0c1\0020";}
/* ECT */
main.ect.ectMenu div.buttonRow ,
main.ect.ectMenu div.backNavigation {
	margin-top: 1.5rem;  margin-bottom: 1rem;
}
main.ect.ectMenu div.buttonRow a.button {
	max-width: calc( 50% - 4rem );  /* Undo button row's restriction. */
	flex-grow: 1;
	padding-top: 2em;  padding-bottom: 2em;
	font-size: 150%;
	/* Centre text in button. */
	display: Flex;  justify-content: Center;  align-items: Center;
}
main.ect.ectMenu div.backNavigation a.button::before {
    font-family: FontAwesome;
    font-size: Inherit;
    content: '\f053\00a0\00a0';
    color: var(--buttonTextColour);
}
main.ect.ectMenu div.buttonRow a.button.icon::after {
    font-family: FontAwesome;  font-size: Inherit;
	color: var(--themeColour0Mid2);
	vertical-align: Super;  font-size: 75%;
}
main.ect.ectMenu div.buttonRow a.button.icon:hover::after ,
main.ect.ectMenu div.buttonRow a.button.icon:focus::after ,
main.ect.ectMenu div.buttonRow a.button.icon:active::after {
    color: var(--themeColour2);
}
main.ect.ectMenu div.buttonRow a.button.icon.padlock::after { content: '\00a0\00a0\f023'; }
main.ect.ectMenu div.buttonRow a.button.icon.email::after { content: '\00a0\00a0\f0e0'; }


/* Main paragraph. */
p {
	display: Block;
	color: var(--themeColour0Mid); 
	padding: 0px 0px;
	margin: 0px 0px 1rem 0px;
	line-height: 1.5em;
}
p:last-child {  /* No trailing gap at bottom of last <p>. */
	margin-bottom: 0px;
}
div.restrict p:last-child {  /* However, if <p> in surrounding <div> used to restrict, allow natural margin.*/
	margin-bottom: Revert;
}

main {
	display: Block;
	clear: Both;
	margin-top: 1rem;
	margin-bottom: 1rem;
}
main > * {
	margin-left: var(--mainLRMargin);  margin-right: var(--mainLRMargin);
}
main > .footerNavigation {
	margin-left: Revert;  margin-right: Revert;
}


/*main a {
	background-color: var(--buttonBackgroundColour);
}
main a:hover, main a:active, main a:focus {
	background-color: var(--buttonBackgroundColourHover);
}*/


/* Used to debug spacing of main page */
/*main {
	background-color: Red;
}*/

ul , ol {
	color: var(--themeColour0Mid);
}

ul li , ol li {
	padding: 0.25em 0px;
}

ul li::marker , ol li::marker {
	color: var(--themeColour1);
}

hr.divider {
	display: Block; 
	margin-top: 0.5rem;  margin-bottom: 0.5rem;
	border-top: 1px Solid var(--themeColour1);
	min-height: 0px;
}

/* Replaces hr above with better use of . */
div.clearBoth {
	display: Block;  clear: Both;  
	background-color: Transparent;
	min-height: 0px;  border: None;  margin: 0px;  padding: 0px;
}

span.note {
	font-size: 0.8em;
	font-style: italic;
	display: block;
	padding: 8px 0;
}

span.symbol {
	font-family: FontAwesome;
}

/* Adding this hides the section contents and puts a Coming Soon message. */
div.comingSoon::before {
	content: 'Coming soon.';
	color: var(--themeColour2);
}
div.comingSoon * {
	display: None;
}

/*div.container-header {
	background-color: var(--ljmuDarkColour);
	padding: 0px 0px 0px 0px;
	
	border-bottom: 5px Solid var(--ljmuMidColour);
}
div.container-header img {
	width: 60%;  height: Auto;  max-width: 210px;
	margin: 15px;
	float: Left;
}*/

div.container-header {
	background-color: var(--ljmuDarkColour);
	padding: 0px 0px 0px 0px;
	
	border-bottom: 5px Solid var(--ljmuMidColour);

	display: Flex;  flex-direction: Row;  flex-wrap: NoWrap;
	justify-content: Space-Between;  align-items: Center;  column-gap: 1em;
}
div.container-header img {
	width: 60%;  height: Auto;  max-width: 210px;
	margin: 1em;
	float: Left;
}
div.container-header .expander {
	flex-grow: 1;
}

input:focus , textarea:focus , select:focus , h2:focus , div:focus {
	outline: None;
}

/* ---------------------------------------------------------------------------- 
 * Search
 *   index.php
 *   includes/templates/templates.php
 * ---------------------------------------------------------------------------- */

div.container-search {
	float: Right;
}
/*div.container-search form {
}*/
div.container-search form fieldset {
	display: Flex;  flex-direction: Row;  align-items: Stretch;
	
	border: None;
	padding: 0px;  margin: 0px;
	background-color: var(--themeColour0);
}
div.container-search form fieldset input[type=text] {
	background-color: var(--themeColour0);
	border: none;
	line-height: 2.4em;
	margin: 0px;
	padding: 0px 0.5rem;
	float: Left;
	border: None;  outline: None;
	
	flex-grow: 1;
}
div.container-search form fieldset input[type=text]::placeholder {
	font-family: FontAwesome;
	color: var(--ljmuMidColour);
}
div.container-search form fieldset button {
	background-color: var(--themeColour0);
	margin: 0px;  padding-left: 1rem;  padding-right: 1rem;  border: 0px;
	color: var(--buttonTextColour);  background-color: var(--buttonBackgroundColour);
}
div.container-search form fieldset button:hover {
	color: var(--buttonTextColourHover);  background-color: var(--buttonBackgroundColourHover);
}


/* ---------------------------------------------------------------------------- 
 * Breadcrumb and banners
 * ---------------------------------------------------------------------------- */

/* Used inside shared/navigation/*.php */
div#navigationMainMenu nav {
	display: block;
	width: auto;
	padding: 0;
	margin: 0;
	background-color: var(--themeColour0);
	font-family: var(--fontList);
	position: Relative; 
	z-index:2;
}

div.breadcrumb {
	--breadcrumbWidth: 1px;
	--breadcrumbBackgroundColour: var(--themeColour2High);
	--breadcrumbBorderColour: var(--themeColour1);
	
	--breadcrumbTextColourRoot: var(--themeColour1);       /* Home. */
	--breadcrumbTextColourPath: var(--themeColour1);       /* Links leaving up to current page. */
	--breadcrumbTextColourCurrent: var(--themeColour1);    /* Current page. */
	
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	text-align: center;
	background-color: var(--themeColour0High);
	background: linear-gradient(0deg  ,  
		var(--breadcrumbBorderColour) 0% ,
		var(--breadcrumbBackgroundColour) var(--breadcrumbWidth) ,
		var(--breadcrumbBackgroundColour) calc( 100% - var(--breadcrumbWidth) ) ,
		var(--breadcrumbBorderColour) 100% );
	position: Relative; 
	z-index:1;
	/*box-shadow: 0px 3px 5px #ddd; */
}
div.breadcrumb ol {
	text-align: left;
	padding: 0.25rem var(--headerLRPadding);
	margin: 0px;
}
div.breadcrumb ol li {
	text-align: left;
	padding: 0.125rem 0px;
	margin: 0px;
	display: inline-block;
	font-size: 0.85rem;
	color: var(--breadcrumbTextColourCurrent);
	font-weight: Bold;
}
div.breadcrumb ol li:first-of-type a {
	color: var(--breadcrumbTextColourRoot);
	font-weight: Normal;
}
div.breadcrumb ol li a {
	text-align: center;
	padding: 0px;
	margin: 0;
	text-decoration: None;
	color: var(--breadcrumbTextColourPath);
	font-weight: Normal;
}
div.breadcrumb ol li a:focus ,
div.breadcrumb ol li a:hover {
	text-decoration: Underline;
}
div.breadcrumb ol li:first-of-type a::before ,  /* First <li>, prefix icon to link... */
div.breadcrumb ol li:only-child::before {       /* ...or if it's the only child, prefix non-link. */
	font-family: FontAwesome;  font-size: Inherit;
	content: "\f015\0020\0020";
}

div.banner {
	display: block;
	width: 100%;
	min-height: 200px;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	padding: 3% 0 1%;
	
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
}

/* Used on index.php pages of each programme (the page with the quick ref and Abyasa buttons. */
div.banner.home { background-image: url('../css/images/bg-programme-001.jpg'); }
body.pgcePrimary-3-7 div.banner.home { background-image: url('../css/images/bg-programme-001.jpg'); }
body.pgcePrimary-5-11 div.banner.home { background-image: url('../css/images/bg-programme-001.jpg'); }
body.pgceSecondary div.banner.home { background-image: url('../css/images/bg-programme-002.jpg'); }
body.schoolDirect div.banner.home { background-image: url('../css/images/bg-programme-002.jpg'); }
body.ugPrimary div.banner.home { background-image: url('../css/images/bg-programme-003.jpg'); }
body.ugSecondary div.banner.home { background-image: url('../css/images/bg-programme-002.jpg'); }

/* Used on section root pages. */
div.banner.a { background-image: url('../css/images/bg-section-a.jpg'); }
div.banner.b { background-image: url('../css/images/bg-section-b.jpg'); }
div.banner.c { background-image: url('../css/images/bg-section-c.jpg'); }
div.banner.d { background-image: url('../css/images/bg-section-d.jpg'); }
div.banner.e { background-image: url('../css/images/bg-section-e.jpg'); }
div.banner.f { background-image: url('../css/images/bg-section-f.jpg'); }
div.banner.g { background-image: url('../css/images/bg-section-g.jpg'); }


/* ---------------------------------------------------------------------------- 
 * Main content, inside <main>.
 * ---------------------------------------------------------------------------- */

/* 
 * Start of page header content. 
 */
 
/* .container-generalLinks is the section at very top of page, between LJMU logo and search box. */
div.container-generalLinks {
	display: Inline-Block; 
	white-space: NoWrap;  width: Auto;  float: Left;
	/*padding: 1.5rem 0px 0px 0px;  margin-left: 10px;*/
}
div.container-generalLinks ol {
	display: Block;  width: Auto; 
	list-style-type: None; 
	padding: 0px;  margin: 0px;
}
div.container-generalLinks ol li {
	display: Block;  width: Auto; 
	list-style-type: None; 
	padding: 0.25em 0.5em 0.25em 0.5em;  margin: 0px; 
	float: Left; 
	font-size: 1rem;
}
div.container-generalLinks ol li a {
	color: var(--ljmuMidColour);
}
/*div.container-generalLinks li a::before {
	font-family: FontAwesome;
	color: var(--ljmuWhiteColour);	
	padding: 0.5em;  margin-right: 0.25em;  background-color: var(--ljmuMidColour);  border-radius: 50%;  / * Circular icon. * /

	/ * display: Block;  text-align: center;  font-size: 200%;  margin-bottom: 0.125em; */ /* Icon on top. * /
}
div.container-generalLinks li.homepage a::before { content: "\f015"; }
div.container-generalLinks li.sitemap a::before { content: "\f279"; }*/

/* Certain parts of the site don't have sitemaps. */
body.EarlyCareers div.container-generalLinks ol li.sitemap ,
body.Misc div.container-generalLinks ol li.sitemap {
	display: None;
}

div.container-search {
	display: Block;  float: Right; 
	padding: 0px 0px 0px 0px; /*margin: 20px 0px 12px 0px;*/  margin: 1em;
}
div.container-search input { 
	display: Inline;  float: Left; 
}
div.container-search input#searchSubmit {
	margin: 2px 0px 0px 8px;
}
/* 
 * End of page header content. 
 */


/*
 * Styles for use inside wrapper pages.
 *  <body>
 *    <div.container-body>
 *      <div.container-header>
 *        page header goes here.
 *      <div.container.content>
 *        ../shared/navigation/course.php goes here, then breadcrumb, then 
 *        ../shared/section-X/X.php
 *      <div.container.footer> 
 *        Footer navigation and copyright footer
 */
div.container-body {
	display: Block;  width: Auto; 
	padding: 0px;  margin: 0px Auto; 
	text-align: Left;
}
div.container-content { 
	display: Block;  width: Auto; 
	padding: 0px;  margin: 0px Auto; 
	text-align: Left; 
	background-color: var(--themeColour0);
}
div.container-footer { 
	display: Block;  clear: Both;  width: Auto; 
	background-color: var(--ljmuDarkColour);
	text-align: Center;
	
	border-top: 5px Solid var(--ljmuMidColour);
}
div.container-footer ul {
	display: Flex;  flex-direction: Row;  flex-wrap: NoWrap;  justify-content: Center;  align-items: Center;  gap: 0px 2rem; 
	padding: 0.5rem 0px;  margin: 0px; 
	background-color: var(--ljmuDarkColour);  color: var(--ljmuMidColour); 
	font-size: 1rem; 
}
div.container-footer ul li { 
	display: Inline-Block; 
	padding: 0px 0px;  margin: 0px;
}
div.container-footer ul li a {
	font-size: 1em; 
	display: Block; 
	color: var(--ljmuMidColour);
	padding: 0px;  margin: 0px;
}
div.container-footer span { 
	display: Block; 
	text-align: Center; 
	color: var(--themeColour0); 
	font-size: 0.85em; 
	padding: 0.25rem 0px 0.5rem 0px;
}

/*
 * .primary            => PGCE Primary 3-7 , PGCE Primary 5-11 , UG Primary
 * .secondary          => PGCE Secondary , UG Secondary
 * .pgcePrimary        => PGCE Primary 3-7 , PGCE Primage 5-11
 * .pgceEarlyYears     => PGCE Primary 3-7 (?)
 *
 * .pgcePrimary-3-7    => PGCE Primary 3-7 
 * .pgcePrimary-5-11   => PGCE Primary 5-11 
 * .pgceSecondary      => PGCE Secondary
 * .ugPrimary          => UG Primary
 * .ugSecondary        => UG Secondary
 * .schoolDirect       => PGCE School Direct
 */


/* ---------------------------------------------------------------------------- 
 * Show or display content on page depending upon programme.  To use: apply 'restrict'
 * class to hide, then a programme-specific class to undo the restrict.
 * ---------------------------------------------------------------------------- */

/*
 * Restrict content.
 * FIXME: Remove !important from this and Revert styles below.
 * FIXME: This should be changed to ... :not(.pgcePrimary-3-7) .restrict.pgcePrimary-3-7,
 * then all the other Revert rules can be discarded. So rather than hide elements
 * and then selectively show them, just selectively hide them to begin with.
 */
span.restrict ,
div.restrict, 
li.restrict {
	display: None !important;
}

/*
 * Programme specific classes to unrestrict: block level elements.
 * FIXME : assigning block to this is wrong; <li> elements are not
 * naturally set to "block" like <div>s are, but "list-item". A
 * better value would be "revert" not "block".
 * FIXME : (2) problem is, "revert" takes the element's display back to 
 * its default state, which doesn't work for elements where display has
 * been changed, like in .buttonRow structures. The whole way restrict
 * works should perhaps be changed so to used display:None/Revert.
 */
body.pgcePrimary-3-7 span.restrict.pgcePrimary-3-7 , 
body.pgcePrimary-3-7 div.restrict.pgcePrimary-3-7 , 
body.pgcePrimary-3-7 li.restrict.pgcePrimary-3-7 {
	display: Revert !important;
}
body.pgcePrimary-5-11 span.restrict.pgcePrimary-5-11 , 
body.pgcePrimary-5-11 div.restrict.pgcePrimary-5-11 , 
body.pgcePrimary-5-11 li.restrict.pgcePrimary-5-11 {
	display: Revert !important;
}
body.pgceSecondary span.restrict.pgceSecondary , 
body.pgceSecondary div.restrict.pgceSecondary , 
body.pgceSecondary li.restrict.pgceSecondary {
	display: Revert !important;
}
body.ugPrimary span.restrict.ugPrimary , 
body.ugPrimary div.restrict.ugPrimary , 
body.ugPrimary li.restrict.ugPrimary {
	display: Revert !important;
}
body.ugSecondary span.restrict.ugSecondary , 
body.ugSecondary div.restrict.ugSecondary , 
body.ugSecondary li.restrict.ugSecondary {
	display: Revert !important;
}
body.schoolDirect span.restrict.schoolDirect, 
body.schoolDirect div.restrict.schoolDirect, 
body.schoolDirect li.restrict.schoolDirect {
	display: Revert !important;
}

/*
 * Programme specific classes to unrestrict: inline level elements. 
 * Enables switching on specific words and phrases. This is to deal with the
 * whole "School Direct" vs. "School Led" terminology that differs between
 * programmes.
 * FIXME: made reduntant by rules above, which now have rules for span.restrict .
 */
span.restrict { display: None; }
body.pgcePrimary-3-7  span.restrict.pgcePrimary-3-7  { display: Inline; }
body.pgcePrimary-5-11 span.restrict.pgcePrimary-5-11 { display: Inline; }
body.pgceSecondary    span.restrict.pgceSecondary    { display: Inline; }
body.ugPrimary        span.restrict.ugPrimary        { display: Inline; }
body.ugSecondary      span.restrict.ugSecondary      { display: Inline; }
body.schoolDirect     span.restrict.schoolDirect     { display: Inline; }

/*
 * FIXME: Revert doesn't work when the element has been styled to have a 'display'
 * which is not its natural display state.
 */
body.pgcePrimary-3-7 div.buttonRow .restrict.pgcePrimary-3-7 { display: Flex !important; }
body.pgcePrimary-5-11 div.buttonRow .restrict.pgcePrimary-5-11 { display: Flex !important; }
body.pgceSecondary div.buttonRow .restrict.pgceSecondary { display: Flex !important; }
body.ugPrimary div.buttonRow .restrict.ugPrimary { display: Flex !important; }
body.ugSecondary div.buttonRow .restrict.ugSecondary { display: Flex !important; }
body.schoolDirect div.buttonRow .restrict.schoolDirect { display: Flex !important; }

/* ---------------------------------------------------------------------------- 
 * Audience.  TODO: we never ended up using this, so it should be removed at some point.
 * ---------------------------------------------------------------------------- */

span.audienceStudent ,
span.audienceMentor {
	font-family: FontAwesome;
	color: var(--themeColour2);
}
span.audienceStudent::after {
	content: "\f007";
}
span.audienceMentor::after {
	content: "\f2be";
}
p span.audienceStudent ,
p span.audienceMentor {
	float: Left;
	line-height: 1em;  font-size: calc( 1.5em * 2 );  /* Line height x2. */
	margin-right: 0.125em;  margin-bottom: 0px;
}
li span.audienceStudent ,
li span.audienceMentor {
	float: Right;
	line-height: 1em;  font-size: 1.5em;
	margin-left: 0.125em;  margin-top: 0px;
}

/* ---------------------------------------------------------------------------- 
 * Tabs
 * ---------------------------------------------------------------------------- */

/* 
 * Start tabbed divs.
 */

.tabbedSection .tabs {
	--tabBorderSize: var(--themeBorderThickness);
	--tabSelectedSize: var(--selectedBorderWidth);
	
	--textColorSelected: var(--themeColour1);              /* Text on currently selected tab. */
	--textColorSelectedHover: var(--themeColour1);         /* Text on currently selected tab, hovered. */
	--textColorUnselected: var(--themeColour1Mid);         /* Text on unselected tab. */
	--textColorUnselectedHover: var(--themeColour1);       /* Text on unselected tab, hovered. */
	
	--borderColorSelected: var(--themeColour1);            /* Border of currently selected tab. */
	--borderColorSelectedHover: var(--themeColour1);       /* Border of currently selected tab, hovered. */
	--borderColorUnselected: var(--themeColour1Mid);       /* Border of unselected tab. */
	--borderColorUnselectedHover: var(--themeColour1);     /* Border of unselected tab, hovered. */
	--borderColorHighlight: var(--themeColour1);           /* Bar at top of current selected tab. */
	--borderColorHighlightHover: var(--themeColour1Mid);   /* Bar at top of current selected tab, hovered. */
	--borderColorBackground: var(--themeColour0);          /* Bottom border on currently selected tab (matches page colour.) */
	
	--backgroundColorSelected: linear-gradient(0deg  ,  var(--themeColour0) 0%  ,  var(--themeColour2High) 35%);
	--backgroundColorSelectedHover: linear-gradient(0deg  ,  var(--themeColour0) 0%  ,  var(--themeColour2High) 15%);
	--backgroundColorUnselected: linear-gradient(0deg  ,  var(--themeColour1High) 0%  ,  var(--themeColour0) 20%);
	--backgroundColorUnselectedHover: var(--themeColour2High);
	
	display: Flex;  flex-direction: Row;  flex-wrap: NoWrap;
	justify-content: Flex-Start;  align-items: Stretch;  align-content: Flex-End;
	
	/* Background of tab bar itself. */
	background: var(--themeColour1High);
	background: linear-gradient(0deg  ,  
		var(--borderColorSelected) var(--tabBorderSize) ,  
		var(--themeColour0High) var(--tabBorderSize)  ,  
		rgba(255,255,255,0) 50%);
	
	margin: 0px 0px 0px 0px;
	padding-top: 0.5rem;  padding-left: 1.5rem;
	
	overflow-x: Auto;  overflow-y: Hidden;
}
.tabbedSection .tabs li {
	display: Inline-Block;
	margin-right: 0.5rem; 
	padding: 0px;
	list-style: None;
}
.tabbedSection .tabs li a { 
	display: Block; 
	font-family: var(--fontList);  font-size: 1rem;  font-weight: Bold;
	padding: 0.5rem 1rem;
	text-decoration: None; 
	outline: None;
	box-sizing: border-box;
	
	border-width: var(--tabSelectedSize) var(--tabBorderSize) var(--tabBorderSize) var(--tabBorderSize);
	border-style: Solid;
	
	height: 100%;  /* Flex's align-items is Stretch, so fill vertical space. */
	color: var(--textColorSelected);
	background: var(--backgroundColorSelected); 
	border-color: var(--borderColorHighlight) var(--borderColorSelected) 
		var(--borderColorBackground) var(--borderColorSelected);
	border-top-left-radius: var(--themeBorderRadius);
	border-top-right-radius: var(--themeBorderRadius);
}
.tabbedSection .tabs li a:hover { 
	color: var(--textColorSelectedHover);
	background: var(--backgroundColorSelectedHover);
	border-color: var(--borderColorSelectedHover) var(--borderColorSelectedHover) 
		var(--borderColorBackground) var(--borderColorSelectedHover);
}
.tabbedSection .tabs li a.inactive {
	/* Gap at the top equivalent to the extra thickness of the top border the active tab (eg.
	the thickness of the active tab, --tabSelectedSize, minus the thickness of an inactive
	tab, --tabBorderSize .) */
	height: calc( 100% - var(--tabSelectedSize) + var(--tabBorderSize) );
	margin-top: calc( var(--tabSelectedSize) - var(--tabBorderSize) );
	
	color: var(--textColorUnselected);
	background: var(--backgroundColorUnselected);
	border-top-width: var(--tabBorderSize);
	border-color: var(--borderColorUnselected) var(--borderColorUnselected) 
		var(--borderColorSelected) var(--borderColorUnselected);
}
.tabbedSection .tabs li a.inactive:hover {
	color: var(--textColorUnselectedHover);
	background: var(--backgroundColorUnselectedHover);
	border-top-width: var(--tabBorderSize);
	border-color: var(--borderColorUnselectedHover) var(--borderColorUnselectedHover) 
		var(--borderColorSelected) var(--borderColorUnselectedHover);
}

.tabbedSection .container {
	margin-top: 0.25rem;  margin-bottom: 0.25rem;
	padding-top: 0.5rem;  padding-bottom: 0.5rem;
	padding-left: 1rem;  padding-right: 1rem;
	border-right: 2px solid var(--themeColour0High);  border-left: 2px solid var(--themeColour0High);
}

/* 
 * End tabbed divs.
 */

/* ---------------------------------------------------------------------------- 
 * Tables
 * ---------------------------------------------------------------------------- */

/*
 * Start table layout.
 */
table.strippedRows {
	margin-top: 0.5rem;  margin-bottom: 0.5rem;
	width: 100%;
	border-collapse: Collapse;
	text-align: Left;
	border: var(--themeBorderThickness) Solid var(--themeColour0Mid3);
}
main > table.strippedRows { /* Top level only */
	/*margin-left: var(--mainLRMargin);
	margin-right: var(--mainLRMargin);*/
	width: calc(100% - var(--mainLRMargin) - var(--mainLRMargin));
}
table.strippedRows tr {
	margin: 0px 0px 0px 0px;
	border: None; 
	border-radius: 0.5em; /* future proofing */
}
table.strippedRows tr:nth-child(even) {
	background-color: var(--themeColour0High);
}
table.strippedRows tr th ,
table.strippedRows tr td {
	padding: 1em 1.5em;  margin: 0px 0px 0px 0px; 
}
table.strippedRows tr th {
	color: var(--themeColour1);
	background-color: var(--themeColour0High);
	border-bottom: var(--themeBorderThickness) Solid var(--themeColour0Mid3);
	font-weight: Bold;
}
table.strippedRows tr td {
	color: var(--themeColour0Mid); 
	border: None;
}
/*
 * End table layout.
 */

/* 
 * This is an actual, visible, table. 
 */
table.columnLayoutWithBoxes {
	margin-top: 0.5em;  margin-bottom: 0.5em;
	width: 100%;
	border-collapse: Collapse;
	text-align: Left;
}
main > table.columnLayoutWithBoxes {  /* Top level only. */
	width: calc(100% - var(--mainLRMargin) - var(--mainLRMargin));
}
table.columnLayoutWithBoxes tr td ,
table.columnLayoutWithBoxes tr th {
	border-width: var(--themeBorderThickness);  border-color: var(--themeColour0Mid3);  border-style: Solid;
	padding: 1em 1.5em;  margin: 0px 0px 0px 0px; 
}
table.columnLayoutWithBoxes thead tr td ,
table.columnLayoutWithBoxes thead tr th {
	font-weight: Bold;
	color: var(--themeColour1);  background-color: var(--themeColour0High);
}
table.columnLayoutWithBoxes tbody tr td {
	vertical-align: Top;
}
table.columnLayoutWithBoxes tbody tr td p.blue {
	color: var(--themeColour1);
}
/* 
 * End visible, table. 
 */
 

/*
 * Breakable columns is a layout that goes vertical on narrow screens.
 */
@media screen and (max-width: 999px) {  /* 3 col, narrow. */
	.breakableColumns {
		display: Initial;
		border-width: var(--themeBorderThickness) 0px 0px 0px;
	}
	.breakableColumns > * {
		margin-bottom: 0.5rem;
	}
	.breakableColumns > *:first-of-type {
		border-width: 0px;
	}
	.breakableColumns > *:last-of-type {
		margin-bottom: 0px;
	}
}
@media screen and (min-width: 1000px) { /* 3 col, wide. */
	.breakableColumns {
		display: Flex;  flex-direction: Row;  flex-wrap: NoWrap;
		justify-content: Space-Evenly;  align-items: Stretch;
	}
	.breakableColumns > * {
		flex-grow: 1;
		padding: 0.5rem;
		/*border-color: var(--themeColour0Mid3);  border-style: Solid;
		border-width: 0px 0px 0px var(--themeBorderThickness);*/
	}
	.breakableColumns > *:first-of-type {
		/*border-width: 0px;*/
		padding-left: 0px;
	}
	.breakableColumns > *:last-of-type {
		padding-right: 0px;
	}
	.breakableColumns.cols1 > * { width: 100%; }
	.breakableColumns.cols2 > * { width: 50%; }
	.breakableColumns.cols3 > * { width: 33%; }
	.breakableColumns.cols4 > * { width: 25%; }
	.breakableColumns.cols5 > * { width: 20%; }
}


/*
 * Flow row -- inline flow of blocks, each row is same height, with gap and space around.
 */
div.flowRow {
	display: Flex;  flex-direction: Row;
	flex-wrap: Wrap;  justify-content: Space-Around; 
	align-items: Stretch;  gap: 2rem;
}
div.flowRow > * {
	display: Inline-Block;
}


/* ---------------------------------------------------------------------------- 
 * Ad hoc styles for specific content types.
 * ---------------------------------------------------------------------------- */

/* NB box outs. */
span.nb , 
div.nb {
	display: Flex;  flex-direction: Row;  flex-wrap: NoWrap;
	justify-content: Flex-Start;  align-items: Flex-Start;
	padding: 0.75rem 1rem;
	margin-bottom: 1.5rem;
	color: var(--themeColour1);
	background-color: var(--themeColour1High);
	font-size: 1rem;  font-weight: Normal;
	/*border: var(--themeBorderThickness) Solid var(--themeColour1);*/
	border-radius: var(--themeBorderRadius);
}
div.nb > b:first-child ,
div.nb > strong:first-child ,
div.nb > span.nbsymbol {
	padding: 0.5em;
	font-size: 1.2rem;
	color: var(--themeColour0);  background-color: var(--themeColour1);
	margin-right: 1rem;  margin-bottom: 0px;
}
div.nb > span.nbsymbol::before {
	content: "NB:";
}
div.nb p {
	color: var(--themeColour1);
}
div.nb p:last-child {
	margin-bottom: 0px;
}

/*
 * Footnote, connected to *.
 * Only used on section-a/roles-and-responsibilities.php and 
 * section-d/code-of-professional-conduct-for-teachers.php
 */
div.footnote {
	margin: 0px;
	font-size: 0.8rem;
	text-transform: Uppercase;
	color: var(--themeColour1);
}

/*
 * Box out, to highlight a paragraph.
 * Only found on section-a/assessing-the-qts-teaching-standards.php and
 * section-d/assessing-performance-against-the-standards.php
 */
span.highlight ,
div.highlight {
	display: Block;  clear: Both;
	padding: 0.75rem 1rem;  
	margin-top: var(--mainLRMargin);
	margin-bottom: 1.5rem;
	background-color: var(--themeColour1High);
	font-size: 1rem;  font-weight: Normal;
	/*border: var(--themeBorderThickness) Solid var(--themeColour1);*/
	border-radius: var(--themeBorderRadius);
}
span.highlight p ,
div.highlight p {
	color: var(--themeColour1);
}

/*
 * Videos.
 */
.embeddedVideo {
	display: Flex;  flex-direction: Row;  flex-wrap: NoWrap;  justify-content: Space-Around; 
	align-items: Stretch;  gap: 2rem;
	
	padding: 0px 0px;  margin: 0px 0px 1rem 0px;
}

/*
 * Quotes.
 */
blockquote {
	margin-left: 1rem;  margin-right: 1rem;  padding: 1.5rem;
	border: var(--themeBorderThickness) Solid var(--themeColour0Mid3);
	font-family: Monospace;
}
blockquote h3 {
	font-size: 125%;  font-weight: Bold;
	color: var(--themeColour1);
	margin-top: 0px;
}
blockquote p {
	color: var(--themeColour0Mid);
}

/* ---------------------------------------------------------------------------- 
 * FIXME styles: these styles create eye-catching visuals for parts of the pages 
 * that need to be fixed or amended.
 * ---------------------------------------------------------------------------- */

span.review {
	/*animation-name: flashinghighlight;
	animation-duration: 2s;
	animation-iteration-count: infinite;*/
}
@keyframes flashinghighlight {
	/*from { background-color: Unset; }
	to { background-color: Yellow; }*/
	0% { background-color: Unset; }
	50% { background-color: Yellow; }
}

/* a.button.right has been retired in favour of a proper footer block, see .footerNavigation */
a.button.right {
	animation-name: flashinghighlight;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}


/* ---------------------------------------------------------------------------- 
 * Lists and downloads
 * ---------------------------------------------------------------------------- */

ul.list , 
ul.list ul /*, ol.list*/ {
	padding-left: var(--listPadding);  /* Space for bullet */
}
ul.list li /*, ol.list li*/ {
	color: var(--themeColour0Mid);
	padding: 0.5rem 1rem;
	list-style-type: "\f111";
}
ul.list li::marker {
	font-family: FontAwesome;  font-size: 0.75em;
	color: var(--themeColour1);
}
ul.list li.sublist {
	list-style-type: None;
}
ul.list ul:not(.list-downloads) li::marker {
	font-family: FontAwesome;  font-size: 0.75em;
	color: var(--themeColour1Mid);
}

ol.list {
	padding-left: var(--listPadding);  /* Space for bullet */
}
ol.list li {
	color: var(--themeColour0Mid);
	padding: 0.5rem 1rem;
}
ol.list li::marker {
	color: var(--themeColour1);
	font-weight: Bold;
}
ol.list li.sublist {
	list-style-type: None;
}

p.listPreamble {
	color: var(--themeColour1);
	font-weight: Bold;
}

/*
 * <li>
 *   <a>
 *     ?optional? [pre text]
 *     ?optional? <span class="revision"> [date] </span>
 *     <b> [Document title] </b> [::after]
 *     ?optional? <span class="abstract"> [abstract] </span>
 *   </a>
 *   [::after]
 * </li>
 */

/*
 * Downloads.
 */
ul.list-downloads {
	--buttonMarkerColour: var(--themeColour1);
	
	padding-left: 1.5rem;  /* Space for bullet */
}
ul.list-downloads > li {
	padding: 0px;
	margin-top: 0.5rem;  margin-bottom: 0.5rem;
}
ul.list-downloads > li  {
	list-style-type: "\f019";
}
ul.list-downloads.externals > li ,
ul li ul.list-downloads.externals > li {
	list-style-type: "\f0ac";
}
ul.list-downloads > li > a {
	display: Block;
	padding: 0.5rem 1rem;
	margin-left: 1rem;
	font-size: 1rem;
	text-decoration: None;
	
	color: var(--buttonTextSubColour);
	background-color: var(--buttonBackgroundColour);
	
	border-width: var(--buttonBorderWidth);
	border-style: Solid;
	border-color: var(--buttonBorderColour);
	/*transition: border-color 0.5s Ease-Out 0ms;*/
	border-radius: var(--themeBorderRadius);
}
ul.list-downloads > li::marker {
	font-family: FontAwesome;  font-size: 1.5rem;
	color: var(--buttonMarkerColour);
	padding-left: 0.5rem;  padding-right: 1rem;
}
ul.list-downloads > li > a b {
	display: Block;  /*clear: Both;*/
	color: var(--buttonTextColour);
	font-size: 1.2rem;  font-weight: Normal;
	text-decoration: None;
	padding: 0px;
}
/* Mouse over, non-idle, etc. */
ul.list-downloads > li > a:hover ,
ul.list-downloads > li > a:focus , 
ul.list-downloads > li > a:active {
	background-color: var(--buttonBackgroundColourHover);
	border-color: var(--buttonBorderColourHover);
	color: var(--buttonTextSubColourHover);
	/*text-decoration: Underline;*/
}
ul.list-downloads > li > a:hover b ,
ul.list-downloads > li > a:focus b , 
ul.list-downloads > li > a:active b {
	border-color: var(--buttonBorderColourHover);
	color: var(--buttonTextColourHover);
}
ul.list-downloads > li a b span.dlSub { color: var(--buttonTextSubColour); }
ul.list-downloads > li a b span.dlSub::before { content: "\0020:\0020"; }
ul.list-downloads > li > a:hover b span.dlSub ,
ul.list-downloads > li > a:hover b span.dlSub::before ,
ul.list-downloads > li > a:focus b span.dlSub , 
ul.list-downloads > li > a:focus b span.dlSub::before , 
ul.list-downloads > li > a:active b span.dlSub ,
ul.list-downloads > li > a:active b span.dlSub::before {
	color: var(--buttonTextColourHover);
}

/* Abstract sections in download links, used in Section F > Linking theory to practice. */
ul.list-downloads li a span.abstract:not(:empty) {
}
/* Remove browser's <ul> margin in quick ref documents, so neighouring <ul>'s don't have extra whitespace. */
main.quickref ul.list-downloads {
	margin-block-start: 0px;
    margin-block-end: 0px;
}


/*
 * Lists of navigation links, Section A, B, C, etc.
 */
ul.list-contents   ,  ol.list-contents {
	padding-left: 0px;  /* We don't want the default indent for bullet. */
}
ul.list-contents > li  ,  ol.list-contents > li {
	margin-top: 0.125rem;  margin-bottom: 0.125rem;
	list-style-type: None;
}
ul.list-contents > li > a   ,  ol.list-contents > li > a {
	display: Block;
	padding: 1rem 1rem;
	font-size: 1.2rem;
	text-decoration: None;
	
	background-color: var(--buttonBackgroundColour);
	color: var(--buttonTextSubColour);
	
	border-width: var(--buttonBorderWidth);
	border-style: Solid;
	border-color: var(--buttonBorderColour);
	border-radius: var(--themeBorderRadius);
}
ul.list-contents > li > a b   ,  ol.list-contents > li > a b {
	display: Block;  clear: Both;
	color: var(--buttonTextColour);
	font-size: 1rem;  font-weight: Normal;
}
ul.list-contents > li > a:active  ,  ol.list-contents > li > a:active ,
ul.list-contents > li > a:focus   ,  ol.list-contents > li > a:focus ,
ul.list-contents > li > a:hover   ,  ol.list-contents > li > a:hover {
	background-color: var(--buttonBackgroundColourHover);
	border-color: var(--buttonBorderColourHover);
	color: var(--buttonTextSubColourHover);
}
/* Abstract sections in download links, used in Section F > Linking theory to practice. */
ul.list-contents li a span.abstract:not(:empty)   ,  ol.list-contents li a span.abstract:not(:empty) {
}

ul.list-contents.top-level-programme-menu a {
	display: Flex;  flex-direction: Row;
	flex-wrap: NoWrap;  justify-content: Space-Between;  align-items: Center;  gap: 0.5rem 1rem;
}
ul.list-contents.top-level-programme-menu > li > a   ,  ol.list-contents.top-level-programme-menu > li > a {
	font-size: 1rem;
}
ul.list-contents.top-level-programme-menu > li > a b   ,  ol.list-contents.top-level-programme-menu > li > a b {
	font-size: 1.2rem;
}
ul.list-contents.top-level-programme-menu a span:not(.icon) { flex-grow: 1; }
ul.list-contents.top-level-programme-menu li a span.icon {
	font-family: FontAwesome;  font-size: 1.5em;
	color: var(--buttonTextColour);
	display: Block;  width: 1.2em;  text-align: Center;
}
ul.list-contents.top-level-programme-menu li.sectionA a span.icon::before { content: "\f2b5"; }
ul.list-contents.top-level-programme-menu li.sectionB a span.icon::before { content: "\f24d"; }
ul.list-contents.top-level-programme-menu li.sectionC a span.icon::before { content: "\f0e6"; }
ul.list-contents.top-level-programme-menu li.sectionD a span.icon::before { content: "\f1d9"; } /* f2c0 */
ul.list-contents.top-level-programme-menu li.sectionE a span.icon::before { content: "\f087"; }
ul.list-contents.top-level-programme-menu li.sectionF a span.icon::before { content: "\f0eb"; }
ul.list-contents.top-level-programme-menu li.sectionG a span.icon::before { content: "\f274"; }
ul.list-contents.top-level-programme-menu li.generic01 a span.icon::before { content: "\f0f6"; }
ul.list-contents.top-level-programme-menu li.ect a span.icon::before { content: "\f0b1"; }

/*
 * List download modifiers etc.
 *  File types:
 *    .dlPDF  .dlWord  .dlXLS  .dlWordTemplate  .dlOnlineForm
 *  Other modifiers:
 *    .draft  .comingSoon  .notAvailable  .revision
 */

/* 
 * Download file types.  NOTE: See also .comingSoon below.  (Note: only one ::after pseudo-class can 
 * be applied at a time, multiple rules are NOT combined.)
 * 
 * ul.list-downloads li.dlPDF a::before {}
 */
ul.list-downloads li.dlPDF a b::before ,
ul.list-downloads li.dlWord a b::before ,
ul.list-downloads li.dlXLS a b::before ,
ul.list-downloads li.dlPowerpoint a b::before ,
ul.list-downloads li.dlWordTemplate a b::before ,
ul.list-downloads li.dlOnlineForm a b::before ,
ul.list-downloads li.dlZip a b::before ,
ul.list-downloads li.dlYouTube a b::before ,
ul.list-downloads li.dlExternalLink a b::before {
	font-family: FontAwesome;  font-size: Inherit;
	background-color: rgba(255,255,255 , 0.5);  margin-right: 0.25rem;
}

ul.list-downloads li.dlPDF a::after { content: "PDF (Adobe Acrobat Reader)"; }
ul.list-downloads li.dlPDF a b::before { content: "\f1c1";  color: #cc0000; }

ul.list-downloads li.dlWord a::after { content: "Docx / Doc (Microsoft Word)"; }
ul.list-downloads li.dlWord a b::before { content: "\f1c2";  color: #0000cc; }

ul.list-downloads li.dlXLS a::after { content: "Xlsx / Xls (Microsoft Excel)"; }
ul.list-downloads li.dlXLS a b::before { content: "\f1c3";  color: #00aa00; }

ul.list-downloads li.dlPowerpoint a::after { content: "Pptx / Ppt (Microsoft Powerpoint)"; }
ul.list-downloads li.dlPowerpoint a b::before { content: "\f1c4";  color: #ff6600; }

ul.list-downloads li.dlWordTemplate a::after { content: "Dotx / Dotm / Dot (Microsoft Word) template"; }
ul.list-downloads li.dlWordTemplate a b::before { content: "\f1c2";  color: #0000cc; }

ul.list-downloads li.dlOnlineForm a::after { content: "Online form (Microsoft Forms)"; }
ul.list-downloads li.dlOnlineForm a b::before { content: "\f29c";  color: #000000; }

ul.list-downloads li.dlZip a::after { content: "Zip archive"; }
ul.list-downloads li.dlZip a b::before { content: "\f1c6";  color: #000000; }

ul.list-downloads li.dlYouTube a::after { content: "Video (YouTube)"; }
ul.list-downloads li.dlYouTube a b::before { content: "\f167";  color: #ff0000; }

ul.list-downloads li.dlExternalLink a::after { content: "External link"; }
ul.list-downloads li.dlExternalLink a b::before { content: "\f0c1";  color: #000000; }

ul.list-downloads li.comingSoon a::after { content: " Coming soon"; color: Red; }
ul.list-downloads li.comingSoon a b { opacity: 0.35; }

/*
 * Augments to list, to add special tags
 */ 
ul.list-downloads li.draft a b::after {
	content: " [DRAFT]";  color: Red; 
}

ul.list-downloads li a.notAvailable {
	cursor: Not-Allowed; 
	pointer-events: None;
}
ul.list-downloads li.notAvailable a { 
	cursor: Not-Allowed;
	pointer-events: None;
}

ul.list-downloads li span.revision { 
	color: var(--themeColour0Mid); 
	display:Inline;
	font-size: 0.9rem;
}
/*ul.list-downloads li span.revision::before { content:'\00a0\2022\00a0Revised: '; }*/
ul.list-downloads li span.revision::before { 
	content:'Revised: '; 
}
/* FIXME: this isn't used, but is it useful?
ul.list-downloads li span.revisionRecent::after {  
	display: Inline-Block;  margin-left:1rem;  font-weight: Bold;
	content: '\00a0UPDATED\00a0';
	color: var(--themeColour0); background-color: var(--themeColour1);
}*/

/*
 * Sitemap
 */

#sitemap ul , 
#sitemap ul ul {
	padding-left: var(--listPadding);  /* Space for bullet */
}
#sitemap ul li {
	color: var(--themeColour0Mid);
	padding: 0.25rem 0.5rem;
	list-style-type: "\f111";
}
#sitemap ul ul li {
	list-style-type: "\f105";
}
#sitemap ul ul ul li {
	list-style-type: "\f101";
}
#sitemap ul li::marker {
	font-family: FontAwesome;  font-size: 0.75em;
	color: var(--themeColour1);
}
#sitemap b + span::before {
	content: ": ";
	font-weight: Bold;
}


/* ---------------------------------------------------------------------------- 
 * Accordion
 * ---------------------------------------------------------------------------- */

div.accordion {
	margin-bottom: 1em;
}
div.accordion > .heading {
	--arrowColour: var(--themeColour0Mid2);
	--arrowColourSelected: var(--themeColour1);
	--arrowColourHover: var(--themeColour1);

	
	font-size: 1.2rem;  font-weight: Normal;
	margin: 0.25rem 0px 0.25rem 0px;
	padding: 1rem 1rem;
	cursor: Pointer;
	
	color: var(--buttonTextColour);
	background-color: var(--buttonBackgroundColour);
	
	border-width: var(--buttonBorderWidth);
	border-style: Solid;
	border-color: var(--buttonBorderColour);
	border-radius: var(--themeBorderRadius);
}
div.accordion > .heading::before {
	font-family: FontAwesome;  font-size: Inherit;  font-weight: Normal;
	content: "\f101";
	width: 2em;
	display: Inline-Block;
	color: var(--arrowColour);
}
div.accordion > .heading:hover {
	background-color: var(--buttonBackgroundColourHover);
	border-color: var(--buttonBorderColourHover);
}
div.accordion .heading:hover::before  {
	color: var(--arrowColourHover);
}
div.accordion > .heading.ui-accordion-header-active {
	/*background-image: url(../css/images/accordion-highlight.png) !important;*/
	background-color: var(--buttonBackgroundColourSelected);
	border-color: var(--buttonBorderColourSelected);
	font-weight: Bold;
}
div.accordion > .heading.ui-accordion-header-active::before {
	content: "\f103";
	color: var(--arrowColourSelected);
}
div.ui-accordion-content {
	padding-top: 0.5rem;  padding-bottom: 0.5rem;
	
	padding-left: 1rem;  padding-right: 1rem;
	border-right: var(--themeBorderThickness) Solid var(--themeColour0High);
	border-left: var(--themeBorderThickness) Solid var(--themeColour0High);
}


/* ---------------------------------------------------------------------------- 
 * Folder -- like accordion, but lightweight and non-modal.
 *   Currently only used on placement-experience-file.php .
 *
 * Note: ideally this should be done using a <details> and <summary> structure
 * rather than using <div>s. However the former is a new HTML element at the
 * time of writing, being only a couple of years old. So for backwards compatibility
 * we'll stick with <div>s for now, but this CSS will work when we transition to
 * the new structure.  FIXME: Using \00a0 to pad the marker means the summary
 * text moves slightly when opened, as the open glyph is wider than the closed.
 * ---------------------------------------------------------------------------- */


div.folderContainer {
	margin: 0px 0px 1rem 0px;
}

details.folder > summary , 
div.folder > .heading {
	--folderColour:  var(--themeColour1);
	--folderColourHover: var(--themeColour1);
	
	/*font-size: 1.2rem;  font-weight: Normal;*/
	margin: 0.25rem 0px 0px 0px;
	padding: 0.5rem 0.5rem;
	cursor: Pointer;
	
	color: Inherit;
	
	/* Has the same geometry as a button, but hidden (until hover.) */
	border-width: var(--buttonBorderWidth);
	border-style: Solid;
	border-color: Transparent;
	border-radius: var(--themeBorderRadius);
}
details.folder:open > summary ,
div.folder > .heading.active {
	color: var(--buttonTextColour);  background-color: var(--buttonBackgroundColourSelected);
	border-color: var(--buttonBorderColourSelected);
}
details.folder > summary:hover ,
div.folder > .heading:hover {  /* When hovered, adopts same style as button. */
	background-color: var(--buttonBackgroundColourHover);
	border-color: var(--buttonBorderColourHover);
	color: var(--buttonTextColourHover);
}
/* Icon before to signal this is a folder. */
details.folder summary::marker ,
div.folder > .heading::before {
	font-family: FontAwesome;  font-size: Inherit;  font-weight: Normal;
	content: "\f07b";
	width: 1.5em;
	display: Inline-Block;
	color: var(--folderColour);
}
details.folder summary::marker:hover ,
div.folder > .heading:hover::before , 
div.folder > .heading.active:hover::before {
	color: var(--folderColourHover);
}
details.folder:open summary::marker ,
div.folder > .heading.active::before {
	content: "\f07c";
	color: var(--folderColour);
}
/* Content of folder. */
details.folder > .content ,
div.folder > .content {
	margin-left: 0.5rem;  padding-left: 1rem;  padding-right: 1rem;  padding-top: 0.5rem;
	border-width: var(--buttonBorderWidth);
	border-style: Solid;
	border-color: var(--buttonBackgroundColourSelected);
}
div.folderContainer {
	display: Block;
	color: var(--themeColour0Mid); 
	padding: 0px 0px;  margin: 0px 0px 1rem 0px;
	line-height: 1.5em;
}

/* Fix needed to forcably overrule ::marker below. */
details.folder summary {
	list-style-type: None;
	outline: None;
}
details.folder:open summary {
	list-style-type: None;
}
details.folder summary::marker {
	content: "\f07b\00a0\00a0" !important;
	width: 1.5em;
	display: Inline-Block;
	
}
details.folder:open summary::marker {
	content: "\f07c\00a0\00a0" !important;
	width: 1.5em;
	display: Inline-Block;
	
}
/* End of fix. */


/* ---------------------------------------------------------------------------- 
 * Section B: contents of folder.
 * ---------------------------------------------------------------------------- */

.phaseExpectation {
	border: var(--themeBorderThickness) Solid var(--themeColour0High);
	padding: 0.5rem;
	margin-bottom: 1rem;
}
.phaseExpectation > h3 {
	margin-top: 0px;  margin-bottom: 0.5rem;
}
.phaseExpectation .breakableColumns h3 {
	margin-top: 0px;  margin-bottom: 0.5rem;
	padding: 0.5rem;
	font-weight: Bold;
	color: var(--themeColour1);  background-color: var(--themeColour0High);
}

/* ---------------------------------------------------------------------------- 
 * Side banner.
 * ---------------------------------------------------------------------------- */

.sideBanner {
	background-position: Top Left;
	background-repeat: No-Repeat;
	background-size: 150px Auto;
	padding-left: calc( 150px + 2rem );
}

.sideBanner.mentor01 { background-image: url('../css/images/decore/banner-side09.jpg'); }
.sideBanner.trainee01 { background-image: url('../css/images/decore/banner-side07.jpg'); }
.sideBanner.trainee02 { background-image: url('../css/images/decore/banner-side10.jpg'); }
.sideBanner.trainee03 { background-image: url('../css/images/decore/banner-side27.jpg'); }


/* ---------------------------------------------------------------------------- 
 * Keyboard navigation, accessibility.
 * ---------------------------------------------------------------------------- */
* a:focus-visible ,  /* Any link. */
div.accordion > .heading:focus-visible ,  /* Accordion section header. */
a.button:focus-visible {  /* Any generic button. */
	outline: 3px Dashed var(--themeColour2);  /*3px Dotted var(--themeColour1Mid);*/
	outline-offset: 0.25em;
}


/* ---------------------------------------------------------------------------- 
 * Modal image display, for popup view of images.
 * ---------------------------------------------------------------------------- */

#imageModalPanel {
	display: None;  flex-direction: Column;
	flex-wrap: NoWrap;  justify-content: Center;  align-items: Center;  gap: 0.5rem 0.5rem;
	
	position: Fixed;  left: 0px;  top: 0px;  width: 100%;  height: 100%;
	z-index: 3;
	
	cursor: Pointer;
	transition: 0.3s;
	overflow: Hidden;
	background-color: Black;
	background-color: rgba(0,0,0 , 0.9);
}
#imageModalPanel img {
	object-fit: Contain;
	margin: Auto;
}
#imageModalPanel .caption {
	display: Block;
	margin: Auto;  padding: 0.5rem 0px;
	text-align: center;
	color: #cccccc;
}
#imageModalPanel img ,
#imageModalPanel .caption {
	animation-name: zoom;
	animation-duration: 0.6s;
}
@keyframes zoom {
	from { transform:scale(0); }
	to { transform:scale(1); }
}
#imageModalPanel .close {
	position: Absolute;  top: 1rem;  right: 1rem;
	color: White;
	font-size: 48pt;  font-weight: Bold;
	transition: 0.3s;
}
#imageModalPanel .close:hover , 
#imageModalPanel .close:focus {
	color: #bbbbbb;
	text-decoration: None;
	cursor: Pointer;
}
.imageModalTarget:hover {
	opacity: 0.7;
}


/* TEST */
.frostedGlass {
	background: repeating-linear-gradient(150deg,
		#006EA9 , 
		#007EB9 0.5rem, 
		#008EC9 2.5rem , 
		#006EA9 10rem
	);
	backdrop-filter: blur(2px);
	text-shadow: 0px 0px 2px #004488;
}
.tintedSteel {
	background: repeating-linear-gradient(150deg,
		#e0e0e0 , 
		#f2f2f2 2rem, 
		#f8f8f8 3.5rem , 
		#e0e0e0 10rem
	);
}

img.decoreHeader {
	width: 100%;  height: Auto;
	display: Block;
	margin: 0.5rem 0px 0.5rem 0px;
	object-fit: Cover;
}
@media screen and (min-width: 800px) and (max-width:1279px) {  /* Laptop wide. */
	img.decoreHeader {
		max-height: 200px;
	}
}
@media screen and (min-width: 1280px) {  /* Laptop very wide. */
	img.decoreHeader {
		max-height: 160px;
	}
}