/* The editor needs a modern browser anyway (it signs in over HTTPS), so plain CSS here,
   in the site's colors. */
body { margin: 0; background: #E8EFCF; color: #222; font: 14px/1.5 Geneva, Helvetica, Arial, sans-serif; }
a { color: #00607F; }
#header { background: url(/images/toptile.gif); }
#header img { display: block; }
#topbar { padding: 6px 16px; background: #5fba22; color: #fff; font-size: 13px; }
#topbar a, #topbar .linkbutton { color: #fff; }
#topbar .who img { vertical-align: middle; border-radius: 50%; }
#content { max-width: 820px; margin: 0 auto; padding: 8px 16px 40px; }
h1 { font-size: 22px; color: #2f6229; }
h2 { font-size: 17px; margin-top: 1.6em; color: #2f6229; border-bottom: 1px solid #5fba22; }
code { background: #DDE3C5; padding: 1px 4px; }
form.inline { display: inline; }
.hidden-default { position: absolute; left: -9999px; }

.editform label { display: block; margin: 1em 0 .3em; font-weight: bold; }
.editform label.inline { display: inline; margin: 0; font-weight: normal; }
.editform input[type="text"], .editform textarea, .editform select {
  box-sizing: border-box; width: 100%; padding: 6px 8px;
  font: inherit; color: #111; border: 1px solid #999; border-radius: 3px; background: #fff;
}
.editform select { width: auto; max-width: 100%; }
.editform input.order { width: 4em; }
.editform textarea { font-family: Monaco, Menlo, "Courier New", monospace; font-size: 13px; resize: vertical; }
.editform fieldset.images { margin: 1em 0; padding: 8px 12px; border: 1px solid #b9c99a; background: #DDE3C5; }
.shots { width: 100%; border-collapse: collapse; }
.shots th { text-align: left; font-size: 12px; }
.shots td { padding: 3px 4px; vertical-align: middle; }
.shots img { display: block; border: 1px solid #999; }
.shots tr.removed img { opacity: .35; }
.editform .actions { margin-top: 1.2em; }
.projects { width: 100%; border-collapse: collapse; }
.projects td { padding: 6px 4px; border-bottom: 1px solid #cfd8b0; }

button, .button {
  display: inline-block; padding: 6px 14px; font: inherit; font-weight: bold; color: #2f6229;
  background: #f4f8e8; border: 1px solid #5fba22; border-radius: 3px; cursor: pointer; text-decoration: none;
}
button.primary, .button { color: #fff; background: #3f8a1a; border-color: #2f6229; }
.button.secondary { color: #2f6229; background: #f4f8e8; }
.button.small { padding: 3px 9px; font-size: 13px; }
button:hover, .button:hover { filter: brightness(1.08); }
button:focus-visible, .button:focus-visible { outline: 2px solid #1a5fd0; outline-offset: 2px; }
.linkbutton { padding: 0; font-weight: normal; color: #00607F; background: none; border: 0; text-decoration: underline; }

.note { color: #555; font-size: 90%; }
.notice { padding: 8px 12px; background: #f4f8e8; border: 1px solid #5fba22; }
.errors { padding: 4px 12px; color: #7a1010; background: #fdecec; border: 1px solid #e3a3a3; }
.errors p { margin: .5em 0; }
.preview { margin-bottom: 1.5em; padding: 10px 16px; background: #fff; border: 2px dashed #5fba22; }
.preview-label { margin: 0 0 .5em; font-size: 90%; font-weight: bold; color: #2f6229; }
.preview img { max-width: 100%; }

@media (max-width: 600px) {
  #header img { width: 100%; height: auto; }
  .projects td { display: block; border: 0; }
}