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, Arial, Helvetica, sans-serif;
	font-size: 14px;
	background-color: #FFFFFF;
	text-align: center;
    color:black;
    line-height: normal;
    /*color:#4B4E53;*/
	/*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;*/

}

OrdQty{
	text-align:center;
	width:30px;
}

td {padding:0px;}

div {
    font-size:14px;
    color:#4B4E53
}

p {
    font-size:14px;
    color:#4B4E53
}

hr {
    display: block;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
}

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


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

.fixHeader{
    width:100%;
    height:auto;
    top:0;
    position:fixed;
    z-index:100;
    border-spacing: 0px;
    margin:0 auto;
    text-align:center;
    background-color:white; 
    border-bottom:2px solid rgba(29, 68, 132, 1);
}
		
h1 {
    color:#4B4E53;
	font-size: 36px;
    letter-spacing:5px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetical;
	font-weight: bold;
	margin: 10px 0px 5px 0px
}

.h1_Header{
    display:inline-block;
    width:auto;
    text-align:center;
    font-weight:bold;
    font-family: Verdana, Arial, Helvetical;
    font-size:40px;
    height:60px;
    line-height:60px;
    vertical-align:middle;
    letter-spacing:4px;
    margin: 10px 0px 0px 0px
}

h2 {
    color:#4B4E53;
	font-size: 24px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetical;
    margin-top: 15px;
	margin-bottom: 13px;
    line-height:30px;
    font-weight:600;
}
	
.ItemH2{
    color:#4B4E53;
    display:block;
    font-weight:900;
    font-size:large;
    letter-spacing:normal;
    line-height:normal;
}	

h3 {
	color:#4B4E53;
	font-size: 18px;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetical;
	font-weight:550;
	margin-bottom:4px;
    line-height:20px;
	margin-top: 5px;
}


.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;
}

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

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


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;
}

table.ComTablePaddingNoBorder th, table.ComTablePaddingNoBorder td {
    padding: 2px 5px 2px 5px;
}


.rowhover:hover {background-color: coral;}
.rowhoverWhiteSmoke:hover {background-color: whitesmoke;}


button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

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

a.RedHold{
    color: white;
}

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

a.AmberHold{
    color: darkslategrey;
}

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

a.GreenHold{
    color: white;
}

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

a.GrayHold{
    color: white;
}

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

a.PurpleHold{
    color: white;
}

.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
}

a.YellowHold{
    color: black;
}

.PlainHold {
    color:black;
    border-radius:5px;
    border:1px solid black;
    margin:2px; 
    font-weight:bold;
    cursor:pointer
}

a.PlainHold {
    color: black;
}

.BlackHold {
    background-color:black;
    color:white;
    border-radius:5px;
    border:1px solid black;
    margin:2px; 
    font-weight:bold;
    cursor:pointer
}

a.BlackHold {
    color: white;
}

/* Cool Menu Dropdown CSS to replace JS - Jan 17*/
.dropholder {
    height:auto;
    width:auto;
    background: black;
    background: linear-gradient(#505050,#D0D0D0);
    margin:0 auto;
    border-radius:3px;
}

/* Dropdown Button */
.dropbtn {
    background: white;
    color:#4B4E53;
    padding: 6px 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    font-weight:bold;
    letter-spacing:0.5px;
}

/* Dropdown Button Hyperlink Only */
.dropbtnHL {
    background: white;
    color:#4B4E53;
    padding: 6px 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    font-weight:bold;
    letter-spacing:0.5px;
}

.dropbtnHL:visited {
    background: white;
    color:#4B4E53;
    padding: 6px 6px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    font-weight:bold;
    letter-spacing:0.5px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    width:auto;
    color:#4B4E53;
    font-weight:normal;
    margin: 0 5px 0 5px;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    /*display: none;*/
    position: absolute;
    background-color: #f9f9f9;
    min-width: 150px;
    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-bottom: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;

	z-index:2;

}

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

.dropdown-content div {
    color: black;
    padding: 5px 16px;
    text-decoration: none;
    display: block;
    text-align:left;
    background-color:silver 
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

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

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

/* End of Menu Dropdown CSS */


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


 /* recipe stuff */
    .RecipeMenuContents {
        width:500px;
        margin-right:10px;
        float:left;
    }

     .RecipeRHMenu {
        width:150px; 
        min-width:150px; 
        height:auto; 
        float:right;
     }

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

    .RecipeTile {
        width:200px;
        height:260px;
        border:1px solid silver;
        border-radius:7px;
        overflow:hidden;
        float:left;
        margin:20px;
        padding:0px;
        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 {
        box-sizing: border-box;
        border:1px solid silver;
        border-radius:10px;
        width:95%;
        max-width:1000px;
        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;
    }
/*
======================================
This is all the size specific stuff for the site
======================================
*/

    .hdrMenu{
        display:inline-block;
    }

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

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

    .LogoDiv {
        width:300px;
        padding-top:13px
    }

    .SpacerHeightHomePage {
        height:130px;
        /* width: 100%;
        border: 1px solid rebeccapurple;
        position: fixed;
        top: 127px;
        bottom: 30px; */
    }

    .SpacerHeight {
        height:140px
    }

    #tblContent{	
	    width:95%;
        margin: 0 auto;
        opacity:1;
        text-align: center;
    }
    #tdContent{	
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        background-color: white;
        vertical-align: top;
        width: 100%;
    }

    .CustCard {
        width:180px;
        border-radius:7px;
        height:260px;
        display:inline-block;
        vertical-align:top;
        border:1px solid silver;
        margin-right:15px;
        margin-top:15px;
        margin:15px 15px 0 0;
        /* background-color:white; */
        background-color:whitesmoke;
        overflow:hidden;
        transition: transform 0.5s;
        padding:7px;
    }

    .DisplayOnPhone {display: none;}

    .OverlayImg{
        height:30%;
        /* margin: -4% 0 -80% -4%; */
        margin: 0 0 -80% 0;
        z-index:1;
        top:0;
        position: relative;
        float:left;
    }

    .DropDownAlign {
        display:inline-block;
        width:100%;
    }

    .PrintTime {display:none}

		.switch {
			position: relative;
			display: inline-block;
			width:  30px;
			height: 17px;
		}

		.switch input { 
			opacity: 0;
			width: 0;
			height: 0;
		}

		.slider {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ccc;
			-webkit-transition: .4s;
			transition: .4s;
		}

		.slider:before {
			position: absolute;
			content: "";
			height: 13px;
			width: 13px;
			left: 2px;
			bottom: 2px;
			background-color: white;
			-webkit-transition: .2s;
			transition: .2s;
		}

		input:checked + .slider {
			background-color: #2196F3;
		}

		input:focus + .slider {
			box-shadow: 0 0 1px #2196F3;
		}

		input:checked + .slider:before {
			-webkit-transform: translateX(13px);
			-ms-transform: translateX(13px);
			transform: translateX(13px);
		}

		/* Rounded sliders */
		.slider.round {
			border-radius: 34px;
		}

		.slider.round:before {
			border-radius: 50%;
		}




/* end */

/*
======================================
This is all the size specific stuff for the site for iPad Air Gen 5 
======================================
*/
@media (max-width:1326px) {
    .DropDownAlign {
        text-align:left; 
        padding-left:100px;
    }

@media (max-width:1162px) {
    .DropDownAlign {
        text-align:left; 
        padding-left:0px;
    }

 /*
======================================
This is all the size specific stuff for the site for IPHONE portrate.  Landscape further down 
======================================
*/   

@media (max-width:900px) {
    .NoDisplayOnIpad {display: none;}
    .DisplayOnIPad {display: inline;}
}

/*
======================================
This is all the size specific stuff for the site for IPHONE landscape.  Landscape further down 
======================================
*/
@media (max-width:450px) {
    h1 {
	    font-size: 24px;
    }

    h2 {
	    font-size: 20px;	
    }
        
    #1slides{
        display:none;
    }

    .hdrMenu{
        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;
    } 

    .Logo {
         height:50px; 
         width:195px;
         padding-top:5px
    }

    .LogoDiv {
         width:200px; 
         margin:0 auto 
    }

    .NoDisplayOnPhone {display: none;}
    .DisplayOnPhone {display: inline;}

    .CustCard {
        width:150px;
        border-radius:7px;
        height:260px;
        display:inline-block;
        vertical-align:top;
        border:1px solid silver;
        margin:5px;
        /* background-color:white; */
        overflow:hidden;
        transition: transform 0.5s;
        padding:7px;
    }

    .RecipeTile {
        width:150px;
        height:210px;
        border-radius:5px;
        margin:10px;
        box-shadow:0
    }

    .SpacerHeightHomePage {
        height:100px;
    }
    
}


/*
======================================
PRINTING......
======================================
*/

@media screen {
    .PrintFooter {
      display: none
    }
  }

@media print {
    .NoPrint {display:none}
    .PrintOnly {display:inline}
    .dropdown {display:none}
    .SideNav {display:none}
   
    .CustCard {width:20%;}
    .RecipeTile {width:20%;box-shadow:0}
    .PrintTime {display:inline}

    h1 {font-size: 24px;}

    h2 {font-size: 20px;}

    .PrintFooter {
        position: fixed;
        bottom: 5px;
        left: 10px;
    }

    /*
    .fixHeader{
        width:100%;
        height:2cm;
        top:0;
        position:fixed;
        z-index:100;
        border-spacing:0px;
        margin:0 auto;
        text-align:center;
        background-color:white; 
        border-bottom:2px solid rgba(29, 68, 132, 1);
    }
    
    .SpacerHeightHomePage {
        width:100%;
        height:2cm;
        top:3cm;
        left:0;
        position:fixed;
        border: 1px solid rebeccapurple;
    }
     */   
}