html {overflow-y:scroll;}

body {
	width: auto; /* 840px Set this to the width of the tables containing content*/
	margin: 0 auto; /*this tells the browser to centre it - Not supported in IE in quirks mode, works for Opera, FF, Safari */	
    font-family: Verdana;
	font-size: 14px;
	background-color: #FFFFFF;
	text-align: center;
    color:cadetblue;
	/*Set the background image*/
	/*background-position: center;
	/*background-image: url('../images/fadeleft50.jpg');
	/*background-repeat: repeat-y;
	/*border: 1px black solid;*/
	
	/*IE always shows scrollbar whether it's used or not, but other browers ie firefox, opera, chrome, dont, so page jumps
	when moving from page that has long content with scrollbars, to short pages...
	this however produced a horizontal scroll bar.  See overflow y at top of this style
	overflow: scroll;*/

}

	a {text-decoration:none}
	a:link    {color:black;}
	a:visited {color:black;}
	a:hover   {color:#B60718; text-decoration: underline}
	a:active  {color:#B60718;}


a.linkColor{
    color:black;
    font-weight:bold
}

.fixHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    text-align: center;
    z-index: 100;
}

.fixHeader tr{
    background-color: white;
}

/* flex stuff */
.contentFlex {
    display: flex;
    flex-wrap: wrap;         /* ⬅️ This is **critical** to allow wrapping to a new row */
    flex-direction: row;
    max-width: 1600px;         /* ⬅️ This makes it responsive */
    width: 100%; 
    margin: 0 auto;
    padding-top: 120px;
    min-height: 100vh;
    align-items: flex-start;
    background-color:white;
    color:black;
  }
  
  .side_contentFlex {
    width: 190px;
    height: 100%;
    background-color: #fff;
    flex-shrink: 0;
    border: 0px solid yellow;
    display:none;
  }
  
  .main_contentFlex {
    padding: 25px 20px 20px 20px;
    flex-direction: column; /* allows vertical stacking */
    flex: 1;
    box-sizing: border-box;
    background-color: #fff;
    text-align: left;
    border: 0px solid red;
    color:black;
  }

  .footerFlex {
    flex-basis: 100%;        /* Forces a new row in the flex container */
    width: 100%;             /* Ensures it fills entire width of container */
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    background-color: whitesmoke;
    text-align: center;
    border-top:3px solid #B60718;
    margin-top:25px;
  }

/* ======SalesGroupGrid, About US and Bio stuff=====  */
.ItemHolder {
    border: 0px solid black;
    margin-bottom: 20px;
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* background-color: #f9f9f9; */
    background-color: #f9f8f9;
    /* border-radius: 8px; */
    align-items: center;    /* Vertical centering */
    color:black;
}

.ItemImgHolder {
    width: 45%;
    aspect-ratio: 4 / 2.25; /* Ensures it matches the wrapper ratio */
    overflow: hidden;
    border: 0px solid rgba(60, 179, 113, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-sizing: border-box;
}

.ItemImgHolder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.ItemInfoHolder {
    border: 0px solid blue;
    flex: 2 1 400px;
    overflow: auto;
    padding: 10px 30px 10px 10px;
    background-color: white;
    box-sizing: border-box;
    word-break: break-word;
}

.ItemHolder:nth-of-type(even) {
    background-color: white;
}

.ItemHolder:nth-of-type(odd) {
    flex-direction: row-reverse;
}

.ItemHolder:nth-of-type(odd) .ImgHolder{
    background-color: #f9f8f9;
}

.ItemHolder:nth-of-type(odd) .InfoHolder{
    background-color: #f9f8f9;
}

/* Video Styling */	
.ItemVidHolder {
    width:23%;
    float:left;
    border:0px solid black;
    box-sizing: border-box;
    margin:10px;
}

.ItemVid {
    /* 1) make it fill the width of its parent */
    width: 100%;
    /* 2) force a 16:9 aspect ratio */
    aspect-ratio: 16 / 9;
    /* 3) ensure the poster/video covers the container */
    object-fit: cover;
    /* center it in case of cropping */
    object-position: center;
    /* remove old max-height rule */
    height: auto;
}

.ItemVidDesc {
    width:100%;
    padding:3px 10px 0 10px;
    border:0px solid red; 
    border:border-box
}
		
h1 {
    color:white;
	font-size: 44px;
    letter-spacing:5px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetical;
	font-weight: bold;
	margin: 10px 0px 5px 0px
}

h2 {
    color:rgba(63,63,63,1);
	font-size: 35px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetical;
	margin-bottom: 13px;
	margin-top: 15px;
    line-height:40px;
    font-weight:200;
}
		
h3 {
	color:rgba(63,63,63,1);
	font-size: 18px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetical;
	font-weight: bold;
	margin-bottom: 2px;
    line-height:20px;
	margin-top: 5px;
}

.HeaderBlack {
    background-color:black;
    opacity:0.6;
    height:100px;
    line-height:100px;
}


.HeaderMenu {
	margin:8px;
	font-size:14px;
	color:aqua;
	font-family: Verdana, Arial, Helvetical;
	font-weight: bold;
	text-align:center;
    float:left;
}

a.HeaderMenuLi {
	margin:8px;
    font-size: 14px;
	color:gray;
	font-family: Verdana, Arial, Helvetical;
	font-weight: bold;
    text-align:center;
}

.HeaderMenuSubNav {
	margin:0px;
	font-size:10px;
	color:aqua;
	font-family: Verdana, Arial, Helvetical;
	font-weight: bold;
	text-align:center;
    float:left;
}

a.HeaderMenuSubNavLi {
	margin:10px;
    font-size: 11px;
	color:gray;
	font-family: Verdana, Arial, Helvetical;
	font-weight: bold;
    text-align:center;
}	
    img {
	     border:0px
    }

/*
======================================
This is all the size specific stuff for the site
======================================
*/

    .hdrMenu{
        display:inline-block;
    }

    .smlMenu{
        display:none;
        float:left;
    }


    .nav{
        position: fixed;
        right:0px;
        top: 50px;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: white;
        transform: translateX(-100%);
        transition: transform 0.5s ease-in-out;

        /* added as its not displaying properly on safari - DF 16/03/2017 */
        display:none;

    }
    .nav-view{
        transform: translateX(0);
    }


    #NavMenu2{
        background-color:white;
        border:0px solid silver;
        border-radius:0px;
        width:100%;
        height:100%;
        padding:0px;
        margin: 0 auto;
        display:none;

    }

    .HeaderText {
        font-size:28px;
        font-weight:100;
        color:rgba(63,63,63,1);
        text-align:center;
        height:40px;
        text-align:left
    }

    .imgSize {
         width:100%;
         height:100%;
    }

    .imgSizeWee {
         width:280px;
         height:200px
    }

    .imgSizeRM {
         width:280px;
         height:400px
    }

    .Logo {
         height:60px; 
         width:300px; 
    }

    .LogoDiv {
        width:300px;
        padding:13px 0 0 10px;
    }

    .SpacerHeightHomePage {
        height:140px
    }

    .SpacerHeight {
        height:140px
    }

    .SpacerHeightSubNav {
        height:170px
    }

    .UTube {
         height:340px; 
         width:440px;
         margin: 0px 0px 0px 0px;
         padding: 0px 0px 0px 0px;
    }

    #tblContent{	
	    width:1000px;
        margin: 0 auto;
        opacity:1;
        text-align: center;
        margin-top:-17px;
    }
       
    #tblContentCustHomePage{	
	    width:1000px;
        margin: 0 auto;
        opacity:1;
        text-align: center;
        margin-top:-17px;
    }

    #tdContent{	
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        background-color: white;
    }

    .imageNextToBlurb{
        width:500px;
        display:inline-block;
        vertical-align:top;
        padding:0px 0px 0px 0px;
        margin:0px 0px 0px 0px;
    }

    .imageNextToBlurb66{
        width:650px;
        display:inline-block;
        vertical-align:top;
        padding:0px 0px 0px 0px;
        margin:0px 0px 0px 0px;
    }

    .imageNextToBlurb33{
        width:350px;
        display:inline-block;
        vertical-align:top;
        padding:0px 0px 0px 0px;
        margin:0px 0px 0px 0px;
    }

    .UTubeNextToBlurb{
        width:450px;
        display:inline-block;
        margin: 0 auto;
        vertical-align:top;
        padding:0px 0px 0px 0px;
    }

    .KenBurnsImageNextToBlurb{
        width:500px;
        height:370px;
        display:inline-block;
        vertical-align:top;
        padding:0px 0px 0px 0px;
        margin:0px 0px 0px 0px;
    }

    .blurbNextToImage{
        width:436px;
        display:inline-block;
        vertical-align:top;
        padding:10px 20px 10px 40px;
        margin:0px 0px 0px 0px;
        font-size:12px;
        color:rgba(63,63,63,1);
        background-color:white;
        text-align:left;
        line-height:20px      
    }

     .blurbNextToImage66{
        width:586px;
        display:inline-block;
        vertical-align:top;
        padding:10px 20px 10px 40px;
        margin:0px 0px 0px 0px;
        font-size:12px;
        color:rgba(63,63,63,1);
        background-color:white;
        text-align:left;
        line-height:20px  
    }

     .blurbNextToImage33{
        width:286px;
        display:inline-block;
        vertical-align:top;
        padding:10px 20px 10px 40px;
        margin:0px 0px 0px 0px;
        font-size:12px;
        color:rgba(63,63,63,1);
        background-color:white;
        text-align:left;
        line-height:20px  
    }

      .blurbNextToImage100{
        width:900px;
        display:inline-block;
        vertical-align:top;
        padding:10px 20px 10px 40px;
        margin:0px 0px 0px 0px;
        font-size:12px;
        color:rgba(63,63,63,1);
        background-color:white;
        text-align:left;
        line-height:20px  
    }

    a.blurbNextToImage{
        font-size:15px;
        color:rgba(96,27,56,1);
    }

    .blurbNextToImageLi{
        font-size:13px;
        color:rgba(63,63,63,1);
        text-align:left;
        padding: 0px 0px 5px 0px
    }

     .blurbNextToImageBoxLi{
        font-size:14px;
        color:rgba(63,63,63,1);
        text-align:left;
        padding: 0px 0px 5px 0px;
        list-style-type: none;
    }

    .blurbRMDetails{
        width:50%;
        display:inline-block;
        vertical-align:top;
        text-align:left;
        padding:10px 10px 10px 10px;
        margin:0px 0px 0px 0px;
        font-size:13px;
        color:rgba(63,63,63,1);
    }

     .RecipeConcept{
        width:900px;
        display:inline-block;
        vertical-align:top;
        padding:10px 20px 10px 40px;
        margin:0px 0px 0px 0px;
        font-size:12px;
        color:rgba(63,63,63,1);
        background-color:white;
        text-align:left;
        line-height:20px;
        column-count:2; 
        column-gap: 40px; 
    }

     .VideoTitle{
        font-size:16px;
        font-weight:bold;
        color:rgba(63,63,63,1);
        display:inline-block; 
        margin:0 auto; 
        margin:0px 0px 20px 0px
    }

    .ProdGroupHolder{	
        width:450px; 
        display:inline-block;
        padding:10px 10px 10px 10px;
        margin:5px 5px 5px 5px;
    }

    .TrendingNow{
        margin:0 auto;
        vertical-align:top;
        width:600px;
        display:inline-block;
        vertical-align:top;
    }

/* this is the css to get the table to padd now cellpadding on the table is obsolete in html5 */

    table.StdTablePadding th, table.StdTablePadding td {
        padding: 3px 5px 3px 5px;
        margin: 0px;
        border: 1px solid gray;
        border-collapse: collapse;
    }

    table.StdTablePadding a {
        padding: 3px 5px 3px 5px;
    }

    table.StdTablePaddingNoBorder th, table.StdTablePaddingNoBorder td {
        padding: 3px 5px 3px 5px;
    }

/* end */


/* COMPRESSED:  this is the css to get the table to padd now cellpadding on the table is obsolete in html5 */

    table.ComTablePadding th, table.ComTablePadding td {
        padding: 2px 3px 2px 3px;
        margin: 0px;
        border: 1px solid gray;
        border-collapse: collapse;
        vertical-align: top
    }

    table.ComTablePadding a {
        padding: 2px 3px 2px 3px;
    }

    table.ComTablePaddingNoBorder th, table.ComTablePaddingNoBorder td {
        padding: 2px 3px 2px 3px;
        vertical-align: top
    }

    /* ======HomePage=====  */
    .main-image-container {
        flex-basis: 100%;
    }

    .main-image-container img {
        width: 100%;
        height: 557px;
        object-fit: cover; /* ensures the image fills the height without distortion */
        display: block;    /* removes inline spacing */
    }
    .homepage-intro {
        font-size:120%;
        padding-bottom:20px
    }

/* end */

/* ======Cool Menu Dropdown=====*/
.Burger {display:none}

.dropholder{
    height:auto;
    width:auto;
    background: black;
    background: linear-gradient(#505050,#D0D0D0);
    margin:0 auto;
    border-radius:3px;
}

/* Dropdown Button */
.dropbtn {
    background:none;
    font-size: 12px;
    border: none;
    cursor: pointer;
    font-weight:bold;
}

/* Dropdown Button for the header menus */
.dropbtnMnu {
    background:none;                
    border: none;
    cursor: pointer;
    font-weight:bold;
    height:25px;
    min-height:25px;
    line-height:25px;
    padding-left:5px;
    padding-right:5px; 
    background-color:unset;  
}

.dropbtnMnu a{           
    text-decoration:none; 
    font-weight:bold;
    color:white;
    background-color:unset 
}

.dropbtnMnu a:hover{
    background:none;                
    text-decoration:none;
    font-weight:bold;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    width:auto
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    position: absolute;
    line-height:25px;        
    background-color:white;
    min-width:220px;
    border:1px solid silver;
    text-align:left;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-bottom:1px solid #D0D0D0; 
    border-left:1px solid #D0D0D0;
    border-right:1px solid #D0D0D0;
    padding:10px;
    max-height:0px;
    opacity:0;
    visibility:hidden;

    /* these are the transition settings*/      
    transition-property: max-height, opacity, visibility;
    transition-duration: 0.3s;
    transition-timing-function: ease-in;
    transition-delay: 0.1s;   
}

.Cover{
    background-color:gray;
    position:fixed;
    top:0px;
    left:0px;

    width:0px;
    height:0px;        
}


/* Links inside the dropdown */
.dropdown-content a {
    padding: 1px 16px;
    text-decoration: none;
    display: block;
    text-align:left; 
}

.Cover:hover{       
    visibility:hidden;
    transition-property: visibility;
    transition-delay: 0.1s;    }


/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    /* background-color: #f1f1f1;*/
    text-decoration: underline;
    color:green;
}

.dropdown:hover .Cover {        
    width:100%;
    height:100%;
    display:block;
    z-index:99;
    filter:alpha(opacity=4);
    opacity: 0.4;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    /*display: block; - use visibility instead....*/
    max-height:800px;
    opacity:1;
    visibility:visible;
    z-index:1000;
}

.dropdown:hover .dropbtnMnu {
    background-color:white;
    position:relative;
    top:0px;
    left:0px;
    z-index:1000;
    background-color:unset
}

/* This controls the width of the big dropdown with four cols.  Media query drops the last col when on small screen*/
.DropdownWidth {width:1100px}

.DropDownDiv {
    display:inline-block;
    text-align:left;
    vertical-align:top;
    width:200px;
    min-height:220px;
    border-right:1px solid gray;
    padding-left:7px
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    color:black;
}

/* End of Menu Dropdown CSS */

/*
======================================
This is all the size specific stuff for the site for IPHONE portrate.  Landscape further down 
======================================
*/
@media only screen and (min-width : 250px) and (max-width : 767px) {

    .Burger {display:block}
  
    h1 {
	    font-size: 24px;
    }

    h2 {
	    font-size: 22px;	
        margin-bottom: 5px;
	    margin-top: 13px;
        line-height:25px;
        font-weight:200;
    }
        
    #slides{
        display:none;
    }

    td.sideContent{
        display:none;
    }

    .footer{
        display:none;   
    }

    .hdrMenu{
        display:none;
    }
    
    .NotOnIphone{
        display:none;
    }

    .smlMenu{
        display:inline-block;
        text-align:left;
        border:0px solid yellow;
        width:40px;
        padding:20px 0px 0px 10px;
        cursor:pointer;
        font-weight:bold;
        float:left;
    } 

    .nav{
        display:block;
    }


    .imgSize {
         width:325px;
    }

    .Logo {
         /* height:50px;  */
         width:100%;
         padding-top:5px
    }

    .LogoDiv {
         width:300px; 
         /* margin:0 auto  */
    }

    .SpacerHeightHomePage {
        height:100px
    }

    .SpacerHeight {
        height:100px
    }

    .SpacerHeightSubNav {
        height:100px
    }

    .seperator {
        height:150px;
        width:100%;
    }
    

    .UTube {
         height:170px; 
         width:290px; 
    }

    #tblContent{	
        width:310px;
        text-align:center;   	
    }

    .imageNextToBlurb{
        width:325px;
        padding:0px 0px 0px 0px;
        margin:0px 0px 0px 0px;
        vertical-align:top;
    }

    .imageNextToBlurb66{
        width:325px;
 
    }

    .imageNextToBlurb33{
        width:325px;
    }

     .KenBurnsImageNextToBlurb{
        width:300px;
        height:200px;
        padding:0px 0px 0px 0px;
        margin:0px 0px 0px 0px;
    }

     .blurbNextToImage{
        width:280px; 
        padding:0px 10px 10px 10px;
     }

     .blurbNextToImage66{
        width:280px;
        padding:0px 10px 10px 10px;

    }

     .blurbNextToImage33{
        width:280px;
        padding:0px 10px 10px 10px;  
    }
     
     .blurbNextToImage100{
        width:320px;
        padding:10px 20px 10px 10px;
        line-height:20px  
    }


     .blurbRMDetails{
        width:280px;
    } 

    .RecipeConcept{
        width:280px;
        padding:10px 20px 10px 20px;
        line-height:20px;
        column-count:1; 
        column-gap: 0px;
    }
        
     .VideoTitle{ 
        margin:0px 0px 0px 0px
    }

    .ProdGroupHolder{	
        width:300px; 
        display:inline-block;
        padding:10px 10px 10px 10px;
        margin:5px 5px 5px 5px;
    }



}
/*
======================================
This is all the size specific stuff for the site for iphone Landscape.   Portrate further up 
======================================
*/
@media screen and (max-width: 700px) and (min-width: 391px) {
    
   h1 {
	    font-size: 24px;
    }
    
    #slides{
        display:none;
    }

    td.sideContent{
        display:none;
    }

    .hdrMenu{
        display:none;
    }
    
    .smlMenu{
        display:inline-block;
        text-align:left;
        border:0px solid yellow;
        width:40px;
        padding:40px 0px 0px 10px;
        cursor:pointer;
        font-weight:bold;
        float:left;
    } 

    .imgSize {
         width:280px;
    }

    .Logo {
         /* height:45px;  */
         width:100%; 
    }

    .SpacerHeight {
        height:80px
    }

   .UTube {
         height:170px; 
         width:290px;
    }

    #tblContent{	
        width:100%;
        text-align:center;   	
    }

    .imageNextToBlurb{
        width:280px;
        padding:0px 0px 0px 0px;
        margin:5px 5px 5px 5px;
    }

     .KenBurnsImageNextToBlurb{
        width:300px;
        padding:0px 0px 0px 0px;
        margin:0px 0px 0px 0px;
    }

     .blurbNextToImage{
        width:280px;
        float:left; 
        padding:0px 10px 10px 10px;
       }
     
    .ProdGroupHolder{	
        width:300px; 
        display:inline-block;
        padding:0px 0px 0px 0px;
        margin:5px 5px 5px 5px;
    }

}


@media only screen and (min-width : 250px) and (max-width : 767px) {
    .ItemHolder {
        flex-direction: column;
    }
    
    .ItemImgHolder {
        width: 100%;
    }
    
    .ItemInfoHolder {
       flex: 1 1 100% !important;
    }
    
    
    .ItemImgHolder {
        aspect-ratio: auto;
    }
    
    .ItemInfoHolder {
        padding: 10px;
    }
    
    .cert-icons img {
        width: 80px;
    }
    
    /* Video Styling */	
    .ItemVid {
        width:-48%;
    }
}
/*
======================================
This is all the size specific stuff for the site for 1200px. 
======================================
*/
@media (min-width:1300px) {

    #tblContentCustHomePage {
        width: 1300px;
    }

    .TrendingNow{
        width:900px;

    }
}

/*
======================================
This is all the size specific stuff for the site for 1600px. 
======================================
*/
@media (min-width:1600px) {

    #tblContentCustHomePage {
        width: 1600px;
    }

    .TrendingNow{
        width:1200px;

    }
}

/*
======================================
======================================
*/

table {
	font-size: 11px;
	color: #000000;
	font-family: Verdana, Arial, Helvetical;
	font-weight: normal;
	text-decoration: none;
	border: 0px;
	border-spacing: 0px 0px;
	border-collapse:collapse;
}
td {
	font-size: 11px;
	color: #000000;
	font-family: Verdana, Arial, Helvetical;
	font-weight: normal;
	text-decoration: none;
}

td.checkout {
	font-size: 11px;
	color: #000000;
	font-family:Arial;
	font-weight: normal;
	text-decoration: none;
}


p {
	font-size: 12px;
	color: #000000;
	font-family: Verdana, Arial, Helvetical;
	font-weight: normal;
	text-decoration: none;
	padding-top:0px;
	width:100%;
}
li {
	font-size: 12px;
	color: #000000;
	font-family: Verdana, Arial, Helvetical;
	font-weight: normal;
	text-decoration: none;
}

.SideNavLi {
	list-style: none;
	margin:20px;
	font-size: 14px;
	color:#3A3A3A;
	font-family: Verdana, Arial, Helvetical;
	font-weight: bold;
	text-align:left;
    vertical-align:top;
}


a.SideNavLi {
	font-size: 14px;
	color:#3A3A3A;
	font-family: Verdana, Arial, Helvetical;
	font-weight: bold;
}

iframe {
	border:0px;
	margin: 0px;	
}

li.offer {
	padding: 7px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
}
li.offerPrc {
	padding: 7px;
	color: Red;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14.5px;
	font-weight: bold;
}
select {
	font-size: 11px;
	color: #000000;
	font-family: Verdana, Arial, Helvetical;
	font-weight: normal;
	text-decoration: none;
}
.SubCat {
	color: #000000;
	font-size: 11px;
	font-family: Verdana, Arial;
	text-align: left;
	text-decoration: none;
}
.SubCatHdr {
	width: 200px;
	height:100%;
	color: white;
	font-size: 11px;
	font-family: Verdana, Arial;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	background-image: url('');
}
.txtListPrc {
	color: #000000;
	font-size: 11px;
	font-family: Arial;
	text-decoration: none;
}
.txtListPrcOver {
	color: #009900;
	font-size: 11px;
	font-family: Arial;
	text-decoration: none;
	font-weight: bold;
	cursor: default;
}

.SubCatHover{
	font-weight: bold;
	color: #009900;
	text-decoration: underline;
	cursor:pointer;
}

.SubCat:Hover{
	font-weight: bold;
	color: #009900;
	text-decoration: underline;
	cursor:pointer;
}

a:hover.SubCat {
	font-weight: bold;
	color: #009900;
	text-decoration: underline;
}


.SelectedSubCat {
	color: #FF0000;
	font-size: 7.5pt;
	FONT-WEIGHT: bolder;
	FONT-FAMILY: Arial;
	TEXT-ALIGN: left;
	TEXT-DECORATION: none;
}
a:hover.SelectedSubCat {
	color: red;
}
.mnuP {
	margin-top: -40px;
	margin-left: 7px;
	margin-right: -5px;
}
.mnuP1 {
	margin-top: -17px;
	margin-left: 7px;
	margin-right: -5px;
}
.Hdr {
	color: #000000;
	font-size: 11px;
	text-decoration: none;
	font-family: Verdana;
	font-weight: bolder;
	cursor: pointer;
}
.BigHdr {
	color: #000000;
	font-size: 15px;
	text-decoration: none;
	font-family: Verdana;
	font-weight: bolder;
}


.BigHdrArial {
	color: #000000;
	font-size: 16px;
	text-decoration: none;
	font-family: Arial;
	font-weight: bold;
}

.BigHdrArialGreydOut {
	color: silver;
	font-size: 16px;
	text-decoration: none;
	font-family: Arial;
	font-weight: bold;
}

.BigHdrArialRed {
	color: red;
	font-size: 16px;
	text-decoration: none;
	font-family: Arial;
	font-weight: bold;
}

.HugeHdr {
	color: #000000;
	font-size: 25px;
	text-decoration: none;
	font-family: Verdana;
	font-weight: bolder;
}
a:hover.Hdr {
	color: #009900;
	font-size: 11px;
	text-decoration: underline;
	font-family: Verdana;
	font-weight: bolder;
	cursor: pointer;
}

a:hover.BigHdrArial {
	color: #009900;
	font-size: 16px;
	text-decoration: none;
	font-family: Arial;
	font-weight: bold;
}

a:hover.BigHdr {
	color: #009900;
	font-size: 15px;
	text-decoration: underline;
	font-family: Verdana;
	font-weight: bolder;
	cursor: pointer;
}
.techspec {
	color: #000000;
	font-family: Verdana;
	text-decoration: none;
	font-size: 11px;
}

a:hover.techspec {
	color:green;
	font-family: Verdana;
	font-size: 11px;
	text-decoration: underline;
}

.Breadcrumb {
	color: #000000;
	font-family: Verdana;
	text-decoration: none;
	font-size: 11px;
	background-color: #FFFFFF;
}

a:hover.Breadcrumb {
	color:green;
	font-family: Verdana;
	font-size: 11px;
	text-decoration: underline;
	background-color: #FFFFFF;
	font-style: normal;
}

.offerlink {
	font-family: Verdana;
	font-weight: bold;
	font-size: 11px;
	text-decoration: underline;
	color: #000999;
	background-color: #FFFFFF;
}
.offerlinkOver {
	cursor: pointer;
	font-family: Verdana;
	font-weight: bold;
	font-size: 11px;
	text-decoration: underline;
	color: #FFFFFF;
	background-color: #000999;
}
:hover.offerlink {
	font-family: Verdana;
	font-weight: bold;
	font-size: 11px;
	text-decoration: underline;
	color: white;
	background-color: #000999;
}
.pageIdx {
	padding-left: 2px;
	padding-right: 2px;
	font-family: Verdana;
	font-weight: bold;
	font-size: 11px;
	text-decoration: underline;
	color: #000999;
	background-color: #FFFFFF;
}
.pageIdxSel {
	padding-left: 2px;
	padding-right: 2px;
	font-family: Verdana;
	font-weight: bold;
	font-size: 11px;
	color: #000000;
}
.shoplink {
	color: #000000;
	font-size: 11px;
	font-family: Verdana, Arial;
	text-align: left;
	text-decoration: none;
}
:hover.shoplink {
	color: #009900;
	font-size: 11px;
	font-family: Verdana, Arial;
	text-align: left;
	text-decoration: none;
}
.fakeHyper {
	font-family: Verdana;
	font-weight: bold;
	font-size: 11px;
	text-decoration: underline;
	color: #000999;
	background-color: #FFFFFF;
    cursor:pointer;
}
.fakeHyperOver {
	cursor: pointer;
	font-family: Verdana;
	font-weight: bold;
	font-size: 11px;
	text-decoration: underline;
	color: white;
	background-color: #000999;
}
.txt {
	font-size: 11px;
	color: #000000;
	font-family: Verdana, Arial, Helvetical;
	font-weight: normal;
	text-decoration: none;
}
.boldtxt {
	font-weight: bold;
	font-size: 11px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica;
}
.Hdrtxt {
	font-weight: bold;
	font-size: 11px;
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica;
}
.menuDiv {
	position: absolute;
	width: 200px;
	background-color: #FFFFFF;
	border: 1px solid #000999;
	font: normal 11px Verdana;
	line-height: 18px;
	z-index: 100;
	display: none;
	padding-bottom: 5px;
}
.menuDivPack {
	position: absolute;
	width: 185px;
	height: 199px;
	overflow: scroll;
	background-color: #fffde1;
	border: 1px solid #000999;
	font: normal 11px Verdana;
	line-height: 18px;
	z-index: 100;
	display: none;
}
.menuDivSund {
	position: absolute;
	width: 200px;
	height: 180px;
	overflow: scroll;
	background-color: #fffde1;
	border: 1px solid #000999;
	font: normal 11px Verdana;
	line-height: 18px;
	z-index: 100;
	display: none;
}
.menuDivMach {
	position: absolute;
	width: 185px;
	height: 148px;
	overflow: scroll;
	background-color: #fffde1;
	border: 1px solid #000999;
	font: normal 11px Verdana;
	line-height: 18px;
	z-index: 100;
	display: none;
}
a.Desc {
	color: Blue;
	text-decoration: none;
}
a:hover.Desc {
	text-decoration: underline;
}
.basketTable {
	border-collapse: collapse;
	font-family: Verdana;
	font-size: 11px;
}
.basketTD {
	border-left-style: solid;
	border-left-width: 1px;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-top-width: 1px;
	border-color: #C0C0C0;
	font-family: Verdana;
	font-size: 11px;
}
.basketTDnoBorder {
	border-left-style: solid;
	border-left-width: 0px;
	border-right-style: solid;
	border-right-width: 0px;
	border-bottom-style: solid;
	border-bottom-width: 0px;
	border-top-style: solid;
	border-top-width: 0px;
	font-family: Verdana;
	font-size: 11px;
}
.BasketTH {
	border-left-style: solid;
	border-left-width: 1px;
	border-right-style: solid;
	border-right-width: 1px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-top-width: 1px;
	border-color: #C0C0C0;
	font-family: Verdana;
	font-size: 11px;
}
td.offer {
	font-size: 11px;
	color: #000000;
	font-family: Verdana, Arial, Helvetical;
	font-weight: normal;
	text-decoration: none;
}
td1.offer {
	font-family: Verdana;
	font-size: 7.5pt;
	text-decoration: none;
	color: #000000;
}
td.Header {
	font-family: Verdana;
	font-weight: Bold;
	font-size: 11px;
	text-decoration: none;
	color: #000000;
}
.eshotGOLD {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 48px;
	color: #F1D92B;
}
.eshotWHITE {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	color: #FFFFFF;
}
.eshotBLACK {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #000000;
}
.fakeLink {
	text-decoration: underline;
	cursor: pointer;
	color: blue;
}
.style5 {
	border-collapse: collapse;
}
.style6 {
	border-left: 2px solid #FF0000;
	border-right: 2px solid #FF0000;
	border-top: medium none #FF0000;
	border-bottom: 2px solid #FF0000;
}
.style7 {
	border-left: 2px solid #FF0000;
	border-right: 2px solid #FF0000;
	border-top: 2px solid #FF0000;
	border-bottom: medium none #FF0000;
}
.style8 {
	white-space: normal;
	border-left: 2px solid #FF0000;
	border-right: 2px solid #FF0000;
	border-top: medium none #FF0000;
	border-bottom: 2px solid #FF0000;
}
.style9 {
	white-space: normal;
	border-left: 2px solid #FF0000;
	border-right: 2px solid #FF0000;
	border-top: 2px solid #FF0000;
	border-bottom: medium none #FF0000;
}
.style10 {
	color: #FF0000;
	font-size: 15px;
	text-decoration: none;
	font-family: Verdana;
	font-weight: bolder;
}
/* this is the style for the blue 20px shading at the top of a cell */
.BlueGrad {
	height: 20px;
	background-image: url('');
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
}
.WhiteLink {
	text-decoration: none;
	color: #FFFFFF;
	font-weight: bold;
}
.NormTextHLink {
	text-decoration: none;
	color: #000000;
}
.NormTextHLinkSplash {
	text-decoration: none;
	color: #000000;
	font-size: xx-small;
}
.GrayBar177px {
	background-image: url('http://www.scobiesdirect.com/Images/GrayBar.jpg');
	text-align: left;
	width: 177px;
	height: 23px;
	float: left;
	color: #FFFFFF;
	text-align: center;
	padding-top: 0px;
	margin: 0px;
}
.GrayBar {
	background-image: url('http://www.scobiesdirect.com/Graphics/Processor/greyBar.jpg');
	text-align: left;
	width: 177px;
	height: 23px;
	float: left;
	color: #FFFFFF;
	text-align: center;
	padding-top: 0px;
	margin: 0px;
	line-height:23px;
}
.GrayBarNew {
	background-image: url('http://www.scobiesdirect.com/Images/GrayBar.jpg');
	text-align: left;
	width: 177px;
	height: 23px;
	float: left;
	color: #FFFFFF;
	text-align: center;
	padding-top: 0px;
	margin: 0px;
	font-weight: bold;
	text-decoration: none;
	line-height:23px;
}
:hover.GrayBarNew {
	font-family: Verdana;
	font-weight: bold;
	font-size: 11px;
	text-decoration: none;
	color: white;
	background-color: #000999;
}

.smallbox {
	width: 177px;
	height: 23px;
	float: left;
	}


.GrayBar177pxlink {
	color: #FFFFFF;
	text-decoration:none;
}


.WeeGreenButton {
	width: 23px;
	height: 23px;
	float: left;
	border-width: 0px;
	padding: 0px;
}
.WeeGreenButtonImage {
	width: 23px;
	height: 23px;
	border-width: 0px;
}
.GrayGrad {
	padding: 7px;
	background-image: url('') ;
	vertical-align: top;
	text-align: center;
}
.GrayGradLarge {
	padding: 7px;
	background-image: url('');
	vertical-align: top;
	text-align: center;
}
.ChartHolder {
	width: 640px;
	border: 1px black solid;
	text-align: left;
	/*overflow-x: auto;*/
}





/* holder for the gluten free calc*/

    .GlutenFreeCalc {
	    width:425px;
	    left:50%;
	    /*top:25%;*/
	    margin-left:-266px;
	    padding:5px;
	    background-color: lightyellow;
	    color:#000;
	    border:2px solid #000;
	    text-align:center;
	    filter: alpha(opacity=100);
	    opacity: 1.0;
	    z-index: 1001;
	    position:absolute;
	    display:none;
	    /*box-shadow:10px 10px 5px gray;*/
	    border-radius:15px;
    }

    .GFHolder{
        width:350px;
        height:auto;
        margin:0 auto;
    }


    .GFTable {
        font-size:22px;
        width:360px;
    }

    .GFParamHolder{
        width:110px;
        float:left;
        background-color:white;
        border:1px solid grey;
    }

    .GFParamAdj{
        width:100%;
        font-size:30px;
    }

/* CSS for the brochure display newstand at a jaunty angle */
.Article {
    width:210px;
    height:297px; 
    margin:10px;
    margin-bottom:70px;
    margin-right:-100px;
    transform:rotate(7deg);

    /* CSS needed for transition---- */
    -webkit-transition-property: margin-right, margin-left, zoom;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: linear;
    -webkit-transition-delay: 0.2s;

    transition-property: margin-right, margin-left, margin-bottom, width, height, zoom;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.2s;
}

.Article:hover {
    margin-right:0px;
    margin-left:-50px;
    margin-bottom:7px;
    zoom:115%;

}

.ArticleHolder {
    width:1310px; 
    border:0px solid silver;
    text-align:left;
    margin:0 auto;

}
        

.fadeItIn {
opacity:0;
animation: fadein;
animation-duration: 4s;
animation-delay: 0s;
animation-fill-mode:forwards;
}

@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}

/* end brochure CSS */