/* Glass Reef stylesheet. One file, hand-written, no build step.
   Everything is namespaced gr- so I can paste a chunk of this into a
   club newsletter template without the two sets of rules arguing. */

:root {
	--gr-sand: #f4eddc;
	--gr-text: #26332f;
	--gr-lagoon: #0f6f6c;
	--gr-lagoon-lit: #14807b;
	--gr-lagoon-dark: #0b514f;
	--gr-lagoon-mid: #12605d;
	--gr-headline-deep: #1d4744;
	--gr-murk: #6a7a72;
	--gr-murk-soft: #7d8b83;
	--gr-quote-text: #3c4f4a;
	--gr-opener-text: #2d3f3a;
	--gr-shallow: #e9f4f2;
	--gr-shallow-edge: #a8d8d2;
	--gr-thead-fill: #dcefec;
	--gr-bright: #63c4bb;
	--gr-bright-soft: #7fcfc7;
	--gr-cream: #fbf7ec;
	--gr-driftwood: #d3c7a8;
	--gr-driftwood-rule: #ded3b7;
	--gr-driftwood-line: #cfc3a5;
	--gr-driftwood-dot: #c2b596;
	--gr-code-fill: #e6dec8;
	--gr-input-line: #b6a988;
	--gr-serif: Georgia, "Times New Roman", Times, serif;
}

html {
	background: var(--gr-sand);
}

body {
	font-family: var(--gr-serif);
	background: var(--gr-sand);
	color: var(--gr-text);
	margin: 0;
	padding: 0;
	font-size: 17px;
	line-height: 1.62;
}

.gr-page {
	width: 90%;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 0 48px 0;
}

/* the bit at the top with the coral drawing */

.gr-banner {
	border-bottom: 3px double var(--gr-lagoon);
	padding: 34px 0 14px 0;
	margin-bottom: 0;
}

.gr-banner h1 {
	font-size: 34px;
	font-weight: normal;
	letter-spacing: 0.5px;
	margin: 0 0 4px 0;
	color: var(--gr-lagoon);
}

.gr-banner h1 a {
	color: var(--gr-lagoon);
	text-decoration: none;
}

.gr-banner p.gr-subline {
	margin: 0;
	font-style: italic;
	font-size: 15px;
	color: var(--gr-murk);
}

.gr-glyph {
	float: left;
	margin: 2px 14px 0 0;
}

.gr-banner:after,
.gr-byline:after,
.gr-critter:after,
.gr-page:after {
	content: "";
	display: block;
	clear: both;
}

/* getting around */

.gr-ways {
	border-bottom: 1px solid var(--gr-driftwood-line);
	padding: 9px 0 11px 0;
	margin-bottom: 30px;
	font-size: 15px;
}

.gr-ways a {
	color: var(--gr-lagoon-lit);
	text-decoration: none;
	margin-right: 18px;
	border-bottom: 1px solid var(--gr-shallow-edge);
	padding-bottom: 1px;
}

.gr-ways a:hover {
	color: var(--gr-lagoon-dark);
	border-bottom-color: var(--gr-lagoon-dark);
}

.gr-ways a.gr-onnow {
	color: var(--gr-text);
	border-bottom-color: var(--gr-text);
}

/* words */

h2 {
	font-size: 25px;
	font-weight: normal;
	color: var(--gr-lagoon);
	margin: 34px 0 8px 0;
	line-height: 1.28;
}

h2 a {
	color: var(--gr-lagoon);
	text-decoration: none;
}

h2 a:hover {
	text-decoration: underline;
}

h3 {
	font-size: 19px;
	font-weight: bold;
	color: var(--gr-headline-deep);
	margin: 28px 0 6px 0;
}

p {
	margin: 0 0 15px 0;
}

a {
	color: var(--gr-lagoon-lit);
}

ul, ol {
	margin: 0 0 16px 0;
	padding-left: 24px;
}

li {
	margin-bottom: 6px;
}

blockquote {
	margin: 20px 0;
	padding: 2px 0 2px 18px;
	border-left: 4px solid var(--gr-bright);
	color: var(--gr-quote-text);
	font-style: italic;
}

code {
	font-family: var(--gr-serif);
	background: var(--gr-code-fill);
	padding: 1px 5px;
	border: 1px solid var(--gr-driftwood);
}

hr {
	border: 0;
	border-top: 1px solid var(--gr-driftwood-line);
	margin: 34px 0;
}

.gr-byline {
	font-size: 13.5px;
	color: var(--gr-murk-soft);
	margin: 0 0 14px 0;
	font-style: italic;
}

.gr-opener {
	font-size: 18.5px;
	color: var(--gr-opener-text);
}

/* the list of posts on the front page */

.gr-post {
	padding-bottom: 8px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--gr-driftwood-rule);
}

.gr-post p.gr-readon a {
	text-decoration: none;
	border-bottom: 1px solid var(--gr-bright-soft);
}

/* the two kinds of box I use */

.gr-boxout {
	background: var(--gr-shallow);
	border: 1px solid var(--gr-shallow-edge);
	padding: 14px 18px 2px 18px;
	margin: 26px 0;
}

.gr-boxout h3 {
	margin-top: 4px;
	color: var(--gr-lagoon);
}

.gr-figs {
	background: var(--gr-cream);
	border: 1px solid var(--gr-driftwood);
	padding: 12px 18px 2px 18px;
	margin: 24px 0;
	font-size: 16px;
}

/* tables of test numbers, mostly */

table {
	border-collapse: collapse;
	width: 100%;
	margin: 20px 0 24px 0;
	font-size: 16px;
}

caption {
	text-align: left;
	font-style: italic;
	color: var(--gr-murk-soft);
	font-size: 14px;
	padding-bottom: 6px;
}

th {
	text-align: left;
	background: var(--gr-thead-fill);
	color: var(--gr-lagoon-mid);
	border: 1px solid var(--gr-shallow-edge);
	padding: 6px 9px;
	font-weight: bold;
}

td {
	border: 1px solid var(--gr-driftwood-rule);
	padding: 6px 9px;
	vertical-align: top;
}

/* one block per animal on the livestock page */

.gr-critter {
	border-bottom: 1px dotted var(--gr-driftwood-dot);
	padding-bottom: 14px;
	margin-bottom: 24px;
}

.gr-critter .gr-sketch {
	float: left;
	width: 96px;
	margin: 6px 16px 8px 0;
}

.gr-critter h3 {
	margin-top: 6px;
}

.gr-critter .gr-sciname {
	font-style: italic;
	color: var(--gr-murk);
	font-size: 15px;
}

/* the note form on the about page */

form.gr-sendbox {
	background: var(--gr-cream);
	border: 1px solid var(--gr-driftwood);
	padding: 18px 20px 6px 20px;
	margin: 22px 0;
}

form.gr-sendbox label {
	display: block;
	font-size: 15px;
	color: var(--gr-headline-deep);
	margin-bottom: 4px;
}

form.gr-sendbox input[type="text"],
form.gr-sendbox input[type="email"],
form.gr-sendbox textarea,
form.gr-sendbox select {
	font-family: var(--gr-serif);
	font-size: 16px;
	width: 96%;
	padding: 6px 7px;
	border: 1px solid var(--gr-input-line);
	background: #ffffff;
	color: var(--gr-text);
	margin-bottom: 16px;
}

form.gr-sendbox textarea {
	height: 130px;
}

form.gr-sendbox button {
	font-family: var(--gr-serif);
	font-size: 16px;
	background: var(--gr-lagoon);
	color: var(--gr-sand);
	border: 1px solid var(--gr-lagoon-dark);
	padding: 8px 20px;
	margin-bottom: 14px;
	cursor: pointer;
}

form.gr-sendbox button:hover {
	background: var(--gr-lagoon-dark);
}

form.gr-sendbox p.gr-undernote {
	font-size: 14px;
	color: var(--gr-murk-soft);
	margin-top: -8px;
}

/* bottom of every page */

.gr-tailpiece {
	border-top: 3px double var(--gr-lagoon);
	margin-top: 44px;
	padding-top: 14px;
	font-size: 14px;
	color: var(--gr-murk);
}

.gr-tailpiece a {
	color: var(--gr-lagoon-lit);
}

.gr-tailpiece p {
	margin-bottom: 8px;
}