:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #555555;
  --rule: #dddddd;
  --link: #0b5bd3;
  --max: 980px;
}

.pdf-embed {
  width: 100%;
  display: block;
  border: 1px solid var(--rule);
  border-radius: 10px;
}

* {
  box-sizing: border-box;
}

input:focus,
textarea:focus,
button:focus {
  background-color: #fee;
}

.form-actions {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

#bodyBlock {
  width: 700px;
  margin: auto;
}

#output {
  margin: 1em 0;
  color: black;
  background-color: #fee;
  padding: 1em;
  border: 1px solid #ddd;
}

fieldset {
  padding-top: 1em;
}

.field {
  width: 120px;
  margin: 0 0.5em 0.5em 0;
  float: left;
  clear: left;
  text-align: right;
}

.value {
  margin: 0 0 0.5em 0;
}

#save {
  float: right;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

a:visited {
  color: #551a8b;
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 24px 18px;
}

.site-header {
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
}

.brand {
  margin: 0;
  font-size: 1.35rem;
}

.brand a {
  color: var(--text);
  text-decoration: none;
}

.tagline {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.nav {
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--rule);
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.nav a {
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
}

.nav a:hover,
.nav a:focus {
  background: #f3f3f3;
  text-decoration: none;
}

main {
  padding: 18px 0;
}

h1,
h2,
h3 {
  line-height: 1.25;
}

h1 {
  margin: 0 0 8px;
  font-size: 1.6rem;
}

h2 {
  margin: 20px 0 10px;
  font-size: 1.15rem;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

p {
  margin: 10px 0;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 12px 10px;
}

.card h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.card h3 {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.card p {
  margin: 0 0 10px;
  color: var(--muted);
}

.meta {
  color: var(--muted);
  font-size: 0.95rem;
}

.list {
  margin: 8px 0 0 18px;
}

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 18px;
  padding: 14px 0 4px;
  color: var(--muted);
  font-size: 0.95rem;
}

kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
  font-size: 0.95em;
  background: #f2f2f2;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 1px 6px;
}

#showHideBlock {
  padding: 1em 1em 0 1em;
  border: 1px solid black;
}

#showHideBlock p {
  margin: 0 0 1em 0;
}

#showHideLinks {
  margin-bottom: 1em;
}

#toggleText {
  display: block;
  float: right;
}

.lab06h1:hover {
  cursor: pointer;
}

.red {
  color: red;
  background-color: transparent;
}

.lab06name {
    font-variant: small-caps;
    color: red;
    font-size: 200%;
}

.ui-accordion .ui-widget-content a {
  color: var(--link);
}

.ui-accordion .ui-widget-content a:visited {
  color: #551a8b;
}

#labs-grid {
  margin-top: 1rem;
}

#labs-error {
  display: none;
  color: #c00;
}

/* Lab 09 PHP app */

body.lab09-app {
  font-family: Georgia, Arial, Helvetica, sans-serif;
  color: black;
  background-color: #333;
  margin: 0;
  padding: 0;
}

body.lab09-app #header {
  position: relative;
  width: 760px;
  margin: 0 auto;
  color: #eee;
  background-color: #333;
  padding: 0;
}

body.lab09-app h1 {
  position: relative;
  top: 20px;
  text-align: right;
  margin: 20px 30px 0 0;
  font-family: Palatino, Times New Roman, Times, serif;
  font-variant: small-caps;
  font-size: revert;
  line-height: normal;
  border: none;
}

body.lab09-app #menu {
  width: 700px;
  margin: 0.5em auto 0;
  padding: 0;
}

body.lab09-app #menu li {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0 0.5em 0 0;
  color: #333;
  background-color: #eee;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  vertical-align: bottom;
}

body.lab09-app #menu li.selected {
  color: #333;
  background-color: white;
  border-bottom: 1px solid white;
}

body.lab09-app #menu a {
  display: block;
  padding: 4px 20px;
  text-decoration: none;
  color: inherit;
}

body.lab09-app #bodyBlock {
  width: 700px;
  margin: 0 auto;
  padding: 10px 30px 30px 30px;
  color: black;
  background-color: white;
  border-bottom: 2px solid #888;
}

body.lab09-app .messages,
body.lab09-app #jsMessages {
  clear: both;
  background-color: #ffd;
  color: #333;
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #ccc;
}

body.lab09-app #jsMessages {
  display: none;
}

body.lab09-app fieldset {
  clear: both;
  margin: 0;
  padding-top: 1em;
  border: 1px solid #333;
}

body.lab09-app .field {
  width: 120px;
  margin: 0 0.5em 0.5em 0;
  float: left;
  clear: left;
  text-align: right;
}

body.lab09-app .value {
  margin: 0 0 0.5em 0;
}

body.lab09-app input {
  background-color: #eee;
  color: black;
}

body.lab09-app input:focus,
body.lab09-app textarea:focus {
  background-color: #eed;
  color: black;
}

body.lab09-app #save {
  float: right;
}

body.lab09-app h3 {
  margin: 1em 0 0 0;
  background-color: #555;
  color: #eee;
  padding: 2px 4px;
  font-size: revert;
  line-height: normal;
  border: none;
}

body.lab09-app h3 .csv-link {
  float: right;
  font-size: 0.8em;
  font-weight: normal;
  color: #adf;
}

body.lab09-app h4 {
  margin: 0;
  padding: 0;
}

body.lab09-app table {
  margin: 0;
}

body.lab09-app th {
  text-align: left;
  padding-right: 1em;
}

body.lab09-app td {
  padding-right: 1em;
}

body.lab09-app #actorTable,
body.lab09-app #movieTable,
body.lab09-app #relationsTable {
  width: 100%;
  border-spacing: 0;
  border: 1px solid #333;
}

body.lab09-app #actorTable th,
body.lab09-app #movieTable th,
body.lab09-app #relationsTable th {
  background-color: #ddc;
  padding: 2px 4px;
}

body.lab09-app #actorTable td,
body.lab09-app #movieTable td,
body.lab09-app #relationsTable td {
  padding: 2px 4px;
}

body.lab09-app #actorTable tr.odd td,
body.lab09-app #movieTable tr.odd td,
body.lab09-app #relationsTable tr.odd td {
  background-color: #eed;
  color: black;
}

body.lab09-app .deleteActor,
body.lab09-app .deleteMovie {
  cursor: pointer;
}

body.lab09-app .editActor,
body.lab09-app .editMovie {
  cursor: pointer;
  color: var(--link);
  text-decoration: underline;
}

body.lab09-app .cancel-edit {
  display: none;
  margin-left: 0.5em;
  color: #c00;
}

body.lab09-app .boxedContent {
  margin: 0;
  padding: 1em;
  border: 1px solid #333;
}