path: root/css/content.css

div.content {
	background-color:var(--backgroundColour);
	border-top-color:var(--foregroundColour);
	border-top-style:solid;
	border-top-width:calc(1rem / 3);
	box-sizing:      border-box;
	height:          100%;
	margin:          auto;
	max-width:       var(--maximumPageWidth);
	min-width:       var(--minimumPageWidth);
	padding:         1rem 2rem;
	padding-bottom:  calc(3rem / 2 + 2rem);
	width:           100%;
}

div.content img {
	border-color: var(--foregroundColour);
	border-radius:calc(1rem / 3 * 2);
	border-style: solid;
	border-width: calc(1rem / 3);
	display:      block;
	margin:       auto;
	max-height:   12rem;
}

div.content p a,div.content p a:visited {
	color:          var(--colour);
	font-weight:    bold;
	text-decoration:none;
}

div.content p a:hover {
	color:var(--foregroundColour);
}

div.content p img {
	border-style:none;
	display:     inline-block;
	height:      1em;
}

div.content p.pageTitle,div.content p.large {
	font-family:"Helvetica","sans-serif";
}

div.content p.pageTitle {
	font-size:    3rem;
	margin-bottom:1rem;
	text-align:   center;
}

div.content p.pageTitle sub {
	font-size: 1rem;
	font-style:italic;
}

div.content div.section + div.section::before {
	content:         "";
	background-color:var(--colour);
	display:         block;
	height:          calc(1rem / 3);
	margin:          1rem 0;
	width:           calc(100% / 2);
}

div.content div.section p.large {
	font-size:    2rem;
	font-weight:  bold;
}

div.content div.section p.small {
	font-size:  calc(11rem / 12);
	font-weight:bold;
}

div.content div.section p.small span.data + span.data::before {
	content:    "\0020\2014\0020";
	font-weight:normal;
}

div.content div.section p.math {
	margin:calc(1rem / 2) 0;
}

div.content div.section ul li,div.content div.section ol li {
	margin-left:2rem;
}

div.content div.section table {
	background-color:var(--foregroundColour);
	border-collapse: collapse;
	border-color:    var(--foregroundColour);
	border-style:    solid;
	border-width:    calc(1rem / 12);
	color:           var(--backgroundColour);
	margin:          auto;
}

div.content div.section table tr.small {
	font-size:calc(2rem / 3);
}

div.content div.section table tr td,div.content div.section table tr th {
	box-sizing:border-box;
	padding:   calc(1rem / 12) calc(1rem / 3);
}

div.content div.section table tr td {
	background-color:var(--backgroundColour);
	color:           var(--foregroundColour);
}

div.content div.section table tr td + td,div.content div.section table tr td + th,div.content div.section table tr th + td {
	border-left-color:var(--foregroundColour);
	border-left-style:solid;
	border-left-width:calc(1rem / 12);
}

div.content div.section table tr td.rightAligne {
	text-align:right;
}

div.content div.section table.data {
	font-family:   "Courier New","monospace";
	word-break:    break-all;
	letter-spacing:calc(1rem / 12);
}

div.content div.section table.data tr + tr {
	border-top-color:var(--foregroundColour);
	border-top-style:solid;
	border-top-width:calc(1rem / 12);
}

div.content div.section div.graphicsPreview {
	align-items:     center;
	background-color:var(--foregroundColour);
	border-radius:   calc(1rem);
	box-sizing:      border-box;
	display:         flex;
	height:          calc(12rem + 1rem * 2 + 1rem / 3 * 2);
	margin-top:      1rem;
	padding:         1rem;
	width:           calc(12rem + 1rem * 2 + 1rem / 3 * 2);
}

div.content div.section div.graphicsPreview + * {
	margin-bottom:1rem;
}

div.content div.section div.graphicsPreview img {
	background-color:var(--backgroundColour);
	border-color:    var(--backgroundColour);
	border-radius:   calc(1rem / 3 * 2);
	border-style:    solid;
	border-width:    calc(1rem / 3);
	margin:          auto;
	max-height:      12rem;
	max-width:       12rem;
}

div.content div.section img.subgroup,div.content div.section img.subgroup-mc {
	border-radius:calc(6rem / 24);
	border-style: none;
	margin:       0;
	margin-bottom:1rem;
	width:        6rem;
}

div.content div.section img.subgroup-mc,div.content div.section img.subgroup-mc:hover {
	transition:1s;
}

div.content div.section img.subgroup-mc:hover {
	transform:rotate3d(0,1,0,180deg);
}