html {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* *,*::before,*::after {
  box-sizing: inherit;
}
*/

/*
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
*/

.Grid {
  padding: 0;
  margin: 0;
/*  list-style: none; */
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.rTable          { display: table; }
.rTableRow       { display: table-row; }
.rTableHeading   { display: table-header-group; }
.rTableBody      { display: table-row-group; }
.rTableFoot      { display: table-footer-group; }
.rTableHead      { display: table-cell; }
.rTableCell      { display: table-cell; }

.Logo	{
 grid-area: logo;
}

.TopText	{
 grid-area: toptext;
}

.Menu	{
 grid-area: chooser;
}

.Ad {
 grid-area: ad;
}

.Content {
 grid-area: content;
/* text-align:top; */
/* position:relative; */
}

.Footer	{
 grid-area: footer;
/* position: fixed;
 left:0;
 bottom:0;
 width:100vw;
/*  bottom: 1px;
  Left: 1px; */
 background-color: #c0c0c0;
}

.Calendar {
  display:flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  vertical-align:text-top;
  gap:2px 2px;
}

.Gallery	{
  display:flex;
  vertical-align:top;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap:3px;
}

.Gallery1	{
 display:grid;
 justify-items: start;
 justify-content: left;
}

.Gallery1::after	{
  content: '';
  flex-basis:30%;
}

.Gallery2	{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
	gap: 5px;
}

.Gallery3	{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  vertical-align:top;
	text-align:center;
}

.Gallery4 {
  display:flex;
  gap:10px;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  vertical-align:top;
}

body { overscroll-behavior: contain; } /* Generic.css has other body stuff. */
/* body { margin-left:2px; background-color: #c0c0c0; color: black; } */

/* General size and colors for these. Individual media queries can change what is necessary */
input[type='submit'] { margin-bottom:3px; }
input[type='button'] { margin-bottom:3px; }

@media only screen and (max-width:320px) { /* TinyPhone */
#Grid {
  display:grid;
  height:100vh;
  }
}

@media only screen and (max-width:600px) { /* SmallPhone */
#Grid {
    display: grid;
    height:100vh;
    row-gap: 5px;
    grid-template-columns: 22% 1fr;
    grid-template-rows: calc(100vh * 0.04) calc(100vh * 0.02) calc(100vh * 0.06) auto 5% 5%;
    grid-template-areas:
      "logo toptext"
      "logo toptext"
      "logo content"
      "chooser content"
      "ad ad"
      "footer footer";
      /* 320 * 22% = 70px for col1 */
  }
  .Blobs { width:130px; height:170px; font-size:smaller; }
  .Events { width:115px; height:80px; font-size:x-small; }
  .Days { width:115px; height:1em; font-size:x-small; margin-bottom:5px; }
  .TopText { font-size:larger; font-weight:bold; color:black; }
  .Message { text-align:center; font-size:xx-small; }
  .Menu { display:flex; flex-flow:column wrap; place-items:flex-start; text-align:center; overflow:hidden;
    input[type='submit'] { width:95%; height:25px; font-size:x-small; padding:2px; }
    input[type='button'] { width:95%; height:25px; font-size:x-small; padding:2px; }
  }
  .Ad { display:flex; flex-flow:row wrap; text-align:center; }
  .Content { font-size:initial; vertical-align:top; margin-top:50px;
    input[type='submit'] { width:min-content; height:25px; font-size:xx-small; padding:2px; }
    input[type='button'] { width:min-content; height:25px; font-size:xx-small; padding:2px; }
  }
  .Footer { font-size: x-small; }
  .Caption { font-size:x-small; }
}

@media only screen and (min-width: 600px) and (orientation:Portrait)  { /* SmallTab in Portrait ONN is one. */
#Grid {
    display: grid;
    height:100vh;
    grid-gap: 2px;
    grid-template-columns: 15% 85%;
    grid-template-rows: calc( 100vh * 0.02) calc(100vh * 0.01) calc(100vh * 0.05) 1fr 1fr 8%;
    grid-template-areas:
      "logo toptext"
      "logo toptext"
      "logo chooser"
      "content content"
      "ad ad"
      "footer footer";
  }
  .Blobs { width:130px; height:150px; font-size:smaller; }
  .Events { width:82px; height:100px; font-size:x-small;}
  .Days { width:82px; height:1em; margin-bottom:5px; font-size:x-small; }
  .TopText { display: flex; text-align:center; font-size:larger; font-weight:bold; color: Black; }
  .Message { font-size:x-small; font-weight:normal; color:black; }
  .Menu { display:flex; flex-flow: row wrap; place-content:center;
  input[type='submit'] { height:25px; font-size:x-small; padding:3px; }
  input[type='button'] { height:25px; font-size:x-small; padding:3px; }
  }
  .Ad { display:flex; flex-flow:column wrap; text-align:center; vertical-align: middle; }
  .Footer { font-size:x-small; }
  .Content { font-size: smaller; margin-top:5px; vertical-align:top;
  input[type='submit'] { height:20px; font-size:xx-small; padding:3px; }
  input[type='button'] { height:20px; font-size:xx-small; padding:3px; }
  }
  .Caption { font-size: x-small; }
}

@media only screen and (min-width: 600px) and (orientation:Landscape)  { /* SmallTab in LandScape - have no others with this. */
#Grid {
    display: grid;
    height:100vh;
    grid-gap: 2px;
    grid-template-columns: 15% 85%;
    grid-template-rows: calc( 100vh * 0.04) calc(100vh * 0.04) calc(100vh * 0.15) 1fr 1fr 8%;
    grid-template-areas:
      "logo toptext"
      "logo toptext"
      "logo chooser"
      "content content"
      "ad ad"
      "footer footer";
  }
  .Blobs { width:120px; height:180px; font-size:smaller; } /* 760x320 phone */
  .Events { width:100px; height:90px; font-size:x-small;}
  .Days { width:100px; height:1em; margin-bottom:5px; }
  .TopText { display: flex; text-align:center; font-size:larger; font-weight:bold; color: Black; }
  .Message { font-size:x-small; font-weight:normal; color:black; }
  .Menu { display:flex; flex-flow: row wrap; place-content:center;
  input[type='submit'] { height:25px; font-size:x-small; padding:3px; }
  input[type='button'] { height:25px; font-size:x-small; padding:3px; }
  }
  .Ad { display:flex; flex-flow:row wrap; text-align:center; vertical-align: middle; }
  .Content { display:flex; flex-flow:column wrap; margin-top:20px; font-size:initial;
  input[type='submit'] { height:25px; font-size:x-small; padding:3px; }
  input[type='button'] { height:25px; font-size:x-small; padding:3px; }
  }
  .Caption { font-size: x-small; }
  .Footer { font-size:x-small; }
}

@media only screen and ( min-width: 768px ) and ( orientation: Portrait ) { /* MediumTabPort */
#Grid {
    display: grid;
    height:100vh;
    grid-gap: 2px;
    grid-template-columns: 15% 85%;
    grid-template-rows: calc(100vh * 0.03) calc(100vh * 0.01) calc(100vh * 0.06) auto 10% 8%;
    grid-template-areas:
      "logo toptext"
      "logo toptext"
      "logo chooser"
      "content content"
      "ad ad"
      "footer footer";
  }
  .Blobs { width:150px; height:190px; };
  .Events { width:85px; height:90px; }
  .Days { width:85px; height:1em; margin-bottom:5px; }
  .TopText { display: flex; text-align:center; font-size:larger; font-weight: bold; color: Black; }
  .Message { font-size:smaller; font-weight:normal; color:black; }
  .Menu { display:flex; flex-flow:row wrap; place-content:baseline center; font-size:xx-small; text-align:center;
    input[type='submit'] { width:min-content; font-size:13px; height:35px; padding:2px; }
    input[type='button'] { width:min-content; font-size:13px; height:35px; padding:2px;}
  }
  .Ad { width:98%; text-align:center; vertical-align:top; }
  .Footer { font-size:smaller; }
  .Content { margin-left:3px; font-size: initial; vertical-align:top;
    input[type='submit'] { width:min-content; height:35px; font-size:smaller; padding:2px 2px; }
    input[type='button'] { width:min-content; height:35px; font-size:smaller; padding:2px 2px; }
  }
  .Caption { font-size: smaller; }
}

@media only screen and ( min-width: 768px ) and ( orientation: Landscape ) { /* MediumTabLand  */
#Grid {
    display: grid;
    height:100vh;
    grid-gap: 2px;
    grid-template-columns: 15% 85%;
    grid-template-rows: calc( 100vh * 0.04) calc(100vh * 0.02) calc(100vh * 0.25) 1fr 1fr 8%;
    grid-template-areas:
      "logo toptext"
      "logo toptext"
      "logo chooser"
      "content content"
      "ad ad"
      "footer footer";
  }
  .Blobs { width:150px; height:190px; font-size:smaller; }
  .Events { width:100px; height:85px; } /* 832x384 phone */
  .Days { width:100px; height:1em; margin-bottom:5px; }
  .TopText { display: flex; text-align:center; font-size:larger; font-weight: bold; color: Black; }
  .Message { font-size:smaller; font-weight:normal; color:black; }
  .Menu { display:flex; flex-flow:row wrap; place-content:center; margin-top:15px; font-size:xx-small; text-align:center;
    input[type='submit'] { width:min-content; height:30px; }
    input[type='button'] { width:min-content; height:30px; }
  }
  .Ad { display:flex; flex-flow:column wrap; text-align:center; vertical-align: middle; }
  .Content { font-size:initial; margin-top:10px;
    input[type='submit'] { width:min-content; height:30px; }
    input[type='button'] { width:min-content; height:30px; }
  }
  .Footer { font-size:x-small; }
  .Caption { font-size: x-small; }
}


@media only screen and ( min-width: 992px )  { /* TabDesk Set for Landscape */
#Grid {
    display: grid;
    height:100vh;
    grid-gap: 2px;
    grid-template-columns: 15% 85%;
    grid-template-rows: calc(100vh * 0.03) calc(100vh * 0.02) calc(100vh * 0.085) auto 8%;
    grid-template-areas:
      "logo toptext"
      "logo toptext"
      "logo chooser"
      "ad content"
      "footer footer";
  }
  .Blobs { width:165px; height:247px; }
  .Events { width:100px; height:90px; font-size:smaller; }
  .Days { width:115px; height:1em; margin-bottom:5px; }
  .TopText { display:flex; text-align:center; font-size:larger; font-weight: bold; color:Black; }
  .Message { font-size:smaller; font-weight:normal; color:black; }
  .Menu { display:flex; flex-flow:row wrap; place-content:center;
  input[type='submit'] { width:min-content; height:40px; font-size:initial; padding:3px; };
  input[type='button'] { width:min-content; height:40px; font-size:initial; padding:3px; };
  }
  .Ad { display:flex; flex-flow:column wrap; text-align:center; vertical-align: middle; margin-top:40px;}
  .Footer { font-size:smaller; }
  .Content { margin-top:10px;
  input[type='submit'] { width:min-content; height:35px; font-size:smaller; padding:3px; };
  input[type='button'] { width:min-content; height:35px; font-size:smaller; padding:3px; };
  }
  .Caption { font-size: smaller; }
}

@media only screen and ( min-width: 1200px ) { /* LargeTabDesk */
#Grid {
    display: grid;
    height:100vh;
    gap: 2px 2px;
    grid-template-columns: 10% 90%;
    grid-template-rows: 3% 1% 10% 1fr 8%;
    grid-template-areas:
      "logo toptext"
      "logo toptext"
      "logo chooser"
      "ad content"
      "footer footer";
  }
  .Blobs { width:195px; height:250px; }
  .Events { width:200px; height:110px; row-gap:2px; column-gap:2px; }
  .Days { width:200px; height:1em; margin-bottom:5px; }
  .TopText { display:flex; text-align:center; font-size:x-large; font-weight: bold; color: Black; }
  .Message { font-size:large; font-weight:normal; color:black; }
  .Menu { display:flex; flex-flow:row wrap; place-content:center;
  input[type='submit'] { width:min-content; height:40px; font-size:initial; }
  input[type='button'] { width:min-content; height:40px; font-size:initial; }
  }
  .Ad { display:flex; flex-flow:column wrap; text-align:center; vertical-align: middle; }
  .Footer { font-size:smaller; }
  .Content { margin-top:10px; font-size:large;
  input[type='submit'] { width:min-content; height:35px; font-size:smaller; }
  input[type='button'] { width:min-content; height:35px; font-size:smaller; }
  }
  .Caption { margin-top:1px; font-size: smaller; }
}