/*~~~~~~~~~~~*/
/* style.css */
/*~~~~~~~~~~~*/
/* CAUTION: // is NOT a valid comment for css and it does not show as */
/* compilation problem.  It will create rare layout on the page  */
/*~~~~~~~~~~~*/
/* 2019-0609: Created  */
/* 2019-1010: changed link color to DarkOrange #d16504 or d165e04. */
/* 2020-0103: Removed footer id and bg image */
/* 2020-0203: Added about us */
/* 2020-0206: Added slideshow on the home page */
/* 2020-0213: keep tn 275x220 by setting the width to 275. Take out width later after regenerated all tn */
/* 2020-0214: slideshow set ot 275x220px */ 
/* 2020-0215: Removed containerBigFigAbout etc */
/* 2020-0223: Incorporated changes reviewed by Geogia */
/* 2020-0610: Added containerHS0 to 4 for 4 slide boxes */
/* 2020-0614: Added sort_by */
/* 2021-0610: Added sale for price */
/* 2021-0611: Added sale for home webpage */
/* 2022-0104: Removed imgCat width: 400px */
/* 2022-0205: Added new class similar to welcome class for Valentine's day sale */
/* 2022-0315: Changed containerSubHdg to 59% instead of 60% so that when I put a border on it will not pushed to 100 and over-spilled.  Same for Container Nav div */
/* 2022-0819: Changed header to signboard */
/* 2022-1031: Added dropdown style for category dropdown menu to see different order by html files */
/* 2022-1109: Added containerTotal to display a message of total baskets shown and also set id = pageBottom for Go to Bottom */
/* 2022-1112: Added containerDropdownHome for browse baskets by category */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* 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 {
  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 */
a {color:#d16504; outline:none;}
a:hover{text-decoration:none;}
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  */
/* 2021-0611: Modified paraHdgSale */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* #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;
}
.paraHdgSale {
  margin:auto;
  font-size:1em;
  font-family:"Rockwell","Helvetica", "Trebuchet MS", "sans-serif";
  font-style: italic;
  text-align: left;
  color:red;
  padding-bottom: 15px;
}
.paraHdgWelcome {
  display:block;
  margin:auto;
  font-size:2.2em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align: center;
  color:MidnightBlue;
  padding-bottom: 15px;
}
.paraWelcome {
  display:block;
  margin:auto;
  font-size:1em;
  font-family: "papyrus", "Helvetica", "Trebuchet MS", "sans-serif";
  font-style: italic;
  text-align: center;
  line-height: 1.2em;
  color: MidnightBlue;
}
/* 2022-0205: Added this for Valentine's day sale */
.paraHdgFancy {
  display: inline-block;
  margin:auto;
  font-size:3.2em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  text-align: center;
  color:red;
  padding-bottom: 15px;
  padding-right: 50px;
  padding-left: 50px;
  z-index: 1;
}
.paraFancy {
  display: inline-block;
  margin:auto;
  font-size:2.2em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  font-style: italic;
  text-align: center;
  line-height: 1.2em;
  padding-right: 25px;
  color: red;
  z-index: 1;
}
.paraFancySmall {
  display: inline-block;
  margin:auto;
  font-size: 1.4em;
  font-family: "Brush Script MT", "Arial", "Trebuchet MS", "sans-serif";
  font-style: italic;
  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 */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.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 4: 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; 
}
.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;
}
/* 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; */
/* #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;
}

/* Home-bg.jpg size was 990x624px */
/* wounaan-weavers.jpg size is 836x624px */
/* box-shadow:12px 12px 8px darkgrey; */
.containerHome {
  width:836px; 
  height:624px;
  margin:auto; 
  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:880px;
  margin-left:-25px;
  margin-top:-10px;
  height: 70px;
  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 look */
.containerHomeSlide {
  width:836px;
  height:550px;
  margin-left:-3px;
  margin-top:-1px;
  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;
} 
.containerHS1 {
  float:left;
  margin-left:var(--hsx1);
  margin-top:var(--hsy1);
}
.containerHS2 {
  postition:relative;
  margin-left:var(--hsx2);
  margin-top:var(--hsy1);
}
.containerHS3 {
  float:left;
  margin-left:var(--hsx1);
  margin-top:var(--hsy1);
}
.containerHS4 {
  postition: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;
}
/* 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; */
.containerGoTo {
  width: 100%; 
  margin: auto;
  display: block;
  padding: 15px;
}
.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:25px;
}
/* dvnInside is a div inside a dvn# */
.dvnInside {
  width:100%;
  margin:auto;
  padding-top:20px;
  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;
}
/* 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;
}
/* 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;
  color: green;
}
.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: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:center;
  color: MidnightBlue;
  padding-bottom:8px;
}
/* 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: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 12A: 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 12: 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 13: 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 14: 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 15: 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 16: 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 17: 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 18: 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 {
  margin:auto;
  font-size:1.6em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:left;
  color: MidnightBlue;
  line-height:1.6em; 
}
.paraEmailError {
  font-size:1.6em;
  font-family: "Helvetica", "Trebuchet MS", "sans-serif";
  text-align:center;
  color: MidnightBlue;
  padding-top:20px;
  padding-bottom:10px;
}
/*~~~~~~~~~~~~~~~~~~*/
/* End of style.css */
/*~~~~~~~~~~~~~~~~~~*/