body {
  font-family: -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Oxygen-Sans,
                Ubuntu,
                Cantarell,
                "Helvetica Neue",
                sans-serif;
  margin: 0;
  padding: 0;
}

pre {
    font-family: -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Oxygen-Sans,
                Ubuntu,
                Cantarell,
                "Helvetica Neue",
                sans-serif;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    margin: 0;
    padding: 0;
}

nav {
    height: 55px;
    background: #dcbfad;
    background-image: url('/general/billie-holiday.png');
    border-bottom: 3px solid #3d1e07;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

nav a {
    color: #2a1002 !important;
}

nav > div {
    display: flex;
    padding-left: 10px;
}

#nav_search_container {
    flex-grow: 1;
}

input:focus-visible {
  outline: 2px solid #2a1002;
}

/* The site's logo, a tree, shown in top left */
#logo img {
    width: 40px;
}


/* the help icon, shown in the top right */
a#help {
    text-decoration: none;
    font-size: 26px;
    color: white;
    margin-right: 10px;
}


/* Heading font */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Roboto,
                Oxygen-Sans,
                Ubuntu,
                Cantarell,
                "Helvetica Neue",
                sans-serif;
  color: #513525;
  text-shadow: 1px 1px 0.3px #ffe2cbba;
}

/* This CSS fixes the details element - it's clickable, should show an appropriate pointer */
details summary {
  cursor: pointer;
}

/* This CSS fixes the summary element in details - this makes it inline instead of pushed down below the arrow */
details summary > * {
  display: inline;
}

/* for the search field in the header */

div#nav_search_result_container {
    position: absolute;
    font-size: small;
    background: white;
    border: 1px solid grey;
    right: -95px;
    z-index: 999; /* put it on top of everything */
}

div#nav_search_result_container > ul > li:hover,
div#nav_search_result_container > ul > li[selected]
{
    background: lightblue;
}

ul#nav_search_result_list {
    list-style: none;
    padding-inline-start: 7px;
    padding-inline-end: 7px;
}

ul#nav_search_result_list > li {
    margin-bottom: 4px;
}

input#nav_person_search {
    font-size: 16px;
    width: 280px;
    height: 34px;
}

#nav_search_container button {
  background-color: #594cea;
  box-shadow: 0 5px 0 darkblue;
  color: white;
  position: relative;
  text-decoration: none;
}

#nav_search_container button:hover,
#nav_search_container button:focus {
  background-color: #3f36ac;
  cursor: pointer;
}

#nav_search_container button:active {
  box-shadow: none;
  top: 5px;
}

#nav_search_container button {
    margin-bottom: 5px;
    font-size: 16px;
    padding-block-start : 5.1px;
    padding-block-end : 1.9px;
}

.print-icon {
    margin-left: 6px;
}

@media only screen and (max-width: 600px){
    body {
        color: darkslategrey;
    }

    #nav_search_container input {
        font-size: 16px;
        width: 50%;
    }
}

@media print {
    nav {
        background: initial;
        background-image: none;
    }

    ul#auth_header {
        display: none;
    }
}
