.* .*::after .*::before {

    padding: 0;
    margin: 0;
}


html{
  width: 100%;
  height: 100%;
  min-height: 100%;
}

body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    font-family: sans-serif;
    --navbg: rgb(200,200,205,1);
    --navbgdark: rgb(175,175,190,1);
    --navbglight: rgb(175,175,190,0.25);
    --navhover: rgb(225,225,255,0.5);
    --linkcolor: rgb(7,15,1);
    --textcolor: rgb(0,0,5,1);
    --extracolor: rgb(200,50,50,1); 
    --highlightedcolor: rgb(200,50,50,1); 
    --slideshowcolor: #660000; 
    --hovercolor: #cc0000; 
    color: var(--textcolor);
}

#wrapper {
    width: 96%;
    max-width: 96%;
    min-width: 96%;
    height: auto;
    min-height: 100%;
    margin: 1rem auto;
    position: relative;
    background-color: white; 
}

#footer{
  clear: both;
}

.navColumn{
    float: left;
    background-color: var(--navbg);
    margin: 0 1rem 0 0;
    padding: .5rem;
    width: 13rem;
    min-height: 6rem;
    border-bottom-right-radius: 1rem;
}
.navColumn a {
 display: block;
 font-size: 85%;
}

.toc {
    background-color: var(--navbg);
    margin: 0 1rem 0 0;
    padding: 0 .5rem .25rem;
    /* border-bottom-right-radius: 1rem; */
    border-color: 1px solid magenta;
}

.toc a {
    display: block;
}



#bannerlinks 
{
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: center;
  margin-left: 5%;
  padding: 0;
  font-family: Arial;
}

.bannerlink
{
  max-width: 6rem;
  height: 1rem;
  margin: 0.5rem .5rem 0 0;
  padding: 0.25rem; 
  text-align: center;
  font-size: 1rem;
}
.bannerlink a { color: black; font-size: 90%;   }

#tocPopper{ 
float: left; 
margin: .25rem 80% .25rem .25rem; 
}

#tocPopper:after{
content: " ";
display: table;
clear: both;
}

#tocComesAndGoes{ clear: bothl; }

.headerbanner {
    background: var(--navbg);
    background-image: url('/systemimages/smrb-logo.png');
    background-repeat: no-repeat;
    background-position: center right;
    width: auto;
    padding: 0;
    height: 6rem;
    min-height: 6rem;
    max-height: 6rem;
    border-bottom-right-radius: 1rem;
    padding-left: 15px;
}

.clearboth{
  clear: both;
}

p.notes {
    clear: both;
    width: 90%;
    margin: 1rem;
    padding: 1rem; 
    font-weight: bold;
    border: 2px solid magenta;
}

      /* general classes */
.centertext {
    margin: 0 auto;
    text-align: center;
}
 

.max50 {
    max-width: 50%
}
      /* end general classes */

/* misc */
quote {
    display: block;
    max-width: 50%;
    margin: 1rem 1rem 1rem 6rem;
    font-weight: bold;
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.pageNumber {
    font-weight: bold;
}

a {
    display: inline;
    text-decoration: none;
    font-style: italic;
    font-weight: bold;
    color: var(--linkcolor);
}

a:hover {
    text-decoration: underline:
    background: var(--navhover);
    color: var(--hovercolor);
}

a.slideshow {
    color: var(--slideshowcolor);
    font-style: italic;
}

.highlighted {
    color: var(--highlightedcolor);
    font-style: italic;
    margin-left: .5rem;
}

a.extra {
    color: var(--extracolor);
    font-style: italic;
    margin-left: .5rem;
}

i.material-icons {
    font-size: 80%;
    color: #eeeeaa;
    text-shadow: 1px 1px black;
}

sup {
    color: var(--highlightedcolor);
}

/*
.roboBookThisChapter {
    margin: 0;
    padding: 0;
    color: magenta;
}
*/

img {
    object-fit: contain;
    border-radius: .5rem;
}

.buttonbox {

    clear: both;
    float: left;

    /*width: 6rem;*/
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: row;
    justify-content: space-between;
}

.user_manage {
    margin: 1rem;
    font-weight: bold;
}

a.button, a.nextPageButton, a.prevPageButton,a.lastReadPageButton {
    display: inline;
    background: rgb(200,200, 255,0.5);
    padding: .25rem;
    margin: 0;
    border: 1px solid blue;
}
/* end misc */

/* classes */
.bannerlinks {
    display: flex;
    width: auto;
    flex-wrap: wrap;
    align-content: space-between;
    margin: 0;
    padding: 0;
    font-family: Arial;
    font-size: 120%;
    border-bottom: 1px solid var(--navbg);
}

.bannerlink {
    max-height: 1.5rem;
    max-width: 12rem;
    margin:  1rem 1rem  0 0;
    padding: 0;
    text-align: center;
    text-shadow: 1px 1px white;
}

.mkBreadcrumbs {
    float: left;
    margin: 0;
    padding: 1rem 0 0 0;
}

.mkBreadcrumbs a {
    display: inline;
    color: #660000;
    font-size: 140%;
    text-shadow: 1px 1px #aaaa22;
}

.mkBreadcrumbs a:hover {
   text-decoration: underline;
}



/* end main blocks */


.displaycard {
    float: left;
    width: auto;
    max-width: 70%;
    background: var(--navbg);
    height: auto;
    margin: 1rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0.5rem;
    border-radius: .5rem;
    justify-content: center;
    align-itrems: center;
}

.displaycard img {
    margin: 0 auto;
    max-width: 100%;
    background: var(--navbg);
    border-radius: .5rem .5rem 0 0;
}

.displaycard img:after {
  content: "";
  display: table;
  clear: both;
}

.navcard {
    float: left;
    background: var(--navbg);
    width: 10rem;
    max-width: 10rem;
    height: 8rem;
    max-height: 8rem;
    margin: .5rem; 
    display: flex;
    flex-direction: column;
    text-align: center;

  justify-content: center;
  align-itrems: center;

    padding: 0;
    border-radius: .5rem;
}

.navcard img {
    display: block;
    width: 100%;
    max-width: 100%;
 /* height: auto; */
    max-height: 100%;
    margin: 0;
    padding: 0;
    background: var(--navbg);
    border-radius: .5rem .5rem 0 0;
    object-position: center;
    object-fit: scale-down;
    overflow: hidden;
    position: relative;
}

.cardtitle {
    border-radius: 0.25rem 0.25rem 0 0;
    width: auto;
    height: auto;
    min-height: 2rem;
    font-weight: bold;
}

.cardbody {
    border-radius: 0.25rem 0.25rem 0 0;
    width: 100%;
    max-width: 100%;
    /* `height: auto; */
    max-height: 80%;
    margin: 0 auto;
    flex: 2;
    justify-content: center;
    align-itrems: center;
}

.cardcaption {
    border-radius: 0 0 0.5rem 0.5rem;
    width: 100%;
    max-width: 100%;
    padding: .5rem 0 .25rem 0;
    margin: .25rem 0 0 0;
    font-weight: bold;
    text-align: center; 
    background: var(--navbgdark);
    line-height: 1rem;
}
a.cardlink {
    color: rgb(200,200,255,1,0);
/* max-width: 80%; */
    text-decoration: none;
}

a.cardlink:hover {
    text-decoration: underline;
}
/* end classes */

/* <blog> */
.blog {
    background: white;
/*
    width: auto;
    max-width: 25%;
    min-height: 20rem;
    max-height: 50rem;
*/
    padding: .25rem;
    margin: 0;
    border: 2px solid var(--navbg);
    border-radius: 0.5rem;
    overflow-y: scroll;
    overflow-x: hidden; 
    color: black;
}

.blog img {
    max-width: 100%;
    object-fit: scale-down;
 /* object-position: center; */
}

.blogEntry {
    border: 0;
    color: black;
}

.skinnyminny{
  width: 80vw;
}

/* <media> */

/* when the device is a typical phone */
@media only screen and (max-device-width: 480px) {
    .mkBreadcrumbs{ font-size: 95%;}
    .main-content { clear: both; }
    .headerbanner {
        color: black;
        background: var(--navbg);
        background-image: url(/systremimages/onepix.gif);
        margin-top: 2rem;
        width: 100%;
        height: 50%; 
        min-height: 50%; 
        max-height: 50%; 
        font-size: small;
    }
    .bannerlinks{
       clear: both;
       font-size: small; 
       height: auto; 
       background: var(--navbg);
     }

    .bannerlink{height: 1.25rem; line-height: 1rem; padding: 0; margin: .25rem;}

    .blog {
        display: block;
        clear: both;
        height: auto;
        margin: 0;
    }

    .navColumn {
        margin: 0;
        padding: 1rem 0 .5rem 1rem;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: auto;
    }

    .displaycard {
        float: left;
        width: 100%; 
        min-width: 100%;
        max-width: 100%;
    }


    .navcard {
        margin: 1rem 1px;
        width: 8rem;
        max-width: 8rem;
        height: 6rem;
        max-height: 6rem;
        padding: 0;
    }
}
/* </media> */