:root {
    --mybrown: #ab4a3d;
    --mylightgreen: #d5edb3;
    --mymidgreen: #99cc66;
    --mydarkgreen: #5c743d;
    --mygrey: #dddddd;
}

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 10;
    padding: 0;
}

.cell {
    padding: 10px;
}

div.cell {
    /* to show the outline of various boxes  -comment out for final version */
    border: none;

    /* 1px solid black; */
}

/* changed to template-grid-line  NB NB NB all -webkit lines inserted by Bluegriffon removed here
#grid-layout {
  display: grid;
  grid-template-areas: "head-image head-text head-text head-text"
    "stripgrid stripgrid stripgrid stripgrid"
    "menu main main main" "footer footer footer footer";
  grid-template-columns: 208px 208px 208px 208px;
} */
#grid-line {
    display: grid; grid-template-columns: 1fr 1fr 1fr 1fr ;
    grid-template-rows: auto auto auto;

    /* these are the rows head-text, stripouterclass, stripclass, stripouterclass, menu+ main, foot
   grid-template-columns: 208px 208px 208px 208px; */
    /* this is for fixed widths but 1fr gives responsive grid
   grid-template-columns: 1fr 1fr 1fr 1fr ;
   grid-template-columns: repeat(4,auto;);
  grid-template-columns: 1fr inmax(1fr, 208px) 1fr 1fr;
  grid-template-rows: auto 1px 20px 1px auto auto; /* 1px 20px 1px   is for the dotted white line stripouterclass/stripslass/stripouterclass */
}

/* .head-image {
  grid-area: head-image / head-image / head-image / head-image;
  background: var(--mymidgreen) none repeat scroll 0% 0%;
} */
.head-image {
    grid-column-start: 1;
    grid-column-end: 2;
    background: var(--mylightgreen) none repeat scroll 0% 0%;
}

/* .head-text {
  grid-area: head-text / head-text / head-text / head-text;
  background: var(--mymidgreen) none repeat scroll 0% 0%;
} */
.head-text {
    grid-column-start: 2;
    grid-column-end: 5;
    background: var(--mylightgreen) none repeat scroll 0% 0%;
    text-align: center;
}

.head-text-name {
    font-size: 36px;
    color: var(--mydarkgreen);
}

.head-text-qualif {
    font-size: 14px;
}

.head-text-welcome {
    color: var(--mybrown);
}

.stripclass {
    grid-column: 1 /5;
    padding: 0;

    /* color: white;
  border-width: 1px 1px 5px 1px;
  border-style: dashed none dashed none;
  border-color: white; */
    /* filter: blur(1px); */
    outline: 1px dashed var(--mygrey);
    outline-offset: -1px;
    display: block;
    background: var(--mymidgreen);
}

/* needs some char or &nbsp in .html to display
  or maybe padding will be enough ??? */
.stripouterclass {
    grid-column: 1 /5;
    padding: 0.5px;
    display: block;
    background: var(--mydarkgreen);
}

/* .menu {
  grid-area: menu / menu / menu / menu;
  background: var(--mydarkgreen) none repeat scroll 0% 0%;
  padding: 0;
} */
.menu {
    grid-column: 1 / 2;
    background: var(--mydarkgreen) none repeat scroll 0% 0%;
    padding: 0;
}

/* .main {
  grid-area: main / main / main / main;
  background: white none repeat scroll 0% 0%;
} */
.main {
    grid-column: 2 / 5;
    background: white none repeat scroll 0% 0%;
}

/* .foot {
  grid-area: footer / footer / footer / footer;
  background: lightblue none repeat scroll 0% 0%;
} */
.foot {
    /* grid-column: 1 / 5; */
    grid-column: col-start -1 / span 5;
    background: var(--mygrey) none repeat scroll 0% 0%;
    text-align: center;
}

@media screen and (max-width: 1000px) {
    #grid-row {
        grid-template-columns: auto auto;
    }
}

@media screen and (max-width: 600px) {
    #grid-row {
        grid-template-columns: 100%;
    }
}

.hide {
    display: none;

    /* cpmment out to show the cell names */
    font-size: 10px;
}

/* to hide text "none" to show  "inline" */
.mainNav {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: var(--mybrown);
}

.mainNav a {
    color: var(--mylightgreen);
    font-size: 18px;
    text-decoration: none;
    border-width: 1px 1px medium;
    border-top-style: dashed;

    /* border-style: solid none none none; */
    border-color: var(--mygrey) var(--mygrey) currentColor;
    padding: 8px 6px 10px 20px;
    margin: 0;

    /* padding: 50px; */
    display: block;
    background-color: var(--mydarkgreen);
}

/* a:visited {color: var(--mydarkgreen);} */
a:hover {
    color: var(--mydarkgreen);
}

.homeLink a:hover {
    font-weight: bold;
    background-color: var(--mymidgreen);
}

.mainNav a:hover {
    background-color: var(--mymidgreen);
    font-weight: normal;
}

/* we also need to remove the solid line at top of the first menu entry */
.mainNav li:first-of-type a {
    border-top: none;
}

/* make a solid line at the bottom of last menu entry */
.mainNav li:last-of-type a {
    border-bottom: 1px solid var(--mygrey);
    border-bottom-style: dashed;
    border-bottom-width: 1px;
}

/* .navText {
  color: var(--mylightgreen);
  font-weight: bold;
} */
.navText:hover {
    color: var(--mybrown);
    background-color: var(--mymidgreen);
    font-weight: normal;
}

.pageName {
    font: 18px;
    color: var(--mydarkgreen);
    line-height: 26px;
    letter-spacing: 0.21em;
}
@media  print { 
        .printme { visibility: visible;}    
        .printmenot { visibility: hidden;}   
        .printmelayoutnot { display: none;} 
        /* body { visibility: hidden;}        */
      }
a.local-link { 
  background-color: var(--mymidgreen);
  color: var(--mybrown);
  }