
/***************************************************************************************************
    Configure Viewport
    Note: HTML height=100% not needed since not specifying a html height, but specifying a body height
            will result in the HTML adopting the body height
            
****************************************************************************************************/

*
{ 
    margin: 0;
    padding: 0;
    /*box-sizing: border-box;*/ /* defined already in body_responsivegrid */
}

body 
{
    min-height: 100vh;
}






/******************************************************************************************** Elements */

button {
	background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;	
	
	padding: 0;
	margin: 0;
}















/****************************************************************************************************** Recipe Preview Popup screen */
#idRecipePreviewPopupScreen
{
	position:absolute;
	left:20px;
	right: 20px;
	top:20px;
	/*bottom: 20px;*/
	z-index: 999;
	
	padding: 1em;
	
	min-height:400px;
	max-height:650px;
	/*width: 90%;*/

	display: none; /* default to hidden */

	background-color: black; 
	color: white;
	border: 3px solid white; 
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	opacity: 0.90;
	
	overflow: auto;
}
#idRecipePreviewPopupScreen h1
{
	text-align: center;
}
#idRecipePreviewPopupScreen button
{
	/*font-weight: bold;*/
	font-size: 0.9em;
	
	padding: .5em;
	
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	
	background-color: #222;
	color: white;
	
	width: 100%;
	
	border-style: solid;
	border-radius: 1em;
	border-color: #999;
}
#idRecipePreviewPopupScreen button:hover
{
	background-color: white;
	color: #222;
	
	opacity: 70%;
}
#idRecipePreviewPopupScreen hr
{
	color: white;
}




















/******************************************************************************************** Search Results Popup screen */
#idSearchResultsPopupScreen
{
	position:absolute;
	left:10px;
	right: 10px;
	top:20px;
	z-index: 1000;
	
	/*padding: 1em;*/
	
	/*min-height:400px;*/
	max-height:650px;

	display: none; /* default to hidden */

	background-color: #39221b; /*white; */
	color: black;
	border: 1px solid #a80000; 
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	opacity: 95%;
	
	overflow: hidden; /* auto;*/
}
#idSearchResultsPopupScreen h1
{
	text-align: center;
}

#idSearchResultsPopupScreen h2
{
	margin-top: 0.5em;
	margin-bottom: 0.25em;
}

#idSearchResultsPopupScreen h3{
	margin-top: 0.5em;
	margin-bottom: 0.25em;
}

#idSearchResultsPopupScreen button
{
	/*font-weight: bold;*/
	font-size: 0.9em;
	
	padding: .5em;
	
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	
	background-color: #a60505; /*#ddd;*/
	color: #f9f0f0; /*#222;*/
	
	width: 10em;
	
	border: 1px solid #6c0000; 
	border-radius: 1em;
}

#idSearchResultsPopupScreen button:hover
{
	background-color: #f9f0f0;
	color: #a60505;
	
	opacity: 100%;
}

#idSearchResultsPopupScreen hr
{
	color: black;
}

#idSearchResultsPopupScreen .SearchPopupTitle {
	max-height: 150px;
	
	padding: 0.25em 0.5em 0.5em 0.5em;
	
	background-color: #ffebaf; /*#be9b6c;*/
	
	border: 1px solid #a80000;
}

#idSearchResultsPopupScreen .SearchPopupResults {
	min-height: 100px;
	max-height: 500px;

	background-color: #fffdd6; /*#8f6a4a;*/
	
	overflow: auto;
	
	border: 1px solid #a80000;
}

#idSearchResultsPopupScreen .ResultsContainer:hover {
	background-color: #222;
	color: #ddd; 
	opacity: 100%;
}


















/****************************************************************************************************** Page Wrapper */
#idParentContainerDiv
{
	/*
	position:absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	*/
}



















/****************************************************************************************************** default category page css */


/************* Header */
.header {
  background-color: #d5955d;
  color: #ffffff;
	padding: 1px;
 }



/************* Content Wrapper */
.content {
  background-repeat: no-repeat;
  /*background-attachment: fixed;*/
  background-size: cover;
  
  min-height:600px;
}



/************* Content - Top Row - Navigation */
.navigation {
	padding: 1px;
 }
 
.navigation a{
	margin-left: 0.75em;
 }
 
.navigation a:first-of-type{
	margin-left: 1.25em;
 }

.navigation button {
	margin-left: 1em;
 }
 
.navigation img{
	height: 32px; /*2em;*/  /****** image within button scales differently than image within anchor when using EM units */
	
	margin-top: 1em;
 }



/************* Content - Top Row - Search bar */
.search {
	margin: 0;
	padding: 0;
}

.search button {
	margin-left: 1em;
}

.search img {
	height: 2em;
	/*margin-left: 0.35em;*/
	filter: opacity(20%) invert(0%) hue-rotate(00deg);
 }

.search input[type="text"] { /* .search input:not([type]) */

	margin-left: 1.5em;
	
	width: 90%;
	height: 2.25em;
	
	border: none;
}

.search #idSearchFieldDiv {

	color: #000;
	background-color: #fff;
	
	width: 95%;
	height: 2.25em;
	
	padding: 0.25em;
	
	margin: 0.75em 0.25em 0.25em 0.25em;
	
	/*border: 1px solid brown;*/
	border-radius: 1.5em;

	display: none; /*inline;*/ /*none;*/
}




/************* Content - Second Row - Menu */
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  cursor: pointer;

  padding: 8px;
  margin-bottom: 7px;
  background-color: #e5c133;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}



/************* Content - Second Row - Article */
.article {
	color: brown;
}

.article p {
}

.recipecategory {
	padding: .5em;
}

.recipelist{
	max-height: 600px;
	overflow: auto;
}

.recipelist h3{
	margin-top: 0.5em;
	margin-bottom: 0.25em;
}
/*
.recipelist p{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
*/
.ResultsContainer:first-of-type{
	margin-top: 0.5em;
}

.ResultsContainer{
	margin: 2em 1em 0.5em 0.5em;
	cursor: pointer;
}

.ResultsContainer:hover {
	background-color: white;
	color: black; 
	opacity: 70%;
}



/************* Content - Second Row - Aside */
.aside {
  /*padding: 15px;*/
  padding: 0;
  background-color: #7b4a26;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.aside p {
	padding-left: 0.25em;
	padding-right: 0.25em;
}



/************* Footer */
.footer {
  background-color: #7d3a3a;
  color: #ffffff;
  /*text-align: center;*/
  font-size: 12px;
  padding: 15px;
}









/****************************************************************************************************** NO Category Selected */
.no-category .header {
  background-color: #60483e;
  color: #ffffff;
}

.no-category .navigation {
	
}

.no-category .navigation img {
	filter: opacity(100%) invert(0%) hue-rotate(60deg);
}

.no-category .content {
  background-image: url('/_site_resources/images/resized/Inspections1.jpg');
}

.no-category .menu li {
  background-color: #512e20;
  color: #ffffff;
}

.no-category .menu li:hover {
  background-color: #be9b6c;
}

.no-category .article {

}

.no-category .aside {
  background-color: #5b382d;
  color: #ffffff;
}

.no-category .recipecategory {
	background: rgb(228, 228, 226, 0.45);
	color: #644334;
}

.no-category .footer {
  background-color: #6d4b30;
  color: #ffffff;
}









/****************************************************************************************************** Category 1 Main Dishes */
.category1 .header {
  background-color: #6b0502;
  color: #ffffff;
}

.category1 .navigation {
	
}

.category1 .navigation img {
	filter: opacity(50%) invert(00%) hue-rotate(50deg);
}

.category1 .content {
  background-image: url('/_site_resources/images/resized/sous-vide-beef-chuck-header-og.jpg');
}

.category1 .menu li {
  background-color: #842303;
  color: #ffffff;
}

.category1 .menu li:hover {
  background-color: #e1944e;
}

.category1 .article {
	/*color: white;*/
}

.category1 .aside {
  background-color: #734230;
  color: #ffffff;
}

.category1 .recipecategory {
	background: rgb(132, 35, 3, 0.25);
	color: white;
}

.category1 .recipelist{
	background: rgb(132, 35, 3, 0.75);
	color: #ffb96f;
}

.category1 .footer {
  background-color: #551101;
  color: #ffffff;
}









/****************************************************************************************************** Category 2 Appetizers */
.category2 .header {
  background-color: #6b0502;/*#d5955d;*/
  color: #ffffff;
}

.category2 .navigation {
	
}

.category2 .navigation img {
	filter: opacity(60%) invert(00%) hue-rotate(50deg);
}

.category2 .content {
  background-image: url('/_site_resources/images/resized/Sugar-Bacon-Wrapped-Little-Smokies-2.jpg');
}

.category2 .menu li {
  background-color: #a21405;
  color: #ffffff;
}

.category2 .menu li:hover {
  background-color: #f8be2e;
}

.category2 .article {
	/*color: #fffb00;*/
}

.category2 .aside {
  background-color: #5b2420;
  color: #ffffff;
}

.category2 .recipecategory {
	background: rgb(162, 20, 5, .1);
	color: #fff;
}

.category2 .recipelist{
	
	background: rgb(162, 20, 5, 0.75);
	color: #fffb00;
}

.category2 .footer {
  background-color: #360100;
  color: #ffffff;
}










/****************************************************************************************************** Category 3 Desserts */
.category3 .header {
  background-color: #6b0502;
  color: #ffffff;
}

.category3 .navigation {
	
}

.category3 .navigation img {
	filter: opacity(80%) invert(00%) hue-rotate(50deg);
}

.category3 .content {
  background-image: url('/_site_resources/images/resized/Dessert-Backgrounds-For-Computer.jpg');
}

.category3 .menu li {
  background-color: #900200;
  color: #ffffff;
}

.category3 .menu li:hover {
  background-color: red;
}

.category3 .article {
	/*color: #980a01;*/
}

.category3 .aside {
  background-color: #6a2003;
  color: #ffffff;
}

.category3 .recipecategory {
	background: rgb(144, 2, 0, 0.25);
	color: #fff;
}

.category3 .recipelist{
	
	background: rgb(144, 2, 0, 0.75);
	color: #f0ec7e;
}

.category3 .footer {
  background-color: #531603;
  color: #ffffff;
}








/****************************************************************************************************** Category 4 Dips and Sauces */
.category4 .header {
  background-color: #aa4202;
  color: #ffffff;
}

.category4 .navigation {
	
}

.category4 .navigation img {
	filter: opacity(80%) invert(00%) hue-rotate(50deg);
}

.category4 .content {
  background-image: url('/_site_resources/images/resized/baked-steak-fries-dipping-sauces-recipe.jpg');
}

.category4 .menu li {
  background-color: #ce5b24;
  color: #ffffff;
}

.category4 .menu li:hover {
  background-color: #fec517;
}

.category4 .article {
	/*color: #ff542c;*/
}

.category4 .aside {
  background-color: #da9c23;
  color: #ffffff;
}

.category4 .recipecategory {
	background: rgb(206, 91, 24, 0.25);
	color: #fff;
}

.category4 .recipelist{
	
	background: rgb(206, 91, 24, 0.75);
	color: #ffde2c;
}

.category4 .footer {
  background-color: #ffdd71;
  color: #ffffff;
}







/****************************************************************************************************** Category 5 Rubs and Mixes */
.category5 .header {
  background-color: #404a2a;
  color: #ffffff;
}

.category5 .navigation {
	
}

.category5 .navigation img {
	filter: opacity(40%) invert(0%) hue-rotate(75deg);
}

.category5 .content {
  background-image: url('/_site_resources/images/resized/img_10591.jpg');
}

.category5 .menu li {
  background-color: #667640;
  color: #ffffff;
}

.category5 .menu li:hover {
  background-color: #c17526;
}

.category5 .article {
	/*color: #e6d654;*/
}

.category5 .aside {
  background-color: #d2721a; /*#da9c23;*/
  color: #ffffff;
}

.category5 .recipecategory {
	background: rgb(102, 118, 64, 0.1);
	color: #fff;
}

.category5 .recipelist{
	
	background: rgb(102, 118, 64, 0.75);
	color: #e6d654;
}

.category5 .footer {
  background-color: /*4f1606;*/ #42170b;
  color: #ffffff;
}






/****************************************************************************************************** Category 6 Soups */
.category6 .header {
  background-color: #5f4518; /*#3f4003;*/
  color: #ffffff;
}

.category6 .navigation {
	
}

.category6 .navigation img {
	filter: opacity(60%) invert(0%) hue-rotate(50deg);
}

.category6 .content {
  background-image: url('/_site_resources/images/resized/chix-noodle_3ae20cf60d7631c68dd6fb9f5291ed18.jpg');
}

.category6 .menu li {
  background-color: #fe7703;
  color: #ffffff;
}

.category6 .menu li:hover {
  background-color: #ffd058;
}

.category6 .article {
	/*color: #fee579;*/
}

.category6 .aside {
  background-color: #da9c23;
  color: #ffffff;
}

.category6 .recipecategory {
	background: rgb(254, 119, 3, 0.05);
	color: #fff;
}

.category6 .recipelist{
	
	background: rgb(254, 119, 3, 0.75);
	color: #ff0;
}

.category6 .footer {
  background-color: #eab50f;
  color: #ffffff;
}








/****************************************************************************************************** Category 7 Salads */
.category7 .header {
  background-color: #557b01;
  color: #ffffff;
}

.category7 .navigation {
	
}

.category7 .navigation img {
	filter: opacity(70%) invert(00%) hue-rotate(80deg);
}

.category7 .content {
  background-image: url('/_site_resources/images/resized/shutterstock_274855409-copy.jpg');
}

.category7 .menu li {
  background-color: #db3b00;
  color: #ffffff;
}

.category7 .menu li:hover {
  background-color: #a3bb4c;
}

.category7 .article {
	/*color: white;*/
}

.category7 .aside {
  background-color: #728d03;
  color: #ffffff;
}

.category7 .recipecategory {
	background: rgb(219, 59, 0, 0.15); 
	color: #fff;
}

.category7 .recipelist{
	
	background: rgb(219, 59, 0, 0.75); 
	color: #cdffd0;
}

.category7 .footer {
  background-color: #b72f02;
  color: #ffffff;
}







/****************************************************************************************************** Category 8 Drinks */
.category8 .header {
  background-color: #3f4003;
  color: #ffffff;
}

.category8 .navigation {
	
}

.category8 .navigation img {
	filter: opacity(80%) invert(0%) hue-rotate(70deg);
}

.category8 .content {
  background-image: url('/_site_resources/images/resized/most-ideal-mexican-drinks-non-alcoholic.jpg');
}

.category8 .menu li {
  background-color: #6b6e00;
  color: #ffffff;
}

.category8 .menu li:hover {
  background-color: #f1cf38;
}

.category8 .article {
	/*color: #950e0e;*/
}

.category8 .aside {
  background-color: #f6d200;
  color: #ffffff;
}

.category8 .recipecategory {
	background: rgb(107, 110, 0, 0.25);
	color: #fff;
}

.category8 .recipelist{
	
	background: rgb(107, 110, 0, 0.75);
	color: #f6d200;
}

.category8 .footer {
  background-color: #f5d535;
  color: #ffffff;
}




/****************************************************************************************************** Category 9 Breads */
.category9 .header {
  background-color: #d5955d;
  color: #ffffff;
}

.category9 .navigation {
	
}

.category9 .navigation img {
	filter: opacity(30%) invert(0%) hue-rotate(50deg);
}

.category9 .content {
  background-image: url('/_site_resources/images/resized/baking-ingredients.jpg');
}

.category9 .menu li {
  background-color: #e5c133;
  color: #ffffff;
}

.category9 .menu li:hover {
  background-color: #815841;
}

.category9 .article {

}

.category9 .aside {
  background-color: #7b4a26;
  color: #ebc8aa;
}

.category9 .recipecategory {
	background: rgb(252, 224, 198, 0.5);
	color: #815841;
}

.category9 .recipelist{
	
	background: rgba(109, 64, 35, 0.7);
	color: #f6d200;
}

.category9 .footer {
  background-color: #7d3a3a;
  color: #ffffff;
}








/****************************************************************************************************** Category 10 Sides */
.category10 .header {
  background-color: #870300; /*#3f4003;*/
  color: #ffffff;
}

.category10 .navigation {
	
}

.category10 .navigation img {
	filter: opacity(30%) invert(0%) hue-rotate(60deg);
}

.category10 .content {
  background-image: url('/_site_resources/images/resized/1431966259-grilling-sides.jpg');
}

.category10 .menu li {
  background-color: #6b6e00;
  color: #ffffff;
}

.category10 .menu li:hover {
  background-color: #bf9e0a;
}

.category10 .article {
	/*color: #950e0e;*/
}

.category10 .aside {
  background-color: #504f1b;
  color: #fffaf7;
}

.category10 .recipecategory {
	background: rgba(221, 220, 218, 0.5);
	color: #49592b;
}

.category10 .recipelist{
	
	background: rgba(245, 247, 176, 0.75);
	color: #435b18;
}

.category10 .footer {
  background-color: #fdf9dc; /*#d73331;*/
  color: #ffffff;
}

.category10 .clsSimpleAnchor a:link, .category10 .clsSimpleAnchor a:visited {
	color: #640004;
}
.category10 .clsSimpleAnchor a:hover {
	color: red;
}


