/*********************************************/
/* general                                   */
/*********************************************/

*       { margin: 0; padding: 0; border: 0; }

html, body 
        { height: 100%;}

body 
        {
        font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;
        font-size: 12px; color: #666666; background: transparent url(../_img/layout/back.jpg) repeat fixed 0 0px;
        /*overflow: auto;*/
        }

h1, h2
        { margin: 0 0 10px 0; font-size: 22px; color: #336666; text-shadow: 1px 1px #ffffff; }
        
h3
        {font-size: 15px; color: #336666; text-shadow: 1px 1px #ffffff;}
        
h4, h5, h6
        { margin: 30px 0 0 0; font-size: 16px; }
        
p        { margin: 0 0 10px 0;}

ul, ol
        { margin: 10px 0 20px 15px; padding:0 0 0 20px;}
        
li
        { margin: 5px 0 0 0; padding: 0;}
        
a        { color:#336699; }

a:hover        
        {color:#FF9900;}

abbr,acronym,.help        
        { color:#009900;cursor:help;}

blockquote 
        {
        background: url(../../../../_img/layout/quote.gif) top left no-repeat;
        margin: 5px 0 15px 0; padding-left: 35px; color: #666666;
        }
        
noscript
        {
        font-size: 10px;
        border: 1px dotted #003366;
        background-color: #FFFFCC;
        padding: 10px;
        margin-bottom: 40px;
        }

select {
        padding: 6px;
        border: none;
        border-radius: 4px;
        background-color: #4CAF50;
        }

select:hover {
        color: yellow
        }

        select:active {
         color: red
        }

/*********************************************/
/* div                                       */
/*********************************************/
        
#navnext
        {
        position: absolute;
        left:700px; top:70px;
        width: 65px;
        border: 1px solid #669900;
        background: #F7FFE1;
        }

#navprev
        {
        position: absolute;
        left:630px; top:70px;
        background: #F7FFE1;
        font-size: 12px;
        }

#navthumb
        {
        position: absolute;
        left:225px; top:70px;
        width: 70px;
        border: 1px solid #669900;
        background: #F7FFE1;
        font-size: 12px;
        }
#logo
        {
        position: absolute;
        left:40px; top: 20px;
        }

#container {
    width: 800px;
    margin: 0 auto;
    padding: 0;
    top: -60px;    
    height: auto !important;
    background: rgba(0, 0, 0, 0.3) url(../_img/layout/container_bg.jpg) repeat-y fixed center;
    position: relative;
}

#container::after {
  content: "";
  display: table;
  clear: both;
}

#header
        {
        height: 110px; !important;
        width: 800px;
        background:  url(../_img/layout/header.jpg) no-repeat;
        position: fixed;
        top: 0px;
        z-index: 100;
        }
        
#navcontainer
        {
        position: absolute;
        top: 110px;
        left:22px;
        width: 756px;
        border-top: 1px solid #669900;
        border-bottom: 1px solid #669900;
        background: #FFFFFF;
        z-index: 500;
        }
        
#navcontainer ul
        {
        padding: 0;
        margin: 0 0 0 30px;
        color: #FFFFFF;
        float: left;
        width: 700px;
        font-family: arial, helvetica, sans-serif;
        }

#navcontainer ul li { display: inline; }

#navcontainer ul li a
        {
        padding: 0.5em 1em;
        color: #003366;
        text-decoration: none;
        float: left;
        }

#navcontainer ul li a:hover
        {
        background-color: #808080;
        color: #fff;
        }
        
#content
        {
        position: relative;    
        margin-top: 150px;
        padding: 10px 22px 20px 22px; /* top, right, bottom, left */
        }
        
#content .prodContainer
        {
        position: relative;    
        margin-top: 15px;    
        border-top: 1px dashed #999999;
        }
        
#content .prodContainer .picFrame
        {
        float: left;
        width: 220px;
        padding: 0; margin:0;
        z-index: 5;
        }
        
#content .prodContainer .prodInfo
        {
        float: right;
        width: 360px;
        padding: 0; margin:0;
        z-index: 1;
        }
        
#main
        {
        margin-top: 100px;    
        float: left;
        width: 595px;
        }

.mainThumbs
    {
        table-layout:auto;   
    }
        
.mainLeft, .mainRight
        {
        float: left;
        width: 265px;
        border: 1px dotted #CCCCCC;
        padding: 10px;
        margin: 20px 0;
        }
        
.mainRight
        {
        float: right;
        }
        
.mainCenter, .mainCenterGreen
        {
        border: 1px dotted #CCCCCC;
        padding: 10px;
        }
        
.mainCenterGreen
        {
        background: #F2FFF9 url(../_img/layout/bowl.gif) 10px 10px no-repeat ;
        padding-left:125px;
        }
        
#sideContent {
    float: right;
    width: 18%; 
    font-size: 1em;
    position: relative;
    padding: -10px;
}

#cartWrapper {
  position: absolute;
  right: -12%; /* Push to right side */
  top: 1em;  /* Adjust vertically to match View/Search bar */
  z-index: 1;
  background-color: #ffffff;
  border: 1px dotted #ccc;
  padding: 10px;
  border-radius: 8px;
  font-size: 0.95em;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}


#sideGroups {
    position: fixed;
    top: 11em;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
}

.Groups {
  width: 225px !important;
  padding: 7px !important;
  text-align: center !important;    
}

.GroupText {
  display: inline-block;
  width: 225px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prodThumb {
  width: 225px !important;
  padding: 7px !important;
  text-align: center !important;
  vertical-align: top !important;
}
.prodThumb img {
  max-height: 175px !important;
  height: auto !important;
  width: auto !important;
  display: block !important;
  margin: 0 auto !important;
}


#footer
        {
        height: 110px;
        padding: 0px 40px 0px 40px;
        background: url(../_img/layout/footer.jpg) no-repeat;
        position: relative;
        }
        
#mc
        {
        position: absolute;
        bottom: 15px;
        right:40px;
        text-align: right;
        height: 20px; width: 100px;
        }
        
#mc a
        {
        text-decoration: none;
        }
        
#TextShadow 
    {
    font-size: 14px;    
    color: white; /* Default text color */
    mix-blend-mode: difference;
    }

/*********************************************/
/* tables                                    */
/*********************************************/
#myCartTable {
  font-size: 11px;
  background-color: #efe;
  border-collapse: collapse;
  empty-cells: show;
  width: 754px;  
  border:  solid #7a7;
        border-bottom-width:1px;
        border-top-width:1px;
        border-left-width: 0px;
        border-right-width:0px;
  margin: 0px 0px 0px 0px; 
  padding: 0px;

  }

/* header */
#myCartTable > thead > tr:first-child > th {
  text-align: left;
  color: #669900;
  }

#myCartTable > thead > tr + tr > th {
  font-style: italic;
  color: gray;
  text-align: left;
  }

/* body */
#myCartTable td 
        {
        background-color: #cef;
        padding: 10px 10px 5px 10px;
        vertical-align: top;
        word-wrap:break-word;
        }

#myCartTable th 
        {
        font-weight: bold;
        padding: 10px 10px 5px 10px;
        text-align: left;
        vertical-align: top;
        word-wrap:break-word;
          }

#myTable {
  position: relative;
  left: 20px;
  top: 20px;
  width: 754px;
  font-size: 11px;
  background-color: #efe;
  border-collapse: separate;
  border-spacing: 0px;
  empty-cells: show;
  border: 1px solid #7a7;
  border-radius: 4px;
  margin-left: 0px;  
  padding: 0px;
  }

/* header */
#myTable > thead > tr:first-child > th {
  text-align: left;
  color: #669900;
  }

#myTable > thead > tr + tr > th {
  font-style: italic;
  color: gray;
  text-align: left;
  }

/* body */
#myTable td
        {
          background-color: #cef;
          padding: 10px 10px 5px 10px;
          text-align: right;
          vertical-align: top;
          }

#myTable th
        {
          font-weight: bold;
          padding: 10px 10px 5px 10px;
          text-align: left;
          vertical-align: top;
          }

/*********************************************/
/* card                                      */
/*********************************************/

.card-left, .card-right 
        {
        float: left;
        width: 220px;
        margin: 20;
        padding: 0 0 10px 0;
        text-align: center;
        background: #EEFFEE;
        border-right: 1px solid #77AA77;
        border-bottom: 1px solid #77AA77;
        font-size: 100%;
        border-radius: 4px;
        z-index: 5;
        }
        
.card-right 
        {
        float: right;
        margin: 0 0 15px 15px;
        }

.card-title {
        padding: 0;
        margin: 10px 0 10px 0;
        font-size: 100%;
        color: green;
        }
.card-photo {
        position: relative;
        margin: 0 auto; padding:0;
        border: none;
        z-index: 0;
        }
.card-desc {
        margin: 5px 20px; padding:0;
        text-align: left;
        font-size: 100%;
        }
.card-info {
        margin: 5px 10px 0 20px; padding:0;
        font-size: 100%;
        text-align: left;
        color: #666;
        }

/*********************************************/
/* classes                                   */
/*********************************************/

.clear
        {
        clear: both;
        }
        
.centered
        { text-align:center;}
        
.imgRight
        { float: right; margin: 0 0 10px 10px;}
        
.imgLeft
        { float: left; margin: 0 10px 10px 0;}
        
.bold
        { font-weight: bold; font-variant: small-caps;}
        
.boldAlert
        {font-weight: bold; color: #990000; font-size: 14px;}
        
.alertText
        { font-weight:bold; font-variant: small-caps; color: #990000; font-size: 14px;}
.narrowtext
        { 
        letter-spacing: 0px;
        font-stretch: condensed;
        }
        
.formBox
        {
        padding: 2px;
        border: 1px #FF9900 solid;
        font-size: 11px;
        }
.nosizeBox
        {
        padding: 0px;
        border: 1px #FF0000 solid;
        background-color:#808080;
        font-size: 11px;
        }        
.sizeBox
        {
        width: 15px;
        padding: 0px;
        border: 1px #003366 solid;
        font-size: 11px;
        }
/* Regular styling for the option box */
.optionBox {
    width: 75px;
    padding: 0px;
    border: 1px #003366 solid;
    color: #EEFFEE;
    background-color: #669900;
    font-size: 11px;
}

/* Flashing animation */
@keyframes flashBackground {
    0% { background-color: #669900; } /* Original green */
    50% { background-color: #FFCC00; } /* Yellow */
    100% { background-color: #669900; } /* Back to green */
}

/* Flashing effect applied when the "flashing" class is added */
.optionBox.flashing {
    animation: flashBackground 1s infinite; /* Flash every 1 second */
}

.optionBox:hover {
    color: #FF0000;
    background-color: #EEFFEE;
}
.testClass {
    background-color: #FF5733; /* Red background for testing */
    color: white; /* White text to make it stand out */
}       
.nosizeBoxes
        {
        width: 13px;
        height: 13px;
        padding:2px 1px 0px 1px;
        border: 1px #FF0000 solid;
        background-color:#808080;
        font-size: 8px;
        color: white;
        }

.sizeBoxesProd
        {
        width:13px;
        height: 13px;
        padding:2px 1px 0px 1px;
        border: 1px #003366 solid;
        font-size: 8px;
        }
.sizeBoxes
        {
        width: 9px;
        padding: 2px;
        border: 1px #003366 solid;
        font-size: 8px;
        }
.sizeDisplay
        {
        font-family: "Arial", Arial, sans-serif;
        width: 15px;
        padding: 0px;
        border: 0px;
        font-size: 8px;
        transform: scale(.75, 1.5);
        letter-spacing: -0.1px;
        background-color: transparent;
        }

.sidecontentbox 
        {
        position: fixed;
        top: 120px;
        color: #333300;
        background-color:#f8f8f9;
        padding:5px 10px;
        margin:50px 20px 10px 0px;
        border: 1px dotted #CCCCCC;
        border-radius: 8px;
        z-index: 500;
        }

.mis 
        {
        color: #003366; 
        font-family:"times new roman", serif;
        font-size: 14px;
        }
        
.chunches 
        {
        font-family:tahoma, arial, verdana, sans-serif; 
        margin:0; font-size: 14px;
        color: #CC0000;
        }
        
/*********************************************/
/* buttons                                   */
/*********************************************/
.icon_cart
        {
        background: url(../../_img/icons/icon_cart.gif) no-repeat;
        height: 17px;
        padding: 0 0 0 25px;
        }