/*~~~~~~~~~~~~*/
/* lyl-style.css */
/*~~~~~~~~~~~~*/
/* Created at 2026-07-17 01:09:17 */
/*~~~~~~~~~~~~*/
/* CAUTION: (1) // (double slashes) is NOT a valid comment for css and it does not show as compilation problem.  It will create rare layout on the webpage */
/* CAUTION: (2) Missing } (closing curly bracket) in css file does not create compilation error but it will create rare layout on the webpage.  For example, the footer section did not work. 2026-0710 */

/*~~~~~~~~~~~~*/
/* Section 1: General */
/*~~~~~~~~~~~~*/
/* asterisk means apply these styles to all elements. */
* { margin: 0; padding: 0; box-sizing: border-box; }
/*~~~~~~~~~~~~*/
/* height: 100% ensure all black */
html, body {
  height: 100%;
  background-color: black;
}
/*~~~~~~~~~~~~*/
/* Put viewport here even already in meta data on html head */
/*~~~~~~~~~~~~*/
/* Links.  If link does not work, click safari->clear history */
a { color: #d16504; outline: none; }
a:link { color: blue; }
a:visited { color: #d16504; }
a:hover { color: blue; text-decoration: underline; }
a.h4 { font-family: "Verdana", "Geneva", "sans-serif"; font-size: 1.5em; line-height: 4em; font-weight: normal; }
p { color: #121838; }
span { color: red; }
/* This is to control the image on left or right */
/*~~~~~~~~~~~~*/
/* Container for the entire webpage which is being used by every webpage. Therefore it should be first declaration. */
.containerWholePage {
  width: 100%;
  font-family: "Tahoma", "Geneva", "sans-serif";
  font-size: 100%;
  line-height: 1em;
  background-color: black;
}
/*~~~~~~~~~~~~*/
/* Section 2: Signboard, logo, menu */
/*~~~~~~~~~~~~*/
/* Header or signboard and Organization Name.  This is used by every page. */
/* #fbb046 is light orange and served as border under header  or signboard. */
/* box-sizing: border-box; is to keep the width no matter amt of padding */
/* justify-content: center; main-axis is horizontal by default. center signboard contain to be horizontally center. */
.containerWholeSignboard {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
/* border: 1px solid red; */
}
.containerSignboard {
  width: 1020px;
/* border: 1px solid red; */
}
/* logoLn is a thin line (6px H x 1020px W black and white png file. */
.logoLn {
  position: absolute;
  padding-top: 32px;
  z-index: 1;
/* border: 1px solid yellow; */
}
/* position: absolute; Makes the Logo container to attachto containerSignboard top left (default; therefore no need for float: left). */
/* z-index: 2; not affecting by logo-ln.png */
/* width: 20percent; is the 20percent width of containerSignboard */
.containerLogo {
  position: absolute;
  width: 20%;
  z-index: 2;
}
/* float: right; logo is attached to right side of container */
.logo {
  float: right;
}
/*~~~~~~~~~~~~*/
/* Section 2: Menu */
/*~~~~~~~~~~~~*/
/* This is menu at the top of the page used by every page. */
/* 
/* float: right; Menu is attached to the right side of Signboard container; no position absolute because the parent element is containerLogo */
/* height: 150px; Container must have a defined height for bttnPlain to align to the bottom */
/* height: 90percent 70percent of WholeSignboard makes this containerMenuNew sits top of the LogoLn */
/* display: flex; default flex alignment is vertical */
/* align-items: flex-end; align to bottom of container */
/* z-index: 2; higher than logoLn */
.containerWholeMenu {
  position: absolute; 
  top: 10px; 
  left: 65%; 
  width: 30%; 
  display: flex;
  align-items: flex-end;
  z-index: 2;
/* border: 1px solid white; */
}
/* width: 100percent; full width of containerWholeMenu which is 35percent of containerSignboard which is 1000px */
.containerMenu {
  margin: auto;
  width: 100%
}
.containerMenu a:link {
  color: blue; 
}
/* #d16504 is like cornsilk color which same as border on home page */
.containerMenu a:visited {
  color: #d16504; 
}
.containerMenu a:hover {
  color: forestgreen; 
}
.divTableMenu {
  margin: auto;
  width: 100%;
  display: table;
}
.divTableRowMenu {
  display: table-row;
}
.divTableCellMenu {
  margin: auto;
  display: table-cell;
  vertical-align: bottom;
}
/* bttnPlain style is for Home button */
/* background-color: red */ is used for testing; border: 1px solid red; is not working.
.bttnPlain {
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  font-size: 0.9em;
  font-family: "Big Caslon", "Lucida Sans Unicode", "Trebuchet MS", "sans-serif";
  color: white;
}
/* dropdown style is for browse website */
.containerDropdown {
  width: 100%;
  position: relative;
  display: inline-block;
  float: left;
}
/* z-index: 2; so that the dropdown menu can appear in front of slide show or stack on the top of slide show  */
.containerDropdownContent {
  margin: auto;
  display: none;
  position: absolute;
  width: 100%;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  font-size: 1em;
  font-family: "Big Caslon", "Lucida Sans Unicode", "Trebuchet MS", "sans-serif";
  background-color: florawhite; 
  text-align: left;
  padding-bottom: 5px;
  padding-left: 15px;
  z-index: 2;
/* border: 1px solid red; */
}
/* To ensure the dropdown content actually shows on hover, you need to specify the div’s display property with the pseudo-class : hover. This defines a special state of the element — in this case, how it appears when a user is hovering over it. */
.containerDropdown:hover .containerDropdownContent {
  display: block;
  text-align: left;
}
.containerDropdownContent a {
  display: block;
  padding-top: 5px;
  color: MidnightBlue;
  font-size: 1em;
  font-family: "Arial", "Helvetica", "Trebuchet MS", "sans-serif";
  font-style: italic;
}
.bttnDropdown {
  margin: auto;
  width: 100%;
  text-align: center;
  border: none;
  text-decoration: none;
  font-size: 1em;
  font-family: "Big Caslon", "Lucida Sans Unicode", "Trebuchet MS", "sans-serif";
  background-color: beige;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.paraSortBy {
  color: MidnightBlue;
  font-size: 1.4em;
  font-family: "Snell Roundhand", "Helvetica", "Trebuchet MS", "sans-serif";
  text-align: right;
  padding-right: 20px;
}
/* 2022-1112: Added a list on dropdown menu */
.lstSortBy {
  font-family: "Snell Roundhand", "Helvetica", "Trebuchet MS", "sans-serif";
  font-weight: bold;
  font-size: 1.4em;
  color: MidnightBlue;
}
.lstsubSortBy {
  margin-left: 18px;
  font-family: "Arial", "Helvetica", "sans-serif";
  font-size: 0.8em;
  color: MidnightBlue; 
  font-style: normal;
}
.lstsubSortByLink {
  color: #d16504; 
  font-family: "Big Caslon", "Lucida Sans Unicode", "Trebuchet MS", "sans-serif";
  font-size: 1.2em;
  font-style: italic;
}
.lstsubSortBy a:hover {
  background-color: yellow; 
}
/*~~~~~~~~~~~~*/
.lstMenuSale {
  font-family: "Snell Roundhand", "Helvetica", "Trebuchet MS", "sans-serif";
  font-weight: bold;
  font-size: 1.6em;
  color: red;
  padding-bottom: 15px;
}
/* 2024-0727: Keep Sales menu constantly red */
/* 
lstMenuSale a {color: red;}
lstMenuSale a:hover { text-decoration:underline;}
 */
.lstMenuSold {
  font-family: "Snell Roundhand", "Helvetica", "Trebuchet MS", "sans-serif";
  font-weight: bold;
  font-size: 1.6em;
  color: red;
  padding-bottom: 15px;
}
/*~~~~~~~~~~~~*/
/* Section 3: MenuBase */
/*~~~~~~~~~~~~*/
/* It displays a secondary menu such as About and Contact  at the bottom of each page and above footer. */
/* 2020-0112: Enhancement: use 3 columns instead of table. */
/* #fbb046 is the orange color for Line which acted as a line divider between menubase and footer. */
/* width is the same imgslide which is 1020px. */
.containerMenuBase {
  margin: auto;
  width: 1020px;
  padding: 10px 5px 10px 5px;
/* border: 1px solid red; */
}
.containerMenuBase a:link {
  color: blue; 
}
.containerMenuBase a:visited {
  color: #d16504; 
}
.containerMenuBase a:hover {
  background-color: orange;
  color: green;
}
/* 2026-0225: padding 50px on the side because only have two columns */
.divTableMenuBase {
  margin: auto;
  display: table;
}
.divTableBodyMenuBase {
  display: table-row-group;
}
.divTableRowMenuBase {
  display: table-row;
}
.divTableCellMenuBase {
  margin: auto;
  width: 15%;
  display: table-cell;
/* border: 1px solid red; */
}
.paraMenuBase {
  font-size: 1em;
  font-family: "Big Caslon", "Lucida Sans Unicode", "Trebuchet MS", "sans-serif";
/* border: 1px solid red; */
}
/*~~~~~~~~~~~~*/
/* Section 4: Home Page */
/*~~~~~~~~~~~~*/
/* Home page has homeslide and slide description */
/* #110a2f is dark blue black */
/* #1d1349 is dark blue black */
/* #271c59 is dark blue black */
/* #151544 is dark blue black */
/* #fbb046 is orange color */
/*~~~~~~~~~~~~*/
.containerHome {
  width: 1020px;
  margin: auto;
  background-color: black;
}
/* center aligns imgHomeSlide to center horizontally and vertically with in containerHomeSlide */
.containerHomeSlide {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0px 5px 0px;
}
/* Image size 680 H x 1020 W px; If specify width: 1020px in imgHomeSlide, causing portrait to expand the width to 1020. */
.imgHomeSlide {
  display: block;
}
/* 2026-0712: Use margin: auto to cener the descr and width:100% to be the same width as containerHome which is set to 1020px */
/* justify-content: center; is for horizontally centers the text */
/* align-items: center; is for vertically centers the text */
/* height: 30px; is requires a defined container height */
/* For whatever reason, padding: 5px;, can cover leftover text from previous text */
.containerSlideDescr {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
}
.paraSlideDescr {
  font-family: "Rockwell", "Arial", "Trebuchet MS", "sans-serif";
  font-size: 0.9em;
  letter-spacing: 0.1em;
  color: cornsilk;
  padding: 5px;
}
/*~~~~~~~~~~~~*/
/* Section 5: Line Space */
/*~~~~~~~~~~~~*/
/* Space above orange line */
/* #fbb046 is the orange color for Line which acted as a line divider between menubase and footer. */
.containerLineSpace {
  margin: auto;
  height: 10px;
}
.containerLine {
  margin: auto;
  width: 1020px;
  height: 5px;
  background-color: #fbb046;
}
/*~~~~~~~~~~~~*/
/* Section 6: Footer */
/*~~~~~~~~~~~~*/
.containerFooter {
  width: 1020px;
  margin: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem;
  background-color: black;
}
.paraFooter {
  margin: 0; /* Clears default browser spacing */
  font-family: "Helvetica", "Zapfino", "Trebuchet MS", "sans-serif";
  font-size: 0.8em;
  letter-spacing: 0.1em;
  color: lightgoldenrodyellow;
}
.containerFooter a:link {
  color: cornsilk;
  letter-spacing: 0.1em;
}
.containerFooter a:visited {
  color: floralwhite;
}
.containerFooter a:hover {
  background-color: orange;
}
/*~~~~~~~~~~~~*/
/* Section 7: Subheading */
/*~~~~~~~~~~~~*/
/* Caution: display:table in containerItem is very important. Without it, the height will not be matched with generated items in wounaan-basket-tn.html */
/*~~~~~~~~~~~~*/
.containerSubHdg {
  margin: auto;
  width: 100%;
  clear: both;
}
.paraSubHdg {
  margin: auto;
  font-size: 2rem;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  color: Cornsilk;
  padding: 10px 0px 10px 0px;
}
/*~~~~~~~~~~~~*/
/* Section 8: Items */
/*~~~~~~~~~~~~*/
/* 2026-0712: (400 tn width x 3)  + (15 x 2) gaps = 1230px */
/* 2026-0208: Caution: display:table in containerItem is very important. Without it, the height will not be matched with generated items in wounaan-basket-tn.html */
/*~~~~~~~~~~~~*/
.containerItem {
  margin: auto; 
  width: 1230px;
  background-color: black;
}

.image-gallery {
  display: flex;
  gap: 15px; /* Adds space between the photos */
  width: 100%;
}
.image-gallery img {
  width: calc(33.33% - 10px); /* Divides the row by 3, adjusting for the gap */
  height: 300px; /* Set a fixed height for consistency */
  object-fit: contain; /* Prevents cropping and preserves aspect ratio */
  object-position: center;
}

@media (max-width: 768px) {
  .image-gallery {
    flex-direction: column; /* Stack images vertically on smaller screens */
  }
  .image-gallery img {
    width: 100%; /* Make images take up the full width */
  height: auto;
  }
}

.lightbox-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
}

.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}
/* #121838 is french ultramarin blue */
.paraItem {
  display: block;
  margin: auto;
  font-size: 1.2em;
  font-family: "Rockwell","Helvetica", "Trebuchet MS", "sans-serif";
  text-align: center;
  color: White;
  padding-bottom: 2px;
}
/*~~~~~~~~~~~~*/

/*~~~~~~~~~~~~*/
/* Section 9: Contact */
/*~~~~~~~~~~~~*/
.containerWholeContact {
  width: 100%;
  margin: auto; 
  padding: 20px 0;
}
.containerContact {
  width: 800px;
  margin: auto; 
  padding: 20px 20px 80px 20px;
}
.containerBoxContact {
  width: 400px;
  margin: auto; 
  height: 300px;
  background-color: beige;
  padding: 80px 0px 50px 0px;
  box-shadow: 6px 6px 2px 1px darkgray;
}
.containerHdgContact {
  margin: auto;
  width: 100%;
  padding: 20px 0px 40px 0px;
}
.paraHdgContact {
  margin: auto;
  font-size: 3em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align: center;
  color: cornsilk;
}
.paraContact {
  margin: auto;
  font-size: 2em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align: center;
  color: MidnightBlue;
  padding-bottom: 12px;
}
.paraEmailContact {
  font-size: 1.6em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align: center;
  color: MidnightBlue;
  padding-top: 20px;
  padding-bottom: 10px;
}
/*~~~~~~~~~~~~*/
/* Section 10: About */
/*~~~~~~~~~~~~*/
.containerWholeAbout {
  width: 100%;
  margin: auto; 
  padding: 20px 0;
}
.containerAbout {
  width: 800px;
  margin: auto; 
  background-color: cornsilk;
  padding: 20px 20px 80px 20px;
  box-shadow: 6px 6px 2px 1px darkgray;
}
.containerHdgAbout {
  margin: auto;
  width: 100%;
  padding: 20px 0px 40px 0px;
}
.paraHdgAbout {
  margin: auto;
  font-size: 2.4em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align: center;
  color: MidnightBlue;
}
.containerBoxAbout {
  width: 100%;
  margin: auto; 
  background-color: cornsilk;
  padding: 20px;
}
.containerSubHdgAbout {
  margin: auto;
  width: 100%;
  clear: both;
}
.paraSubHdgAbout {
  margin: auto;
  font-size: 2.1em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align: left;
  color: MidnightBlue;
  padding-top: 20px;
  padding-bottom: 20px; 
}
.paraAbout {
  margin: auto;
  font-size: 1em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align: left;
  color: MidnightBlue;
  line-height: 1.3;
  padding-bottom: 20px;
}
.paraEmailAbout {
  font-size: 1.2em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align: center;
  color: MidnightBlue;
  padding-top: 10px;
  padding-bottom: 5px;
}
/*~~~~~~~~~~~~*/
/* Section 11: Error Page */
/*~~~~~~~~~~~~*/
.containerWholeError {
  width: 100%;
  margin: auto; 
  background-color: cornsilk;
  padding: 20px 0;
}
.containerError {
  width: 800px;
  margin: auto; 
  background-color: gainsboro;
  padding: 20px 20px 80px 20px;
  box-shadow: 12px 12px 8px darkgrey;
}
.containerBoxError {
  width: 100%;
  margin: auto; 
  background-color: gainsboro;
  padding: 20px;
}
.containerHdgError {
  margin: auto;
  width: 100%;
  padding: 20px 0px 40px 0px;
}
.paraHdgError {
  margin: auto;
  font-size: 3em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align: center;
  color: MidnightBlue;
}
.paraError {
  color: black; 
  font-size: 1.2em;
}
.paraEmailError {
  font-size: 1.2em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align: center;
  color: MidnightBlue;
  padding-top: 20px;
  padding-bottom: 10px;
}
/* 2023-0731: Copied from ecommerce book */
form input.error, textarea.error, select.error {
  border: 2px solid #800517;
}
.error {
  color: #800517;
  font-weight: thick;
}
/* 2023-0908: Remove bg to display error from my_error_handler */
.containeriErrorHandler {
  width: 100%;
  margin: auto; 
  background-color: gainsboro;
  padding: 10px;
}
.paraErrorHandler {
  color: white; 
  font-size: 1.2em;
}
/*~~~~~~~~~~~~*/
/* Section 12: Informational page such as Success or Cancel */
/*~~~~~~~~~~~~*/
.containerWholeInform {
  width: 100%;
  margin: auto; 
  background-color: cornsilk;
  padding: 20px 0;
}
/* box-shadow: 12px 12px 8px darkgrey; */
.containerInform {
  width: 800px;
  margin: auto; 
  background-color: gainsboro;
  padding: 80px 20px 80px 20px;
}
.containerBoxInform {
  width: 100%;
  margin: auto; 
  background-color: gainsboro;
  padding: 20px;
}
.containerHdgInform {
  margin: auto;
  width: 100%;
  padding: 20px 0px 40px 0px;
}
.paraHdgInform {
  margin: auto;
  font-size: 3em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align: center;
  color: MidnightBlue;
}
.paraInform {
  color: black; 
  font-size: 1.2em;
}
.paraEmailInform {
  font-size: 1.2em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align: center;
  color: MidnightBlue;
  padding-top: 20px;
  padding-bottom: 10px;
}
/* End of lyl-style.css */