@charset "utf-8";

h4 {color:green; text-align:center;font-size:20px;padding:0px;}

img {border: 2px solid; display: block; margin: 0 auto;}
figcaption {text-align:center; padding:10px;}

table {float:left;border-collapse:collapse;padding:10px;margin:auto 10px;text-align:center;font-family: Arial, Helvetica, sans-serif; font-weight: normal;}
td {border:1px solid;padding:5px;}
th {border:1px solid;padding:5px;font-size:20px;color:green;}

footer {clear:both;}

div {padding:0px 50px;border:0px solid;}

/*possibly no longer used*/
.piccaption {float:left;margin:20px;}

/* settings for pics and captions 
p.bodystyle {margin-right: 20px;  margin-top:30px; margin-bottom: 20px; max-width:700px; }
*/

img.bodystyle {
  width: 100%;
  max-width: 600px;
  height: auto;
    Float:left;
margin-bottom: 10px;   
}

/* id settings for datatables */
 #left{width:45%;float:left;}

 #right{width:45%;float:right;}

/* settings for grid based datatables */

.container {
   display: grid;
   grid-template-columns: 1fr 3fr 1fr 3fr;
   grid-gap: 2px;
   background-color: green;
   color: green;
   padding: 3px;
   grid-template-areas: "t1 t1 t2 t2"
                        "e1 e2 b1 b2"
                        "e3 e4 b3 b4"
                        "e5 e6 b5 b6"
                        "e7 e8 b7 b8"
                        "e9 e10 b9 b10"
                        "e11 e12 b11 b12"
                        "e13 e14 b13 b14"
                        "e15 e16 b15 b16"
                        "e17 e18 b17 b18"
                        "e19 e20 b19 b20"
                        "e21 e22 b21 b22"
                        "e23 e24 b23 b24"
                        "e25 e26 b25 b26"
                        "e27 e28 b27 b28"
                        "e29 e30 b29 b30"
                        "e31 e32 b31 b32"
                        "e33 e34 b33 b34"
                        "e35 e36 b35 b36"
                        "e37 e38 b37 b38";
}
      
.container div {
  background-color: white;
  color:black;
  text-align: center;
  padding: 5px;
  font-size:15px; 
  font-family: Arial, Helvetica, sans-serif;
} 
      
.container nav {
  background-color: white;
  color:green;
  text-align: left;
  font-size:18px; 
  padding: 5px;
  font-family: Arial, Helvetica, sans-serif;
} 
      
.title1 {grid-area: t1;}
.title2 {grid-area: t2;}
.e1  { grid-area: e1; }
.e2  { grid-area: e2; } 
.e3  { grid-area: e3; } 
.e4  { grid-area: e4; } 
.e5  { grid-area: e5; }       
.e6  { grid-area: e6; } 
.e7  { grid-area: e7; } 
.e8  { grid-area: e8; } 
.e9  { grid-area: e9; }
.e10 { grid-area: e10; } 
.e11 { grid-area: e11; } 
.e12 { grid-area: e12; } 
.e13 { grid-area: e13; }       
.e14 { grid-area: e14; } 
.e15 { grid-area: e15; } 
.e16 { grid-area: e16; } 
.e17 { grid-area: e17; } 
.e18 { grid-area: e18; } 
.e19 { grid-area: e19; } 
.e20 { grid-area: e20; }       
.e21 { grid-area: e21; } 
.e22 { grid-area: e22; } 
.e23 { grid-area: e23; } 
.e24 { grid-area: e24; }       
.e25 { grid-area: e25; } 
.e26 { grid-area: e26; } 
.e27 { grid-area: e27; } 
.e28 { grid-area: e28; } 
.e29 { grid-area: e29; } 
.e30 { grid-area: e30; }       
.e31 { grid-area: e31; } 
.e32 { grid-area: e32; } 
.e33 { grid-area: e33; } 
.e34 { grid-area: e34; } 
.e35 { grid-area: e35; } 
.e36 { grid-area: e36; } 
.e37 { grid-area: e37; } 
.e38 { grid-area: e38; } 
      
.b1  { grid-area: b1; }     
.b2  { grid-area: b2; }    
.b3  { grid-area: b3; }   
.b4  { grid-area: b4; }
.b5  { grid-area: b5; }
.b6  { grid-area: b6; }   
.b7  { grid-area: b7; }     
.b8  { grid-area: b8; } 
.b9  { grid-area: b9; }
.b10 { grid-area: b10; } 
.b11 { grid-area: b11; } 
.b12 { grid-area: b12; } 
.b13 { grid-area: b13; }       
.b14 { grid-area: b14; } 
.b15 { grid-area: b15; } 
.b16 { grid-area: b16; } 
.b17 { grid-area: b17; } 
.b18 { grid-area: b18; } 
.b19 { grid-area: b19; } 
.b20 { grid-area: b20; }       
.b21 { grid-area: b21; } 
.b22 { grid-area: b22; } 
.b23 { grid-area: b23; } 
.b24 { grid-area: b24; }       
.b25 { grid-area: b25; } 
.b26 { grid-area: b26; } 
.b27 { grid-area: b27; } 
.b28 { grid-area: b28; } 
.b29 { grid-area: b29; } 
.b30 { grid-area: b30; }       
.b31 { grid-area: b31; } 
.b32 { grid-area: b32; } 
.b33 { grid-area: b33; } 
.b34 { grid-area: b34; } 
.b35 { grid-area: b35; } 
.b36 { grid-area: b36; } 
.b37 { grid-area: b37; } 
.b38 { grid-area: b38; } 

@media only screen and (max-width: 700px) {
 
  .container {
    display: grid;
    grid-template-columns: 100%;
    background-color: ;
    grid-template-areas: 
      "t1"
      "e1" "e2" "e3" "e4" "e5" "e6" "e7" "e8" "e9" "e10" "e11" "e12" "e13" "e14" "e15" "e16" "e17" "e18" "e19" "e20"
      "e21" "e22" "e23" "e24" "e25" "e26" "e27" "e28" "e29" "e30" "e31" "e32" "e33" "e34" "e35" "e36" "e37" "e38"
      "t2"
      "b1" "b2" "b3" "b4" "b5" "b6" "b7" "b8" "b9" "b10" "b11" "b12" "b13" "b14" "b15" "b16" "b17" "b18" "b19" "b20" 
      "b21" "b22"; "b23" "b24" "b25" "b26" "b27" "b28" "b29" "b30" "b31" "b32" "b33" "b34" "b35" "b36" "b37" "b38";
  }
  .container div {
  background-color: white;
  color:black;
  text-align: center;
  padding: 5px;
  font-size:12px; 
} 
      
.container nav {
  background-color: white;
  color:green;
  text-align: left;
  font-size:15px; 
  padding: 5px;
}
  
}