/* www.insectlist.com: the stylesheet every page shares. Generated by Hexapoda. */

html, body { background: #000000; }
body { margin: 0; color: #FFFFFF; font-family: Arial, sans-serif; font-size: 12px; }
main { padding: 16px 16px 48px; }
a:link, a:visited { color: inherit; text-decoration: none; }
img { border: 0; }
h1, h2, h3, p, ul, table { margin: 0; }
h1, h2, h3 { font-weight: normal; }
ul { list-style: none; padding: 0; }

/* A taxon, in the legacy palette the app shares (D4). */
.order { color: #4080B0; }
.family { color: #80B040; }
.genus { color: #FFA500; font-style: italic; }
.species { color: #FF69B4; font-style: italic; }
.other { color: #FFFFFF; }
.italic { font-style: italic; }
.common { color: #999999; }
.label { color: #808080; }
a.inat:link, a.inat:visited { color: #555555; }

/* index.html */
.home main { padding-left: min(125px, 8vw); max-width: 600px; }
.home h1 { font-size: 28px; margin: 10px 0 5px; }
.home h1.posts { margin-top: 40px; }
.home h2 { font-size: 16px; margin: 20px 0 0; }
.home li { margin: 10px 0; color: #777777; }
.home .fineprint { color: #777777; margin-top: 15px; line-height: 1.3; }
.home .fineprint.first { margin-top: 40px; }
.home .copyright { color: #4080B0; font-size: 11px; margin-top: 20px; }

/* 404.html, on the home page's pattern. */
.notfound p { margin: 15px 0 10px; line-height: 1.3; }

/* A post's cover. */
.post h1 { font-size: 24px; line-height: 1.25; margin: 16px 0; }
.thumbnails { display: flex; flex-wrap: wrap; gap: 4px; }
.thumbnails img { display: block; width: 120px; height: 120px; }
.postlinks { margin-top: 48px; color: #999999; line-height: 1.6; }
.postlinks p { margin-bottom: 14px; }

/* A photograph's page, and a family's. */
.photo { font-size: 14px; }
.photo h1 { font-size: 28px; color: #80B040; margin-bottom: 8px; }
.frame { position: relative; display: inline-block; max-width: 100%; margin-top: 8px; vertical-align: top; }
.frame img { display: block; max-width: 100%; height: auto; }
.half { position: absolute; top: 0; bottom: 0; width: 50%; display: flex; align-items: center; }
.half.previous { left: 0; justify-content: flex-start; cursor: w-resize; }
.half.next { right: 0; justify-content: flex-end; cursor: e-resize; }
.half span { margin: 0 12px; font-size: 32px; color: #FFFFFF; opacity: 0.3; text-shadow: 0 0 6px #000000; transition: opacity 0.15s; }
.half:hover span, .half:focus span { opacity: 0.9; }
.ladder { border-collapse: collapse; margin-top: 6px; }
.ladder th { text-align: right; font-weight: normal; color: #808080; padding: 2px 6px 2px 2px; white-space: nowrap; vertical-align: top; }
.ladder td { padding: 2px; }
.ladder tbody.candidate > tr:first-child > * { padding-top: 16px; }
.ladder tr.leadin td { color: #BBBBBB; font-style: italic; padding-bottom: 6px; }
.caption { margin-top: 14px; color: #BBBBBB; font-size: 12px; }
.caption p { margin-bottom: 4px; }
.where { margin-top: 14px; color: #555555; line-height: 1.4; }
.pagelinks { margin-top: 14px; }
.pagelinks a { margin-right: 8px; }

/* checklist.html */
.checklist h1 { font-size: 24px; margin-bottom: 4px; }
.checklist h1.families { margin-top: 42px; }
.checklist .count { color: #777777; font-size: 9px; margin-left: 8px; }
.checklist h2 { font-size: 12px; margin-top: 14px; }
.checklist li { line-height: 1.3; }
.mark { margin-right: 8px; }
.mark.yes { color: #FFFFFF; }
.mark.no { color: #444444; }
.note { color: #777777; font-size: 11px; margin-top: 32px; line-height: 1.6; }

/* The log. */
.log { font-size: 16px; }
.log main { padding-bottom: 80vh; }
.log h1 { font-size: 16px; margin-bottom: 16px; }
.log .count { color: #777777; }
.log .year { color: #999999; }
.log .years li { margin: 4px 0; }
.log td { vertical-align: top; padding: 2px 10px 2px 0; }
.log td img { display: block; width: 120px; height: 120px; }
.log .number { color: #AAAAAA; font-size: 12px; }
.log .added { color: #666666; font-size: 10px; }

/* The contents: by date, by location, by insect, and each order's index. */
.contents { font-size: 16px; }
.contents h1 { font-size: 24px; margin: 8px 0 12px; }
.contents a:link, .contents a:visited { color: #999999; }
.bydate td { font-size: 12px; padding: 5px 10px 0 0; }
.bydate td.right { text-align: right; }
.bylocation h2 { font-size: 18px; font-weight: bold; margin-top: 18px; }
.bylocation h3 { font-size: 12px; color: #BBBBBB; margin-top: 14px; }
.bylocation p { font-size: 12px; color: #777777; margin-top: 4px; }
.byinsect li { margin: 12px 0; }
.index p { margin: 6px 0; }
.index .label { font-size: 9px; }
.index p.post { font-size: 12px; color: #555555; }
.index p.post a:link, .index p.post a:visited { color: #FFFFFF; }
.index .d1 { margin-left: min(100px, 7vw); }
.index .d2 { margin-left: min(200px, 14vw); }
.index .d3 { margin-left: min(300px, 21vw); }
.index .d4 { margin-left: min(400px, 28vw); }
.index .d5 { margin-left: min(500px, 35vw); }
.index .d6 { margin-left: min(600px, 42vw); }