html {  overflow:scroll}
body {
  margin: 0
  font-family: Arial, Helvetica, sans-serif;
  background:rgb(243 245 225);;
  color:rgb(127,45,94);
  font-family:sans-serif;
}
h2 {margin:15px 0 5px 0}
a {
 text-decoration:none;
 color:rgb(127,45,94)
}
div {box-sizing:border-box}

.wrapper {
  max-width:1024px;
  margin:0 auto 0 auto;
  padding:0 10px 0 10px
}



/* top Nav stuff */

.topnav {
  overflow: hidden;
}

.topnav a {
  display: inline-block;
  color: color:rgb(127,45,94);
  text-align: center;
  padding: 44px 32px 44px 0;
  text-decoration: none;
  font-size: 24px;
  vertical-align:bottom
}
.topnav a:hover {color: darkred;}
.topnav a.active { color: red;}
.topnav .icon {display: none;}
.topnav a.homeimage {padding:2px}
.homeimage img {max-width:calc(100% - 100px);width:721px}

@media screen and (max-width: 600px) {
 .topnav a:not(.homeimage) {display: none;}
 .topnav a.icon {float: right;display: block;}
 .topnav a:not(.icon) { padding: 14px 26px;}
 .topnav a.homeimage {padding:2px}
 }
@media screen and (max-width: 600px) {
  .topnav.showMobileMenu {position: relative;}
  .topnav.showMobileMenu .icon {position: absolute;right: 0;top: 0;}
  .topnav.showMobileMenu a {float: none;display: block;text-align: left;
  }
}


/* product grid display stuff */
.product {position:relative}
img {width:100%;border-radius:3px}
.productInfo {display:table;width:100%;padding:5px 2px 0 2px}
.productInfo .title {display:table-cell;text-align:left}
.productInfo .price {display:table-cell;text-align:right}
.product .productImage img {width:100%;border-radius:3px;}

.productImage {position:relative}
.productImage:after {content:'ORDER';display:block;padding:5px;position:absolute;right:0;top:0;border-radius:0 0 0 5px;background:rgb(131, 110, 80,.5);color:#fff;font-size:70%}
.product:hover .productImage:after {background:rgb(0, 32, 69,.5)}

.product {cursor:pointer}

@media screen and (min-width: 600.1px) {
.products {margin:0 -15px}
.product {width:307px;display:inline-block;min-width:307x;margin:10px;padding:5px;cursor:pointer;border:1px solid transparent}
.productImage {width:307px;height:307px;overflow:hidden}
.product:hover {border:1px solid #aaa;border-radius:5px;box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3019607843), 0px 4px 8px 3px rgba(0, 0, 0, 0.1490196078);}
}
@media screen and (max-width: 600px) {
.product {width:100%;display:block;margin:10px 0 26px 0;padding:5px 0}
}


.quantity0 .productInfo,.quantity0 .productImage{opacity:.5}
.soldout {display:none}
.quantity0	 .soldout {display:block;position:absolute;top:calc(50% - 1em);width:100%;text-align:center;z-index:30;font-size:2em;color:darkred}

.hide {display:none}


.categories .category {display:inline-block;width:120px;padding:10px;background:rgb(131, 110, 80);color:#fff;text-align:center;margin-left:5px;border-radius:5px 5px 0 0}
.categories .category:hover {background:rgb(0, 32, 69)}
.categories a.category {text-decoration:none}
.categories .category.active {background:rgb(229, 116, 189)}
.categories {border-bottom:2px solid rgb(229, 116, 189)}


.button {display:inline-block;width:150px;padding:10px;background:rgb(127,45,94);color:#fff;text-align:center;border-radius:5px }



/* order page stuff */
.order {max-width:350px}

.img2 {display:none}
@media screen and (min-width: 600.1px) {
.oproductImage {width:50%;float:right}
.img2 {display:block}
}
@media screen and (max-width: 600px) {
#order .oproductImage {position:relative}
#order .oproductImage:after {content:'>';position:absolute;top:calc(50% - 1em);right:10px;z-index:100;color:white;font-size:2em;}
#order .oproductImage:before {content:'<';position:absolute;top:calc(50% - 1em);left:10px;z-index:100;color:white;font-size:2em;}
}
label,.label {width:100px;display:inline-block}

input[type=checkbox] {vertical-align:top}
label[for=iagree]{display:inline}
select,input[type=text],input[type=email] {padding:10px;width:240px;box-sizing:border-box;background:#fff;border:1px solid #555;border-radius:3px}
textarea {padding:10px;width:220px;height:50px}
.order .button {width:240px;border-style:none;cursor:pointer}
.order div {padding:3px 2px}
.order .description {margin-bottom:10px;font-style:italic}
@media screen and (max-width: 800px) {label {display:block}.order .button {margin-left:0px;} }


.errtext {background: #fff;
  color: rgb(150, 30, 26);
  padding: 20px;
  box-shadow: rgba(249, 224, 221, 0.25) 0px 30px 60px -12px inset, rgba(247, 221, 218, 0.25) 0px 18px 36px -18px inset;
  border: 1px solid #B88282 !important;
  margin-bottom:10px
}
#submitContainer {text-align:center}
#iagreeContainer.highlight {border-radius:3px;padding:3px;color:rgb(150, 30, 26);}
#iagreeContainer.highlight,
.highlight input,.highlight select{
  border: 1px solid #B88282 !important;
  box-shadow: rgba(247, 232, 230, 0.25) 0px 30px 60px -12px inset, rgba(247, 232, 230, 0.3) 0px 18px 36px -18px inset;}



/* admin page stuff */


#padmin div {padding:2px 0}
.aproducts {border-collapse:collapse}
.aproducts td {padding:5px;border:1px solid #555}
.btn {background:rgb(0, 32, 69);color:#fff;border-radius:3px;padding:3px;min-width:40px;display:inline-block;text-align:center;border:none}
#padmin input[type=text] {width:370px;border:solid 1px #555;box-sizing:border-box}
#padmin textarea {width:360px;height:80px;border-radius:3px;padding:3px;border:solid 1px #555;box-sizing:border-box}
#padmin label {text-transform:capitalize}
#padmin input[type=checkbox] {vertical-align:initial}
#padmin .delete {float:right;border:1px solid #000;border-radius:2px;padding:2px}
#padmin select,
#padmin input[type="text"]#category {width:180px;margin-right:2px}