#algoroll_timeline dl {		display:		grid;
				grid-gap:		4px 16px;
				grid-template-columns:	max-content }
#algoroll_timeline dt {		font-weight:		bold }
#algoroll_timeline dt:after {	content:		":" }
#algoroll_timeline dd {		margin:			0;
				grid-column-start:	2 }

form#algo 		{	margin:			0 2vw }
form#algo label:after {		content:		":" }

table#algo_toc tr td {		padding:		0 2vw }


article#publications aside:first-child {
			float:			right }
.fl {			float:			left }
.fr {			float:			right }
.fn {			float:			none }

.clrL {			clear:			left }
.clrR {			clear:			right }
.clrB, .clr {		clear:			both }
.clrN {			clear:			none }

img.screenshot {	filter:			drop-shadow(5px 5px 5px #222);
			margin-bottom:		10px;
			border-radius:		8px }

#b nav {		line-height:		1.7 }
#b nav img {		vertical-align:		middle }
#b nav img {		margin-right:		13px }
#b nav img[src='/img/mech-wheel.png'] {
			width:			22px;
			margin:			-2px 11px 0 -3px }

/* https://css-tricks.com/considerations-styling-pre-tag/ */

pre {			white-space:		pre-wrap;
			width:			max-content }

pre code {		overflow-x:		auto;
			overflow-y:		visible }

pre[data-lang] {	padding:		0vw 2vw 1vw 2vw;
			font-weight:		normal;
			background-color:	black;
			color:			green }

pre[data-lang]::before {
			content:		attr(data-lang);
			display:		block;
			font-size:		80%;
			width:			auto;
			text-align:		left;
			background-color:	green;
			color:			white;
			margin:			0 -2vw;
			padding:		0.2vw 0.5vw }

pre code span {		font-weight:		900;
			color:			white }

/* ============================================ */

html, body, #m {	min-height:		100vh }


html, body, #m {	height:			100vh }
#b {			height:			auto }
#h {			height:			80px }
#f {			height:			37px }

html, body {		width:			100vw }
#m {			width:			97vw }
article pre {		width:			96% }

article#publications svg#ssh_venndiagram {			width:		50vw;
								max-height:	60vh;
				        		        filter:		drop-shadow(3px 3px 3px rgba(0,0,0,.3)); }


picture#ssh_key1 img {						height:	15vmin;	margin:	4vmin 0 }
picture#ssh_key2 img {						height:	17vmin;	margin:	3vmin 0 }
picture#ssh_key3 img {						height:	21vmin;	margin:	1vmin 0 }

article#publications table#key_specs tr:first-child td {	background-color: white }
article#publications table#key_specs tr:nth-of-type(odd) {	background-color: #eee }
article#publications table#key_specs tr:nth-of-type(even) {	background-color: #ccc }

article#publications table#key_specs tr td.y {			color:		green }
article#publications table#key_specs tr td.n {			color:		red }
article#publications table#key_specs tr td.y::after {		content:	"\2714" }
article#publications table#key_specs tr td.n::after {		content:	"\2718" }

article#publications table#key_specs tr th,
article#publications table#key_specs tr td {			text-align:	center }
article#publications table#key_specs tr th:first-child,
article#publications table#key_specs tr td:first-child {	text-align:	left }

article#publications table#key_specs {				width:  	100% }
article#publications table#key_specs tr td {			width:		22% }
article#publications table#key_specs tr td:first-child {	width:		34% }

article#publications table#key_specs tr td {			padding:	.5vmin }
article#publications table#key_specs tr td:first-child {	padding-left:	1vmin }

article#publications table#ssh_auth tr td img {			max-height:	30vmin }

html, body {		margin:			0 }
#m, #c, article#publications table#key_compare, article#publications table#ssh_auth {
			margin:			0 auto }
#h img {		margin:			0 1vw 0 1vw }
#b nav {		margin:			100px auto 0 auto }
article {		margin:			1vw 4vw }

img[src='/img/sculpture.jpg'] {
			margin-right:		5px }
#catzone {		margin-left:		10vw }


article#publications table#key_compare caption {
			padding:		1vw 2vw }
article#publications table#key_compare tr:nth-of-type(5) td {
			padding-left:		1vw }

article#publications table#ssh_auth td {
			padding:		0 1vw }
article#publications table#ssh_auth td.l {
			padding-right:		6vw }
article#publications table#ssh_auth td.r {
			padding-left:		6vw }

ul li {			list-style-type:	square }
ul li.no {		list-style-type:	circle }


html, body, #m {	padding:		0 }
span.mono {		padding:		0 3px }

.fl {			float:			left }
.fr, #f p, #h img, img[src='/img/sculpture.jpg'] {
			float:			right }

#h {			vertical-align:		bottom }
#b {			vertical-align:		top }
#f {			vertical-align:		middle }

#general, #ssh, #email, #web {
			display:		none }
#b nav {		display:		inline-block }
#b nav.block a {	display:		block }

/* ==================== fonts/text ============ */

@font-face {		font-family:		'Signika';
			font-style:		normal;
			font-weight:		400;
			src:			local('Signika'), local('Signika-Regular'), url('/fonts/signika-regular.woff2') format('woff2'), url('/fonts/signika-regular.woff') format('woff'); }

@font-face {		font-family:		'Oswald';
			font-style:		normal;
			font-weight:		400;
			src:			local('Oswald Regular'), local('Oswald-Regular'), url('/fonts/oswald-regular.woff2') format('woff2'), url('/fonts/oswald-regular.woff') format('woff'); }

pre, code, .pre, #f, span.mono {
			font-family:		Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; }
td {			font-family:		'Signika', Arial, Helvetica }
h1, h2, h3, h4, h5 {	font-family:		'Oswald', sans-serif }

#f {			font-size:		10px }
pre, .pre {		font-size:		90% }

.b {			font-weight:		900 }

td, th {		text-align:		inherit }
article, pre, code {	text-align:		left }
#c, #b nav, .l {	text-align:		left }
html, body, .c {	text-align:		center }
#f {			text-align:		right }

#ssh_auth td.l {	text-align:		left }
#ssh_auth th {		text-align:		center }
#ssh_auth td.r {	text-align:		right }


.manual h2 {		text-decoration:	underline }
.manual h2:hover {	text-decoration:	none }
h1, h2, h3, h4, h5, #f {
			text-shadow:		1px 1px 1px rgba(0, 0, 0, 0.2); }

figcaption {		font-style:		oblique;
			font-style:		italic }

/* ==================== other ================= */

.manual h2 {		cursor:			pointer }

/* ==================== bg/color/shade ======== */

#b {			background-color:	white }
span.mono {		background-color:	#ccc }

#b {			color:			#777 }
pre, .pre {		color:			#0b0 }
.warn {			color:			#e00 }

#m {			border-collapse:	collapse }
#m {			border-spacing:		0 }

#b {			border-radius:		7px;
			box-shadow:		0 0 10px 0 rgba(37, 37, 37, 0.7);
			}

/* ============================================ */