:root {
    /* uncomment and set this to control the indentation for wrapped
       lines in the Your Queries section of the sidebar */
    /*--long-query-indent: 0.5em;*/

    /* search this file for single-column-breakpoint to control the
       minimum screen size where the left/right column layout is
       changed to a top/bottom single column layout. */
}

/* reset */
*, *:before, *:after { box-sizing: border-box; }

/* main page styles */
body.body {
  font-family: sans-serif, Arial, Helvetica;
  background-color: white;
  color: #333;
  margin: 0;
}
a[href], a[href]:link {
  color:blue;
  text-decoration: none;
}
a[href]:hover {
  color: blue;
  text-decoration: underline;
  text-decoration-color: hsl(from blue h s calc(l - 20));
}

pre {
  white-space: pre-wrap;
}

body {
    padding: 0 0.5em;
}

header {
    border-bottom: 1px solid #444;
    display: flex;
    justify-content: space-between;
    margin-block-start: 1em;
    margin-block-end: 2px;
}

.header-left {
  display: flex;
}

div.body {
    /* contains nav and main elements. */
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
}

nav {
    flex-basis: auto;
    flex-shrink: 1;
    /* force wrapping of long search names. */
    max-width: 20%;
    /* Don't allow shrink below size of longest word
       (e.g. Administration). Otherwise the word extends outside of
       nav column. Maybe consider using: overflow-wrap: break-word;
       instead if word is long enough if takes up too much of the
       screed width? */
    min-width: min-content;
}

nav > p > a {
    /* indent wrapped lines in the Your Queries section
       to make scanning each query easier */
    display: inline-block;
    padding-inline-start: var(--long-query-indent, 0.5em);
    text-indent: calc(var(--long-query-indent, 0.5em) * -1);
}

main {
    flex-basis: 0%;
    flex-grow: 1;
    /* make content accessible on overflow. */
    overflow-x: auto;
}

/* single-column-breakpoint (600px) - when a two column layout is
   changed to a single left -> top, right -> bottom layout. */

@media (width < 600px) {
    main {
        flex-basis:100%;
        flex-grow: 0;
        flex-shrink:0;
    }
    nav {
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(auto-fit,minmax(10em,1fr));
        max-width: initial;
        width: 100%;
    }
    nav > * {
	/* I want:
               grid-template-columns: repeat(auto-fit,minmax(min-content,1fr));
           to work, but it's an invalid declaration, so we break words. */
	overflow-wrap: break-word;
    }
    nav > form > p {
        /* force nav children that are forms to stretch to the full
           grid cell height by expanding their internal p
           tags.  Otherwise short forms do not fill the same
           space as the other items in the grid. */
        height: 100%;
    }
}

/* don't display interactive controls when printing */
@media print {
    nav {
        display: none;
    }
    .index-controls {
        display: none;
    }
    #searchbox {
        display: none;
    }

    a[href*="action=export"] {
	/* hide CSV export on index pages */
	display: none;
    }
}

#searchbox {
  padding-top: 1.5em;
}

#searchbox input#search-text {
  width: 10em;
}

form {
  margin: 0;
}

textarea {
    font-family: monospace;
}

nav p.classblock {
  padding: 2px 5px 2px 5px;
  margin: 1px;
  border: 1px solid #444;
  background-color: #eee;
}

nav p.userblock {
  padding: 2px 5px 2px 5px;
  margin: 1px 1px 1px 1px;
  border: 1px solid #444;
  background-color: #eef;
}

.form-small {
  padding: 0;
  font-size: 75%;
}


td.content {
  padding: 1px 5px 1px 5px;
  vertical-align: top;
  width: 100%;
}

td.date, th.date { 
  white-space: nowrap;
}

p.ok-message {
  background-color: #22bb22;
  padding: 5px;
  color: white;
  font-weight: bold;
}
p.error-message {
  background-color: #bb2222;
  padding: 5px;
  color: white;
  font-weight: bold;
}
p.error-message a[href] {
  color: white;
  text-decoration: underline;
}


/* style for search forms */
ul.search-checkboxes {
    display: inline;
    padding: 0;
    list-style: none;
}
ul.search-checkboxes > li {
    display: inline;
    padding-right: .5em;
}


/* style for forms */
table.form {
  padding: 2px;
  border-spacing: 0;
  border-collapse: separate;
}

table.form th {
  color: #338;
  text-align: right;
  vertical-align: top;
  font-weight: normal;
  white-space: nowrap;
}

table.form th.header {
  font-weight: bold;
  background-color: #eef;
  text-align: left;
}

table.form th.required {
  font-weight: bold;
}

table.form td {
  color: #333;
  empty-cells: show;
  vertical-align: top;
}

table.form td.optional {
  font-weight: bold;
  font-style: italic;
}

table.form td.html {
  color: #777;
}

/* style for lists */
table.list {
  border-spacing: 0;
  border-collapse: separate;
  width: 100%;
}

table.list th {
  padding: 0 4px 0 4px;
  color: #404070;
  background-color: #eef;
  border: 1px solid white;
  vertical-align: top;
  empty-cells: show;
}
table.list th a[href]:hover { color: #404070 }
table.list th a[href]:link { color: #404070 }
table.list th a[href] { color: #404070 }
table.list th.group {
  background-color: #f4f4ff;
  text-align: center;
}

table.list td {
  padding: 0 4px 0 4px;
  border: 1px solid white;
  color: #404070;
  background-color: #efefef;
  vertical-align: top;
  empty-cells: show;
}

table.list tr.navigation th {
  width: 33%;
  border-style: hidden;
  text-align: center;
}
table.list tr.navigation td {
    border: none
}
table.list tr.navigation th:first-child {
  text-align: left;
}
table.list tr.navigation th:last-child {
  text-align: right;
}


/* style for message displays */
table.messages {
  border-spacing: 0;
  border-collapse: separate;
  width: 100%;
}

table.messages th.header{
  padding-top: 10px;
  border-bottom: 1px solid gray;
  font-weight: bold;
  background-color: white;
  color: #707040;
}

table.messages th {
  font-weight: bold;
  color: black;
  text-align: left;
  border-bottom: 1px solid #afafaf;
}

table.messages td {
  font-family: monospace;
  background-color: #efefef;
  border-bottom: 1px solid #afafaf;
  color: black;
  empty-cells: show;
  border-right: 1px solid #afafaf;
  vertical-align: top;
  padding: 2px 5px 2px 5px;
}

table.messages td:first-child {
  border-left: 1px solid #afafaf;
  border-right: 1px solid #afafaf;
}

/* style for file displays */
table.files {
  border-spacing: 0;
  border-collapse: separate;
  width: 100%;
}

table.files th.header{
  padding-top: 10px;
  border-bottom: 1px solid gray;
  font-weight: bold;
  background-color: white;
  color: #707040;
}

table.files th {
  border-bottom: 1px solid #afafaf;
  font-weight: bold;
  text-align: left;
}

table.files td {
  font-family: monospace;
  empty-cells: show;
}

/* style for history displays */
table.history {
  border-spacing: 0;
  border-collapse: separate;
  width: 100%;
}

table.history th.header{
  padding-top: 10px;
  border-bottom: 1px solid gray;
  font-weight: bold;
  background-color: white;
  color: #707040;
  font-size: 100%;
}

table.history th {
  border-bottom: 1px solid #afafaf;
  font-weight: bold;
  text-align: left;
  font-size: 90%;
}

table.history td {
  font-size: 90%;
  vertical-align: top;
  empty-cells: show;
}


/* style for class list */
table.classlist {
  border-spacing: 0;
  border-collapse: separate;
  width: 100%;
}

table.classlist th.header{
  padding-top: 10px;
  border-bottom: 1px solid gray;
  font-weight: bold;
  background-color: white;
  color: #707040;
}

table.classlist th {
  font-weight: bold;
  text-align: left;
}


/* style for class help display */
table.classhelp {      /* the table-layout: fixed;        */ 
  table-layout: fixed; /* compromises quality for speed   */
  overflow: hidden;
  font-size: .9em;
  padding-bottom: 3em;
}

table.classhelp th {
  font-weight: normal;
  text-align: left;
  color: #444;
  background-color: #efefef;
  border-bottom: 1px solid #afafaf;
  border-top: 1px solid #afafaf;
  text-transform: uppercase;
  vertical-align: middle;
  line-height:1.5em;
}

table.classhelp td {
  vertical-align: middle;
  padding-right: .2em;
  border-bottom: 1px solid #efefef;
  text-align: left;
  empty-cells: show;
  white-space: nowrap;
  vertical-align: middle;
}

table.classhelp tr:hover {
  background-color: #eee;
}

label.classhelp-label {
  cursor: pointer;
}

#classhelp-controls {
  position: fixed;
  display: block;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  padding: .5em;
  border-top: 2px solid #444;
  background-color: #eee;
}

#classhelp-controls input.apply {
  width: 7em;
  font-weight: bold;
  margin-right: 2em;
  margin-left: 2em;
}

#classhelp-controls input.preview {
   margin-right: 3em;
   margin-left: 1em;
}

/* style for "other" displays */
table.otherinfo {
  border-spacing: 0;
  border-collapse: separate;
  width: 100%;
}

table.otherinfo th.header{
  padding-top: 10px;
  border-bottom: 1px solid gray;
  font-weight: bold;
  background-color: white;
  color: #707040;
}

table.otherinfo th {
  border-bottom: 1px solid #afafaf;
  font-weight: bold;
  text-align: left;
}

input[type="text"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
input[type="password"]:focus,
textarea:focus, select:focus {
  background-color: #ffffc0;
}

.calendar_display {
  text-align: center;
}

.calendar_display td {
  padding: 1px 4px 1px 4px;
}

.calendar_display .today {
  background-color: #afafaf;
}

/* vim: sts=2 sw=2 et
*/
/* SHA: e9d690ef5be1f23d3eaf509d5074042c29d10d04 */