smtech / printable-forms

css/standards-map/sheet.css

body {
	font-family: sans-serif;
	font-size: 10pt;
	margin: 0;
	padding: 0;
}

#content {
	width: 100%;
	margin: 0;
}

@media screen {
	#content {
		margin: 1em;
	}

	/* sticky headers never scroll out of the window */
	thead {
		position: -webkit-sticky;
		position: -moz-sticky;
		position: -ms-sticky;
		position: -o-sticky;
		position: sticky;
		top: 0;
	}
}

@media print {
	
	/* request that table headers be reprinted on each page */
	thead {
		display: table-header-group;
	}
	
	#content {
		min-width: 10in;
	}
	
	tr {
		break-before: avoid;
		page-break-before: avoid;
		page-break-inside: avoid;
		break-after: avoid;
		page-break-after: avoid;
	}
	
	tr.head {
		page-break-before: auto;
		break-before: auto;
	}
}

#content td, #content th {
	font-size: 10pt;
}

table {
	border-collapse: collapse;
}


thead th:nth-child(even) {
	background: #ffc;
}

thead th:nth-child(odd) {
	background: #fff;
}

thead tr {
	border-bottom: solid 1px thin;
}

tr.courses {
	border-bottom: solid thin black;
}
tr:nth-child(odd).standards-group.odd {
	background: #fee;
}

tr:nth-child(odd).standards-group.odd td:nth-child(even) {
	background: #ffe;
}

tr:nth-child(even).standards-group.odd {
	background: #edd;
}

tr:nth-child(even).standards-group.odd td:nth-child(even) {
	background: #eed;
}

tr:nth-child(odd).standards-group.even {
	background: #eef;
}

tr:nth-child(odd).standards-group.even td:nth-child(even){
	background: #eff;
}

tr:nth-child(even).standards-group.even {
	background: #dde;
}

tr:nth-child(even).standards-group.even td:nth-child(even){
	background: #dee;
}

tr.head {
	border-top: solid thin black;
}

td, th {
	padding: 0.5em;
}

th {
	text-align: left;
	font-weight: normal;
}

td {
	text-align: center;
}

.standard {
	text-indent: -2.5em;
	margin-left: 2.5em;
}

.standard .code {
	color: #999;
	font-size: smaller;
}

.head .standard .description::before {
	content: '\00a0'; /*   */

67% of this comment could be valid code. Did you maybe forget this after debugging?

	padding-left: 0.4em;
}

.head .standard .description {
	font-weight: bold;
	font-size: larger;
}

h1 {
	font-size: 14pt;
	font-weight: bold;
	margin: 0;
	margin-bottom: 0.5em;
}

span.marker, td h1 {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

span.marker::before {
	content: '\2713'; /* check mark */
	padding: 0.2em 0.4em;
	color: white;
	background: black;
	border-radius: 1em;
}

.head span.marker::before {
	background: red;
	border: solid 1px maroon;
}