/*
  File:      contact.css
  Author:    Arthur L. Farnsworth
  Purpose:   Cascading stylesheet for Nancy's Liv-N-Rejuvenate site's Contact Us page
  Created:   26 Sep 2026  From livnrejuvenate.css by splitting off page-specific code
  Revisions: 
  Comments:  The display type for all screen sizes is grid, but it's 2 columns on small screens and fouro on large screens.  On mobile, the user needs to 
             rotate the device to landscape mode below about 336px width, as that's when the map hits the edges of the border.

*/
  #idCUPContentContainer {                /* The parent grid container */
    align-items: center;                  /* Vertical alignment */
    column-gap: 1%;
    display: grid;
    row-gap: 1em;
    grid-template-columns: 33% 66%;       /* Two columns on mobile */
  }
  #idCUPItem1 {               /* Item 1 is the Nancy head shot, name, and credentials */
    border: none;             /* Was thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 1 / span 2;  /* First row is photo and credentials */
    grid-row: 1 / span 1;     /* Don't need */
    place-items: center;      /* Horizontally center the image */
    text-align: center;       /* Horizontally center the below-image text */
  }
  #idCUPItem1 IMG {
    background-color: yellow; /* p/o picture frame (the picture bkgd/matte? color ) */
    border: 4px solid black;  /* p/o picture frame */
    display: grid;
    max-height: 75%;          /* 8/20 */
    max-width: 50%;           /* 8/20 */
    padding: 4px;             /* p/o picture frame */
  }
  #idCUPItem2 {               /* Item 2 is the yellow divider line */
    display: grid;            /* Added 8/22 */
    grid-column: 1 / span 2;  /* Make divider span the whole width */
    grid-row: 2 / span 1;     /* Don't need */
  }
  #idCUPItem2 HR {
    border: 10px solid yellow;
    border-radius: 10px;
    padding: 0;
    width: 90%;
  }
                              /* Item 3 is e-mail line */
  #idCUPItem3a {              /* 3a is the e-mail image */
    border: none;             /* Was thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
    padding-top: 4px;         /* 13Mar26  For better vertical placement */
    place-items: center;      /* Horizontally center the image */
    width: auto;              /* Auto is default value (browser calculates width) */
  }
  #idCUPItem3b {              /* The Contact via e-mail text */
    border: none;             /* Was thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    font-weight: normal;
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
    padding-left: 5px;
  }
                              /* Item 4 is mailing information line */
  #idCUPItem4a {              /* The mailbox image */
    border: none;             /* Was thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
    /*justify-content: flex-start;*/
    /*max-width: 90px;          /* Image is 1200x1200.  Limit to 90 for scaling.*/ /* Didn't work (1/3/26) */
    place-items: center;      /* Horizontally center the image */
    width: 100%;
  }
  #idCUPItem4b {              /* The postal address cell */
    border: none;             /* Was thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    font-weight: normal;
    grid-column: 2 / span 1;
    grid-row: 4 / span 1;
    padding-left: 5px;
  }
                              /* Item 5 is phone information line */
  #idCUPItem5a {              /* The telephone image */
    border: none;             /* Was thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 1 / span 1;
    grid-row: 5 / span 1;
/*    height: 100%;*/
    max-height: 100%;
    overflow: hidden;
    place-items: center;      /* Horizontally center the image */
  }
  #idCUPItem5b {              /* The telephone number */
    border: none;             /* Was thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 2 / span 1;
    grid-row: 5 / span 1;
    padding-left: 5px;
  }
  #idCUPItem6 {               /* Item 6 is map (300Hx400W) */
    border: none;             /* thin solid black; /* Settings for the four "box" borders */
    display: grid;            /* Child element of parent grid container */
    grid-column: 1 / span 2;
    grid-row: 6 / span 1;
    place-items: center;      /* Horizontally center the map */
  }
@media screen and (min-width:760px) {
  P {
    padding: 0em 0em 0em 1em; /* TRBL */
    text-align: left;
  }
  #idCUPContentContainer {                  /* This is the grid parent element (grid container) */
    column-gap: 2%;                         /* 1% on mobile, 2% orig. here */
    display: grid;
    /*grid-template-rows: 50% 25% 25%;      /* Added 1/6/26 No apparent impact */
    grid-template-columns: 15% 10% 20% 40%; /* Four columns on big screen */
    margin-left: 1em;                       /* 8/21 */
    row-gap: 1em;
  }
  #idCUPItem1 {               /* Item 1 is the Nancy head shot, name, and credentials */
    border: none; /*thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 1 / span 1;  /* 8/22 to fix large-screen appearance */
    grid-row: 1 / span 3;     /* Image starts on row 1 and spans 3 rows */
    height: 100%;             /* 8/22 to fix large-screen appearance */
    place-items: center;      /* Horizontally center the image */
    text-align: center;       /* Horizontally center the below-image text */
  }
  #idCUPItem1 IMG {
    background-color: yellow; /* p/o picture frame (the picture bkgd/matte? color ) */
    border: 4px solid black;  /* p/o picture frame */
    display: grid;
    max-height: 75%;          /* 8/20 */
    max-width: 50%;           /* 8/20 */  /* 100% was old 8/20 */
    padding: 4px;             /* p/o picture frame */
  }
  #idCUPItem2 {               /* Item 2 is the yellow divider line */
    display: none;
  }                           /* No item 2 (yellow divider line) in big-screen layout */
                              /* Item 3 is e-mail line */
  #idCUPItem3a {              /* 3a is the e-mail image */
    border: none; /*thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
    padding-top: 4px;         /* 13Mar26  For better vertical placement */
    place-items: center;      /* Horizontally center the image */
    width: auto;              /* Auto is default value (browser calculates width) */
  }
  #idCUPItem3a IMG {
    display: grid;            /* Child element of parent grid container */
    max-height: 100%;          /* 8/20 */
    max-width: 100%;           /* 8/20 */  /* 100% was old 8/20 */
    place-items: center;      /* Horizontally center the image */
  }
  #idCUPItem3b {              /* The Contact via e-mail text */
    align-items: center;      /* Vertical alignment */
    border: none; /*thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    font-weight: normal;
    grid-column: 3 / span 1;
    grid-row: 1 / span 1;
    /*justify-content: flex-start;*/
    padding-left: 5px;
  }

                              /* Item 4 is mailing information line */
  #idCUPItem4a {              /* The mailbox image */
    border: none; /*thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 2 / span 1;
    grid-row: 2 / span 1;
    place-items: center;      /* Horizontally center the image */
    width: 100%;
  }
  #idCUPItem4b {              /* The postal address cell */
    align-items: center;
    border: none; /*thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    font-weight: normal;
    grid-column: 3 / span 1;
    grid-row: 2 / span 1;
    padding-left: 5px;
  }
                              /* Item 5 is phone information line */
  #idCUPItem5a {              /* The telephone image */
    align-items: center;      /* Vertical alignment */
    border: none; /*thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 2 / span 1;
    grid-row: 3 / span 1;
    height: 100%;
  /*  max-height: 100%;*/
    overflow: hidden;
    place-items: center;      /* Horizontally center the image */
  }
  #idCUPItem5b {              /* The telephone number */
    align-items: center;      /* Vertical alignment */
    border: none; /*thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 3 / span 1;
    grid-row: 3 / span 1;
    padding-left: 5px;
  }

  #idCUPItem6 {               /* Item 6 is map (300Hx400W) */
    border: none; /*thin solid black; /* Set up all four borders here */
    display: grid;            /* Child element of parent grid container */
    grid-column: 4 / span 1;
    grid-row: 1 / span 3;
    height: 100%;             /* 8/22 to fix large-screen appearance */
    place-items: center;      /* Horizontally center the map */
  }
  #idCUPItem6 IFRAME {
    align-items: center;      /* Vertical alignment */
    display: grid;
    margin-top: 8%;
    min-width: 90%;
    min-height: 90%;
  }
}