/* CSS FILE FROM EXECUTORSOFFICE.ORG*/

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
	 margin:0;
	 padding:0;
}

img, fieldset {
	 border:none;
}

* {
	 box-sizing:border-box;
}

hr {
	 display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

@media (max-width:480px) {
	/* Fix for pre "viewport <meta>" mobile browsers */
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}
/** ----- Body Elements ----- **/

html, body {
	 height:100%;
}

button,
label {
	 cursor:pointer;
}

body, button, input, table, textarea, select {
	 font:normal 0.994em/1.3 arial,helvetica,sans-serif; /* was 1em/1.5 */
}

body {
	 background:#0B002B; 
}

/** ----- END Body Elements ----- **/

/** ----- Image formatting for main content areas ----- **/

.leadingPlate,
.trailingPlate {
	 width:100%;
	 max-width:40%;
}

.leadingPlate {
	 float:left;
	 padding:1em; /* was 0 1.5em 1.5em 0 */
}

.trailingPlate {
	 float:right;
	 padding:1em; /* was 0 0 1.5em 1.5em; */
}

.plate {
   display:block;
	 max-width:100%;
	 margin:0 auto 1em; /* had 0 at the beginning and 1.5em at the end */
}



/** ----- END Image formatting for main content area ----- **/


/** ----- Top of page ----- **/

#top {
   max-width:80em;
	 margin:0.33em auto; /* was 0em - 0.33em is the space between the top of the viewport & the header, auto is centering of header image */
   padding:0 0em;
   border:0px solid #0C810F;
   height: 100%;
}

.modalFix {
	 position:fixed;
	 overflow:auto;
	 width:100%;
	 height:100%;
   -webkit-overflow-scrolling:touch;
}

/** ----- END Top of page ----- **/

/** ----- Header ----- **/

header {
   background-color:#000;  
}

h1,
#mainMenu,
#top > footer {
	background:#000;
 	color:#FFF;
    
}

h1 {
	position:relative;
	padding:0.5em 0.5em 0.42em 0.5em; /* 0.5em; */
	font-size:3em;
	line-height:1em;
	text-transform:uppercase;
	color:#FB0;
	/*border-width:1px 1px 0px 1px;*/
}

h1 small {
	display:block;
	font-size:0.5em;
	padding-left:6em; 
}

h1:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
  width:100%;
	height:200%;
	background:url(images/h1logo.png) 0 0 no-repeat;
	background-size:contain;
}

/** ----- END Header ----- **/

/** ----- TOP MENU ----- **/

#mainMenu { 
  border-top:0px solid #0C810F;
  margin-top: 2.5em;
}

#mainMenu ul {
	list-style:none;
	display:flex;
}

#mainMenu li {
	flex:1 0 auto;
}

/* Positioning of the menu items in relation to each other*/
#mainMenu a {
	position:relative;
	display:block;
  padding:0.33em 0em 0.05em 0em; 
  line-height: 1.4em ;
	font-family:arial,helvetica,'times new roman';/*courier,monospace;*/
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	font-size:1.1em;
	color:yellow;
	transition:color 0.3s, background 0.3s, text-shadow 0.3s;
}

#mainMenu a:focus,
#mainMenu a:hover {
	color: red;
	text-shadow:0 0 0.25em #FFF;
}

/** ----- END TOP MENU ----- **/


/** ----- MAIN CONTAINER - left menu and main content -----**/

main {
   display: flex;
   height:100%;
   background:url(images/executors-office.jpg) center no-repeat;
   background-size: cover;
   
}

section {
   display:flex;
   flex-direction:row;
   flex-wrap:wrap;
   position:relative;
   z-index:1;
}

/** ----- LEFT MENU -----**/

.left-menu {
    order:1;
    width:20%;
    border-right:1px solid #0C810F; 
    border-top: 1px solid #0C810F; 
    background:black; 
    font-family:arial,helvetica,'times new roman';
    z-index:99; 
}

.Left-1st-line {
   color: white;
   font-size: 0.875em;
   text-align: center;
}

#MenuL ul {
  list-style:none;
}

#MenuL li {
  display:block;/* Keeps individual items under each other */
}

#MenuL a {
  float:left;
  clear:left;
  width:100%; /* makes link 100% width of the column */
  padding:0.6em 0 0.4em 0.5em; 
  line-height: 1.3em ;
  font-family:arial,helvetica,'times new roman';
  text-align:left;
  text-decoration:none;
  letter-spacing:0.1em;
  text-transform:uppercase;
  font-size:0.75em; 
  color:#0F0;
  transition:color 0.3s, background 0.3s, text-shadow 0.3s;
}

#MenuL a:focus,
#MenuL a:hover {
  color:black;
  text-shadow:0 0 0.25em #FFF;
  background:#FD8;
}

.line-divider {
  border-top:1px solid white;
}
/** ----- END LEFT MENU ----- **/

/** ----- MAIN CONTENT ----- **/

main p {
  display:block;
  padding:0.5em 1em 0.5em 1em;
}

main h2{
  display:block;
  margin: 0 auto;
  padding:1em;
}

main h3{
  display:block;
  padding:1em;
  text-align:center;
}


ol li {
  counter-increment: list;
  position: relative;
  margin-left:3em;
  line-height:1.3em;
}

ol a {
  display:block;
  padding:0.5em;
}

.MainContent {
   width:80%;
   background:#FFECB4; /* FD8 */
   border-top:1px solid #0C810F;   /* Added this. Will change width to 2 in media queries for mobiles so that it can be seen in vertical view */
   min-height:100%;
   height:100%;
   order:2;
   z-index:-1;
   padding: 1em;
    
}

.MainContent p h2 h3 h4 a div span link {
   display: flex;
   flex-direction:column;
   align-content: flex-start;
   row-gap:1em;
}

.MainContent h2 {
   color:#000;
   text-align:center;
   font-size:1.5em;
   line-height:1.5em;
   padding:0.5em;
}

.MainContent h2 small {
   display:block;
   font-size:0.7em;
   padding:0em 0em 0.7em;
}

em {
   display:block;
   font-weight: bold;
   line-height: 1.1em;
   padding:1em;
}

.MainContent h3 {
   padding:0em 0em 0.5em;
}

.MainContent p {
   display:block;
   text-indent: 0.75em;
   padding-bottom:1em;
}

#ip {
   font-size:0.9em;
   font-weight:500;
   color:red;
   text-align:justify;
   line-height:1em;
   padding:1em 1em 1em;
}

video {
   display:block;
   margin: auto;
   padding:0.87em 0em;
   width: 95%;
}

/** ----- END MAIN CONTENT ----- **/

/** ----- FOOTER ----- **/

#top > footer {
	 text-align:center;
	 font-size:0.8em;
	 border-top:1px solid #0C810F;
}

#top > footer p {
	 padding:0em 0em 0.5em;
}

#top > footer cite {
	 display:inline-block;
	 padding:0em 0em 0.5em;
}

/** ----- END FOOTER ----- **/

/** ----- CONTACT FORM ----- **/

.toggle, .toggleL {/* Added ,toggleL 24 March 2022*/
	 display:block; /* IE requires these not be hidden work */
	 position:absolute; /* so hide them off screen instead */
	 left:-999em;
}

.modal,
.modal > a {
	 position:absolute;
	 top:0;
	 left:0;
	 width:100%;
	 height:100%;
}

.modal {
	 position:fixed;
	 left:-100vw;
	 overflow:auto;
	 background:rgba(64,32,0,0.8);
	 box-shadow:inset 0 0 128px 128px rgba(0,0,0,0.5);
	 color:#F80;
	 opacity:0;
	 transition:opacity 0.5s, left 0s 0.5s;
}

.modal > div {
	 display:flex;
	 align-items:center;
	 justify-content:center;
	 width:100%;
	 min-height:100%;
	 padding:1em;
}

.modal section {
	 position:relative;
	 top:-50vh;
	 overflow:hidden;
	 width:100%;
	 max-width:40em;
	 background:#000;
	 border:1px solid #F80;
	 border-radius:0.5em;
	 transition:top 0.5s;
}

.modal section > a:first-child:before {
	 content:"x"; /* was \1F5D9 - cancellation symbol for the closing X*/
	 position:absolute;
	 font-size:1.5em;
	 line-height:1em;
	 top:0.1em;
	 right:0.15em;
	 color:#FFF;
}

.modal section h2 {
	 display:block;
	 padding:0.25em 0.5em;
	 font-size:1em;
	 font-weight:bold;
	 background:#F80;
	 color:#000;
}

.modal:target {
	 left:0;
	 opacity:1;
	 transition:opacity 0.5s, left 0s;
}

.modal:target section {
	 top:0;
}

#contact fieldset {
	 padding:1em 1em 0;
}

#contact input,
#contact textarea {
	 width:100%;
	 padding:0.25em 0.5em;
	 margin-bottom:0.5em;
	 color:#FED;
	 background:#420;
	 border:1px solid #840;
	 border-radius:0.25em;
}

#contact input:focus,
#contact textarea:focus {
	 outline:none;
	 box-shadow:0 0 0.5em 0.125em #C60;
}

#contact input:valid,
#contact textarea:valid {
	 border-color:#630;
}

#contact input:invalid,
#contact textarea:invalid {
	 border-color:#F40;
}

#contact button {
	 padding:0.5em 1em;
	 background:#F80;
	 color:#000;
	 border:none;
	 border-radius:0.25em;
	 transition:background 0.3s, text-shadow 0.3s;
}

#contact button:focus,
#contact button:hover {
	 background:#F92;
	 text-shadow:0 0 0.5em #FC8;
}

#contact .submitsAndHiddens {
	 padding:0.5em 1em 1em;
	 text-align:right;
}

/** ----- END CONTACT FORM ----- **/

@media (max-width:64em) {
  #top {
	 padding:0;
	}
	h1 {
	 font-size:4.6875vw;
	 border:0;
	}
	em {
	padding:1em;
	}
	#mainMenu, #MenuL, 
	#top > footer {/* Added #MenuL 24th March 2022 */
	 border-width:1px 0;
	}
	section {
	margin-top:0em;
	}
}

@media (max-width:60em) {
  .Left-1st-line {
    display: none;
  }
  .left-menu {
    width:100%;
    order:1;
    min-height:3vh; 
    height:3.3em;
    border-bottom:2px solid #0C810F;
  }
   main {
  margin-top:2.7em;
  }
  .MainContent {
    width:100%;
    align-items:top;
    order:2;
  }
	#mainMenu,
	#mainMenu > label {
		position:absolute;
		overflow:auto;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	#MenuL,
	#MenuL > label {
		position:absolute;
		overflow:auto;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	#toggle_mainMenu + label {/* Positioning of main menu burger */
		position:absolute;
		top:1em;
		right:1em;
		padding:0.25em;
		border:0.2em solid #FFF;/* FFF */
		border-radius:0.5em;		
	}
	#toggle_MenuL + label {/* Positioning of burger menu */
		position:absolute;
		top:0.65em;/* 4.25em */
		left:1em;
		padding:0.25em;
		border:0.2em solid #0F0;/* FFF, F00 */
		border-radius:0.5em;
		z-index:99;
	}
	#toggle_mainMenu + label:before,
	#toggle_mainMenu + label:after {/* Construction of burger menu */
		content:"";
		display:block;
		width:1.25em;
		height:0.25em;
		border:solid #FFF;
		border-width:0.2em 0;
	}
	/* Added 24th March 2022 */
	#toggle_MenuL + label:before,
	#toggle_MenuL + label:after {/* Construction of burger menu */
		content:"";
		display:block;
		width:1.25em;
		height:0.25em;
		border:solid #0F0;
		border-width:0.2em 0;
	}
	#toggle_mainMenu + label:after {
		border-top:0;
	}
	#toggle_MenuL + label:after {
		border-top:0;
	}
	#mainMenu, #MenuL {/* Menu Window */
		position:fixed;
		left:-100vw;
		background:rgba(64,32,0,0.8);
		box-shadow:inset 0 0 128px 128px rgba(0,0,0,0.5);
		opacity:0;
		transition:opacity 0.5s, left 0s 0.5s;
		z-index:99;
	}
  #MenuL {/* Menu Window */
		position:fixed;
		left:-100vw;
		background:rgba(64,32,0,0.8);
		box-shadow:inset 0 0 128px 128px rgba(0,0,0,0.5);
		opacity:0;
		transition:opacity 0.5s, left 0s 0.5s;
        z-index:99;
	}
	#mainMenu div {
		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
		min-height:100%;
		padding:1em;
	}
    #MenuL div {
		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
		min-height:100%;
		padding:1em;
	}
	#mainMenu nav { /* Width of the Menu Window */
		position:relative;
		top:-50vh;
		overflow:hidden;
		max-width:26em; /* was 24em */
		background:#000;
		border:1px solid #F80;
		border-radius:0.5em;
		transition:top 0.5s;
	}
    #MenuL nav {
		position:relative;
		top:-50vh;
		overflow:hidden;
		max-width:24em;
		background:#000;
		border:1px solid #F80;
		border-radius:0.5em;
		transition:top 0.5s;
	}
	#mainMenu nav:before {
		content:"Main Menu";
		display:block;
		padding:0.25em 0.5em;
		font-weight:bold;
		background:#F80;
		color:black;
	}
    #MenuL nav:before {
		content:"Links with * are complete";
		display:block;
		padding:0.25em 0.5em;
		font-weight:bold;
		background:#F80;
	}
	#mainMenu nav > label:first-child:before {
		content:"X";
		position:absolute;
		font-size:1.5em;
		line-height:1em;
		top:0.1em;
		right:0.15em;
		color:black;
	}
    #MenuL nav > label:first-child:before {
		content:"X";
		position:absolute;
		font-size:1.5em;
		line-height:1em;
		top:0.1em;
		right:0.15em;
	}
	#mainMenu ul {
    display:flex;
		flex-wrap:wrap;
		padding:0 0.25em 0.25em 0;
		
	}
  #MenuL ul {
    display:flex;/* Added 30th March 2022 */
		flex-wrap:wrap; /* Added 30th March 2022 */
		padding:0 0.25em 0.25em 0;
	}
	#mainMenu li {/* gaps around the colored menu items */
		width:50%;
		padding:0.25em 0 0 0.25em;
	}
   #MenuL li { /* CHECK THIS FOR WRAPPING IN TWO COLUMNS */
		width:50%;
		padding:0.25em 0 0em 0.25em;
		flex:1 0 auto; /* Added 30th March 2022 */
	}		
	#mainMenu .rabbit {
		order:1;
	}
	#mainMenu .rabbit span,
	#mainMenu .donations span {
		position:static;
		width:auto;
		padding:0;
		background:transparent;
		color:inherit;
		box-shadow:none;
		opacity:1;
	}
	#mainMenu a {
		padding:0.5em;
		background:#420;
		color:#FC0;
	}
    #MenuL a {
    text-align: center;
    font-size:0.9em;
		padding:0.5em;
		background:#420;
		color:#FC0;
	}
	#mainMenu a:focus,
	#mainMenu a:hover {
		background:#630;
	}
  #MenuL a:focus,
	#MenuL a:hover {
		background:#630;
		color:white;
	}
	#mainMenu .rabbit a:before,
	#mainMenu .donations a:before {
		display:none;
	}
	#toggle_mainMenu:checked ~ #mainMenu {
		left:0;
		opacity:1;
		transition:opacity 0.5s, left 0s;
	}
	#toggle_MenuL:checked ~ #MenuL {
		left:0;
		opacity:1;
		transition:opacity 0.5s, left 0s;
   	}
	#toggle_mainMenu:checked ~ #mainMenu nav {
		top:0;
	}
	#toggle_MenuL:checked ~ #MenuL nav {
		top:0;
	}
	#top > footer cite {
		display:inline;
	}
}

@media (max-width:48em) {/* 800px */
  main {
  margin-top:2em;
  }
	main p, h2 {
	padding:1em;
	}
}

@media (max-width:26em) {
  main p {
    padding:0em;
  }    
	#toggle_MenuL + label {/* Positioning of burger menu */
		top:0.7em;
	}
}