/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
																	 .simpleDoor
HTML
.simpleDoor is designed for the HTML model: UL > LI > A

IMPORTANT
If you use HTML *inside* the A (e.g. EM or STRONG etc) then the full contents
of the A should be wrapped in a SPAN, i.e.:
	good
		<li><a><span>I like <em>cats</em></span></a></li>
	bad
		<li><a>I like <em>cats</em></a></li>
this is becuase: https://ispdev3www.elections.ca/content.aspx?section=res&dir=__no_ftp_upload/ds&document=simpledoor&lang=e#title17
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
	/*Main simpleDoor rules*/
		/*So we don't need to bother/remember to also add .theboxsizing class*/
			.simpleDoor,
			.simpleDoor *,
			.simpleDoor *:before,	/* Probably not needed */
			.simpleDoor *:after {	/* Probably not needed */
				box-sizing: border-box;
			}
		.simpleDoor {
			display: flex;
			flex-wrap: wrap;
			gap: 1.0em;
			/*Remove the defaul UL indent*/
				padding: 0;
			/*Kick out the Style*/
				margin-left: 0 !important;
		}
		.simpleDoor li {
			list-style-type: none;
			/*2025-01-24-1353
				Was until just now
					width: 20%;
				20% is not good for many items of content now coded, such as
				the PE main entry pages. Reverted to value from BU:
					width: 31.5%;
				Intrigued as to why this was changed - guessing just a copy
				over of the main ver neglected to spot this (31.5) is the
				default here on the old corp site
			*/
				/* ? 18.5% ?
				   Why was this 18.5%? Just noticed at 2025-02-24-1301. Reverting to 31.5%
				*/
				width: 31.5%;
			/*Override ID-based rule*/
				margin: 0 !important;
				padding: 0 !important;
		}
		.simpleDoorNarrow1 li {
				width: 18.5%;
		}
		.simpleDoor li a {
			background: #fff;
			display: block;
			height: 100%;
			padding: .5em;
			/*line-height: 1.38em;
			Vertically align texts*/
				align-items: center;
				display: flex;
			border: 1px solid rgb(3, 96, 100, 0.2);
			border-radius: 0.3rem;
			/*Override ID-based rule*/
				color: #034649 !important;
				text-decoration: none !important;
				min-height: 3.5em;
		}
		.simpleDoor li a:hover,
		.simpleDoor li a.simpleDoorActive {
			background: rgb(3, 96, 100, 0.062);
		}
		.simpleDoor li a.simpleDoorActive {
			justify-content: space-between;
			gap: 0.62em;
		}
		.simpleDoor li a.simpleDoorActive::after {
			content: "\e86c";
			font-family: "Material Icons";
			font-size: 162%;
		}
	/*simpleDoor options*/
		/*Option: no wrap, add additional class 'simpleDoorNoWrap' to the UL*/
			.simpleDoorNoWrap {
				flex-wrap: nowrap;
			}
		/*Option: other widths for items, add additional class 'simpleDoor15' (etc) to the UL*/
			.simpleDoor15 li { width: 15%; }
			.simpleDoor30 li { width: 30%; }
			.simpleDoor40 li { width: 40%; }
			.simpleDoor50 li { width: 50%; }
			/*etc, add more classes is you wish*/
		/*Option: shorter, add additional class 'simpleDoorDense' to the UL*/
			.simpleDoorDense li a {
				padding: 0.42em 0.62em 0.25em 0.62em;
			}
			.simpleDoorDense {
				gap: 0.38em;
			}
		/*Option: green, not teal, add additional class 'simpleDoorGreen' to the UL*/
			.simpleDoorGreen li a {
				/*Override ID-based rule*/
					color: #4E5620 !important;
				border: 1px solid #8b9538;
			}
			.simpleDoorGreen li a:hover,
			.simpleDoorGreen li a.simpleDoorActive {
				background: rgba(139, 149, 56, 0.062);
			}
		/*Option: make the shortest li at least 5em tall, add additional class 'simpleDoorMinHeight' to the UL*/
			.simpleDoorMinHeight li {
				min-height: 5em;
			}
		/*Option: not vertically centered text, add additional class 'simpleDoorTopAlign' to the UL*/
			.simpleDoorTopAlign li a {
				/*Not vertically align texts*/
					align-items: inherit;
					display: inherit;
			}
		/*Option: A tags have colour background, not white, add additional class 'simpleDoorAtagsBackground' to the UL*/
			.simpleDoorAtagsBackground li a {
				background: rgb(3, 96, 100, 0.038);
			}
			.simpleDoorAtagsBackground li a:hover,
			.simpleDoorAtagsBackground li a.simpleDoorActive {
				background: rgb(3, 96, 100, 0.138);
			}
		/*Option: A tags have bright colour background, not white, add additional class 'simpleDoorAtagsBright' to the UL*/
			.simpleDoorAtagsBright li a {
				background: rgba(139, 41, 66, 1);
				border: 3px solid rgba(139, 41, 66, 1);

				/*Override ID-based rule*/
					color: #fff !important;
			}
			.simpleDoorAtagsBright li a:hover,
			.simpleDoorAtagsBright li a.simpleDoorActive {
				background: rgba(139, 41, 66, 0.2);
				color: #3D121D !important;
				border: 3px solid rgba(139, 41, 66, 1);
			}
		/*Option: A tags have bright colour background--specifically Teal--, not white, add additional class 'simpleDoorAtagsBrightTeal' to the UL*/
			.simpleDoorAtagsBrightTeal li a {
				background: #036064;
				border: 3px solid #036064 !important;

				/*Override ID-based rule*/
					color: #fff !important;
			}
			.simpleDoorAtagsBrightTeal li a:hover,
			.simpleDoorAtagsBrightTeal li a:focus,
			.simpleDoorAtagsBrightTeal li a.simpleDoorActive {
				background: #036064 !important;
				color: #fff !important;
				border: 3px solid #00bed6 !important;
			}
		/*Option: A tags have range of colour backgrounds, not white, add additional class 'simpleDoorAtagsColours' to the UL*/
			.simpleDoorAtagsColours li a {
				/*Override ID-based rule*/
					color: #fff !important;
			}
			/*1*/.simpleDoorAtagsColours li:nth-child(1) a { background: rgb(108.84, 115.84, 43.537); border: 3px solid rgb(140, 149, 56, 1); }
			/*2*/.simpleDoorAtagsColours li:nth-child(2) a { background: rgb(156.27, 104.18, 34.985); border: 3px solid rgba(201, 134, 45, 1); 			}
			/*3*/.simpleDoorAtagsColours li:nth-child(3) a { background: rgb(106, 0, 49, 1); border: 3px solid rgb(159.38, 0, 73.673); }
			/*4*/.simpleDoorAtagsColours li:nth-child(4) a { background: rgb(31, 56, 76, 1); border: 3px solid rgb(46.174, 83.411, 113.2); }
			/*5*/.simpleDoorAtagsColours li:nth-child(5) a { background: rgb(3, 96, 101, 1); border: 3px solid rgb(4.5974, 147.12, 154.78); }
			/*6*/.simpleDoorAtagsColours li:nth-child(6) a { background: rgb(96, 32, 92, 1); border: 3px solid rgb(143.44, 47.813, 137.46); }
			/*1*/.simpleDoorAtagsColours li:nth-child(7) a { background: rgb(108.84, 115.84, 43.537); border: 3px solid rgb(140, 149, 56, 1); }
			/*2*/.simpleDoorAtagsColours li:nth-child(8) a { background: rgb(156.27, 104.18, 34.985); border: 3px solid rgba(201, 134, 45, 1); 			}
			/*3*/.simpleDoorAtagsColours li:nth-child(9) a { background: rgb(106, 0, 49, 1); border: 3px solid rgb(159.38, 0, 73.673); }
			/*4*/.simpleDoorAtagsColours li:nth-child(10) a { background: rgb(31, 56, 76, 1); border: 3px solid rgb(46.174, 83.411, 113.2); }
			/*5*/.simpleDoorAtagsColours li:nth-child(11) a { background: rgb(3, 96, 101, 1); border: 3px solid rgb(4.5974, 147.12, 154.78); }
			/*6*/.simpleDoorAtagsColours li:nth-child(12) a { background: rgb(96, 32, 92, 1); border: 3px solid rgb(143.44, 47.813, 137.46); }
			/*1*/.simpleDoorAtagsColours li:nth-child(13) a { background: rgb(108.84, 115.84, 43.537); border: 3px solid rgb(140, 149, 56, 1); }
			/*2*/.simpleDoorAtagsColours li:nth-child(14) a { background: rgb(156.27, 104.18, 34.985); border: 3px solid rgba(201, 134, 45, 1); 			}
			/*3*/.simpleDoorAtagsColours li:nth-child(15) a { background: rgb(106, 0, 49, 1); border: 3px solid rgb(159.38, 0, 73.673); }
			/*4*/.simpleDoorAtagsColours li:nth-child(16) a { background: rgb(31, 56, 76, 1); border: 3px solid rgb(46.174, 83.411, 113.2); }
			/*5*/.simpleDoorAtagsColours li:nth-child(17) a { background: rgb(3, 96, 101, 1); border: 3px solid rgb(4.5974, 147.12, 154.78); }
			/*6*/.simpleDoorAtagsColours li:nth-child(18) a { background: rgb(96, 32, 92, 1); border: 3px solid rgb(143.44, 47.813, 137.46); }
			.simpleDoorAtagsColours li a:not(.simpleDoorActive):hover {
				/*Override ID-based rule*/
					color: #fff !important;
				border-radius: 0.42em;
				outline: 3px solid #000;
			}
			.simpleDoorAtagsColours li a.simpleDoorActive {
				/*Override ID-based rule*/
					color: #fff !important;
			}
		/*Option: A tags have range of colours on top, not white, add additional class 'simpleDoorAtagsColoursOnTop' to the UL*/
			.simpleDoorAtagsColoursOnTop li a {
				position: relative;
				padding-top: 2em;
				padding-bottom: 0.62em;
			}
			.simpleDoorAtagsColoursOnTop li a::before {
				content: "";
				display: block;
				height: 1.38em;
				border-radius: 0.3rem 0.3rem 0 0;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				margin: -1px;
			}
			/*1*/.simpleDoorAtagsColoursOnTop li:nth-child(1) a::before { background: #8C9538; border: 1px solid #8C9538; }
			/*2*/.simpleDoorAtagsColoursOnTop li:nth-child(2) a::before { background: #C9862D; border: 1px solid #C9862D; }
			/*3*/.simpleDoorAtagsColoursOnTop li:nth-child(3) a::before { background: #6A0031; border: 1px solid #6A0031; }
			/*4*/.simpleDoorAtagsColoursOnTop li:nth-child(4) a::before { background: #1F384C; border: 1px solid #1F384C; }
			/*5*/.simpleDoorAtagsColoursOnTop li:nth-child(5) a::before { background: #036065; border: 1px solid #036065; }
			/*6*/.simpleDoorAtagsColoursOnTop li:nth-child(6) a::before { background: #60205C; border: 1px solid #60205C; }
			/*1*/.simpleDoorAtagsColoursOnTop li:nth-child(7) a::before { background: #8C9538; border: 1px solid #8C9538; }
			/*2*/.simpleDoorAtagsColoursOnTop li:nth-child(8) a::before { background: #C9862D; border: 1px solid #C9862D; }
			/*3*/.simpleDoorAtagsColoursOnTop li:nth-child(9) a::before { background: #6A0031; border: 1px solid #6A0031; }
			/*4*/.simpleDoorAtagsColoursOnTop li:nth-child(10) a::before { background: #1F384C; border: 1px solid #1F384C; }
			/*5*/.simpleDoorAtagsColoursOnTop li:nth-child(11) a::before { background: #036065; border: 1px solid #036065; }
			/*6*/.simpleDoorAtagsColoursOnTop li:nth-child(12) a::before { background: #60205C; border: 1px solid #60205C; }
			/*1*/.simpleDoorAtagsColoursOnTop li:nth-child(13) a::before { background: #8C9538; border: 1px solid #8C9538 }
			/*2*/.simpleDoorAtagsColoursOnTop li:nth-child(14) a::before { background: #C9862D; border: 1px solid #C9862D }
			/*3*/.simpleDoorAtagsColoursOnTop li:nth-child(15) a::before { background: #6A0031; border: 1px solid #6A0031; }
			/*4*/.simpleDoorAtagsColoursOnTop li:nth-child(16) a::before { background: #1F384C; border: 1px solid #1F384C; }
			/*5*/.simpleDoorAtagsColoursOnTop li:nth-child(17) a::before { background: #036065; border: 1px solid #036065; }
			/*6*/.simpleDoorAtagsColoursOnTop li:nth-child(18) a::before { background: #60205C; border: 1px solid #60205C; }
		/*Option: UL tag has colour background, add additional class 'simpleDoorUlTagBackground' to the UL*/
			.simpleDoorUlTagBackground {
				background: rgb(3, 96, 100, 0.038);
				padding: 0.62em;
			}
			.simpleDoorUlTagBackground li a:hover,
			.simpleDoorUlTagBackground li a.simpleDoorActive {
				background: rgb(3, 96, 100, 0.138);
			}
		/*Option: UL tag's LIs have DOWN arrows, add additional class 'simpleDoorAnchorNav' to the UL*/
			.simpleDoorAnchorNav li a,
			.simpleDoorNewPageNav li a {
				display: flex;
				justify-content: space-between;
				gap: 0.62em;
			}
			.simpleDoorAnchorNav li a::after,
			.simpleDoorNewPageNav li a::after {
				content: "\e5db";
				font-family: "Material Icons";
				font-size: 162%;
			}
		/*Option: UL tag's LIs have DOWN arrows, that are lighter (less affordance), add additional class 'simpleDoorAnchorNavLight' to the UL*/
			.simpleDoorAnchorNav.simpleDoorAnchorNavLight li a::after,
			.simpleDoorNewPageNav.simpleDoorAnchorNavLight li a::after {
				opacity: 0.38;
				/*
				content: "\e5db";
				font-family: "Material Icons";
				font-size: 162%;
				*/
			}
		/*Option: LI in .simpleDoorAnchorNav has arrow to the RIGHT*/
			.simpleDoorAnchorNav > li.simpleDoorNewPageNav a::after {
				content: "\f1df";
			}
		/*
		a11y202501301523 on 2025-01-30-1521 added back (from backup
		simpledoor__bu_2025-01-16-1129.css) the following
		*/
			/*Less than three or more items*/
				/*9EEADi^^DE24<@G6C7=@H]4@>^2^`a`hgde`^abeb_e*/
				/*one item*/
					.simpleDoor li:first-child:nth-last-child(1) {
						width: 100%;
					}
				/*two*/
					.simpleDoor li:first-child:nth-last-child(2),
					.simpleDoor li:first-child:nth-last-child(2) ~ li {
						width: 48.5%;
					}

			@media only screen and (max-width: 700px){/* - - - - - - - - - - - - - - -*/
				.simpleDoor li {
					width: 48.5%;
				}
				.simpleDoor li:first-child:nth-last-child(2),
				.simpleDoor li:first-child:nth-last-child(2) ~ li {
					width: 48.5%;
				}
			}/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - end-of-700px*/
			@media only screen and (max-width: 550px){/* - - - - - - - - - - - - - - -*/
				.simpleDoor li {
					width: 100%;
				}
				.simpleDoor li:first-child:nth-last-child(2),
				.simpleDoor li:first-child:nth-last-child(2) ~ li {
					width: 100%;
				}
			}/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - end-of-550px*/
		/*
		/a11y202501301523
		*/
		/*Option: external links*/
			.simpleDoor li a[rel~="external"],
			.simpleDoor.simpleDoorTopAlign li a[rel~="external"] {
				justify-content: space-between;
				gap: 0.62em;
				align-items: inherit;
				display: flex;
			}
			.simpleDoor li a[rel~="external"]::after {
				content: "";
			    background: url("../images/external.png") no-repeat top right;
			    width: 20px;
			    height: 20px;
			    display: block;
				flex-shrink: 0;
			}
		/*
		a11y202501301523 on 2025-01-30-1521 added back (from backup
		simpledoor__bu_2025-01-16-1129.css) the following
		*/
			/*
			Typography defaults for children
			*/
				.simpleDoor li a h2, .simpleDoor li a h3, .simpleDoor li a h4, .simpleDoor li a h5, .simpleDoor li a h6  {
					line-height: 1.38;
					/*Rare but ppropriate*/
						font-size: 1.0rem;
				}
		/*
		/a11y202501301523
		*/
		/*Responsiver stuff*/
			@media only screen and (max-width: 1100px){/* - - - - - - - - - - - - - - -*/
				.simpleDoor li {
					width: 12em;
					/*outline: 1px solid greenyellow;*/
				}
			}/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - end-of-1100px*/
			@media only screen and (max-width: 767px){/* - - - - - - - - - - - - - - -*/
				/*Option: nowrap*/
					.simpleDoorNoWrap {
						flex-wrap: wrap;
					}
				.simpleDoor li {
					width: 10em;
					/*outline: 1px solid blue;*/
				}
			}/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 767px*/
			@media only screen and (max-width: 650px){/* - - - - - - - - - - - - - - -*/
				.simpleDoor li {
					width: calc(50% - 1em);
					/*outline: 1px solid red;*/
				}
			}/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 650px*/
			@media only screen and (max-width: 500px){/* - - - - - - - - - - - - - - -*/
				.simpleDoor {
					gap: 1.0em 0;
				}
				.simpleDoor li {
					width: 100%;
					/*outline: 1px solid orange;*/
				}
			}/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - end-of-500px*/
		/*
		a11y202501301523 on 2025-01-30-1521 added back (from backup
		simpledoor__bu_2025-01-16-1129.css) the following
		*/
			/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
														 simpleDoor progressive enhancements
																	  .simpleDoorAonlyInline
			An auto-added class.

			simpledoor_pes.js examines each A tag (.simpleDoor > li > a) to check if it
			contains only text / text+in-line elements. Those that match that test have
			their affordance increased through the automatic addition of the
			class .simpleDoorAonlyInline.

			Those that fail the test due to the presence of one or more 'stop tags' don't
			get the class added. Stop tags:
				p, h2, h3, h4, h5, h6, div, dl, dt, dd, img
			- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
					.simpleDoorAonlyInline {
						padding-top: 2.62rem !important;
						padding-bottom: 1.38rem !important;
					}
		/*
		/a11y202501301523
		*/






/*END*/