html {

}

/*FOR BACKGROUND ON HOMEPAGE DESKTOP*/
body { 
  background: #304329 url("cssimages/desktopbg.png") no-repeat center center fixed; 
/*  background: url("desktopbg.png") no-repeat left 0px top 0px fixed; */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/*recommended by: https://www.thesitewizard.com/css/mobile-friendly-responsive-design.shtml*/
/*probably what makes the multiple css style sheets work*/
@viewport {
  width: device-width ;
  zoom: 1.0 ;
}

/*this allows multiple classes to be called in html like this: <div class="center sm">*/
.sm {
    font-size: 1.5em;
        font-family: /*Georgia, "Droid Serif",*/ /*Cambria, "Times New Roman", Times,*/ Helvetica, serif;  color: #626258;
        text-shadow: 2px 2px 4px #000000;
        padding-left: 4px;
        padding-top: 10px;
        padding-right: 80px;
}

.lg {
    font-size: 2em;
        font-family: /*Georgia, "Droid Serif",*/ /*Cambria, "Times New Roman", Times,*/ Helvetica, serif;  color: #626258;
        text-shadow: 2px 2px 4px #000000;
        padding-left: 4px;

}

.smhomefoot {
    font-size: .8em;
        font-family: /*Georgia, "Droid Serif",*/ /*Cambria, "Times New Roman", Times,*/ Helvetica, serif;  color: #626258;
        text-shadow: 5px 5px 4px #000000;
        padding-left: 60px;
        padding-top: 10px;
        padding-right: 80px;
}

.classbc A:link {text-decoration: none; color: #F5F5F5;}
.classbc A:visited {text-decoration: none; color: #F5F5F5;}
.classbc A:active {text-decoration: none; color: #F5F5F5;}
.classbc A:hover {text-decoration: underline; color: green;}

/*my attempt to make text wrap around photos like on desktop site. -RS*/
.imgleft {float: left;margin: 6px 10px 0 0;}
.imgright {float: right;margin: 6px 10px 0 0;}
.imgcenter {float: center;margin: 6px 10px 0 0;}


/*
Header is relative so z-index: 1 guarantees always displayed on top
I CHANGED Z INDEX TO FIVE OLD BACKGROUND COLOR background-color: #3b5998;
THIS DOES GIVE SHADOW LINE, SOMEHOW ALLOWS CONTENT TO SCROLL UNDER
*/

/*for content pages*/
.header {
    background-color: #FFFFFF;
    padding: 10px;
    text-decoration: none;
    position: fixed;
    width: 100%;
    height: 67px;
    z-index: 5;
    -webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}

/*for invisible homepage header*/
.headerhome {
    padding: 10px;
    text-decoration: none;
    position: fixed;
    width: 100%;
    height: 67px;
    z-index: 5;
}

/*setup for "banner" text link in header on content pages*/
  .courier {
    font-family: "Courier New", Courier, monospace;
    color: dimgray;
    font-weight: bold;
    text-align: center;
    width: 35%;
/*    margin-left: auto;
    margin-right: auto;*/
/*    position: center;*/
    position: absolute;
    top: 37%;
/*    left: 32%;
    right: 36%*/
  }

/*setup specifically to hold burger menu in header*/
  .burgerholder {
    margin-left: auto;
    margin-right: auto;
    width: 566px;
    position: center;

  }

.headerdesk {
    background-color: #FFFFFF;
    padding: 10px;
    text-decoration: none;
    position: fixed;
    width: 100%;
    height: 75px;
    z-index: 5;
    -webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}

/*MISC STYLE FROM 2100 SITE*/
#maincontainer {
    width: 500px;
    margin: 30px auto;
    padding-right: 20px;
    padding-left: 20px;
    font-family: Georgia, "Droid Serif", Cambria, "Times New Roman", Times, serif;
}

/*MISC STYLE FROM 2100 SITE*/
.deskcontent {
    background-color: white;
    position: relative;
    width: 500px;
    margin: 30px auto;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 1em;
    color: #515151;
    line-height: 1.5em;
    font-family: Georgia, "Droid Serif", Cambria, "Times New Roman", Times, serif;
    z-index: 6
}

/*MISC STYLE FROM 2100 SITE*/
#contentwrapper {
    float: left;
    width: 100%;
}

/*THESE NEXT SET OF CODES ARE FOR CUSTOM INDENTS? ON 2100*/
#twentyeight {
    width:28%;
    float:left;
    line-height: 1.6;
}

#fortyfour {
    width:44%;
    float:left;
    line-height: 1.6;
}

#eleven {
    width:11%;
    float:left;
    line-height: 1.6;
}

#twentyeightc {
    width:28%;
    float:center;
}

#twentyeightr {
    width:28%;
    float:right;
}

#two {
    width:4%;
    float:left;
}

#six {
    width:6%;
    float:left;
}

#eighty {
    width:80%;
}

#picnottoobig {
    width: 600px;
}

#below {
  clear: both;      
}

#lineplay {
    line-height: 3.5;
}

#lineplay2 {
    line-height: 0.1;
}

/* Site Wrapper - Everything that isn't navigation */
.site-wrap1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.site-wrap2 {
  position: relative;
  background-color: white;
  top: 0;
  left: 0;
  z-index: 0;
}

.site-wrap3 {
  min-height: 100%;
  min-width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  font-family: Georgia, "Droid Serif", Cambria, "Times New Roman", Times, serif;  color: #626258;
  padding: 2em;
}

.clicktolearn {
    background-color: white;
    position: relative;
    width: 450px;
    margin: auto;
    line-height: 1.1em;
}

.clicktolearn2 {
    background-color: white;
    position: relative;
    width: 550px;
    margin: auto;
    line-height: 1.1em;
}

/*STYLING FOR LINKS IN BODY classb AND HEADER classh*/
.classb A:link {text-decoration: underline; color: #626258;}
.classb A:visited {text-decoration: underline; color: #626258;}
.classb A:active {text-decoration: underline; color: #626258;}
.classb A:hover {text-decoration: underline; color: green;}

.classc A:link {text-decoration: none; color: #626258;}
.classc A:visited {text-decoration: none; color: #626258;}
.classc A:active {text-decoration: none; color: #626258;}
.classc A:hover {text-decoration: underline; color: green;}

.classh A:link {text-decoration: underline; font-weight:bold; color: #626258;}
.classh A:visited {text-decoration: underline; font-weight:bold; color: #626258;}
.classh A:active {text-decoration: underline; font-weight:bold; color: #626258;}
.classh A:hover {text-decoration: underline; color: green;}

.deskshow2 {
    display: none;
}


/*NEED TO BE SURE - I THINK I CAN DELETE THESE CODES - FOR 2100 NAVIGATION - RS OCT 2018*/
/* Navigation Menu - Background */ /*not sure i ever use this - RS, oct 2018*/
.navigation {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  list-style: none;
  background: #FFF;
}

/* Navigation Menu - List items */ /*not sure i ever use this - RS, oct 2018*/
.nav-item {
  width: 250px;
  border-top: 0.1em solid #404040;
  border-bottom: 0.1em solid #303030;
}

/*not sure i ever use this - RS, oct 2018*/
.nav-item a {
  display: block;
  padding: 1.0em;
  background: #404040;
  color: white;
  font-size: 1.0em;
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}

.nav-item a:hover {
  color: #003300;
  font-weight: bold;
  text-decoration: underline;
  background: #B0B0B0;
}


/*SETUP FOR 2100 - DON'T KNOW IF I STILL WANT OR NEED THIS - COULD CAUSE REDUNDANCY?*/
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .clicktolearn {
        display: inline;
        line-height: 1.1em;
    }
}

.addmargins {
    position: relative;
    width: 250px;
    margin: 0px auto;
}

.allShow {
    position: relative;
    min-width: 100%;
    background-color: white;
    top: 0;
    left: 0;
    z-index: 0;
}

.mobileShow {
    display: none;
}


/* Smartphone Portrait and Landscape */
/*FOR 2100 PROJECT - DON'T KNOW IF I WANT OR NEED THIS - COULD CAUSE REDUNDANCY?*/
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .mobileShow {
        display: inline;
        line-height: 1.6em;
    }
}

.mobileHide {
    display: inline;
}


/* Smartphone Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .mobileHide {
        display: none;
    }
}

.mobileHide2 {
    background-color: white;
    position: relative;
    width: 600px;
    margin: 5px auto;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 1em;
    color: #515151;
    line-height: 1.5em;
    font-family: Georgia, "Droid Serif", Cambria, "Times New Roman", Times, serif;
    z-index: 6
}

/* Smartphone Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .mobileHide2 {
        display: none;
    }
}

.mobileShow2 {
    background-color: white;
    position: relative;
    width: 600px;
    margin: 30px auto;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 1em;
    color: #515151;
    line-height: 1.5em;
    font-family: Georgia, "Droid Serif", Cambria, "Times New Roman", Times, serif;
    z-index: 6
}

/* Smartphone Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .mobileShow2 {
        display: inline;
        background-color: white;
        position: relative;
        padding-right: 20px;
        padding-left: 20px;
        font-size: 1em;
        color: #515151;
        line-height: 1.5em;
        font-family: Georgia, "Droid Serif", Cambria, "Times New Roman", Times, serif;
        z-index: 5
    }
}

.mobileShow2 li { 
    margin-left: 40px; 
}

/* Smartphone Portrait and Landscape */
@media only screen and (min-device-width: 1000px) and (max-device-width: 4000px) {
    .deskshow2 {
    background-color: white;
    position: relative;
    width: 500px;
    margin: 30px auto;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 1em;
    color: #515151;
    line-height: 4.5em;
    font-family: Georgia, "Droid Serif", Cambria, "Times New Roman", Times, serif;
    z-index: 6
    }
}


/*MORE LEFTOVER CODES FROM 2100? CAN DELETE? -RS OCT 2018*/
/* Nav Trigger */

.nav-trigger {
    /* critical styles - hide the checkbox input */
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 11px;
  z-index: 3;
  
  /* non-critical apperance styles */
  height: 35px;
  width: 35px;
  cursor: pointer;

/*WHAT THE HAMBURGER LOOKS LIKE*/
background-image: url("hamburgersq.jpg");

  background-size: contain;
}

/* Make the Magic Happen */
.nav-trigger + label, .site-wrap1 {
  transition: left 0.2s;
}
.nav-trigger + label, .site-wrap2 {
  transition: left 0.2s;
}
.nav-trigger + label, .site-wrap3 {
  transition: left 0.2s;
}
.nav-trigger + label, .allShow {
  transition: left 0.2s;
}

.nav-trigger:checked + label {
  left: 265px;
}

.nav-trigger:checked ~ .site-wrap1 {
  left: 250px;
  /*box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);*/
}
.nav-trigger:checked ~ .site-wrap2 {
  left: 250px;
  /*box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);*/
}
.nav-trigger:checked ~ .site-wrap3 {
  left: 250px;
  /*box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);*/
}
.nav-trigger:checked ~ .allShow {
  left: 250px;
  /*box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);*/
}

body {
    /* Without this, the body has excess horizontal scroll when the menu is open */
  overflow-x: hidden;
}

/* Additional non-critical styles */

h1, h3, p {
  max-width: 600px;
  margin: 0 auto 1em;
}

code {
    padding: 2px;
    background: #ddd;
}


/* Micro reset */
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}
html, body { height: 100%; width: 100%; font-family: Helvetica, Arial, sans-serif; }


/* THIS IS THE STYLE CODE FROM THE STYLE SHEET FOR THE DESKTOP SITE */


/* 11/25 - THIS SEEMS TO BE THE CODE THAT MESSES UP HAMBURGER MENUS SPACING
body {margin:0;padding:0;line-height: 1.5em;background: #fff; font: 76%/160%; font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; color: #515151;}
*/

/* 11/25 ORIGINAL WHEN THERE WERE SEPARATE DESKTOP PAGES
ul#navtop {background-color: #ffffff;margin: 0; padding: 10px 0 0px 30px;white-space: nowrap;border-bottom: 2px solid #d3d3d3;} */

ul#navtop {background-color: #ffffff;margin: 0; padding: 0px 0 0px 20px;white-space: nowrap;}



/*Navigation Styles*/

#navtop li {display: inline;list-style-type: none;}

/*THIS IS WITH 30 PX FOR SPACING */
/*#navtop li {display: inline;list-style-type: none; height: 30px; line-height: 30px;}*/


/*trying to get logo to sit lower by playing with navtop a padding*/

#navtop a {padding: 3px 8px;}

/*#navtop a {padding: 0px 0px;}*/

#navtop a:link, #navtop a:visited {color: #808080;text-decoration: none;border: 0px solid #f5f5dc;outline:none;}

#navtop img {
    vertical-align: middle;
}

#navtop a:hover{color: green; font-weight: bold; text-decoration: underline;}
/*#navtop a:hover{color: #ed5f00;text-decoration: none;}*/

.navbottom {margin-left: 0;padding-left: 0;}




/*ALL OF THIS IS CODING FOR NEW EE HAMBURGER MENU, -RS OCT 2018*/
/* HAMBURBER MENU CODING from: https://medium.com/@heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793*/

    /*for some reason prevents words "open main menu" from appearing*/
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      top: 0px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      border: 0;
    }

    /* Button styling */ /*TURNED THIS CODE OFF. Got rid of WEIRD BLUE OUTLINE? Now on and ok?*/
    .menu-toggle {
      padding: .75em 15px;
      line-height: 0em;
      font-size: 1em;
      color: #c00;
    }

    /*doesn't seem to do anything on desktop; will leave on for now*/
    .menu-toggle:hover,
    .menu-toggle:focus {
      color: #c00;
    }

    /* Default styles + Mobile first, Offscreen menu style */
    .main-menu {
      position: absolute;
    /*  this controls tucking in of margin to left*/
      left:-340px;
    /* entire menu down*/
    /* margin-top: 500px;*/
      height: 100%;
    /*  the next line causes a vertical scroll bar to be present*/
    /*  overflow-y: scroll;*/
    /*not sure what this does*/
    /*  overflow-x: visible;*/
      transition: left 0.3s ease,
                  box-shadow 0.3s ease;
      z-index: 999;
    }

    .main-menu ul {
/*      CAN PROBABLY DELETE THIS NEXT SECTION, KEEPING FOR NOW, 0CT 2018*/
    /*  position: absolute;*/
    /*this next line will bring some of the menu out far*/
    /*  left:500px;*/
    /*  left:auto;
      right:auto;*/
    /*  margin-left: auto;*/
    /*  width: 600%;*/

    /*    margin-left: auto;
        margin-right: auto;*/
    /*  doesn't do jack*/
    /*  margin-top: 500px;*/

      list-style: none;
      margin: 0;
/*      ADJUSTING THIS!!!!!! CAN CREATE ANOTHER ANOYING BOX*/
/*      padding: 1em 0 0;*/
      /* Hide shadow w/ -8px while 'closed' */
    /*  add annoying shadow to first submenu item*/
    /*  -webkit-box-shadow: -8px 0 8px rgba(0,0,0,.5);
         -moz-box-shadow: -8px 0 8px rgba(0,0,0,.5);
              box-shadow: -8px 0 8px rgba(0,0,0,.5);*/
      min-height: 100%;
    /*  this controls width of menu*/
      width: 340px;
      background: #1a1a1a;
    /*  background: rgba(0,0,0,.5);*/
    }

    .main-menu a {
      display: block;
    /*  controls margin for text in menu*/
      margin-left: 100px;
      padding: .75em 15px;
      line-height: 1em;
    /*  CHANGES FONT SIZE OF MENU RELATIVE TO SIZE SPECIFIED IN BEGINNING*/
    /*  font-size: 0.4em;*/
      color: #fff;
      text-decoration: none;
    /*  TURNS OFF MOST LINES IN MENU*/
    /*  border-bottom: 1px solid #383838;*/
      border-top: 1px solid #383838;
    }

    /*NOT SURE IF TURNING OFF AND ON DOES ANYTHING OTHER THAN GETTING RID OF LINES*/
    /*.main-menu li:first-child a {
      TURNS OFF OTHER LINES IN MENU
      border-top: 1px solid #383838;
      good one to know - pushes menu items down
      margin-top: 500px;
    }*/

    .main-menu a:hover,
    .main-menu a:focus {
      background: #333;
      text-decoration: underline;
    }

    .main-menu .menu-close {
      position: absolute;
      right: 0;
    }

    .logo {
      margin: 0 30px 0 10px;
      font-size: 1.5em;
    }

    /*
     On small devices, allow it to toggle...
    */
    /*
     :target for non-JavaScript
     aria-expanded="true/false" will be for JavaScript
    */
    .main-menu:target,
    .main-menu[aria-expanded="true"] {
    /*    margin: auto;*/
    /*width of container that comes out*/
        width: 338px;
     /* this seems to control how far menu comes out*/
    /*  left: 0;*/

    /*this next line works to bring out near center, but, too far*/
        left: 0%;
      outline: none;
      -moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
      -webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
      box-shadow: 3px 0 12px rgba(0,0,0,.25);
    }

    .main-menu:target .menu-close,
    .main-menu[aria-expanded="true"] .menu-close {
      z-index: 1001;
    }

    .main-menu:target ul,
    .main-menu[aria-expanded="true"] ul {
      position: relative;
      z-index: 1000;
    /*  this next line controls menu when expanded*/
      margin-top: 0px;
    }

    /* We could us `.main-menu:target:after`, but it wouldn't be clickable. */
    .main-menu:target + .backdrop,
    .main-menu[aria-expanded="true"] + .backdrop {
      position: absolute;
      display: block;  
      content: "";
      left: 0;
    /*  this next line controls position of container when expanded*/
      margin-top: 0px;
      width: 100%;
      height: 100%;
      z-index: 998;
      background: #000;
      background: rgba(0,0,0,.2);
      cursor: default;
    }

    @supports (position: fixed) {
      .main-menu,
      .main-menu:target + .backdrop,
      .main-menu[aria-expanded="true"] + .backdrop {
        position: fixed;
    /*    controls position of menu and box when expanded*/
        top: 0px;
      }
    }

/*THE FOLLOWING CODE ADDS THE SUBMENUS TO THE HAMBURGER MENU*/
/*trying for submenus. from - http://css-snippets.com/drop-down-navigation/#code*/
/* Sub Menus */
    .nav li {
      width: 150px;
      border-bottom: none;
    /*  height: 50px;
      line-height: 50px;*/
      font-size: .8em;
    }

    .nav li {
    /*  display: inline-block;*/
      margin-right: -4px;
    }

    .nav li ul {
      position: absolute;
      display: none;
      width: inherit;
    /*  can be used to move submenus left*/
    /*  margin-left: 100px;*/
    }

    .nav li:hover ul,
    .nav li ul li {
    /*  display: block;*/
    }

    .nav > ul > li {
      text-align: center;
    }

    .nav > ul > li > a {
      padding-left: 0px;
    }

    .nav a {
      border-bottom: none;
    }

    @media screen and (min-width: 200px) {
      .nav li {
        width: 240px;
        border-bottom: none;
        height: inherit;
        line-height: inherit;
        font-size: 1em;
        display: inline-block;
        margin-right: -4px;
    /*    not good - does it for parent and submenu
        margin-left: 100px;*/
      }

      .nav a {
        border-bottom: none;
      }

      .nav > ul > li {
        text-align: center;
      }

      .nav > ul > li > a {
        padding-left: 0;
      }

      /* Sub Menus */
      .nav li ul {
        position: absolute;
        display: none;
        height: inherit;
        line-height: 50px;
        font-size: .9em;
    /*  pretty good control of alignment of submenu*/
        width: 300px;
        margin-left: 30px;
      }

      .nav li:hover ul {
        display: block;
      }

      .nav li ul li {
        width: 310px;
        display: block;
    /*    THIS WORKS! to add background to submenu*/
        background: #1a1a1a;
      }

      .indent {
        margin-left: 114px;
        line-height: 50px;
        font-size: 1.05em;
    /*    width: 500px;*/
      }

    }