/* Quizball Question Manager — proudly Web 1.0 */

body {
  background: #c0c0c0;
  font-family: "Times New Roman", Times, serif;
  font-size: 15px;
  color: #000000;
  margin: 0;
  padding: 14px;
}

.page {
  background: #ffffff;
  border: 2px outset #ffffff;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
}

h1 { font-size: 22px; margin: 0; letter-spacing: 1px; }
h2 { font-size: 18px; margin: 14px 0 8px; }
h3 { font-size: 16px; margin: 12px 0 6px; }
small, .footer { color: #444444; }

.masthead { background: #000080; }
.masthead h1, .masthead small { color: #ffffff; }
.masthead td { padding: 8px 12px; }
.masthead .sync-state { color: #ffffff; font-size: 13px; }
.masthead .unsynced { color: #ff9999; }
.masthead-link { color: #99ccff !important; font-size: 13px; text-decoration: none; }
.masthead-link:visited { color: #99ccff !important; }
form.inline { display: inline; }

.nav { font-weight: bold; margin: 10px 0; }

a { color: #0000ee; }
a:visited { color: #551a8b; }
a:active { color: #ff0000; }

hr { border: 0; border-top: 1px solid #808080; }

.flash {
  background: #ccffcc;
  border: 1px solid #008000;
  padding: 5px 10px;
  margin: 6px 0;
  font-weight: bold;
}
.tip {
  background: #ffffcc;
  border: 1px solid #999900;
  padding: 5px 10px;
  margin: 6px 0;
}
.problem {
  background: #ffcccc;
  border: 2px solid #cc0000;
  padding: 6px 10px;
  margin: 6px 0;
}

fieldset { border: 1px solid #808080; margin: 10px 0; padding: 8px 10px; }
legend { padding: 0 6px; }

input[type="text"], textarea, select {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  border: 2px inset #dddddd;
  background: #ffffff;
  padding: 2px 4px;
}
input[type="submit"] {
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
}

table.grid { border-collapse: collapse; margin: 8px 0; }
table.grid th {
  background: #000080;
  color: #ffffff;
  border: 1px solid #000000;
  padding: 4px 8px;
  font-size: 13px;
  text-align: left;
}
table.grid td {
  border: 1px solid #808080;
  padding: 4px 8px;
  vertical-align: middle;
}
table.grid tr:nth-child(even) td { background: #f0f0f0; }

/* Question list column sizing: question + category get the room, the answer
   column shows only the correct answer so it can stay narrow. */
table.grid th.w-pos { width: 72px; }
table.grid th.w-cat { width: 16%; }
table.grid th.w-q   { width: 44%; }
table.grid th.w-ans { width: 18%; }

/* Hover-to-insert: invisible until the row is hovered, then a tiny button
   appears above the position number = "insert a new question here". */
.pos-cell { position: relative; }
.q-insert {
  display: block;
  visibility: hidden;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  background: #ccffcc;
  border: 1px solid #008000;
  color: #006600 !important;
  padding: 0 3px;
  margin-bottom: 2px;
  white-space: nowrap;
}
.pos-cell:hover .q-insert { visibility: visible; }
.q-insert:hover { background: #99ff99; }

.masthead .traffic { color: #ccccff; font-size: 11px; }

td.diff-1 { background: #ccffcc !important; }
td.diff-2 { background: #cce6ff !important; }
td.diff-3 { background: #ffffcc !important; }
td.diff-4 { background: #ffd6d6 !important; }

table.form { border-collapse: collapse; margin: 8px 0; }
table.form th {
  text-align: right;
  vertical-align: top;
  padding: 6px 10px;
  background: #e8e8e8;
  border: 1px solid #808080;
  font-size: 13px;
  white-space: nowrap;
}
table.form td { padding: 6px 10px; border: 1px solid #808080; }
table.form form { display: inline; }

img { border: 1px solid #808080; }
code { font-family: "Courier New", Courier, monospace; font-size: 12px; }
.footer { font-size: 12px; text-align: center; }