#shopcontainer { /*center the main block to 70 percent of browser width */
  width:75%;
  margin:0 auto;
  font-weight:normal;
  font-family: Arial, san serif;
  font-size: 100%;
  border:0px solid red;
}

#shopcolumnholder { /* Define grid structure within shopcontainer */
  display: grid;  /* Defines the layout: one top row spanning two columns, and a second row with two columns */
  grid-template-columns: 1.5fr 1fr; /* Two columns - define different widths */
  gap: 0px; /* Adds space between all grid items */
  padding: 5px;
  width:85%;
  margin: 0 auto;
  border: 0px solid black;
}

.shopbannerholder { /*hold a banner or band names with item types in text */
  grid-column: span 2; /* Makes the top div span across both columns */
  text-align:left;
  margin: 20px 0 0 0;

border: 0px solid black;
}
.shopbannerholder .h4banner h4 {  /*band names and item types in text */
  width: fit-content;
  padding: 2px 10px;
  background-color: #eeeeee;
}
.shopbannerholder .shopbanner { /* define look of banner if text */
  font-size:160%;
  font-weight: bold;
  font-family: 'Times Roman', serif;
  color: #000000;
  text-transform:uppercase;
    line-height:normal;
}

.shopleftcolumn { /* define the left column which holds all the text and form content */
  margin:20px 0;
  padding-bottom: 40px;
  text-align: left;
  border-bottom: 1px dotted black;
}
.shopitemname { /* define name of the item being sold */
  font-weight:bold;
  margin-bottom:20px;
  font-family:'Times Roman', serif;
  line-height:100%;
  color: #000000;
  font-size: 90%;
}

.shopenlargeimageholder { /* space around the enlarge image button and controls */
  margin-bottom: 20px;
}
button { /* enlarge image button */
  font-size:70%;
  cursor: pointer;
}

.shoptitemdetails{ /* the actual look of the details */
  line-height:150%;
  letter-spacing:.2em;
  font-size:70%;
  margin: 15px 0 20px 0;
}

.shopmessageformholder { /* holds jstl and the form */
  margin-bottom:20px;
}
.shopmessageholder { /* holds the message from the servlet */
  margin-bottom:20px;
}
.shopmessage{ /* formatting of the message from the servlet */
  font-weight:bold;
  width: fit-content;
  font-family: Arial, san serif;
  font-size:60%;
  margin:15px 0 20px 0;
  padding:0 10px;
  color: #666600;
  background: #f4f4dd;
  border:1px dotted #999999;
}
.shopform { /* create space above all forms */
  margin-top:20px;
}
select{ /* text size on all browser created select buttons */
  font-size: 70%;
  cursor: pointer;
}
.shopshirtsizes { /* used for display of shirt sizes when there are limited sizes available */
  appearance: none;
  background-color: #990000;
  color: #ffffff;
  border: 1px solid #eeeeee;
  padding: 2px 5px;
  font-size: 70%;
  font-weight:bold;
  margin-top: 10px;
  width: fit-content;
  cursor: pointer;
}

.shopqtybox { /* format the qty box for selection of a one off item */
  height:16px;
  width:12px;
  font-size:70%;
  padding:0;
  text-align: center;
}

.shopitemdesc{ /* text description of an item usually found at the bottom of the left column */
  font-weight:normal;
  font-size:80%;
  font-family: Arial, san serif;
  text-align:justify;
}

.shoprightcolumn { /* define a column to hold a centered image in the right column */
  margin:20px 0;
  padding-bottom: 40px;
  border-bottom: 1px dotted black;
  text-align: center; 
}

/* for presale formatting of t-shirt sizes */
#shop-popup { /* look of the initially hidden pop-up window */
  display: none;
  position: absolute; /* Positions the popup relative to its nearest positioned ancestor */
  background-color: #efefef;
  color: #000000;
  border: 1px solid #000;
  padding: 0 5px;
  z-index: 100;
  width: fit-content;
  font-size: 80%;
}
#shop-hover-popup:hover + #shop-popup { /* State on hover: Show the popup */
  display: block; /* Makes the popup visible */
}
#shop-hover-popup {  /* what the popup trigger looks like */
  cursor: pointer;
  color: #fff;
  background-color: #000;
  width: fit-content;
  margin-top: 10px;
  font-size: 70%;
  padding: 0 5px;
  letter-spacing: 0.7px;
}
.popup-right-align {
  text-align: right;
}

 /* for random links found across the page */
A.shopmenu:link, A.shopmenu:visited, A.shopmenu:active {
  color: #000000;
}
a.shopmenu:hover {
  color:#990000;
  background-color: transparent;
} /* for random links found across the page */

.shopfooter {
  grid-column: span 2; /* Makes the top div span across both columns */
  background-color: white;
  padding: 10px;
}