body{
  background-color: rgb(255,242,205);
  background-image: url(/images/pattern.gif);
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Verdana,sans-serif;
  font-size: 10pt;
  height: 100%;
  width: 100%;
/*  scrollbar-track-color: rgb(248,229,125);*/
  scrollbar-track-color: rgb(255,242,205);
/*  scrollbar-face-color: rgb(248,229,125);*/
/*  scrollbar-face-color: rgb(255,242,205);*/
  scrollbar-face-color: rgb(192,197,33); 
  scrollbar-3dlight-color: rgb(248,229,125);
  scrollbar-highlight-color: rgb(248,229,125);
  scrollbar-darkshadow-color: rgb(248,229,125);
  scrollbar-shadow-color: rgb(248,229,125);
/*  scrollbar-arrow-color: blue; */
  scrollbar-arrow-color: rgb(255,242,205);
/*  scrollbar-arrow-color: rgb(192,197,33);*/
  scrollbar-base-color: rgb(248,229,125);
}

table{
  font-family: Verdana,sans-serif;
  font-size: 10pt;
}

div.header{
  position: absolute;
  top: 15px;
  left: 40px;
}

div.bannerLeft{
  position: absolute;
  top: 10px;
  left: 0px;
  z-index: 4;
  filter: alpha(opacity=60);
}

div.cartEtAl{
  position: absolute;
  left: 539px;
  top: 18px;
  height: 45px;
  width: 220px;
/*  background-color: rgb(248,229,125);*/
  text-align: right;
/*  border: 1px solid black; */
}

div.mainMenu{
/*  left: 0px; */
/*  height: 200px;*/
/*  padding-left: 5px; */
  padding-top: 10px;
  padding-bottom: 10px;
/*  padding-right: 5px;*/
  background-color: rgb(248,229,125);
}

div.menuStretcher{
  width: 130px;
  background-color: rgb(248,229,125);
}

div.mainMenuWrap{
  position: absolute;
  top: 95px;
  left: 15px;  
  width: 120px;
  border-left: 10px solid rgb(231,185,1);
/*  border-left: 10px solid brown; */
/*  border-left: 10px solid rgb(192,197,33);*/
  background-color: rgb(248,229,125);  

}

div.main{
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-top: 13px;
  background-color: rgb(248,229,125);  
}

div.mainStretcher{
  width: 589px;
  background-color: rgb(248,229,125);  
}  

div.mainOuter{
  position: absolute;
  left: 170px;
  top: 95px;
}

div.mainWrap{
  width: 589px;
  border-right: 10px solid rgb(192,197,33);
/*    border-right: 10px solid rgb(231,185,1);*/
/*  border-right: 10px solid green;*/
  background-color: rgb(248,229,125);    
}

a{
/*  color: brown;*/
  color: rgb(234,118,23);
  font-weight: bold;
  text-decoration: none;
}

.inactiveMenu{
  color: rgb(234,118,23); /* must match up with color of a */
  cursor: default;
}

table.tablemenu{
  font-size:11px;
}
table.tablemenu td{
  vertical-align: top;
  padding-bottom:5px;
}

div.mainMenu a{
/*  color: rgb(234,118,23);*/
}
.smallLink{
  font-size: 8pt;  
  font-weight: normal;
}

.mainMenu a:hover{
/*  text-decoration: underline;*/
/*  background-color: orange;*/
/*  background-color: rgb(192,197,33); */

/*  color: black;*/
  color: black;

  text-decoration: none;
}

a:hover{
/*  text-decoration: underline;*/
  color:black;
}

input.quantity{
  width: 40px;
  border: 1px solid gray;
}

.headerbg{
  background-color: rgb(192,197,33); 
/*background-color: rgb(128,64,0);*/
color: white;
font-size: 8pt;
font-weight: bold;
}

.cellbg{
  background-color: rgb(255,242,205);
}
.cellbg2{
  background-color: rgb(248,229,125);
}

.r{
  text-align: right;
}

.c{
  text-align: center;
}

td.description{
  width: 235px; /* must match select.shippingZone + 5px; */
}

td.description2{
  width: 305px; /* must match select.shippingZone + 5px; */
}

td.price{
  width: 70px;
}

td.subtotal{
  width: 70px;
}

td.quantity{
  width: 70px;
}

td.removeItem{
  width: 70px;
}

td.filler{
  background-color: rgb(192,197,33);
  width: 5px;
}

.b{
  font-weight: bold;
}

tr.vfiller{
  height: 10px;
  font-size: 0px;
  line-height: 0px;
}

.smallNote{
  font-size: 8pt;
  font-style: italic;
}

select.shippingZone{
  font-family: Verdana,sans-serif;
  border: 1px solid gray;
  width: 200px; /* must match td.description -5px*/
}

.v{
  vertical-align: top;
}

.accntleft{
  width: 205px;
}

.accntright{
  width: 210px;
}
table.accnt td{
  padding:3px;
}

table.accnt textarea{
  width: 180px;
  border: 1px solid gray;
  overflow: auto;
  height: 55pt;
}

div.txtarea{
  width: 180px;
  overflow: auto;
  height: 60pt;
  text-align: left;
}

select.country{
  width: 180px;
}

table.login input.txt,table.accnt input.txt{
  width: 180px; /* must match table.accnt textarea */
  border: 1px solid gray;  
}

div.txt{
  width: 180px;
  text-align: left;
}

select,input,textarea{
  font-family: Verdana,sans-serif;
  font-size: 10pt;
}

.mandatory{
  color: red;
}

.i{
  font-style: italic;
}

div.errormsg{
  width: 420px;
  background-color: rgb(255,242,205);
  padding: 3px;
}

.success{
  color: blue;
  font-weight: bold;
}

.loginLeft{
  width: 110px;
}
.loginRight{
  width: 210px;
}

table.login td{
  text-align: right;
  padding:3px;
}

.retainer{
  width: 400px;
}

table.prodTable td{
  padding:3px;
  
}

.formButton{
  border: 1px solid black; 
  font-family: Verdana;
  color: white;
  font-weight: bold;
  background-color: rgb(225,162,7);
  cursor:pointer;  
}

.fR{
  float: right;
}

.fL{
  float: left;
}

.bizzaro{
  font-size: 16px;
}

#myMenu0,#myMenu1,#myMenu2,#myMenu3,#myMenu4,#myMenu5,#myMenu6,#myMenu7{
FILTER: progid:DXImageTransform.Microsoft.RandomDissolve(duration=0.3); 	
/* FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00);  */
}

.menuLink1{
  padding-left: 5px;
}
.pointer{
  cursor:pointer;
}

.ad1{
  position: absolute;
  top: 70px;
  left: 100px;
  font-size: 0;
  line-height: 0;
  z-index: 4;
}

div.myHR{
  width: 87.6%;
  font-size: 0;
  line-height: 0;
  height: 2px;
  background-color: brown;
}

.l{
  text-align: left;
}

.ccLeft{
  width: 140px;
}

div.title{
  position: absolute; 
  top: 15px; 
  left: 15px; 
  width: 734px;
  height: 61px;
  border-left: 10px solid rgb(231,185,1);
  border-right: 10px solid rgb(192,197,33);
/*  border-right: 10px solid rgb(231,185,1);*/
}
span.title{
  font-family: garamond,serif;
  font-weight: bold;
  font-size: 26pt;
  position: relative;
  left: 20px;
  letter-spacing: 0.2em;
  color: rgb(154,119,24);
}

.absUR{
  position: absolute;
  top: 95px;
  left: 135px;
  z-index:5;
}

.absUL{
  position: absolute;
  top:0px;
  left:0px;
}

.addInfo{
  text-align: left;
  border: 1px solid #888888;
  
  background-color: rgb(255,242,205);
  padding: 5px;
 
    margin: 15px 0;
}

.tablemenu td.header{
  vertical-align:bottom;
  text-align: center;
  width:130px;
  height:22px;
  background-image:url(images/muh3.gif);
  background-repeat:no-repeat;
  font-weight:bold;
  color:white;
}

.myFooter{
text-align: center;
width:589px;
font-size:8pt;
}

.myFooter a{
  font-weight: normal;
}
.myFooter a:hover{
/*   color: rgb(234,118,23);*/
}

table.cartEtAl{
  text-align:right;
  font-size:11px;
  margin-left: auto;
}

table.cartEtAl td{
  vertical-align: top;
  padding-bottom: 1px;
}

.policy{
font-size: 8pt;
}

.policy a{
  color: #7f7f7f;
}

table.cart td{
  padding:3px;
}

table.contactus td{
  padding:3px;
}

.logo{
  position: absolute;
  top: 8px;
  left: 151px;
}

h1{
  font-family: Verdana,sans-serif;
  font-size: 10pt;
  display: inline;
  font-weight: normal;
}

.specs{
  width: 557px;
  border: 1px solid #888888;  
  padding: 3px;
  background-color: rgb(255,242,205);  
}

.emailfriend{
  position: absolute;
  top:78px;
  left:630px;
  width:200px;
  height: 12px;
/*  border: 1px solid #888888;*/
}

.lock{
  width: 135px;
  background-color: rgb(208,229,125); 
  vertical-align: top;
}

/*The following styles are created by Eric 17/12/2018*/
/*The following styles for the coffees images page*/
div.gallery-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}

div.gallery{
    margin: 5px;
    border: 1px solid #ccc;
    width: 30%;
    flex-grow: 1;
    text-align:center;
}

div.gallery:hover, div.gallery-more-img:hover {
    border: 1px solid #777;
}

div.gallery img{
    width: 48%;
    height: auto;
    transition:1s;
}

div.gallery-items img {
    width: 100%;
    height: auto;
}

div.gallery-more-img {
    margin: 5px;
    border: 1px solid #ccc;
    width: 30%;
    flex-grow: 1;
}

div.gallery-items {
    display: flex;
    justify-content:space-between;
}
div.item {
    width: 50%;
}

div.item-left {
    padding-right: 3px;
}
div.item-right {
    padding-left: 3px;
}
div.desc {
    padding: 10px 2px;
    text-align: center;
}
/*The style of the product img and its description*/
.product-detail {
    display: flex;
}

.img-items {
    display: flex;
    justify-content: space-between;
}

.pro-img-wrap {
    margin: 0 5px;
}

.img-dec {
    text-align: center;
    font-size: 10px;
}

#detail-img {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

/*Hidden info in each page, click to show and hide*/
.hidden-info {
    text-align: left;
    border: 1px solid #888888;
    background-color: rgb(255,242,205);
    padding: 0 5px;
    margin: 15px 0;
}

.inside-info {
    border: none;
}

/*Style for modal images*/

.myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    width: 50px;
    height: 50px;
    margin-top: 10px;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    
    width: 450px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>