#editor {
  display: block!important; 
}

.ck-editor__editable_inline {
    min-height: 300px;
}
/*
color: #FF00CC; fuchsia 
background-color: #ffffe0; ivory
background-color: #FFFFCC; ivory
background-color: #fffdd0; ivory
color: #00cc00; lime green 
*/
.error {
transition: opacity 0.5s ease-in-out!important;
}

body {
   overflow-x: hidden!important;
}
 .container-fluid{
      padding-left: 0;
      padding-right: 0;
    }
    .cook
{ vertical-align: middle;
  justify-content: center;
  align-items: center;
  position: relative;
  line-height: 200px!important;
  height: 200px!important;
  text-align: center;
}
.no-padding {
  padding-left: 0!important;
  padding-right: 0!important;
  margin-left: 0!important;
  margin-right: 0!important;
}

.cats_view {
   vertical-align: middle;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid #f0c;
  background-color: #fff;
  font-size: calc(1rem + 0.1vw);
  margin: 0;
  max-width: 100%;
    letter-spacing:0;
  box-sizing: content-box;
 display: block;
 height: 200px!important;
/* height: 200px!important;
  position: relative;*/
  }


.thumb_recipe {
  display: block!important;
  max-width: 100%!important;
  height: auto!important;
  object-fit: cover!important;
  float: left!important;
}

.disabled {opacity: 0;}


 .register_view {width: 90%;
 margin: 10px auto;
 }
 
 
 .recipe_add {width: 60%;
 margin: 10px auto;
 }
 .input_field_add {width: 100%; height: 40px; margin: 0 0 18px 0!important; }
/*
.col-6 {border: 1px solid red; }
*/
#myParagraph {
color: red!important;
background-color: white!important;
}

/*
.button.disabled {
  opacity: 0.6;
  pointer-events: none;
}*/



  .bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #FFF000;
  margin: 6px 0;
  transition: 0.4s;
}



        html, body {
            height: 100%;
            margin: 0;
			
        }
		
.survey_table {
width: 80%;
margin: auto;
}
.survey_table text-area {width: 200px; height: 40px;}

.survey_table td {padding: 20px 0!important; border-bottom: 1px solid black;}
	
* { padding: 0; margin: 0; }
body {
	font-family: Georgia, Garamond, "Times New Roman", Times, serif!important;
	font-size: 12pt;
	color: #000000;
	text-align: center; /* center things in pre-IE6 width: 100%;
	margin: 0px 0px 0px 0px;*/
	width: 100%;
	padding: 0px 0px 0px 0px;

	/*b	background-color: #000000;ox-sizing: border-box;*/
}

/*
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}*/
html{
	 /*This causes the footer to meet the bottom of the page */
	width: 100%;

	padding: 0px 0px 0px 0px;
	color: #000000;
	font-family: Georgia, Garamond, "Times New Roman", Times, serif;
	font-size: 12pt;
	text-align: center; /* center things in pre-IE6 */
	height: 100%;
	}

.screenshot {
	
margin: 50px auto 50px auto;
/*background-color: #ebeff2;*/	
padding: 20px 0 20px 20px;
background-color: #fff;
}

.screenshot img {
	display: block;
margin: 0 auto;
}
/**/

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
input[type=url], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
a:link {
  color: #009933;  /*green*/
  text-decoration: none;
}

a:visited {
  color: #00ff00;/*lime green */
  text-decoration: none;
}

a:hover {
  color: #00cc00; /*lime green */
  text-decoration: underline;
}

a:active {
  color: #F0C; /*fuchsia */
  text-decoration: underline;
}
input[type=submit] {

 background-color: #F0C;
 color: #FFF000;
   border: none;
/* 
  width: 100%;
 padding: 14px 20px;
  margin: 8px 0;

  border-radius: 4px;*/
  cursor: pointer;
  font-weight: bold;
  	font-family: Georgia, Garamond, "Times New Roman", Times, serif;
	font-size: 1em;
}
/*
input[type=button] {
  width: 100%;
 background-color: #F0C;
 color: #FFF000;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  	font-family: Georgia, Garamond, "Times New Roman", Times, serif;
	font-size: 12pt;
}*/

.submit{

 background-color: #FF00CC;
 color: #FFF000;
 
 /*
  width: 100%;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  
  
  cursor: pointer;
  
  font-weight: bold;
  	font-family: Georgia, Garamond, "Times New Roman", Times, serif;
	font-size: 12pt;*/
}

.message {color: red; 	font-size: 14pt; text-align: center; }

/*
input[type=submit]:hover {
 background-color: #F0C;
}*/

.recipeFloatRightLargeDiv {
height: auto;
width: 245px; 
float: right;
margin: 0 auto;

}
/*
div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}*/
/**/

/***survey begin**/
/*
.radio {
	float: left; 
	padding-right: 24px;
}

input[type='radio'] {
        -webkit-appearance: none;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        outline: none;
        box-shadow: 0 0 0 2px #FFF000;
    }

    input[type='radio']:before {
        content: '';
        display: block;
        width: 60%;
        height: 60%;
        margin: 20% auto;
        border-radius: 50%;
    }

    input[type='radio']:checked:before {
        background: #F0C;
    }
*/
    .role {
        margin-right: 80px;
        margin-left: 20px;
        font-weight: normal;
    }
/*
    .checkbox label {
        margin-bottom: 20px !important;
    }
*/
    .roles {
        margin-bottom: 40px;
    }
.radio {
/*	display: block;*/
	
}
input[type='checkbox'] {
   /*     -webkit-appearance: none;*/
        width: 10px;
        height: 10px;
        margin: 0px 4px 0px 4px;
        
		color: black;
		  outline-style: solid;
  outline-color: black;
  outline-width: thin;
    }

    input[type='checkbox']:before {
        content: '';
        display: block;
		/*
        width: 60%;
        height: 60%;*/
        margin: 20% auto;
        
    }

    input[type='checkbox']:checked:before {
       /*background: #F0C;*/
	   color: black;
    }	

textarea {
/*  
  height: 50px;
  padding: 2px;*/
 /* padding: 12px 20px; */
 width: 100%;
 max-width: 100%;
 box-sizing: border-box;
 /* border: 1px solid #FFF000;*/
 
 /*ckeditor? width: 70%;
 max-width: 70%;*/
/*
  border-radius: 4px;
  background-color: #fff;
  resize: none;*/
}
/***survey end ***/
.comment_input {
  border: 1px solid #FFF000;
}
/* If you add any new main layout divs, don't forget to use clear: both; to clear the two tabs on top of the page*/
#comments_button {
/*input[type=submit] {*/
 background-color: #0F0;
color: #000;
  border: none;
  padding: 6px 12px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
border-radius: 10%;
font-weight: bold;
	font-family: Georgia, Garamond, "Times New Roman", Times, serif;
	font-size: 12pt;
}

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /*overflow: auto;*/
overflow-x: hidden!important;
  
}
#container{

	
	/*height: 2200px; width: 960px;  height: 1500px; padding: 20px 20px 20px 20px; */
	 /*What is this for? overflow: hidden;*/
	margin: 0px auto 0px auto;
	padding: 0px; 
	text-align: left;
	background-color: #FFF;
/* background-color: #FFFFCC;	border: 2px dotted #FFFFFF;*/
	}



#short_container{
	width: 960px; 
	height: 1400px; 
	overflow: hidden; /*What is this for?*/
	margin: 0px auto 0px auto;
	padding: 0px 20px 0px 20px; 
	text-align: left;
	background-color: #FFFFCC;
	border: 2px dotted #FFFFFF;
	}

#bio {
	background-color: white;
	border-right: solid #ccc 1px;
	border-left: solid #ccc 1px;
	border-bottom: outset #ccc 3px;
	border-top: outset #ccc 3px;
	clear: both;
	margin: 0px auto 0px auto;
	padding: 20px 0px 0px 10px;
	width: 700px;
	/*height: 800px;*/
}
/**/
/*
.col  {
border: 1px solid green;
margin-right: 0px!important;
padding-right: 0px!important;
 text-align: right;
border: 1px solid green;
text-align: center; }*/
/*
.row {
	
}*/
/*
.container {
background-color: #FFF;
border: 1px solid #F0C;
margin: 20px auto;
}
.container {
display: flex;
}*/
/*
.cats_view {
	
width: 90%;
background-color: #FFF;
border: 1px solid #F0C;
margin: 20px auto;
height: 170px;
padding-top: 0!important;	
padding-right: 0!important;	

vertical-align: middle!important;
  line-height: 170px!important;
 
  white-space-collapse: collapse;

}*/
.cats_view_X {
  width: 90%;
  background-color: #fff;
  border: 1px solid #f0c;
  margin: 20px auto;
  height: auto;
 
  padding-top: 0 !important;
  padding-right: 0 !important;
  vertical-align: middle!important;
  position: relative!important;
}
/*
.cat_view_2 {min-height: 170px;}
*/

.recipe_view {
margin: 0 100px;		
}
/*
.thumb_recipe_meal {

	margin-right:-48px;
	width: 250px;
	max-width: 100%;
	margin-left: 0!important;
padding-right: 0!important;
padding-left: 0!important;
height: 170px;
box-sizing: border-box!important;
display: inline-block !important;
border: 0;
  background-size: cover;
 
}
.thumb_recipe_meal img {

	width: 250px;
	max-width: 100%;
	background-size: cover;
}*/
/*
.thumb_recipe {
max-width: 100%;
	margin-right: 0!important;
	margin-left: 0!important;
padding-right: 0!important;
padding-left: 0!important;

max-height: 100%;
height: 170px;
display: block!important;

   border-left: 20px soiid red!important;

}*/

/*
.thumb_recipe img {
display: block!important;
border: 20px soiid red!important;
  max-width: 1000px;
    width: 100%;
 }*/
 /*
.rec_img {
margin-right: 0!important;
padding-right: 0!important;
margin-top: 0!important;
padding-top: 0!important;
display: inline-block!important;
*/
/*
float: right!important;
*/
/*float: right!important;flex-basis: 100px;clear: right!important;*/
	

/*
.cats_vert {

vertical-align: middle!important;
overflow: hidden!important;
text-overflow: ellipsis!important;
display: -webkit-box!important;
-webkit-line-clamp: 1!important; 
line-clamp: 1!important;
-webkit-box-orient: vertical!important;
height: 170px;
display: block;
}
*/
.bios_ellipsis {

/*The problem with this is that the read more link disappears when the text is shortened. */

text-overflow: ellipsis!important;
display: -webkit-box!important;
-webkit-line-clamp: 5!important; 
/*line-clamp: 5!important;*/
-webkit-box-orient: vertical!important;
    display: -moz-box;
 /*line-height: 1.15em;
word-break: break-all;*/
overflow: hidden!important;
}
/*
#cat_box {

  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px 0px 10px 0px;
  
margin: 40px;width: 80%;row-gap: 2%; 
  width: 100%; 
  height: 100%;
    
  column-gap: 100px;
  grid-row-gap: 400px;
  grid-column-gap: 100px;
  align-items: center;
  justify-content: center;
}*/

/*
I haven't been able to fix this so that the read more link shows at the end of the truncated text. 1/9/24*/

.transparent {
height: 100px;
width: 133px;
/* I don't think this is being used anywhere */
/*float: right;
border: 1px solid blue;*/
}
/**/
div.recipebox {
	background-color: #FFFFFF;
	color: black;
	border: 1px solid #F0C;
	padding: 10px 40px 40px 40px;
	margin: 10px auto 10px auto;
	width: 720px;
	clear: both;
}

.recipebox_no_border {
	background-color: #FFFFFF;
	color: black;
	padding: 10px 40px 40px 40px;
	margin: 10px auto 10px auto;
	width: 720px;
	clear: both;
}

.recipebox_gray_border {
	background-color: #FFFFFF;
	border: 12px solid #EEFFFF;
	color: black;
	padding: 10px 40px 40px 40px;
	margin: 10px auto 10px auto;
	width: 720px;
	clear: both;
}

div.comments {
	/*	background-color: #fffdd0;*/
	color: black;
	/*border: 1px dashed #0F0;*/
	padding: 0px 0px 40px 0px; 
	margin: 0px auto 0px auto;
	width: 70%;
/*	clear: both;*/
	text-align: left;
}

.comments_top_bar {
font-weight: bold;
background-color: #0F0;
color: #000;
margin: -10px auto 20px auto!important;
/* margin: -10px 0px 20px -40px;*/
padding: 0px 0px 0px 10px;
width: 100%; 
height: 26px;
vertical-align: middle;
text-align: left;
}

.comments_form {
	/*	background-color: #fffdd0;*/
	color: black;
/*	padding: 0px 40px 40px 200px; */
	margin: 0px auto 0px auto;
	width: 80%;
	clear: both;
	text-align: left;
}

div.next {
width: 400px;
text-align: center;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
clear: both;
}
div.comment_form {
width: 510px;
text-align: center;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 120px;
clear: both;
}

.error {
color: red!important;
background-color: white!important;
}

div#feeds {
margin: -14px 0px 0px 0px;
}
/*
#header {
width: 80vw;
height: auto;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
background-color: #000000;
color: #FFFFFF;
}
*/
#main_pic { 
/*
width: 1000px; 
height: 200px;border-inline: 0px!important; */
width: 100%;
height: auto;
border: 0 !important;
margin:0 0 -4px 0;
padding: 0 !important;
 background-color: transparent;
outline: none;
text-decoration: none;

}


	img#footer_pic { 

width: 100%;
height: auto;
border: none;
margin:0 0 -3px 0;
}

.edit_bio_table {
	width: 80%;
	margin: 0 auto;
	/*border: 1px solid black;*/
	
}

.recipes_edit {
		width: 80%;
	margin: 0 100px;
	
	
}
/*
#footer {
background-color: #000000;
color: #FFFFFF;

margin: 0px auto;
padding: 0px;
text-align: center;
vertical-align: middle;
}
*/
/*
a#footer_link {
background-image: url(../img/layout/new/cats/new/dreamstime_cropped_2_black.png);
  background-size: cover!important;
-moz-background-size: cover;

-o-background-size: cover;

-webkit-background-size: cover;

		height: auto;
		
	  background-repeat: no-repeat;
color: #ffffff;
display: block;
font-size: 20pt;

margin: 0px auto;
padding: 30px 0 30px 0;

text-decoration: none;

}*/
/* form elements on recipe/add page*/

.left {
float: left;
display: block;
/*border: 1px solid red;*/
vertical-align: bottom!important;
}

.right  {
float: right;
margin-right: 100px;
display: block;
/*border: 1px solid blue;*/
vertical-align: bottom!important;
}

span.contributor a {
	float: right;
	color: #666;
	}

span.contributor {
	float: right;
	}

.personal_account {
	clear: both; 
	margin: 0px 0px 10px 0px;	
}
.message{
color: red!important;
background-color: white!important;
}

.error-message {
color: red!important;
background-color: white!important;
}

#home_page {
	/* background-color: #faf9f0;*/
	 background-color: #ffffe0;
	
	border: 1px solid #F0C;
/*	 background-color: #FFFFFC;	 
	margin: 20px auto 20px auto;*/
	padding: 0px!important;
	
	width: 100%;
/*	width: 96%; background-color: #FFFFFF;
min-height: 100%;min-height: 600px;
	*/
min-height: 100%;
text-align: left;
}


div#embedded_document {
	border: 1px solid #F0C;
	padding: 0px;
	margin: 10px auto 10px auto;
	background-color: #FFFFFF;
	width: 910px;
	height: 1000px;
	text-align: center;
}
/*creating a new A4 portrait document, the pixel size of the document is 
Width=595 px
Height=842 px
*/
/*maybe home_page div is enough no because I need margins here*/
#cat_box {
height: auto!important;
min-height: 100%!important;

display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
  grid-template-rows: auto auto auto; /* Three rows with automatic height */

 
}
/*You can't really format the link-position this way because the padding has to be zero for the image background 
if you position the link this way you are going to have the same problem, there will be a space on top of the image when you set a top margin
*/
a.cat_link {
/*do alignments apply to links?
	
can you make a link into a span and use these kind of properties?
display: block;
padding: 0px;
margin: 0px auto;
*/
}
a.cat_link_white {
color: #ffffff;
text-decoration: none;
text-align: center;
vertical-align: middle;

font-weight: bold;
display: block;
	margin-bottom: 20px;
	font-size: 3vw;
}
a.cat_link_black {
color: #000000;
text-decoration: none;
text-align: center;
vertical-align: middle;
font-size: 3vw;
font-weight: bold;
display: block;
	margin-bottom: 20px;
}

.cat_links {
	display: block;
	text-align: center;
	line-height: 1;
}
/*I don't see where .cats is used */
.cats {
	display: block;
	margin: 10px 200px!important;
}

/*
shades of cream:

lightest and least yellow #FFFFCC
medium #FFFFAA
darker and more yellow #FFFF99

fuchsia border: 1px solid #F0C;
*/

	.categories {
	width: 500px; 
	height: 700px;
	
display: block!important;
	
	 margin: 30px auto!important;
	padding: 0px; /*the padding has to be zero because it contains an image*/
	
	 
	}
#cat_box {
height: auto!important;
min-height: 100%!important;

display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
  grid-template-rows: auto auto auto; /* Three rows with automatic height */

	 
 
}

#one {

background-image: url(../img/layout/new/cats/appetizers_and_snacks.jpg);
border-radius: 0.2em;

  background-size: cover!important;
-moz-background-size: cover;

-o-background-size: cover;

-webkit-background-size: cover;
	  
display: block;
	width: 100%;
		height: 100%;
		 min-height: 100% !important;
	  background-repeat: no-repeat;
	  background-position: 50% 50%;
/*margin-bottom: 22em!important;		  
*/

} 

#two {
	
background-image: url(../img/layout/new/cats/breads_and_rolls.jpg);
border-radius: 0.2em;
  background-size: cover!important;
-moz-background-size: cover;

-o-background-size: cover;

-webkit-background-size: cover;
	  
display: block;
	width: 100%;
		height: 100%;
		 min-height: 100% !important;
	  background-repeat: no-repeat;
} 

#three {
border-radius: 0.2em;	
background-image: url(../img/layout/new/cats/cakes_and_cookies.jpg);

  background-size: cover!important;
-moz-background-size: cover;

-o-background-size: cover;

-webkit-background-size: cover;
	  
display: block;
	width: 100%;
		height: 100%;
		 min-height: 100% !important;
	  background-repeat: no-repeat;
} 

#four {
border-radius: 0.2em;
background-image: url(../img/layout/new/cats/desserts_and_candies.jpg);
  background-size: cover!important;
-moz-background-size: cover;

-o-background-size: cover;

-webkit-background-size: cover;
	  
display: block;
	width: 100%;
		height: 100%;
		 min-height: 100% !important;
	  background-repeat: no-repeat;
} 

#five {
border-radius: 0.2em;
background-image: url(../img/layout/new/cats/main_dishes.jpg);
  background-size: cover!important;
-moz-background-size: cover;

-o-background-size: cover;

-webkit-background-size: cover;
	  
display: block;
	width: 100%;
		height: 100%;
		 min-height: 100% !important;
	  background-repeat: no-repeat;
} 

#six {
border-radius: 0.2em;
background-image: url(../img/layout/new/cats/rice_and_beans.jpg);
  background-size: cover!important;
-moz-background-size: cover;

-o-background-size: cover;

-webkit-background-size: cover;
	  
display: block;
	width: 100%;
		height: 100%;
		 min-height: 100% !important;
	  background-repeat: no-repeat;
} 


#seven {
border-radius: 0.2em;	
background-image: url(../img/layout/new/cats/salad.jpg);
  background-size: cover!important;
-moz-background-size: cover;

-o-background-size: cover;

-webkit-background-size: cover;
	  
display: block;
	width: 100%;
		height: 100%;
		 min-height: 100% !important;
	  background-repeat: no-repeat;
} 

#eight {
	border-radius: 0.2em;
background-image: url(../img/layout/new/cats/soup_and_sandwich.jpg);
  background-size: cover!important;
-moz-background-size: cover;

-o-background-size: cover;

-webkit-background-size: cover;
	  
display: block;
	width: 100%;
		height: 100%;
		 min-height: 100% !important;
	  background-repeat: no-repeat;
} 

#nine {
	border-radius: 0.2em;
background-image: url(../img/layout/new/cats/vegetarian_dishes.jpg);
  background-size: cover!important;
-moz-background-size: cover;

-o-background-size: cover;

-webkit-background-size: cover;
	  
display: block;
	width: 100%;
		height: 100%;
		 min-height: 100% !important;
	  background-repeat: no-repeat;
} 
div#top_bar {
background-color: #F0C;
color: #FFF;
/*margin: -10px -100px 0px -100px; width: 910px;width: 90vw;  */

margin: 0px;
padding: 0px;
/*
width: 90vw; 
height: 26px;*/
}

.topnav .icon {
  display: none;
  color: #FFF000;
}
/*
.menu_link {
display: block;
float: left;
margin: 0px;
padding: 4px 8% 4px 2%;
}*/

.topnav {
	overflow: hidden;
}
#login_container{
	width: 960px; 
	height: 600px; 
	overflow: hidden; /*What is this for?*/
	margin: 0px auto 0px auto;
	padding: 0px 20px 0px 20px; 
	text-align: left;
	background-color: #FFFFCC;
	border: 2px dotted #FFFFFF;
	}
	
div#login_page {
	border: 1px solid #F0C;
	padding: 10px 100px 40px 100px;
	margin: 10px auto 10px auto;
	/*background-color: #FFFFCC;*/
	background-color: #FFFFFF;
	/* background: #FFFFFF url('../img/layout/new/cats/background.gif') top left repeat-x;*/ 
	width: 720px;
	clear: both; 
	height: 500px;
}

.ellipsis {
text-overflow: ellipsis!important;
  display: -webkit-box!important;
-webkit-line-clamp: 1; 
/*line-clamp: 1; */
-webkit-box-orient: vertical!important;
    display: -moz-box;
    /**removed overflow hidden and added next 2 lines 12/8/25**/
overflow-wrap: break-word;
overflow: hidden!important;
}

/****
.ellipsis {
text-overflow: ellipsis!important;
-webkit-line-clamp: 5; 
line-clamp: 5; 
-webkit-box-orient: vertical!important;
overflow: hidden!important;
  vertical-align: middle;
  padding-top: 2em!important;
}****/

.bioshorts {
   border: 1px solid #f0c;
  background-color: #fff;
  text-align: left; 
  font-size: calc(1rem + 0.1vw);
  width: auto!important;
  max-width: 100%!important;
 height: 202px;
/* 
  font-size: calc(1rem + 0.1vw);box-sizing: content-box;*/
/*display: block;  letter-spacing:0; width: auto;  margin: 0 auto;*/
}
/* This is a bootstrap class and shouldn't be overwritten. 
*/

.float {
  display: block;
  float: right;
  background: #aaa;
  margin-left: 10px;
}
.float img {
  display: block;
  padding: 0;
  max-width: 100%;
  height: auto;
}
/* I don't think this is used anywhere
div.catshorts {
	display: grid;
	
	padding: 0px 0px 0px 10px;
	margin: 10px auto;
		background-color: #FFF;
	text-align: left;
	width: 95%;
		border: 1px solid #F0C;
	vertical-align: middle;
 
 grid-template-rows: auto;
     grid-template-areas: "recipe cook thumb1 biothumb";
   grid-template-columns: auto auto 130px 75px;
   
}
.recipe {grid-area: recipe;}
.cook {grid-area: cook;}
*/

.catshorts div:first-child, .catshorts div:nth-child(2) {
		padding: 20px 0px 0px 10px;
}
.recipe_top div:first-child, .recipe_top div:nth-child(2) {
		padding: 20px 0px 0px 10px;
}

div.recipe_box {
	/*
		background-color: #FFFFCC; background-color: #ffffe0;*/
	/*background-color: #fff;*/
	padding: 10px 30px;
	margin: 60px auto 40px auto!important;
	/*	background-color: #fffdd0;*/
		/*border: 1px solid #F0C;*/
	text-align: left;
	width: 80%;
	height: auto;
	min-height: 200px;
	vertical-align: top;
	
/*
	clear: both;*/
	
}
/*
.recipe_top {
	width: 90%;
	vertical-align: middle;
 grid-template-rows: 93px;
display: inline-grid;
   grid-template-columns: auto auto 80px;

 margin: 0;
}*/
img.thumbFloatRight {

display: block;
padding: 0px 0px 0px 0px;

/*float: right;margin: -40px -30px 0px 40px;border: 1px solid green;
height: 146px;
width: 112px; 
height: auto;*/
grid-area: thumb;

width: 150px; 
height: 200px;
}
img.thumbFloatRightCat {
display: block;
padding: 0px 0px 0px 0px;
height: 100px;
width: 75px;
grid-area: biothumb;
/*
border: 1px solid green;
width: 70px; 
height: 100px;
*/
}
.thumbFloatRight1 {
display: block;	
padding: 0px 0px 0px 0px;
height: 100px;
width: 134px;
/* 267 x 200 */
grid-area: thumb1;
}

.thumbFloatRightRecipe {
border-radius: 50%;

width: 80px; 
height: 80px;

    object-fit: cover;
  
}
.recipe_name {
font-weight: bold;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;

 flex-basis:40%;
 flex-grow:1;
flex-shrink: 0;
color: #000000;
}

.recipe_contributor {
font-weight: bold;
padding: 0px 10px 0px 0px;
margin: 0px;

color: #000000;
vertical-align: top;
 flex-basis:40%;
 flex-grow:1;
flex-shrink: 0;
}


a.recipe_contributor {
color: #000000;
text-decoration: underline;
}

a.recipe_contributor:hover {
color: #999999;
text-decoration: underline;
}

a.recipe_contributor:checked {
color: #000000;
text-decoration: underline;
}

div#recipe_top_bar {
background-color: #F0C;
color: #FFF;
margin: -10px -40px 10px -40px;
padding: 6px 0px 0px 10px;
width: 790px; 
height: 26px;
}

div#container_top_bar {
background-color: #FFFFFF;
color: #000000;
margin: 0px;
/*margin: 0px -20px 0px -20px;width: 1000px;*/
padding: 6px 0px 0px 0px;
width: 900px; 
height: 26px;
}
/* This doesn't do anything 
a.menu_link {
color: #FFF000;
text-decoration: none;
font-weight: bold;
}

a.menu_link:hover {
color: #FFF;
text-decoration: none;
font-weight: bold;
}

a.menu_link:checked {
color: #000000;
text-decoration: none;
font-weight: bold;
}

*/
a.bio_link {
  color: #00ff00;/*lime green */
  text-decoration: underline;
font-weight: bold;
padding-right: 4px;
}
/*Don't know if this is still being used any more. */
.bio_text {
grid-area: readmore;
padding: 20px;
}
a.bio_link:hover {
  color: #009933;  /*green*/
  text-decoration: underline;
font-weight: bold;
padding-right: 4px;
}
.fuchsia {background-color: #F0C!important; }
a.bio_link:checked {
color: #000000;
font-weight: bold;
text-decoration: underline;
padding-right: 4px;
}
a.bio_link:active {
  color: #F0C; /*fuchsia */
  text-decoration: underline;
}

a.bio_link:visited {
  color: #F0C; /*fuchsia */
  text-decoration: underline;
}
/*
.recipeFloatRightLargeDiv {

float: right;
height: auto;
margin: 0px 0px 0px 20px;
padding: 0 0 20px 0;
width: 400px; 

}*/

img.recipeFloatRightLarge {

padding: 0px 0px 0px 20px;
/*
width: auto; 
height: 500px;*/
width: 400px; 
height: auto;
margin: 0;
float: right;
  max-width: 100%;
  max-height: 100%;
}

img.floatLeft {
float: left;
margin: 0px 10px 0px 0px;
padding: 4px 4px 4px 4px;
border: 2px ridge white;
}

.fuchsia-border {border: 1px solid #F0C;}

.biobox {
	border: 1px solid #F0C;
	padding: 20px 20px 140px 20px;
	margin: 10px auto 10px auto;
	/*background-color: #FFFFCC;*/
	background-color: #FFFFFF;
	/*background: #FFFFFF url('../img/layout/new/cats/background.gif') top left repeat-x;*/
	/*	width: 800px;height: 100vh;
	height: 700px;*/
	width: 88%;
	/*height: auto;*/
	
	height: 100%;
	/*min-height: 520px;*/
}
/* is linkbox used any where? It's used in templates/bios/view */

div.linkbox {
	background-color: #FFFFFF; 
	border: 1px solid #F0C;
	height: 100vh;
	/*min-height: 400px;*/
	margin: 10px auto 10px auto;
	padding: 10px 10px 10px 10px;
	text-align: center;
	/*width: 800px; height: 130px;*/
	width: 88%;
}

div.recipes_linkbox {
	background-color: #FFFFFF; 
	border: 1px solid #F0C;
	margin: 10px auto;
	padding: 20px;
	text-align: center;
	/*width: 800px;*/
	width: 88%;
	height: auto;
	/*
	height: 60vh;
	min-height: 500px;*/
}	
/*
span.recipe_links {
	display: block;
	font-size: 16pt;
	text-align: center;
	color: #000000;
}
a.recipe_links {
	color: #000000;
	font-size: 16pt;
}*/
/*
span.linkbox {
	display: block;
	font-size: 16pt; made this into header instead so that it would be consistent with the rest of the layout
	text-align: center;
	margin: 20px auto 20px auto;
	padding: 20px;
	color: #000000;
}

span.linkbox a {
	color: #000000;
	font-size: 16pt;
}*/
a.linkbox {
	color: #000000;
	font-size: 16pt;
}

h1, h2, h3, h4 {
text-align: center;
}

table {
font-family: Georgia, Garamond, "Times New Roman", Times, serif;
font-size: 12pt;
}

table td {
font-family: Georgia, Garamond, "Times New Roman", Times, serif;
font-size: 12pt;
}

a {
/*color: #606;*/
color: #006666;

text-decoration: underline;
}

a:hover {
color: #999999;
}

a:checked {
color: #000000;
}

#header {
	/*
color: #000000;
background-color: transparent;
font-weight: bold;*/
/*text-align: center;
margin: 0px auto 0px auto;*/
padding: 0px !important;
display: block;
 background-color: transparent;
/*
font-family: Georgia, Garamond, "Times New Roman", Times, serif;
font-size: 16pt;  border-inline: 0px;*/
text-decoration: none;
border: 0px !important;
margin: 0 !important;
outline: none;

}

a.admin_link {
color: #000000;
background-color: transparent;
font-weight: bold;
padding: 0px;
font-family: Georgia, Garamond, "Times New Roman", Times, serif;
font-size: 16pt;
text-decoration: none;
}

a#header:hover {
color: #999999;
background-color: transparent;
font-weight: bold;
/*text-align: center;
margin: 0px auto 0px auto;*/
padding: 0px;
font-family: Georgia, Garamond, "Times New Roman", Times, serif;
font-size: 16pt;
text-decoration: none;
}

a#header:checked {
color: #000000;
background-color: transparent;
font-weight: bold;
/*text-align: center;
margin: 0px auto 0px auto;*/
padding: 0px;
font-family: Georgia, Garamond, "Times New Roman", Times, serif;
font-size: 16pt;
text-decoration: none;
}


.login_form {
width: 300px;
margin: 6px auto 6px auto;
padding: 6px;
}
/*
div.loginbox {
	background-color: #FFFFFF;
	color: black;
	padding: 10px 10px 40px 10px;
	margin: 10px 10px 10px -50px;
	width: 800px;
	clear: both;
}
*/
/*
background-color: #FFFFCC;background-color: #fffdd0;*/

#text {
margin: 20px auto;/* min-height: 600px;
padding: 20px 0px;height: auto;*/
padding: 0px 0px;
background-color: #ffffe0;
min-height: auto;
}

/*
span {display: inline-block!important;}
*/
/* Clear floats after image containers */
/*
.row::after {
  content: "";
  clear: both;
  display: table;
}*/

div#login_top_bar {
background-color: #FFF000;
color: #000000;
margin: 0px;
padding: 6px 0px 0px 10px;
/* without padding this would be width: 910px; height: 26px;*/

width: 900px; 
height: 26px;
}
div#admin_top_header {

color: #F0C;
font-size: 18pt;
margin: 0px;
padding: 6px 0px 0px 10px;
/* without padding this would be width: 910px; */
text-align: center;
width: 900px; 
height: 26px;
}

/*
Maybe add something like this to the links in
div#login_top_bar
so that you don't need all of the  
span.top_tabs {
display: block;
float: left;
margin: 0px;
padding: 4px 18px 4px 18px;
}*/


.three_in_a_row {
display: block; 
width: 200px;
float: left;
font-weight: bold;
margin: 0 0 0 60px;
}


.four_in_a_row {
display: block; 
float: left;
font-weight: bold;
padding: 0 40px 0 60px;
}


/*
@media screen and (max-width: 800px) {
	img#main_pic { 
max-width: 100%;
height:auto;
}
#header{ 
max-width: 100%;
height:auto;
}

	#short_container {
		height: 3530px;		width: 400px;
	}
	#home-page {
		height: 2830px;		width: 400px;
	}
	body {
	width: 100%;
	overflow-x:hidden;}	
	
	.top_tabs {
		float: none !important;}

	h1 {text-align: left;}
	h3 {text-align: left;}

	
	#footer {	width: 100%;}
	
	a#footer_link {width: 100%;}
}
*/
/* Paginator */
/*
.paginator {
    text-align: right;
}
.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.pagination li {
    margin: 0 0.5rem;
}
.prev.disabled a,
.next.disabled a {
    cursor: not-allowed;
    color: #606c76;
}
.asc:after {
    content: " \2193";
}
.desc:after {
    content: " \2191";
}*/
/*
.parent-class {
	position: relative;
}
width: 60vw;
width: 30vw;
*/
table.survey_table textarea {border: 1px solid black;}

table.survey_table  input[type="radio"] { color: black; margin: 0 20px;}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
color: #FFF000!important;
text-decoration: none!important;
font-weight: bold;
  text-align: center;
  padding: 8px 26px;

  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
color: #FFF!important;
text-decoration: none!important;
font-weight: bold;
}

/* Add an active class to highlight the current page */
.topnav a.active {
 color: #000000!important;

font-weight: bold;
}


#A {
background-image: url(../img/layout/square_thumbs/appetizers_and_snacks.jpg);
-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  width: 100px;
  height: 100px;
   text-align: center;
    display: inline-block;
} 

#B {
background-image: url(../img/layout/square_thumbs/breads_and_rolls.jpg);
-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  width: 100px;
  height: 100px;
   text-align: center;
    display: inline-block;

} 

#C {
background-image: url(../img/layout/square_thumbs/cakes_and_cookies.jpg);
-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  width: 100px;
  height: 100px;
   text-align: center;
    display: inline-block;

} 

#D {
background-image: url(../img/layout/square_thumbs/desserts_and_candies.jpg);
-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  width: 100px;
  height: 100px;
   text-align: center;
    display: inline-block;

} 

#E {

background-image: url(../img/layout/square_thumbs/main_dishes.jpg);
-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  width: 100px;
  height: 100px;
   text-align: center;
    display: inline-block;

} 

#F {
background-image: url(../img/layout/square_thumbs/rice_and_beans.jpg);
-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  width: 100px;
  height: 100px;
   text-align: center;
    display: inline-block;

} 


#G {

background-image: url(../img/layout/square_thumbs/salad.jpg);

-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  width: 100px;
  height: 100px;
   text-align: center;
    display: inline-block;

} 

#H {
	
background-image: url(../img/layout/square_thumbs/soup_and_sandwich.jpg);
-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  width: 100px;
  height: 100px;
   text-align: center;
    display: inline-block;

} 

#I {
background-image: url(../img/layout/square_thumbs/vegetarian_dishes.jpg);
-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  width: 100px;
  height: 100px;
   text-align: center;
    display: inline-block;

}

.cat_menu {
grid-template-columns: auto auto auto auto;
/*
   grid-template-columns: 120px 120px 120px 120px 120px 120px 120px 120px 120px;*/

 
 /*This doesn't do anything	 grid-template-rows: 120px;*/
background-color: #FFF;

/* background-color: #FFFFCC;  */
  display: grid;
	font-size: 10pt;
/*This doesn't do anything	grid-gap: 100px;*/

width: 100%;

padding: 20px 0px 20px 0px;

}
.thumb_cat_menu {

-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  width: 100px;
  height: 100px;
   text-align: center;
    display: inline-block;

} 

.cat_h2 {vertical-align: middle!important; 
margin: 35px!important;}


.thumbFloatRightCatCircle {
border-radius: 50%; 
width: 100px;
height: 100px;
float: right;
margin: 0;
display: block;
}
.cat_top {
height: 100px;
margin: auto!important;
padding-right: 10px!important;
/*border: solid red 1px;*/
vertical-align: middle!important;
width: 90%;

}

ul li {
	
	line-height: 2em;
}
/*
/*This doesn't work 
@media screen and (min-width: 100px) and (max-width: 1300px){
.cat_menu {
grid-template-columns: auto auto auto auto;
}}*/
/* This cuts off the image at the bottom 
@media screen and (min-width: 100px) and (max-width: 1300px){
.thumb_cat_menu {

-webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: none;
  width: 50px;
  height: 50px;
}
}*/
/*
@media screen and (min-width: 100px) and (max-width: 600px){
div.bioshorts {
grid-template-rows: auto;
display: grid;
grid-template-areas: "readmore thumb" 
					"readmore thumb";
grid-template-columns: auto auto;
grid-auto-flow: row dense;
}

}*/
.forgot {width:60%; margin: 20px auto;}
.side-nav {margin-left: 100px;}
.toggle {}
.cancel {margin-left: 100px; font-size: 24px;}
.bios {margin: 10px 100px;}
#gender-0, #gender-1 {margin: 10px;}
#contributor, #caption {line-height: 24px; height: 24px; width: 800px; margin-left: 10px;}
.bios_intro {width: 90%; display: block; margin: 20px auto;}

.login td input {
	width: 78%;
	height: 40px;
	
}
.fl_left{
	float: right;
	height: 40px;
	width: 30%;
	/*width: 30%;
	float: left;*/
	margin: 20px auto;
	
}
.fl_right{
	float: right;
	height: 40px;
	width: 70%;
	/*width: 30%; float: right;*/
		margin: 20px auto;

}
/*
.submit {
	width: 60%!important;
	margin: auto;
}*/
/*
textarea {
            border: 1px solid #777;
            border-radius: 2px;
            font-family: inherit;
            padding: 10px;
            display: block;
            width: 95%;}*/