/* $Id: style.css,v 1.110 2024/09/23 16:56:29 bscott Exp bscott $ */

/* ---------------------------------------------------------------------- */
/* headers */

H1, H2, H3, H4, H5 {
	font-family: sans-serif;
	}
H1 {
	text-align: center;
	}
H2 {
	border-top-style   : solid;
	border-bottom-style: solid;
    	border-top-width   : 1px;
    	border-bottom-width: 1px;
	}
H4 {
	font-style: italic;
	text-decoration: underline;
	}

/* ---------------------------------------------------------------------- */
/* definition terms and similar lists */

DT {
	font-weight: bold;
	font-style: italic;
	}

/* I have some lists follow a structure similar to a DL, but don't want the
   formatting or semantics implied by DL/DT/DD.  For those, I just use DIVs
   with this class. */
.dd {
	margin-left: 4em;
	}

/* ---------------------------------------------------------------------- */
/* increase spacing in lists for touchscreens, so fat fingers can select
   links easier*/

@media (pointer:coarse) {
	LI {
		margin-top   : .5em;
		margin-bottom: .5em;
		}
	}

/* ---------------------------------------------------------------------- */
/* images */

IMG {
	max-width: 95%; /* fit screen width (with fudge factor) */
	max-height: 50vh; /* don't eat the whole screen */
	object-fit: contain; /* resize preserving aspect */
	margin-left: 2%; /* separate image content from link border */
	margin-right: 2%;
	}


/* image links: border that apes the standard (un)visited color scheme */
A:link IMG {
	border: 2px blue solid;
	}
A:visited IMG {
	border: 2px purple solid;
	}
A IMG {
	padding: 2%; /* separate image content from the link border */
	}

/* ---------------------------------------------------------------------- */
/* tables: simple single-line border, around and within */

TABLE, TH, TD {
	border-style: solid;
	border-width: 1px;
	border-collapse: collapse;
	}
TH, TD {
	padding: 5px;
	}

/* ---------------------------------------------------------------------- */
/* computer text */

PRE {
	color: black;
	background-color: lightgray;
	border: 1px gray solid;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
	padding-right: 5px;
	overflow-x: scroll; /* show scrollbar if wider than page */
	}

/* class named "tt" since they took away the <tt> tag */
.tt {
	/* Reportedly declaring the name twice works around browser bugs.
	   Stupid Browser Tricks. */
	font-family: monospace, monospace;
	}

/* only apply to paragraphs, so inline-block doesn't pick up table borders */
p .tt {
	/* wrap whole span to next line, before breaking on whitespace */
	display: inline-block;
	/* limit the span to the width of window, so it doesn't overflow */
	max-width: 100%;
	/* if width would exceed 100%, resort to breaks, preserving spaces */
	overflow-wrap: break-word;
	white-space: break-spaces;
	}

/* ---------------------------------------------------------------------- */