/* CSS file for  for Wilkins Family tables (Tables.css)
   (C) 2025 R Wilkins   */

  * {
    box-sizing: border-box;
  }

  .tableMain {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  th {
    text-align: left;
    font-weight: bold;
    border-bottom: solid 2px darkGray;
  }

  td {
    text-align: left;
    font-weight: normal;
  }
  
/* 0. Extra small phones, 390px and down */
  @media only screen and (max-width: 390px) {

  .tableMain {width: 90%; }
  
  th {
    font-size: small;
    padding: 12px 0 12px 6px;
  }

  td.name {
    padding: 7px 0 7px 6px;
    /*border: solid blue 2px;*/
  }

  td.other {
    padding: 7px 0 7px 6px;
    /*border: solid blue 2px;*/
  }
            
  td {
    font-size: small;
    padding: 7px 0 7px 6px;
    /*border: solid blue 2px;*/
  }

  a.fill-div {
     padding: 0 0 0 0; }
}

/* 1. Small devices, from 391px up to 450px) */
  @media only screen and (min-width: 391px) and (max-width: 450px) {

  .tableMain { width: 90%; }

  th {
    font-size: small;
    padding: 12px 0 12px 6px;
  }

  td.name {
    padding: 7px 0 7px 6px;
    /*border: solid blue 2px;*/
  }

  td.other {
    font-size: small;
    padding: 7px 0 7px 6px;
    /*border: solid blue 2px;*/
  }
            
  td {
    font-size: small;
    padding: 7px 0 7px 6px;
    /*border: solid dodgerBlue 2px;*/
  }
  
  a.fill-div {
     padding: 0 0 0 0;
  }
}

/* 2. Small devices, from 451px up to 600px) */
  @media only screen and (min-width: 451px) and (max-width: 600px) {

  .tableMain {width: 90%; }

  th {
    font-size: small;
    padding: 13px 0 13px 6px;
  }

  td.name {
    padding: 7px 0 7px 6px;
    /*border: solid blue 2px;*/
  }

  td.other {
    padding: 7px 0 7px 6px;
    /*border: solid blue 2px;*/
  }
            
  td {
    font-size: small;
    padding: 7px 0 7px 6px;
    /*border: solid blue 2px;*/
  }
  
  a.fill-div {
     padding: 0 0 0 0;
  }
}

/* 3. Small devices (portrait tablets and large phones, from 601px up to 768px) */
  @media only screen and (min-width: 601px) and (max-width: 768px){

  .tableMain {width: 90%; }
  
  th {
    font-size: medium;
    padding: 15px 0 15px 5px;
  }

  td.name {
    padding: 7px 0 7px 5px;
    /*border: solid blue 2px;*/
  }

  td.other {
    padding: 7px 0 7px 5px;
    /*border: solid blue 2px;*/
  }
            
  td {
    font-size: medium;
    padding: 7px 0 7px 5px;
    /*border: solid blue 2px;*/
  }

  a.fill-div {
     padding: 0 0 0 0;
  }
}

/*4. Medium devices (landscape tablets, from 769px up to 991px) */
  @media only screen and (min-width: 769px) and (max-width: 991px) {

  .tableMain { width: 90%;}

  th {
    font-size: medium;
    padding: 15px 0 15px 5px;
  }

  td.name {
    padding: 7px 0 7px 5px;
    /*border: solid blue 2px;*/
  }

  td.other {
    padding: 7px 0 7px 5px;
    /*border: solid blue 2px;*/
  }
            
  td {
    font-size: medium;
    padding: 7px 0 7px 5px;
    /*border: solid blue 2px;*/
  }

  a.fill-div {
     padding: 0 0 0 0;
  }
}

/* 5. Large devices (laptops/desktops, from 992px up to 1200px) */
  @media only screen and (min-width: 992px) and (max-width: 1200px) {

  .tableMain { width: 90%; }

  th {
    font-size: medium;
    padding: 15px 0 15px 5px;
  }

  td.name {
    padding: 7px 0 7px 6px;
    /*border: solid blue 2px;*/
  }

  td.other {
    padding: 7px 0 7px 6px;
    /*border: solid blue 2px;*/
  }
            
  td {
    font-size: medium;
    padding: 7px 0 7px 5px;
    /*border: solid blue 2px;*/
  }

  a.fill-div {
     padding: 0 0 0 0;
  }
}

 /*6. Extra large devices (large laptops and desktops, 1201px and up) */
  @media only screen and (min-width: 1201px) {

  .tableMain { width: 90%; }

  th {
    font-size: medium;
    padding: 15px 0 15px 5px;
  }
    
  td.name {
    padding: 7px 0 7px 6px;
    /*border: solid blue 2px;*/
  }

  td.other {
    padding: 7px 0 7px 6px;
    /*border: solid blue 2px;*/
  }
            
  td {
    font-size: medium;
    padding: 7px 0 7px 5px;
    /*border: solid blue 2px;*/
  }

  a.fill-div {
     padding: 0 0 0 0;
     /*border: solid 2px brown;*/
  }
}