/* 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(248, 247, 247, 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 */
/* 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,155, var(--tabl-opaq));  /* border of entire table  */
         border-spacing: 0.5rem;
         vertical-align: top;
         background-color: rgba(10, 50, 15, var(--tabl-opaq)); /* table interstitual color */
         display:block;
         }

/* alternating rows w different 1st cell */
    .Imperial tr:nth-child(odd) {
                background-color: rgba(210, 209, 209, var(--tabl-opaq));
                color: black;
              }
    .Imperial tr:nth-child(odd) td:nth-child(3n+1) {
                background-color: rgba(11, 10, 255, var(--tabl-opaq));
                color: #424040;
              }

    .Imperial tr:nth-child(even) {
                background-color: rgba(73, 73, 73, var(--tabl-opaq));
                color: white;
              }
    .Imperial tr:nth-child(even) td:nth-child(3n+1) {
                background-color: rgba(32, 45, 128, var(--tabl-opaq));
                color: red;
              }


/* 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;	}