/*~~~~~~~~~~~*/
/* style.css */
/*~~~~~~~~~~~*/
/* CAUTION: // (double slashes) is NOT a valid comment for css and it does not show as */
/* compilation problem.  It will create rare layout on the page  */
/*~~~~~~~~~~~*/
/* 2025-0202: Created by copying baa-style.css */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Section of name or ID are in alphabetical order  */
/* except declaration dependency */
/* Ex: header or signboard and orgname are one section  */
/* For the home page div: page, header or signboard, menu, Home, footer */
/* For other webpages div: page, header or signboard, menu, cat Nav, tablecat, cellcat etc, footer  */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ 
/* Section 1: General */
/* General declaration that applies to overall such as: */
/* html, body and links */
/* asterisk means apply these styles to all elements. */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ 
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%;}
html { min-width:990px;}
body {
  font-family:Tahoma, Geneva, sans-serif;
  font-size:100%;
  line-height:1em; 
  color: beige;
}
/* put viewport here even already in meta data on html head */
@viewport {
  zoom:1.0;
  width:device-width;
}
/* Links */
/* 2023-0713: If link color is 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 */
/*~~~~~~*/
.floatleft {
  float:left;
  padding-right:10px;
}
.floatright {
  float:right;
  padding-left:10px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Section 2: Whole Page */
/* Container for the entire page which is being used by every page. */
/* Therefore it should be first declaration  */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* #fbb046 is the orange color.  */
/*  background:url(../images/rainforest-corner.jpg) center top repeat-x cornsilk;*/
/*
#151544 is midnightblue black.
*/
/* padding-top: 50%; is to give space to containerSignboard */
.containerWholePage {
  width:100%;
  font-family:Tahoma, Geneva, sans-serif;
  font-size:100%;
  line-height:1em; 
  padding-top: 50px;
  background-color: #151544;
}
/* border: 1px solid yellow; */
.containerHome {
  display: flex;
  justify-content: center;
  align-items: center;
  width:1185px;
  margin:auto;
  background-color: black;
}

.containerHomeSlide {
  display: flex;
  justify-content: center;
  align-items: center;
  margin:auto;
  padding: 50px 0px 50px 0px;
}
/*
2025_0830: Created containerHS; Removed containerHS0, HS1, 2,3,4
  overflow:hidden;
*/
.containerHS {
  width: 1020px;
  height: 680px;
  border-radius:8px;
  padding: 3px;
  display:none;
}

/*------------*/
.imgHomeSlide {
  display: block;
  margin: auto;
  width: 1019px;
  height:679px;
}
.paraHdgFancy {
  font-family: "Rockwell", "Arial", "Trebuchet MS", "sans-serif";
  font-size: 2.0em;
  letter-spacing:0.15em;
  text-align: center;
  color:red;
  padding-bottom: 25px;
  padding-right: 10px;
  padding-left: 10px;
  z-index: 1;
}
.paraFancy {
  font-family: "Rockwell", "Arial", "Trebuchet MS", "sans-serif";
  font-size: 1.8em;
  letter-spacing:0.13em;
  text-align: center;
  padding-right: 25px;
  color: red;
  z-index: 1;
}
.paraFancySmall {
  font-family: "Rockwell", "Arial", "Trebuchet MS", "sans-serif";
  font-size: 0.7em;
  letter-spacing:0.1em;
  text-align: center;
  color: gray;
  z-index: 1;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Section 3: header or signboard and Organization Name  */
/* This is used by every page. */
/* #fbb046 is light orange and served as a border under the header or signboard. */
/* box-sizing:border-box; is to keep the width no matter amt of padding */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* 
Read https://www.freecodecamp.org/news/how-to-center-an-image-in-css/
To center image horizonally:
.logo {
  display: block;
  margin: auto; 
  width: 20%;
}
To center image horizonally and vertically:  
.containerSignboard {
  display: flex;
  justify-content: center;
  align-items: center;
  height:239px;
  background-color: lavender;
*/
/* 2025-0206: logo width 90% for laiyee lee, 60% for laiyee */
.containerSignboard {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  width: 1000px;
  margin:auto;
  background:url(../images/lyl-logo-bg.jpg);
}
.logo {
  width: 45%; 
}

/*~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Section 4: Menu  */
/* This is used by every page. */
/*~~~~~~~~~~~~~~~~~~~~~~~~*/
.containerWholeMenu {
  width:100%;
  background-color: blanchedalmond;
  padding-top:15px;
  padding-bottom:15px;
  margin-top: 50px;
}
.containerMenu {
  margin:auto;
  width:80%;
  max-width:990px;
  background-color: blanchedalmond;
}
.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;
}

/* 2022-1112: Added dropdown style to browse baskets menu on the home page */ 
.containerDropdown {
  width: 100%;
  position: relative;
  display: inline-block;
  float: left;
}
/* 2022-1117: Put 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%;
  background-color: cornsilk;
  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";
  color: #d16504; 
  text-align:left;
  padding-bottom: 5px;
  padding-left: 15px;
  z-index: 2;
}

/* 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;
}
/* #d16504 is like cornsilk color which same as border on home page */ 
.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";
  color: #d16504; 
  background-color: beige;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* #d16504 is like cornsilk color which same as border on home page */ 
.paraSortBy {
  color:MidnightBlue;
  font-size:1.4em;
  font-family: "Snell Roundhand", "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:right;
  padding-right:20px;
}
/* 2024-0721: Added Sale Items on dropdown menu */
.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;
}

/* 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; 
}
/* Only browse baskets has different font */
.paraBrowseBaskets {
  font-family: "Snell Roundhand", "Helvetica", "Trebuchet MS", "sans-serif";
  font-size: 1.4em;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Section 4B: MenuBase  */
/* This is used by every page.*/
/* It is located at the bottom of screen and above footer */
/* #fbb046 is the orange color which is background color of header or signboard and serves as the border underneath header or signboard; */
/* midnightblue is the green color which is background color. */
/* 2020-0112: Enhancement: use 3 columns instead of table */
/*~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Base1 is the orange line */
.containerWholeMenuBase1 {
  width:100%;
  height:5px;
  background-color:#fbb046;
  display: block;
}
.containerWholeMenuBase {
  width:100%;
  background-color:beige;
  padding-top:8px;
  padding-bottom:8px;
}
.containerMenuBase {
  margin: auto;
  width: 100%;
  background-color:beige;
}
.containerMenuBase a:hover {
  background-color:orange;
  color: green;
}
.divTableMenuBase {
  margin: auto;
  width: 990px;
  display: table;
}
.divTableBodyMenuBase {
  display: table-row-group;
}
.divTableRowMenuBase {
  display: table-row;
}
.divTableCellMenuBase {
  width: 320px; 
  margin: auto;
  display: table-cell;
  vertical-align: bottom;
  padding: 5px 10px;
  font-size:1em;
  font-family: "Big Caslon", "Lucida Sans Unicode", "Trebuchet MS", "sans-serif";
}
/*~~~~~~~~~~~~~~~~~~~~~~*/
/* Section 5: Home Page */
/*~~~~~~~~~~~~~~~~~~~~~~*/
/* This is used by the the home page  */
/* Home page has 3 boxes: Welcome, Sale if any, About Basket & Art  */
/* 2020-0206: Added slideshow on the home page */
/* #110a2f is dark blue black */
/* #1d1349 is dark blue black */
/* #271c59 is dark blue black */
/* #151544 is dark blue black */

/* Sale Box on Home page */

#withpad {padding-left:20px;} 
#withpad p {color:MidnightBlue; font-size:1em;}
#sale {color:red;}

/* List used on Sale Box */

ul { list-style:none;}
ul li { padding-bottom:14px;}
ol li { list-style-position:inside; text-indent:-1em; padding-left:10px; padding-bottom:14px; color:MidnightBlue; }

.paraSize {
  font-size: 2.8em;
  font-family: "Brush Script MT", "Helvetica", "Trebuchet MS", "sans-serif";
  letter-spacing:0.1em;
  color: red;
  text-align: center;
  padding-bottom: 30px;
  padding-right: 15px;
}
.paraOrig {
  font-size: 3.0em;
  font-family: "Brush Script MT", "Helvetica", "Trebuchet MS", "sans-serif";
  letter-spacing:0.1em;
  color: red;
  text-align: center;
  padding-bottom: 30px;
  padding-right: 15px;
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-color: red;
}
.paraOff {
  font-size: 3.0em;
  font-family: "Brush Script MT", "Helvetica", "Trebuchet MS", "sans-serif";
  letter-spacing:0.1em;
  color: red;
  text-align: center;
  padding-bottom: 30px;
  text-decoration-line: none;
}
.paraNow {
  font-size: 3.2em;
  font-family: "Brush Script MT", "Helvetica", "Trebuchet MS", "sans-serif";
  letter-spacing:0.1em;
  color: red; 
  text-align: center;
  padding-bottom:30px;
}


/* end of home page */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ 
/* Section 6: Footer */
/* 2020:0103: Use the same footerMnt source for this */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ 
/* #fbb046 is the orange color which is background color of header or signboard and serves as the border underneath header or signboard; */
.containerWholeFooter {
  width:100%;
  margin:auto;
  box-sizing:border-box; 
}
.containerFooter {
  width:990px;
  height:56px;
  margin:auto;
}
/* 2020-0203: Changed font 
  font-family: "Tahoma", "Geneva", "Trebuchet MS", "sans-serif";
  font-size:1em;
*/
.containerFooterLft {
  float:left;
  font-family: "Zapfino", "Helvetica", "Trebuchet MS", "sans-serif";
  font-size:0.8em;
  color: moccasin;
  padding-top:30px;
  padding-bottom:10px;
  padding-left:100px;
}
.containerFooterRght {
  float:right;
  font-family: "Zapfino", "Helvetica", "Trebuchet MS", "sans-serif";
  font-size:0.8em;
  color: moccasin;
  padding-top:30px;
  padding-bottom:10px;
  padding-right:100px;
}
.containerFooterRght a:link {
  color: floralwhite; 
  letter-spacing:0.2em;
}
.containerFooterRght a:visited {
  color: floralwhite; 
  letter-spacing:0.2em;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Section 7: Category  */
/* gainsboro is very light grey */
/* box-shadow: none|h-offset v-offset blur spread color  */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* padding-top:20px; padding-bottom:100px; */
.containerWholeCat {
  width:100%;
  margin:auto; 
  background-color:cornsilk;
  padding:20px 0;
}
.containerCat {
  width:990px;
  margin:auto; 
  background-color: gainsboro;
  padding:20px 0px 20px 0px;
  box-shadow:12px 12px 8px darkgrey;
}
.divTableCat {
  margin:auto;
  width:100%;
  display: table;
  padding-bottom:20px;
}
.divTableRowCat {
  display: table-row;
}
/* (990 width -40 padding)/2=475 border: solid 1px lime; */
.divTableCellCat {
  width:400px;
  margin:auto;
  display: table-cell;
  vertical-align:middle;
  box-sizing:border-box; 
}
/* inside the cell */
.insideCat {
  width:100%;
  margin:auto;
  display: block;
  padding-top:20px;
  padding-bottom:20px;
}
/* 2022-0104: removed width: 400px */
.imgCat {
  display:block;
  margin:auto;
  box-shadow:12px 12px 8px darkgrey;
}
.paraCat {
  display:block;
  margin:auto;
  font-size:2em;
  font-family: "Brush Script MT", "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:center;
  color: MidnightBlue;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ 
/* Section 8: SubHdg and Navigation  */
/* SubHdg div is paralleled with Nav div under WholeSubHdg */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.containerWholeSubHdg {
  margin:auto;
  width:100%;
  height:70px;
  background-color: gainsboro;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:10px;
  padding-right:5px;
  box-sizing:border-box;
}
/* 2022-1101: Set width to 100% from 60% after modified containerNav and added ccontainerDropdown */
.containerSubHdg {
  margin:auto;
  width:70%;
  float:left;
}
.paraSubHdg {
  margin:auto;
  font-size:2.5em;
  font-family: "Brush Script MT", "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:left;
  color:MidnightBlue;
}
/* Navigation */
/* Nav div is paralleled with SubHdg div under WholeSubHdg */
/* No need for WholeNav */
/* 2022-1101: Changed to float left instead of right. Set width 80% instead of 40%.  Removed bttnNav on all category webpages. containerNav shares 20% space with containerDropdown */
/* To fix Nav Bttn on webpages other than category, add containerNavButton */
.containerNav {
  width: 20%;
  float: right;
  padding-right: 35px;
}
.paraNav {
  color:MidnightBlue;
  font-size: 1.0em;
  font-family: "Snell Roundhand", "Helvetica", "Trebuchet MS", "sans-serif";
  text-align: right;
  color: MidnightBlue;
}
.containerNavButton {
  width: 37%;
  float: right;
  padding-right: 50px; /* prevent button touch the right edge */
}
/* padding 2px 5px means 2px for top and bottom and 5px for left and right */
.bttnNav {
  float: right;
  color: MidnightBlue;
  background-color:lemonchiffon; 
  border: 2px solid yellowgreen;
  padding: 2px 5px;
  text-align: left;
  text-decoration: none;
  font-size: 1.4em;
  font-family: "Snell Roundhand", "Helvetica", "Trebuchet MS", "sans-serif";
  /*  margin: 0 20px; */
  /* text-shadow: 2px 2px 1px #595959; */   
  filter: dropshadow(color=MidnightBlue, offx=1, offy=1);
  /* inset makes the shadow inward */
  box-shadow: 3px 3px 2px darkgrey, inset 0px 0px 2px green;
}
/* makes the button round */
.rounded {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
/*~~~~~~~~~*/
/* Sort By */
/*~~~~~~~~~*/
/* Sort By div is paralleled with SubHdg div under WholeSubHdg */
/* No need for WholeSortBy */
/* 2020-0614: Added sort_by */
/* 2022-1117: Saved this sort by when it is ready for dynamic query */

.containerSortBy {
  width:40%;
  margin:auto;
  float:right;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Section 9: item  */
/* Caution: display:table in containerItem is very important. */
/* Without it, the height will not be matched with generated items in wounaan-basket-tn.html */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.containerWholeItem {
  width:100%;
  margin:auto; 
  background-color:cornsilk;
  padding:20px 0;
}
.containerItem {
  width:1400px;
  margin:auto; 
  background-color: gainsboro;
  padding:20px 0px 20px 0px;
  box-shadow:12px 12px 8px darkgrey;
  display:table;
}
/* 2022-1109: Added this division to display total number of basket shown and set the id for Go To Bottom */
/*
  width:990px;
  float:left;
*/
/* divGoTo is a div below dvnWhole */
/* 2022-1109: Old name was divBackToTop.  Since want to use it for Go to Bottom too, renamed to paraGoTo;  */
/* border:solid 1px red; */
/* 2023-0713: link works only when it is tied to a division */
.containerGoTo {
  width: 100%; 
  margin: auto;
  display: block;
  padding: 15px;
}
.containerGoTo a {
  color: green;
}
.containerTotal {
  margin:auto;
  width:990px;
  float:left;
  padding: 15px;
}
/* Same width as containerHome */
.dvnWhole {
  margin:auto;
  width:1400px;
  float:left;
}
.dvn1 {
  width:466px;
  margin:auto;
  float:left;
  vertical-align:middle;
  padding: 10px 10px 10px 10px;
}
.dvn2 {
  width:466px;
  margin:auto;
  float:left;
  vertical-align:middle;
  padding: 10px 10px 10px 10px;
}
.dvn3 {
  width:466px;
  margin:auto;
  float:right;
  vertical-align:middle;
  padding: 10px 10px 10px 10px;
}
/* dvnInside is a div inside a dvn# */
.dvnInside {
  width:100%;
  margin:auto;
  padding-top:10px;
  padding-bottom:20px;
  overflow:hidden;
}
/* Keep tn round corner */
/*  border-radius:8px; */
.imgItem {
  display:block;
  margin:auto;
}
/* #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: MidnightBlue;
  padding-bottom: 10px;
}
/* 2021-0610: Add sale for price */ 
/* everything is the same paraItem but red */
.paraItemSale {
  color: red; 
}
/* 2021-0610: span is for strikethrough line on orig price */ 
.paraItemStrikeThru {
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-color: red;
}
.paraItemSold {
  display: block;
  margin: auto;
  font-size: 1.4em;
  font-family: "Lucida Handwriting", "Helvetica", "Trebuchet MS", "sans-serif";
  font-style: oblique;
  text-align: center;
  color: red; 
  padding-bottom: 10px;
}
/* 2022-1109: Old name waas paraBackToTop.  Since want to use it for Go to Bottom too, renamed to paraGoTo;  */
.linkGoTo {
  display: inline;
  margin:auto;
  font-family: "Snell Roundhand", "Helvetica", "Trebuchet MS", "sans-serif";
  font-size:1.2em;
}
.paraGoTo {
  display: inline;
  margin:auto;
  font-size:1em;
  font-family:"Rockwell","Helvetica", "Trebuchet MS", "sans-serif";
  color: MidnightBlue;
  float: right;
}
.paraTotal {
  color:MidnightBlue;
  font-size: 1.8em;
  font-family: "Snell Roundhand", "Helvetica", "Trebuchet MS", "sans-serif";
  text-align: left;
  color: MidnightBlue;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Section 10: Single Item  */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* 3 div: left is tn, middle is large photo, right is text */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* 2025-0830: for awy-big.html */
/* border: 1px solid yellow; */
.containerWholeSingle {
  background-color: gainsboro;
  padding: 20px 0;
border:solid 1px yellow;
}
.containerHdgSingle {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
border:solid 1px blue;
}
.paraHdgSingle {
  font-size: 1.5em;
  font-family: "Rockwell","Helvetica", "Trebuchet MS", "sans-serif";
  color: MidnightBlue;
border:solid 1px yellow;
}
.containerSingle {
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
}
.containerArrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  padding: 0px 30px 0px 30px;
border:solid 1px green;
}
.containerBig {
  width: 100%;
  padding: 10px 10px 10px 10px;
border:solid 1px yellow;
}
.imgArrow {
  width: 46px; 
}
.imgBig {
  width: 100%;
}
/* 2021-0610: Add sale for price */ 
/* everything is the same paraSingle but red */
.paraSingleSale {
  color: red; 
}
/* 2021-0610: span is for strikethrough line on orig price */ 
.paraSingleStrikeThru {
  text-decoration-line: line-through;
  text-decoration-style: solid;
  text-decoration-color: red;
}

/* Note: The following Tn declaration is for the Single Item Webpage */

/* Definition: shadow h-offset (neg=left) v-offset (neg=top) blur */
/* tn2 is for the single item webpage */
/* box-shadow: 6px 6px 4px var(--greylighter); */
.tn2 {
  width:200px;
  margin:auto;
}
/* no need to declare height:440px.  imgage is 550x440px */
.big {
  /* width:550px; */
  margin:auto;
  box-shadow:12px 12px 8px darkgrey;
}
/*~~~~~~~~~~~~~~~~~~~~~*/
/* Section 11: To Buy */ 
/*~~~~~~~~~~~~~~~~~~~~~*/
.containerWholeBuy {
  width:100%;
  margin:auto; 
  background-color:cornsilk;
  padding:20px 0;
}
.containerBuy {
  width:800px;
  margin:auto; 
  background-color: gainsboro;
  padding:20px 20px 80px 20px;
  box-shadow:12px 12px 8px darkgrey;
}
.containerHdgBuy {
  margin:auto;
  width:100%;
  padding:20px 0px 20px 0px;
}
.paraHdgBuy {
  margin:auto;
  font-size:3em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align:center;
  color:MidnightBlue;
}
.containerBoxBuy {
  width:100%;
  margin:auto; 
  background-color: gainsboro;
  padding:20px;
}
/* SubHdg for To Buy */
.containerSubHdgBuy {
  margin:auto;
  width:100%;
}
.paraSubHdgBuy {
  margin:auto;
  font-size:2.2em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align:left;
  color:MidnightBlue;
  padding-top:20px;
  padding-bottom:20px; 
}
.paraBuy {
  margin:auto;
  font-size:1em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:left;
  color: MidnightBlue;
  line-height:1.3;
  padding-bottom:20px;
}
.paraEmailBuy {
  font-size:1.2em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:center;
  color: MidnightBlue;
  padding-top:10px;
  padding-bottom:5px;
}
/*~~~~~~~~~~~~~~~~~~~*/
/* Section 12A: Care */ 
/* Split Care to its only section from Choose & Care */
/*~~~~~~~~~~~~~~~~~~~*/
.containerWholeCare {
  width:100%;
  margin:auto; 
  background-color:cornsilk;
  padding:20px 0;
}
.containerCare {
  width:800px;
  margin:auto; 
  background-color: gainsboro;
  padding:20px 20px 80px 20px;
  box-shadow:12px 12px 8px darkgrey;
}
.containerHdgCare {
  margin:auto;
  width:100%;
  padding:20px 0px 40px 0px;
}
.paraHdgCare {
  margin:auto;
  font-size:2.4em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align:center;
  color:MidnightBlue;
}
.containerBoxCare {
  width:100%;
  margin:auto; 
  background-color: gainsboro;
  padding:20px;
}
.paraCare {
  margin:auto;
  font-size:1em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:left;
  color: MidnightBlue;
  line-height:1.3;
  padding-bottom:20px;
}
.paraEmailCare {
  font-size:1.6em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:center;
  color: MidnightBlue;
  padding-top:50px;
  padding-bottom:20px;
}
/*~~~~~~~~~~~~~~~~~~~~*/
/* Section 12: Choose */ 
/* Split Care to its only section */
/*~~~~~~~~~~~~~~~~~~~~*/
.containerWholeChoose {
  width:100%;
  margin:auto; 
  background-color:cornsilk;
  padding:20px 0;
}
.containerChoose {
  width:800px;
  margin:auto; 
  background-color: gainsboro;
  padding:20px 20px 80px 20px;
  box-shadow:12px 12px 8px darkgrey;
}
.containerHdgChoose {
  margin:auto;
  width:100%;
  padding:20px 0px 40px 0px;
}
.paraHdgChoose {
  margin:auto;
  font-size:2.4em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align:center;
  color:MidnightBlue;
}
.containerBoxChoose {
  width:100%;
  margin:auto; 
  background-color: gainsboro;
  padding:20px;
}
/* SubHdg for Choose  */
.containerSubHdgChoose {
  margin:auto;
  width:100%;
}
.paraSubHdgChoose {
  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; 
}
.paraChoose {
  margin:auto;
  font-size:1em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:left;
  color: MidnightBlue;
  line-height:1.3;
  padding-bottom:20px;
}
/*~~~~~~~~~~~~~~~~~~~~~~*/
/* Since figure and figcaption does not work, use div */
/* Figure Div can float left or right */
.containerFigChoose {
  display:inline-block;
  padding-bottom:10px;
  /* This is for imgFigBigChoose */
  /* which will display the tn into a bigger image */
  position:relative;
} 
/* This is for the figure caption */
/* max-width is is to control the caption within the size of tn */
/* In general, it is 200px wide.  It should be in em later */
.paraFigChoose {
  font-style:italic;
  font-size:0.8em;
  color: MidnightBlue;
  text-align:center;
  max-width:200px; 
}
/* This is for the image */
.imgFigChoose {
  padding:2px;
}
/* This is to control the image on left or right */
.leftFigChoose {
  float:left;
  padding-right:10px;
}
.rightFigChoose {
  float:right;
  padding-left:10px;
}
/* End of figure div */
/*~~~~~~~~~~~~~~~~~~~*/
.paraEmailChoose {
  font-size:1.6em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:center;
  color: MidnightBlue;
  padding-top:50px;
  padding-bottom:20px;
}
/*~~~~~~~~~~~~~~~~~~~~~*/
/* Section 13: contact */ 
/*~~~~~~~~~~~~~~~~~~~~~*/
.containerWholeContact {
  width:100%;
  margin:auto; 
  background-color:cornsilk;
  padding:20px 0;
}
.containerContact {
  width:800px;
  margin:auto; 
  background-color: gainsboro;
  padding:20px 20px 80px 20px;
  box-shadow:12px 12px 8px darkgrey;
}
.containerBoxContact {
  width:400px;
  margin:auto; 
  height:300px;
  background-color: beige;
  padding:80px 0px 50px 0px;
  box-shadow:12px 12px 8px darkgrey;
}
.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:MidnightBlue;
}
.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 14: History */ 
/*~~~~~~~~~~~~~~~~~~~~~*/
.containerWholeHistory {
  width:100%;
  margin:auto; 
  background-color:cornsilk;
  padding:20px 0;
}
.containerHistory {
  width:800px;
  margin:auto; 
  background-color: gainsboro;
  padding:20px 20px 80px 20px;
  box-shadow:12px 12px 8px darkgrey;
}
.containerBoxHistory {
  width:100%;
  margin:auto; 
  background-color: gainsboro;
  padding:20px;
}
.containerHdgHistory {
  margin:auto;
  width:100%;
  padding:20px 0px 40px 0px;
}
.paraHdgHistory {
  margin:auto;
  font-size:3em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align:center;
  color:MidnightBlue;
}
.containerSubHdgHistory {
  margin:auto;
  width:100%;
  clear:both;
}
.paraSubHdgHistory {
  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; 
}
/* line-height 1.5 means 1 and half line space; 2 means double line space */
.paraHistory {
  margin:auto;
  font-size:1em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:left;
  color: MidnightBlue;
  line-height:1.3;
  padding-bottom:20px;
}
/*~~~~~~~~~~~~~~~~~~~~*/
/* Figure Declaration */ 
/*~~~~~~~~~~~~~~~~~~~~*/
.containerFigHistory {
  display:inline-block;
  padding-bottom:10px;
  /* This is for imgFigBigHistory */
  /* which will display the tn into a bigger image */
  position:relative;
} 
/* This is for the figure caption */
/* max-width is is to control the caption within the size of tn */
/* In general, it is 200px wide.  It should be in em later */
.paraFigHistory {
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  font-style:italic;
  font-size:0.8em;
  color: MidnightBlue;
  text-align:center;
  max-width:200px; 
}
/* This is for the image */
.imgFigHistory {
  padding:2px;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Section 15: Exchange and Refund */ 
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.containerWholeRefund {
  width:100%;
  margin:auto; 
  background-color:cornsilk;
  padding:20px 0;
}
.containerRefund {
  width:800px;
  margin:auto; 
  background-color: gainsboro;
  padding:20px 20px 80px 20px;
  box-shadow:12px 12px 8px darkgrey;
}
.containerHdgRefund {
  margin:auto;
  width:100%;
  padding:20px 0px 40px 0px;
}
.paraHdgRefund {
  margin:auto;
  font-size:3em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align:center;
  color:MidnightBlue;
}
.containerBoxRefund {
  width:100%;
  margin:auto; 
  background-color: gainsboro;
  padding:20px;
}
.paraRefund {
  margin:auto;
  font-size:1em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:left;
  color: MidnightBlue;
  line-height:1.3;
  padding-bottom:20px;
}
.paraCenterRefund {
  margin:auto;
  font-size:1.2em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:center;
  color: MidnightBlue;
  padding-top:20px;
  padding-bottom:12px;
}
.paraEmailRefund {
  font-size:1.2em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:center;
  color: MidnightBlue;
  padding-top:30px;
  padding-bottom:10px;
}
/*~~~~~~~~~~~~~~~~~~~~~*/
/* Section 16: Weaving */ 
/*~~~~~~~~~~~~~~~~~~~~~*/
.containerWholeWeaving {
  width:100%;
  margin:auto; 
  background-color:cornsilk;
  padding:20px 0;
}
.containerWeaving {
  width:800px;
  margin:auto; 
  background-color: gainsboro;
  padding:20px 20px 80px 20px;
  box-shadow:12px 12px 8px darkgrey;
}
.containerHdgWeaving {
  margin:auto;
  width:100%;
  padding:20px 0px 40px 0px;
}
.paraHdgWeaving {
  margin:auto;
  font-size:2.4em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align:center;
  color:MidnightBlue;
}
.containerBoxWeaving {
  width:100%;
  margin:auto; 
  background-color: gainsboro;
  padding:20px;
}
.containerSubHdgWeaving {
  margin:auto;
  width:100%;
  clear:both;
}
.paraSubHdgWeaving {
  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; 
}
.paraWeaving {
  margin:auto;
  font-size:1em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:left;
  color: MidnightBlue;
  line-height:1.3;
  padding-bottom:20px;
}
/*~~~~~~~~~~~~~~~~~~~~*/
/* Figure Declaration */ 
/*~~~~~~~~~~~~~~~~~~~~*/
.containerFigWeaving {
  display:inline-block;
  padding-bottom:10px;
  /* This is for imgFigBigWeaving */
  /* which will display the tn into a bigger image */
  position:relative;
} 
/* This is for the figure caption */
/* max-width is is to control the caption within the size of tn */
/* In general, it is 200px wide.  It should be in em later */
.paraFigWeaving {
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  font-style:italic;
  font-size:0.8em;
  color: MidnightBlue;
  text-align:center;
  max-width:200px; 
}
/* This is for the image */
.imgFigWeaving {
  padding:2px;
}
/* End of enlarge figure div */

/*~~~~~~~~~~~~~~~~~~~~~~*/
/* Section 17: About Us */ 
/*~~~~~~~~~~~~~~~~~~~~~~*/
.containerWholeAbout {
  width:100%;
  margin:auto; 
  background-color:cornsilk;
  padding:20px 0;
}
.containerAbout {
  width:800px;
  margin:auto; 
  background-color: gainsboro;
  padding:20px 20px 80px 20px;
  box-shadow:12px 12px 8px darkgrey;
}
.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: gainsboro;
  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;
}
/*~~~~~~~~~~~~~~~~~~~~*/
/* Figure Declaration */ 
/*~~~~~~~~~~~~~~~~~~~~*/
.containerFigAbout {
  display:inline-block;
  padding-bottom:10px;
  /* This is for imgFigBigAbout */
  /* which will display the tn into a bigger image */
  position:relative;
} 
/* This is for the figure caption */
/* max-width is is to control the caption within the size of tn */
/* In general, it is 200px wide.  It should be in em later */
.paraFigAbout {
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  font-style:italic;
  font-size:0.8em;
  color: MidnightBlue;
  text-align:center;
  max-width:200px; 
}
/* This is for the image */
.imgFigAbout {
  padding:2px;
}
/* End of enlarge figure div */

/*~~~~~~~~~~~~~~~~~~~~~*/
/* Section 18: Add to Cart link or buy now button and add to wish list */ 
/* containerAddToCart holds Add To Cart button in every category webpages */
/* Including checkout process */
/*  border:solid 1px red; */
/*~~~~~~~~~~~~~~~~~~~~~*/
.containerAddToCart {
  width:100%;
  margin:auto;
}
.containerAddToCart a:link {
  color: black; 
  background-color: cornsilk; 
  padding: 2px 20px;
  font-size: 1em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-decoration: none;
  box-shadow: 5px 2px 8px darkgrey;
  border-radius: 10px;
  border: solid 1px cornsilkenRod; 
}
.paraShopCart {
  font-size: 1.2em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  line-height: 1em; 
  padding-top: 1em;
}
/* 2023-1122: Resize image so that it will not display as big as on item page */
.imgCart {
  width: 100px;
  height: 80px;
}
/* collapse means no double  borders */
/*  border: 1px solid red; */
.tblCart table, th, td {
  border-collapse: collapse;
}
.containerAddToWishList {
  width:100%;
  margin:auto;
}
.containerAddToWishList a:link {
  color: black; 
  background-color: MediumPurple; 
  padding: 2px 20px;
  font-size: 1em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-decoration: none;
  box-shadow: 5px 2px 8px darkgrey;
  border-radius: 10px;
  border: solid 1px cornsilkenRod; 
}
.paraShopCart {
  font-size: 1.2em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  line-height: 1em; 
  padding-top: 1em;
}
.paraWishList a:link {
  display:block;
  margin:auto;
  background-color: blue; 
  padding: 2px 20px;
  font-size: 1em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-decoration: none;
  text-align:center;
  color: MidnightBlue;
  padding-bottom:10px;
  box-shadow: 5px 2px 8px darkgrey;
  border-radius: 10px;
  border: solid 1px cornsilkenRod; 
}

.containerEmptyCart {
  width: 100%;
  margin: auto;
  padding: 50px 50px 50px 50px; 
}
.paraEmptyCart {
  font-size: 1.5em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  line-height: 2.0em;
}
/* Submit button Update Quantities in cart.html */
.containerUpdateQuantities {
  width: 10em;
  margin:auto;
  overflow:hidden;
  padding-top:5px;
  padding-bottom:5px;
}
.bttnUpdateQuantities {
  font-size:1em;
  font-family: "Helvetica", "Arial", "sans-serif";
  padding: 5px;
  border-radius: 5px;
  background-color: yellow;
  box-shadow: 5px 5px 3px grey;
}
/* Check out button (actually a href ) in cart.html */
.containerCartCheckout {
  width: 10em;
  margin: auto;
  overflow: hidden;
  color: black; 
  background-color: springgreen;
  padding: 10px 20px;
  text-decoration: none;
  box-shadow: 5px 5px 8px darkgrey;
  border-radius: 5px;
}
.paraCartCheckout {
  font-size: 1.5em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
}
/* Submit button Contiune onto Billing in checkout.html */
.containerContinueOnto {
  width: 10em;
  margin:auto;
  overflow:hidden;
  padding-top:5px;
  padding-bottom:5px;
}
.bttnContinueOnto {
  font-size:1em;
  font-family: "Helvetica", "Arial", "sans-serif";
  padding: 5px;
  border-radius: 5px;
  background-color: yellow;
  box-shadow: 5px 5px 3px grey;
}
.formCheckOut {
 padding-top: 20px;
}
/*~~~~~~~~~~~~~~~~~~~~~*/
/* Section 19: Error */ 
/*~~~~~~~~~~~~~~~~~~~~~*/
.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 20: General Informational page such as success and 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 style.css */
/*~~~~~~~~~~~~~~~~~~*/