/*
 * stylesheet for archive approval html pages.
 *
 * $Id: style.css,v 1.46 2021/10/22 22:33:23 gerald Exp $
 *
 */

		/* align h1 text with baseline of 'W3C' in W3C logo */
.title		{ vertical-align: 7px }

label		{ padding: 4px; margin: -1px }
label.auth	{ background-color: #80e480 }
label.deny	{ background-color: #f06061 }
label.dunno	{ background-color: #c2c2c2 }

table#maillist td {
  border-left: 1px solid #bbb;
  border-right: 1px solid #bbb;
  border-collapse: collapse;
}

tbody tr:nth-child(even) { background-color: #eeeeee; }
tbody tr:nth-child(odd)  { background-color: #e7e7e7; }

tbody tr.authed { background-color: #dfd; }
tbody tr.denied { background-color: #fdd; }
tbody tr.punted { background-color: #ffd; }

td { text-align: center; }

img { border: 0; }

.container-fluid { padding-left: 5px; padding-right: 5px; }

.btn { font-size: 1em; }

/* undo bootstrap's vertical-align: top */
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
  vertical-align: middle;
}

.helptext { padding: 1em; }

#keytable { columns: 2; margin: 1em; padding: 0; column-gap: 0; }
#keytable ul { list-style-type: none; padding: 0; margin: 0.5em; }
#keytable ul li { text-align: left; }
#keytable h3 { margin-top: 0; }

/*
 * custom radio buttons adapted from
 * https://markheath.net/post/customize-radio-button-css
 */

.options {
  margin: 0.25em;
}

.options input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.options label {
    display: inline-block;
    padding: 3px 5px;
    margin-left: 1px;
    border: 1px solid #444;
    border-radius: 4px;
    font-weight: normal;
}

.options label:hover {
  background-color: #d7d7d7;
  outline: 1px solid #777;
}

a:focus, .btn:focus, .options input[type="radio"]:focus + label, th:focus {
  background-color: #f9dc4a;
  color: black;
  text-decoration: none;
  outline: 2px auto;
  outline-offset: 0px;
}

.options input[type="radio"]:checked.leave + label {
    background-color: #f7f7f7;
}

.options input[type="radio"]:checked.approve + label {
    background-color: #7f7;
}

.options input[type="radio"]:checked.reject + label {
    background-color: #f77;
}

.options input[type="radio"]:checked.drop + label {
    background-color: #ff7;
}

.hide-overflow {
    max-width: 20em;
    overflow: hidden;
    text-overflow: ellipsis;
}

h2 { font-size: 1.25em; margin-bottom: 0.5em; }
html { font-size: 1rem; }
body { font-size: 1rem; }
table { background: transparent; }
td.td-action { white-space: nowrap; }
td.td-subject { text-align: left; overflow-wrap: anywhere; }
td.td-sender { text-align: left; overflow-wrap: anywhere; min-width: 10em; }
td.td-list { min-width: 5em; }
.oversize { background: #fdd; }


#legend {
  margin: auto;
  column-width: 18em;
  font-size: smaller;
  max-width: 52em;
}

.legend-block {
  max-width: 22em;
  border: thin dotted black;
  margin: auto;
  padding: 0.25em;
  margin-bottom: 0.5em;
  border-radius: 3px;
}

#legend ul {
  list-style: none;
  display: table;
  padding-left: 1em;
}

#legend li {
  display: table-row;
}

#legend em {
  display: table-cell;
  vertical-align: middle;
  font-style: normal;
  text-align: right;
}

#legend p.heading {
  text-align: center;
  font-weight: bold;
}

.list-inline {
    margin-top: 0.75em;
    margin-bottom: 1em;
}

/* improve display on smaller screens (mobiles, tablets) */
@media only screen and (max-width: 64em) {
  body { margin: 0.25em; }
  .title { display: block; } /* bump title down below the icons in the h1 */
  table, thead, tbody, th, td, tr { display: block; }
  tr:nth-of-type(even) { border-color: #ddd; }
  tr:nth-of-type(odd) { border-color: #999; }
  tr { margin-bottom: 1em; border: solid; border-width: 4px; border-radius: 4px; }
  tbody { background: transparent; }
  thead { position: absolute; left: -9999px; top: -9999px; }
  td:before { width: 4.5em; display: inline-block; padding: 6px; }
  td:nth-of-type(1):before { content: "Action:"; }
  td:nth-of-type(2):before { content: "Subject:"; }
  td:nth-of-type(3):before { content: "Sender:"; }
  td:nth-of-type(4):before { content: "Score:"; }
  td:nth-of-type(5):before { content: "List:"; }
  td:nth-of-type(6):before { content: "Age:"; }
  td:nth-of-type(7):before { content: "Size:"; }
  .options { display: inline; position: relative; left: -0.5em; }
  table#maillist td { border: none; }
  td { text-align: left; }
  #keytable { columns: 1; }
}