:root {
  --main-width: 80%; 
  --max-main-width: 900px;
  --menu-width-large: 11em; 
  --menu-width-small: 28em; 
  --menu-left-large: calc((100% - var(--main-width)) / 2 + (var(--max-width) - 100%) / 2);
    --menu-left-small: calc(-1 * var(--menu-width-small));
  }
body {
  font-family: arial;
  font-size: 13px;
  height: 100%;
  width: 100%;
  margin:0;
  background-image: url('mainbg1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  transition: background-image 1s ease-in-out;
}
.unselectable {  /* class to disable drag-select */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

#main {
  position: relative;
  width:var(--main-width);
  min-width: 400px; 
  max-width: var(--max-main-width); 
  margin: 0 auto;
}
 /* --------- logo banner  at top -------------*/
#top {
 width: inherit;       
 min-width: 400px; 
 max-width: 900px; 
 height: 6em;
 position: fixed;
 top:0;
 z-index: 1000;
 background-color: #392719;
 display: flex;
 justify-content: left;
}
#logo {
  width: 8em;
  line-height: 6em;
  border-right: 2px solid #897868;
  text-align:center;
}
#logo img {
  width: 6em;
  display: inline-block;  
  vertical-align: middle; 
}
#logotext {
  margin: auto;
  text-align: center;
  font-size: 2em;
  color: #E9DFD6;
  overflow: hidden;
}
#payyourdues {
  margin:auto;
  margin-top: 0.5em;
  color: black;
  text-align: center;
  background-color:yellow;
  padding: 0.2em;
  font-size: 0.6em;
  border: 1px solid green;
  border-radius: 0.4em;
  width: fit-content;
}
.tagline { 
  line-height: 1em;
  font-size: 0.7em;
  font-family: arial;
}

/* ---------------- menu -------------- */
.menuicon {
  visibility: hidden;
  height: 3em;
}
#menu {
  /* width: 11em; */
    width: var(--menu-width-large);  
  position: fixed; 
  top: 6em;
  /* left:  calc((100% - var(--main-width)) / 2 + (var(--max-width) - 100%) / 2); */
    left: var(--menu-left-large);  
  bottom: 0;
  z-index: 1005;
  background: #7e8c8c;
  overflow-y: auto;
}
#menu div {
  padding:10px;
  margin-bottom: 0.1em;
  background: #7e8c8c;
  cursor:pointer;
  border-bottom: 1px white solid;
  font-family: arial;
  font-size: 1.5em;
  transition: color 0.5s, text-shadow 0.5s;
}
.menuNormal {
  color: #ffffb3;
}
.menuSelected {
  color:gold;
  text-shadow: 0.1em 0.1em 0.3em red;
}
#menu div:hover {
  color:gold;
}
#menu #fname {
  text-align: center;
  background-color: #ffffbf;
  color: black;
  cursor: default;
  font-size: 1.5em;
}
#menu .ubutton, #menu #login {
  background-color: #ffffbf;
  color: #044abc;
  font-size: 1.5em;
  padding: 0.3em;
  border-bottom: 1px white solid;
  margin-bottom: 0.1em;
}

/* -------------------- content -----------------*/
#rotator { /* rotating pics at top of page */
  background:url('hardhatdude.jpg') no-repeat; 
  transition: background 0.5s;
  width: 70%;
}
#content-container {
  margin: 2.8em 0 0 11em;
}
.content { /* section containers */
  margin-bottom: 1em;
  padding-top: 4em;
  padding-left: 1.3em;
  padding-right: 1.3em;
  padding-bottom: 2em;
  background-color: #ffffe6;
  background: linear-gradient(45deg, #e6ffe6, #ffffe6, #e6ffe6);
  font-size: 1.2em;
  line-height: 150%;
  overflow-y: auto;
}
#carat { width: 1.2em; }
ul {
  list-style-type: disc;
}
li {
  margin-bottom: 0.7em;  
}	  
#donateButton {
  border: 1px solid black;
  margin: 1em auto 1em auto;
  padding: .3em;
  width: 40%;
  font-size: .5em;
  line-height: 1.3em;
  text-align: center;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  
}

.copyright {
  font-size: .4em;
  font-style: italic;
  text-align: center;
}
.small {
  font-size: .7em;
  line-height: 1.4em;
}
.member {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: fit-content;
}
.member div {
  width: 100%;
  padding-right: 1em;
}

.member img {
  height: 6em;
}
.instructorImg {
  height: 6.5em;
  float: left;
  padding: 0 1em .5em 0;
}
.protectedBanner {
  width: fit-content;
  text-align: center;
  border: 1px solid red;
  padding: .5em;
  margin: 2em auto 2em auto;
  font-weight: bold;
  z-index: 1020;
}
.protectedContent {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

h1 { /* content heading text */
  position: relative;
  top: -1.5em;
  font-family: arial;
  font-size: 1.6em;
  text-align: center;
  line-height: 130%;
}
.courierQuote {
  margin-left: 3em;
  font-family: 'Courier New', monospace;
  font-size: 0.7em;
}
.center { /* horizontal centering class for images */
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color:blue;
  font-size: 1.2em;
}
.indented {
  margin-left: 2em;
  font-style: italic;
}
.expand {  /* this and expandedText expand text when heading is clicked */
  cursor: pointer;
  font-size: 1em;
  color: blue;
}
.expandedText {  
  display: none;
  padding: 1.2em;
  background: rgb(240,245,240);
background: radial-gradient(circle, rgba(240,245,240,1) 16%, rgba(245,255,255,1) 100%, rgba(153,223,181,1) 100%);
border: 4px ridge #f15d5d;
}

.arrow-ul {
  list-style-image: url('arrow.gif');
}
.arrow-ul li {
  margin-bottom: 0;
}
.paren-ol { /* ordered list with bullets (1), (2), etc */
  list-style: none;
  counter-reset: item;
  padding-left: 1.5em;
}
.paren-ol li {
  counter-increment: item;
  margin-bottom: 0.5em;
  position: relative;
}
.paren-ol li::before {
  content: "(" counter(item) ")";
  position: absolute;
  left: -1.5em;
}

.paren-ol {
  list-style: none;
  counter-reset: item;
  padding-left: 1.5em;
}

.paren-ol li {
  counter-increment: item;
  margin-bottom: 0.5em;
  position: relative;
}

/* Numbered: (1), (2), (3) */
.paren-ol.numbers li::before {
  content: "(" counter(item) ")";
  position: absolute;
  left: -1.5em;
}

/* Lettered: (a), (b), (c) */
.paren-ol.letters li::before {
  content: "(" counter(item, lower-alpha) ")";
  position: absolute;
  left: -1.5em;
}
.no-bullets { list-style-type: none; }


#formContainer { /* email contact form */
  margin: auto;
  width: 90%;
  border: 1px solid black;
  border-radius: 0.5em;
  padding: 1.2em;
  background: linear-gradient(45deg, #e3fdff, #efffe3, #e3fdff);  
  box-shadow: 0.4em 0.4em 0.4em 0.1em gray;
}	
#smart-button-container {
  width: 80%;
  margin: auto;
}
#contactEmail {  /* email input box */
  width: 78%;
  height: 1.4em;
  font-size: 1em;
}
#to {
  font-size: 1em;
}
#emailMessage { /* email message box */
  height: 12em;
  width: 85%;
  font-size: 1em;
  resize: none;
  padding: 0.3em;
}
#emailButton {margin: auto; }

.alert {
  color:red; 
  font-size:3.5em;
  text-decoration: underline;
  text-align: center;
}
.bulletin {
  color:blue; 
  font-size:3.5em;
  text-decoration: underline;
  text-align: center;
}
.dateline {
  font-size: 0.7em;
  font-style: italic;
  text-align: right;
}
h3, h4 { text-align:center; }
#renewalPolicy {
  border: 0.3em double red;
  margin: 1em;
  padding: 1em;
}

/* links section */
#links-content a, .darkLink {
  text-decoration: none; 
  color:black;
  margin-top:10px;
}
.linkTitle {
  text-align: center;
  text-decoration: underline;
  font-weight: bold;
}
.linkDisplay {
  color: blue;
}
/* buttons styling */
.buttonStyle {
  width: fit-content;
  font-size: 1em;
  padding: 0.3em !important;
  border: 1px solid black;
  border-radius: 0.3em;
  box-shadow: 0.3em 0.3em 0.7em gray;
  margin: auto 0;
  text-align: center;
}
.buttonDisabled {  
  cursor: default;
  color: #777777;
  background-color: #dddddd;
}
.buttonEnabled {  
  cursor: pointer;
  color:white;
  background-image: linear-gradient(180deg, #00b359, #00ff00);
}
.buttonEnabled:hover, label:hover {
  text-shadow: brown 0.3em 0.3em 0.7em;
}
.buttonEnabled:active {
   background-color:white;
}
.buttonDisabled:hover {  
  background-color: red;
}

#haveAccount {font-size: 1.2em;}  
#renewalPortal {
}
#createOrLogin {
  background-color: white;
  box-shadow:  .3em .8em .5em #888888;
  border: 1px solid black; 
  width: fit-content;
  display: none;
  margin: auto;
  padding: 1.2em;
  text-align:center;
}
#createOrLogin div {
  margin: auto;
  padding: .5em 0;
}
#paypalBody {
  display: none;
  background-color: white;
}
#paypal-button-container {
  margin: auto;
  width: 50%;
  font-size: 2em !important;
}
#paymentForm, #paypalBody, #paypalButtons {
  display: none;
}
.paymentForm {
  font-size: 1em !important;
  width: 55%;
  padding-left: 0.2em;
  height: 1.3em;
  border:0;
  border-color: black;
  text-align:left;
  box-shadow: 0.2em 0.2em 0.7em gray;
}
.arrow {
  height: 1em;
}
.clientContainer { 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 1em;
}
.clientBanner { 
  background: rgb(255,255,255);
  background: linear-gradient(322deg, rgba(255,255,255,1) 0%, rgba(251,255,255,1) 81%); 
  border: 1px solid #007bff;
  padding: 0.5em;
  cursor: pointer;
  display: flex;
  justify-content: left;
  flex-flow: row wrap;  
}
.clientBanner  div {
  margin: auto 0;
  padding-right: .4em;
}
.bannerText:hover {
  color: black;
}
.clientBannerSelected {
  color: black;
  text-shadow: 3px 3px 10px rgba(21,119,217,1);
}
.clientBody {
  padding: 1em;
  border: 1px solid black;
  background-color: white;
}
.bannerText {
  display: inline-block;
  color: gray;
  width: 45%;
}
.bannerMessage {
  display: inline;
  width: 40%;
  color: black;
  text-shadow: 3px 3px 10px green;
}
.detailHeader {
  text-align: center;
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 1em;
}
.detailContainer {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  border: 1px solid black;
  padding: 1em;
}
.fieldLine {
  display: flex;
  align-items: baseline; 
  margin-bottom: .3em;
}
.fieldLabel {
  white-space: nowrap;
  margin-right: 1em;
  margin-left: auto;
}
.fieldLine input {
  width: 70%;
}
#detailMessage {
  font-size: 1.2em;
  font-style: italic;
  text-align: center;
  margin-bottom: .5em
}
#continueButton {
  margin: auto;
}
/* ===============================================*/
/* ------------- small screen defs  ------------- */
@media only screen and (max-width: 700px) {
 #main { width: 100%; left:0;}
 #top { 
   width: 100%; 
   left:0; 
   right:0;
   margin-right: 0;
 }
 .menuicon { /* hamburger icon  */
    visibility: visible;
    position:fixed;
    top: 7em;
	left: 1.5em;
    height: 3em;
    cursor: pointer;
    z-index: 1010;
	background-color: white;
  }
  #menu {
    height: auto;
    width: var(--menu-width-small);
    left: var(--menu-left-small);
	z-index: 1011;
  }
  #menu div {
    padding:0.5em;
    background: #7e8c8c;
    cursor:pointer;
    border-bottom: 1px white solid;
    font-family: arial;
    font-size: 1.8em;
    transition: color 0.5s, text-shadow 0.5s;
  }
  #menu #fname {
    text-align: center;
    background-color: #ffffbf;
    color: black;
    cursor: default;
    font-size: 2.5em;
  }  
  #menu .ubutton, #menu #login {
    background-color: #ffffbf;
    color: #044abc;
    font-size: 1.8em;
    padding: 0.3em;
    border-bottom: 1px white solid;
    margin-bottom: 0.1em;
  }  
  #content-container {
    margin: 2.8em 0 0 0;
	width: 90%;
	display: block;
  }
  .content {
	 padding-top: 3em;
	 width: 100%;
	 margin-left:0;
  	 font-size: 1.8em;
	 margin-right: 10em;
    }
  h1 { top: -0.5em; }
.copyright { font-size: .4em; }
}