/* All Tables & Div, formatting  */
/* for Ancients   */

/* used for div.header-panel like a 1-cell table to hide background map  */
    .header-panel-light {
      display: flex;
      flex-direction: column;   /* stack children vertically */
      align-items: flex-start;  /* keep text left-aligned */
      gap: .3rem;    /*  vertical spacing */
      background-color: rgba(248, 247, 247, var(--tabl-opaq));
      padding: 1rem;
      border-radius: 10px;
    }

    .header-panel-dark {
      display: flex;
      flex-direction: column;   /* stack children vertically */
      align-items: flex-start;  /* keep text left-aligned */
      gap: .3rem;    /*  vertical spacing */
      background-color: rgba(20, 20, 20, var(--tabl-opaq));
      padding: 1rem;
      border-radius: 10px;
    }

    /*   used for javascript slider call  */
    :root {
      --tabl-opaq: 0.64;  /* default = 70% */
    }

  /* Table Defines:  must define in this order */
  /*  table, th, td {
    padding: 1 rem;
    text-align: center;
    border: 4px solid rgb(31,31,84);
    background-color: transparent;
    }  */

/* general for no-class Table  not used ??  */
    table {
    width: 1100px;
    height: auto;
    border-collapse: separate;
    border: 4px solid rgb(182,82,84);
    border-spacing: 0.5rem;
    vertical-align: top;
    /* this is color expresssed, Almost trasparent w slightly grrenish tint */
    background-color: rgba(114, 114, 29, 0.4);
    display:block;
    }

/* can use .Republic as will never call Roman Republic & L.A. Republic on same page  */
/* also  here is cap "R"  */
/* defines table cell borders     */
      .Republic th,
      .Republic td {
        padding: 1rem;  /* yes padding of All cells  */
        text-align: center;
        border:2px solid rgba(109,21,29, var(--tabl-opaq));   /* cell border color */
          }

  /* Basic Table params */
      .Republic {
        /*   width: 1000px;  */
           height: auto;
           border-collapse: separate;
           border: 4px solid rgba(82,82,84, var(--tabl-opaq));  /* border of entire table  */
           border-spacing: 0.5rem;
           vertical-align: top;
           background-color: rgba(114, 114, 29, 0.1); /* table interstitual color */
           display:block;
           }

    /* alternating rows w different 1st cell only */
    .Republic tr:nth-child(odd) {
            background-color: rgba(255, 238, 238, var(--tabl-opaq));
            color: black;
          }
    .Republic tr:nth-child(odd) td:nth-child(3n+1) {
            background-color: rgba(255, 10, 10, var(--tabl-opaq));
            color: DimGrey;
            }

    .Republic tr:nth-child(even) {
            background-color: rgba(110, 133, 33, var(--tabl-opaq));
            color: black;
          }
    .Republic tr:nth-child(even) td:nth-child(3n+1) {
              background-color: rgba(11, 33, 33, var(--tabl-opaq));
              color: DimGrey;
            }


/* Roman Imperial not attractive nor complex  redo somehow  */
/* Table Defines:  must define in this order */
/* Define table borders & cell borders  */
    .Imperial th,
    .Imperial td {
               padding: 1rem;  /* yes padding of All cells  */
               text-align: center;
               border:2px solid rgba(31,31,84, var(--tabl-opaq));   /* cell border color */
             }

/* Basic Table params */
    .Imperial {
  /*         width: 1000px;  */
         height: auto;
         border-collapse: separate;
         border: 4px solid rgba(82,82,84, var(--tabl-opaq));  /* border of entire table  */
         border-spacing: 0.5rem;
         vertical-align: top;
         background-color: rgba(114, 114, 29, var(--tabl-opaq)); /* table interstitual color */
         display:block;
         }

/* alternating rows w different 1st cell */
/* row #1, cell #2 - 3  */
    .Imperial tr:nth-child(odd) {
                background-color: rgba(210, 209, 209, var(--tabl-opaq));
                color: #823434;
                p {color: #823434;}
                p::first-letter {color: #4d1f1f;}
              }
/* row #1, cell #1  */
    .Imperial tr:nth-child(odd) td:nth-child(3n+1) {
                background-color: rgba(11, 10, 255, var(--tabl-opaq));
                color: #ceed78;
                p {color: #ffffff;}
                p::first-letter {color: #e2e22c;}
              }
/* row #2, cells #2 - 3  */
    .Imperial tr:nth-child(even) {
                background-color: rgba(73, 73, 73, var(--tabl-opaq));
                color: white;
                p {color: #ffffff;}
                p::first-letter {color: #bbbbbb;}
              }
/* row #2, cell #1  */
    .Imperial tr:nth-child(even) td:nth-child(3n+1) {
                background-color: rgba(32, 45, 128, var(--tabl-opaq));
                color: red;
                p {color: #ff3333;}
                p::first-letter {color: #b31e1e;}
              }


/* Table Defines:  must define in this order */
/* Define table borders & cell borders  */
    .Dominate th,
    .Dominate td {
               padding: 1rem;  /* yes padding of All cells  */
               text-align: center;
               border:2px solid rgba(31,31,84, var(--tabl-opaq));   /* cell border color */
             }

/* Basic Table params */
    .Dominate {
  /*         width: 1000px;  */
         height: auto;
         border-collapse: separate;
         border: 4px solid rgba(82,82,155, var(--tabl-opaq));  /* border of entire table  */
         border-spacing: 0.5rem;
         vertical-align: top;
         background-color: rgba(60, 15, 18, var(--tabl-opaq)); /* table interstitual color */
         display:block;
         }

/* alternating rows w different 1st cell */
/* row #1, cell #2 - 3  */
    .Dominate tr:nth-child(odd) {
                background-color: rgba(232, 115, 123, var(--tabl-opaq));
                /* general text color?  overwrites <p> */
                /* color: black;  */
                p {color: #37175e;}
                p::first-letter {color: #3c0f12;}
              }
/* row #1, cell #1  */
    .Dominate tr:nth-child(odd) td:nth-child(3n+1) {
                background-color: rgba(131, 13, 20, var(--tabl-opaq));
                color: #ffffff;
                p {color: #ffffff;}
                p::first-letter {color: #f1f14c;}
              }
   /* row #2, cells #2 - 3  */
    .Dominate tr:nth-child(even) {
                background-color: rgba(73, 73, 73, var(--tabl-opaq));
                color: #ffffff;
                p {color: #ffffff;}
                p::first-letter {color: #f1f14c;}
              }
   /* row #2, cell #1  */
    .Dominate tr:nth-child(even) td:nth-child(3n+1) {
                background-color: rgba(60, 15, 18, var(--tabl-opaq));
                color: #ffffff;
                p {color: #ffffff;}
                p::first-letter {color: #f1f14c;}
              }


/* Correct def of Table border, cell borders, cell bkgds   */

    .Greek th,
    .Greek td {
      padding: 1rem;  /* yes padding of All cells  */
      border: 1px solid rgba(26,56,52, var(--tabl-opaq));   /* dk green cell border color */
        }
    .Greek {
/*        width: 1000px;   */
        height: auto;
        border-collapse: separate;
        /* padding: 2rem;   --- only affects padding of 2nd cell 1st rom */
        border: 4px solid rgba(82,82,84, var(--tabl-opaq));  /* border of entire table  */
        border-spacing: 0.5rem;
        vertical-align: top;
        background-color: rgba(187, 187, 187, var(--tabl-opaq));  /* Table interstitual color */
        display:block;
        }

/* alternating rows w different 1st cell */
    .Greek tr:nth-child(odd) {
                background-color: rgba(240, 248, 255, var(--tabl-opaq));
                color: black;
              }
    .Greek tr:nth-child(odd) td:nth-child(3n+1) {
                background-color: rgba(156, 186, 193, var(--tabl-opaq));
                color: #424040;
              }

    .Greek tr:nth-child(even) {
                background-color: rgba(110, 97, 111, var(--tabl-opaq));
                color: white;
              }
    .Greek tr:nth-child(even) td:nth-child(3n+1) {
                background-color: rgba(184, 167, 200, var(--tabl-opaq));
                color: #1a3834;
              }


      footer	{
      	float:none;                /*float: clear;      incorrect value for float*/
      	font-size: 50%;
      	color: rgb(8,48,112);      /*font-color: rgb(8,48,112);  invalid css property*/
      	text-align: center;	}