report.css

/** General Text Styling ******************************************************/

html {
  font-family: sans-serif;
  line-height: 1.5;
  max-width: 50em;
  margin: 0.5em auto;
  padding: 0 0.5em;
}
body {
  margin: 0; padding: 0;
}

h1, h2, h3, h4 {
  color: navy;
  line-height: 1;
  margin: 3rem 0 1rem 0;
}

@media (min-width: 40em) {
  h1, h2, h3, h4 {
    margin-inline: -1.5rem;
  }
  body {
    padding: 0 2rem;
  }
}

aside {
  font-style: italic;
}
p.annotation {
  text-align: right;
  text-align: end;
  font-style: italic;
}
time {
  font-style: italic;
}

dt {
  font-weight: bold;
}
dd {
  margin-bottom: 1em;
}

ul {
  list-style-type: circle;
}
code {
  font: inherit;
  font-style: italic;
}

:link {
  color: blue;
}
:visited {
  color: navy;
}


/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.data  tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup {
		border-left: 2px solid;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.data th[scope=rowgroup] {
		font-weight: bold;
		background: #EEE;
		text-align: start;
	}

	table.data  tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data {
		text-align: center;
	}

	table.data  thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child {
		border-left: 0;
		border-right: 1px solid silver;
	}
*/