@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');

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: 'Roboto', Verdana, Arial, Helvetical;
    font-size: 13px;
    text-align: center;
    overflow: scroll;
    /*
        this is ignored by other browsers, but processed by IE7 and older, so hide the extra scroll bars on the body
    */
    *overflow-x: hidden;
    *overflow-y: hidden;
    /* background-image:url('/images/JanSale.png')*/
}


.PrintOnly {display:none;}

/* this is all the header stuff */

.fixHeader {
    width: 100%;
    height: auto;
    position: fixed;
    margin: 0 auto;
    text-align: center;
    z-index: 100;
}

.fixHeaderIE7 {
    width: 100%;
    height: auto;
    position: fixed;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    top: 0px;
    left: 0px;
    z-index: 100;
    /*margin-top:-10px;*/
}

table.header {
    padding: 0px;
    border-spacing: 0px;
    min-width: 890px;
    width:95%;
    border: 0px;
    margin: 0 auto;
    vertical-align: top;
    margin-top: -1px;
}

div.header {
    padding: 0px;
    border-spacing: 0px;
    min-width: 890px;
    width:95%;
    border: 0px;
    margin: 0 auto;
    vertical-align: top;
    margin-top: -1px;
}

.SDHdr1 {
    border-width: 2px;
    background-image: url('/images/ScobiesDirect-Banner-Plain.jpg');
    width: 840px;
    height: 79px;
}

.SDHdr1870 {
    background-image: url('/images/HEADER870.png');
    width: 870px;
    height: 79px;
    padding: 0px;
    border-spacing: 0px;
}

.SDHdr1200 {
    background: url('/images/Header6.jpg') repeat-x;
    height: 79px;
    padding: 0px;
    border-spacing: 0px;
}

.SDHdr1200SN {
    background-color: White;
    height: 79px;
    padding: 0px;
    border-spacing: 0px;
    border-top:5px solid #b00808;
}

.SDHdrIPhone {
    border-width: 2px;
    height: 79px;
    background-color: navy;
}

.SJHdr1 {
    border-width: 2px;
    background-image: url('/images/ScobieJunorBanner.jpg');
    width: 840px;
    height: 79px;
}

.SDHdr1a {
    border-width: 2px;
    /*background-image: url('/images/ScobiesDirect-Banner-Plain.jpg');*/
    width: 840px;
    height: 79px;
}

.SDHdr2 {
    color: #00A400;
    font-size: 32px;
}

.SDHdr2a {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: lighter;
}

.SDHdr3 {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
}

.SDHdr4 {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bolder;
}

a[href^="tel"] {
    color: inherit;
    text-decoration: none;
}

.SDHdr4a {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 900;
}

.SDHdr5 {
    color: #FFFFFF;
    text-decoration: none;
    font-weight:bold;
    font-size: 11px;
}

a.SDHdr5 {
    color: #FFFFFF;
    text-decoration: none;
    font-weight:bold;
    font-size: 11px;
}

.SDHdr5:hover {
    color: green;
    text-decoration: none;
    font-weight:bold;
    font-size: 11px;
}

.SDHdrSearchHolder {
    width:150px;
}

.SDHdrSearchBox {
    box-sizing: border-box;
    top: 0;
    left: 0;
    display: block;
    width: 80%;
    line-height: 15px;
    padding: 6px 10px 6px 0;
    margin: 0;
    border: 0;
    height: 33px;
    font-size: 15px;
    background: 0 0;
    color: #111;
    outline: 0;
    -webkit-appearance: none;
    box-shadow: none;
    text-indent: 8px;
    direction: ltr;

}

.Breadcrumb {
    color: #000000;
    text-decoration: none;
    background-color: #FFFFFF;
    padding-right: 5px;
    font-size:11px
}

.Breadcrumb:hover {
    color: green;
    text-decoration: underline;
    font-size:11px
}

.RedHold {
    background-color:#ff0000;
    color:white;
    padding:1px 3px 1px 3px;
    border-radius:5px;
    margin:2px; 
    cursor:pointer
}

.AmberHold {
    background-color:#ffbf00;
    color:darkslategrey;
    padding:1px 3px 1px 3px;
    border-radius:5px;
    margin:2px; 
    cursor:pointer
}

.GreenHold {
    background-color:forestgreen;
    color:white;
    padding:1px 3px 1px 3px;
    border-radius:5px;
    margin:2px; 
    cursor:pointer
}

.GrayHold {
    background-color:gray;
    color:white;
    padding:1px 3px 1px 3px;
    border-radius:5px;
    margin:2px; 
    cursor:pointer
}

.PurpleHold {
    background-color:purple;
    color:white;
    padding:1px 3px 1px 3px;
    border-radius:5px;
    margin:2px; 
    cursor:pointer
}

.YellowHold {
    background-color:yellow;
    color:black;
    padding:1px 3px 1px 3px;
    border-radius:5px;
    border:1px solid black;
    margin:2px; 
    font-weight:bold;
    cursor:pointer
}

/* this is all the homepage content stuff */

    .CustHomeSliderHolder{
        width:560px;
        float:left;
        margin-right:20px;
    }

     .CustHomeNewSlider{
        width:100%;
        max-width:560px;
      }

    .HomePageTileDiv {
        width:266px; 
        height:150px;
        margin:0 auto;
        margin:0px 0px 20px 0px;
        color:gray;
        border:1px solid lightgray;       
    }

    .HomePageTileImgDiv {
        width:100%;
        height:100%;
        /*height:140px*/
    }

    .HomePageTileText {
        font-weight:bold; 
        color:gray; 
        padding:7px 5px 0px 5px;
        /* 
        height:30px; 
        font-size:11px; */
    }

    .homePageTileImg {
        max-height: 100px;
        max-width: 100px;
    }

    .homePageTileTxt {
        color: red;
        font-size: 14px;
        font-weight: bold;
    }

/* this is all the std content stuff */

    table.content {
        padding: 0px;
        border-spacing: 0px;
        width: 870px;
        height:auto;
        border: 0px;
        margin: 0 auto;
        margin-top: -1px;
        background-color: White;
    }

    h1 {
        font-size: 16px;
        text-decoration: none;
        font-weight: bold;
        margin:3px 3px 5px 3px;
    }

    h1:hover{
        text-decoration: none;
        color:green

    }

    h2 {
        color: #000000;
        font-size: 16px;
        text-decoration: none;
        font-weight: bold;
        margin: 0px;
        margin-bottom: 2px;
        margin-top: 5px;
    }

    h3 {
        font-size: 15px;
        font-weight: bold;
    }

    img {border: 0px;}

    table {
        border-spacing: 0;
        border-collapse: collapse; 
        font-size: 11px;
        color: #000000;
        font-weight: normal;
        text-decoration: none;
    }

    tr {
        padding: 0px;
        margin: 0px;
    }

    td {
        font-size: 11px;
        color: #000000;
        font-weight: normal;
        text-decoration: none;
        padding: 0px;
    }


    /* 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;
        border:1px solid gray;     
    }

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

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

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

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

    table.ComTablePaddingNoBorder th, table.ComTablePaddingNoBorder td, table.ComTablePaddingNoBorder a {
        border-spacing: 0;
        border-collapse: collapse;  
        padding:2px 5px 2px 5px;        
    }


   .BasketDropDnTablePadding {
        border-spacing: 0;
        border-collapse: collapse;  
    }

    table.BasketDropDnTablePadding th, table.BasketDropDnTablePadding td {
        padding:1px;
        margin:0px;
        border:0px solid gray;
        vertical-align:top;
        font-size:10px
    }

   table.BasketDropDnTablePadding a {
        padding:1px;
        margin:0px;
        border:0px solid gray;
        vertical-align:top;
        font-size:10px
    }


    p {
        font-size: 11px;
        color: #000000;
        font-weight: normal;
        text-decoration: none;
    }

    a {
        font-size: 11px;
        color: #000000;
        font-weight: normal;
        text-decoration: underline;
    }

    a:hover {
        color: green;
        text-decoration: underline;
    }

    .a-NoUnderline {
        text-decoration: none;
    }


    li {
        font-size: 11px;
        color: #000000;
        font-weight: normal;
        text-decoration: none;
    }

    li.offer {
        padding: 7px;
        color: #000000;
        font-size: 11px;
        font-weight: normal;
        }

    li.offerPrc {
        padding: 7px;
        color: Red;
        font-size: 14.5px;
        font-weight: bold;
        }

    select {
        font-size: 11px;
        color: #000000;
        font-weight: normal;
        text-decoration: none;
    }

    .SubCat {
        color: #000000;
        font-size: 11px;
        text-align: left;
        text-decoration: none;
    }

    .SubCat1 {
        color: #000000;
        text-align: left;
        text-decoration: none;
    }

    .SubCatHdr {
        width: 200px;
        height: 100%;
        color: white;
        font-size: 11px;
        font-weight: bold;
        text-align: left;
        text-decoration: none;
        background-image: url('/images/BlueGrad.gif');
    }

    .txtListPrc {
        color: #000000;
        font-size: 11px;
        text-decoration: none;
    }

    .txtListPrcOver {
        color: #009900;
        font-size: 11px;
        text-decoration: none;
        font-weight: bold;
        cursor: default;
    }

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

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

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

    a:hover.SubCat1 {
        color: #009900;
        text-decoration: underline;
    }

    .link {
        color: #000000;
        font-size: 11px;
        text-align: left;
        text-decoration: none;
    }

    a:hover.link {
        color: #009900;
        text-decoration: underline;
    }

    .SelectedSubCat {
        color: #FF0000;
        font-size: 7.5pt;
        FONT-WEIGHT: bolder;
        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-weight: bolder;
        cursor: pointer;
    }

    .BigHdr {
        color: #000000;
        font-size: 15px;
        text-decoration: none;
        font-weight: bolder;
    }

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

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

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

    .HugeHdr {
        color: #000000;
        font-size: 25px;
        text-decoration: none;
        font-weight: bolder;
    }

    a:hover.Hdr {
        color: #009900;
        font-size: 11px;
        text-decoration: underline;
        font-weight: bolder;
        cursor: pointer;
    }

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

    a:hover.BigHdr {
        color: #009900;
        font-size: 15px;
        text-decoration: underline;
        font-weight: bolder;
        cursor: pointer;
    }

    .techspec {
        color: #000000;
        text-decoration: none;
        font-size: 11px;
    }

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

    .offerlink {
        font-weight: bold;
        text-decoration: underline;
        color: #000999;
        background-color: #FFFFFF;
    }

    .offerlinkOver {
        cursor: pointer;
        font-weight: bold;
        text-decoration: underline;
        color: #FFFFFF;
        background-color: #000999;
    }

    .offerlink:hover {
        font-weight: bold;
        text-decoration: underline;
        color: white;
        background-color: #000999;
    }

    .pageIdx {
        padding-left: 2px;
        padding-right: 2px;
        font-weight: bold;
        font-size: 11px;
        text-decoration: underline;
        color: #000999;
        background-color: #FFFFFF;
    }

    .pageIdxSel {
        padding-left: 2px;
        padding-right: 2px;
        font-weight: bold;
        font-size: 11px;
        color: #000000;
    }

    .shoplink {
        color: #000000;
        font-size: 11px;
        text-align: left;
        text-decoration: none;
    }

    shoplink:hover {
        color: #009900;
        text-align: left;
        text-decoration: none;
    }

    .fakeHyper {
        font-weight: bold;
        text-decoration: underline;
        color: #000999;
        background-color: #FFFFFF;
        cursor: pointer;
    }

    .fakeHyperOver {
        cursor: pointer;
        font-weight: bold;
        text-decoration: underline;
        color: white;
        background-color: #000999;
    }

    .txt {
        color: #000000;
        font-weight: normal;
        text-decoration: none;
    }

    .boldtxt {
        font-weight: bold;
        font-size: 11px;
        color: #000000;
    }

    .Hdrtxt {
        font-weight: bold;
        font-size: 11px;
        color: #FFFFFF;
    }


/* this is all the sidenav  stuff */

    .menuDiv {
        position: absolute;
        width: 200px;
        background-color: #F5F5F5;
        border: 1px solid gray;
        font: normal 11px Verdana;
        line-height: 18px;
        z-index: 101;
        display: none;
        padding-bottom: 5px;
        text-align: left;
        overflow: hidden;
        /*
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        */
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 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;
    }

    /* CSS ninja Tree menu styles for side nav */
    ol.tree {
        padding: 0 0 0 15px;
        width: 100%;
        list-style: none;
        margin-top: 3px;
    }

    li.sidenav {
        position: relative;
        margin-left: -15px;
        list-style: none;
    }

    li.file {
        margin-left: -1px !important;
    }

    li.file a {
        color: #fff;
        padding-left: 10px;
        text-decoration: none;
        display: block;
    }

    li.file a[href *= '.pdf'] {
        background: url('/images/CSSTree/document.png') no-repeat 0 0;
    }

    li.file a[href *= '.html'] {
        background: url('/images/CSSTree/document.png') no-repeat 0 0;
    }

    li.file a[href $= '.css'] {
        background: url('/images/CSSTree/document.png') no-repeat 0 0;
    }

    li.file a[href $= '.js'] {
        background: url('/images/CSSTree/document.png') no-repeat 0 0;
    }

    li input {
        position: absolute;
        left: 0;
        margin-left: 0;
        opacity: 0;
        z-index: 2;
        cursor: pointer;
        height: 1em;
        width: 1em;
        top: 0;
    }

    li input + ol {
        background: url('/images/CSSTree/toggle-small-expand.png') no-repeat 40px -3px;
        /* margin: -0.938em 0 0 -44px; 15px */
        margin: -12px 0 0 -44px; /* 15px */
        height: 12px;
    }

    li input + ol > li {
        display: none;
        margin-left: -14px !important;
        padding-left: 1px;
    }

    li label {
        cursor: pointer;
        display: block;
        padding-left: 17px;
        padding-top: 1px;
        padding-bottom: 1px;
    }

    li input:checked + ol {
        background: url('/images/CSSTree/toggle-small.png') no-repeat 40px 0;
        /*margin: -1.25em 0 0 -44px;  20px */
        margin: -15px 0 0 -44px; /* 20px */
        padding: 16px 0 0 60px;
        height: auto;
    }

    li input:checked + ol > li {
        display: block;
        margin: 2px 0 2px; /* 2px */
    }

    li input:checked + ol > li:last-child {
        margin: 0 0 0.063em; /* 1px */
    }
/* end of sidenav  stuff */

    a.Desc {
        color: Blue;
        text-decoration: none;
    }

    a:hover.Desc {
        text-decoration: underline;
    }

/* this is all the basket  stuff */

    .basketTable {
        border-collapse: collapse;
        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;
        padding: 3px;
    }

    .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;
        text-align: left;
        padding: 3px;
    }

    .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;
        padding: 3px;
    }

/* end of basket stuff */

/* This is the tiles for tile view of prod cats */
    
    .ProdGroupImage {
        width:415px;
        height:210px;
        overflow:hidden;
        float:left;
        margin:8px 8px 0px 8px 
    }

    .ProdGroupTile {
        width:200px;
        display:inline-block;
        margin:8px;
    }

    .ProdGroupTileImg {
        width:100%;
        height:73px; 
        overflow:hidden;
    }

/* end of tile view */

/* This is the tiles for tile view of items */

    .TileViewOfferImage {
        height:235px;       
        width:385px;
        display:inline-block;
        text-align:left;
        padding:0px;        
        margin:10px 10px 10px 10px;        
        vertical-align:top;
        overflow:hidden      
    }

    .PlayingCard {
        height:250px;   /* height increased from 230px - DF 17/09/2019 */    
        width:190px;
        padding:0px;
        border-radius:7px;      
        border:1px solid silver;
        margin:5px;
        /* box-shadow:10px 10px 5px #888;
        box-shadow:5px 5px 2px lightgray; */
        overflow:hidden; 
    }

    .PlayingCardImg {
        height:150px;               
        width:100%;        
        overflow:hidden; 
        text-align:center; 
        margin:0 auto; 
        margin-bottom:10px;
        border-radius:7px 7px 0px 0px;
    }
/* end of  tile view of items */

    .FastGrid {
        max-width:650px; 
        overflow:auto
    }

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

    td1.offer {
        font-size: 7.5pt;
        text-decoration: none;
        color: #000000;
    }

    td.Header {
        font-weight: Bold;
        font-size: 11px;
        text-decoration: none;
        color: #000000;
    }

    .eshotGOLD {
        font-size: 48px;
        color: #F1D92B;
    }

    .eshotWHITE {
        font-size: 24px;
        color: #FFFFFF;
    }

    .eshotBLACK {
        font-size: 18px;
        color: #000000;
    }

    .fakeLink {
        text-decoration: underline;
        cursor: pointer;
        color: blue;
    }

    .fakeLink2 {
        cursor: pointer;
        color: #990000;
    }

    .fakeLink2:hover {
        text-decoration:underline
    }


    /* this is the style for the blue 20px shading at the top of a cell */
    .BlueGrad {
        height: 20px;
        /*background-image: url('/images/BlueGrad.gif');*/
        background-image: url('/../../../images/Header6.jpg');
        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;
    }

    .GrayBar200px {
        background-image: url('/Images/GreyBar200.jpg');
        text-align: left;
        width: 200px;
        height: 23px;
        float: left;
        color: #FFFFFF;
        text-align: center;
        padding-top: 0px;
        margin: 0px;
    }

    .GrayBar177px {
        background-image: url('/Images/GrayBar.jpg');
        text-align: left;
        width: 100% /* end of  tile view of items calc(100% - 23px)*/;
        height: 23px;
        float: left;
        color: #FFFFFF;
        text-align: center;
        padding-top: 0px;
        margin: 0px;
    }

    .Dalebrook177px {
        background-color:#93b6bb;
        text-align: left;
        width: 100% /* end of  tile view of items calc(100% - 23px)*/;
        height: 23px;
        float: left;
        color: #FFFFFF;
        text-align: center;
        padding-top: 0px;
        margin: 0px;
    }

    .Scotnet177px {
        background-color:#e20000;
        text-align: left;
        width: 100% /* end of  tile view of items calc(100% - 23px)*/;
        height: 23px;
        float: left;
        color: #FFFFFF;
        text-align: center;
        padding-top: 0px;
        margin: 0px;
    }

    .GrayBar {
        background-image: url('/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('/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-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;
    }

    .GrayBar177pxlink:hover {
        color: white;
        text-decoration: underline;
    }


    .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('/images/GreyGrad.gif');
        vertical-align: top;
        text-align: center;
    }

    .GrayGradLarge {
        padding: 7px;
        background-image: url('/images/GrayGrad330.gif');
        vertical-align: top;
        text-align: center;
    }

    .ChartHolder {
        width: 640px;
        border: 1px black solid;
        text-align: left;
        /*overflow-x: auto;*/
    }

    .GreydOutImage {
        filter: alpha(opacity=25);
        moz-opacity: .25;
        opacity: .25;
    }

    .GreydOutDiv {
        filter: alpha(opacity=50);
        moz-opacity: 0.5;
        opacity: 0.5;
    }

/* Style for the Live chat page */
    .ChatBox {
        font-size: 11px;
    }

    .ChatButton {
        font-size: 11px;
    }

    .VisitorChat {
        background-color: Silver;
    }

    .ChatLines {
        display: inline-block;
        height: 40px;
        width: 70px;
    }

/* end of chat */


    td.side_content {
        padding: 0px;
        padding-left: 10px;
        border-spacing: 0px;
        width: 195px;
        border: 0px;
        margin: 0 auto;
        margin-top: -1px;
        vertical-align: text-top;
        max-width: 195px;
    }

    td.main_content {
        width: 650px;
        max-width:95%;
        vertical-align: top;
        text-align:left
    }

    td.main_contentAdv {
        width: 650px;
        padding-left: 10px;
    }

    td.main_contentHome {
        display: table-cell;
        vertical-align: top;
        width: 860px;
        text-align: center;
        /*padding-bottom:20px;*/
    }

    td.main_contentChkOut {
        display: table-cell;
        vertical-align: top;
        width: 860px;
        text-align: left;
        /*padding-bottom:20px;*/
    }

    #tdHdrNav {
        height: 35px;
        width: 100%;
        background-image: linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 19%);
        background-image: -o-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -moz-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -ms-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-gradient( linear, left bottom, left top,color-stop(0.23, #F5F5F5), color-stop(0.89, #D5D9D6 ) );
    }

    #tdHdrNavSN {
        height: 35px;
        width: 100%;
        background-image: linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 19%);
        background-image: -o-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -moz-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -ms-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-gradient( linear, left bottom, left top,color-stop(0.23, #F5F5F5), color-stop(0.89, #D5D9D6 ) );
    }

    .tdGrad {
        background-color: #F5F5F5;
        height: 20px;
        width: 100%;
        background-image: linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 19%);
        background-image: -o-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -moz-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -ms-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, #F5F5F5), color-stop(0.89, #D5D9D6 ) );
    }

    .GrayGrad_HomePage {
        color: gray;
        text-decoration: none;
        background-color: #F5F5F5;
        background-image: linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 19%);
        background-image: -o-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -moz-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -ms-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, #F5F5F5), color-stop(0.89, #D5D9D6 ) );
    }

    .OrangeGrad_HomePage {
        color: gray;
        text-decoration: none;
        background-color: Orange;
        background-image: linear-gradient(bottom, Orange 50%, #D5D9D6 19%);
        background-image: -o-linear-gradient(bottom, Orange 50%, #D5D9D6 89%);
        background-image: -moz-linear-gradient(bottom, Orange 50%, #D5D9D6 89%);
        background-image: -webkit-linear-gradient(bottom, Orange 50%, #D5D9D6 89%);
        background-image: -ms-linear-gradient(bottom, Orange 50%, #D5D9D6 89%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, Orange), color-stop(0.89, #D5D9D6 ) );
    }

    .GreenGrad_HomePage {
        color: White;
        text-decoration: none;
        background-color: #005500;
        background-image: linear-gradient(bottom, #005500 50%, #D5D9D6 19%);
        background-image: -o-linear-gradient(bottom, #005500 50%, #D5D9D6 89%);
        background-image: -moz-linear-gradient(bottom, #005500 50%, #D5D9D6 89%);
        background-image: -webkit-linear-gradient(bottom, #005500 50%, #D5D9D6 89%);
        background-image: -ms-linear-gradient(bottom, #005500 50%, #D5D9D6 89%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, #005500), color-stop(0.89, #D5D9D6 ) );
    }

    .BlackGrad_HomePage {
        color: White;
        text-decoration: none;
        background-color: #000000;
        background-image: linear-gradient(bottom, #000000 50%, #D5D9D6 19%);
        background-image: -o-linear-gradient(bottom, #000000 50%, #D5D9D6 89%);
        background-image: -moz-linear-gradient(bottom, #000000 50%, #D5D9D6 89%);
        background-image: -webkit-linear-gradient(bottom, #000000 50%, #D5D9D6 89%);
        background-image: -ms-linear-gradient(bottom, #000000 50%, #D5D9D6 89%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, #000000), color-stop(0.89, #D5D9D6 ) );
    }

    .WhiteGrad_HomePage {
        color: gray;
        border: solid 1px silver;
        text-decoration: none;
        background-image: linear-gradient(bottom, #d4d2d4 0%, #FFFFFF 33%);
        background-image: -o-linear-gradient(bottom, #d4d2d4 0%, #FFFFFF 33%);
        background-image: -moz-linear-gradient(bottom, #d4d2d4 0%, #FFFFFF 33%);
        background-image: -webkit-linear-gradient(bottom, #d4d2d4 0%, #FFFFFF 33%);
        background-image: -ms-linear-gradient(bottom, #d4d2d4 0%, #FFFFFF 33%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, #d4d2d4), color-stop(0.33, #FFFFFF) );
    }

    .SelectedHdrNav {
        position: relative;
        top: 5px;
        z-index: 2000;
        float: left;
        width: auto;
        height: 27px;
        min-height: 27px;
        line-height: 27px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        padding-left: 5px;
        padding-right: 5px;
        background-image: linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 19%);
        background-image: -o-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -moz-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -ms-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6 89%);
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, #F5F5F5), color-stop(0.89, #D5D9D6 ) );
    }

    .HdrNav {
        float: left;
        width: auto;
        height: 25px;
        min-height: 25px;
        line-height: 25px;
        text-align: center;
        font-weight: bold;
        cursor: pointer;
        padding-left: 5px;
        padding-right: 5px;
        position: static;
    }


 /* Main Home Page Stage */

    #divStage {
        width: 865px;
        height: 170px
    }

    #divGridStage img {
        width: 635px;
    }

    #divStage img {
        position: absolute;
        left: 0;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        width: 865px;
        height: 170px
    }

    #divStage img.opaque {
            opacity: 1;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            filter: alpha(opacity=100);
        }

    #divStage img.fullOpaque {
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
        }


    #divStageCustHome {
        width: 620px;
    }

    #divStageCustHome img {
        position: absolute;
        left: 0;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        width: 640px;
    }

    #divStageCustHome img.opaque {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
    }

    #divStageCustHome img.fullOpaque {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }

    .HomeStageSelected {
        text-decoration: underline;
    }

    .StageLink, .StageLink:visited, .StageLink:hover {
        text-decoration: none;
        font: inherit;
        color: inherit;
    }

 /* End of Main Home Page Stage */


    .fixHeaderSpacer {
        height: 112px;
    }

    .ItemInfo_ItemImg {
        max-width: 95%;
        width: 500px; 
        height: auto;
        min-height: 200px;
        max-height:700px;
        float: left;
        vertical-align: top;
        overflow: hidden;
        border:1px solid lightgray; 
        margin-bottom:10px
    }

	/*
	.ItemInfo_ItemImg_900Wide{
        max-width: 95%;
        width: 900px; 
        height: auto;
        min-height: 200px;
        max-height:1000px;
        float: left;
        vertical-align: top;
        overflow: hidden;
        border:1px solid lightgray; 
        margin-bottom:10px
	}
	*/

    .ItemInfo_Button {
        display: inline-block;
        margin-right: 75px;
    }

    .closeDiv {
        font-size: 18px;
    }

    .DetailedView_Desc {
        border: solid 0px black;
        overflow: hidden;
        zoom: 1;
    }

    .AdvSearch_Cols {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;

        -webkit-column-gap: 25px;
        -moz-column-gap: 25px;
        column-gap: 25px;
    }

    .MenuGrid_Cols {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;

        -webkit-column-gap: 10px;
        -moz-column-gap: 10px;
        column-gap: 10px;
    }


    .AlsoLink {
        text-decoration: none;
        color: black;
    }

    .AlsoLink:hover div {
        background-color: Aqua;
        text-decoration: underline;
        color: green;
    }

    .chkoutPayDetails {
        margin-top: -100px;
    }

    .chkoutDiv {
        padding-left: 30px;
        padding-right: 30px;
    }

    th.LVQtyCol {
        width: 80px;
    }

    .LVItemNo {
        display: none;
    }

    .LVItemNo2 {
        display: inline;
    }


 /* recipe stuff */
    .RecipeMenuContents {
        width:500px;
        max-width:100%;
        margin-right:10px;
        float:left;
        box-sizing: border-box;
    }

     .RecipeRHMenu {
        width:140px; 
        min-width:140px; 
        height:auto; 
        float:right;
        box-sizing: border-box;
     }

    #olRecipes {
        column-count: 3;
        -moz-column-count: 3;
        -webkit-column-count: 3;
    }

    .RecipeTile {
        padding:0px;
        width:190px;
        border-radius:7px;
        overflow:hidden;
        height:250px;
        float:left;
        border:1px solid silver;
        margin:20px;
        background:white;
        box-shadow:10px 10px 5px #888
    }

    .RecipeGroupImage {
        padding:0px;
        width:190px;
        border-radius:7px;
        overflow:hidden;
        height:230px;
        float:left;
        border:1px solid silver;
        margin:20px;
        background:#FFFFA5;
        box-shadow:10px 10px 5px #888
    }

     .RecipeNotepad {
        border:1px solid silver;
        border-radius:10px;
        width:90%;
        float:left;
        padding:15px;
        vertical-align:top;
        margin:0 auto;
        box-shadow:10px 10px 5px #888;
        /* background:#FFFFA5; */
        background-color:white;
        margin-left:20px;
    }

    .RecipeNotepadSpring {       
        width:100%;
        height:25px;
        background-image: url('/images/Notepad.JPG');
        background-size:200px 30px;
        margin-top:-25px
    }

    .recipeHomeDivs {
        width: 230px;
        height: calc(230px * 0.63);
        display: inline-block;
        vertical-align: top;
        overflow:hidden
    }

    .RecipeServingSuggestion{
        width:300px;
        max-height:200px;
        overflow-y:hidden;
        float:right;
        vertical-align:top;
    }

    .CheckOutBoxes {
        float:left;
        width:350px;
        height:auto;
        border:1px solid #888888;
        margin:10px;
        border-radius:10px;
        overflow:hidden
    }

    .CheckOutHeader{
     width:100%;
     height:25px;
     line-height:25px;
     color:white;
     padding-left:15px;
     box-sizing: border-box;
     text-align:left;
     font-weight:bold;
     vertical-align:middle;
     background-image: url('/images/BlueGrad.gif');
    }

 /* end of recipe stuff  */

    .your-flipClock{
        zoom: 0.6;
        -moz-transform: scale(0.65);
        width:650px;
        margin:0 auto;
    }

 /* ItemInfo stuff  */
    .AlsoAvalableInHolder{
         margin-bottom:10px;
         margin-left:10px;
         padding:10px;
         min-width:220px;
         height:auto;
         float:left;
         background-color:#F5F5F5;
         border-radius:15px;
    }

  .AlsoAvalableInBox {
      padding:2px;
      height:25px;
      width:35px;
      line-height:25px;
      float:left;
      border:1px solid silver;
      text-align:center;
  }

 /* copied from foodmaker css file for flavourprofiles page. */
    .RecipeConcept{
        width:100%;
        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:3; 
        column-gap: 10px; 
    }

    .spacerBar {
        height:90px;
        width:auto;
    }

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

    .MainContainer{
        width:900px;
        margin: 0 auto;
    }

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

/* KitBuilder Stuff*/

    .KitBuilderImage {
         width:345px;
         height:220px;
         float:left;
         margin:5px 5px 5px 0px;
         border:1px solid #93b6bb
    }

    .KitBuilderText {
         width:260px;
         height:190px;
         float:left;
         margin:5px 0px 5px 5px;
         border:1px solid #93b6bb;
         background-color:#93b6bb;
         color:white; 
         padding:15px;
         position: relative
    }

    .KitBuilderButton {
        width:100px; 
        height:20px; 
        line-height:20px; 
        vertical-align:middle; 
        padding:5px; 
        margin:10px;
        background-color:black; 
        color:white; 
        text-align:center;
        font-style: italic;
        position: absolute; 
        right: 0;
        bottom: 0;
    }

    .DigitalSignButton {
        width:100px; 
        height:20px; 
        line-height:20px; 
        vertical-align:middle; 
        padding:5px; 
        margin:10px;
        background-color:#ffd32f; 
        color:white; 
        text-align:center;
        font-style: italic;
        position: relative; 
        right: 0;
        bottom: 0;
    }

   /* h1 {
        color:white;
	    font-size: 36px;
        letter-spacing:5px;
	    text-decoration: none;
	    font-family: Verdana, Arial, Helvetical;
	    font-weight: bold;
	    margin: 10px 0px 5px 10px
    }
     
 */

.btn {
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333333;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    
}

btn:hover {
    text-decoration: none;
}

/* end foodmaker css 


/* Cool Menu Dropdown CSS to replace JS - Mar 17*/
    .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; 
        font-size:13px;     
    }

    .dropbtnMnu a{           
        text-decoration:none; 
        font-size:13px; 
        font-weight:bold;
    }

    .dropbtnMnu a:hover{
        background:none;                
        text-decoration:none;
        font-size:13px; 
        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 {
        /*display: none;*/
  
        position: absolute;
        
        /*background-color: #f9f9f9;*/
        line-height:18px;        
        background-color:white;
        min-width:150px;
        width:auto;
        border:1px solid silver;
        text-align:left;

        /*width:200px;*/
        
        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 {
        color: black;
        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;
    }

    /* 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 */

    .CustHomePanel{
        width:250px;
        float:right;
        text-align:center;
        margin:0 auto;
        background-color:#f6f6f6;
        padding-bottom:20px
    }

   .blurb {
        margin:10px; 
        padding:5px 10px 5px 10px; 
        float:left; 
        width:260px; 
        height:90px; 
        border:1px solid gray; 
        border-radius:10px
    }

/* Start of transition stuff*/

    .fadeItIn {
        opacity:0;

    /* these are the transition settings*/
        animation: fadein;
        animation-duration: 3s;
        animation-delay: 0s;
        animation-fill-mode:forwards;
    }

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

/* End of transition stuff*/

    .ProductsTable2 {
        width:660px;
        max-width: 660px;
        height:250px;
        white-space:nowrap;
        overflow-x:auto;
        overflow-y:hidden;        
    }

    #MainImg1, #MainImg{
        max-width:100%;  
        max-height:450px;
		min-height:370px;                       
    }


    .PriceBox{
        width:226px;
        height:auto;
        float:left;
        margin-left:10px;
        margin-bottom:10px;
        padding:10px;      
        border-radius:15px;
        background-color:#F5F5F5;
    }
    
    .RecipeBox{
        margin-left:10px;
        margin-bottom:10px;
        padding:10px;  
        width:216px;
        height:auto;
        border:solid 0px red;
        float:left;
        background-color:#F5F5F5;
        border-radius:15px;
    }

     .FeaturedItem {
        margin-left:5px;
        display:inline-block;
        text-align:left;
        vertical-align:top;
        height:100%;
        width:250px;
        max-width:250px;
        padding-left:7px       
     }


/* Old styles - but might still be used */
    .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-weight: bolder;
    }
    #activeTabHold {
        width: 500px;
        left: 50%;
        top: 25%;
        margin-left: -266px;
        padding: 5px;
        background-color: #fff;
        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;
    }

    #activeTabHold650 {
        width: 630px;
        left: 50%;
        /*top:25%;*/
        margin-left: -266px;
        padding: 5px;
        background-color: #fff;
        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;
    }

    .ulFoot {
        list-style-type: none;
        padding: 0;
        text-align: left;
        color: Silver;
        margin-top: 3px;
        margin-left: 0px;
    }

    .SiteFooter {
        margin: 0 auto;
        width: 100%;
        background-color: #F5F5F5;
    }

    .ulFoot li {
        color: Gray;
    }

    .ulFoot li a {
        color: Gray;
        text-decoration: none;
    }

    .ulFoot li a:hover {
        color: Gray;
        text-decoration: underline;
    }

    .ulFoot li:before {
        content: "- ";
    }

    .ulFoot li.fakeLi:before {
        content: "";
    }

    .TrackCols {
        display: none;
    }

    /* google font*/
    .OwnOffer {
        font: 400 18px/1.2 'Merienda One', Helvetica, sans-serif;
        color: rgba(0,0,0,0.7);
        text-shadow: 3px 3px 3px #fff;
    }

    .OwnOffer12 {
        font: 400 12px/1.2 'Merienda One', Helvetica, sans-serif;
        color: rgba(0,0,0,0.7);
        text-shadow: 3px 3px 3px #fff;
    }

/* End of old shite*/

/*Strange Size Stuff*/

   #divStage320 {display: none;}
   
   #ScotnetHome320 {display:none;}

   #tdHdrNav320 {
        display: none;
    }

    .SDHdrHdrContent320 {
        display: none;
    }

    table.MobileViewChoice {
        /*width:800px;*/
        display: none;
    }

    table.PhoneOnly {
        display: none;
    }

    .ShowOnPhoneOnly{
        display:none;
    }

    .Video{
        padding-left:25px; 
        padding-top:10px;
        float:left; 
        width:500px;
    }

    .ShortProdDesc {display: none;}

	.AlsoBought {
		width: 95%;
		max-width: 1210px;
		height: 250px;
		white-space: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
	}


 /*====================different screen css=======================*/


@media only screen and (min-width : 250px) and (max-width : 767px) {
    .NoDisplayOnPhone {display: none;}
    .ShortProdDesc {display: block; max-height:20px; overflow-y: scroll;}
    .NoDisplay {display:none;}
    .Xmas{display:block}
    .Christmas{display:none}
    .FeaturedItem {display:none}   
    .DropdownWidth {width:800px}
    .DropDownDiv {width:190px;}

    .ItemInfoDesc{
        width:95%;
        max-width:95%;
        height:auto;
        margin: 0 auto;
    }

    table.content {
        width:100%;
        margin:0 auto
    }

    td.main_content{
        width:97%;
        margin:0 auto;
        text-align:center;
        padding:0px;
    }

    td.main_contentBasket{
        width:97%;
        margin:0 auto;
        text-align:center;
        padding:5px;		
    }
    td.side_content {display:none;}
    
	.TileViewOfferImage {width:94%;}

    .PlayingCard {
        width:168px;
        height:210px;
        max-height:210px; 
        margin:10px 7px 10px 7px;
        font-size: 12px;
    }

    .PlayingCardImg {height:130px;} 

    .ProdGroupTile {width:45%;max-width:250px}

    .ProdGroupTileImg {height:55px}

    #MainImg1, #MainImg{
        max-width:95%;  
        max-height:300px;
		min-height:200px;                       
    }

    .ItemInfo_ItemImg {
        width: 95%;
        max-width: 95%;
        float:none;
        margin: 0 auto;
    }

    .PriceBox {
        float:none;      
        margin:0 auto;
        margin-bottom: 10px !important;
    }

    .AlsoAvalableInHolder{
        float:none;
        text-align:center;
        margin:0 auto;
        width:95%;
        max-width:300px;
        min-height:45px;
    }

    .AlsoAvalableInSlider {
        width:400px;
    }

    .AlsoAvalableInBox {
      height:30px;
      width:50px;
      line-height:30px;
    }

    .RecipeBox {        
        width:90%;
        margin-top:10px;
        margin-left:0px;
        margin-bottom:10px;
        padding:10px;
    }
    
    .RecipeMenuContents {
        width:97%;
        padding:10px;
        float:none;
        display: inline-block;
        box-sizing: border-box;
    }

    .RecipeRHMenu {
        width:250px; 
        max-width:250px; 
        height:auto; 
        float:none;
        margin:0 auto;
     }

     .RecipeTile {
        float:none;
        margin:0 auto;
        margin-top:10px;
        margin-bottom:20px;
    }

    
    .RecipeNotepad {
        border:1px solid silver;
        border-radius:10px;
        width:80%;
        float:left;
        padding:15px;
        vertical-align:top;
        margin:0 auto;
        box-shadow:10px 10px 5px #888;
        /* background:#FFFFA5; */
        background-color:white;
        margin-left:20px;
    }

    .RecipeConcept {column-count:1;}


    .KitBuilderImage {
         float:none;
    }

    .KitBuilderText {
        margin:0 auto;
        width:90%;
        height:190px;
        margin-bottom:20px
    }

   #divStage320{        
        position:relative;        
        width:95%;
        text-align:center;
        margin:0 auto;
        display:block;
        height:85px;                        
    }

    #ScotnetHome320{
        display:table-cell;
    }


    #divStage320 img.opaque {
      opacity:1;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);   
    }

    #divStage320 img.fullOpaque {
      opacity:0;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
    }

    #divStage320 img {
      position:absolute;
      left:0;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
      opacity:0;
      -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);  
    }

    .HomePageTileDiv {
        width:95%;
        height:auto;
        margin:0 auto;
        margin-bottom:10px;
        border:0px
    }

    #ItemImage {max-width:290px;}           
    .Breadcrumb {display:none;}
    table.MobileViewChoice {display:none;}
   
    td.main_contentAdv{
        width:300px;
        margin:0 auto;
        text-align:center;
        border:solid 0px red;
        padding-left:10px;
    } 
    
    .ShopDesc {
        font-size:9.5px;
        text-align:left;
    }

    .ShopImg {
        width:58px;
        height:46px;
    }

    #tdHdrNav {display:none;}
    #tdHdrNavSN {display:block;}
   
    .SDHdr1870 {background-image: url('/images/HEADER320.png');}   
     
    .SDHdrHdrContent {display:none;}    
   
    #tdHdrNav320{
        display:table-cell;
        padding-left:10px;
        height:30px;
        width:100%;
        text-align:center;
        background-image: linear-gradient(bottom, #F5F5F5 50%, #D5D9D6  19%);
        background-image: -o-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6  89%);
        background-image: -moz-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6  89%);
        background-image: -webkit-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6  89%);
        background-image: -ms-linear-gradient(bottom, #F5F5F5 50%, #D5D9D6  89%);

        background-image: -webkit-gradient(
	        linear,
	        left bottom,
	        left top,color-stop(0.23, #F5F5F5),
	        color-stop(0.89, #D5D9D6 ));
    }

    .menuDiv {
	    position: absolute;
	    width: 220px;
	    background-color: #F5F5F5;
	    border: 1px solid gray;
	    font: normal 11px Verdana;
	    line-height: 16px;
	    z-index: 100;
	    display: none;
	    padding-bottom: 5px;
	    text-align:left;
        overflow: hidden;
        border-bottom-right-radius:5px;
        border-bottom-left-radius:5px;
    }

    .SDHdrHdrContent320 {display:block;}

    .SDHdr2 {
	    color: #00A400;
	    font-size: 22px;
	    font-family: Arial, Helvetica, sans-serif;
    }
    .SDHdr2a {
	    color: #FFFFFF;
	    font-size:16.5px;
	    font-family:Arial, Helvetica, sans-serif;
	    font-weight:lighter;
    }
    .SDHdr3 {
	    color: #FFFFFF;
	    font-size:10px;
	    font-family:Arial, Helvetica, sans-serif;
	    font-weight:bold;
    }

    #activeTabHold {
	    width:250px;
	    /*left:10px;
	    top:25%;
	    */
	    margin-left:-125px;
	    top:600px;
	    padding:5px;
	    background-color: #fff;
	    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;	
    }

    .ItemInfo_Button{
        display:inline-block;
        margin-right:10px;
    }

    .closeDiv {font-size:12px;}

    .DetailedView_Desc{
        width:300px;
        float:left;
        border:solid 0px black;
    }

    .AdvSearch_Cols{
        -webkit-column-count:1;
        -moz-column-count:1;
        column-count:1; 
    }

    .SubCat {
	    color: #000000;
	    font-size: 16px;
	    font-family: Verdana, Arial;
	    text-align: left;
	    text-decoration: none;
	    display:block;
	    padding-left:15px;	
    }

     .chkoutPayDetails {margin-top:0px;}
  
      /* form on checkout page ID */
      #Details {width:320px;}
  
      .chkoutDiv{
        padding-left:5px;
        padding-right:5px;  
        padding-top:10px;
      }
  
      .SubCatBasket {font-size:11px;}
      table.PhoneOnly {display:table;}
      #ProductsTable2 {width:310px;}
      #CustHomeNewSlider {display:none;}

      #olRecipes{
        column-count:1;
        -moz-column-count: 1;
        -webkit-column-count: 1;
      }

    .homePageTile {width: 300px;}

    .CustHomePanel {float:none;}

    .ulFoot li {        
        color:Gray;
        height:25px;
        line-height:25px;
    }

    .SiteFooter {
        width:95%;
        margin-top:10px
    }


    .basketTable {
        max-width:250px;
    }

}

@media only screen and (min-width : 768px) and (max-width : 1024px) {
    .Xmas {display:block}
    .Christmas {display:none}
    .FeaturedItem {display:none}
    .DropdownWidth {width:800px}
    .DropDownDiv {width:190px;}

	.AlsoBought{
		max-width:650px;
	}
}

@media only screen and (min-width : 1025px) and (max-width : 1220px) {  
    .Xmas{display:block}
    .Christmas{display:none}
	table.content {width:1000px;}
	.AlsoBought{
		max-width:750px;
	}
}

@media only screen and (min-width : 1221px) and (max-width : 1599px) {     
    .Xmas{display:none}
    .Christmas{display:block} 
     
    table.header {width:1200px;}
    div.header {width:1200px;}
    table.content {width:1200px;}
  
    a, a:hover, p, ul, ol, li {font-size: 13px;}
    
    .link {font-size: 13px;}

    .AlsoAvalableInSlider {width:800px}
    
    .AlsoAvalableInBox {
      height:30px;
      width:40px;
      line-height:30px;
    }

	.AlsoBought{
		max-width:900px
	}

    /* This controlls the little cross on side nav.  Needs to be in a slightly different position when the text changes */
    li input + ol {margin: -13px 0 0 -44px; /* 15px */}

    li input:checked + ol {margin: -16px 0 0 -44px; /* 20px */}
    /* end of side nav mods */

    td.main_content {font-size: 13px;}
    td {font-size: 13px;}
    
    .SubCat {font-size: 13px;}
    .SubCatHover  {font-size: 13px;}

    #divStage {
    width:1200px;
    height:230px
    }  

    #divStage img {
      width:1200px; 
      height:230px
    }

    .RecipeMenuContents {
        width:730px;
        max-width:100%;
        margin-right:20px;
    }

    .RecipeRHMenu {width:180px;}

    .RecipeServingSuggestion {
        width:400px;
        max-height:300px;
    }

   .HomePageTileDiv {
        width:378px; 
        height:211px;
    }

    .homePageTileImg {
        max-width: calc(100px * 1.45);
        max-height:calc(100px * 1.45);    
    }
    
    .TileViewOfferImage {height:253px;width:425px;}

    .PlayingCard {width:210px;height:250px}
    .PlayingCardImg {height:170px;} 
  
    .CustHomeSliderHolder{
        width:900px;
        float:left;
        margin-right:20px;
    }

     .CustHomeNewSlider{
        width:100%;
        max-width:900px;
    }  

    .FastGrid {max-width:900px;}
    .ProductsTable2 {width:1000px;max-width:1000px;}
    .blurb {width:250px; height:115px;}

    .ProdGroupImage {width:550px; height:268px;}
    .ProdGroupTile {width:265px ;margin:10px 10px 20px 10px;}
    .ProdGroupTileImg {height:94px}

    .KitBuilderImage {
         width:490px;
         height:240px;
    }

    .KitBuilderText {
         width:360px;
         height:210px;
    }

}

@media only screen and (min-width : 1600px) {    
    .Xmas{display:none}
    .Christmas{display:block} 
       
    table.header {width:1500px;}
    div.header {width:1500px;}
    table.content {width:1500px;}

    a, a:hover, p, li {font-size: 13px;}
    
    .link {font-size: 13px;}

    .AlsoAvalableInSlider {width:1100px}
    
    .AlsoAvalableInBox {
      height:30px;
      width:40px;
      line-height:30px;
    }

    /* This controlls the little cross on side nav.  Needs to be in a slightly different position when the text changes */
    li input + ol {margin: -13px 0 0 -44px; /* 15px */}

    li input:checked + ol {margin: -16px 0 0 -44px; /* 20px */}
    /* end of side nav mods */

    td.main_content {font-size: 13px;}
    td {font-size: 13px;}
        
    .SubCat {font-size: 13px;}
    .SubCatHover  {font-size: 13px;}

    #divStage {
    width:1500px;
    height:287px
    }  

    #divStage img {
      width:1500px; 
      height:287px
    }

    .RecipeMenuContents {
        width:1000px;
        max-width:100%;
        margin-right:20px;
    }

    .RecipeRHMenu {width:190px;}
    .RecipeServingSuggestion {
        width:400px;
        max-height:300px;
    }

    .TileViewOfferImage {height:253px;width:425px;}

    .HomePageTileDiv {
        width:478px; 
        height:266px;		
    }

    .PlayingCard {width:210px;height:250px}
    .PlayingCardImg {height:170px;} 
    
    .CustHomeSliderHolder {width:1150px;}
    .CustHomeNewSlider {max-width:1150px;}
    .CustHomePanel {width:300px;}  

    .FastGrid {max-width:1200px;}
    .ProductsTable2 {width:1300px;max-width:1300px;}
    
    .blurb {width:320px; height:90px;}

    .ProdGroupImage {width:550px; height:267px;}
    .ProdGroupTile {width:260px;margin:10px 10px 20px 10px;}
    .ProdGroupTileImg {height:94px}

    .KitBuilderImage {
         width:650px;
         height:270px;
    }

    .KitBuilderText {
         width:440px;
         height:240px;
    }
}

@media print {
    .NoPrint {display: none;}
    .PrintOnly {display:block;}
    .side_content {display: none;}
    td, th, a, b {color: black;}
     
     /* body {filter: grayscale(100%);  future-proof }  if printing as PDF this makes whole an image, and removes a href's etc.*/

    
}