/* CSS FILE FROM DebtDischargeServices.COM */

/* 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 1em/1.5 arial,helvetica,sans-serif;
}

body {
background:#fff url(images/bodyBackground.jpg) top center repeat;
}

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

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

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

.leadingPlate {
float:left;
padding:1em;
}

.trailingPlate {
float:right;
padding:1em;
}

.plate {
   display:block;
max-width:95%;
margin:0 auto 1em;
}
/** ----- END Image formatting for main content area ----- **/

/** ----- Top of page ----- **/
#top {
   max-width:61.25em;
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:1px solid #0C810F;
}

.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 {
 background:#fff;
 color:#555555;    
}

h1 {
position:relative;
padding:0.5em 0.5em 0.42em 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:100%;
background:url(images/h1Logo.jpg) 0 0 no-repeat;
background-size:cover;
}

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

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

#mainMenu { 
  border-top:1px solid #0C810F;
  border-bottom: 1px solid #0C810F;
}

#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.1em ;
font-family:arial,helvetica,'times new roman';
text-align:center;
text-decoration:none;
text-transform:uppercase;
font-size:0.875em;
color:#555555;
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 #e2e2e2;
}

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

/** ----- MAIN CONTAINER - main content -----**/

main {
   color: #000;
   display:block;
   height:100%;
   background:#FFECB4;
}

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;
  padding:1em;
  text-align:center;
}

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

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

main ul {
margin-left:2em;
}

small {
margin-left:1em;
}

ol li {
  counter-increment: list;
  position: relative;
  margin: 0 1em 0 2em;
  line-height:1.5em;
}

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

.MainContent {
   width:80%;
   background:#FFECB4;
   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 ----- **/

footer {
   background:#000;
   color:#FFF;
}

#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:60em) {
   .leadingPlate,
   .trailingPlate {
   width:100%;
max-width:65%;
}
  #top {
padding:0;
margin: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;
}
  .Left-1st-line {
    display: none;
  }
  .left-menu {
    width:100%;
    order:1;
    min-height:3vh; 
    height:3.3em;
    border-bottom:2px solid #0C810F;
  }
  .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 #555;/* outside line of burger menu */
border-radius:0.5em;
}
#toggle_MenuL + label {/* Positioning of burger menu */
position:absolute;
top:0.65em;/* 4.25em */
left:0.5em;
padding:0.25em;
border:0.2em solid #0F0;
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 #555;/* color of lines in the burger menu*/
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:"Left Menu - Links with * work";
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;
flex-wrap:wrap;
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 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;
}
}

@media (max-width:48em) {/* 800px */
p h2 {
padding:1em;
}
footer {
padding: 1em;
}
}

@media (max-width:26em) {
  #top {
  margin:0;
  }
  h2 {
  order:1;
}
  .leadingPlate,
  .trailingPlate {
max-width:100%;
order:2;
}
  #toggle_mainMenu + label {
top:0.5em;
right: 0.5em;
}
}