/*~~~~~~~~~~~~*/
/* baa-style.css */
/* Created at 2025-08-13T02:39:07-07:00 */
/*~~~~~~~~~~~~*/
/* CAUTION: // is not a valid comment for css and it will not be shown as error.  It will create rare layout on the page */
/*~~~~~~~~~~~~*/

/* 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 0: 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 {
  background:url(../images/rainforest-corner.jpg) center top repeat-x #395d10;
  font-family:Tahoma, Geneva, sans-serif;
  font-size:100%;
  line-height:1em; 
  color:MidnightBlue;
}
/* put viewport here even already in meta data on html head */
@viewport {
  zoom:1.0;
  width:device-width;
}
/* Links. 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;
}
/*~~~~~~~~~~~~*/
/* This is to control the image on left or right */
/* Section 1: 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. */
.containerWholePage {
  width:100%;
  background:url(../images/rainforest-corner.jpg) center top repeat-x azure;
  font-family:Tahoma, Geneva, sans-serif;
  font-size:100%;
  line-height:1em; 
  color:MidnightBlue;
}
/* .wrapper { width:100%; overflow:hidden;} */
.wrapper {
  width:100%; 
  overflow:visible;
}
 */2024-0713: Center the line join slogan2 and slogan3 */
.containerCenter {
  display:block;
  margin:auto;
}
/* 2024-0702: Removed welcome style.  Add this to paraHdgFancy if only slogan1 exists.  Add did not work, replace it with this class */
/* 2022-0205: Added this for Valentine's day sale */
/* 
  font-size:3.2em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif"; 
  font-style: italic;
 */
.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 2: 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 */
/*~~~~~~~~~~~~*/

.containerSignboard {
  height:239px;
  width:990px;
  margin:auto;
  background:url(../images/rainforest-bg.jpg) no-repeat center top #fbb046;
  padding-top:80px;
  padding-bottom:50px;
  box-sizing:border-box; 
}
/* Organization Name */
/* orgName used in home page as Have you seen ~ */
/* orgName and orgName2 used in home page as from the Darien ~ */
/* orgName and orgName3 used in home page as Presented by ~ */
/* tomato color hex #ff6347 */
/* 2020-0117: fc4a04 is deeper than tomato color; I like this but it does stand out as much as #fc3e04 */
/* 2020-0210: Tested 2nd font:  Chose Times New Roman from 15 popular font */
.orgName  {
  font-family: "Zapfino", "Times New Roman", "Trebuchet MS", "sans-serif";
  font-size: 2.6em;
  font-style: italic;
  text-align: center;
  font-weight: 900;
  color: #fc3e04; 
}
.orgName2 {
  font-size: 1.6em;
  font-weight: bold;
  padding-top:20px;
}
.orgName3 {
  font-size: 0.9em;
  text-align:right;
  padding-top:20px;
  padding-right:200px;
}
/*~~~~~~~~~~~~*/
/* Section 3: Menu */
/* This is used by every page. */
/*~~~~~~~~~~~~*/
.containerWholeMenu {
  width:100%;
  background-color: beige;
  padding-top:10px;
  padding-bottom:5px;
}
.containerMenu {
  margin:auto;
  width:80%;
  max-width:990px;
  background-color: beige;
}
.containerMenu a:link {
  color: blue; 
}
/* #d16504 is like gold 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: azure;
  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 gold 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 gold 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 4: MenuBase - Menu at the bottom of page */
/* 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; */
/* #395d10 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 */
.containerWholeHome {
  width: 100%;
  margin:auto; 
  overflow:hidden;
  background-color:azure;
  padding:20px 0;
}
/* width: 936 */
.containerHome {
  width: 980px; 
  margin: auto; 
}

/* Home-bg.jpg size was 990x624px */
/* wounaan-weavers.jpg size is 836x624px */
/* box-shadow:12px 12px 8px darkgrey; */
.containerHomeBg {
  width: 936px;
  height: 624px;
  margin: auto; 
/*
  margin-top: -5px;
  margin-left: 20px;
*/
  background:url(../images/wounaan-weavers.jpg) no-repeat center -1px azure;
}

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

/* Standard Heading used on the Sale Box */

h1 { background:url(../images/logo.png) no-repeat left top; padding:8px 0 10px 66px; font-family:Verdana, Geneva, sans-serif; font-size:40px; line-height:1em;}
h1 a { display:block; text-decoration:none; color:#ffe7be; padding-bottom:6px;}
h1 span { display:block; font-size:14px; line-height:1.1em; color:#ffd26e; text-transform:uppercase; letter-spacing:-1px;}
h2 { font-family:Verdana, Geneva, sans-serif; font-size:3em; line-height:1em; color:#03207f; font-weight:normal; margin-bottom:12px;}
h3 { font-family:Verdana, Geneva, sans-serif; font-size:2.08em; line-height:1em; font-weight:normal; letter-spacing:-1px; color:#03207f; margin-bottom:22px;}
h4 {font-family:Verdana, Geneva, sans-serif; font-size:1.5em; line-height:1em; font-weight:normal;}
h5 { font-size:1em; color:#03207f; margin-bottom:4px;}
h5 a { text-decoration:none;}
h5 a:hover { text-decoration:underline;}
h6 { font-size:.91em;}

/* Boxes on Home Page */
/* border:solid 1px black; */
/* 2022-1113: Keep containerWelcome for sale message. Added a height to hold the space */ 
.containerWelcome {
  width: 980px;
  margin: auto;
/*
  margin-left:-25px;
  margin-top:-10px;
*/
  height: 100px;
  background-color:azure;
}
.box2 {
  width:300px;
  margin-left:599px;
  margin-top:-150px;
}
.box3 {
  width:400px;
  margin-left:500px;
  margin-top:410px;
  margin-bottom:0px;
}

/* Makes round corner boxes by pasting images together */

.box .left-top-corner { background:url(../images/left-top-corner.png) no-repeat left top; padding-left:18px;}
.box .right-top-corner { background:url(../images/right-top-corner.png) no-repeat right top; padding-right:3px;}
.box .border-top { background:url(../images/border-top.png) left top repeat-x; height:18px; overflow:hidden; font-size:0; line-height:0;}
.box .border-left { background:url(../images/border-left.png) left top repeat-y; padding-left:1px;}
.box .border-right { background:url(../images/border-right.png) right top repeat-y; padding-right:3px;}
.box .left-bot-corner { background:url(../images/left-bot-corner.png) no-repeat left top; padding-left:1px;}
.box .right-bot-corner { background:url(../images/right-bot-corner.png) no-repeat right top; padding-right:18px;}
.box .border-bot { background:url(../images/border-bot.png) left top repeat-x; height:18px; overflow:hidden; font-size:0; line-height:0;}
.box .inner { padding:1px 20px 1px 20px; background:url(../images/box-bg.png) left top; }
/*~~~~~~~~~~~~~~~~*/
/* 2020-0206: Added slideshow (front and bottom view side by side) on the home page */
/* 2020-0207: Just try with front view only */
/* box-shadow: none|h-offset v-offset blur spread color  */
/* border-radius:8px; round the corner */
/* 2020-0610: Add 4 slides within one slide box */
/* Total 2 slides across plus spacing is 580px */
/* Total 2 slides down plus spacing is 470 */
/*~~~~~~~~~~~~~~~~*/
/* containerHomeSlide is the big box cover the bg painting, wounaan-weaver.jpg */
/* wounaan-weavers.jpg size is 836x624px but it was covered by scallop edges */
/* Therefore, containerHomeSlide width is 836x550 which randomly tested to see what size will cover the bg painting */
/* box-bg.png gives the transparent or gray look */
/*  margin-top:-1px; */
.containerHomeSlide {
  margin: auto;
  width: 936px; 
  height: 650px;
/*
  margin-left: -100px;
  margin-top: -700px;
*/
  position: relative;
  border-radius: 8px;
  padding: 1px;
  background-color: azure;
  box-shadow: 3px 3px 2px darkgrey;
/*
  overflow:hidden;
*/
  background: url(../images/box-bg.png) left top;
  display: none;
}
/* containerHS0 is the base container for HS1,2,3,4 */
/* width = imgHomeSlide width + 3px */
/* heigh = imgHomeSlide heigh + 3px */
:root {
  --imgHomeSlideWid:325px;
  --imgHomeSlideHgt:260px;
}
.containerHS0 {
  width:calc(var(--imgHomeSlideWid) + 3px);
  height:calc(var(--imgHomeSlideHgt) + 3px);
  border-radius:8px;
  padding: 3px;
  box-shadow:3px 3px 2px darkgrey;
/*
  overflow:hidden;
*/
  display:none;
}
/* hsx1 is the left corner of slide box 1 (upper left */
/* hsy1 is the top corner of slide box 1 */
/* hsx2 is the left corner of slide box 2 (upper right) */
/* hsy1 is the top corner of slide box 2 but not being used */
/* because slide box 3 is fixed by default position is static to normal place */
:root {
/*
  --hsx1:65px;
  --hsy1:5px;
  --hsx2:435px;
  --hsy2:230px;
*/
  --hsx1:88px;
  --hsy1:25px;
  --hsx2:508px;
  --hsy2:230px;
} 
.containerHS1 {
  float:left;
  margin-left:var(--hsx1);
  margin-top:var(--hsy1);
}
.containerHS2 {
  position:relative;
  margin-left:var(--hsx2);
  margin-top:var(--hsy1);
}
.containerHS3 {
  float:left;
  margin-left:var(--hsx1);
  margin-top:var(--hsy1);
}
.containerHS4 {
  position:relative;
  margin-left:var(--hsx2);
  margin-top:var(--hsy1);
}
/* Tn size width:275px; height:220px; */
/* Slightly bigger than tn: 325 x 260 px */
/* See defined var above */
.imgHomeSlide {
  width:var(--imgHomeSlideWid);
  height:var(--imgHomeSlideHgt);
  border-radius:8px;
}
/* 2024-1121: Added sale text */
.containerHSTxt {
  float:left;
  margin-left:var(--hsx1);
  margin-top:var(--hsy1);
}
/* 2024-0708: Added this to put sale text to a specific basket i.e. 8871 */
/*
  transform: translate(-100%, -100%); 
  transform: rotate(45);
*/
.containerOverlay1 {
  position: absolute;
  top: 28%; 
  left: 20%; 
}
.containerOverlay2 {
  position: absolute;
  top: 78%; 
  left: 20%; 
}
.containerOrigLeft {
  display: in-line;
  float: left;
}
.containerOrigRight {
  display: in-line;
  float: right;
}
.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;
}
/* 2024-0818: Added wb grp with price img and shop sale button */
/* Center image and button vertically and horizonally flex */

.containerHomeSale {
  width: inherit; 
  height: 622px;
/*
  margin-left:-3px;
  margin-top: 0px;
*/
  margin: auto;
  position: relative;
  border-radius:8px;
  padding: 1px;
  background-color:azure;
  box-shadow:3px 3px 2px darkgrey;
  overflow:hidden;
  background:url(../images/box-bg.png) left top;
  display: block;
}
.containerShopSale {
  width: 80%;
  margin-left: 10%;
  margin-top: 25px;
  display: block flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.containerShopSaleImg {
  padding-bottom: 1px;
}
.containerShopSaleBttn {
  padding: 20px;
}
/* Create button as a link or use div */
/* when use border, it remove button 3d look */
.bttnShopSale {
  font-family: "Rockwell", "Arial", "Trebuchet MS", "sans-serif";
  font-size: 1.5em;
  letter-spacing:0.15em;
  text-align: center;
  color: white;
  background-color: aqua;
  padding: 15px 15px 5px 15px;
  border: 1px solid white; 
}


/* 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; */
/* #395d10 is the green color which is background color. */
.containerWholeFooter {
  width:100%;
  margin:auto;
  background-color:#395d10;
  box-sizing:border-box; 
}
.containerFooter {
  width:990px;
  height:56px;
  margin:auto;
  background-color:#395d10;
}
/* 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.6em;
  color:lightgoldenrodyellow;
  padding-top:30px;
  padding-bottom:10px;
  padding-left:100px;
}
.containerFooterRght {
  float:right;
  font-family: "Zapfino", "Helvetica", "Trebuchet MS", "sans-serif";
  font-size:0.6em;
  color:lightgoldenrodyellow;
  padding-top:30px;
  padding-bottom:10px;
  padding-right:100px;
}
.containerFooterRght a:link {
  color: red; 
  letter-spacing:0.2em;
}
.containerFooterRght a:visited {
  color: red; 
  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:azure;
  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:100%;
  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: 63%;
  float: left;
}
.paraNav {
  color:MidnightBlue;
  font-size: 1.4em;
  font-family: "Snell Roundhand", "Helvetica", "Trebuchet MS", "sans-serif";
  text-align: left;
  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:azure;
  padding:20px 0;
}
.containerItem {
  width:990px;
  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;
}
.dvnWhole {
  margin:auto;
  width:990px;
  float:left;
}
.dvn1 {
  width:316px;
  margin:auto;
  float:left;
  vertical-align:middle;
}
.dvn2 {
  width:316px;
  margin:auto;
  float:left;
  vertical-align:middle;
}
.dvn3 {
  width:316px;
  height:255px;
  margin:auto;
  float:left;
  vertical-align:middle;
  padding-top:10px;
}
/* dvnInside is a div inside a dvn# */
.dvnInside {
  width:100%;
  margin:auto;
  padding-top:10px;
  padding-bottom:20px;
  overflow:hidden;
}
/* 2020-0213: keep tn 275x220 by setting the width to 275. Take out width later after regenerated all tn */
.imgItem {
  display:block;
  margin:auto;
  border-radius:8px;
  box-shadow:8px 8px 5px darkgrey;
}

/* #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;
}
/* 2025-0601: Added the "NEW" word to new item */
.paraItemNew {
  font-family: "Snell Roundhand", "Helvetica", "Trebuchet MS", "sans-serif";
  font-size: 1.8em;
  color: red;
  font-style: italic;
}
/* 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:1.2em;
  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 */
.containerWholeSingle {
  width:100%;
  margin:auto; 
  min-height:680px;
  background-color:azure;
  padding:20px 0;
}
/* increase width to 1000 from 990 */
.containerSingle {
  width: 1000px; 
  margin: auto; 
  background-color: gainsboro;
  padding-top:20px;
}
/* tn2 width is 200, with padding and scrollbar 220px width is sufficient */
.containerTn {
  width:225px; 
  height:550px;
  margin:auto;
  float:left;
  background-color: gainsboro;
  overflow:scroll;
  padding-left:10px;
}
/* big width is 550, with 10px padding and 8px blur, 568px is sufficient */ 
.containerBig {
  width:572px;
  height:550px;
  margin: auto;
  float:left;
  background-color: gainsboro;
  overflow: hidden;
  padding-left:10px;
}
/* 1000-572-225=203 */
.containerTxt {
  width:203px;
  height:550px;
  margin: auto;
  float:left;
  background-color: gainsboro;
  overflow: auto;
  padding-top:50px;
}
.paraSingle {
  margin:auto;
  font-size:1.1em;
  font-family: "Rockwell","Helvetica", "Trebuchet MS", "sans-serif";
  text-align:center;
  color: MidnightBlue;
  padding-bottom: 10px;
}
.paraSingleNew {
  color: red; 
}
.paraSubHdgNew {
  color: red; 
}
/* 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: Buy */
/*~~~~~~~~~~~~*/
.containerWholeBuy {
  width:100%;
  margin:auto; 
  background-color:azure;
  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 12: Care */
/* Split Care to its only section from Choose & Care */
/*~~~~~~~~~~~~*/
.containerWholeCare {
  width:100%;
  margin:auto; 
  background-color:azure;
  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 13: Choose */
/* Split Care to its only section */
/*~~~~~~~~~~~~*/
.containerWholeChoose {
  width:100%;
  margin:auto; 
  background-color:azure;
  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 14: Contact */
/*~~~~~~~~~~~~*/
.containerWholeContact {
  width:100%;
  margin:auto; 
  background-color:azure;
  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 15: History */
/*~~~~~~~~~~~~*/
.containerWholeHistory {
  width:100%;
  margin:auto; 
  background-color:azure;
  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 16: Exchange and Refund */
/*~~~~~~~~~~~~*/
.containerWholeRefund {
  width:100%;
  margin:auto; 
  background-color:azure;
  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 17: Weaving */
/*~~~~~~~~~~~~*/
.containerWholeWeaving {
  width:100%;
  margin:auto; 
  background-color:azure;
  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 18: About Us */
/*~~~~~~~~~~~~*/
.containerWholeAbout {
  width:100%;
  margin:auto; 
  background-color:azure;
  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 19: 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: gold; 
  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 GoldenRod; 
}
.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 GoldenRod; 
}
.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 GoldenRod; 
}

.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 20: Error */
/*~~~~~~~~~~~~*/
.containerWholeError {
  width:100%;
  margin:auto; 
  background-color:azure;
  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 21: General Informational page such as success and cancel */
/*~~~~~~~~~~~~*/
.containerWholeInform {
  width:100%;
  margin:auto; 
  background-color:azure;
  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 */
/*~~~~~~~~~~~~~~~~~~*/