body {
    background-image: url(/images/bg.jpg);
    background-position: center top;
    margin: 0;
    font-family: Arial;
}

h1 {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 24px;
    font-weight: normal;
    color: #0097c5;
}

h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 20px;
    font-weight: normal;
    color: #0097c5;
}

.FoodExpertH1 {
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 22px;
}

.Letter {
    background-image: url(/images/Letter.png);
    background-repeat: no-repeat;
    display: block;
    float: left;
    width: 55px;
    height: 54px;
    color: White;
    font-size: 36px;
    text-decoration: none;
    text-align: center;
    padding-top: 4px;
    padding-left: 1px;
    margin-right: 5px;
    margin-bottom: 5px;
}

    .Letter:Hover {
        background-image: url(/images/LetterOver.png);
        background-repeat: no-repeat;
        display: block;
        float: left;
        width: 55px;
        height: 54px;
        color: White;
        font-size: 36px;
        text-decoration: none;
        text-align: center;
        padding-top: 4px;
        padding-left: 1px;
        margin-right: 5px;
        margin-bottom: 5px;
    }

.LTabOff {
    background-image: url(/images/TabOff.png);
    background-repeat: no-repeat;
    width: 155px;
    height: 20px;
    text-align: center;
    color: #178fb9;
    text-decoration: none;
    z-index: 100;
    position: relative;
    display: inline-block;
    font-size: 11px;
    padding-top: 3px;
}

.RTabOff {
    background-image: url(/images/TabOff.png);
    background-repeat: no-repeat;
    width: 155px;
    height: 20px;
    text-align: center;
    color: #178fb9;
    text-decoration: none;
    position: relative;
    z-index: 100;
    display: inline-block;
    left: -38px;
    font-size: 11px;
    padding-top: 3px;
}

.MidTabOff {
    background-image: url(/images/TabOff.png);
    background-repeat: no-repeat;
    width: 155px;
    height: 20px;
    text-align: center;
    color: #178fb9;
    text-decoration: none;
    position: relative;
    z-index: 99;
    display: inline-block;
    left: -19px;
    font-size: 11px;
    padding-top: 3px;
}

.LTabOn {
    background-image: url(/images/TabOn.png);
    background-repeat: no-repeat;
    width: 155px;
    height: 20px;
    text-align: center;
    color: white;
    text-decoration: none;
    z-index: 100;
    position: relative;
    display: inline-block;
    font-size: 11px;
    padding-top: 3px;
}

.RTabOn {
    background-image: url(/images/TabOn.png);
    background-repeat: no-repeat;
    width: 155px;
    height: 20px;
    text-align: center;
    color: white;
    text-decoration: none;
    position: relative;
    z-index: 100;
    display: inline-block;
    left: -38px;
    font-size: 11px;
    padding-top: 3px;
}

.MidTabOn {
    background-image: url(/images/TabOn.png);
    background-repeat: no-repeat;
    width: 155px;
    height: 20px;
    text-align: center;
    color: white;
    text-decoration: none;
    position: relative;
    z-index: 190;
    display: inline-block;
    left: -19px;
    font-size: 11px;
    padding-top: 3px;
}


.TopBlue {
    float: left;
    clear: both;
    background-color: #96c1dc;
    width: 998px;
    height: 24px;
}

.InnerTopBlue {
    float: left;
    clear: both;
    background-color: #96c1dc;
    width: 708px;
    height: 24px;
    color: White;
    padding-left: 5px;
    padding-top: 3px;
}

.TopGreen {
    float: left;
    clear: both;
    background-color: #c6c99c;
    width: 998px;
    height: 24px;
}

#Container {
    width: 998px;
    background-color: White;
    margin: 0px auto;
    position: relative;
}

.CartBlackOut {
    z-index: 2000;
    height: 100%;
    width: 100%;
    background-color: black;
    margin-bottom: 1px;
    padding-bottom: 0px;
    position: fixed;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}

.CartDiv {
    position: fixed;
    z-index: 2000;
    width: 309px;
    height: 154px;
    background-color: #fff;
    background-repeat: no-repeat;
    padding: 10px;
}

.LeftMenu {
    margin: 0px;
    padding: 0px;
    padding-left: 4px;
    list-style: none;
    font-size: 13px;
}

.MenuOff {
    background-image: url(/images/MenuMedBlue.png);
    display: block;
    margin-bottom: 2px;
    width: 149px;
    height: 20px;
    padding-left: 8px;
    color: White;
    padding-top: 5px;
}

.MenuInnerOff {
    background-image: url(/images/MenuLightBlue.png);
    display: block;
    margin-bottom: 2px;
    width: 141px;
    height: 20px;
    padding-left: 16px;
    color: White;
    padding-top: 5px;
}

.MenuOff:hover {
    background-image: url(/images/MenuDarkBlue.png);
}

.MenuInnerOff:hover {
    background-image: url(/images/MenuDarkBlue.png);
}

.MenuOn {
    background-image: url(/images/MenuDarkBlue.png);
    display: block;
    margin-bottom: 2px;
    width: 149px;
    height: 20px;
    padding-left: 8px;
    color: White;
    padding-top: 5px;
}

.MenuInnerOn {
    background-image: url(/images/MenuDarkBlue.png);
    display: block;
    margin-bottom: 2px;
    width: 141px;
    height: 20px;
    padding-left: 16px;
    color: White;
    padding-top: 5px;
}

.MenuGrey {
    background-image: url(/images/MenuGrey.png);
    display: block;
    margin-bottom: 2px;
    width: 141px;
    height: 20px;
    padding-left: 16px;
    color: #0097c5;
    padding-top: 5px;
}

.MenuLightBlue {
    background-image: url(/images/MenuLightBlue.png);
    display: block;
    margin-bottom: 2px;
    width: 141px;
    height: 20px;
    padding-left: 16px;
    color: White;
    padding-top: 5px;
}

    .MenuLightBlue:hover {
        background-image: url(/images/MenuDarkBlue.png);
    }

.MenuGreen {
    background-image: url(/images/menuGreen.png);
    background-repeat: no-repeat;
    display: block;
    margin-bottom: 2px;
    width: 141px;
    height: 20px;
    padding-left: 16px;
    color: White;
    padding-top: 5px;
}

    .MenuGreen:hover {
        background-image: url(/images/MenuDarkBlue.png);
    }




.mainCart {
    height: 56px;
    width: 256px;
    float: right;
    border-top: 1px dashed grey;
    border-bottom: 1px dashed grey;
    background-color: #f5f5f5;
    margin-top: -28px;
}

.cartText {
    float: left;
    padding-left: 8px;
    color: #5A5A5A;
    padding-top: 7px;
}

.transparent {
    z-index: 2000;
    height: 100%;
    width: 100%;
    background-color: black;
    margin-bottom: 1px;
    padding-bottom: 0px;
    position: fixed;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}

a {
    color: #78c6de;
}

p {
    margin: 0px;
}

.bc {
    text-decoration: none;
    color: #bbbbbb;
}

    .bc:hover {
        text-decoration: underline;
    }

.ArrowUp {
    float: right;
    padding-right: 6px;
    padding-top: 0px;
}

.ArrowDown {
    float: right;
    padding-right: 4px;
    padding-top: 4px;
}

.Form {
    width: 220px;
    font-size: 14px;
    padding: 5px;
    font-family: Arial;
}

.error {
    width: 220px;
    font-size: 14px;
    padding: 5px;
    border: 1px solid #b31a24;
    font-family: Arial;
}

.NewGreenBtn {
    float: left;
    background-image: url(/images/menuGreen.png);
    background-repeat: no-repeat;
    width: 155px;
    height: 24px;
    padding-left: 8px;
    color: White;
    padding-top: 1px;
    font-size: 16px;
    border: 0px;
    background-color: transparent;
}

#CategoryPop {
    display: none;
    position: absolute;
    left: 159px;
    top: 110px;
    z-index: 1000;
    width: 451px;
    height: 403px;
}

#CatMain {
    background-image: url(/MainCatImg/LargeBg.png);
    background-repeat: no-repeat;
    width: 448px;
    height: 443px;
    padding-top: 7px;
    padding-left: 3px;
}

#CategoryPop2 {
    position: relative;
    top: -950px;
    left: 163px;
    z-index: 1000;
    width: 451px;
    height: 403px;
}

.RecTab3Off {
    text-decoration: none;
    float: left;
    background-image: url(/images/HPRecipeTabOff2.png);
    position: relative;
    z-index: 1;
    left: -5px;
    padding-top: 4px;
    text-align: center;
    background-position: bottom;
    background-repeat: no-repeat;
    width: 85px;
    height: 17px;
    display: block;
    color: #97c2dd;
    font-size: 13px;
}

.RecTab3On {
    text-decoration: none;
    background-image: url("/images/HPRecipeTabOn2.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 13px;
    height: 17px;
    left: -10px;
    padding-top: 4px;
    position: relative;
    text-align: center;
    width: 96px;
    z-index: 3;
}

.RecTab2Off {
    text-decoration: none;
    float: left;
    background-image: url(/images/HPRecipeTabOff2.png);
    position: relative;
    z-index: 2;
    left: -5px;
    padding-top: 4px;
    text-align: center;
    background-position: bottom;
    background-repeat: no-repeat;
    width: 85px;
    height: 17px;
    display: block;
    color: #97c2dd;
    font-size: 13px;
}

.RecTab2On {
    text-decoration: none;
    background-image: url("/images/HPRecipeTabOn2.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 13px;
    height: 17px;
    left: -5px;
    padding-top: 4px;
    position: relative;
    text-align: center;
    width: 96px;
    z-index: 3;
}

.RecTab1On {
    text-decoration: none;
    float: left;
    background-image: url(/images/HPRecipeTabOn2.png);
    position: relative;
    z-index: 3;
    background-repeat: no-repeat;
    width: 96px;
    height: 17px;
    display: block;
    color: #fff;
    font-size: 13px;
    text-align: center;
    padding-top: 4px;
}

.RecTab1Off {
    text-decoration: none;
    background-image: url("/images/HPRecipeTabOff2.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    color: #97C2DD;
    display: block;
    float: left;
    font-size: 13px;
    height: 17px;
    padding-top: 4px;
    position: relative;
    text-align: center;
    width: 85px;
    z-index: 3;
}

div.scrollable {
    /* required settings */
    position: relative;
    overflow: hidden;
    width: 555px;
    height: 170px;
    /* custom decorations */
}

    /*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
    div.scrollable div.items {
        /* this cannot be too large */
        width: 20000em;
        position: absolute;
        clear: both;
    }

    /* single scrollable item */
    div.scrollable img {
        float: left;
        margin-right: 13px;
        cursor: pointer;
    }

    /* active item */
    div.scrollable .active {
        z-index: 9999;
        position: relative;
    }

/* this makes it possible to add next button beside scrollable */
div.scrollable {
    float: left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    background: url(/images/arrows.png) no-repeat;
    display: block;
    width: 29px;
    height: 49px;
    float: left;
    cursor: pointer;
    font-size: 1px;
    margin-top: 61px;
}

a.disabled {
    visibility: hidden;
}

/* right */
a.right {
    background-position: 0 -49px;
    clear: right;
    margin-right: 0px;
}

    a.right:hover {
        background-position: 0px -49px;
    }

    a.right:active {
        background-position: 0px -49px;
    }


/* left */
a.left:hover {
    background-position: 0px 0;
}

a.left:active {
    background-position: 0px 0;
}


div.Hmescrollable {
    /* required settings */
    position: relative;
    overflow: hidden;
    width: 555px;
    height: 170px;
    /* custom decorations */
}

    /*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
    div.Hmescrollable div.items {
        /* this cannot be too large */
        width: 20000em;
        position: absolute;
        clear: both;
    }

    /* single scrollable item */
    div.Hmescrollable img {
        float: left;
        margin-right: 13px;
        cursor: pointer;
    }

    /* active item */
    div.Hmescrollable .active {
        z-index: 9999;
        position: relative;
    }

/* this makes it possible to add next button beside scrollable */
div.Hmescrollable {
    float: left;
}

/* prev, next, prevPage and nextPage buttons */
a.Hmebrowse {
    background: url(/images/HmeArrows.png) no-repeat;
    display: block;
    width: 19px;
    height: 32px;
    float: left;
    cursor: pointer;
    font-size: 1px;
    margin-top: 61px;
}

a.disabled {
    visibility: hidden;
}

/* right */
a.hmeright {
    background-position: 0 -32px;
    clear: right;
    margin-right: 0px;
}

    a.hmeright:hover {
        background-position: 0px -32px;
    }

    a.hmeright:active {
        background-position: 0px -32px;
    }


/* left */
a.hmeleft:hover {
    background-position: 0px 0;
}

a.hmeleft:active {
    background-position: 0px 0;
}

.lettuce {
    float: right;
    background-image: url(/images/lettuce.jpg);
    background-repeat: no-repeat;
    width: 434px;
    height: 119px;
    display: block;
}

.opensign {
    float: right;
    background-image: url(/images/OpenBanner.jpg);
    background-repeat: no-repeat;
    width: 434px;
    height: 119px;
    display: block;
}

.region {
    float: right;
    background-image: url(/images/rtobg.jpg);
    background-repeat: no-repeat;
    width: 434px;
    height: 119px;
    display: block;
}

.InnerPnlOff {
    float: left;
    width: 180px;
    display: none;
}

.InnerPnlOn {
    float: left;
    width: 180px;
    display: block;
}

.ShopTabOn {
    width: 100px;
    height: 110px;
    background-image: url(/images/ShopTab.png);
    background-repeat: no-repeat;
    text-align: center;
    padding: 10px;
}

.ShopTabOff {
    width: 100px;
    height: 110px;
    background-image: url(/images/ShopTabOff.png);
    background-repeat: no-repeat;
    text-align: center;
    padding: 10px;
}

.SubCatOn {
    text-decoration: none;
    background-image: url(/images/SubCatOnBg.png);
    background-repeat: repeat-y;
    width: 138px;
    display: block;
}

.SubCatOff {
    text-decoration: none;
    width: 138px;
    display: block;
}

.baskethead {
    background-color: #c6c99c;
    padding: 5px;
    border-bottom: 1px dashed #b8b7a3;
    color: #333333;
    font-size: 13px;
}

.basketbot {
    background-color: #c6c99c;
    padding: 5px;
    border-top: 1px dashed #b8b7a3;
    color: #333333;
    font-size: 13px;
}

.BasketItems {
    padding-top: 4px;
    padding-bottom: 4px;
    color: #284775;
    font-size: 13px;
    padding-right: 10px;
}

.emailhidden {
    display: none;
    position: relative;
    z-index: 900;
}

.emailvisible {
    display: block;
    position: relative;
    z-index: 900;
}

.TopGreenArrow {
    float: right;
    padding-right: 6px;
    padding-top: 1px;
}

.errorSml {
    border: 1px solid #b31a24;
}

/*Section for Kaideas*/
.divKaidea {
    display: none;
    border: 1px solid #ADC2D6;
    padding-top: 0.35em;
    padding-bottom: 0.35em;
}

.divKaidea p {
    font-size: 0.65em;
    /*width: 75%;*/
    word-wrap: break-word;
}

.divKaidea img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.divKaidea.Show {
    display: block;
    animation: fadeIn ease-in 2s;
    -webkit-animation: fadeIn ease-in 2s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*Feature Artisan Section*/
#featureArtisans {
    background-image:url(/images/FoodExProdBg.jpg);width:612px; 
    background-repeat:repeat-x;
    float:left; 
    clear:both; 
    padding-bottom:15px;
    padding-top:3px; 
    background-position:10px center; 
    padding-left:6px;
}

.divArtisan {
    display: none;
    height: 130px;
    width: 110px;
    padding-right: 0.2em;
}

.divArtisan.Show {
    display: inline-block;
    animation: fadeIn ease-in 2s;
    -webkit-animation: fadeIn ease-in 2s;
}

.divArtisan span {
    font-size: 0.65em;
}

.divArtisan img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 115px;
    width: 100%;
}