/*
 * 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);
}

/* FIXME: this hides some markup in the header that is no longer used.
 * Delete the markup, then we can delete this CSS. */
/*.hidden , */
div.container-search form fieldset div#searchInContainer {
	display: None;
}

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/*, h3, h4, h5*/ { /* FIXME: why are all these set to the same values? Check the site to see is H3...H5 are actually used. */
	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;
}

/* FIXME: h4...h6 are never used anywhere! */
h4, h5, h6 {
	animation-name: flashinghighlight;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

/*
 * 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);
	/* -webkit-transform: skew(-14deg);  / * FIXME: use clip-path Polygon not transform * /
	-ms-transform: skew(-14deg);
	transform: skew(-14deg);
	margin: 15px auto 20px -20px; */
	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;
	/* -webkit-transform: skew(14deg);  / * FIXME: use clip-path Polygon not transform * /
	-ms-transform: skew(14deg);
	transform: skew(14deg); */
	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;
}

/*
 * 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: 80rem;  margin-left: Auto;  margin-right: Auto;
}
/* Next page navigation button at foot of each page. */
nav.footerNavigation a.button ,
div.buttonRow > 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 {
	background-color: var(--buttonBackgroundColourHover);
	text-decoration: None;
	border-color: var(--buttonBorderColourHover);
}
/*nav.footerNavigation a.button:focus ,
div.buttonRow > a.button:active {
	transform: var(--buttonActiveTransform);
	color: var(--ljmuDarkColour);
}*/
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);
}
div.buttonRow > a.button {
	/*min-width: 25%;*/
	text-align: Center;
	min-width: 100px;  max-width: 200px;
}
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 span.icon.sectionA::before { content: "\f05a"; } /* Prototype */
div.buttonRow > a.button span.icon.sectionB::before { content: "\f15b"; } /* Prototype */
div.buttonRow > a.button span.icon.sectionC::before { content: "\f1d7"; } /* Prototype */
div.buttonRow > a.button span.icon.sectionD::before { content: "\f14a"; } /* Prototype */
div.buttonRow > a.button span.icon.sectionE::before { content: "\f0c0"; } /* Prototype */
div.buttonRow > a.button span.icon.sectionF::before { content: "\f27a"; } /* Prototype */
div.buttonRow > a.button span.icon.sectionG::before { content: "\f274"; } /* Prototype */
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;
}
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;
}
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);
}
/* 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";}

/* 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);
}

/*
 * FIXME: this style was apparently used to do a clean break at the end of sections using clear:both. 
 * Using HR to do this is a problematic. Replaced in new templated pages with div.clearBoth (see below.)
 */
hr {
	animation-name: flashinghighlight;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	
	
	display: Block; 
	clear: Both; 
	background-color: Transparent;
	min-height: 1px;  border: None /*!important*/; 
	margin: 0;  padding: 0;
}
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;
}

/* Used to colour text on a handful of pages, such as section-a/placement-experience-file.php */
.blue { color: var(--themeColour1);}  /* FIXME seek, locate, exterminate! */
.red { color: #cc0000;}

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

span.symbol {
	font-family: FontAwesome;
}

div.image-container { /* FIXME is this ever used? */
	display: block;
	padding: 4px 0px 10px;
	width: Auto;
	margin: 0px;
	text-align: Center;
}
div.image-container img { /* FIXME is this ever used? */
	height: Auto;
	max-width: 800px;
}
div.container-header { /* FIXME is this ever used? */
	background-color: var(--ljmuDarkColour);
	padding: 0px 0px 0px 0px;
	
	border-bottom: 5px Solid var(--ljmuMidColour);
}
div.container-header img { /* FIXME is this ever used? */
	width: 60%;
	height: Auto;
	max-width: 210px;
	margin: 15px;
	float: Left;
}
div.container-logo { /* FIXME is this ever used? */
	display: Block; 
	width: Auto; 
	padding: 10px 0px 0px 0px; 
	float: Left;
}

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;
}

div.banner.home { background-image: url('../libs/images/landing-001.jpg'); }
body.pgcePrimary-3-7 div.banner.home { background-image: url('../libs/images/landing-001.jpg'); }
body.pgcePrimary-5-11 div.banner.home { background-image: url('../libs/images/landing-001.jpg'); }
body.pgceSecondary div.banner.home { background-image: url('../libs/images/landing-002.jpg'); }
body.schoolDirect div.banner.home { background-image: url('../libs/images/landing-002.jpg'); }
body.ugPrimary div.banner.home { background-image: url('../libs/images/landing-003.jpg'); }
body.ugSecondary div.banner.home { background-image: url('../libs/images/landing-002.jpg'); }

div.banner.a { background-image: url('../libs/images/bg-section-a.jpg'); }
div.banner.b { background-image: url('../libs/images/bg-section-b.jpg'); }
div.banner.c { background-image: url('../libs/images/bg-section-c.jpg'); }
div.banner.d { background-image: url('../libs/images/bg-section-d.jpg'); }
div.banner.e { background-image: url('../libs/images/bg-section-e.jpg'); }
div.banner.f { background-image: url('../libs/images/bg-section-f.jpg'); }
div.banner.g { background-image: url('../libs/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);
}

/* FIXME: is container-search style ever used anymore? */
div.container-search {
	display: Block;  float: Right; 
	padding: 0px 0px 0px 0px; margin: 20px 0px 12px 0px;
}
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.
 */
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".
 */
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 div.restrict.pgcePrimary-5-11 , 
body.pgcePrimary-5-11 li.restrict.pgcePrimary-5-11 {
	display: Revert !important;
}
body.pgceSecondary div.restrict.pgceSecondary , 
body.pgceSecondary li.restrict.pgceSecondary {
	display: Revert !important;
}
body.ugPrimary div.restrict.ugPrimary , 
body.ugPrimary li.restrict.ugPrimary {
	display: Revert !important;
}
body.ugSecondary div.restrict.ugSecondary , 
body.ugSecondary li.restrict.ugSecondary {
	display: Revert !important;
}
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.
 */
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; }


/* ---------------------------------------------------------------------------- 
 * 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) 25%  ,  var(--themeColour2High) 100%);
	--backgroundColorSelectedHover: linear-gradient(0deg  ,  var(--themeColour0) 0%  ,  var(--themeColour2High) 35%);
	--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;
}
/*  FIXME, div.container-table only used in section-c/smarter-target-setting-and-action-plan.php, 
which an old unused page, due for deletion.
div.container-table {
	padding: 10px 0px;  display: Block;
}
div.container-table input {  / * Is this ever used? * /
	background-color: var(--themeColour0);  color: #5E634A !important;  / * THEME * /
	padding: 2px 5px; 
	border: 1px solid #A5C132; 
	font-weight: Normal;  font-size: 0.95em;  font-family: var(--fontList); 
	width: 150px;
}*/
/*
 * 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 , 
table.columnLayoutWithBoxes tbody tr td li {  /* FIXME remove this, the standard list styles should apply */
	/*color: var(--themeColour0Mid);  line-height: 1.7em;  font-size: 1em;
	padding: Initial;  margin: 0px 0px 1em 0px;*/
}
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%; }
}


/* ---------------------------------------------------------------------------- 
 * 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.5rem 0.5rem 0.5rem 0.5rem;  /* margin: var(--mainLRMargin); */ /* was 10px */
	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);
}
span.nb > b:first-child , div.nb > b:first-child ,
span.nb > strong:first-child , div.nb > strong:first-child {
	padding: 0.5em;
	font-size: 1.2rem;
	color: var(--themeColour0);  background-color: var(--themeColour1);
	margin-right: 1rem;  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.25rem 0.5rem 0.25rem 0.5rem;  
	margin-top: var(--mainLRMargin);
	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);
}

/*
 * 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;
}

/* ---------------------------------------------------------------------------- 
 * Teams meeting and development events.
 * ---------------------------------------------------------------------------- */

div.events > div {
	display: None;
}

div.teamsMeeting {  /* FIXME pixel dimensions. */
	display: Inline-Block;
	margin: 5px 15px 5px; padding: 12px 10px;
	border: 2px Solid var(--themeColour1);  border-radius: 10px;
}

div.mentorEvent {  /* FIXME pixel dimensions. */
	margin: 15px;
	border: 1px Solid var(--themeColour1);
	padding: 10px;
}

div.mentorEvent.alert {
	border-color: Red;
}



/* ---------------------------------------------------------------------------- 
 * 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 ul li {
	/* list-style-type: "\f10c"; */
}
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(--ljmuGreyColour);
}

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:active {
	transform: var(--buttonActiveTransform);
	color: var(--buttonTextColourActive);
}*/
/*ul.list-downloads > li > a:focus { 
	outline: var(--focusOutline);
}*/
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:active b {
	color: var(--buttonTextColourActive);
}*/
/* Abstract sections in download links, used in Section F > Linking theory to practice. */
ul.list-downloads li a span.abstract:not(:empty) {
}

/*
 * 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   ,  ol.list-contents > li {
	list-style-type: "\f0a9";
}*/
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;
	/*color: var(--themeColour1) !important; */  /* FIXME remove important */
}
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);
	/*text-decoration: Underline;*/
}
/*ul.list-contents > li > a:active  ,  ol.list-contents > li > a:active {
	transform: var(--buttonActiveTransform);
	color: var(--ljmuDarkColour);
}*/
/* 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) {
}


/*
 * 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.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: "Doc / Docx (Microsoft Word)"; }
ul.list-downloads li.dlWord a b::before { content: "\f1c2";  color: #0000cc; }

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

ul.list-downloads li.dlWordTemplate a::after { content: "Doc / Docx (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: '; 
}
ul.list-downloads li span.revisionRecent::after {  /* FIXME is this ever used? */
	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;
}


/*
 * Misc.
 */
/* Used on shared/section-f/mentor-development-events.php in commented out section. */
/*span.significant { color: Red;  font-weight: Bold; }*/

/* TODO : used on ug-primary/index.php, but commented out. 
div.warning {
	border: 2px Solid Red;  color: Red;
	padding: 0.5em;
	text-align: Center;
	max-width: 50em;  margin-right: Auto;  margin-left: Auto;  / *margin-top: 0.5em;  margin-bottom: 0.5em;* /
}*/
/* FIXME  Used on shared/section-a/placement-experience-file.php in 2020, but not in 2021.
span.colourEmphasis { color: var(--mediumColour); font-weight: Bold; }*/

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

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(../libs/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.
 *
 * 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.
 * ---------------------------------------------------------------------------- */

/*@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;
	}
}*/

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

/* FIXME remove these .sb?? numbered classes. */
.sideBanner.sb01 { background-image: url('../libs/images/decore/banner-side01.jpg'); }
.sideBanner.sb02 { background-image: url('../libs/images/decore/banner-side02.jpg'); }
.sideBanner.sb03 { background-image: url('../libs/images/decore/banner-side03.jpg'); }
.sideBanner.sb04 { background-image: url('../libs/images/decore/banner-side04.jpg'); }
.sideBanner.sb05 { background-image: url('../libs/images/decore/banner-side05.jpg'); }
.sideBanner.sb06 { background-image: url('../libs/images/decore/banner-side06.jpg'); }
.sideBanner.sb07 { background-image: url('../libs/images/decore/banner-side07.jpg'); }
.sideBanner.sb08 { background-image: url('../libs/images/decore/banner-side08.jpg'); }
.sideBanner.sb09 { background-image: url('../libs/images/decore/banner-side09.jpg'); }
.sideBanner.sb10 { background-image: url('../libs/images/decore/banner-side10.jpg'); }
.sideBanner.sb10 { background-image: url('../libs/images/decore/banner-side10.jpg'); }
.sideBanner.sb11 { background-image: url('../libs/images/decore/banner-side11.jpg'); }
.sideBanner.sb12 { background-image: url('../libs/images/decore/banner-side12.jpg'); }
.sideBanner.sb13 { background-image: url('../libs/images/decore/banner-side13.jpg'); }
.sideBanner.sb14 { background-image: url('../libs/images/decore/banner-side14.jpg'); }
.sideBanner.sb15 { background-image: url('../libs/images/decore/banner-side15.jpg'); }

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



/* ---------------------------------------------------------------------------- 
 * Print mode -- for when we want all accordions and tabs expanded to show
 * the entire page.
 * ---------------------------------------------------------------------------- */

body.printMode {
	--bannerBackground: #eeeeee;
	--bannerAltText: Black;
	--bannerText: #666666;
	--bannerBorderWidth: 0.25em;
}

body.printMode div.accordion h2.printModeAccordion , /* FIXME remove h2 variants. */
body.printMode div.accordion div.printModeAccordion ,
body.printMode .folderContainer div.printModeFolder .heading ,
body.printMode .tabbedSection h2.printModeTab {
	margin-top: 2rem;  margin-bottom: 1rem;
	font-size: 20pt;  font-weight: Normal;
	background-color: var(--bannerBackground);  color: var(--bannerText);
	border-width: 0px 0px var(--bannerBorderWidth) 0px;  border-style: Solid;  border-color: var(--bannerAltText);
	padding: 0.5em;
}
body.printMode div.accordion h2.printModeAccordion:first-child , /* FIXME remove h2 variants. */
body.printMode div.accordion div.printModeAccordion:first-child ,
body.printMode .folderContainer div.printModeFolder:first-child .heading ,
body.printMode .tabbedSection h2.printModeTab:first-child {
	margin-top: 0px;
}
body.printMode div.accordion h2.printModeAccordion::before ,
body.printMode div.accordion div.printModeAccordion::before ,
body.printMode .folderContainer div.printModeFolder .heading::before ,
body.printMode .tabbedSection h2.printModeTab::before {
	font-family: FontAwesome, Roboto;  font-size: Inherit;
	color: var(--bannerAltText);
}
body.printMode div.accordion h2.printModeAccordion::before ,
body.printMode div.accordion div.printModeAccordion::before {
	content: '(\f02f\00a0\f00b\00a0 Accordion)\00a0\00a0';
}
body.printMode .folderContainer div.printModeFolder .heading::before {
	content: '(\f02f\00a0\f07c\00a0 Folder)\00a0\00a0';
}
body.printMode .tabbedSection h2.printModeTab::before {
	content: '(\f02f\00a0\f009\00a0 Tab)\00a0\00a0';
}


/* ---------------------------------------------------------------------------- 
 * 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 {
	/*display: Block;*/
	object-fit: Contain;
	margin: Auto;
}
/*@media only screen and (max-width: 700px){
	#imageModalPanel img  {
		width: 100%;
	}
}*/
#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;
	}
}