/* The following two values MUST match variables of the same name
in the file globalVarsFunctionsTop.js */
.noSelect, .banner, .buttonStyle {
  -webkit-user-select: none;
  user-select: none; }

/* class for banner - top div with word "recipes" 
*/
.banner {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  font-size: 25px;
  background-color: #ffcc66;
  color: black;
  width: auto;
  height: auto;
  max-width: 700px;
  min-width: 300px;
  border: 1px solid black; }

/* Style for ALL buttons, everywhere, EXCEPT for the simple-text
buttons along the top of each recipe. 
*/
.buttonStyle {
  z-index: 100;
  color: black;
  background-color: #ffffcc;
  text-align: center;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 2px 2px 6px 3px #999999;
  /* Hoffset Voffset radius spread color incl opacity 
  box-shadow: inset ........  */
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 1px; }

.buttonStyle:hover {
  color: red;
  cursor: pointer; }

.buttonStyle:active {
  box-shadow: none;
  background-color: buttonBarBkgdColor;
  color: #a65959; }

/* buttonBar is second row - with the 4 buttons
*/
.buttonBar {
  display: flex;
  border: 1px solid black;
  background-color: #d6d6f5;
  max-width: 700px;
  min-width: 300px;
  align-items: center;
  width: auto; }

/*  individual button container */
.cbContainer {
  background-color: #bebef4;
  padding-top: 20px;
  padding-bottom: 20px;
  z-index: 100; }

/* classes for drop-down menus, which drop dwon from the
buttons on the button bar.
*/
.dropDownContainer {
  border: 1px solid black;
  background-color: orange;
  padding: 6px;
  z-index: 2000; }

.dropDownCell {
  /*border: 1px solid green;*/
  background-color: orange;
  color: black;
  padding: 4px; }

.dropDownCell:hover {
  background-color: blue;
  color: white;
  cursor: pointer; }

/* The class for the yellow bars, each with a recipe name */
.recipeLine {
  background-color: yellow;
  color: black;
  border: 1px solid black;
  text-align: center;
  padding: 5px;
  max-width: 690px;
  /* NOTE!!! */
  z-index: 500; }

.recipeLine:hover {
  cursor: pointer;
  background-color: orange;
  color: white; }

/* classes for the various fields in individual recipes.
*/
/* Field for the background */
.recipeScreenGeneral, .recipeScreenContainer, .recipeTitleElement {
  background-color: pink;
  text-align: center; }

.recipeScreenContainer {
  border: 1px solid black;
  box-sizing: border-box;
  z-index: 1500; }

/* classes for recipe text fields 
*/
.recipeTextGeneral, .recipeIngredients, .recipeComments, .recipeKeywords, .recipeInstructions, .recipeLink, .recipeBook {
  background-color: white;
  cols: 100;
  color: black;
  margin: 10px;
  box-sizing: border-box;
  outline: 0;
  max-length: 300; }

.recipeName {
  text-align: left;
  outline: 0; }

.recipePhoto {
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box;
  margin-left: 10px;
  margin-right: 2px; }

/* classes used for plain text buttons at top of individual recipes.
This one is used for spaces which separate menu items.
It must not have a :hover.
*/
.recipeSimpleMenu, .recipeSimpleMenu1 {
  background-color: pink;
  padding-top: 10px; }

/* This one is used for hover
*/
.recipeSimpleMenu1:hover {
  cursor: pointer;
  color: red; }

/*This is the class for a pop-ups, which are absolutely positioned.
This positions and styles the pop up container.
It assumes message and buttons only. Override for
different height.*/
.popupBasic, .popupGeneralContainer, .popupGeneralMessage {
  background-color: white;
  color: black; }

.popupGeneralContainer {
  border: 3px solid orange;
  padding: 10px;
  z-index: 2500;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 280px;
  height: auto; }

/* Messages are the simple static text of popups. Not textarea,
and not used for selection from lists
*/
.popupGeneralMessage {
  font-size: 12px;
  padding-bottom: 10px; }

.popupSelectKeywordsMessage {
  background-color: white;
  color: red;
  text-align: center;
  font-size: 15px;
  padding-bottom: 15px; }

.popupSelectKeywordsMessage:hover {
  background-color: blue;
  color: white;
  cursor: pointer; }

/* classes for positioning buttons in popups.
These are for container classes
*/
.popupSingleButtonContainer {
  padding-left: 20px;
  padding-top: 20px;
  display: flex; }

.popupSeveralButtonsContainer, .buttonOneOfOneLeft, .buttonOneOfTwoLeft, .buttonOneOfThreeLeft {
  display: flex;
  padding-top: 15px;
  text-align: left; }

.buttonOneOfOneLeft {
  position: absolute;
  left: 200px; }

.buttonOneOfTwoLeft {
  position: absolute;
  left: 155px; }

.buttonOneOfThreeLeft {
  position: absolute;
  left: 100px; }

/* Used for selecting from two-column list
*/
.popupListLeft {
  position: absolute;
  left: 10px; }

.popupListRight {
  position: absolute;
  left: 150px;
  display: inline-block; }

.popupKeywordsTitle {
  text-align: center;
  width: 50%;
  display: inline-block;
  padding-top: 10px;
  font-size: 15px; }

/* classes for textareas of various popups.
*/
/* extend from this */
.popupTexts, .popupBookTextarea, .popupPhotoTextarea {
  outline: 0;
  cols: 100;
  background-color: white;
  color: black;
  margin: 10px;
  box-sizing: border-box;
  font-size: 10px;
  /* textareas have larger fonts */
  width: 240px;
  max-width: 240px;
  max-height: 40px; }

.popupBookTextarea {
  rows: 2; }

.popupPhotoTextarea {
  rows: 6;
  height: 80px;
  max-height: 80px; }

/* extend from this */
.popupFromLists, .popupKeywordsList, .popupKeywordsListSelected, .popupBooksList, .popupBooksListSelected, .popupBooksListNoSelect {
  border: 1px solid black;
  text-align: center;
  margin-right: 6px;
  padding-top: 2px;
  padding-bottom: 2px;
  display: inline-block;
  font-size: 12px;
  color: black;
  background-color: white; }

.popupKeywordsList {
  width: 47%; }

.popupKeywordsListSelected {
  width: 47%;
  color: white;
  background-color: red; }

.popupKeywordsList:hover {
  cursor: pointer;
  background-color: blue;
  color: white; }

.popupKeywordsListSelected:hover {
  cursor: pointer; }

.popupBooksList {
  width: 100%; }

.popupBooksList:hover {
  cursor: pointer;
  background-color: blue;
  color: white; }

.popupBooksListSelected {
  width: 100%;
  color: white;
  background-color: red; }

.popupBooksListSelected:hover {
  cursor: pointer; }

/* for plain list, no selection possible */
.popupBooksListNoSelect {
  border: 0;
  width: 100%;
  color: blue;
  background-color: white; }

/*# sourceMappingURL=recipe.css.map */