/*


https://csfla.org/styles/csf.css
The stylesheet for the Christian Schools of Florida web site
by Engaging http://engaging.net
2016/2017
Last modified: 2023 Feb 10

COLORS

Payne's Gray: #4B6876 (header and footer backgrounds)
Orange: #FEA139 (title, links)
Mustard: #EDD42A (hover, alternate lighter links)
Salmon: #BE6500 (alternate darker links)
Peru: #D67643 (dropcaps etc)

FONTS

Gotham
- We are lean and elegant

Ideal Sans
- More "getting on with it" than Gotham

Operator
- Some modern functional fun for the interactive stuff

SVG pattern backgrounds from https://philiprogers.com/svgpatterns/
*/


/**************
@RESET (TOO LATE!)
**************/

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
#main

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

*/

/**************
@GENERAL
**************/

html {
	overflow-x: hidden;
}

figure {
	margin: 0;
}

figcaption {
	line-height: 1.25rem !important;
}

.-breakline {
	word-break: break-all;
}

.-balance-text,
.balance-me,
.-balance-me
{
	text-wrap: balance !important;
}

.mobile-only
{
	display: none;
}


.content-holder
{
	position: relative;
}

.align-center
{
	text-align: center;
}

.clear-left
{
	clear: left;
}

.half-width
{
	width: 50%;
}

p,
li
{
	line-height: 1.5;
}

td p
{
	margin: 0;
}

p.highlight {
	border: 1px solid #999 !important;
}

fieldset p.highlight {
	border: 1px double #fff !important;
}

li
{
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

.info-box-content li
{
	line-height: 1.34rem !important;
}

a
{
	text-decoration: none;
	color: #BE6500; /* salmon */
	transition: all 0.125s ease;
}
a.-lighter {
	color: #EDD42A;
}
a:hover
{
	cursor: pointer;
	color: #FEA139;
}


.console a:hover
{
	color: #BE6500;
}
a.no-pointer
{
	cursor: text;
}
a:active
{
	cursor: wait;
	text-decoration: underline;
}

.smaller
{
	font-size: 0.9rem;
}
.console-title.-smaller {
	font-size: 138% !important;
}

.form-holder .system,
.system.reverse
{
	color: #fff !important;
}

.system.reverse-box {
	background: #222 !important;
	border-radius: 0.5rem;
}


.form-holder.privileges-error .system {
	color: #222 !important;
}


.for-read-only .system
{
	background: none !important;
	color: #000 !important;
}

.section
{
	padding-left: 1rem;
	padding-right: 1rem;
	scroll-snap-align: start;
}

.full-width
{
	display: block !important;
	width: auto !important;
}

.pre-selected
{
	font-style: italic;
}

.internal-organs
{
	display: none;
}

#content,
.content
{
	margin: 5%;
}

#meta
{
	display: none;
}

td.alt
{
	background-color: #EDD42A;
}

.new,
.emph
{
	border: 2px solid #fff;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.cf:before,
.cf:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}
.cf:after {
	clear: both;
}

#report-filename
{
	display: none;
}

h1 img
{
	float: right;
}

.red,
p.red,
p.system.red
{
	color: #B23A48 !important;
	font-weight: 400 !important;
}

.boxed
{
	border: 1px solid rgb(102, 102, 102);
	border-radius: 0.25rem;
	padding-left: 0.5rem !important;
	padding-right: 0.5rem !important;
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	display: inline-block;
}

#form-fields .system.boxed {
	border: 1px solid #fff;

}

.dialog
{
	display: none;
}

	.dialog .fa
	{
		font-size: 2rem;
		color: #B23A48;
	}

	.no-close .ui-dialog-titlebar-close
	{
		display: none;
	}

.copy-to-clipboard {

	background: linear-gradient(#7353ba, #231942);
	background: linear-gradient(#b23a48, #5b85aa);
	border-color: #222;
	border-radius: 1rem;
	display: block;
	margin: 2rem;
	padding: 1rem;
	text-align: center;
}

	.copy-to-clipboard p {
		color: #fff !important;
		padding-bottom: 1rem;
		font-weight: 200;
	}

	.copy-to-clipboard button {
		font-weight: 400;
		border-radius: 0.5rem;
		border: 0;
		color: #fff !important;
		padding: 0.5rem 1rem;
		background: #be6500;
	}

	.copy-to-clipboard button:hover {
		cursor: grab;
	}

	.copy-to-clipboard button:active {
		background: #999;
		cursor: grabbing;
	}


.copy-to-clipboard::before {
/*	content: 'Click to copy to clipboard:' */
}

.-hidden,
.-postits-only {
	display: none;
}

.-toggle-open {
	display: none !important;
}

.-flag-icon .fa {
	font-size: 200% !important;
}

.-rounded-corners {
	border-radius: 0.5rem;
}

/**************
@TABLE SIMULATOR
because browser corrects html when jquery loads, so can't have forms within tables
**************/

.-table {
	display: table;
	width:  100%;
}.

.-thead,
.-tbody,
.-tfoot {

	display: grid;
	background: green;
	width:  100%;
}

.-tr { 
	background: green;
    display: table-row; 
    width:  100% !important;
}

.-td,
.-th { 
    display: table-cell; 
 }

/**************
@BODY < HTML
**************/

html
{
	background: #000 url('/assets/images/heart-darker.svg') no-repeat;
	background-position: center 35vh;
	background-attachment: fixed;
}

body
{
	background-color: rgb(238, 238, 238);
	cursor: default;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
	margin: 0;
	padding: 0;
	transition: all 0.25s ease;
}
body.interstitial
{
	cursor: wait !important;
	opacity: 0.3;
	transition: all 0.25s ease;
}

	body.interstitial #main,
	body.interstitial #header,
	body.interstitial a
	{
		cursor: wait !important;
	}

#wrapper {
	scroll-snap-type: y proximity;
}

/**************
@HEADER-OUTER < WRAPPER
**************/

#header-outer
{
	background: #4B6876 url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjAiIGhlaWdodD0iMzAiPgo8ZGVmcz4KPHJlY3QgaWQ9InIiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxNSIgZmlsbD0iIzRCNjg3NiIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZT0iIzY1N0Q4OSI+PC9yZWN0Pgo8ZyBpZD0icCI+Cjx1c2UgeGxpbms6aHJlZj0iI3IiPjwvdXNlPgo8dXNlIHk9IjE1IiB4bGluazpocmVmPSIjciI+PC91c2U+Cjx1c2UgeT0iMzAiIHhsaW5rOmhyZWY9IiNyIj48L3VzZT4KPHVzZSB5PSI0NSIgeGxpbms6aHJlZj0iI3IiPjwvdXNlPgo8L2c+CjwvZGVmcz4KPHVzZSB4bGluazpocmVmPSIjcCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMjUpIHNrZXdZKDQwKSI+PC91c2U+Cjx1c2UgeGxpbms6aHJlZj0iI3AiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwIDApIHNrZXdZKC00MCkiPjwvdXNlPgo8L3N2Zz4=");
	background-position: bottom center;
	color: #fff;
	display: block;
	height: 20.75rem; /* taken from the actual height; need this for when header-shrinkable is removed */
	margin: 0;
	position: relative;
	z-index: 900;
}
#header-outer.lose-chevrons
{
	background-image: none;
}
#wrapper.reverse #header-outer,
#wrapper.header-reverse #header-outer
{
	background: #fff;
	background: #eee;
	color: #000;
}

	#wrapper #header-outer .console h2,
	#wrapper.header-reverse #header-outer .console h2
	{
		color: #222;
	}

#header-outer .table-holder {
	overflow-x: hidden;
}

/***********
@MAP-STUFF-HOLDER-OUTER < HEADER-OUTER
***********/

#map-stuff-holder-outer
{
	background: #4B6876;
	max-height: 0;
	overflow: hidden;
	transition: all 0.125s ease;
}
#map-stuff-holder-outer.showing
{
	max-height: 6000px;
	padding-bottom: 1rem;
	transition: all 0.125s ease;
}
#map-stuff-holder-outer.jobs-only
{
	background-color: #49A078;
}


	#map-stuff-holder .counter
	{
		border-radius: 0.25rem;
		color: #fff;
		display: inline-block;
		font-size: 0.75rem;
		height: 1rem;
		line-height: 1rem;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
		text-align: center;
	}

	#map-stuff-holder.consoles-display
	{
		margin-bottom: 0;
	}
	#wrapper.reverse #map-stuff-holder.consoles-display
	{
		margin-bottom: 2rem;
	}

		#map-close,
		#wrapper.reverse #header-outer #map-close.icon-button .fa
		{
			color: #fff !important;
		}

		#map-caller-text,
		#map-caller-icon,
		#map-close-2,
		#news-map-caller-text,
		#news-map-caller-icon,
		#news-map-close-2,
		#jobs-map-caller-text,
		#jobs-map-caller-icon,
		#jobs-map-close-2
		{
			float: left;
		}
		#map-close-2,
		#news-map-close-2,
		#jobs-map-close-2
		{
			display: none;
		}
		#map-close:hover,
		#wrapper.reverse #header-outer #map-close.icon-button:hover .fa
		{
			color: #EDD42A !important;
		}


		#map-stuff-holder .counter a
		{
			color: #fff;
		}
		#map-stuff-holder .counter a:hover
		{
			color: #EDD42A;
		}

		#map-listing-holder {
			overflow-y: visible;
			height: auto !important;
			max-width: 31.8%;
		}

			#map-listing-holder h2
			{
				color: #222;
			}

		#map-listing-holder .table-holder table.list th,
		#map-listing-holder .table-holder table.list td
		{
			padding-left: 0.25rem;
			padding-right: 0.25rem;
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
			vertical-align: middle;
		}

			#map-listing-holder .table-holder table.list td p.action
			{
				text-align: center;
			}

		#map-stuff-holder-outer.jobs-only .map-listing-inner:not(.got-jobs),
		#map-stuff-holder-outer.jobs-only .news-bg
		{
			display: none;
		}

		#main #content #map-listing p
		{
			line-height: 1.5;
		}

		#map-listing .action
		{
			line-height: 1rem;
			padding-left: 0.25rem;
			padding-right: 0.25rem;
		}

		#map-listing-holder .table-holder table.list tbody tr td {
			border-top: 1px solid #000;
		}

		#map-listing-holder .table-holder table.list tbody tr.-secondary-campus td {
			border-top: 0px solid #000;
		}

		#map-listing-holder .table-holder table.list td
		{
			padding-top: 0.25rem;
			padding-bottom: 0.25rem;
		}

		#map-listing-holder .table-holder,
		#main #content #map-listing-holder .table-holder p,
		#main #content #map-listing-holder .table-holder td
		{
			font-size: 0.8rem !important;
			width: auto;
		}

			#map-listing-holder .table-holder .school-name-holder,
			#main #content #map-listing-holder .table-holder .school-name-holder
			{
				max-width: 11.5rem !important;
				margin-right: 0 !important;
			}

				#map-listing-holder .table-holder p
				{
					margin-left: 0 !important;
					margin-right: 0 !important;
				}


				#map-listing-holder .table-holder .school-name-holder p.link
				{
					float: left !important;
					margin-right: 0.5rem !important;
				}

					#map-listing-holder .table-holder .school-name-holder .link .fa
					{
						font-size: 1.5rem !important;
					}


				#map-listing-holder .table-holder th.school-name-holder p,
				#map-listing-holder .table-holder .school-name-holder p.school-name
				{
					line-height: 1.2rem !important;
					letter-spacing: 0 !important;
					font-weight: 500 !important;
					font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif !important;
					text-transform: uppercase;
				}

				#map-listing-holder .table-holder .city-holder
				{
					min-width: 3rem !important;
					max-width: 6rem !important;
					margin-left: 0 !important;
					text-align: right !important;
				}

				#map-listing-holder .table-holder .city-holder p
				{
					line-height: 1.34rem !important;
					text-align: right !important;
				}


		#map_canvas
		{
			/* line-height: normal; */
		}

		#map-holder
		{
			padding: 1rem;
			height: auto;
			height: 50rem;
			width: 61.8%;
		}

		#my_full_map
		{
			width: 100%;
			height: 100%;
			z-index: 800;
		}

	/* #map once moved to within #main in homepage */

	#main #map-stuff-holder
	{
		margin-bottom: 1rem;
	}

		#main #content #map-listing-holder h2
		{
			width: auto;
			color: rgb(34, 34, 34);
			font-weight: 400;
			border: 0;
			font-size: 1.5rem !important;
			margin-top: 1rem;
			margin-bottom: 0;
		}

		#main #content #map-holder p
		{
			width: auto;
			text-align: center;
			font-size: 0.8rem;

		}

/**************
@MAP-HOLDER
**************/

#main #content #map-holder .gm-style-iw p
{
	line-height: normal;
}

.gm-style {

	color: #fff !important;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
}

p.map-key,
#main #content #map-listing-holder .table-holder p.map-key {
/*	background-color: #b23a48; */
	width: 1.75rem;
	height: 1.75rem;
	height: 2.5rem;
/*	border-radius: 50%; */
	text-align: center;
	font-weight: 500;
	line-height: 1.75rem;
	color: #333 !important;
}

p.map-key {

	background-image: url("/assets/graphics/google-map-marker.svg");
	background-repeat: no-repeat;
	background-position: 0.125rem 0 !important;
}

.map-listing:hover p.map-key {

	background-image: url("/assets/graphics/google-map-marker-hover.svg");
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

.google-map-marker {
	transform: scale(2.0) !important;
}

.school-name a:hover {
	color: #D67643 ;
}

p.map-key:hover {

		color: #fff !important;
}


/**************
@HEADER < HEADER-OUTER
**************/

#wrapper.reverse #header
{
	padding-bottom: 0;
}

	#header .crest-holder
	{
		display: none;
		position: absolute;
		top: 2rem;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

		.crest
		{
			color: #4B6876;
		}
		#header .crest
		{
			position: relative;
			text-align: center;
			width: 4.75rem;
			display: block;
			margin: 0 auto;
			z-index: 99 !important;
			z-index: 19 !important;
		}

			.crest .fa
			{
				font-size: 1rem;
			}
			#wrapper.reverse #header .crest-holder .crest .fa
			{
				color: #4B6876;
			}
			#header .crest-holder .crest .fa
			{
				color: #fff;
			}
			.crest-holder:hover .crest .fa
			{
				color: #EDD42A !important;
			}
			#the-end .crest-holder:hover .crest .fa
			{
				color: #BE6500;
			}


			#header .crest img
			{
				background: #4B6876;
				padding: 0.125rem;
				border-radius: 50%;
				width: 4.5rem;
				height: 4.5rem;
				display: inline-block;
				margin-top: -0.25rem;
			}


/**************
@HEADER.MINI < HEADER-OUTER
**************/

#header.mini
{

	background: #4B6876  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjAiIGhlaWdodD0iMzAiPgo8ZGVmcz4KPHJlY3QgaWQ9InIiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxNSIgZmlsbD0iIzRCNjg3NiIgc3Ryb2tlLXdpZHRoPSIwLjUiIHN0cm9rZT0iIzY1N0Q4OSI+PC9yZWN0Pgo8ZyBpZD0icCI+Cjx1c2UgeGxpbms6aHJlZj0iI3IiPjwvdXNlPgo8dXNlIHk9IjE1IiB4bGluazpocmVmPSIjciI+PC91c2U+Cjx1c2UgeT0iMzAiIHhsaW5rOmhyZWY9IiNyIj48L3VzZT4KPHVzZSB5PSI0NSIgeGxpbms6aHJlZj0iI3IiPjwvdXNlPgo8L2c+CjwvZGVmcz4KPHVzZSB4bGluazpocmVmPSIjcCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtMjUpIHNrZXdZKDQwKSI+PC91c2U+Cjx1c2UgeGxpbms6aHJlZj0iI3AiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwIDApIHNrZXdZKC00MCkiPjwvdXNlPgo8L3N2Zz4=");
	background-position: bottom center;
	display: none; /* slideDown undoes this */
	height: auto;
	position: fixed;
	top: 0;
	width: 100%;


}

	#header.mini .crest-holder
	{
		display: block;

	}

	#header.mini #masthead-outer
	{
		display: none;
	}

	#header.mini #header-inner
	{
		margin-top: 0;
		padding-bottom: 0;
	}

		#header.mini #header-inner #main-services
		{
			margin-top: 0;
		}

#wrapper.reverse #header.mini
{
	background: #eee;
}


/**************
@INFO-BOXES < HEADER
**************/

.info-box-holder
{
	position: relative;
	transition: all 0.125s ease;
}
.info-box-holder.active
{
	overflow: visible !important;
}

	.info-box-caller
	{
		left: 0;
		margin: 0;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 10;
	}

	.info-box
	{
		border-radius: 1rem;
		height: 0;
		left: 0;
		opacity: 0;
		overflow: hidden;
		padding-top: 4rem;
		position: absolute;
		top: 0;
		transition: all 0.125s ease;
	}

	.icon-button-open
	{
		cursor: pointer;
	}

	.info-box-content
	{
		color: #4B6876;
		padding: 1.5rem;
	}
	.reverse .info-box-content
	{
		color: #fff;
	}
	.info-box-content.move-up
	{
		padding-top: 0;
	}

	.icon-button-close
	{
		cursor: pointer;
		float: right;
		margin-top: -0.75rem !important;
	}

	#font-size-buttons {
	/*	background:  #000;  */
		display:  flex;
		font-size: 1rem;
	/*	justify-content: center; */
		left: calc(50% - 10rem);
		left:  18rem;
		position:  absolute;
		top: 0.5rem;
		width:  20rem;
		width:  auto;
		z-index: 100;
	}

	.reverse #font-size-buttons {
		color:  #4a6775;
	}

		#font-size-buttons p {
			display:  inline-block;
			padding:  0rem;
			margin: 0rem;
			margin-top: 0;
			padding-left: 0.25rem;
			padding-right: 0.25rem;
			/* border:  1px solid #000; */
		}

			#font-size-buttons p:hover {
				cursor: pointer;
				color: #edd42a;
			}
			.reverse #font-size-buttons p:hover {
				color: #fea139;
			}

			#font-size-buttons p:active {
				color: #fea139;
			}
			.reverse #font-size-buttons p:active {
				color: #BE6500;
			}


		#font-size-normal::after {
		}


/**************
@TABS-OUTER (MAP LINK) < HEADER
**************/

#tabs-outer
{
	border-spacing: 1rem 0;
	color: #4B6876;
	display: table;
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace;
	font-size: 1rem;
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.1rem;
	line-height: 1.25rem;
	position: absolute; /* or floats also fine */
	text-transform: uppercase;
	transition: all 0.25s ease;
	width: auto;
	z-index: 50;
	z-index: 15;
}


/**************
@TABS < TABS-OUTER
**************/

#tabs
{
	display: table-row;
}

	#tabs > div
	{
		background: #fff;
		border-bottom-left-radius: 0.5rem;
		border-bottom-right-radius: 0.5rem;
		display: table-cell;
		min-width: 4rem;
		padding: 0.5rem;
		text-align: left;
		vertical-align: middle;
	}

		#wrapper.reverse #tabs-outer .tab,
		#wrapper.header-reverse #tabs-outer .tab
		{
			background: #4B6876;
			color: #fff;
		}


		#tabs-outer p
		{
			line-height: 1.25rem;
			margin: 0;
		}

	#header-outer #tabs .icon-tab .fa
	{
		font-size: 2.5rem;
	}
	#header-outer #tabs .icon-tab a .fa
	{
		color: #4B6876;
	}
	#header-outer #tabs .icon-tab a:hover .fa
	{
		color: #BE6500;
	}
	#wrapper.reverse #header-outer #tabs .icon-tab a .fa,
	#wrapper.header-reverse #header-outer #tabs .icon-tab a .fa
	{
		color: #fff;
	}
	#wrapper.reverse #header-outer #tabs .icon-tab a:hover .fa
	{
		color: #EDD42A !important;
	}

/**************
@MAP-CALLER < TABS
**************/

#map-caller,
#jobs-map-caller
{
	cursor: pointer;
}
#map-caller:hover,
#jobs-map-caller:hover
{
	color: #BE6500;
}
#wrapper.reverse #map-caller:hover,
#wrapper.header-reverse #map-caller:hover,
#wrapper.reverse #jobs-map-caller:hover,
#wrapper.header-reverse #jobs-map-caller:hover,
#wrapper.header-reverse #jobs-map-caller:hover p .fa
{
	color: #FEA139 !important;
}

/**************
@MENUS-OUTER (ADMIN MENU) < HEADER
**************/

#header #menus-outer
{
	left: 0;
	left: 24rem;
	top: 0rem;
	/* top: 3.5rem;  nicer but inexplicably messes up login interstitial */
	position: absolute;
}

	#header-outer #menus > div
	{
		height: 4rem;
		text-align: left;
		vertical-align: middle;
	}

/**************
@ADMIN-INFO-BOX < MENUS
**************/

#admin-info-box
{
	width: 38.2vw;
	left: 0.5rem;
	right: auto;
}

#header-outer #menus #admin-close.icon-button-close
{
	margin-top: -2rem !important;
	margin-right: -1rem;
}

#admin-icon-close
{
	color: #fff !important;
}

#admin-info-box .console
{
	float: left;
}

#admin-info-box .form
{
	background: #735f3d;
}

#admin-info-box p.form
{
	color: #fff;
}

#admin-info-box-holder
{
	top: 0rem;
}

#jquery-live-search
{
	z-index: 910;
}

#jquery-live-search a
{
	color: #EDD42A;
}

	#lookup-input-member.loading {
		background: url('/assets/images/heart-darker.svg') no-repeat !important;
	}

	#input-keyword.loading {
		background: rgba(0,0,0,0.5) url('/assets/images/heart-darker.svg') no-repeat !important;
	}

	#lookup-input-member.loading,
	#input-keyword.loading
	{
		background-size: 2rem !important;
		background-position: right !important;
	}


#jquery-live-search .action a
{
	color: #fff;
}

#jquery-live-search a:hover
{
	color: #FEA139;
}

#member
{
	float: right;
	line-height: 1.25rem;
	padding-right: 0.5rem;
	text-align: right;
	vertical-align: middle;
	width: 20rem;
}
#wrapper.reverse #member
{
	color: #4B6876;
}
#member:hover
{
	color: #F2C151 !important;
}
#wrapper.reverse #member:hover
{
	color: #BE6500 !important;
}

	#member .fa
	{
		float: right;
		padding-left: 0.5rem;
	}

#admin-icon:hover
{
	cursor: pointer;
}

#admin-icon-close
{
	margin-right: -2rem !important;
	margin-top: -2rem !important;
}

#admin-info-box-caller
{
	top: 0rem;
	left: 0rem;
	display: block;
}

/* to stop it blocking masthead link */
#admin-info-box
{
	padding: 0;
}

#admin-info-box-caller
{
	padding: 1rem;
}

#admin-info-box .info-box-content
{
	padding: 2.5rem;
}

#admin-info-box p.system
{
	font-weight: 400 !important;
}


/**************
@ICONS-OUTER (USER MENU) < HEADER
**************/

#header #icons-outer
{
	position: absolute;
	right: 0;
	/* transition: all 0.25s ease; */
}

	#about-button-holder,
	#tabs div#menu-caller-holder {
		display: none;
	}

	#header-outer #icons > div
	{
		height: 4rem;
		text-align: left;
		text-align: right;
		vertical-align: middle;
		width: auto;
	}

		#header-outer #icons .icon-button,
		#header-outer #menus .icon-button
		{
			margin: 0;
		}

			#header-outer .icon-button .fa
			{
				color: #fff;
				font-size: 2.5rem;
			}
			#header-outer .icon-button:hover .fa
			{
				color: #EDD42A;
			}
			#wrapper.reverse #header-outer .icon-button:hover .fa
			{
				color: #BE6500 !important;
			}
			#wrapper.reverse #header-outer .icon-tab:hover .fa
			{
				color: #FEA139 !important;
			}
			#wrapper.reverse #header-outer #member-close.icon-button:hover .fa,
			#wrapper.reverse #header-outer #admin-close.icon-button:hover .fa
			{
				color: #EDD42A !important;
			}

/**************
@MEMBER-INFO-BOX < ICONS
**************/

#member-info-box
{
	left: auto;
	right: 0.5rem;
	text-align: right;
	width: 61.8vw;
}

#gravatar {

/*	position: absolute; */
	float: right;
	margin-left: 0.5rem;
}

#gravatar img {

	border-radius: 50%;
	border: 0.125rem #fff solid;
	width: 2.5rem;
	height: 2.5rem;
	/* opacity: 0.5; */
}
#member:hover #gravatar img {

	border: 0.125rem #f2c151 solid;
}

#wrapper.reverse #gravatar img {

	border: 0.125rem #4B6876ff solid;
}
#wrapper.reverse #member:hover #gravatar img {

	border: 0.125rem #BE6500 solid;
}

#logged-in-person-name {
/*	margin-right: 3rem; */
}

#header-outer #member-info-box,
#header-outer #admin-info-box
{
	color: #000;
	font-size: 90% !important;
}

#member-info-box-caller:hover
{
	color: #F2C151;
}

	#header-outer #member-info-box p,
	#header-outer #admin-info-box p,
	#header-outer #member-info-box li,
	#header-outer #admin-info-box li
	{
		font-size: 90%;
	}

	#header-outer #member-info-box h2 a:hover
	{
		color: #FEA139;
	}

	#logout-indicator-holder
	{
		display: none;
		text-align: center;
	}

		#logout-indicator {
			width: 3rem;
		}

	#member-icon-close
	{
		color: #fff !important;
		margin-right: -0.5rem !important;
		z-index: 50;
	}

	#member-info-holder
	{
		background: #4B6876;
	}
	#wrapper.reverse #member-info-holder,
	#wrapper.header-reverse #member-info-holder
	{
		background: #eee;
	}

	#member-info-box li
	{
		font-size: 0.9rem;
		line-height: 1.1rem;
		list-style: none;
		margin-bottom: 0.25rem;
		margin-top: 0.25rem;
		padding-bottom: 0.5rem;
		padding-left: 1.5rem;
		padding-right: 0.75rem;
		padding-top: 0.5rem;
		text-align: left;
	}

		#member-info-box .info-box-content li:hover a,
		#member-info-box .info-box-content p:hover a
		{
			color: #EDD42A;
		}

		#member-info-box .info-box-content .position-title p:hover a,
		#member-info-box li:hover a .alt-color,
		#member-info-box p:hover a .alt-color
		{
			color: #4B6876;
		}

	#member-info-box .console,
	#current-roles.console
	{
		float: right;
	}

	.group
	{
		clear: both;
	}

	.group p
	{
		margin: 0;
	}

	#member-info-box-caller
	{
		top: 0.5rem;
	}

	#member-info-box,
	#admin-info-box
	{
		border: 1px solid #aaa;
		font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace;
		font-weight: 200;
		padding: 1rem;
		top: 0.5rem;
	}

	#not-logged-in
	{
		border-bottom: 1px solid #222;
		border-top: 1px solid #222;
		margin: 3rem auto;
		padding-bottom: 1rem;
		padding-top: 1rem;
		width: 52.5rem;
	}

	#member-info-box.logged-out
	{
		width: 38.2vw;
	}

	#member-info-box-holder.active #member-info-box,
	#admin-info-box-holder.active #admin-info-box
	{
		background: #735F3D;
		/*
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjAiIGhlaWdodD0iMzAiPgo8ZGVmcz4KPHJlY3QgaWQ9InIiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiNmZmYiIG9wYWNpdHk9IjAuMzQiPjwvcmVjdD4KPGcgaWQ9InAiPgo8dXNlIHhsaW5rOmhyZWY9IiNyIj48L3VzZT4KPHVzZSB5PSIxNSIgeGxpbms6aHJlZj0iI3IiPjwvdXNlPgo8dXNlIHk9IjMwIiB4bGluazpocmVmPSIjciI+PC91c2U+Cjx1c2UgeT0iNDUiIHhsaW5rOmhyZWY9IiNyIj48L3VzZT4KPC9nPgo8L2RlZnM+Cjx1c2UgeGxpbms6aHJlZj0iI3AiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTI1KSBza2V3WSg0MCkiPjwvdXNlPgo8dXNlIHhsaW5rOmhyZWY9IiNwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMCAwKSBza2V3WSgtNDApIj48L3VzZT4KPC9zdmc+");
		*/
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjAiIGhlaWdodD0iMzAiPgo8ZGVmcz4KPHJlY3QgaWQ9InIiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxNSIgZmlsbD0iIzczNUYzRCIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC41IiBzdHJva2U9IiNkZGQiPjwvcmVjdD4KPGcgaWQ9InAiPgo8dXNlIHhsaW5rOmhyZWY9IiNyIj48L3VzZT4KPHVzZSB5PSIxNSIgeGxpbms6aHJlZj0iI3IiPjwvdXNlPgo8dXNlIHk9IjMwIiB4bGluazpocmVmPSIjciI+PC91c2U+Cjx1c2UgeT0iNDUiIHhsaW5rOmhyZWY9IiNyIj48L3VzZT4KPC9nPgo8L2RlZnM+Cjx1c2UgeGxpbms6aHJlZj0iI3AiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTI1KSBza2V3WSg0MCkiPjwvdXNlPgo8dXNlIHhsaW5rOmhyZWY9IiNwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMCAwKSBza2V3WSgtNDApIj48L3VzZT4KPC9zdmc+");
		/* fill='#735F3D' stroke-width='1' stroke-opacity='0.5' stroke='#ddd' */
	}

	#member-info-box ul
	{
		padding-left: 0;
	}

	#member-info-box a
	{
		font-weight: 400;
	}

	#member-info-box .info-box-content
	{
		padding: 0;
	}

	#wrapper.reverse #member-info-box h2
	{
		color: #222;
	}

	#wrapper.reverse #member-info-box-caller:hover
	{
		color: #BE6500 !important;
	}

	#header-outer #member-close.icon-button-close:hover .fa,
	#header-outer #admin-close.icon-button-close:hover .fa
	{
		color: #EDD42A !important;
	}

	#member-info-box #my-roles p.position-title
	{
		max-width: 20rem;
	}

		#member-info-box #my-roles p.position-title a
		{
			padding-left: 1.25rem;
			text-indent: -0.45rem;
		}


/**************
@HEADER-INNER < HEADER
**************/

#header-inner
{
	margin: 0 auto;
	max-width: 80rem;
	padding-bottom: 1rem;
}

	#header-inner a:hover,
	#footer-inner a:hover
	{
		color: #F2C151;
	}

	#header-inner h1
	{
		font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif;
		font-style: normal;
		/* font-weight: 400; */
		text-transform: uppercase;
	}

	#header-inner .info-box-holder h3 a
	{
		color: #fff;
	}

	#header-inner li
	{
		margin-bottom: 0.5rem;
	}

/**************
@MASTHEAD < HEADER-INNER
**************/

#header-inner #masthead-outer
{
	clear: both;
	display: table;
	padding-top: 3rem;
	z-index: 60;
}

#header-inner #masthead-outer #masthead
{
	display: table-row;
}

#header-inner #masthead-outer #masthead > div
{
	display: table-cell;
	vertical-align: middle;
}

#header-inner #masthead-outer #masthead #sitename-holder,
#header-inner #masthead-outer #masthead #about-info-box-holder
{
	width: 42%;
}

#header-inner #masthead-outer #masthead #sitename-holder
{
	text-align: left;
}

#header-inner #masthead-outer #masthead #sitename-holder h1
{
	color: #EDD42A;
	font-size: 2.75rem;
	font-weight: 500;
}

#header-inner #masthead-outer #masthead #sitename-holder h1 a
{
	color: #EDD42A;
}

#wrapper.reverse #header-inner #masthead-outer #masthead #sitename-holder h1 a
{
	color: #333 !important;
}


#wrapper.reverse #header-inner #masthead-outer #masthead #sitename-holder h1,
#wrapper.header-reverse #header-inner #masthead-outer #masthead #sitename-holder h1
{
	color: #4b6876;
	color: #333;
}

#header-inner #masthead-outer #masthead #logo-holder
{
	padding-left: 2rem;
	padding-right: 2rem;
	text-align: center;
	z-index: 12;
	position: relative;
	overflow: visible;
}

#header-inner #masthead-outer #masthead #logo-holder img
{
	width: 10rem;
}

/**************
@SEARCH-BOX < MASTHEAD < HEADER-INNER
**************/

#search-box {
	position: absolute;
	z-index: -10;
	right: 0;
	bottom: 0;
	display: flex;
	margin-right: -20rem;
	margin-bottom: -0.25rem;
/*	background: rgba(0,0,0,0.5); */
	padding: 0.25rem !important;
	border-radius: 0.67rem;
}

#search-box .input-holder {
/*	border: 0.125rem solid #5b85aa; */
	border-radius: 0.5rem;
	width: 100%;
}

#search-box input[type="text"] {
	background: rgba(0,0,0,0.5);
	background-size: 2rem !important;
	background-position: right !important;
	border: 0.125rem solid #6f8691 !important;

	border-radius: 0.5rem;
	padding: 0.125rem 0.5rem;
	width: 20rem;
	color: #edd42a;
	color: #fff;
	color: #fea139;
}
#wrapper.reverse #search-box input[type="text"] {
	background: rgba(0,0,0,0.8);
}


#search-box input[type="text"]:focus {
	/*
	border: 0.125rem solid #fea139;
	border: 0.125rem solid #edd42a;
	*/
}

#search-box ::placeholder {
	opacity: 0.9;
	color: #edd42a;
}

#search-box ::placeholder:hover {
	color: #edd42a;
	opacity: 0.9;
}

#search-icon {
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0.375rem;
	margin-right: 0.25rem;
	padding: 0;
	font-size: 1.75rem;
/*	color: #b23a48; */
	color: #edd42a;

}

#search-icon:hover {
/*	cursor: pointer;
	color: #fea139; */
}

/**************
@ABOUT-INFO-BOX-HOLDER < MASTHEAD
**************/

#about-info-box-holder .info-box-caller
{
	margin: 1rem 0;
}

/**************
@ABOUT-INFO-BOX < ABOUT-INFO-BOX-HOLDER
**************/

#about-info-box
{
	background: #fff;
	border: 2px solid #4B6876;
	left: auto;
	padding-top: 2.5rem;
	right: -0.75rem;
	top: 6rem;
	width: 18rem;
}

	#about-info-box ul
	{
		padding-left: 1.25rem;
		padding-right: 1rem;
	}

		#about-info-box li
		{
			list-style: none;
			text-align: right;
		}

		#header-inner #masthead-outer #masthead #about-info-box-holder p
		{
			font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
			font-size: 1.25rem;
			font-weight: 200;
			line-height: 2rem;
			text-align: right;
		}

			#header-inner #masthead-outer #masthead #about-info-box-holder p a,
			#header-inner #masthead-outer #masthead #about-info-box-holder p .menu-spawner
			{
				color: #FEA139;
				float: right;
				font-weight: 500;
				text-decoration: none;
			}

			#header-inner #masthead-outer #masthead #about-info-box-holder p .menu-spawner.spawned
			{
				color: #4B6876;
			}

			#wrapper.reverse #header-inner #masthead-outer #masthead #about-info-box-holder p .menu-spawner.spawned,
			#wrapper.header-reverse #header-inner #masthead-outer #masthead #about-info-box-holder p .menu-spawner.spawned
			{
				color: #fff;
			}

			#wrapper.reverse #header-inner #masthead-outer #masthead #about-info-box-holder p a,
			#wrapper.header-reverse #header-inner #masthead-outer #masthead #about-info-box-holder p a,
			#wrapper.reverse #header-inner #masthead-outer #masthead #about-info-box-holder p .menu-spawner,
			#wrapper.header-reverse #header-inner #masthead-outer #masthead #about-info-box-holder p .menu-spawner
			{
				color: #4b6876;
			}

			#header-inner #main-services ul#top-level li .info-box li a:hover,
			#header-inner #main-services ul#top-level li .info-box p a:hover,
			#wrapper.reverse #header-inner #about-info-box.info-box li a:hover,
			#wrapper.reverse-header #header-inner #about-info-box.info-box li a:hover
			{
				color: #FEA139 !important; /* works for both regular and reverse */
			}


/**************
@MAIN-SERVICES < HEADER-INNER
**************/

#header-inner #main-services
{
	display: table;
	height: 5rem; /* Why is this necessary, why doesn't it get height naturally from chidlren? */
	margin-top: 1.5rem;
	width: 100%;
}
#header.mini #main-services
{
	margin-top: 1rem;
}

	#main-services .info-box-content h3
	{
		color: #4B6876 !important;
	}

	.header-reverse #main-services .info-box-content h3,
	.reverse #main-services .info-box-content h3
	{
		color: #fff !important;
	}

	.info-box-holder.active .info-box-caller
	{
		z-index: 21 !important;
	}

	.info-box-holder.active .info-box
	{
		z-index: 20;
	}

	#main-services .info-box-caller:hover + .info-box,
	#main-services .info-box.active:hover,
	#masthead-outer .info-box-caller:hover + .info-box,
	#masthead-outer .info-box.active:hover
	{
		height: auto;
		opacity: 1;
	}

	#header-inner #main-services ul#top-level
	{
		display: table-row;
	}

	#header-inner #main-services ul#top-level li
	{
		display: table-cell;
		width: 25%;
		text-align: center;
	}

	#header-inner #main-services ul#top-level li p.top-level

	{
		font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif;
		font-size: 1rem;
		font-style: normal;
		font-weight: 400;
		letter-spacing: 0.05rem;
		line-height: 1.5rem;
		text-transform: uppercase;
	}

	#header-inner #main-services .top-level a,
	#header-inner #main-services .top-level .menu-spawner,
	#header-inner #main-services .top-level .menu-spawner.unspawned
	{
		color: #fff;
		text-decoration: none;
		z-index: 999;
	}

	#main-services .active .info-box-caller p,
	#wrapper.reverse #header-outer .icon-button .fa,
	#wrapper.reverse #header-outer .icon-tab .fa,
	#header-inner #main-services .info-box-holder:hover a,
	#wrapper.header-reverse #header-outer .icon-button .fa,
	#wrapper.reverse #header-inner #main-services .top-level a,
	#wrapper.header-reverse #header-inner #main-services .top-level a,
	#wrapper.reverse #header-inner #main-services .top-level .menu-spawner,
	#wrapper.reverse-header #header-inner #main-services .top-level .menu-spawner,
	#header-inner #main-services .top-level .menu-spawner.spawned
	{
		color: #4B6876;
	}

	#wrapper.reverse #header-outer .icon-tab .fa,
	#wrapper.reverse #header-inner #main-services .top-level .menu-spawner.spawned,
	#wrapper.reverse-header #header-inner #main-services .top-level .menu-spawner.spawned
	{
		color: #fff;
	}


	#header-inner #main-services .top-level a:hover,
	#header-inner #main-services .info-box-holder:hover a:hover
	{
		color: #BE6500;
	}

	.reverse #header-inner #main-services .top-level a:hover,
	.reverse #header-inner #main-services .info-box-holder:hover li a,
	.header-reverse #header-inner #main-services .top-level a:hover,
	.header-reverse #header-inner #main-services .info-box-holder:hover li a,
	.reverse #header-inner #masthead .info-box-holder a:hover,
	.reverse #header-inner #masthead .info-box-holder:hover li a,
	.header-reverse #header-inner #masthead .info-box-holder a:hover,
	.header-reverse #header-inner #masthead .info-box-holder:hover li a
	{
		color: #EDD42A !important;
	}

	#wrapper.reverse #header-outer .icon-button .fa.active,
	#wrapper.header-reverse #header-outer .icon-button .fa.active
	{
		color: #fff;
		opacity: 0.85;
	}

	#header-inner #main-services ul#top-level li .info-box ul
	{
		padding-left: 0;
	}

	#header-inner #main-services ul#top-level li .info-box li,
	#header-inner #main-services ul li.standard-title
	{
		display: block;
		text-align: left;
		width: auto;
	}

	#header-inner #main-services ul#top-level li .info-box li a,
	#header-inner #main-services ul#top-level li .info-box li p,
	#header-inner #masthead ul#top-level li .info-box li a
	{
		color: #BE6500;
		font-weight: 300;
	}

			#header-inner #main-services ul#top-level li .info-box li a .event-title {
				font-weight: 400 !important;
			}


	#header-inner #main-services ul#top-level li .info-box p
	{
		margin-bottom: 0.5rem;
		margin-top: 0.5rem;
		text-align: left;
		text-transform: none !important;
	}

	#header-inner .info-box-holder:hover .info-box ol
	{
		margin-left: -0.75rem;
	}

	#header-inner .info-box-holder:hover .info-box ol li
	{
		line-height: 1.5rem;
		text-indent: -1.87rem;
	}

	#header-inner ul#meeting-sessions-menu-list
	{
		font-size: 0.9rem;
		list-style-type: disc !important;
	}

	#header-inner ul#meeting-sessions-menu-list li
	{
		list-style-type: disc !important;
		margin-bottom: 0;
	}

	#header-inner ul#meeting-sessions-menu-list li:before
	{
		content: "•"; /* Insert content that looks like bullets */
	}

	#main-services .info-box
	{
		background: #fff;
		border: 2px solid #4B6876;
		width: 100%;
	}

	#wrapper.reverse #header-inner #main-services .info-box,
	#wrapper.reverse #header-inner #about-info-box,
	#wrapper.header-reverse #header-inner #main-services .info-box,
	#wrapper.header-reverse #header-inner #about-info-box
	{
		background: #4B6876;
		border: 0px solid #4B6876;
	}

	#header-inner #main-services .info-box-holder:hover,
	#header-inner #about-info-box-holder:hover #about-info-box
	{
		color: #333;
	}

	.reverse #header-inner #main-services .info-box-holder:hover,
	.reverse #header-inner #about-info-box-holder:hover #about-info-box,
	.header-reverse #header-inner #main-services .info-box-holder:hover,
	.header-reverse #header-inner #about-info-box-holder:hover #about-info-box
	{
		color: #ccc;
	}

	#header-inner #main-services .info-box-holder:hover a:hover
	{
		color: #FEA139;
	}

#header-inner #school-accreditation-info-box-holder:hover h3,
#header-inner #professional-development-info-box-holder:hover h3,
#header-inner #meetings-and-workshops-info-box-holder:hover h3,
#header-inner #educational-news-info-box-holder:hover h3
{
	color: #000;
	font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.05rem;
	line-height: 1.5rem;
	margin-bottom: 1.5rem;
	margin-top: 1.5rem;
	text-transform: uppercase;
}
.header-reverse #header-inner #school-accreditation-info-box-holder:hover h3,
.header-reverse #header-inner #professional-development-info-box-holder:hover h3,
.header-reverse #header-inner #meetings-and-workshops-info-box-holder:hover h3,
.header-reverse #header-inner #educational-news-info-box-holder:hover h3
.reverse #header-inner #school-accreditation-info-box-holder:hover h3,
.reverse #header-inner #professional-development-info-box-holder:hover h3,
.reverse #header-inner #meetings-and-workshops-info-box-holder:hover h3,
.reverse #header-inner #educational-news-info-box-holder:hover h3
{
	color: #fff;
}

#header-inner #main-services ul#top-level li #meetings-and-workshops-info-box.info-box p.event-title
{
	margin-bottom: 0;
}

#header-inner #main-services ul#top-level li #meetings-and-workshops-info-box.info-box p.date
{
	margin-bottom: 0.25rem;
	margin-top: 0;
	text-align: right;
}

#header-inner #main-services ul#top-level li #meetings-and-workshops-info-box.info-box li
{
	margin-bottom: 2rem !important;
}

#header-inner #main-services ul#top-level li #meetings-and-workshops-info-box.info-box li li
{
	margin-bottom: 0 !important;
}


/**************
@SCHOOL-ACCREDITATION < MAIN-SERVICES
**************/

#school-accreditation-info-box
{
	background: #5B85AA;
}

#header-inner #school-accreditation-info-box-holder:hover .info-box p a,
#header-inner #school-accreditation-info-box-holder:hover .info-box li a
{
	color: #BE6500;
	font-weight: 300;
	text-decoration: none;
}

	#header-inner #school-accreditation-info-box-holder:hover .info-box p a span,
	#header-inner #school-accreditation-info-box-holder:hover .info-box li a span
	{
		font-weight: 700;
	}

#school-accreditation-info-box-content p
{
	margin-left: 1.5em;
}

/**************
@PROFESSIONAL DEVELOPMENT < MAIN-SERVICES < HEADER
**************/

#header-inner #professional-development-info-box-holder:hover a,
#header-inner #professional-development-info-box-holder a:hover
{
	color: #BE6500;
}

#professional-development-info-box .activities-list li,
#professional-development-info-box .jobs-list li
{
	line-height: 1.34rem;
	margin-bottom: 1rem;
}

	#professional-development-info-box .jobs-list li .position-title {
		font-weight: 400;
	}


	#professional-development-info-box .jobs-list li .school-name {
		font-size: 0.9rem;
		font-weight: 400 !important;
	}


/**************
@MAIN-OUTER < WRAPPER
**************/

#main-outer
{
	scroll-snap-align: start;
	scroll-snap-type: y proximity;
}

/**************
@MAIN < MAIN-OUTER
**************/

#main
{
	margin: 0 auto;
	position: relative;
	height: auto;
}
#main,
.display-outer,
.display,
.display-inner,
#main.roles
{
	background: #eee;
}

	#main .float-left
	{
		float: left;
		margin-bottom: 0.25rem;
		margin-right: 0;
	}

	#main h1
	{
		color: #FEA139;
		font-size: 2.75rem;
		font-weight: 700;
		font-weight: 600;
		margin-bottom: 1rem;
		margin-left: auto;
		margin-right: auto;
		margin-top: 3rem;
		text-align: center;
		transition: all 0.25s ease;
		width: 64.25rem;
		font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
	}
	#main.fullscreen h1,
	#wrapper.reverse #main.fullscreen h1
	{
		font-size: 6rem !important;
		letter-spacing: -0.0125em;

		line-height: 1.05 !important;
		line-height: 1 !important;
		line-height: 1.1 !important;
		text-align: center;
	}
	#wrapper.reverse #main.fullscreen h1
	{
		border: 0;
	}
	@media only screen and (min-width: 750px) {
		#main.fullscreen h1.-align-left {
			text-align: left;
			font-size: 5rem !important;
		}
		#main.fullscreen h1.-align-right {
			text-align: right;
			font-size: 5rem !important;
		}
	}
	#main .form-holder h1.console-title, 
	#main.roles .form-holder h1.console-title {
		font-size: 1.25rem !important;
	}


	#main.text h1,
	#main.reset-password h1,
	#main.accreditation.strands h1,
	#main.administrative.standards h1
	{
		font-size: 4rem;
	}
	#main.roles > h1 {
		font-size:  1.5rem;
	}

	#main h1.registration
	{
		color: #222;
	}
	#wrapper.reverse #main h1
	{
		margin-top: 0.5rem;
		padding-bottom: 1rem;
		padding-top: 1rem;
	}
	#wrapper.reverse #main > h1
	{
		border-top: 2px solid #000 !important;
	}
	#wrapper.reverse #main.roles > h1
	{
		border-bottom: 2px solid #000 !important;
	}
	#wrapper.reverse.prt-2 #main h1,
	#wrapper.reverse.csf-1 #main h1,
	#wrapper.reverse.profile #main h1
	{
		border-bottom-color: #eee;
		border-top-color: #eee;
	}
	#wrapper.reverse.forms #main h1,
	#wrapper.reverse.views #main h1
	{
		color: #000;
	}
	#wrapper.reverse.forms #main.fullscreen h1,
	#wrapper.reverse.views #main.fullscreen h1
	{
		font-family: "Operator SSm A", "Operator SSm B";
		font-weight: 500;
		margin-top: 3rem;
	}

		#main.fullscreen #content h1,
		#main.roles h1
		{
			font-size: 2.75rem !important;
		}
		#main.roles.postits > h1
		{
			font-size: 1.5rem !important;
			line-height: 1.75rem !important;
		}

		#main.roles h1 #position-title
		{
			font-size: 2.75rem;
			font-weight: 600;
			line-height: 3.3rem;
		}

		#main.roles.postits > h1 #position-title {
			font-size: 1.5rem;
			line-height: 1.75rem;
		}

		#main.roles > h1 .school-name
		{
			color: #333;
			font-size: 2.75rem;
			line-height: 3.3rem;
			opacity: 0.5;
		}

		#main.roles.postits > h1 .school-name
		{
			font-size: 1.5rem;
			line-height: 1.75rem !important;
		}

		#main.roles.postits > h1 #person-name {

			font-size: 1.5rem;
			line-height: 1.75rem !important;
		}

		#main.forms > h1 .school-name {
			opacity: 0.5;
		}

#main.reports
{
}

	#main.reports .console
	{
		margin: 0 auto;
		display: block;
		background: none;
	/*	overflow: scroll;  because sticky th*/
		max-width: 100%;
	}

		#main.reports .table-holder table{
			margin-top: 2rem;
		}

/**************
@TITLE-HOLDER < MAIN
**************/

#main #title-holder
{
	z-index: 5;
	position: relative;
	text-align: center;
}
#main.fullscreen #title-holder
{
	position: absolute;
	width: 100%;
	text-align: center;
	padding-bottom: 1rem;
}

/**************
@HERO-HOLDER < MAIN
**************/

#main #hero-holder
{
	margin: 0 auto;
	margin-bottom: 2rem;
	margin-top: 3rem;
	position: relative;
	scroll-snap-align: start;
	text-align: center;
	width: 52.5rem;
	z-index: 0;
}
#main.fullscreen #hero-holder
{
	background-color: #4B6876;
	background-size: 100%;
	margin-bottom: 0;
	margin-top: 0;
	min-height: 61.8vh;
	width: 100%;
}
#main.school #hero-holder
{
	max-width: 791px; /* because we're using the images from the schools homepage slideshow */
	text-align: center;
}

	#hero-holder #hero-image,
	#hero-holder img
	{
		display: block;
		transition: all 1s ease;
		width: 52.5rem; /* 42 * 1.25 */
	}
	#main.school #hero-holder #hero-image
	{
		max-width: 791px; /* because we're using the images from the schools homepage slideshow */
		text-align: center;
	}
	#main.fullscreen #hero-holder #hero-image,
	#main.homepage .hero-holder .hero-image
	{
		width: 100%;
		height: auto;
	}

		#main #hero-holder #photo-credit
		{
			bottom: 0;
			color: #fffc;
			font-size: 0.9rem;
			position: absolute;
			right: 1rem;
			text-align: right;
			z-index: 10;
			margin-bottom: 0.75rem;
		}
		#main #hero-holder #photo-credit.color-black
		{
			color: #000c;
		}

/**************
@BLURB < MAIN / TITLE-HOLDER
**************/

#main #blurb,
#main #content .blurb
{
	margin-top: 2rem;
	margin-bottom: 3rem;
	margin-bottom: 0;
	z-index: 5;
}
#main.fullscreen #blurb,
#wrapper.reverse #main.fullscreen #blurb,
#main.homepage .news-item .blurb
{
	bottom: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	width: 64.25rem;
}

#main.homepage #content .news-item .blurb
{
	margin-top: 0;
}

#main.homepage .news-item .blurb
{
	width: 100%;
}

	@media only screen and (min-width: 750px) {
		#main.fullscreen #blurb.-align-left {
			text-align: left;
		}
		#main.fullscreen #blurb.-align-right {
			text-align: right;
		}
	}

	#main #blurb p,
	#main #content .blurb p
	{
		color: #333;
		font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
		font-size: 1.25rem;
		font-style: normal;
		font-weight: 400;
		line-height: 2rem;
		margin: 0 auto;
		padding-bottom: 0.5rem;
		padding-top: 0.5rem;
		text-align: center;
		width: 42em;
		z-index: 5;
	}
	#main.fullscreen #blurb p
	{
		font-size: 1.34rem;
		line-height: 2rem;
	}
	#main.homepage #content .blurb p
	{
		font-weight: 300;
	}


	#main.fullscreen #blurb p
	{
		color: #fff;
		display: inline-block;
		font-weight: 200;
		font-weight: 400;
		/*
		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		*/
		text-align: left;
		text-align: center;
		max-width: 52.5rem;
		margin: 0 auto;
		padding-left: 1rem;
		padding-right: 1rem;
		width: 100%;
	}
	@media only screen and (min-width: 750px) {
		#main.fullscreen #blurb.-align-left p {
			text-align: left;
			padding-left: 0;
		}
		#main.fullscreen #blurb.-align-right p {
			text-align: right;
			padding-right: 0;
		}
	}
	#main.fullscreen #blurb.color-black p,
	#main.homepage .blurb.color-black p
	{
		color: #222;
	}
	#main.fullscreen #blurb.bg-color-white p,
	#main.homepage .blurb.bg-color-white p
	{
		background: #fff;
		background: rgba(255, 255, 255, 0.5);
		color: #222;
		border: 0;
	}


/**************
@CONTENT < MAIN
**************/

#main #content,
#main .content
{
	margin: 0 auto;
	position: relative;
	scroll-snap-type: y mandatory;
	scroll-snap-align: start;
}

	#main #content p,
	#main #content li,
	#main .content p,
	#main .content li
	{
		text-align: left;
		margin-left: auto;
		margin-right: auto;
		width: 42em;
		font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
		font-style: normal;
		color: #000;
		font-weight: 300;
		font-size: 1.125rem;
		line-height: 2rem;
	}
	#main #content p.first::first-line,
	#main .content p.first::first-line
	{
		color: #d67643;
		font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif;
		font-weight: 400;
		text-transform: uppercase;
	}
	#main #content .note p
	{
		text-align: center;
	}

		#main #content p.first a,
		#main .content p.first a
		{
			text-decoration: underline;
		}

		#main #content p strong,
		#main #content li strong,
		#main .content p strong,
		#main .content li strong
		{
			color: #333;
			font-weight: 500; /* I don't think we have 600 */
		}

	#main #content p.action {
		/* No, messes up links on homepage essays and forgot where it's needed */ 
		/* text-align: right; */
		display: inline-block;
		display: block; /* 2022 otherwise messed up on https://csfla.org/about/apply
		width: auto;
		/* float:  right; */
		/* clear: right; //
		margin-top: 0.5rem;
	}


	#main #content ul,
	#main .content ul
	{
		margin-left: auto;
		margin-right: auto;
		width: 47.25em; /* not sure why 42rem doesn't work but this is the difference in the widths from a p */
	}
	#main.text #content ul
	{
		padding-left: 0;
	}

	#main.accreditation.strands #content li li p:first-child,
	#main.accreditation.explanatory-standards #content li li p:first-child {
		margin-bottom: 0;
		/* font-weight: 300; */
		border-bottom: 1px solid #333;
		display:  inline;
		/* text-decoration: underline; */
	}

	#main.accreditation.strands #content li li p:nth-child(2),
	#main.accreditation.explanatory-standards #content li li p:nth-child(2) {
		margin-top: 0;
	}

	#main #content .dropcap,
	#main .content .dropcap
	{
		color: #d67643;
		margin-right: 0.075em;
		font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
		font-weight: 500;

	}

	#main #content .dropcap span,
	#main .content .dropcap span {
	}

	#main #content q,
	#main .content q
	{
		font-weight: 500;
	}

	#main #content blockquote
	{
		background: #4B6876;
		margin: 0 auto;
		padding: 1rem;
		width: 50rem;
	}

		#main #content blockquote p,
		#main #content blockquote li
		{
			color: #fff;
			font-weight: 200 !important;
			font-style: italic;
		}
			#main #content blockquote p cite,
			#main #content blockquote p em,
			#main #content blockquote p i
			{
				font-style: normal;
			}

		#main #content blockquote a
		{
			color: #EDD42A;
		}
		#main #content blockquote a:hover
		{
			color: #FEA139;
		}

	#main #content li
	{
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		/* color: rgb(214, 118, 67); */
	}

	p.about
	{
		background: none;
		color: #fff;
		font-size: 1.25rem;
		font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace;
		font-weight: 700;
		margin-bottom: 3rem;
		margin-top: 0;
		text-align: left;
		text-transform: none;
		width: auto;
	}

	#main #content h2,
	#main #content h3,
	#main .content h2,
	#main .content h3,
	#about-info-box h2,
	.action-step h2
	{
		border-radius: 0.5rems;
		border-bottom: 0;
		border-top: 0;
		color: #666;
		color: #D67643;
		font-size: 1.125rem;
		font-style: normal;
		font-weight: 400;
		letter-spacing: 0.05em;
		line-height: 1.6875rem;
		margin-bottom: 3rem;
		margin-left: auto;
		margin-right: auto;
		margin-top: 3rem;
		padding-bottom: 0.325rem;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		padding-top: 0.325rem;
		text-align: center;
		text-transform: uppercase;
		width: 52.5rem;
		font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif;
	}
	#main #content h3,
	#main .content h3
	{
		border: 0;
		color: #222;
		font-size: 1.25rem;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 1.75rem;
		margin-bottom: 2rem;
		max-width: 60rem;
		text-align: left;
		text-transform: none;
		width: 42em;
		font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
	}
	#main #content.h2-lines h2,
	#main .content.h2-lines h2
	{
		border-top: 1px solid #D67643;
		border-bottom: 1px solid #D67643;
	}
	#main #content form label h3
	{
		color: #fff;
		margin: 0;
		margin-right: 1rem;
		text-align: right;
	}

	#box
	{
		background: #FAE8A8;
		margin-left: 16rem;
		padding: 1rem;
	}

	#main #item-buttons,
	.form-holder #item-buttons
	{
		position: absolute;
		top: 0;
		right: 1rem;
		max-width: 5rem;
	}

	#main.accreditation #item-buttons
	{
		position: absolute;
		top: 1rem;
		right: 1rem;
		max-width: 5rem;
	}

		#main #item-buttons p,
		.form-holder #item-buttons p
		{
			text-align: right;
			margin: 0;
			display: inline;
			font-size: 1.618rem;
			font-size: 2.5rem;
			cursor: pointer;
			color: #D67643;
			transition: all 0.125s ease;
		}
		#main #item-buttons p:hover,
		.form-holder #item-buttons p:hover
		{
			transition: all 0.125s ease;
		}


		#wrapper.reverse #main #item-buttons p,
		#wrapper.reverse .form-holder #item-buttons p
		{
			color: #4B6876;
		}

#main #content p .school-name {
	color: #111 !important;
}

#main #content p .person-name {
/*	color: #333 !important; */
}

#main #content #dateline p .person-name {
	color: #000 !important;
}

/**************
@COMMENTS < CONTENT < MAIN
**************/

#comments-outer
{
	margin-top: 2rem;
}

#comments
{
/*	display: none; */
}

#comment-form
{
/*	display: none; */

	padding-top: 2rem;
	padding-bottom: 2rem;
	background: #4B6876;
	color: #fff;
}

/**************
@HOMEPAGE
**************/

#wrapper.homepage
{
	background: #4B6876;
}


/**************
@NEWS-OUTER < CONTENT < MAIN.HOMEPAGE
**************/

#main.homepage #news-outer
{
	background: #4B6876;
}


/**************
@NEWS < NEWS-OUTER
**************/

#main.homepage #news
{
	background: none;
	padding-top: 2rem;
	padding-bottom: 2rem;
	position: relative;
}

	#news-feed-link
	{
		line-height: 1.15;
		position: absolute;
		right: -3rem;
		color: #EDD42A;
		font-size: 2.5rem;
	}
	#news-feed-link:hover
	{
		color: #BE6500;
	}

	#main.homepage #news .news-item
	{
		width: 100%;
	}

		#main.homepage #content .news-item .blurb p
		{
			color: #fff9;
			line-height: 1.34;
			margin-bottom: 0rem;
			margin-right: 1.25rem;
			margin-left: 1.25rem;
			margin-top: 0.25rem;
			text-align: right;
			width: auto;
		}


/**************
@SCHOOL-AND-LEGISLATIVE < NEWS
**************/

#school-and-legislative
{
	float: left;
	margin-top: 3rem;
	width: 38.2%;
}

	#main.homepage #school-news,
	#main.homepage #legislative-updates
	{
		float: left;
		width: 50%;
	}

		#school-news-inner,
		#legislative-updates-inner
		{
			margin-right: 1.5rem;
		}

			#main.homepage .school-news-item,
			#main.homepage .legislative-update
			{
				background: #6F8691;
				background: rgba(255, 255, 255, 0.2);
				margin-bottom: 0.125rem;
				padding: 0.25rem;
			}
			#main.homepage .school-news-item:first-of-type,
			#main.homepage .legislative-update:first-of-type {
				border-top-left-radius: 0.25rem;
				border-top-right-radius: 0.25rem;
			}
			#main.homepage .school-news-item:last-of-type,
			#main.homepage .legislative-update:last-of-type {
				border-bottom-left-radius: 0.25rem;
				border-bottom-right-radius: 0.25rem;
			}

				#main #content #school-and-legislative h2
				{
					border: 0;
					color: #fff7;
					font-size: 1rem;
					height: 4.5rem;
					line-height: 1.25rem;
					margin-bottom: 0;
					margin-top: 0;
					position: relative;
					text-align: left;
					width: auto;
				}

					#main #content #school-and-legislative h2 .fa
					{
						font-size: 3.5rem;
						left: 1rem;
						opacity: 0.2;
						position: absolute;
						top: 0.25rem;
					}

				#main #content #school-and-legislative h3
				{
					padding-bottom: 0;
					font-size: 1rem;
					line-height: 1.34rem;
				/*	margin-bottom: 0.125rem; */
					margin-bottom: 0;
					margin-top: 0.125rem;
					text-align: left;
					width: auto;
				}

				.school-news-date.date,
				.legislative-update-date.date {
					display: inline;
					font-weight: 300 !important;
					margin-bottom: 0;
					margin-top: 0;
					margin-left: 0.5rem; 
					color: #4B6876;
					font-size: 0.85rem;
				}

				.legislative-update-image {
					float: right;
					margin-left: 0.25rem;
					margin-bottom: 0.25rem;
				}

			#main.homepage .school-news-item a,
			#main.homepage .legislative-update a {
				color: #fff; 
			}

			#main.homepage .school-news-item a:hover,
			#main.homepage .legislative-update a:hover {
				color: #EDD42A; 
			}

/**************
@NEWS-SLIDESHOW-HOLDER < NEWS
**************/

#news-slideshow-holder
{
	float: left;
	overflow: hidden;
	width: 61.8%;
}

/**************
@NEWS-SLIDESHOW (@FLICKITY) < NEWS-SLIDESHOW-HOLDER
**************/

#news-slideshow
{
	background: none;
	/*
	padding-bottom: 100%;
	*/
}

	#news-slideshow .flickity-viewport {
		/*
		position: absolute;
		width: 100%;
		*/
	}

	.carousel-cell {
		/*
		height: 100%;
		*/
	}

	.carousel-nav .carousel-cell.is-nav-selected
	{
	 background: #ED2;
	}

	#main.homepage #news-slideshow .news-item
	{
		display: block;
	}

		#main.homepage #news-slideshow .news-item .title-holder
		{
			background: none;
			height: 6rem;
			margin-left: 1rem;
			margin-right: 1rem;
			position: relative;
			text-align: left;
			margin-bottom: 2.125rem;
		}

		#main.homepage #news-slideshow .news-item .title-holder h3
		{
			border: 0;
			bottom: 0;
			color: #FEA139;
			font-size: 2.5rem;
			font-weight: 700;
			font-weight: 500;
			letter-spacing: 0;
			line-height: 1.15;
			margin: 0;
			padding: 0;
			position: absolute;
			text-align: left;
			text-transform: none;
			width: 100%;
			font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
		}

			#main.homepage #news-slideshow .news-item h3 a,
			#main.homepage #news-slideshow .news-item a h3
			{
				color: #FEA139;
			}
			#main.homepage #news-slideshow .news-item h3 a:hover,
			#main.homepage #news-slideshow .news-item a:hover h3
			{
				/* color: #EDD42A; */
				color: #BE6500;
			}

		#news-slideshow .flickity-prev-next-button
		{
			background: #BE6500;
			height: 2.75rem;
			top: 8.25rem;
			width: 2.75rem;
		}

			#news-slideshow .flickity-prev-next-button .arrow
			{
				fill: #fff;
			}

			#news-slideshow .flickity-prev-next-button.previous
			{
				left: 0.75rem;
			}

			#news-slideshow .flickity-prev-next-button.next
			{
				right: 0.75rem;
			}

		#news-slideshow .news-item .hero-holder
		{
			background: #6F8691;
			border-radius: 0.33rem;
			padding-bottom: 0.75rem;
			padding-top: 2.25rem;
		}

			#news-slideshow .news-item .hero-image
			{
				width: 100%;
			}

			#news-slideshow .news-item .hero-holder .date-holder p {

				color: #4B6876 !important;
				padding-top: 0 !important;
				padding-bottom: 0 !important;
				margin-bottom: -0.75rem !important;
				font-size: 100% !important;
			}

		#main.homepage #content #news li,
		#main.homepage #content #news p
		{
			width: auto;
		}


/**************
@SCHOOLS-OUTER < CONTENT < MAIN.HOMEPAGE
**************/

#schools-outer
{
	/*
	background: #EDD42A;
	*/
}

/**************
@SCHOOLS < SCHOOLS-OUTER
**************/

#main #content #schools h2,
#main #content #schools p,
#main #content #schools li
{

	width: auto;
}

#main #content #schools h2
{
	margin-top: 0;
}

/**************
@SCHOOLS-SLIDESHOW-OUTER < SCHOOLS
**************/

#schools-slideshow-outer
{
	background: #BE6500;
	border-radius: 0.5rem;
	float: left;
	width: 61.8%;
}

/**************
@SCHOOLS-SLIDESHOW < SCHOOLS-SLIDESHOW-OUTER
**************/

#schools-slideshow
{
	padding-top: 2.25rem;
	padding-bottom: 2.25rem;
}

	#schools-slideshow img
	{
		height: auto;
		width: auto;
	}

	#schools-slideshow .flickity-page-dots
	{
		bottom: 0.5rem;
	}


/**************
@SCHOOLS-WORDS-OUTER < SCHOOLS
**************/

#schools-words-outer
{
	width: 38.2%;
	float: left;
}


/**************
@SCHOOLS-WORDS < SCHOOLS-WORDS-OUTER
**************/

#schools-words
{
	text-align: left;
	margin-left: -6rem;
}


/**************
@SCHOOLS-WORDS-INNER < SCHOOLS-WORDS
**************/

#schools-words-inner
{
	margin: 0 2rem;
	margin-right: 0;
	margin-left: 8rem;
	padding-bottom: 3rem;
	position: relative;
}

	#schools-words-inner #homepage-map-caller
	{
		bottom: 0;
		left: 0;
		position: absolute;
		z-index: 11;
	}

		#schools-words-inner #homepage-map-caller p
		{
			margin-bottom: 0;
		}

/**************
@SCHOOLS-WORDS-SLIDESHOW < SCHOOLS-WORDS
**************/

#schools-words-slideshow
{
	margin-top: -3rem;
}

	#main #content #schools-words-slideshow a:hover
	{
		color: #FEA139;
	}

	#schools-words-slideshow .flickity-prev-next-button
	{
		top: 8rem;
	}

	#schools-words-slideshow .flickity-prev-next-button.next
	{
		left: 3rem;
		right: auto;
	}

	#schools-words-slideshow .school
	{
		width: 100%;
	}

		#schools-words-slideshow .school .school-logo-holder
		{
			float: right;
			height: 10.5rem;
			margin-right: 0.5rem; /* because getting sliced in chrome on pc */
			position: relative;
			width: 10rem;
			z-index: -1;
		}

			#schools-words-slideshow .school .school-logo
			{
				bottom: 0.5rem;
				max-height: 10rem;
				max-width: 10rem;
				position: absolute;
				right: 0;
				z-index: -1;
			}

		#main #content #schools-words-slideshow .school h3,
		#main #content #schools-words-slideshow .school .blurb
		{
			clear: both;
			color: #fff;
			margin: 0;
			padding-left: 2rem;
			padding-right: 2rem;
			padding-top: 2rem;
			text-align: left;
			width: 100%;
		}
		#main #content #schools-words-slideshow .school h3
		{
			border-top-left-radius: 0.5rem !important;
			border-top-right-radius: 0.5rem !important;
		}
		#main #content #schools-words-slideshow .school .blurb
		{
			border-bottom-left-radius: 0.5rem;
			border-bottom-right-radius: 0.5rem;
			padding: 0;
			padding-bottom: 1rem;
		}

			#main #content #schools-words-slideshow .school h3 a {
				color: #FEA139;
			}
			#main #content #schools-words-slideshow .school h3 a:hover {
				color: #EDD42A;
			}

			#main #content #schools-words-slideshow .school .blurb p
			{
				color: #fff;
				font-size: 1rem;
				margin: 0;
				padding-bottom: 1rem;
				padding-left: 2rem;
				padding-right: 2rem;
				padding-top: 1rem;
				width: auto;
				text-align: left;
			}

				#main #content #schools-words-slideshow .school .blurb .motto p
				{
					font-size: 1.125rem;
					font-style: italic;
					font-weight: 300;
					margin: 0;
					padding-top: 0;
					text-align: right;
				}


/**************
@ABOUT-OUTER < CONTENT < MAIN.HOMEPAGE
**************/

/**************
@ABOUT < ABOUT-OUTER
**************/

#main #about.display
{
	padding-top: 0; /* cos inners have their margins */
}

	#main.homepage #about .display-inner
	{
		clear: both;
		margin-top: 6rem;
	}

		#main #about h1
		{
			font-size: 4rem;
			margin-bottom: 4rem;
			text-align: left;
			width: auto;
		}

		#main #content #about h2 {
			text-align: left !important;
			margin-bottom: 1.5rem;
			margin-top: 1.5rem;
			padding-left: 0;
			padding-right: 0;
			color: #0006;
		}

		#main #content #about ol,
		#main #content #about ul {
			padding-left: 0;
			list-style: none;
		}

		#main #content #about li a {
			background: transparent;
			color: #BE6500 !important;
		}

		#main #content #about li a:hover {
			background: #FEA139;
			color: #fff !important;
		}

		#main #content #about p
		{
			margin-top: 0;
			margin-bottom: 2rem;
			width: auto;
		}
			#main #content #about p.action
			{
				display: inline-block;
				font-size: 1rem;
				margin: 0;
				padding: 0;
			/*	margin: 0.25rem; */
				text-align: center;
			}
				#main #content #about p.action a
				{
					padding-bottom: 0 !important;
					padding-top: 0 !important;
				}

			#main #content #about .about-blurb p::first-letter {
				initial-letter: 3 2;
			}

		.about-image-holder
		{
			float: left;
			margin-top: -9rem;
			width: 61.8%;
		}
		#about-accreditation .about-image-holder
		{
			float: right;
		}

			.about-image-holder-inner
			{
				background: #4B6876;
				border-radius: 0.5rem;
				margin-left: 2rem;
				margin-right: 2rem;
				padding-bottom: 0.5rem;
				padding-top: 2.25rem;
				text-align: center;
			}
			#about-accreditation .about-image-holder-inner
			{
				margin-left: 4rem;
				margin-right: 4rem;
			}

				.about-image
				{
					margin-bottom: 0.5rem;
					width: 100%;
					height: auto;
				}

		.about-blurbs
		{
			float: left;
			width: 38.2%;
		}
		#about-accreditation .about-blurb
		{
			clear: right;
			margin-bottom: 0;
		}

			.about-blurbs-inner
			{
				margin-left: 2rem;
				margin-right: 0;
			}
			#about-accreditation .about-blurbs-inner
			{
				margin-left: 0;
				margin-right: 2rem;
			}


/**************
@@SCHOOL
**************/

#accreditation-status
{
	color: #FEA139;
	font-size: 1rem;
	font-weight: 500 !important;
	margin: 0;
	padding: 0 0.5rem;
	position: absolute;
	transform: rotate(-30deg);
	width: 10rem;
}

#wrapper.schools #main.school #content .school-news-item h3
#wrapper.schools #main.school #content .school-news-item p
{
	color: #fff;
}

#main.school #content .col p
{
	line-height: 1.25rem;
}

#main.school #content #opportunities-outer h1,
#main.meeting #content #sessions-outer h1,
#main.school #content #school-news-outer h1
{
	font-size: 3rem;
}

#main.school #content .opportunity .dateline,
#main.school #content .session .dateline
{
	text-align: left;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
}

#main.school #content .opportunity h2,
#main.school #content .session h2
{
	margin-top: 0;
	margin-bottom: 1.5rem;
}

#main.school #content .opportunity h3,
#main.school #content .session h3
{
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
}

#main.school #content .opportunity .contact,
#main.school #content .session .contact
{
	background: #BE6500;
	border-bottom: 1px solid #BE6500;
	border-radius: 0.75rem;
	border-top: 1px solid #BE6500;
	margin-bottom: 1rem;
	margin-top: 1rem;
	padding: 0 1rem;
}

	#main.school #content .opportunity .contact p,
	#main.school #content .session .contact p
	{
		color: #eee;
		font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace;
	}

	#main.school #content .opportunity .contact a,
	#main.school #content .session .contact a
	{
		color: #fff;
	}
	#main.school #content .opportunity .contact a:hover,
	#main.school #content .session .contact a:hover
	{
		color: #EDD42A;
	}

		#main.school #content .opportunity .contact p a,
		#main.school #content .session .contact p a
		{
			color: #EDD42A;
		}
		#main.school #content .opportunity .contact p a:hover,
		#main.school #content .session .contact p a:hover
		{
			color: #FEA139;
		}

#main.school #title-holder h1
{
	font-size: 4rem;
}

#staff-and-students.display {

	padding-top: 0;
	padding-bottom: 2rem;
}

#main.school #title-holder #blurb p
{

	font-size: 1.34rem;
}

#main.school #post-pic
{
	position: relative;
}

#main.school #content p
{
	border: 0px solid #222;
}

#main.school #school-news h3
{
	font-size: 1.125rem;
	margin-bottom: 1rem;
	margin-top: 0;
	text-align: left;
	width: 42em;
}

#main.school #contact-info,
#main #opportunities .contact-info,
#main.school #content .contact p
{
	clear: both;
	margin-top: 1rem;
	margin-bottom: 1rem;
	text-align: center !important;
	font-style: italic;
}

	#main.school #contact-info,
	#main.school #opportunities .contact-info img
	{
		margin-bottom: 0;
	}
	#main.school #contact-info img.bordered,
	#main #opportunities .contact-info img.bordered {
		border: 1px solid #BE6500;
		padding: 0.75rem;
	}

	#main #opportunities ul,
	#main #opportunities ol {
		padding-left: 0;
	}


/**************
@FEATURES (@OPPORTUNITIES, @AFFILIATIONS, @STAFF, @SESSIONS, @SCHOOL-NEWS)
**************/

.feature-outer
{
	padding-top: 2rem;
}

.display-outer
{
	padding-bottom: 3rem;
}

.display
{
	width: 80rem;
	margin: 0 auto;
	padding-top: 4rem;
	padding-bottom: 4rem;
}

#affiliations-outer,
#comments-outer,
#staff-outer,
#opportunities-outer,
#school-news-outer,
#sessions-outer
{
	padding: 2rem;
	text-align: center;
}

#affiliations-outer,
#comments-outer,
#staff-outer
{
	background: #4B6876;
}

#opportunities-outer,
#sessions-outer,
#school-news-outer
{
	padding-top: 4rem;
}

#affiliations,
#main.staff #staff,
#main.staff #committee,
#opportunities,
#sessions
{
	background:  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4KPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiIgb3BhY2l0eT0iMCI+PC9yZWN0Pgo8ZyBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjM0Ij4KPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxIiB5PSIyMCI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEiIHk9IjQwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMSIgeT0iNjAiPjwvcmVjdD4KPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxIiB5PSI4MCI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxMDAiIHg9IjIwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEwMCIgeD0iNDAiPjwvcmVjdD4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMTAwIiB4PSI2MCI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxMDAiIHg9IjgwIj48L3JlY3Q+CjwvZz4KPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjZmZmIiBvcGFjaXR5PSIwLjM0Ij48L3JlY3Q+Cjwvc3ZnPg==");
	background-position: center;
	padding-bottom: 1rem;
	padding-top: 1rem;
}

#wrapper.schools #school-news
{

	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NSIgaGVpZ2h0PSIxMDAiPgo8Y2lyY2xlIGN4PSI3NSIgY3k9IjUwIiByPSIyOC4zJSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiNmZmYiIG9wYWNpdHk9IjAuMjUiIGZpbGw9Im5vbmUiPjwvY2lyY2xlPgo8Y2lyY2xlIGN4PSIwIiByPSIyOC4zJSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiNmZmYiIG9wYWNpdHk9IjAuMjUiIGZpbGw9Im5vbmUiPjwvY2lyY2xlPgo8Y2lyY2xlIGN5PSIxMDAiIHI9IjI4LjMlIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iI2ZmZiIgb3BhY2l0eT0iMC4yNSIgZmlsbD0ibm9uZSI+PC9jaXJjbGU+Cjwvc3ZnPg==");

}

#affiliations
{
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+Cgo8Y2lyY2xlIHI9IjkuMiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiNmZmYiIG9wYWNpdHk9IjAuMjUiIGZpbGw9Im5vbmUiPjwvY2lyY2xlPgo8Y2lyY2xlIGN5PSIxOC40IiByPSI5LjIiIHN0cm9rZS13aWR0aD0iMXB4IiBzdHJva2U9IiNmZmYiIG9wYWNpdHk9IjAuMjUiIGZpbGw9Im5vbmUiPjwvY2lyY2xlPgo8Y2lyY2xlIGN4PSIxOC40IiBjeT0iMTguNCIgcj0iOS4yIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZT0iI2ZmZiIgb3BhY2l0eT0iMC4yNSIgZmlsbD0ibm9uZSI+PC9jaXJjbGU+Cjwvc3ZnPg==");
}


.affiliation,
.staffer,
.comment,
.opportunity,
.session,
#wrapper.schools .school-news-item
{
	display: inline-block;
	margin: 1.5rem;
	max-height: 37.36rem; /* actual golden to height */
	min-height: 37.36rem;
	overflow-y: scroll;
	text-align: center;
	vertical-align: top;
	width: 23rem; /* that's 24rem with padding, so height has to be fiddled to be golden */
}
.comment
{
	text-align: left !important;
}

#main #content .affiliation h3,
#main #content .comment h3,
#main #content .staffer h3,
#main #content .opportunity h3,
#main #content .session h3,
#wrapper.schools #content .school-news-item h3
{
	font-size: 1rem;
	margin: 0;
	padding: 0;
	width: auto;
}
#main #content .comment h3
{
	font-size: 1rem;
	line-height: 1.25rem;
	font-weight: 500;
	margin-bottom: 0;
}

#main #content .affiliation ul
{
	width: auto;
}

#main #content .affiliation p,
#main #content .comment p,
#main #content .staffer p,
#main #content .opportunity p,
#main #content .session p,
#main #content .affiliation li,
#main #content .staffer li,
#main #content .opportunity ul,
#main #content .opportunity ol,
#main #content .opportunity li,
#main #content .session li,
#wrapper.schools #content .school-news-item p,
#wrapper.schools #content .school-news-item ul,
#wrapper.schools #content .school-news-item li,
#wrapper.schools #content .school-news-item blockquote
{
	width: auto;
	font-size: 0.9rem !important;
	line-height: 1.25rem !important;
}
#main #content .comment p
{
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace;
	margin-bottom: 1rem;
	color: #000;
}

#main #content .opportunity ol,
#main #content .opportunity ul {
	margin-left: 1rem;
	margin-right: 1rem;
}


#wrapper.schools #content .school-news-item blockquote
{
	margin-bottom: 1rem;
}

#wrapper.schools #content .school-news-item ul
{
	padding-left: 0;
}

#main #content .opportunity ul
{
	width: auto;
}

.affiliation .title,
.comment .title,
.staffer .title,
.opportunity .title,
.session .title
{
	margin: 0 auto;
}

#main #content .affiliation .url,
#main #content .opportunity .url,
#main #content .session .url
{
	margin-bottom: 2rem;
	margin-top: 1.5rem;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
	text-align: center;
}

#main #content .affiliation ul,
#main #content .opportunity ul,
#main #content .session ul
{
	padding-left: 0;
}

.url
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	font-style: italic !important;
	font-weight: 400 !important;
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
}

#opportunities-outer h1,
#sessions-outer h1,
#school-news-outer h1
{
	color: #fff;
	margin-top: 0;
	margin-bottom: 2rem;
}

#main #content .opportunity h2,
#main #content .session h2
{
	width: auto;
	border: 0;
	letter-spacing: 0;
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	border-top: 1px solid #BE6500;
	border-bottom: 1px solid #BE6500;
	line-height: 1.25rem;
}

#main #content .opportunity h3,
#main #content .session h3
{
	margin-top: 0;
	margin-bottom: 1rem;
	line-height: normal;
}

#main #content .session h4 {
	margin-top: 1rem;
	margin-bottom: 1rem;
	text-align: left;
	font-weight: 100;
	font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif;
	letter-spacing: 0.1rem;
	color: #D67643;
	text-transform: uppercase;
}

#main #content .session ul {
	width: auto;
}

	#main #content .session li {
		margin-bottom: 0;
		margin-top: 0;
	}

	#main #content .session ul ul {
		margin-left: 1rem;
	}

.bg a
{
	color: #EDD42A;
}

.bg a:hover,
#main #content .bg a:hover p
{
	color: #FEA139;
}

/**************
@AFFILIATIONS (FEATURE)
**************/

.affiliation .title .logo-holder
{
	padding-bottom: 0;
	text-align: center;
	position: relative;
}

	.affiliation .title .logo-holder img
	{
		max-width: 100%;
		max-height: 10rem;
	}

#main #content .affiliation .title h3
{
	text-align: center;
	line-height: 1.5;
}

/**************
@OPPORTUNITIES (FEATURE)
**************/

#main #content .opportunity h2.position-title,
#main #content .opportunity h2 .position-title
{
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace;
	font-style: italic;
	font-weight: 500;
	text-transform: none;
}

#main #content .opportunity .console-buttons
{
	text-align: center;
}


/**************
@SCHOOL-NEWS (FEATURE)
**************/

#school-news-outer
{
	margin-top: 3rem;
}

#wrapper.schools .school-news-item
{
	color: #fff;
}

	#wrapper.schools #main #content .school-news-item p,
	#wrapper.schools #main #content .school-news-item h3
	{
		color: #000;
	}

	#wrapper.schools #main #content .school-news-item p.dateline
	{
		color: #4B6876;
	}

	#wrapper.schools #main #content .school-news-item .school-news-item-inner
	{
		padding-bottom: 1rem;
		border-bottom: 1px solid #4B6876;
	}

	#wrapper.schools #content .school-news-item h3
	{
		font-size: 1.25rem;
		margin-bottom: 1rem;
	}

	#main #content .school-news-item p,
	#main #content .school-news-item li
	{
		font-size: 1rem;
		margin-bottom: 1rem;
	}


/**************
@SESSIONS (FEATURE)
**************/

#sessions
{
	background-image:  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCI+CjxyZWN0IHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCIgZmlsbD0iIzRCNjg3NiI+PC9yZWN0Pgo8Y2lyY2xlIGN4PSI0MCIgY3k9IjQwIiByPSI0MCIgZmlsbD0iIzY1N0U4QSI+PC9jaXJjbGU+CjxwYXRoIGQ9Ik0wIDQwIEE0MCA0MCA0NSAwIDAgNDAgMCBBNDAgNDAgMzE1IDAgMCA4MCA0MCBBNDAgNDAgNDUgMCAwIDQwIDgwIEE0MCA0MCAyNzAgMCAwIDAgNDBaIiBmaWxsPSIjNEI2ODc2Ij48L3BhdGg+Cjwvc3ZnPg==");
	background-position: top middle;
}

#main #content .session h2
{
	margin-top: 0;
}

/**************
@COMMENTS (FEATURE)
**************/

#main #content #comments h2
{
	color: #fff;
	margin: 0 auto;
	margin-bottom: 1rem;
}

.comment
{
	padding: 1rem;
}

#main #content .comment p.date
{
	text-align: right;
}

#main #content #comment-form label p
{
	color: #fff;
	text-align: right;
}

#main #content #comment-form .system
{
	color: #fff;
}

/**************
@STAFFERS (FEATURE)
**************/

.staffer
{
	padding: 2rem;
}

	#main #content .staffer h3
	{
		font-size: 1.25rem;
		margin-top: -0.75rem; /* just looks too low */
		min-height: 3.75rem;
		vertical-align: middle;
	}

	#main #content .staffer .part-2
	{
		border-bottom: 1px solid #BE6500;
		margin-bottom: 1rem;
		position: relative;
		z-index: 10;
	}

	#main #content .staffer h3.staffer-name
	{
		color: #fff;
		font-size: 1rem;
		margin: 0;
		min-height: auto;
		padding: 0.25rem 0.75rem;
		position: absolute;
		right: -2rem;
		top: -4.5rem;
		z-index: 99;
	}

	#main #content .staffer h3.staffer-name a
	{
		color: #fff;
	}


	#main #content .staffer ul
	{
		margin: 0;
		padding: 0;
		width: auto;
	}

	#main #content .staffer p,
	#main #content .staffer li
	{
		width: auto;
		font-size: 0.9rem;
		margin-bottom: 1rem;
	}

	#main #content .staffer .pic-holder
	{
		border: 2rem solid #BE6500;
		margin-left: -2rem;
		margin-right: -2rem;
		margin-top: 1rem;
	}

	#main #content .staffer .pic-holder img
	{
		width: 100%;
		display: block;
	}


	#main #content .staffer .bio
	{
		margin-top: 1rem;
		font-size: 1rem;
	}

	#main #content #staff-outer h2
	{
		color: #fff;
		border-color: #fff;
	}




/**************
@TABLE.LIST / @GRID.LIST
**************/

table.list {

	border-collapse: collapse;
	border-color: #0002;
	margin-top: 0;
	margin-top: 1rem;
	overflow: auto;
	position: relative;
}


.grid.list .-thead {

	padding-bottom:  0.5rem;
	margin-bottom:  1rem;
	border-bottom: 1px solid #777;
}


table.list thead.tableFloatingHeaderOriginal {
/*	position: absolute !important; */
}


table.list thead tr th,
.grid.list .-thead {

	border-color: #0002;
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0; /* required for sticky */
	z-index: 10;
}


#member-info-box table.list
{
	border-bottom: 1px solid #777;
	font-size: 0.9rem;
	margin-bottom: 1rem;
	margin-top: 0;
}
#current-year-inservice-activities.console table.list,
#manage-users.console table.list
{
	font-size: 85%;
}
.console table.list
{
	margin-left: auto;
	margin-right: auto;
	vertical-align: top;
}
.form-holder .table-holder table.list
{
	margin: 0 auto;
	margin-bottom: 4rem;
}
.read-only table.list
{
	margin: 1rem;
}

	table.list tbody
	{
		border-bottom: 2px solid #000;
	}

	table.list td p,
	table.list td li
	{

	/*	overflow-wrap: break-word; */
	/*	word-wrap: break-word; */ 
	/* but this was too strong
			font-family: "Operator SSm A", "Operator SSm B"; /* table stuff tends to be backend/user, not content */
	}

	table.list .border-left
	{
		border-left: 1px solid #aaa;
	}

	table.list .border-right
	{
		border-right: 1px solid #aaa;
	}


	table.list .table-subtitle-holder
	{
		background: rgb(178,58,72);
		opacity: 0.4;
		padding: 0;
	}

	table.list .table-subtitle
	{
		color: #fff;
		font-size: 1.5rem;
		text-align: center;
	}

	table.list th,
	table.list td
	{

		border-color: #0002;
		padding: 0.75rem;
		padding-bottom: 0.25rem;
		padding-top: 0.25rem;
		vertical-align:top;
	}

	table.list th
	{
		padding-top: 0;
	}

	table.list tbody th {
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;
	}

	table.list tr:first-of-type td,
	.table-holder table.list tbody tr:first-of-type th
	{
		padding-top: 0.5rem;
	}

	table.list tr:last-of-type td,
	.table-holder table.list tbody tr:last-of-type th
	{
		padding-bottom: 0.5rem;
	}

	table.list th.merge-right,
	table.list td.merge-right
	{
		padding-right: 0;
	}

	table.list td.border-left {
		border-left: 1px solid #aaa;
	}
	table.list td.border-right {
		border-right: 1px solid #aaa;
	}


	.console table.list td.merge-right p
	{
		margin-right: 0.25rem;
	}


	table.list th.merge-left,
	table.list td.merge-left
	{
		padding-left: 0;
	}

	.console table.list td.merge-left p
	{
		margin-left: 0.25rem;
	}

	#member-info-box table.list th,
	#member-info-box table.list td
	{
		padding: 0.5rem;
	}

	#member-info-box table.list th
	{
		padding-bottom: 0;
	}

	table.list td ul
	{
		margin: 0;
		padding-left: 0;
	}

	table.list td.system ul {
		margin-left: 1rem;
		margin-right: 1rem;
	}


	table.list td ul.view-participants
	{
		margin: 1rem;
	}

	table.list td.add-new
	{
		text-align: right;
	}

	table.list td.add-new.force-left
	{
		text-align: left;
	}


	table.list td.add-new::after
	{
		content: '';
	}

	table.list caption
	{
		border-bottom: 0.125rem solid #222;
		border-top: 0.125rem solid #222;
		color: #444;
		font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
		font-weight: 400;
		letter-spacing: 0.1rem !important;
		line-height: 1.25rem !important;
		text-align: center;
		text-transform: uppercase;
	}

	table.list td
	{
		text-align: left;
	}

	table.list th
	{
		padding-bottom: 0 !important;
		text-align: left;
	}

	table.list td
	{
		font-style: normal;
		font-weight: 300;
		letter-spacing: -0.025rem;
		text-align: left;
		font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
	}

	table.list th.-flex {

		display: flex;
		gap: 0.75rem;
		wrap: nowrap;
		align-items: baseline;
		padding-bottom: 0.5rem;
	/*	margin-bottom: 0 !important; */
	/*	height: calc(100% + 2.25rem); */
	}

			table.list th.-flex p {
				margin-bottom: 0;
		height: calc(100% + 0.25rem);
			}


	table.list thead > tr th.right,
	table.list td.right
	{
		text-align: right;
	}

	table.list th.center,
	table.list td.center
	{
		text-align: center !important;
	}

	table.list td b
	{
		font-weight: 400;
	}

	table.list thead {
	}

	table.list thead > tr:not(.inner) th
	{
		padding-top: 0.5rem !important;
		padding-bottom: 0.5rem !important;
		border-bottom: 2px solid #000;
		margin-bottom: 0.5rem !important;
		position: sticky;
		top: 0; /* required for sticky */
	}
	table.list thead th thead th
	{
		margin:  0;
		border:  0;
	}
	wrapper.report table.list thead th
	{
		position: sticky;
		background: #eee;
	}

	table.list tfoot th .action {
		letter-spacing: -0.025rem !important;
		font-weight: 500 !important;
		text-align: right;
		line-height: 1.25 !important;
	}




	table.list thead th:first-of-type {

	}

	table.list thead > tr th:last-of-type,
	#main #content table.list thead > tr th:last-of-type p {
		text-align: right;
	}
	table.list thead tr.inner th:last-of-type {
		text-align: left !important;
	}

	table.list tbody td
	{
		background-clip: padding-box;
		/*
		border-top: 2px solid #000;
		*/
		position: static;
	}

	table.list tbody .action-steps-holder td,
	table.list tbody .session-holder td
	{
		border-top: 0;
	}

	table.list tbody .session-holder td li
	{
		list-style: none;
	}

	#main table.list td p.action
	{
		margin-top: 0.05rem;
		margin-bottom: 0.05rem;
	/*	white-space: nowrap; */
	}
	#main table.list td p.action.allow-wrap {
		white-space: normal;
	}

	#main table.list td p.auto-action a
	{
		/*
		border-right: 2px solid #999;
		border-bottom: 2px solid #999;
		*/
	}

	/*
	table.list thead tr.inner,
	table.list tbody tr.inner
	{
		border: 0 !important;
	}
	*/

	table.list tbody tr.inner tr,
	table.list tbody tr.inner th,
	table.list tbody tr.inner td {
		padding-top: 0;
		padding-bottom: 0;
		margin: 0;
	}

	table.list tbody tr.inner td ul {
	/*	margin-left: 0; */
	}



	table.list thead p
	{
		margin-top: 0;
		margin-bottom: 0;
	}

	table.list tfoot
	{
		border-top: 2px solid #000;
	}

	table.list tbody tr.divider
	{
		background: #000;
		color: #fff;
	}

	table.list tfoot th
	{
		border-top: 2px solid #333;
		border-bottom: 0;
		background: #222;
	}

	.console table.list tfoot th p
	{
		color: #ccc !important;
		margin-top: 0.5rem;
		margin-bottom: 0.5rem;
		font-weight: bold;
	}

	.console table.list tfoot td p
	{
		font-weight: bold !important;
	}

	#member-info-box table.list tbody tr
	{
		border-top: 1px solid #777;
	}

	table.list tbody tr:hover
	{
		background: rgb(#eee);
		background: rgba(0,0,0,0.1);
		transition: opacity 0.2s ease-in-out 0s;
		opacity: 1;
	}

	fieldset .console-inner table.list tbody tr:hover
	{
	/*	background: none; */
	}

	table.list tbody tr.inner:hover
	{
		/* background: none; */
	}

	.action
	{
		line-height: 1.25;
	}

	.button a,
	.action a,
	.read-only .input-holder-inner .action a
	{
		background: #be6500;
		border-radius: 0.25rem;
		color: #fff;
		display: block;
		margin-bottom: 0.25rem;
		opacity: 1;
		padding: 0.25rem;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		text-transform: capitalize;
	}
	.action.dont-capitalize a,
	#my-roles .action a {
		text-transform: none; /* Cos we're getting "Of"s */
	}

	.button a:hover,
	.action a:hover,
	.read-only .input-holder-inner .action a:hover
	{
		color: #EDD42A;
	}

	.action a:active,
	.read-only .input-holder-inner .action a:active
	{
		/* color: caxxx !important; */
	}

	.button a .system {
		color: #fff;
	}

	.action.disabled {

		opacity: 0.5;
		pointer-events: none;		
	}
	.action:visited {

		opacity: 0.5;
	}

		td:not(.add-new) .action a.-form-loaded {

			opacity: 0.5;
		/*	pointer-events: none; // not doing this */
		}

		/*
		.action a.-form-loaded::after {
			display: block;
			content: 'see above';
			text-transform: lowercase;
			font-style: italic;
			font-weight: 300;
		}
		*/


	.console p,
	.console li
	{
		color: #111;
		margin: 0;
	}
	.console .directive p,
	table.list .directive p {
		margin-top: 0.5rem !important;
		margin-bottom: 0.5rem !important;
		letter-spacing: 0 !important;
		max-width: 40rem !important;
	}

	.opportunity.console p,
	.session.console p
	{
		margin-bottom: 1rem;
	}

	.min-max-this
	{
		display: none;
	}

	.console td .person-name
	{
	/*	color: #888; */
	}

	.console
	{
		position: relative;
		transition: all 0.125s ease;
	}

	.console-buttons
	{
		background: #444;
		border-radius: 0.25rem;
		cursor: pointer;
		display: inline-block;
		float: right; /* can't used position:fixed if position:sticky, well maybe with neg right margins and such */
		margin: 0.25rem;
		width: 2rem !important;
		z-index: 10;
	}

	.console-buttons.left {

		float: left;
		opacity: 0; 
	}
	.maximized .console-buttons.left {

		opacity: 1;
	}

	.console-buttons.left:hover {
	}


	.maximized .console-buttons
	{
		position: -webkit-sticky;
		position: sticky;
		top: 0.25rem; /* required for sticky */
	}

	.console .console-buttons p,
	#main #content .console .console-buttons p
	{
		color: #fff;
		font-size: 1.5rem !important;
		line-height: 1;
		font-weight: 400;
		margin: 0;
		margin-bottom: 0 !important;
		text-align: center;
		padding-bottom: 0.125rem;
		padding-top: 0.125rem;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.console .console-buttons:hover p.icon-button,
	#main #content .console .console-buttons:hover p.icon-button
	{
		color: #EDD42A;
	}

	.console-buttons .icon-button-minimize,
	.console-buttons .icon-button-maximize {
		display: none;
	}

	.minimized .console-buttons .icon-button-minimize,
	.maximized .console-buttons .icon-button-maximize
	{
		display: none;
	}

	.console-buttons .loader {
		width: 1.75rem;
		height: 1.75rem;
	}

	table.list .main p,
	table.list .main li,
	table.list p.main,
	table.list li.main
	{
		color: #000 !important;
	}

	#current-year-inservice-activities.console .table-holder
	{
		padding-left: 0;
		padding-right: 0;
	}

	#current-year-inservice-activities.console th,
	#current-year-inservice-activities.console td,
	#manage-users.console th,
	#manage-users.console td
	{
		padding-left: 0;
		padding-right: 0;
	}

	table.list.tighten th,
	table.list.tighten td
	{
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	table.list.tighten p,
	table.list.tighten ol,
	table.list.tighten ul
	{
		margin-left: 0.25rem;
		margin-right: 0.25rem;
	}

	table.list.shrink p,
	table.list.shrink li
	{
		font-size: 85% !important; /* Lets it happen in the table tfoot */
	}

	#current-year-inservice-activities.console p,
	#manage-users.console p
	{
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	}

	.console .documents-list ul li,
	{
		padding-left: 1rem;
		list-style: none;
		margin-bottom: 0.25rem;
		font-size: 90%;
	}

	#manage-users.console table.list p a
	{
		float: left;
		margin-right: 0.5rem;
	}

	#manage-users.console table.list .right p a
	{
		float: right;
		margin-left: 0.5rem;
	}

	#main .cols
	{
		width: 37.5em;
		margin-left: auto;
		margin-right: auto;
		border: 0 solid #222;
	}


/**************
@MEETING
**************/

#main.meeting #title-holder {
	margin-top: 2rem;
}

#main.meeting #title-holder h1
{
	font-size: 4rem;
	margin-bottom: 0;
	margin-top: 0;
}

#main.meeting #title-holder p.date {
	font-size: 2rem;
	margin-top: 0;
	margin-bottom: 0;
	color: #333;
}

#main.meeting .cols
{
	width: 52.5rem;
	display: flex;
}

#hosting-and-lodging {

	padding-top: 0;
	padding-bottom: 2rem;

}

#main #content #hosting-and-lodging h2 {

	margin-bottom: 0;
	/* width: 100%; */
}

#hosting-and-lodging ._school-logo-display {
	text-align: center;
}

._hosting-and-lodging-inner {

	display: flex;
	width: 100%;
	gap: 2rem;
	justify-content: center;
}

._hosting-and-lodging-inner {
/*	max-width: 62%;
	margin-left: auto;
	margin-right: auto; */
}

#main #content #hosting,  
#main #content #lodging {
	flex-grow: 1;
}

#main #content #hosting p {

	text-align: right !important;
}

#main #content #lodging p {

	text-align: left !important;
}


#main .col
{
	float: left;
}

#main .col-2
{
	width: 48%;
}

#main #content .col p
{
	width: 100%;
}

#main #content .col-1-of-2 p
{
	margin-right: 1rem;
}

#main.meeting #content .col p:first-child,
#main.meeting #content .col p.school-name,
#main.meeting #content .col p.contact-info
{
	margin-top: 0;
	margin-bottom: 0;
}

#main.meeting #content p.dateline
{
	float: left;
	width: 55%;
}

#main.meeting #content p.link-to-session
{
	float: right;
	text-align: right;
	width: 40%;
	margin-left: 0.5rem;
	margin-bottom: 0.5rem;
}

#main #content .col-2-of-2 p
{
	margin-left: 1rem;
	text-align: right;
}

#main #content #special-programs p
{
	text-align: center;
	line-height: 1.5rem;
}

#main.meeting #contact-info
{
	text-align: right;
}



/**********************
@SESSIONS
**********************/

#main.sessions h1
{
	font-size: 4rem;
	margin-top: 0;
}

#main.sessions #title-holder a:hover p
{
	color: #EDD42A !important;
}

#main.sessions #title-holder p.event-title
{
	color: #BE6500;
	font-size: 2.25rem;
	line-height: 2.75rem;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	width: 64.25rem;
}

	#main.sessions #blurb p
	{
		font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
		font-weight: 400;
		text-align: center;
	}

	#main #content .minutes p
	{
		font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace;
		font-weight: 100 !important;
	}

		#main #content .minutes p.action
		{
			font-weight: 500 !important;
		}

	#main.sessions #content .download-holder
	{
		width: 42em;
		margin: 0 auto;
	}

	#main.sessions #content p.session-download-link
	{
		margin-top: 0;
		float: right;
		text-align: right;
		width: 10rem;
	}

/**************
@STANDARDS
**************/

#main.accreditation.strands h1 .sub-title,
#main.administrative.standards h1 .sub-title,
#main.accreditation.explanatory-standards h1 .sub-title
{
	font-size: 2.75rem;
	line-height: 3rem;
	color: #333;
	color: rgb(237,212,42);
	color: #FEA139;
}

#main.accreditation.strands h1 .standard-title,
#main.administrative.standards h1 .standard-title
{
	color: #BE6500;
}

#main.accreditation.explanatory-standards h1 .sub-title a:hover
{
	color: rgb(237,212,42);
}

.glorious-tagline
{
	font-size: 7rem;
	font-style: italic;
	font-weight: 700;
	line-height: 7rem;
	margin: 0;
	opacity: 0.1;
	padding: 0;
	position: absolute;
	right: 0;
	text-align: right;
	text-transform: uppercase;
	top: 0;
}

.-tagline {
	font-style: italic;
}

#main.accreditation.strands #blurb,
#main.accreditation.strands .blurb
{
	margin-bottom: 4rem;
	margin-top: 3rem;
}

#main.accreditation.explanatory-standards #blurb
{
	margin-top: 0;
}

#main.accreditation.explanatory-standards h1
{
	margin-bottom: 0;
}

/* to align left with numbers */
#main.accreditation.explanatory-standards #content h2
{
	text-align: left;
	width: 60rem;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
	font-weight: 300;
	padding: 0;
}

#main.accreditation.explanatory-standards #content ol,
#main.accreditation.strands #content ol ol
{
	margin: 0 auto;
	width: 50rem; /* aligns the ::before numbers with their inners, you know what i mean */
	width: 60rem; /* aligns the ::before numbers with their inners, you know what i mean */
}

#main.accreditation.strands #content ol ol ol
{
	width: 100%;
}

#main.accreditation.explanatory-standards #content ol ol
{
	margin: 0;
	width: 95%;
	width: 100%;
}

#main.accreditation.explanatory-standards #content ul
{
	width: 100%;
}

#main.accreditation.explanatory-standards #content li,
#main.accreditation.explanatory-standards #content p
{
	width: 100%; /* fit within the heirarchy, otherwise if fixed at 42rem they start going off right; can't be auto as centered */
}

#main.accreditation.strands #content ol ol ol,
#main.accreditation.strands #content ol ol ol li,
#main.accreditation.strands #content ol ol ol p
{
	width: 100%;
	max-width: 42em;
}

#main.accreditation.strands #content ol ol ol p
{
	width: inherit;

}

#main.accreditation.strands #content ol ol ol p
{
	display: block;
}


#main.accreditation.explanatory-standards #content li ul li
{
	width: auto;
}

#main.accreditation #content li li::before,
#main.accreditation .content li li::before,
#main.accreditation.explanatory-standards #content li li::before
{
	color: #D67643;
}

#main.accreditation.explanatory-standards #content li li::before,
#main.accreditation.strands #content li li li::before
{
	max-width: 5rem;
	min-width: 5rem;
	width: 5rem;
}

#main.accreditation.explanatory-standards #content ul li
{
	margin-left: -1.325rem;
}

#main.accreditation.strands #content li li
{
	width: auto;
	max-width: 42em;
}

#main.accreditation.accreditation-standards #content li
{
	width: auto;
}

#main.accreditation.strands #content ul,
#main.accreditation.strands #content ul li,
#main.accreditation.strands #content ul,
#main.accreditation.strands #content ul li,
#main.accreditation.accreditation-standards #content ul li
{
	max-width: 42em;
	width: auto;
}

.-smaller,
.-smaller,
#main #content li .-smaller,
#main #content p .-smaller  {

	font-size: 75% !important; /* can't get this to work, font size is elastic */
	line-height: 1.5 !important;

}

#main #content .artifacts-list,
#main #content .narrative-required {
	/*	
	float: right;
	margin-top: 0; 
	padding-top: 1.5rem;
	margin-left: 0.5rem;
	margin-bottom: 0.5rem;
	max-width: 16rem; 
	*/
	text-align: right;
	display: block;
	float:  right;
	clear:  right;

}
#main #content .artifacts-list {
	margin-top: -0.75rem;
}
#main #content .narrative-required {
	margin-bottom: 1rem;
}

#main #content .artifacts-list .artifact {
	display: block;

}

#main #content .artifacts-list .artifact::before {
	content: '•';
}

/**********************
@EXPLANATORY-STANDARDS
**********************/

#main.accreditation.explanatory-standards h1
{
	font-size: 3.5rem;
}

#main.accreditation.strands #content h2,
#main.accreditation.strands #content h2,
#main.accreditation.explanatory-standards #content h2
{
	border: 0;
	margin-top: 5rem;
	margin-bottom: 0;
}

#main.accreditation.strands #content h2,
#main.accreditation.strands #content h2
{
	margin-top: 0;
}

#bubbling-banner
{
	background: #314FA4;
	display: none;
	height: 100vh;
	left: 6rem;
	position: absolute;
	top: 0;
	width: 8rem;
}

/******************
@ES-LISTING < #es-listingLists with decimal-style numbers for strands & standards
*******************/

/* From http://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1 */

.strand-with-standards ol
{
	margin: 0 !important;
	padding: 0 !important;
}

	#main.all.accreditation
	{
		counter-reset: strand-item;
	}

		#main.all.accreditation .strand-with-standards > ol > li
		{
			counter-increment: strand-item;
		}


	.strand-with-standards ol > li
	{
	 display: table;
	 counter-increment: item;
	}

		.strand-with-standards ol > li:before
		{
		/*  content: counters(item, ".") ".. "; to hide it from the first level */
		 display: table-cell;
		 padding-right: 0.6rem;
		}

	#main.all.accreditation .strand-main-display ol ol,
	#strand-main-display ol ol
	{
		counter-reset: item;
	}

	.strand-with-standards ol ol
	{
		margin-left: -1.75rem !important;
	}

		.strand-with-standards ol ol li ul
		{
			padding-left: 0 !important;
		}

		.strand-with-standards li ol > li
		{
			margin: 0;
		}

		.strand-with-standards li ol > li:before
		{
			content: counters(item, ".") " ";
		}

		#main.all.accreditation .strand-with-standards li ol > li:before
		{
			content: counter(strand-item) "." counters(item, ".") " ";
		}
		#main.all.accreditation .strand-with-standards li ol > li.explanatory:before
		{
			content: "ES\A" counter(strand-item) "." counters(item, ".") " ";
		}

		.strand-with-standards li ol > li.explanatory:before
		{
			content: "ES\A" counters(item, ".");
		}

	.main .strand-with-standards ol ol ol
	{
		margin-left: 0 !important;
	}


.strand-with-standards .action .fa
{
	 /* float: left; */
	 padding-top: 0.25rem;
	 padding-right: 0;
	 padding-bottom: 0.5rem;
}

li.explanatory
{
	font-style: italic;
	color: #999;
}

#field_offset_476
{
	display: none;
}

/**************
@USER-INFO-BOX < HEADER
***************/


/************
@USER-MISSIONS-MENU < MAIN
************/

#user-missions-menu
{
	/*
	display: table;
	margin-top: 2rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	*/
	margin-bottom: 2rem;
	margin-top: 2rem;
/*	overflow-x: scroll; */
}

	#user-missions-menu ul
	{
		/* display: table-row; */
		column-gap:  0.5rem;
		display: flex;
		justify-content: center;
		padding: 0;
		padding-left: 1rem;
		padding-right: 1rem;
		width:  auto;
		margin-left: auto;
		margin-right: auto;
	}

		#user-missions-menu li
		{
			border-radius: 0.5rem;
			color: #BE6500;
			color: #ddd;
			cursor: pointer;
		/*	display: table-cell; */
			list-style-type: none;
			max-width: 12rem;
			padding: 1rem;
			text-align: center;
			width: 12rem;
			/*
			max-width: 12rem;
			min-width: 12rem;
			*/
		}
		#user-missions-menu li:hover
		{
			color: #fff;
			color: #EDD42A;
			cursor:  pointer;
		/*	box-shadow: 0rem 0rem 0.5rem 0.125rem #3336; */
		}
		#user-missions-menu li.active
		{
			background-align: center;
			color: #fff;
		}
		#user-missions-menu li.parent
		{
			border: 2px solid #be6500;
		}

	#user-missions-menu .fa
	{
		color: #BB0A21;
		display: block;
		font-size: 7rem;
		line-height: 100%;
		margin-bottom: -1rem;
		margin-top: -6rem;
		opacity: 0.15;
	}

/************
@USER-MISSIONS < MAIN
************/

#user-missions {
	transition: all 0.125s ease-in-out;
	margin-left: 0;
	width: 100%;
}

/*
.-slid-out-25 #user-missions {
	width: 75vw;
}

.-slid-out-50 #user-missions {
	width: 50vw;
}

.-slid-out-75 #user-missions {
	width: 25vw;
}

.-slid-out-100 #user-missions {
	width: 0;
	display: none;
}
*/


#user-missions	.illustration
{
	background: #000;
}

	#user-missions	.illustration img
	{
		width: 100%;
	}

	#privileges {
		display: none;
	}

/*****************
@COLORS FOR USER MISSIONS
*****************/

/* @REVIEW BEST PRACTICES (Dark Purple)  */

.manage-school-color
{
	color: #36213e;
	border-color: #36213e !important;
}

.manage-school-bg,
#manage-school-dashboard .action.read-only a,
#user-missions-menu li#manage-school-menu-item,
#user-missions-menu li#manage-school-menu-item:hover
{
	background: #36213e;
}

/* @NEWS */

.news
{
	color: #4B6876;
	border-color: #4B6876 !important;
}

#my_full_map role['button']
{
	color: #fff !important;
}

.news-bg
{
	background: #4B6876;
}

#wrapper.news #dateline .school-name img
{
	width: 6rem;
}

#icons-outer .action.read-only a
{
	background: #735F3D !important;
}

/* @APPLY FOR MEMBERSHIP */

.apply-for-membership-color
{
	color: #735f3d;
	border-color: #735f3d !important;
}

.apply-for-membership-bg,
#apply-for-membership-dashboard .action.read-only a,
#admin-menu .action.read-only a,
#user-missions-menu li#apply-for-membership-menu-item,
#user-missions-menu li#apply-for-membership-menu-item:hover
{
	background: #735f3d; /* Coyote Brown */
}
.apply-for-membership-bg .system
{
	color: #fff;
}


/* @MANAGE MEMBERSHIP */

.manage-membership-color
{
	color: #735f3d;
	border-color: #735f3d !important;
}

.manage-membership-bg,
#manage-membership-dashboard .action.read-only a,
#admin-menu .action.read-only a,
#user-missions-menu li#manage-membership-menu-item,
#user-missions-menu li#manage-membership-menu-item:hover
{
	background: #735f3d; /* Coyote Brown */
}
.manage-membership-bg .system
{
	color: #fff;
}

/* @TEACHER CERTIFICATION */

.manage-teacher-certification-color
{
	color: #49a078;
	border-color: #49a078 !important;
}

.manage-teacher-certification-bg,
#manage-teacher-certification-dashboard .action.read-only a,
#user-missions-menu li#manage-teacher-certification-menu-item,
#user-missions-menu li#manage-teacher-certification-menu-item:hover
{
	background: #49a078; /* Shiny Shamrock */
}

/* MANAGE CSF */

.manage-csf-color
{
	color: #4B6876;
	border-color: #4B6876 !important;
}

.manage-csf-bg,
#manage-csf-dashboard .action.read-only a,
#user-missions-menu li#manage-csf-menu-item,
#user-missions-menu li#manage-csf-menu-item:hover
{
	background: #4B6876; /* Payne's Grey */
}

/* @INSPECT A SCHOOL */

.inspect-a-school-color
{
	color: #be6500;
	border-color: #be6500 !important;
}

.inspect-a-school-bg,
#inspect-a-school-dashboard .action.read-only a,
#user-missions-menu li#inspect-a-school-menu-item,
#user-missions-menu li#inspect-a-school-menu-item:hover
{
	background: #be6500; /* Ginger */
}

/* @EARLY CHILDHOOD */

.manage-early-childhood-color
{
	color: #916c80;
	border-color: #916c80 !important;
}

.manage-early-childhood-bg,
#manage-early-childhood-dashboard .action.read-only a,
#user-missions-menu li#manage-early-childhood-menu-item,
#user-missions-menu li#manage-early-childhood-menu-item:hover
{
	background: #916c80; /* "Antique Fuchsia" */
}

/* @CONTACT CSF MEMBERS */

.contact-csf-members-color
{

	color: #9c528b;
	border-color: #9c528b !important;
}

.contact-csf-members-bg,
#contact-csf-members-dashboard .action.read-only a,
#user-missions-menu li#contact-csf-members-menu-item,
#user-missions-menu li#contact-csf-members-menu-item:hover
{
	background: #231942;
	background: #9c528b;
}

/* @ACCREDITATION REIMAGINED */

.accreditation-reimagined-color,
table.list .accreditation-reimagined-color
{
	color: #5B85AA;
	border-color: #5B85AA !important;
}

.accreditation-reimagined-bg,
#accreditation-reimagined-dashboard .action.read-only a,
fieldset .console .read-only a,
#accreditation-reimagined-consoles-display .console .read-only a,
#user-missions-menu li#accreditation-reimagined-menu-item,
#user-missions-menu li#accreditation-reimagined-menu-item:hover
{
	background: #5B85AA; /* Royal Air Force Blue */
}


/* @MANAGE SESIP */

.manage-sesip-color,
table.list .manage-sesip-color
{
	color: #5B85AA;
	border-color: #5B85AA !important;
}

.manage-sesip-bg,
#manage-sesip-dashboard .action.read-only a,
fieldset .console .read-only a,
#manage-sesip-consoles-display .console .read-only a,
#user-missions-menu li#manage-sesip-menu-item,
#user-missions-menu li#manage-sesip-menu-item:hover
{
	background: #5B85AA; /* Royal Air Force Blue */
}

/* @PEER-REVIEW A SCHOOL */

.peer-review-a-school-bg,
#peer-review-a-school-dashboard .action.read-only a,
#peer-review-a-school-dashboard .action.read-only a,
#user-missions-menu li#peer-review-a-school-menu-item,
#user-missions-menu li#peer-review-a-school-menu-item:hover
{
	background: #5B85AA;
}
.peer-review-a-school-color
{
	color: #5B85AA;
	border-color: #5B85AA !important;
}

/* @STAFF TRAINING */

.manage-staff-training-bg,
#user-missions-menu li#manage-staff-training-menu-item,
#manage-staff-training-dashboard .action.read-only a,
#user-missions-menu li#manage-staff-training-menu-item:hover,
#icons-outer .action.read-only a.manage-staff-training-bg
{
	background: #b23a48; /* deep chestnut */
}

.manage-staff-training-color
{
	color: #b23a48; /* deep chestnut */
	border-color: #b23a48 !important;
}

.bg-manage-encourage-staff-professional-development
{
	background: #900408;
	color: #be6500;
}

.bg-manage-encourage-staff-professional-development a
{
	color: #fff;
}

#user-missions-menu li.user-mission-title.active {

	pointer-events: none;
	background: #eee !important;
	color: #666 !important;
	border: 1px solid #666;
}



/*************
@DASHBOARD < USER-MISSIONS
*********/

#user-missions .dashboard {
	display: none;
}

#return-to-form-links-container {

	min-height: 6.5rem;
	position:  absolute;
	right: 0;
	/*
	margin-bottom: 2.5rem;
	overflow-x: scroll !important;
	overflow-y: visible;
	*/
	margin-top: -1.5rem;
	max-width: calc(100vw - 1rem) !important; /* not sure why but this gives us 100vw) */
}

#return-to-form-links {

	align-items: flex-start;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
/*	justify-content: flex-start; */
	justify-content: flex-end;
	margin-left:  2.5vw;
	margin-right:  2.5vw;
	width: 95vw;
	width: auto;
	z-index: 99;
	position: sticky;
	margin-bottom: 1.5rem;
	/*
	margin-left: 1rem;
	overflow-y: visible;
	*/
}

.-fixed-header {

	right: 0 !important;
	position: fixed !important;
	top: 2.5rem !important;
}

	.return-to-form-link {

		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSIxMDAiPgo8cmVjdCB3aWR0aD0iNTYiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIj48L3JlY3Q+CjxwYXRoIGQ9Ik0yOCA2NkwwIDUwTDAgMTZMMjggMEw1NiAxNkw1NiA1MEwyOCA2NkwyOCAxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgb3BhY2l0eT0iMC4yNSIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+CjxwYXRoIGQ9Ik0yOCAwTDI4IDM0TDAgNTBMMCA4NEwyOCAxMDBMNTYgODRMNTYgNTBMMjggMzQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZSIgb3BhY2l0eT0iMC4yNSIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+Cjwvc3ZnPg==");
		border-radius: 0.5rem;
		box-shadow: 0rem 0rem 0.5rem 0.125rem #3336; 
		color: #fff !important;
		cursor: pointer !important;
		font-size: 75%;
		height: auto;
		margin-top: 0rem;
		margin-bottom: -1.75rem;
		margin-left: -1.25rem;
		margin-right: -1.25rem;
		min-width: 16rem;
		opacity: 1;
		overflow: visible;
		padding: 0.75rem;
		text-align: center;
		transform: rotate(12.5deg);
		transition: all 0.125s ease;
		width: 17rem;
		/* width: auto; */
		z-index: 90;
	}
	.return-to-form-link.-current {

		background: #eee !important;
		color: #444 !important;
		cursor: disabled;
		pointer-events: none;
		z-index: 0;
	}
	.return-to-form-link:hover {

		/*	color: #EDD42A !important; */
			box-shadow: 0rem 0rem 0.5rem 0.125rem #3339;

		/*  background: #FEA139; */
	}
	.return-to-form-link:first-of-type {
	/*	margin-right: 1.5rem; */
	}

		.return-to-form-link .-prefix::before {
	/*		content: "Return to"; */
			color:  #fff;
		}
		.return-to-form-link:hover .-prefix::before {
			color:  #EDD42A;
		}
		.return-to-form-link.-current .-prefix::before {
		/*	content: "Currently on"; */
			color:  #444;
		}

		.return-to-form-link .entry-title,
		.return-to-form-link .console-title,
		.return-to-form-link .school-name {
			color:  #fff;
		}
		.return-to-form-link:hover .console-title .entry_title,
		.return-to-form-link:hover .console-title .fa {
			color:  #EDD42A !important;			
		}
		.return-to-form-link.-current .entry-title,
		.return-to-form-link.-current .console-title,
		.return-to-form-link.-current .school-name,
		.return-to-form-link.-current .new {
			color:  #444;
			border-color:  #444;
		}

		.return-to-form-link .entry-title {
			margin-bottom: 0.75rem;
		}


		.return-to-form-link p {
			margin-top: 0;
			margin-bottom: 0;
		}

		.return-to-form-link span {
			display: block;
			line-height: 1.5 !important;
		}

		.return-to-form-link span.-prefix {
			margin-bottom: 0.5rem;
		}

		.return-to-form-link br {
			display: none;
			line-height: 0 !important;
		}

		.return-to-form-link .console-title .form-url-title {

			color: #fff !important;
			font-size: 85% !important;
			line-height: 1.2 !important;
			padding-top: 0 !important;
		}
		.return-to-form-link.-current .form-url-title {

			color: #444 !important;
		}

		.return-to-form-link .fa {

			opacity: 0.6;
			font-size: 400%;
			text-align: center;
			line-height: 100% !important;
		/*	margin-top: -18rem; */
			margin-bottom: 0;
			z-index: -50;
			position: absolute;
			bottom:  0.125rem;
			right:  0.125rem;
			width: auto;
			vertical-align: bottom;
		}

		.return-to-form-link .console-title {
			line-height: 1.2;
		}

		.return-to-form-link .new {
			border-width: 1px;
			display: inline-block;
		}

		.return-to-form-link .icon-button-close  {

			font-size: 0.5rem;
			position: absolute;
			top: 2.75rem;
			left: 2rem;
			cursor:  pointer !important;
			z-index: 99;
		}

			.return-to-form-link.-current .icon-button {
				display: none;
			}

			.return-to-form-link .icon-button i {

		/*		box-shadow: 0rem 0rem 0.5rem 0.125rem #3336;  */
				color:  #333; 
				background: #eee; 
				opacity: 1;
				cursor:  pointer !important;
				border:  1px solid #9996;
				border-radius: 50%;
				font-size:  1.25rem;
				line-height: 2.25rem;
				padding-top: 0.25rem;
			/*	vertical-align: middle; */
				width:  2rem;
				height:  1.75rem;
			}

			.return-to-form-link .icon-button-close:hover i {
				color: #BE6500 !important;
			}

		.return-to-form-link .school-name,
		.return-to-form-link .form-url-title {
			opacity: 0.5;
		}

		.return-to-form-link .entry-title {
			font-size: 150%;
			line-height: 1.25 !important;
		}

		.return-to-form-link br[data-owner='balance-text'] {

			display: inline-block !important;
			width: 0.25rem !important;
		}

		.return-to-form-link .form-author-holder {
			display: none !important;
		}

/*************
@CONSOLES-DISPLAY < DASHBOARD
**************/

#wrapper.school-head .hide-from-school-head
{
	display: none;
}

#wrapper.application-registrant .hide-from-application-registrant
{
	display: none;
}

.consoles-display
{
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4KPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiIgb3BhY2l0eT0iMCI+PC9yZWN0Pgo8ZyBmaWxsPSIjZmZmIiBvcGFjaXR5PSIwLjM0Ij4KPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxIiB5PSIyMCI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEiIHk9IjQwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMSIgeT0iNjAiPjwvcmVjdD4KPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxIiB5PSI4MCI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxMDAiIHg9IjIwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEwMCIgeD0iNDAiPjwvcmVjdD4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMTAwIiB4PSI2MCI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxMDAiIHg9IjgwIj48L3JlY3Q+CjwvZz4KPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlPSIjZmZmIiBvcGFjaXR5PSIwLjM0Ij48L3JlY3Q+Cjwvc3ZnPg==");
	background-position: center;
	margin: 2rem;
	min-height: 10rem;
	padding: 1rem;
	position: relative;
	text-align: center;
}
.consoles-display.reverse
{
	background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj4KPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9IiIgb3BhY2l0eT0iMCI+PC9yZWN0Pgo8ZyBmaWxsPSIjMDAwIiBvcGFjaXR5PSIwLjUiPgo8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEiIHk9IjIwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMSIgeT0iNDAiPjwvcmVjdD4KPHJlY3Qgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxIiB5PSI2MCI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEiIHk9IjgwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEwMCIgeD0iMjAiPjwvcmVjdD4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMTAwIiB4PSI0MCI+PC9yZWN0Pgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxMDAiIHg9IjYwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEwMCIgeD0iODAiPjwvcmVjdD4KPC9nPgo8cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiMwMDAiIG9wYWNpdHk9IjAuNSI+PC9yZWN0Pgo8L3N2Zz4=");
}

.consoles-display-archival
{
}

.user-mission-area {
	/* overflow: scroll; /* keep this and we equalize the bottom of the new console-form pair, but we lose our sticky window controller! */

}


	.consoles-display {
		position: relative;
	}

	.user-mission-area h2.grid-title
	{
		font-weight: 100;
		font-size: 2.5rem;
		font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif;
		letter-spacing: 0.1rem;
		line-height: 1;
		color: #fff;
		opacity: 0.6;
		/*
		margin-top: -1.25rem;
		margin-top: -2.5rem;
		margin-left: -1.125rem;
		*/
		margin-bottom: 0;
		text-align: center;
		margin-top: 3rem;
		margin-bottom: 3rem;
		text-transform: uppercase;
		/* Don't think we need this, if we do, must add per color
		text-shadow: #5B85AA -2px 0px, #5B85AA 0px 2px, #5B85AA 2px 0px, #5B85AA 0px -2px;
		*/
	}

	.user-mission-area .icon-button-refresh {
		color: #ddd;
		float: right;
		cursor: pointer;
		font-size: 2rem;
		line-height: 2rem;
		padding: 0.5rem;
		margin: 0;
		margin-top: -2.25rem;
		transition: all 0.25s ease;
		display: block;
		position: sticky;
		right: 1rem;

	}
	.user-mission-area .icon-button-refresh:hover {
		color: #fff;
	}

/*************
@CONSOLE < CONSOLES-DISPLAY
**************/

#peer-review-a-school-dashboard .hide-in-peer-review-a-school-dashboard
{
	display: none;
}

.console
{
	background: #fff;
	background: rgba(255,255,255,0.85);
/* 2022 jan 13 Adam: weirdly I don't like it, clashes with grid bg	border-radius: 0.25rem; */
	border-radius: 0.25rem;
	display: inline-block;
	margin: 1rem;
	padding-bottom: 1rem;
	text-align: center;
	vertical-align:top; /* keeps maps aligned! */
	max-width: calc(100% - 2rem);

}
.console.tighten
{
	padding-left: 1rem;
	padding-right: 1rem;

}
.console.minimized
{
	min-height: 0;
	opacity: 0.6;
	cursor: pointer !important;
}
.console.minimized.loading
{
	min-height: 0;
	opacity: 0.3;
	pointer-events: none;
}
.console.minimized:hover {
	opacity: 0.7;
}

	.console-port {
		position: absolute;
		color: #999;
		display: none;
	}

	.console h2,
	.console h3,
	.console p,
	.console ul,
	.console ol,
	.console .system ul,
	.console .system ol
	{
		margin-left: 1rem !important;
		margin-right: 1rem !important;
	}

	.console td .format,
	.console td .content-type
	{
		line-height: 1rem;
	}

	.console td .format .icon
	{
		float: right;
		font-size: 2rem;
		padding-left: 0.5rem;
	}

	.form-holder .console-title
	{
		text-align: center;
		line-height: 3.25rem !important;
		padding-top: 0 !important;
	}
	.form-holder .system .console-title
	{
		line-height: normal !important;
	}
	.form-holder.privileges-error .console-title {
		display: none;
	}

	.console .table-holder {
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}

	.console h2.console-title
	{
		margin-bottom: 0;
	}
	h1
	{
	}

		/* Removed ,
		.form-holder .table-holder .fa
		for buttons on sesip-3 action-steps table
		*/
		h1 .fa,
		.console h2.console-title .fa
		{
			display: block;
			font-size: 7rem;
			line-height: 100%;
			margin-bottom: 0;
			margin-top: -4rem;
			opacity: 0.15;
			z-index: -50;
		}

		#opportunities-outer h1
		{
			position: relative;
		}
			#opportunities-outer h1 a
			{
				z-index: 50;
				position: absolute; /* z-index just isn't doing it */
				top: -0.5rem;
				padding-left: 0.5rem;
				color: #EDD42A;
			}
			#opportunities-outer h1 a:hover
			{
				color: #BE6500;
			}

		h1 #jobs-feed-link .fa
		{
			font-size: 3rem;
			display: inline;
			margin: 0;
			opacity: 1;
		}

		#certification.console h2.console-title .fa
		{
			margin-top: -8rem;
			margin-bottom: 3rem;
		}

		#main.forms h1.console-title .fa,
		#main.roles .ajax-form-holder h1.console-title .fa,
		#main.views h1.console-title .fa
		{
			color: #fff;
			font-size: 9rem;
			margin-top: -3.5rem;
		}

		.form-holder .table-holder
		{
			text-align: center;
		}

		.form-holder .table-holder .grid
		{
			text-align: left;
		}


		#member-info-box .console h2.console-title .fa
		{
			font-size: 5rem;
			margin-top: -2.25rem;
			margin-bottom: -0.5rem;
		}

		#member-info-box .system
		{
			font-weight: 400 !important;
		}

		.console-title .form-url-title,
		.console-title .console-sub-title
		{
			display: block;
			line-height: 1.5rem !important;
			padding-top: 0.5rem;
		}

/*************
@CONSOLE-INNER < CONSOLE
*********/

.console-inner
{
	margin-bottom: 1rem;
	margin-top: 1rem;
	opacity: 0.99;
	padding: 0.25rem 0;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	vertical-align: top;
}
.console-inner.tighten
{
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	margin-bottom: 0.5rem;
}

.console-content {
	position: relative;
}

#teacher-inservice-records input[type='text'] {

	background: #000b;
	border-radius: 0.5rem; 
	padding: 0.125rem 0.5rem;
}


/*************
@TABLE-HOLDER < CONSOLE-INNER
*********/

.table-holder
{
	padding-left: 3rem;
	padding-right: 3rem;
	/* overflow-x: scroll; /* unfortunately disables th sticky but we need this */
	position: relative;
}
.table-holder.tighten
{
	padding-left: 1rem;
	padding-right: 1rem;
}
.form-holder .table-holder
{
	padding: 0;
}


/*************
@TABLE.LIST < TABLE-HOLDER
*********/

/* Klassa */
table.list
{
	border-spacing: 1px;
	margin-bottom: 1rem;
}

	.console table.list tr
	{
		vertical-align: top;
	}

	#logged-in-as.console-title
	{
		line-height: 1.2rem;
	}

	#main .console table.list th.max-width-5rem,
	#main .console table.list th p.max-width-5rem,
	#main .console table.list td.max-width-5rem,
	#main .console table.list td p.max-width-5rem
	{
		max-width: 5rem;
		overflow: hidden;
	}

	.max-width-10rem,
	#main .console table.list th.max-width-10rem,
	#main .console table.list th p.max-width-10rem,
	#main .console table.list td.max-width-10rem,
	#main .console table.list td p.max-width-10rem
	{
		max-width: 10rem;
		overflow: hidden;
	}

	.max-width-12-5rem
	{
		max-width: 12.5rem;
		overflow: hidden;
	}

	.max-width-15rem
	{
		max-width: 15rem;
		overflow: hidden;
	}

	#main .console table.list th.max-width-20rem,
	#main .console table.list th p.max-width-20rem,
	#main .console table.list td.max-width-20rem,
	#main .console table.list td p.max-width-20rem,
	#header-outer .console table.list td p.max-width-20rem
	{
		max-width: 20rem;
		overflow: hidden;
	}

	.max-width-30rem,
	#main .console table.list th.max-width-30rem,
	#main .console table.list th p.max-width-30rem,
	#main .console table.list td.max-width-30rem,
	#main .console table.list td p.max-width-30rem,
	#header-outer .console table.list td p.max-width-30rem
	{
		max-width: 30rem;
		overflow: hidden;
	}

	#member-info-box .table-holder
	{
		padding-left: 2rem;
		padding-right: 2rem;
	}

	#roles-holder
	{
		text-align: center;
	}

	#roles-holder p
	{
		font-size: 0.81rem;
		display: inline-block;
		margin-left: 0.5rem;
		margin-top: -0.25rem;
	}

	.action .hide-action-steps
	{
		display: none;
	}

	#schools-recent-inservice-activities-mip-1.console .action-steps-list
	{
		font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace;
	}

	#schools-recent-inservice-activities-mip-1.console .action-steps-list li
	{
		list-style: none;
	}

	p.action.hide
	{
		display: none;
	}
	#wrapper.director-of-accreditation p.action.director-of-accreditation-show
	{
		display: inline-block;
	}
	#wrapper.executive-director p.action.executive-director-show
	{
		display: inline-block;
	}

	.console .table-holder input[type="button"] {
		min-width: 0;
	}

	.actions {
		max-width: 12rem !important; /* Doesn't seem to change nothing */
	}

	.actions .action {
		text-align: right;
	}

/**************
@ACTION-STEPS-HOLDER < TABLE.LIST
**************/

tr.action-steps-holder,
tr.session-holder
{
	line-height: 0;
}

	tr.action-steps-holder td,
	tr.session-holder td,
	{
		padding: 0;
	}

/**************
@ACTION-STEPS < ACTION-STEPS-HOLDER
**************/

.action-steps
{
	display: none;
	margin-top: 1rem;
	text-align: center;
}
.action-steps.active
{
	display: block;
}

	.action-step p.action
	{
		margin: 0;
	}

	.year-divider,
	.action-step .year
	{
		color: #5B85AA;
		font-size: 4rem;
		line-height: 4rem;
		text-align: center;
	}

	#action-steps-list .year-divider
	{
		font-style: italic;
		font-weight: 300;
		line-height: 5rem;
		margin: 0;
		text-align: left;
	}


/**************
@ACTION-STEP < ACTION-STEPS
**************/

.action-step
{
	background: #5B85AA;
	display: inline-block;
	height: 48.54rem;
	margin-bottom: 2rem;
	margin-right: 2rem;
	overflow: scroll;
	position: relative;
	width: 30rem;
}

	.action-step h2
	{
		border-color: #000;
		color: #000;
		margin-bottom: 2rem;
		margin-top: 2rem;
		width: auto;
	}

	.action-step .year
	{
		color: #000;
		margin-left: -0.25rem;
		margin-top: -1.15rem;
		opacity: 0.85;
		text-align: left;
	}

	.action-step .bg
	{
		color: #fff;
		font-size: 30rem;
		line-height: 30rem;
		opacity: 0.1;
		position: absolute;
		text-align: center;
		width: 100%;
	}

	.action-step .action
	{
		position: absolute;
		right: 0.5rem;
		top: 0.5rem;
		z-index: 10;
	}

	.console .action-step,
	.console .action-step p,
	.console .action-step li
	{
		font-size: 0.9rem;
	}

	.action-step .field
	{
		clear: left;
		margin: 1rem 2rem;
	}

		.console .action-step .field label
		{
			color: #000;
			float: none;
			margin: 0;
			text-align: left;
			width: auto;
		}

			.action-step .field label p
			{
				color: #000;
				font-style: normal;
				font-weight: 400 !important;
				line-height: 1.25rem !important;
				margin: 0;
				min-width: 0;
				text-transform: uppercase;
				width: auto !important;
			}

			.action-step .field .content-holder
			{
				float: none;
				line-height: 1.5rem;
				width: auto;
			}

				.console .action-steps .content-holder p,
				.console .action-steps .content-holder ul,
				.console .action-steps .content-holder li
				{
					color: #fff;
					margin: 0;
				}

	#wrapper.peer-review-team-leader .edit-action-step,
	#wrapper.peer-review-team-member .edit-action-step
	{
		display: none;
	}

	.action-step .field.cols-2 label
	{
		float: left;
		margin: 0;
		text-align: right;
		width: 38.2%;
	}

		.action-step .field.cols-2 label p
		{
			margin: 0;
			margin-right: 0.5rem;
		}

		.action-step .field.cols-2 .content-holder
		{
			float: left;
			width: 61.8%;
		}

			.action-step .field.cols-2 .content-holder p,
			.action-step .field.cols-2 .content-holder ul,
			.action-step .field.cols-2 .content-holder ol
			{
				margin-left: 0.5rem;
			}


			.action-step .field .content-holder ul,
			.action-step .field .content-holder li
			{
				list-style: none;
				margin: 0;
				padding: 0;
			}

	.action-step .field.goals label
	{
		text-align: left;
	}

	.action-step hr.start,
	.action-step hr.fin
	{
		background: #000;
		border: 0;
		height: 2px;
		margin: 1rem;
		margin-top: 2rem;
	}

	.action-step hr.start
	{
		margin-bottom: 2rem;
	}


#consoles-and-form-holder {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: space-between;
	max-width: 100vw;
}

/**************
@FORM-HOLDER
**************/

#form-holder {
	/*
	display: none;
	transition: all 0.125s ease-in-out;
	order: 2;
	flex-shrink: 4;
	flex-grow: 4;
	*/
}


/*
#form-holder.-slid-in {

	display: block;
}
*/

#wrapper.reverse #form-holder #main.forms h1 {
	
	margin-top: 0;
}

/*
#wrapper.reverse .-slid-out-25 #form-holder #main.forms h1, 
#wrapper.reverse .-slid-out-50 #form-holder #main.forms h1, 
#wrapper.reverse .-slid-out-75 #form-holder #main.forms h1 {
	margin-left: 1rem;
	margin-right: 1rem;
	text-align: left;
	width: auto;
}

#wrapper.reverse .-slid-out-25 #form-holder #main.forms > h1, 
#wrapper.reverse .-slid-out-50 #form-holder #main.forms > h1, 
#wrapper.reverse .-slid-out-75 #form-holder #main.forms > h1 {
	margin-left: 2rem;
	margin-right: 2rem;
}

#wrapper.reverse .-slid-out-25 #form-holder fieldset,
#wrapper.reverse .-slid-out-50 #form-holder fieldset,
#wrapper.reverse .-slid-out-75 #form-holder fieldset {

	width: calc(100% - 4rem); 
	min-width: 0;
}

#wrapper.reverse .-slid-out-25 #form-holder fieldset label h3,
#wrapper.reverse .-slid-out-50 #form-holder fieldset label h3,
#wrapper.reverse .-slid-out-75 #form-holder fieldset label h3,
#wrapper.reverse .-slid-out-25 #form-holder fieldset label p,
#wrapper.reverse .-slid-out-50 #form-holder fieldset label p,
#wrapper.reverse .-slid-out-75 #form-holder fieldset label p {
	min-width: 0 !important;
}
*/



/**************
@FORMS
**************/

.assets-listview tbody
{
	background: #fff;
}

.google-doc iframe
{
	margin-top: 10px;
	border: 0;
	height: 1200px;
	width: 100%;
}

#main-outer.forms,
#main-outer.views
{
	background: #EEEEEE;
}

#wrapper.reverse #main.forms h1,
#wrapper.reverse #main.views h1
{
	margin-top: 2rem;
	margin-bottom: 0;
	border-bottom: 0;
}

#wrapper.reverse.forms #main.forms h1.console-title,
#wrapper.reverse.forms #main.forms h1 .console-sub-title,
#wrapper.reverse.views #main.views h1.console-title,
#wrapper.reverse.roles #main.roles .ajax-form-holder h1.console-title,
#wrapper.reverse.views #main.views h1 .console-sub-title
{
	margin-top: 0;
	color: #888;
	color: #fff !important;
	padding-bottom: 1.5rem;
	border-bottom: 2px solid #fff !important;
}

#wrapper.reverse.roles #main.roles .ajax-form-holder .forms > h1 {

	border-top: 2px solid #000;
	margin-top: 0;
	margin-bottom: 0;
}

.ajax-form-holder .-hide-in-ajax-form-holder {
	display: none;
}

tbody .form-url-title,
tbody .console-sub-title,
{
	position: relative !important;
}

tbody .form-url-title .fa,
tbody .console-sub-title .fa
{
	font-size: 3rem;
	opacity: 0.25;
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
}

#main.forms h1.console-title .school-name,
#main.views h1.console-title .school-name
{
	color: #5B85AA;
	color: #fff;
}

#main.forms .form-holder,
#main.roles .ajax-form-holder .form-holder,
#main.views .form-holder
{
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 2rem;
	padding-top: 0.5rem;
}

#wrapper.reverse #main.forms .form-holder h1.console-title,
#wrapper.reverse.roles #main.roles .ajax-form-holder h1.console-title,
#wrapper.reverse #main.views .form-holder h1.console-title
{
	border: 0;
	margin-bottom: 0rem;
}

#main.forms #form-fields,
#main.views #form-fields
{
	margin-bottom: 0;
	position: relative;
	text-align: center;
}

#form-fields #team .read-only ul,
#form-fields #team-new .read-only ul,
{
	margin-top: 1rem;
	margin-bottom: 1rem;
	padding-left: 0;
}

#form-fields #team .read-only ul,
#form-fields #team-new .read-only ul
#form-fields.read-only ul
{
	list-style: none;
}

#form-fields #team-new .read-only .input-holder-inner {
	min-height: 5rem;
}

#form-fields.read-only ul li.article-title
{
	list-style: disc;
	margin-left: 0.75rem;
}

#form-fields.can-edit-no-save input,
#form-fields.can-edit-no-save select,
#form-fields.can-edit-no-save textarea, 
#form-fields.can-edit-no-save .matrix, 
#form-fields.can-edit-no-save .matrix-textarea,
#form-fields.can-edit-no-save .pt-switch {

	pointer-events: none !important;
}

.-for-edit-no-save {
	display: none;
}

.edit-no-save .-for-edit-no-save {
	display: block;
}


.strands-view-only,
.focii-view-only
{
	margin-bottom: 1rem;
}

#form-fields .system,
#form-fields .system p,
fieldset .system,
fieldset .system p,
#main #content #form-fields .system,
#main #content #form-fields .system p
{
	color: #fff;
}


#form-fields .console .system
{
	color: #666 !important;
}

.note
{
	background: none;
	text-align: center;
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}

	.note p
	{

		margin: 1rem auto;
		padding: 0.5rem;
		border-radius: 0.25rem;
	}

	.note h2 {
		color: #fff;
	}

	.note h3
	{
		color: #fff;
		font-size: 2rem;
	}

.-double-bordered {
	border: 1px double #fff !important;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-bottom: 1rem !important;
	padding-top: 1rem !important;
}

fieldset.save .note p
{
	margin-bottom: 1rem;
}

fieldset fieldset.save  {
	display: inline-block;
	width: auto;
	margin-top: -2rem;
	z-index: 99;
}

fieldset fieldset.save #buttons {
	text-align: left;
}

fieldset fieldset.save #buttons input[type="submit"] {
	margin: 0;
}

fieldset.save .input-holder-inner p.status {
	color:  #fff;
	padding: 0;
	margin:  0;
}


.after-submit
{
	display: none;
	color: #fff;
}

.team-list li
{
	display: block;
	clear: both;
	list-style: none;
	border: 1px solid #000;
}

	.remove-role-button-holder {
		float: right;
		display: block;
		height: 2.5rem;
		margin: 0;
	}

	input[type="button"].remove-role-button,
	input[type="submit"].remove-role-button
	{
		margin: 0;
		font-size: 0.9rem !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}


/**************
@FIELDSET < FORMS
**************/

fieldset
{
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NiIgaGVpZ2h0PSIxMDAiPgo8cmVjdCB3aWR0aD0iNTYiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIj48L3JlY3Q+CjxwYXRoIGQ9Ik0yOCA2NkwwIDUwTDAgMTZMMjggMEw1NiAxNkw1NiA1MEwyOCA2NkwyOCAxMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgb3BhY2l0eT0iMC4yNSIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+CjxwYXRoIGQ9Ik0yOCAwTDI4IDM0TDAgNTBMMCA4NEwyOCAxMDBMNTYgODRMNTYgNTBMMjggMzQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZSIgb3BhY2l0eT0iMC4yNSIgc3Ryb2tlLXdpZHRoPSIxIj48L3BhdGg+Cjwvc3ZnPg==");
	background-position: center;
	border: 0;
	display: block;
	margin: 2rem;
	margin-left: auto;
	margin-right: auto;
	min-width: 80rem;
	position: relative;
	text-align: left;
	vertical-align: top;
	width: 61.8%;
}

fieldset.full-width {
	width: 100%;

}

fieldset.full-width legend,
fieldset.full-width legend + .system {
	width: calc(61.8% + 8rem);
	margin-left: auto;
	margin-left: 0.5rem;
	margin-right: auto;
	max-width: none;

}

fieldset .note,
fieldset.save
{
	width: 38.2%;
	margin: 0 auto;
}

	fieldset.save .field
	{
		margin-top: 0;
		text-align: center;
	}

.input-holder-inner {
	display: block;
	width: auto;
	/* overflow: scroll; */
}

fieldset.feedback,
fieldset.save,
fieldset.save .input-holder-inner
{
	background: none !important;
}

	fieldset.save input
	{
		display: inline-block;
	}

fieldset legend
{
	color: #fff;
	font-size: 2rem;
	margin: 0;
	opacity: 0.825;
}
fieldset.save legend
{
	text-align: center;
}

fieldset.full-width {
	width: 100%;
}


/**************
@LABEL < FORMS
**************/

label,
#main #content label
{
	color: #fff;
	display: inline-block;
	float: left;
	margin-bottom: 0.25rem;
	text-align: right;
	width: 38.2%;
}
#log-in label
{
	color: #000;
	display: inline-block;
	float: none;
	margin-bottom: 0.25rem;
	text-align: left;
	width: 100%;
}
fieldset.left-labels label,
.field.left-labels label
{
	text-align: left;
}

	fieldset.left-labels label p,
	.field.left-labels label p
	{
		margin-top: 0.25rem;
	}

	label h3,
	label p,
	label ol,
	label ul
	{
		clear: right !important;
		float: right !important;
		min-width: 20rem !important;
		width: 61.8% !important;
	}
	label p.action
	{
		margin-top: 1rem;
		font-style: normal !important;
		width: auto !important;
		font-weight: 500;
		z-index: 99;

	}
	label p.action:hover {

	}


	#content li a,
	label a,
	.note .system a,
	.field .note .system a
	{
		background: #FEA139;
		border-radius: 0.25rem;
		color: #fff !important;
		display: inline-block ;
		font-weight: 400;
		line-height: 1.25 !important;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
		padding-top: 0.125rem;
		padding-bottom: 0.125rem;
	}
	#content li a:hover,
	label a:hover,
	.note .system a:hover
	{
		color: #EDD42A !important;
	}

	fieldset.left-labels label h3,
	fieldset.left-labels label p,
	fieldset.left-labels label ol,
	fieldset.left-labels label ul,
	.field.left-labels label h3,
	.field.left-labels label p,
	.field.left-labels label ol,
	.field.left-labels label ul
	{
		float: none !important;
		margin-left: 1rem;
		width: auto !important;
	}

	label h3
	{
		font-weight: 300;
		margin: 0;
		margin-right: 1rem;
	}

	label ul,
	label ol
	{
		padding: 0;
		margin: 0;
	}

	label p,
	label li
	{
		margin: 0;
		padding: 0;
		line-height: 1.5rem !important;
		margin-right: 1rem !important;
	}

	label p,
	label ul,
	label ol
	{
		margin-bottom: 2rem;
	}


/**************
@FIELD < FORMS
**************/

.field
{
	clear: left;
	display: block;
	margin: 2rem;
	text-align: left;
}

	.prepopulated,
	.pre-selected
	{
		background: #fff;
		background: rgba(255,255,255,0.8);
		margin: 0;
	}

	.read-only .prepopulated
	{
		background: none; /* because it's already got the white almost opaque bg */
	}

	.field.read-only a
	{
		color: #BE6500 !important;
	}

	.field.read-only .action a
	{
		color: #fff !important;
	}

	p.minimize
	{
		margin: 0;
	}

	.read-only p.minimize
	{
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

/**************
@INPUT-HOLDER < FIELD
**************/

.input-holder
{
	display: inline-block;
	width: 61.8%;
}

.input-holder.full-width
{
	display: block;
	width: 100%;
}


/**************
@INPUT-HOLDER-INNER < INPUT-HOLDER
**************/

.input-holder-inner
{
	background: rgb(0,0,0);
	background: rgba(0,0,0,0.5);
	padding: 0.25rem !important;
}
.input-holder-inner.half-width
{
	width: 50%;
}
.input-holder-inner.quarter-width
{
	width: 25%;
}
.input-holder-inner.eighth-width
{
	width: 12.5%;
}
.input-holder-inner.strands-read-only,
.input-holder-inner.focii-read-only,
.input-holder-inner.recommendations-read-only
{
	margin-bottom: 2rem;
}

	.input-holder-inner .pre-selected
	{
		background: none;
	}

	.input-holder-inner .prepopulated p
	{
		font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	}

	/*
	Eg, displaying "July 1," when year still needs to be selected
	ER, WHAT?
	*/
	.input-holder-inner p.read-only
	{
	/*	margin-top: 0; */
	}

	.input-holder-inner.strands-read-only h3,
	.input-holder-inner.recommendations-read-only h3,
	.input-holder-inner.focii-read-only h3
	{
		font-size: 1.5rem;
		padding-top: 0;
		margin-top: 0.5rem;
	}

	.input-holder-inner.strands-read-only .system,
	.input-holder-inner.recommendations-read-only .system,
	.input-holder-inner.focii-read-only .system
	{
		color: #222 !important;
		background: none;
	}

	/* Our new way of getting pre-selected ones to line up */
	.input-holder-inner > p,
	.input-holder-inner .directive p
	{
		padding: 0.75rem;
	}

	.read-only .input-holder-inner > p,
	.read-only .input-holder-inner .directive p
	{
		padding: 0;
	}

	.strands-read-only p .system,
	.strands-read-only p .level.user-input,
	.strands-view-only p .system,
	.strands-view-only p .level.user-input
	{
		float: left;
		display: block;
		margin-left: 0.5rem;
		max-width: 61.8%;
	}

	.strands-read-only p .system
	{
		padding: 0.25rem 0.5rem;
		padding-left: 0;
	}

	.pt-switch .toggle {
		cursor: pointer !important;
	}

	input[type="text"],
	input[type="number"],
	input[type="number"],
	input[type="password"],
	select,
	option,
	textarea {
		background: none;
		/* background: #333; /* 2023 feb 9: try to find another way to fix your specific problem, this starts appearing everywhere and not nice */
		border: 0;
		color: #ddd;
		display: block;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5rem;
		opacity: 1;
		padding: 0.75rem;
		width: 100%;
		font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace;

		/* http://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-without-overflowing-when-padding-is-present */
			-webkit-box-sizing: border-box;
			  -moz-box-sizing: border-box;
					box-sizing: border-box;
	}

	.assets-fm-search input[type="text"] {
		color: #1f80bd;
		font-style: normal;
		/* font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important; */
	}

	select, select option {

		font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace;
	}

	.playa-ss-input .playa-entry {
		background: rgb(26, 26, 26)
	}

	input[type="file"]
	{
		cursor: pointer;
	}

	select
	{
		height: 100%;
	}

	.date-holder select
	{
		height: auto !important;
	}

	option
	{
		color: #000;
		background: rgb(255,255,255);
		background: rgba(255,255,255,0.85);
		line-height: 1.5rem;
	}

	textarea
	{
		min-height: 10rem !important;
	}

	#log-in .input-holder-inner,
	#log-in input[type="text"],
	#log-in input[type="password"]
	{
		background: #735F3D;
		color: #fff;
	}

	#log-in .input-holder-inner
	{
		padding: 0.25rem;
	}

	#login-loader {
		width: 3rem;
	}

	.read-only .input-holder-inner
	{
		background: rgb(255,255,255);
		background: rgba(255,255,255,0.8);
		/* this compensates for fields now having their own padding, thanks goodness! but now we should get rid of .pre-selected */
		/* I'm confused, it makes mixed input and pre-selected ones misaligned */
		/* Shouldn't it mbe the same and the object itself, whether field or something to see, have its own padding? */
		/* padding: 1rem 1.5rem !important; */

	}

	.feedback .read-only .input-holder-inner {
		background: #EDD42A !important;
		border-radius: 0.25rem;
	}

	.feedback label {
	/*	color: #EDD42A !important; */

	}

	.read-only input[type="text"],
	.read-only input[type="number"],
	.read-only input[type="text"] a,
	.read-only textarea,
	.read-only textarea a,
	.read-only .input-holder-inner
	{
		color: #333;
	}

	/* .read-only .input-holder-inner a */

	#form-fields.read-only textarea
	{
		height: auto;
		background: none;
	}

	.read-only table.list thead tr
	{
		vertical-align: bottom;
	}

	.read-only table.list tbody tr
	{
		vertical-align: top;
	}

	.for-read-only
	{
		/* why was this set to display none? */
		background: none;
	}

		.read-only .for-read-only
		{
			display: block;
		}

		.for-edit-only .for-read-only
		.edit-only .for-read-only
		{
			display: none !important;
		}


	/* ADAM I so messed this up that some are this, some are that, too much to keep track of, so trying ehre to handle both */

	.read-only .for-read-only
	{
		margin-left: 0.75rem;
		margin-right: 0.75rem;
	}

	.read-only p,
	.read-only li
	{
		margin-left: 0.75rem;
		margin-right: 0.75rem;
	}

		.read-only .for-read-only p,
		.read-only .for-read-only li
		{
			margin-left: 0;
			margin-right: 0;
		}

	/* End of compensating for confusion, my first time this, but too many fields across too many forms, across too many modes, to keep track of mentally */

	.read-only table th.for-read-only,
	.read-only table td.for-read-only
	{
		display: table-cell;
	}

	.read-only .for-edit-only,
	.edit-only .for-read-only
	{
		display: none !important;
	}

	.form-holder th .console-title {
		text-align: left;
		margin-top: 2rem;
		color: #ddd;
	}
	.form-holder .read-only th .console-title {
		color: rgb(51, 51, 51);
	}

	.form-holder th .console-title.right
	{
		text-align: right;
	}

	input[type="submit"],
	input[type="button"]
	{
		background: #FEA139;
		border-radius: 1rem;
		border: 0;
		color: #4B6876;
		cursor: pointer;
		display: inline-block;
		font-size: 1.25rem;
		font-weight: 700 !important;
		height: 3rem;
		line-spacing: 0.1rem;
		margin: 1rem;
		min-width: 10rem;
		opacity: 1;
		padding: 0.5rem 2rem;
		transition: all 0.1s;
	}
	input[type="button"].disabled,
	input[type="submit"].disabled
	{
		background: #999;
		cursor: default;
	}
	table.list input[type="submit"],
	table.list input[type="button"]
	{
		font-size: 85%;
		/*
		font-weight: 500 !important;
		height: 2rem;
		*/
		height: auto;
		margin-left: 0;
		margin-top: 0;
		padding: 0.5rem 0.75rem;
		border-radius: 1em;
	}
	input[type="submit"]:active,
	input[type="button"]:active {
		opacity: 0.675;
	}
	/* button expand animation */
	#wrapper.views input[type="submit"]:active:not(.no-animation),
	#wrapper.views input[type="button"]:active:not(.no-animation)
	{

		font-size: 1.125rem;
		height: 4rem;
		margin: 0.5rem !important;
		min-width: 11rem;
		padding: 0.5rem 2.5rem;
	}

	input[type="radio"] {
		float: left;
		width: 2rem;
		line-height: 1;
	}

	.input-holder-inner .radio-selection
	{
		color: #ddd;
		font-style: italic !important;
		padding-top: 0;
		padding-bottom: 0;
	}

	.input-holder-inner .radio-selection:last-of-type {
		margin-bottom: 1rem;
	}

	.input-holder-inner .checkbox-selection {
		color: #ddd;
		margin: 0;
		padding-top: 0.25rem;
		padding-bottom: 0.25rem;
	}


	.input-holder-inner label {
		width: 100%;
	}


	fieldset.feedback .input-holder-inner .system 
	{
		background: none;
	}

	#form-fields fieldset.feedback .input-holder-inner .system,
	#form-fields fieldset.feedback .input-holder-inner .system p,
	#form-fields fieldset.feedback .input-holder-inner .system li
	{
		color: #222 !important;
		padding-left: 0;
		font-style: italic;
	}

	#form-fields fieldset.feedback .input-holder-inner .system ul,
	#form-fields fieldset.feedback .input-holder-inner .system ol {
		padding-left: 0.5rem;
	}


	fieldset.save p.system
	{
		display: block;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

	.rubric p
	{
		font-weight: 100 !important;
		font-style: italic !important;
	}

	.input-holder .for-read-only.table
	{
		display: table;
		border-spacing: 1rem;
	}

	.table .table-row
	{
		display: table-row;
	}

	.table .table-cell
	{
		display: table-cell;
		border: 2rem;
	}

	.read-only .input-holder-inner h4
	{
		color: #999;
		letter-spacing: 0.05em;
		padding-top: 1rem;
	}

/**************
@CONSOLE < FORMS
**************/

fieldset .console {
	min-width: calc(100% - 1rem);
	max-width: calc(100% - 1rem);
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	width: calc(100% - 1rem);
}

	fieldset .console-inner {
		padding-left: 0;
		padding-right: 0;
	}

		/*
		https://blog.alexandergottlieb.com/overflow-scroll-and-the-right-padding-problem-a-css-only-solution-6d442915b3f4
		*/
		fieldset .console .table-holder {
			overflow-x: scroll;
			position: relative;
		}


			.console p.filter-table {
				margin-bottom: 1rem;
			}


			.form-holder .table-holder table.table-inner.list {
				padding-top: 1rem;
				margin-right: 1rem;
				border-left: 1rem solid rgba(255,255,255,0.1);
				border-right: 1rem solid rgba(255,255,255,0.1);
				border-bottom: 0.25rem solid rgba(255,255,255,0.1) !important; /* just won't go away */
				margin-bottom: 0;
				width:  100%;
			}

				.form-holder .table-holder table.table-inner.list tbody tr:last-of-type {
					border-bottom: 2px solid #000 !important;
				}

				.table-inner.list th,
				table.list .table-inner tr:first-of-type td,
				.table-inner.list td
				{
					padding: 0.25rem;
					padding-top: 0;
					padding-bottom: 0.25rem;
					vertical-align:top;
				}

					fieldset .console table .string {
						min-width: 11rem;
					}

					fieldset .console table .body {
						min-width: 22rem;
					}

					fieldset .console table ul {
						margin-left: 1rem;
					}

					#form-fields.read-only fieldset .console table ul
					{
						margin-top: 0;
						margin-bottom: 0;
						padding-left: 0;
						list-style: disc;
					}

	.log-in-as-list .action.view-only a {
		background: #444;
	}

/**************
@PJAX < FORMS
**************/

.do-it
{
	border-bottom: 2px solid #000;
	border-top: 2px solid #000;
	margin-bottom: 2rem;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2rem;
	padding: 0;
	padding-top: 1rem;
	width: 61.8%;
}

#peer-review-team-leader.console .do-it p.system
{
	margin-bottom: 1rem;
	text-align: center !important;
}

#awaiting
{
	text-align: left;
	margin: 0;
}

#awaiting p.system
{
	margin-top: 1rem;
}

#awaiting li
{
	list-style: none;
	margin-bottom: 0.25rem;
}


.system.error
{
	color: #b23a48 !important;
	font-weight: 500 !important;
	text-transform: uppercase;
}

label.error
{
	text-align: left;
	background: #b23a48;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	display: block;
	box-shadow: 0.125rem 0.125rem #333;
}

.manage-staff-training-bg label.error
{
	background: #4B6876;
}

.warning
{
	color: #b23a48 !important;
	font-weight: 500 !important;
}

td.-closed-school {
	background: #b23a4811 !important;
	// opacity:  0.33;
}

.form-holder .warning
{
}


.warning-reverse {
	background: #b23a48;
	border-radius: 0.125rem;
	padding: 0.125rem 0.25rem;
	color: #fff;
}
label p.warning-reverse {
	width: auto !important;
	min-width: 0 !important;
}



form #server-response.system,
.server-response.system
{
	color: #fff;
	font-size: 2rem;
	font-style: italic !important;
	font-weight: 400 !important;
	letter-spacing: 0.05rem;
	line-height: 2.2rem;
	max-width: 20rem;
	padding: 0.5rem;
	text-transform: uppercase;
}

.required,
.success
{
	color: #fff !important;
	font-weight: 500 !important;
}

.blink
{
  animation: blinker 3s linear infinite;
}

.blink-faster
{
  animation: blinker 1.5s linear infinite;
}


@keyframes blinker
{
  50% { opacity: 0; }
}

/***********
* @SESIP-1
***********/

.recommendations-view-only .system {
	display: none;
}

#wrapper.sesip-1 .input-holder-inner {
	overflow: scroll;
}


/***********
* @SESIP-2
***********/

table.focus-areas td
{
	font-size: 18px;
}


/***********
* @MIP-2
***********/

#wrapper.mip-2 table.list thead th
{
/*	background: rgba(255,255,255, 200); No, too general, it's everywhere */
}

	table.focus-areas table.action-steps td
	{
		font-size: 14px !important;
	}

.mip-2 checkbox:checked
{
	background: #B23A48 !important;

}

.mip-2 fieldset .table-holder
{
	background: rgb(255,255,255);
	background: rgba(255,255,255,0.85);
	margin: 2rem auto;
/*	max-width: 61.8%; */
}

.mip-2 select
{
	background: rgb(0,0,0);
	background: rgba(0,0,0,0.85);
	background: #B23A48;
	font-size: 1rem !important;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	font-weight: 100 !important;
	color: #fff;
	text-align: right;
	padding-top: 0rem;
	padding-bottom: 0rem;
	font-style: italic;
}

.mip-2 option
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	font-size: 1rem !important;
	color: #fff;
	text-align: right;
	background: #B23A48;
}


.mip-2 .form-holder .table-holder table.list
{
	margin-bottom: 1rem;
}

.table-holder .-th,
fieldset .table-holder .-th.system p {
	color:  #333;
}

.table-holder.tighten {
	padding: 1rem;
}

.mass-participations {
	padding-top: 0.5rem;
	width:  100%;
}

.mass-participations .-thead, 
.mass-participations .-trow {

	display: grid;
	grid-template-columns: 8rem auto 5rem;
	margin-bottom: 0.25rem;
	margin-top: 0.25rem;	
	margin-left:  1rem;
	margin-right:  1rem;
	width:  calc(100% - 2rem);
}

.mass-participations form:nth-of-type(2n) .-td {

	background: #0001 !important;
}

.mass-participations .-thead {

	background: #f3e2e4;
}

.mass-participations p {
	margin:  0;
}

.participants-list
{
	background: #fff;
	display: none;
	margin: 1rem ;
	min-width: 20rem;
	padding: 1rem;
}


	.participants-list li
	{
		list-style: none;
		clear: right;
	}

		.participants-list li .remove-participation-holder,
		.participants-list li .remove-participation-holder form {
			display: inline;
			float: right;
		}

		.participants-list li input[type="button"],
		.participants-list li input[type="button"].disabled
		.participants-list li form input[type="submit"],
		.participants-list li form input[type="submit"].remove-participation-button
		{
			float: right;
			margin: 0.125rem;
			margin-top: 0;
			padding: 0.5rem 1rem !important;
			font-size: 1rem;
			line-height: 1rem;
			min-width: 0;
			height: auto;
		}

		.participants-list li input[type="checkbox"]
		{
			transform: scale(1.5);
		}

#wrapper.mip-2 #submit-button
{
	display: none; /* we can submit the activity (mip-1) but not these participations on mip-2! */
}



/***********
@MIP-3
***********/

.mip-3 table,
.mip-3 th,
.mip-3 td
{
	border: 0px solid #000;
	text-align: right;
}

	.mip-3 th label
	{
		text-align: right;
		width: 100%;
	}

		.mip-3 th label h3
		{
			float: none;
			min-width: none;
			width: auto;
		}

table#evaluation-summary
{
	margin: 2rem;
}

	#evaluation-summary .first-col
	{
		width: 31.8%;
	}

	#evaluation-summary .field
	{
		margin: 1rem;
		text-align: right;
	}

	#evaluation-summary th .system
	{
		margin-right: 1rem;
	}

	#evaluation-summary td .input-holder,
	#evaluation-summary td .input-holder-inner
	{
		text-align: right;
	}

	#evaluation-summary td .input-holder
	{
		width: auto;
	}

		#evaluation-summary td .input-holder-inner
		{
			float: right;
			width: 3rem;
		}

	#wrapper.mip-3 #evaluation-summary .required
	{
		color: #fff !important;
	}


/***********
@MIP-3
***********/

#wrapper.records h1.console-title {
/*	line-height: 1.2; */
}



/***********
@TABLESORTER
***********/

table.tablesorter thead tr .header
{
	background-image: url(http://csfla.org/jquery/tablesorter/blue/bg.gif);
	background-position: left 1rem;
	background-repeat: no-repeat;
	cursor: pointer;
}

	table.tablesorter thead tr .header p
	{
		color: #4B6876;
	}
	table.tablesorter thead tr .header p:hover
	{
		color: #BE6500;
	}

	table.tablesorter thead tr .headerSortUp
	{
		background-image: url(http://csfla.org/jquery/tablesorter/blue/asc.gif);
	}

	table.tablesorter thead tr .headerSortDown
	{
		background-image: url(http://csfla.org/jquery/tablesorter/blue/desc.gif);
	}

	.certification-dates,
	table.list tr.-count-me
	{
		/* background: #EDD42A; */
	}

	#total-points
	{
		/* color: #EDD42A !important; */
	}

/**************
@NEWS-ITEM
**************/

#next-previous {
	display: flex;
	justify-content: space-between;
	margin: 0 auto;
/*	margin-top: 3rem; */
	width: 42em;
	font-size: 1.125rem;
	/*
	background: #4B6876;
	border: 1px solid rgb(34, 34, 34);
	border: 4px solid #bbb;
	border: 2px solid #fff;
	*/
	padding-left: 1rem;
	padding-right: 1rem;
}
	#next-previous p {
		width: 38.2%;
	}


	#next-previous label {
		float: none;
		color: #999;
		font-size: 1rem;
		font-weight: 100 !important;
		letter-spacing: normal !important;
		text-align: left;
		font-style: italic !important;
		text-transform: none !important;
		width: 100%;
	}

	#next-previous a {
		font-weight: 500;
		font-size: 1.25rem;
		display: inline-block;
	}

	#next-previous #next {
		text-align: right !important;
	}

		#next-previous #next label
		{
			text-align: right;
		}


/**************
@FOOTER-OUTER < WRAPPER
**************/

#footer-outer
{
	background: #eee;
	clear: both;
	color: #000;
	z-index: 2;
}

/**************
@THE-END-HOLDER < FOOTER-OUTER
**************/

#footer-outer #the-end-holder
{
	display: table;
	margin: 0 auto 1rem;
	padding-top: 1rem;
	text-align: center;
}

/**************
@THE-END < THE-END-HOLDER
**************/

#the-end-holder #the-end
{
	color: #222;
	display: table-row;
	font-size: 1.25rem;
	line-height: 1.25rem;
}
#the-end-holder.reverse
{
	color: #fff;
}
#footer-outer.taller #the-end-holder
{
	padding-top: 4rem;
	width: 6rem;
	max-width: 6rem;
}

	#footer-outer #the-end-holder img
	{
		width: 6rem;
	}

		#latin,
		#english,
		.crest-holder
		{
			display: table-cell;
			padding: 0.5rem;
			vertical-align: middle;
		}

		#latin,
		#english
		{
			font-style: italic;
			font-weight: 200;
			margin-top: 0;
			min-width: 20rem;
			text-align: right;
			font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
		}

		.crest-holder
		{
			text-align: center;
		}

		#english
		{
			font-style: normal;
			font-weight: 400;
			text-align: left;
		}

/**************
@FOOTER < FOOTER-OUTER
**************/

#footer
{
	color: #000;
}

	#footer a
	{
		color: #BE6500;
		text-decoration: none;
	}
	#footer a:hover
	{
		color: #FEA139;
	}

	#footer h3
	{
		font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif;
		font-size: 1rem;
		font-style: normal;
		font-weight: 400;
		letter-spacing: 0.05rem;
		line-height: 1.5rem;
		margin-bottom: 1rem;
		padding-left: 1rem;
		text-transform: uppercase;
	}

/**************
@FOOTER-INNER < FOOTER
**************/

#footer-inner
{
	border-bottom: 2px solid #222;
	border-top: 2px solid #222;
	margin: 0 auto;
	max-width: 80rem;
	padding-top: 0;
	position: relative;
}

#footer-inner h3
{
	width: auto;
	border: 0;
	padding-top: 0;
	padding-bottom: 0;

}

/**************
@contact-and-follow < FOOTER-INNER
**************/

#footer-inner #contact-and-follow
{
	display: table-cell;
	vertical-align: top;
	width: 38.2%;
}

	#footer-inner #contact-and-follow ul
	{
		padding-left: 1rem;
		margin-bottom: 1rem;
	}

		#footer-inner #contact-and-follow li
		{
			color: #222;
			font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
			font-style: normal;
			font-weight: 200;
			line-height: 1.34rem;
			list-style: none;
			margin-bottom: 0.75rem;
			min-width: 30rem;
		}
		#footer-inner #contact-and-follow #feeds-list li
		{
			margin-bottom: 0.25rem;
		}

			#footer-inner #contact-and-follow #feeds-list li
			{
				font-weight: 400;
			}

				#main.homepage #footer-inner #contact-and-follow #feeds-list li .fa
				{
					color: #EDD42A; /* looks weird, no? */
				}

			#footer-inner #contact-and-follow li span
			{
				display: block;
			}

			#footer-inner #contact-and-follow .position-title
			{
				font-weight: 400;
			}


/**************
@AFFILIATIONS-LOGOS < FOOTER-INNER
**************/

#footer-inner #affiliations-logos
{
	position: relative;
	width: 61.8%;
	display: table-cell;
}

	#footer-inner #affiliations-logos h3
	{
		padding-left: 0;
	}

	#footer-inner #affiliations-logos img
	{
		margin: 0.5rem;
		max-height: 80%;
		max-width: 80%;
		text-align: right;
		vertical-align: bottom;
	}

	#footer-inner #affiliations-logos ul
	{
		margin: 0;
		margin-left: -1rem;
		margin-right: -1rem;
		padding-left: 1rem;
	}

		#footer-inner #affiliations-logos ul li
		{
			border-radius: 0.25rem;
			float: left;
			height: 6.8rem;
			list-style: none;
			margin-bottom: 1rem;
			margin-right: 1rem;
			overflow: hidden;
			position: relative;
			width: 11rem;
		}

			#footer-inner #affiliations-logos ul li p
			{
				margin: 0.5rem;
				line-height: 1.25rem;
			}

			#footer-inner #affiliations-logos ul li img
			{
				bottom: 0;
				position: absolute;
				right: 0;
			}


/**************
@NOTICES < FOOTER-INNER
**************/

#footer-inner #notices
{
	padding-top: 2rem;
	padding-bottom: 2rem;
}

	#footer-inner #notices p
	{
		font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
		font-size: 1.25rem;
		font-weight: 200;
		line-height: 1.5rem;
		margin: 0 auto;
		text-align: center;
		width: auto !important;
	}
	#footer-inner #notices p#copyright
	{
		border: 0;
		font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif;
		font-size: 1rem;
		font-style: normal;
		font-weight: 400;
		letter-spacing: 0.05rem;
		line-height: 1.5rem;
		padding-bottom: 0;
		padding-top: 0;
		text-transform: uppercase;
	}

.to-the-top
{
	position: fixed;
	cursor: pointer;
	opacity: 0.5;
	font-size: 3.5rem;
	z-index: 999;
	transition: all 0.125s ease;
	color: #ccc;
	display: none;
}

.to-the-top:hover
{
	color: #4B6876
}

#to-the-top-left
{
	bottom: 0;
	left: 0.5rem;
}

#to-the-top-right
{
	bottom: 0;
	right: 0.5rem;
}

#to-the-top-top
{
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}


.to-the-top
{
	animation-duration: .5s;
	animation-fill-mode: both;
}

@keyframes swingInX
{
	0%
	{
		-webkit-transform: perspective(4000px) rotateX(-90deg);
		transform: perspective(4000px) rotateX(-90deg);
	}

	100%
	{
		-webkit-transform: perspective(4000px) rotateX(0deg);
		transform: perspective(4000px) rotateX(0deg);
	}
}

.to-the-top.swingInX
{
	transform-origin: 0 50%;
	transform-origin: 0 50%;
	backface-visibility: visible !important;
	animation-name: swingInX;
}

@keyframes swingOutX {
	0% {
		transform: perspective(4000px) rotateX(0deg);
	}
  100% {
		transform: perspective(4000px) rotateX(-90deg);
	}
}


/**************
@TYPOGRAPHY
**************/

.-core-document {

	font-weight: 400;
}

.-tags {

	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.-tag {

	display: block !important;
	background: #0002;
	border-radius: 0.25rem;
	border: 1px solid #333;
	font-size: 75% !important;
	font-weight: 600;
	padding: 0.25rem ;
	text-transform: uppercase;
	text-align: center !important;
}

table.list td .-tag {

	text-align: center !important;
}


.-fw500 {
	font-weight: 500 !important;
}

.-accreditation-strand,
.-domain {
	font-weight: 700 !important;
}

.entry-title {

	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
	text-transform: none;
	letter-spacing: 0;
}

.-artifact,
.-artifact-slot,
.assets-lv-name {
	font-style: normal !important;
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important; 
	font-weight: 600 !important;	
}

/*
.-artifact-slot,
table.list .main p.-artifact-slot {
	font-weight: 400 !important;	
	color:  #fff !important;
	text-shadow: rgb(0, 0, 0) -1px 0px 0px, rgb(0, 0, 0) 0px 1px 0px, rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0px -1px 0px !important;

}
*/


.-recommendation-response-title {
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace;
}

mark {
	background: #edd42a66;
	color: inherit !important;
	padding-left: 0.25em;
	padding-right: 0.25em;
	border-radius: 0.125rem;
/*	font-style: italic; */
}

.excerpt {
	font-style: italic !important;
	font-size: 0.8em !important;
}

.search-score {
	font-size: 0.8rem;
}

.-form-code {
	text-transform: uppercase;
}

.motto,
#blurb.motto p {
	font-style: italic !important;
}

.motto p::before {
	content: '“';
}
.motto p::after {
	content: '”';
}

.nowrap {
	white-space: nowrap;
}

#wrapper.professional-development.goals #content h3,
#wrapper.code-of-ethics #content h3
{
	font-size: 3rem;
	margin-bottom: -3rem;
}

#wrapper.code-of-ethics #content h3
{
	color: #D67643;
}


#text-date-holder
{
	border-top: 0;
	color: #999;
	margin-top: 3rem;
	margin: 0 auto;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	padding-top: 1rem;
	width: 26.25rem;
}

	#text-date-holder .date
	{
		color: #000;
	}

#text-date-holder p
{
	padding-top: 1rem;
}

.money
{
	display: block;
}

	.money::before
	{
		content: "$";
	/*	color: #999; */
	}

	.-money-no-prefix::before
	{
		content: "" !important;
	/*	color: #999; */
	}

.count
{
	font-style: italic;
}

.directive p
{
/*	margin-top: 0; */
	font-style: italic !important;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	font-weight: 300;
	color: #777 !important;
	text-transform: none !important;
}

.school-name,
.organization-name,
.affiliation-name,
#roles_school input,
.s
{
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	font-style: normal; !important;
	font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif !important;
	text-transform: uppercase;
	/* white-space: nowrap; cos they can be long */
/*	white-space: pre; */
}
#professional-development-info-box .school-name {
	/* font-weight: 400 !important no looks like system */
}

.-domain {
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	text-transform: none;	
	font-weight: 500 !important;
}


.org {
	font-weight: 400;
}

.position-titles,
.position-title,
#position-title,
input[type="submit"],
input[type="button"],
.po
{
	font-style: italic;
	font-weight: 500;
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	text-transform: none !important;
}
#professional-development-info-box .position-title {
/*	font-weight: 400 !important no it's not right, looks like an h2 */
}
.position-title {
	letter-spacing: 0 !important;
}

input[type="submit"].-step-2,
input[type="button"].-step-2 {
	color:  #b23948;
}

.-area-of-certification {
	font-style: normal !important;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	font-weight: 300;
	color: #777 !important;
	text-transform: none !important;
}

.person-name,
select.person-name *,
#person-name,
.person-name #roles_person,
#person-holder .playa-entry a,
#person-holder .playa-ss,
.playa-entry-status.Members-id12 {
	font-style: italic !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: normal !important;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	/* white-space: pre; breaks when in a title */
}
#main #content p .person-name {
	white-space: nowrap;
}

.money,
.console th p.money
{
	font-style: italic !important;
	font-weight: 700 !important;
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace;
}

.caption
{
	font-weight: bolder;
}

#main.roles h1
{
}

#main #content #dateline
{
	margin-bottom: 2rem;
}
	#main #content #dateline p
	{
		font-size: 1rem;
		text-align: right;
		width: 47em;
		line-height: normal;
		color: #333;
	}
	#main #content #dateline.centered p
	{
		text-align: center;
	}

.user-mission-title,
.sub-title
{
	font-weight: 500 !important;
	letter-spacing: 0.05rem !important;
	line-height: 1.5rem !important;
	font-family: "Gotham SSm A", "Gotham SSm B", Arial, Helvetica, sans-serif;
	text-transform: uppercase;

}

#main.accreditation .sub-title,
#main.administrative .sub-title,
.city,
.news-title
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif;
}

.phone {
	white-space: nowrap;
}

#action-steps-list .action-step-listing
{
	clear: left;
	margin-bottom: 1rem;
}

#action-steps-list p
{
	float: left;
	margin: 0;
	width: 61.8%;
}

#form-fields.read-only #action-steps-list ul
{
	float: right;
	margin: 0;
	padding: 0;
	width: 38.2%;
}

#action-steps-list ul li
{
	list-style: none;
	margin: 0;
	margin-left: 1rem;
}

.console-title,
fieldset legend,
label,
.grid.list .-thead .-th,
#main #content label h3
{
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 400 !important;
	letter-spacing: 0.1em !important;
	line-height: 1.5rem !important;
	text-transform: uppercase !important;
	font-style: normal !important;
}

fieldset legend::after
{
	content: "";
}

.fieldset-instructions
{
	width: 31.8%;
}

.system,
label p,
label li,
.s,
::placeholder
{
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-style: italic !important;
	font-weight: 300 !important;
	letter-spacing: 0 !important;
	line-height: 1.5;
	text-transform: none !important;
}
.action .system.reverse.-heavy,
.system.reverse.-heavy {
	font-weight: 400 !important;
}

::placeholder {
	font-weight: 500 !important;
}


.read-only .system.reverse
{
	color: #222 !important;
}
.manage-csf-bg .system.reverse
{
	color: #fff !important;
	background: #877659 !important;
	border: 0.1rem solid #735f3d;
	border-radius: 0.5rem;
	padding: 0.25rem 0.5rem;
	display: inline-block;
}

.system
{
	max-width: 40rem;
}
.table-holder .system,
table.list .system {
	max-width: none;
	color: #777;
}

img.signature
{
	width: 25rem;
}

.note.note-prefix,
.note.note-prefix
{
	margin-top: 2rem;
}

.console .note.note-suffix,
.forms .note.note-suffix,
.views .note.note-suffix
{
	margin-bottom: 2rem;
}

.console .note,
.console .note .system {
	margin: 0 auto !important;
}

.note.system
{
	text-align: center;
}

.system a
{
	font-weight: 400 !important;
}

.form-holder .system a
{
	color: #EDD42A;
}

.form-holder .system a:hover
{
	color: #fff;
}

.form-url-title,
.console-sub-title
{
	text-transform: none;
}

.form-author-holder {

	/* margin-bottom: -1.75rem; */
	margin-top: -6rem;
	text-align: center;
	width: 100%;
}

	.form-author {

		color: #fff;
		display: inline-block;
		border: 2px solid #fff0;
		padding: 0.25rem 0.5rem;
		margin-top: 0;
		margin-bottom: 0.25rem;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: 1rem;
	}

		.form-author a.email {

			/* border: 1px solid #BE6500; */
			display: inline-block;
			margin-top: 0.25rem;
			border-radius: 0.25rem;
			background: #fff;
			padding: 0.25rem 0.5rem; 
			font-weight: 400 !important;
		}

		.form-author a.telephone {
			display: inline-block;
			margin-top: 0.25rem;
			color: #fff;
		}


.action,
.button {
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 500 !important;
}
 
.action .system.reverse {
	font-weight: 300 !important;
}

#strand-main-display .action
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	font-weight: 300 !important;
}

td.action p
{
	margin-bottom: 0.25rem;
}

.form-title
{
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 500 !important;
}

h1.form-title
{
	font-weight: 400 !important;
	text-transform: uppercase !important;
}

.focus-area-title
{
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
}

.-initiative {
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 500 !important;
	text-transform: none !important;
}

.action-step-title
{
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
}

.-step
{
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 400 !important;
	text-transform: none !important;
}

.mip-activity-title
{
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 500 !important;
}

.file-title
{
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 500 !important;
}

.event-title
{
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 500 !important;
}

.-conference-title {
/*	text-transform: uppercase; */
}

.session-title
{
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 200 !important;
}

.standard-title,
.input-holder-inner .standard-title p
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
}

.-mip-activity-title
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	font-weight: 300 !important;
}

.mip-component-title
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	font-weight: 300 !important;
	letter-spacing: 0.05em !important;
}

.article-title
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	font-weight: 500 !important;
}

.date,
.input-holder-inner .date,
.assets-lv-date,
.d
{
	font-weight: 100 !important;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	font-style: italic !important;
}

.points
{
	font-weight: 100 !important;
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	font-style: italic !important;
}

.code
{
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 300 !important;

}

.format
{
	color: #999 !important;
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 700 !important;
}

.email
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	font-style: italic !important;
	font-weight: 200 !important;
	letter-spacing: 0.025em;
	text-transform: lowercase !important;
}

.content
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
}

.status
{
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	text-transform: uppercase !important;
	font-weight: 200 !important;
}

.-status,
.input-holder-inner p.status {
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	text-transform: uppercase !important;
	font-weight: 200 !important;
}

.notes
{
	font-weight: 300 !important;
}

.form-url-title,
.console-sub-title,
.console th,
.console th p,
#main #content .console th,
#main #content .console th p,
#main #content #map-listing-holder .table-holder th p,
.form-holder th
{
	color: #777 !important;
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-size: 1rem !important;
	font-style: normal;
	font-weight: 400 !important;
	letter-spacing: 0.1rem !important;
	line-height: 1.25rem !important;
}
.console th.empty,
#main #content .console th.empty {
	line-height: 0.25rem !important;
}

.form-url-title .date {
	font-weight: 400 !important;
}

.minimized .form-url-title {
	max-width: 38rem;
	margin-left: auto;
	margin-right: auto;
}



.form-holder th,
#main #content .form-holder th p.console-title
{
	color: #ccc !important:
}

.console th,
.form-holder th
{
	text-transform: uppercase !important;
}

.user-input,
.input-holder-inner p,
.input-holder-inner li,
.filter-table input
{
	font-style: normal;
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}

.input-holder-inner .for-read-only ul,
.input-holder-inner .for-read-only ol {
	padding-left: 0.5rem;
}


.input-holder-inner h1,
.input-holder-inner h2,
.input-holder-inner h3,
.input-holder-inner h4,
.input-holder-inner h5,
.input-holder-inner h6 {
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
}


.read-only .input-holder-inner .directive p,
.input-holder-inner .directive p,
.input-holder-inner .directive p.read-only,
#responses-recommendation-field .input-holder-inner p {
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	font-weight: 300 !important;

}

.input-holder-inner ul {
	margin-left: 0.5rem !important;
	padding-left: 0 !important;
}

.filter-table .quick
{
	font-size: 0.8rem;
	margin-left: 0.5rem;
	text-decoration: none;
}

.fitler-table .quick:hover
{
	text-decoration: underline;
}

.filter-table input
{
	background: rgb(35,35,35);
	background: rgba(0,0,0,0.5);
	border: 0;
	border-radius: 0.5rem;
	color: #fff;
	margin: 0.5rem;
	min-width: 15rem;
	padding: 0.5rem 1rem;
}

.input-holder-inner p.total
{
	font-weight: 600 !important;
}

.level
{
	border: 1px solid #000;
	display: inline;
	padding: 0.25rem 0.5rem;
}

.input-holder-inner .system
{
	background: rgba(255,255,255,0.85);
	color: #333 !important; 
}

#buttons .input-holder
{
	max-height: 2rem;
}

#mip-components .component-name-holder
{
	max-width: 20rem;
}

.objectives,
.objectives p {
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
	font-style: italic !important;
}

.results,
.results p {
	font-family: "Operator SSm A", "Operator SSm B", "Courier New", Courier, monospace !important;
}


.-recommendation,
.-recommendation p {
	font-style: italic !important;
	font-weight: 500 !important;
}

.-naked-against-console,
.form-holder .-naked-against-console {
	color: #222 !important;
}

.-accreditation-standard-title,
.-accreditation-standard-body,
.-accreditation-standard-body p {
	font-family: "Ideal Sans SSm A", "Ideal Sans SSm B", Tahoma, Geneva, sans-serif !important;
	text-transform: none !important;
}

.-accreditation-standard-title {
	/* font-weight: 600 !important; */
	border-bottom: 1px solid #333;
	display:  inline;
}

.-accreditation-standard-body {
	font-weight: 300 !important;
}

/**********
@COLORS HARD-CODED
**********/

.-color-mustard {
	color: #EDD42A !important;
}

/*******
#FORMS
*******/

.csf-datetimepicker-within .field-option {
	display: none !important;
}


/**********
@SEASONAL
**********/

/* Simple SVG Christmas Lights Animation
by Mark Sottek
https://codepen.io/WhizofaWiz/pen/vyjBVP?limit=all&page=3&q=christmas


#Christmas_Lights {
  margin: 0;
  position: absolute;
  width: 100%;
  z-index: -1;
  max-height: 20rem;
}

.light_cord {
  fill: none;
  stroke: #174700;
}

.light_fixture {
  fill: #134413;
}

.red_bulb {
  fill: #CA2128;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}

.green_bulb {
  fill: #2D754A;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}

.blue_bulb {
  fill: #2C3EA8;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}

.white_bulb {
  fill: #F5EED7;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}

.gold_bulb {
  fill: #ffcc5e;
  stroke: #6D6D6D;
  stroke-miterlimit: 10;
}


/* Simply changing the opacity of the SVG fill to create the glow effect for the bulbs

.bulb {
  -webkit-animation-duration: 0.5s;
  -webkit-animation-name: glow;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
  animation-name: glow;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

@-webkit-keyframes glow {
  0% {
	fill-opacity: 0.25;
  }
  100% {
	fill-opacity: 1
  }
}

@keyframes glow {
  0% {
	fill-opacity: 0.25;
  }
  100% {
	fill-opacity: 1.0
  }
}


/* Made a set of ten animation delays to create a more random effect of lights blinking.  Simplest way without jumping through SVG hoops.

.blink-1 {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.blink-2 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.blink-3 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.blink-4 {
  -webkit-animation-delay: 6s;
  animation-delay: 6s;
}

.blink-5 {
  -webkit-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.blink-6 {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}

.blink-7 {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.blink-8 {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

.blink-9 {
  -webkit-animation-delay: 0.95s;
  animation-delay: 0.95s;
}

.blink-10 {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

*/