@charset "UTF-8";
/* See cookbook.scss for the actual source */
@font-face {
  font-family: 'Clarendon BT';
  src: url("fonts/ClarendonBT-Heavy.woff2") format("woff2"), url("fonts/ClarendonBT-Heavy.woff") format("woff");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'Clarendon BT';
  src: url("fonts/ClarendonBT-Bold.woff2") format("woff2"), url("fonts/ClarendonBT-Bold.woff") format("woff");
  font-weight: 800;
  font-style: normal; }

@font-face {
  font-family: 'Clarendon BT';
  src: url("fonts/ClarendonBT-Black.woff2") format("woff2"), url("fonts/ClarendonBT-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal; }

/*********************************************************************************************/
/*********************************************************************************************/
textarea {
  resize: vertical; }

*, ::before, ::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/*********************************************************************************************/
/* MAIN PAGE LAYOUT */
body {
  font-family: "Georgia", serif;
  font-size: 14pt; }

body.centered {
  display: grid;
  grid-template-columns: auto;
  grid-template-areas: "header" "content" "footer"; }

@media screen {
  body {
    display: grid;
    grid-template-columns: 200px auto;
    grid-column-gap: 0.7in;
    grid-row-gap: 0.33in;
    grid-template-areas: "header     header" "leftnav    content" "footer     footer";
    background-image: url(/images/paper-bkgnd2b.png);
    background-repeat: repeat; } }

@media screen and (min-width: 481px) {
  .phone {
    display: none !important; }
  body {
    margin: 0 auto;
    padding: 0 0.5in;
    max-width: 1196px; }
  body.centered main {
    margin: 0 auto;
    width: 85%;
    max-width: 900px;
    min-width: 500px; } }

main {
  grid-area: content; }

body > footer {
  grid-area: footer; }

@media print {
  body {
    margin: 0 0.66in;
    display: grid;
    grid-row-gap: 0.33in;
    grid-template-columns: auto;
    grid-template-areas: "header" "content" "footer";
    font-size: 11pt; }
  img#masthead {
    max-width: 2in; }
  div#leftnav {
    display: none; }
  div#content {
    margin-left: auto;
    max-width: inherit; } }

a, a:visited {
  color: blue; }

hr {
  border: 1px solid #c0c0c0; }

h1 {
  font-family: "Clarendon BT", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em; }

@media not print {
  h1 {
    font-size: 30pt; }
  h1:first-of-type {
    margin-top: -10px; } }

@media print {
  h1 {
    font-size: 24pt; }
  h1:first-of-type {
    margin-top: -16px; } }

h1.withcontrols {
  margin-bottom: 2px; }

header#masthead {
  grid-area: header;
  border-bottom: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media screen {
    header#masthead {
      margin-top: 0.25in; } }
  @media print {
    header#masthead {
      margin-top: 0;
      border-bottom: 1px solid black; } }
  header#masthead div.spacer {
    width: 2rem;
    height: 0pt; }
  header#masthead img#masthead {
    mix-blend-mode: multiply; }
  @media screen and (min-width: 481px) {
    header#masthead img#masthead {
      width: 386px; }
    header#masthead div#searchbox input {
      min-width: 386px;
      max-width: 100%; }
      header#masthead div#searchbox input:placeholder-shown {
        border-color: #c0c0c0; } }
  header#masthead div#searchbox {
    margin-bottom: 8px; }
  header#masthead div#searchbox input {
    font-size: 16pt;
    font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif;
    height: 36px;
    padding: 0 0.33em;
    background-size: contain;
    background-repeat: no-repeat;
    border: 1px solid #a0a0a0;
    border-radius: 4px; }
    header#masthead div#searchbox input:placeholder-shown {
      background-image: url(/images/search.png); }
    header#masthead div#searchbox input:focus {
      background-image: unset;
      border-color: #a0a0a0; }
    header#masthead div#searchbox input:hover {
      border-color: #a0a0a0; }

header#masthead.homepage div#searchbox input:placeholder-shown {
  background-image: url(/images/search-gray_med.png); }

header#masthead.homepage div#searchbox input:placeholder-shown:hover {
  background-image: url(/images/search.png); }

header#masthead.homepage div#searchbox input:focus {
  background-image: unset !important; }

#leftnav {
  grid-area: leftnav; }

#leftnav .categories ul {
  list-style-type: none;
  padding: 0; }

#acctbox {
  display: flex;
  justify-content: flex-start; }
  #acctbox img {
    display: block;
    margin-right: 12px;
    width: 48px;
    height: 48px; }
  #acctbox #acctbox_contents p {
    margin: -3px 0 0 0; }
  #acctbox #acctbox_contents p.helloline {
    font-family: "Clarendon BT", sans-serif;
    font-size: 90%;
    margin-top: 0;
    margin-bottom: 0.25em; }
  #acctbox #acctbox_contents p.acctlink {
    text-transform: uppercase; }
  #acctbox .acctlink {
    font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif;
    font-size: 80%;
    font-weight: bold; }
  #acctbox .acctlink a {
    text-decoration: none;
    color: black; }
    #acctbox .acctlink a:hover {
      text-decoration: underline; }

form button, input[type=submit], form input[type=button], form input[type=reset] {
  margin: 4px 4px 4px 0;
  border: 1px solid #a0a0a0;
  border-radius: 3px;
  background-color: white;
  font-size: 13pt;
  font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif;
  color: black;
  padding: 8px 15px 8px 15px;
  box-shadow: 0px 1px 3px #D0D0D0; }
  form button:any-link, input[type=submit]:any-link, form input[type=button]:any-link, form input[type=reset]:any-link {
    text-decoration: none; }
  form button:hover, input[type=submit]:hover, form input[type=button]:hover, form input[type=reset]:hover {
    background-color: #f2f2f2; }
  form button:active, input[type=submit]:active, form input[type=button]:active, form input[type=reset]:active {
    background-color: #bfbfbf;
    border-color: #bfbfbf; }
  form button:disabled, input[type=submit]:disabled, form input[type=button]:disabled, form input[type=reset]:disabled {
    border: 1px solid #cdcdcd;
    color: #c0c0c0;
    background-color: transparent;
    box-shadow: none; }

/* HOME PAGE */
#home h1, #home h2, #home h3 {
  font-family: "Clarendon BT", sans-serif; }

#home #clickme {
  width: 100%;
  padding: 0 10% 32px 10%; }
  #home #clickme h1, #home #clickme h2 {
    font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif; }
  #home #clickme .searchbox {
    margin: 1em auto;
    width: 100%;
    font-size: 21pt; }
    #home #clickme .searchbox input {
      font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif;
      padding: 0 0.33em;
      background-size: contain;
      background-repeat: no-repeat;
      border: 1px solid #a0a0a0;
      border-radius: 4px; }
      #home #clickme .searchbox input:placeholder-shown {
        background-image: url(/images/search.png); }
      #home #clickme .searchbox input:focus {
        background-image: unset;
        border-color: #a0a0a0; }
      #home #clickme .searchbox input:hover {
        border-color: #a0a0a0; }
    #home #clickme .searchbox input {
      width: 100%;
      padding: 4px 0.25em; }
  #home #clickme .addbtn {
    margin: 4px 4px 4px 0;
    border: 1px solid #c0c0c0;
    border-radius: 3px;
    background-color: white;
    border-radius: 4px;
    display: block;
    font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif;
    font-weight: 500;
    text-align: center;
    padding: 0.5em;
    color: black;
    width: 100%;
    box-shadow: 0px 1px 3px #D0D0D0; }
    #home #clickme .addbtn:any-link {
      text-decoration: none; }
    #home #clickme .addbtn:hover {
      background-color: #f2f2f2; }
    #home #clickme .addbtn:active {
      background-color: #bfbfbf;
      border-color: #bfbfbf; }
    #home #clickme .addbtn:disabled {
      border: 1px solid #cdcdcd;
      color: #c0c0c0;
      background-color: transparent;
      box-shadow: none; }

#home #boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }

#home #intro {
  flex: 2;
  margin-right: 1em; }
  #home #intro li {
    font-size: 95%;
    margin-bottom: 0.5em; }

#home #recent-changes {
  flex: 3;
  width: min-content; }
  #home #recent-changes p {
    font-size: 80%;
    font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif; }
  #home #recent-changes span.name {
    font-family: "Georgia", serif; }
  #home #recent-changes ul {
    list-style-type: none; }
  #home #recent-changes p {
    margin-top: 0; }

/* RECIPE LISTING */
.organizer {
  font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif;
  font-size: 80%;
  display: flex;
  background-color: #e0e0e0;
  padding: 3px 6px 2px 6px;
  flex-wrap: wrap; }
  .organizer div {
    margin-right: 1.3em;
    margin-top: 2px;
    margin-bottom: 2px; }
  .organizer .label {
    font-weight: bold; }
  .organizer a {
    text-decoration: none;
    padding: 0 3px;
    border: 1px solid transparent; }
    .organizer a:hover {
      border: 1px dotted #a0a0a0; }
  .organizer .selected {
    border: 1px solid #a0a0a0;
    padding: 0 3px;
    background-color: white;
    border-radius: 2px; }

ul.recipelist {
  list-style-type: none; }

ul.searchlist {
  padding-left: 20px; }

li.recipelist {
  margin: 4pt auto; }

h2.group_heading {
  margin-bottom: 0.5em; }

h2.group_heading + ul.recipelist {
  margin-top: 0; }

li.searchlist img.score {
  display: inline-block;
  vertical-align: text-bottom;
  margin-bottom: 2px;
  margin-right: 1em; }

/* RECIPE DISPLAY */
/* NOTE: div.recipe is also used for recipe editing */
@media not print {
  div.recipe p {
    max-width: 40em; } }

p {
  line-height: 120%;
  font-variant-numeric: oldstyle-nums;
  letter-spacing: -0.01em; }

h2 {
  font-size: 16pt;
  margin-top: 32px;
  font-family: "Clarendon BT", sans-serif;
  font-weight: bold; }

div.ingredients ul {
  list-style-type: none;
  padding-left: 2em;
  margin-bottom: 1.25em; }

div.ingredients li {
  margin: 0.5em 0;
  text-indent: -1em;
  font-variant-numeric: oldstyle-nums;
  letter-spacing: -0.01em; }

/* HOW IT SHOULD WORK IF SAFARI WEREN'T BROKEN
div.ingredients ul {
    columns: 2;
    column-gap: 2em;
}
div.ingredients li { margin: 0.3em 0; }
*/
@media print {
  h2 {
    font-size: 14pt;
    margin: 20pt 0 10pt 0; }
  div.ingredients.noprint {
    display: none; }
  div.ingredients.print {
    display: flex; }
  div.ingredients.print ul {
    margin: -8px 2em 0 0;
    flex: 0 0 50%; }
  div.ingredients.print li {
    margin: 0.3em 0; } }

@media not print {
  h2 {
    margin: 24pt 0 12pt 0; }
  div.ingredients.noprint {
    display: block; }
  div.ingredients.print {
    display: none; } }

p.source {
  font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif;
  font-size: 90%;
  color: gray;
  font-style: italic; }

@media print {
  p.source {
    color: black; } }

p.categories_list {
  font-family: "Georgia", serif; }
  p.categories_list b {
    font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif; }

div#infobox {
  border: 1px solid #EFEFEF;
  clear: both; }
  div#infobox p {
    font-size: 80%;
    font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif; }
  div#infobox span.name {
    font-family: "Georgia", serif; }
  div#infobox p {
    margin: 2px 6px; }

div#infobox a.editbutton {
  margin: 4px 4px 4px 0;
  border: 1px solid #a0a0a0;
  border-radius: 3px;
  background-color: white;
  font-size: 13pt;
  font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif;
  text-align: center;
  color: black;
  display: block;
  float: right;
  max-width: 40%;
  margin: 4px 4px 4px 6px;
  padding: 6px 16px 6px 16px;
  box-shadow: 0px 1px 3px #D0D0D0; }
  div#infobox a.editbutton:any-link {
    text-decoration: none; }
  div#infobox a.editbutton:hover {
    background-color: #f2f2f2; }
  div#infobox a.editbutton:active {
    background-color: #bfbfbf;
    border-color: #bfbfbf; }
  div#infobox a.editbutton:disabled {
    border: 1px solid #cdcdcd;
    color: #c0c0c0;
    background-color: transparent;
    box-shadow: none; }

li .faveheart {
  color: red;
  font-family: sans-serif;
  font-size: 85%; }

#favebutton {
  margin: 4px 4px 4px 0;
  border: 1px solid red;
  border-radius: 3px;
  background-color: white;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  margin: 6px;
  padding: 0;
  height: 28px;
  width: 32px; }
  #favebutton:any-link {
    text-decoration: none; }
  #favebutton:hover {
    background-color: #f2f2f2; }
  #favebutton:active {
    background-color: #bfbfbf;
    border-color: #bfbfbf; }
  #favebutton:disabled {
    border: 1px solid #cdcdcd;
    color: #c0c0c0;
    background-color: transparent;
    box-shadow: none; }
  #favebutton svg {
    height: 24px;
    width: 24px;
    margin: 1px auto; }
  #favebutton[value="off"] {
    background-color: white;
    border-color: red; }
    #favebutton[value="off"] svg {
      fill: #c0c0c0; }
    #favebutton[value="off"]:hover {
      border-color: red; }
      #favebutton[value="off"]:hover svg {
        fill: red; }
    #favebutton[value="off"]:active {
      border-color: red; }
      #favebutton[value="off"]:active svg {
        fill: #e60000; }
  #favebutton[value="on"] {
    border-color: red;
    background-color: red; }
    #favebutton[value="on"] svg {
      fill: white; }
    #favebutton[value="on"]:active {
      border-color: #e60000;
      background-color: #e60000; }
      #favebutton[value="on"]:active svg {
        fill: #c0c0c0; }

div#sessionstuff {
  font-size: 10pt; }

section.blurb, section.gallery {
  float: right;
  display: block;
  font-size: 110%;
  font-style: italic;
  font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif;
  margin: 0 0 1em 1em;
  min-width: 35%;
  max-width: 49%;
  /* If the blurb text is the first element in the blurb container,
       push it flush against the top of the blurb container. */ }
  section.blurb p, section.gallery p {
    text-align: center; }
  section.blurb > p:first-child, section.gallery > p:first-child {
    margin-top: 0; }
  section.blurb p:last-of-type, section.gallery p:last-of-type {
    margin-bottom: 0; }

@media print {
  section.blurb {
    /* for print, make the blurb full-width at the top of
        the page */
    float: unset;
    max-width: unset;
    width: 100%;
    margin: -0.6em 1em 1em 1em;
    font-size: 100%; } }

section.gallery {
  min-height: 300px; }

div#galleria {
  min-height: inherit; }
  div#galleria .galleria-thumbs {
    display: none; }

/* this selctor covers when JavaScript isn't enabled;
   When Galleria runs, it sets the width of the images. When
   it doesn't run, we have to do it. Galleria alters the document
   structure when it runs, so this selection only matches when
   it doesn't run. */
div#galleria > noscript > img, div#galleria > img {
  max-width: 100%;
  max-height: 400px;
  display: block;
  margin: auto; }

/* Comments */
form#addcomment textarea {
  font-size: 13pt;
  padding: 6px 8px;
  width: 100%;
  min-height: 5em;
  border-width: 1px;
  border-style: solid;
  border-color: #e0e0e0;
  border-radius: 6px; }

form#addcomment input[type=submit],
form#addcomment input[type=button] {
  margin: 4px 4px 4px 0;
  border: 1px solid #a0a0a0;
  border-radius: 3px;
  background-color: white;
  font-size: 13pt;
  font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif;
  color: ButtonText;
  padding: 8px 15px 8px 15px;
  box-shadow: 0px 1px 3px #D0D0D0; }
  form#addcomment input[type=submit]:any-link,
  form#addcomment input[type=button]:any-link {
    text-decoration: none; }
  form#addcomment input[type=submit]:hover,
  form#addcomment input[type=button]:hover {
    background-color: #f2f2f2; }
  form#addcomment input[type=submit]:active,
  form#addcomment input[type=button]:active {
    background-color: #bfbfbf;
    border-color: #bfbfbf; }
  form#addcomment input[type=submit]:disabled,
  form#addcomment input[type=button]:disabled {
    border: 1px solid #cdcdcd;
    color: #c0c0c0;
    background-color: transparent;
    box-shadow: none; }

div.comment * {
  font-size: 13pt; }

div.comment p.user {
  margin-bottom: 4px; }

div.comment p.user img {
  vertical-align: text-bottom;
  margin-right: 4px; }

div.comment div.text {
  margin-top: 4px; }

div.comment li {
  margin-bottom: 0.7em; }

div.comment span.username {
  font-weight: bold;
  font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif; }

div.comment span.you {
  /* give users a little special something for their own comments */
  text-shadow: #EEEE00 0 0 10px; }

div.comment span.timestamp {
  font-style: oblique; }

div.comment button.delcomment {
  margin-left: 1em;
  font-size: 10pt;
  padding: 0.2em 0.5em;
  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif; }

span.ampm {
  font-variant-caps: all-small-caps; }

/* RECIPE EDITING */
.recipe_edit {
  /* style the title input field much like an H1 */
  /* Textareas are now automatically resized by some JS as the user
       enters/pastes text. It will never go below the min-height, though. */
  /*
     * transparent backround images trick from:
     * <https://css-tricks.com/snippets/css/transparent-background-images/>
     */ }
  .recipe_edit h1, .recipe_edit h2 {
    margin-top: 0;
    font-family: "Clarendon BT", sans-serif; }
  .recipe_edit .blurb h2, .recipe_edit .source h2 {
    font-size: 14pt;
    /* let the surrounding elements take care of margins/padding */
    margin: 0;
    margin-bottom: 10px; }
  .recipe_edit .blurb textarea {
    display: block; }
  .recipe_edit label {
    font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif;
    font-size: 12pt; }
    .recipe_edit label input {
      margin-right: 6px; }
  .recipe_edit div#cats_flexer {
    display: flex;
    justify-content: center; }
  .recipe_edit div.cats.catlist {
    flex: 0 1 14em; }
  .recipe_edit div.cats.controls {
    padding: 1.5em;
    align-self: center;
    flex: 0 2 8em; }
    .recipe_edit div.cats.controls button {
      width: 100%;
      margin: 4px auto; }
      .recipe_edit div.cats.controls button#cat_add:before {
        position: relative;
        font-size: 10pt;
        content: "◀︎";
        color: darkgreen;
        padding-right: 0.5em; }
      .recipe_edit div.cats.controls button#cat_del:after {
        position: relative;
        font-size: 10pt;
        content: "▶︎";
        color: darkred;
        padding-left: 0.5em; }
  .recipe_edit .cats h3 {
    margin: 0 0 0.25em 0;
    font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif;
    font-size: 14pt; }
  .recipe_edit select.catbox {
    width: 100%;
    font-size: 14pt;
    font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif; }
    .recipe_edit select.catbox[name="add_categories"] {
      /* force the scrollbar for the box that generally always needs one */ }
      .recipe_edit select.catbox[name="add_categories"]::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 14px;
        height: 14px;
        -webkit-overflow-scrolling: auto; }
      .recipe_edit select.catbox[name="add_categories"]::-webkit-scrollbar-thumb {
        border-radius: 7px;
        background-color: rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.2); }
  .recipe_edit input[type="submit"], .recipe_edit button {
    font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif; }
  .recipe_edit input[type="text"], .recipe_edit textarea {
    font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif;
    font-size: 12pt;
    border: 1px solid #a0a0a0;
    border-radius: 3px;
    opacity: 0.8; }
  .recipe_edit input[type="text"]#title {
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px dotted transparent;
    margin-bottom: 1px;
    font-family: "Clarendon BT", sans-serif;
    font-size: 22pt;
    font-weight: bold;
    width: 100%; }
    .recipe_edit input[type="text"]#title:hover, .recipe_edit input[type="text"]#title:active, .recipe_edit input[type="text"]#title:focus {
      border-bottom: 1px dotted black; }
  .recipe_edit textarea {
    width: 100%;
    min-height: 6.67em;
    line-height: 130%;
    padding: 2px 4px;
    margin: 10px auto; }
  .recipe_edit button, .recipe_edit input[type="submit"], .recipe_edit input[type="reset"] {
    margin: 4px 4px 4px 0;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    background-color: white;
    padding: 0.3em 0.7em 0.4em 0.6em;
    font-size: 12pt;
    box-shadow: 0px 1px 3px #D0D0D0; }
    .recipe_edit button:any-link, .recipe_edit input[type="submit"]:any-link, .recipe_edit input[type="reset"]:any-link {
      text-decoration: none; }
    .recipe_edit button:hover, .recipe_edit input[type="submit"]:hover, .recipe_edit input[type="reset"]:hover {
      background-color: #f2f2f2; }
    .recipe_edit button:active, .recipe_edit input[type="submit"]:active, .recipe_edit input[type="reset"]:active {
      background-color: #bfbfbf;
      border-color: #bfbfbf; }
    .recipe_edit button:disabled, .recipe_edit input[type="submit"]:disabled, .recipe_edit input[type="reset"]:disabled {
      border: 1px solid #cdcdcd;
      color: #c0c0c0;
      background-color: transparent;
      box-shadow: none; }
    .recipe_edit button.add:before, .recipe_edit input[type="submit"].add:before, .recipe_edit input[type="reset"].add:before {
      position: relative;
      top: -1px;
      font-size: 8pt;
      content: "➕";
      padding-right: 0.5em; }
    .recipe_edit button.delete:before, .recipe_edit input[type="submit"].delete:before, .recipe_edit input[type="reset"].delete:before {
      position: relative;
      top: -1px;
      font-size: 8pt;
      content: "❌";
      padding-right: 0.5em; }
  .recipe_edit .recipe_block .heading_field {
    display: flex;
    align-items: baseline;
    column-gap: 0.4em; }
  .recipe_edit .recipe_block label {
    display: block;
    font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif;
    font-weight: 600;
    margin-left: 0;
    padding-left: 0;
    flex: 0 0 auto; }
  .recipe_edit .recipe_block input[type="text"].heading {
    display: block;
    font-weight: bold;
    flex: 1 2 0;
    width: 100%; }
  .recipe_edit .recipe_block input[type="text"]#source {
    width: 100%; }
  .recipe_edit .recipe_block {
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    margin: 1em auto;
    padding: 0.5em 0.8em; }
  .recipe_edit .recipe_block.ingredients {
    background-color: #EEFFF6;
    position: relative;
    z-index: 1; }
    .recipe_edit .recipe_block.ingredients:after {
      content: "";
      background-image: url(/images/salt-shaker.png);
      background-repeat: no-repeat;
      background-size: 200px;
      opacity: 0.3;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1; }
  .recipe_edit .recipe_block.instructions {
    background-color: #EEF6FF;
    position: relative;
    z-index: 1; }
    .recipe_edit .recipe_block.instructions:after {
      content: "";
      background-image: url(/images/gold-cookbook-recipe.png);
      background-repeat: no-repeat;
      background-size: 200px;
      opacity: 0.3;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1; }
  .recipe_edit div.photo_edit_index {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
  .recipe_edit div.thumb_box {
    border: 2px dashed #c0c0c0;
    border-radius: 3px;
    overflow: hidden;
    width: 220px;
    min-height: 124px;
    padding: 5px;
    margin: 0 0 10px 0; }
    .recipe_edit div.thumb_box#uploadbox {
      border-color: pink; }
    .recipe_edit div.thumb_box img {
      display: block;
      margin: 0 auto;
      max-width: 180px;
      max-height: 100px; }
    .recipe_edit div.thumb_box input {
      font-size: small;
      font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif; }
    .recipe_edit div.thumb_box .controls {
      display: flex;
      justify-content: flex-end;
      gap: 5px;
      margin-top: 5px;
      padding-top: 5px;
      border-top: 1px solid #c0c0c0; }
    .recipe_edit div.thumb_box .photo_edit_ctrl {
      margin: 0 2px;
      width: 24px;
      height: 24px;
      background-position: center;
      background-repeat: no-repeat; }
      .recipe_edit div.thumb_box .photo_edit_ctrl.left {
        background-image: url(/images/box-arrow-left.svg); }
      .recipe_edit div.thumb_box .photo_edit_ctrl.right {
        background-image: url(/images/box-arrow-right.svg); }
      .recipe_edit div.thumb_box .photo_edit_ctrl.trash {
        margin-right: 0;
        background-image: url(/images/trash.svg); }
  .recipe_edit div.photo_thumb_box.first .photo_edit_ctrl.left,
  .recipe_edit div.photo_thumb_box.last .photo_edit_ctrl.right {
    display: none; }

h2.useredit {
  font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif; }

table.userattrs th, table.userattrs td {
  vertical-align: baseline; }

table.userattrs th {
  font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif;
  text-align: right;
  padding-right: 1em; }

table.userattrs td {
  font-family: "Georgia", serif;
  text-align: left; }

table.userattrs input, table.userattrs select, table.userattrs datalist {
  font-size: 14pt; }

input#userpicture {
  font-family: "Lucida Grande", system-ui;
  font-size: 13pt; }

div.passwd_error, div.error {
  margin: 1rem auto;
  border: 3px dashed red;
  border-radius: 6px; }
  div.passwd_error p, div.error p {
    margin: 12px;
    color: red;
    font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif;
    font-weight: normal;
    text-align: center; }

@media print {
  .noprint {
    display: none !important; } }

/*********************************************************************************************/
/* LOGIN FORM */
#loginbox {
  max-width: 550px;
  margin: 0.5in auto;
  padding: 1.5rem;
  border: 2px solid #c0c0c0;
  border-radius: 6px; }
  #loginbox legend {
    font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif;
    font-weight: bold;
    padding: 0 6px;
    margin-left: -5px; }
  #loginbox .error {
    margin-top: 0; }
  #loginbox label {
    display: block;
    font-family: "Avenir Next", "Avenir", "Futura", "Helvetica", sans-serif; }
  #loginbox input[type="text"], #loginbox input[type="password"] {
    font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif;
    font-size: 110%;
    width: 100%;
    padding: 0.3em 0.4em;
    border-radius: 3px;
    border: 1px solid #a0a0a0;
    margin-bottom: 1em; }
  #loginbox button {
    display: block;
    margin: 4px auto 0 auto;
    padding-left: 2em;
    padding-right: 2em;
    font-size: 120%;
    font-weight: 500; }

/* vim: ts=4 sts=4 sw=4 expandtab
 */