/* Blackgrove Township official website. Plain municipal template, light background. */
body { margin: 0; background: #e8ebe6; font-family: Verdana, Tahoma, "DejaVu Sans", Arial, sans-serif; font-size: 13px; color: #222; line-height: 1.5; }
#wrap { max-width: 980px; margin: 0 auto; background: #fff; border-left: 1px solid #b8c0b4; border-right: 1px solid #b8c0b4; }
a { color: #1a4a8a; } a:visited { color: #5a3a7a; }
#topbar { background: #dfe6ee; color: #34495e; font-size: 11px; padding: 3px 12px; border-bottom: 1px solid #b8c4d0; }
#banner { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: linear-gradient(#f7f8f3, #e9eee4); border-bottom: 3px solid #5d7a5a; }
.seal { width: 80px; height: 80px; flex: none; }
.tname { font-family: Georgia, "Times New Roman", serif; font-size: 30px; color: #2e3e50; letter-spacing: .02em; }
.tsub { font-size: 12px; color: #4a5a50; }
#crumbs { font-size: 11px; padding: 4px 14px; background: #f3f4ef; border-bottom: 1px solid #d5d9cf; color: #555; }
#cols { display: flex; align-items: flex-start; }
#side { width: 200px; flex: none; background: #f2f4ee; border-right: 1px solid #d5d9cf; min-height: 400px; padding-bottom: 12px; }
.navhead { background: #d9e2d4; font-weight: bold; font-size: 11px; text-transform: uppercase; padding: 5px 10px; color: #33452f; }
#side ul { list-style: none; margin: 0; padding: 0; }
#side li a { display: block; padding: 5px 10px; border-bottom: 1px solid #e0e4da; text-decoration: none; font-size: 12px; }
#side li a:hover { background: #e6ecdf; text-decoration: underline; }
#side li.on a { background: #fff; font-weight: bold; color: #222; border-left: 4px solid #5d7a5a; padding-left: 6px; }
.sidebox { margin: 12px 8px 0; padding: 8px; border: 1px solid #cfd6c8; background: #fbfcf8; font-size: 11px; }
#content { flex: 1; padding: 12px 20px 20px; min-width: 0; }
#content h1 { font-family: Georgia, "Times New Roman", serif; font-weight: normal; font-size: 23px; color: #2e3e50; border-bottom: 1px solid #c9d0c4; padding-bottom: 4px; margin: 4px 0 10px; }
#content h2 { font-size: 15px; color: #33452f; margin: 18px 0 6px; }
#content h3 { font-size: 13px; margin: 12px 0 4px; }
table.list, table.grid, table.meta { border-collapse: collapse; width: 100%; margin: 6px 0 12px; }
table.list th, table.grid th { background: #e6ebe1; text-align: left; font-size: 12px; }
table.list td, table.list th, table.grid td, table.grid th { border: 1px solid #ccd3c6; padding: 4px 6px; vertical-align: top; }
table.list tr:nth-child(even) td { background: #fafbf7; }
tr.mrow td { background: #f0f2ec !important; font-weight: bold; font-size: 11px; text-transform: uppercase; }
table.meta { width: auto; font-size: 12px; } table.meta th { text-align: left; padding: 1px 12px 1px 0; color: #555; font-weight: normal; }
.nw { white-space: nowrap; }
.notice-box { border: 1px solid #c9b77a; background: #fdf9e9; padding: 8px 10px; margin: 0 0 12px; }
.doc { background: #fff; border: 1px solid #bfc5bb; box-shadow: 2px 2px 0 #e1e4dd; padding: 22px 28px; margin: 6px 0 12px; font-family: "Times New Roman", Times, Georgia, serif; font-size: 15px; max-width: 700px; }
.dochead { text-align: center; font-size: 13px; letter-spacing: .08em; border-bottom: 1px solid #333; padding-bottom: 6px; margin-bottom: 10px; }
.doctitle { text-align: center; font-size: 18px !important; color: #222 !important; margin: 10px 0 12px !important; }
.doctitle .sub { font-weight: normal; font-size: 14px; }
.doc h3 { font-size: 15px !important; }
.doc table.grid { font-family: Verdana, Tahoma, sans-serif; font-size: 11.5px; }
.doc .sig { margin-top: 18px; font-style: italic; }
.stamp { display: inline-block; border: 2px solid #5d7a5a; color: #3c5a39; padding: 2px 8px; font-family: Verdana, sans-serif; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.motion { margin-left: 18px; font-style: italic; }
.saying { text-align: center; font-style: italic; margin-top: 14px; }
.back { font-size: 12px; }
ul.months li { margin: 2px 0; }
.formbox { border: 1px solid #ccd3c6; background: #f7f9f4; padding: 10px 12px; max-width: 520px; }
.formbox label { display: block; margin: 6px 0 2px; font-weight: bold; font-size: 12px; }
.formbox input[type=text], .formbox select, .formbox textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 3px; border: 1px solid #aab3a3; background: #fff; }
.formbox input[type=submit] { margin-top: 8px; font: inherit; padding: 3px 12px; }
.small { font-size: 11px; color: #555; }
#foot { border-top: 3px solid #5d7a5a; background: #f2f4ee; font-size: 11px; color: #444; padding: 8px 14px; text-align: center; }
#foot p { margin: 2px 0; }
#foot .fiction { color: #7a7f75; font-size: 10px; margin-top: 6px; }
@media (max-width: 700px) { #cols { display: block; } #side { width: auto; min-height: 0; border-right: 0; } .doc { padding: 14px; } }
/* Seal (banner) and Marshal badge: canon in-world artwork, see tools/make_images.py */
picture.seal { display: block; }
img.seal { display: block; width: 80px; height: 80px; }
figure.badge { float: right; margin: 0 0 10px 18px; padding: 8px; background: #fbfcf8; border: 1px solid #cfd6c8; }
figure.badge img { display: block; width: 120px; height: 120px; }
@media (max-width: 700px) { figure.badge { margin-left: 10px; padding: 5px; } figure.badge img { width: 88px; height: 88px; } }