/* CSS reset */
body, div, p,
h1, h2, h3, h4, h5, h6,
ol, ul, li,
dl, dt, dd,
th, tr, td,
img {
	margin: 0px;
	padding: 0px;
}

a {
	outline: 0;
}

a:focus {
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: 1px dashed #55c9c9;
	/*box-shadow: 0 0 5px #55c9c9;*/
}

/*******************************
	FONTS, ENTIRE PAGE
*******************************/

@font-face {
	font-family: 'TwCenMT';
	src: url('type/tw_cen_mt_regular-webfont.eot');
	src: url('type/tw_cen_mt_regular-webfont.eot?#iefix') format('embedded-opentype'),
		url('type/tw_cen_mt_regular-webfont.woff') format('woff'),
		url('type/tw_cen_mt_regular-webfont.ttf') format('truetype'),
		url('type/tw_cen_mt_regular-webfont.svg#TwCenMTRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
/*
Generated by Font Squirrel (http://www.fontsquirrel.com) on July 25, 2011

What happened here: I added real bold/italic/bold-italic fonts as per
	http://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-styles
	http://nimbupani.com/fake-bolding-of-web-fonts.html
but I had to use
	http://www.freefontconverter.com/
	https://www.kirsle.net/wizards/ttf2eot.cgi
because Font Squirrel blacklisted Tw Cen MT. Unfortunately, the rendering isn't as good for the new fonts, which were downloaded from shady websites and don't include Font Squirrel's hinting.
*/
/*@font-face {
	font-family: 'TwCenMT';
	src: url('type/Tw-Cen-MT.eot');
	src: url('type/Tw-Cen-MT.eot?#iefix') format('embedded-opentype'),
		url('type/Tw-Cen-MT.woff') format('woff'),
		url('type/Tw-Cen-MT.ttf') format('truetype'),
		url('type/Tw-Cen-MT.svg#TwCenMT-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}*/
@font-face {
	font-family: 'TwCenMT';
	src: url('type/Tw-Cen-MT-Bold.eot');
	src: url('type/Tw-Cen-MT-Bold.eot?#iefix') format('embedded-opentype'),
		url('type/Tw-Cen-MT-Bold.woff') format('woff'),
		url('type/Tw-Cen-MT-Bold.ttf') format('truetype'),
		url('type/Tw-Cen-MT-Bold.svg#TwCenMT-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'TwCenMT';
	src: url('type/Tw-Cen-MT-Italic.eot');
	src: url('type/Tw-Cen-MT-Italic.eot?#iefix') format('embedded-opentype'),
		url('type/Tw-Cen-MT-Italic.woff') format('woff'),
		url('type/Tw-Cen-MT-Italic.ttf') format('truetype'),
		url('type/Tw-Cen-MT-Italic.svg#TwCenMT-Italic') format('svg');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'TwCenMT';
	src: url('type/Tw-Cen-MT-Bold-Italic.eot');
	src: url('type/Tw-Cen-MT-Bold-Italic.eot?#iefix') format('embedded-opentype'),
		url('type/Tw-Cen-MT-Bold-Italic.woff') format('woff'),
		url('type/Tw-Cen-MT-Bold-Italic.ttf') format('truetype'),
		url('type/Tw-Cen-MT-Bold-Italic.svg#TwCenMT-BoldItalic') format('svg');
	font-weight: bold;
	font-style: italic;
}

/** Sans-serif headers **/
h1, h2, h3, h5, h6 {
	font-family: 'TwCenMT', sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 32px;
}

h4 {
	font-family: 'TwCenMT', sans-serif;
	font-weight: normal;
	font-style: normal;
	line-height: 20px;
	padding-bottom: 8px;
}

/* Header sizes */
/* TODO: group headers by div id so we don't go down to h6 */

/* The giant name at the top */
h1 { font-size: 32px; }

/* Sidebar title. Regular looks better than bold */
h2 { font-size: 18px; letter-spacing: 0.05em; }

/* Content h1 */
h3 { font-size: 24px; }

/* Content date */
h4 { font-size: 12px; color: gray; }

/* Content h2, has a separator at the top */
h5 { font-size: 18px; border-top: 1px solid gray; }

h6 { font-size: 16px; }

/** Serif body **/
@font-face {
	font-family: 'Constantia';
	src: local( "Constantia" );
	src: url( "type/Constantia.ttf" ) format( "truetype" );
}

body, div, p,
ol, ul, li,
dl, dt, dd,
th, tr, td {
	font-family: "Constantia", serif;
	font-size: 14px;
	line-height: 24px;
}

.small_caps {
	font-variant: small-caps;
}

/** Monospaced code **/
code {
	font-family: "Courier New", monospace;
	font-size: 14px;
	line-height: 26px;
	white-space: nowrap;
}

hr {
	border: 0;
	height: 1px;
	border-top: 1px solid lightgray;
	/*
	background-image: -webkit-linear-gradient(left, white, gray, white);
	background-image:    -moz-linear-gradient(left, white, gray, white);
	background-image:     -ms-linear-gradient(left, white, gray, white);
	background-image:      -o-linear-gradient(left, white, gray, white);
	*/
}

/*******************************
	FONTS, DIV-SPECIFIC
*******************************/

/** Sidebar **/

/* Sidebar links don't show link or visited colors */
div #sidebar a:link,
div #sidebar a:visited,
div #sidebar a:focus {
	color: black;
	text-decoration: none;
}
/* Sidebar links aren't underlined */
div #sidebar a:hover,
div #sidebar a:active {
	color: #55c9c9;
	text-decoration: none;
}
/* Sidebar links fade */
div #sidebar a:hover {
	-webkit-transition:color 0s linear;
	-moz-transition:color 0s linear;
	-o-transition:color 0s linear;
	transition:color 0s linear;
}
div #sidebar a {
	-webkit-transition:color 0.3s linear;
	-moz-transition:color 0.3s linear;
	-o-transition:color 0.3s linear;
	transition:color 0.3s linear;
}

/** Header **/

/* Big H1 link doesn't show link or visited colors */
div #header h1 a:link,
div #header h1 a:visited,
div #header h1 a:focus {
	color: black;
	text-decoration: none;
}
/* Big H1 link isn't underlined */
div #header h1 a:hover,
div #header h1 a:active {
	color: #55c9c9;
	text-decoration: none;
}
/* Big H1 link fades */
div #header h1 a:hover {
	-webkit-transition:color 0s linear;
	-moz-transition:color 0s linear;
	-o-transition:color 0s linear;
	transition:color 0s linear;
}
div #header h1 a {
	-webkit-transition:color 0.3s linear;
	-moz-transition:color 0.3s linear;
	-o-transition:color 0.3s linear;
	transition:color 0.3s linear;
}

/* Bigger text in header */
div #header p {
	font-size: 16px;
	line-height: 32px;
}

/* "Default" link style */
div #header a:link,
div #header a:focus {
	color: #a6a6a6;
	text-decoration: none;
}
div #header a:visited {
	color: #5a5a5a;
	text-decoration: none;
}
div #header a:hover,
div #header a:active {
	color: #55c9c9;
	text-decoration: underline;
}

div #header_business {
	color: gray;
	font-family: 'TwCenMT', sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 16px;
	line-height: 22px;
}

/** Content **/

/* "Default" link style */
div #content a:link,
div #content a:focus {
	color: #a6a6a6;
	text-decoration: underline;
}
div #content a:visited {
	color: #5a5a5a;
	text-decoration: none;
}
div #content a:hover,
div #content a:active {
	color: #55c9c9;
	text-decoration: underline;
}

/* External links */
/*
	Two notes:
	1. Sidebar links also start with "http" so don't grab those by accident.
	2. If you somehow end up needing to fully link yourself, you can turn off this rule with another rule:
		a[href^="http://www.mydomain.com"] { background: none; padding-right: 0px; }
*/
div #content a[href^="http"] {
	background: url('img/external_arrow.png') center right no-repeat;
	padding-right: 12px;
}
div #content a[href^="http://localhost"] {
	background: none;
	padding-right: 0px;
}
div #content a[href^="http://bruno-li.com"] {
	background: none;
	padding-right: 0px;
}

/* Image link hover effect */
div #content img {
	-webkit-transition:opacity 0.2s ease-out;
	-moz-transition:opacity 0.2s ease-out;
	-o-transition:opacity 0.2s ease-out;
	transition:opacity 0.2s ease-out;
}
div #content a img:hover {
	opacity: 0.6;
}

/* Paragraph spacing */
div #content p {
	margin-bottom: 12px;
}

/* Lists */
div #content ul, ol, dl {
	margin-bottom: 16px;
}

div #content ul li {
	margin-left: 16px;
	list-style-type: circle;
}

div #content ol li {
	margin-left: 16px;
	list-style: decimal;
}

div #content dl dt {
	display: list-item;
	margin-left: 16px;
	list-style-type: circle;
}
div #content dl dd {
	margin-left: 32px;
}

/* Citations */
div #content ul.citations {
	margin-bottom: 16px;
}
div #content ul.citations li {
	margin-left: 16px;
	list-style-type: none;
}

/* Tables */
div #content th {
	text-align: left;
	color: gray;
	font-weight: normal;
	font-style: normal;
	border-bottom: 1px solid gray;
}

div #content blockquote {
	font-size: 14px;
	font-style: italic;
	color: black;
	margin-left: 32px;
	margin-bottom: 16px;
	padding-left: 16px;
	border-left: 1px solid gray;
	quotes: "\201C""\201D""\2018""\2019";
}
div #content blockquote p {
}
div #content blockquote:before {
	content: open-quote;
}
div #content blockquote:after {
	content: close-quote;
}

/*******************************
	DIV GEOMETRY
*******************************/

/*
Padding a div layer adds to the div's width (blame the W3C).
The "solution" is a nested div with a margin property.
Here, all such margin-divs are named after their parents,
and suffixed with "_sub".
*/

div {
	margin: 0px;
	padding: 0px;
}

body {
	margin: 16px;
	padding: 0px;
	background-color: white;
}

div #container_all {
}

div #container_header {
	/*width: 960px;*/
}

div #header {
	height: 80px;
	/*width: 896px;*/
	border-bottom: 1px solid gray;
	/*background: transparent url('img/header-bg_portrait.png') left top;*/
	position: relative;
} div #header_sub {
	margin-top: 0px;
	margin-bottom: 8px;
	margin-left: 16px;
	margin-right: 16px;
	/* float: left; */
	position: absolute;
	left: 0px;
	bottom: 0px;
	text-align: left;
} div #header_business {
	margin-top: 0px;
	margin-bottom: 8px;
	margin-left: 16px;
	margin-right: 16px;
	/*float: right;*/
	position: absolute;
	right: 0px;
	bottom: 0px;
	text-align: right;
}

div #container_content {
	/*width: 960px;*/
	background: transparent url('img/sidebar-bg_slant.png') repeat-y left top;
	clear: both;
}

	/*
	#sidebar and #content are in Faux Columns
	(https://alistapart.com/article/fauxcolumns/)
	i.e. the #sidebar border-right and #content border-left are faked by background: #container_content.

	One change to Faux Columns:
	I've turned off widths and manually pushed
	#content margin-left out so it can scale properly --- 1/29/2020
	*/

	div #sidebar {
		padding-top: 16px;
		padding-bottom: 0px;
		padding-left: 0px;
		padding-right: 0px;
		float: left;
		width: 160px;
	}

	div #content {
		/* This used to be float: left; width: 736px; which was 896 - 160 */
		padding: 0px;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 160px;
		margin-right: 0px;
	} div #content_sub {
		padding-top: 16px;
		padding-bottom: 16px;
		padding-left: 24px;
		padding-right: 16px;
	}

	div #container_content_clear {
		clear: both;
		display: block;
		height: 1px;
		margin: -1px 0 0 0 0;
	}

		/** Sidebar rows **/

		/* Position flag text on flag image */
		div #sidebar h2 {
			text-indent: 56px;
			background: transparent url('img/sidebar-h2.png') no-repeat right top;
		}
		div #sidebar h2 img {
			position: absolute; /* Yucky, but ignoring text-indent is hard */
			left: 32px;
		}

		/* Bar behind <li> elements */
		div #sidebar ul {
			background: transparent url('img/sidebar-ul.png') repeat-y right top;
			padding-bottom: 16px;
		}
		/* Position <li> in front of bar, no bullets */
		div #sidebar ul li {
			font-size: 14px;
			line-height: 32px;
			list-style-type: none;
			text-indent: 48px;
			background: transparent url('img/sidebar-li_asterisk.png') no-repeat right top;
		}

		div #sidebar a {
			display: block;
		}

		div #sidebar_first {}
		div #sidebar_second {}
		div #sidebar_third {}
		div #sidebar_fourth h2 {
			height: 16px;
			background: transparent url('img/sidebar-h2_bottom.png') no-repeat right top;
		}

		div #sidebar_blogroll {
			margin-top: 8px;
			margin-bottom: 8px;
			margin-left: 8px;
			margin-right: 8px;
			text-align: center;
		}
		div #sidebar_blogroll_title {
			font-size: 14px;
			line-height: 26px;
		}
		div #sidebar_blogroll_links {
			font-size: 12px;
			line-height: 20px;
		}

div #footer {
	clear: both;
	height: 64px;
	/* width: 896px; */
	border-top: 1px solid gray;
} div #footer_sub {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 16px;
	margin-right: 0px;
}

div #content table {
	border-spacing: 32px 0px;
	width: 656;
}
/* TODO: this is specific to the table in umbrella.html */
div #content td {
	width: 25%;
}

/*
margin-top keeps images off of text.
margin-right keeps space between inline images.
margin+padding+border totals 16.
*/
div #content img {
	margin-top: 13px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 13px;
	padding: 2px;
	border: 1px solid gray;
}

/* Portrait avatar */
div img.portrait {
	width: 112px;
	height: 112px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 50%;
}

/* Portrait slideshow */
#sidebar_portrait_slideshow {
	width: 112px;
	height: 112px;
	margin: 0px auto;
	position: relative;
}

#sidebar_portrait_slideshow img {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	position: absolute;
	margin: 0px;
}

/*******************************
	SHOWCASE
*******************************/

div #content #showcase_inner {
	display: table;
	margin: auto;
}

div #content #showcase img {
	margin: 0px;
}

div #content #showcase a[href^="http"] {
	background: none;
	padding-right: 0px;
}

div #content .appicon img {
	width: 58px;
	height: 58px;
	border-radius: 20%;
	margin: 0px;
	border-color: white; /* remove border of app icons */
}

div #content .appicon a:focus {
	outline: 0px; /* remove border of app icons */
}

div #content .appicon.mouseover img {
	border-color: white;
}

/*******************************
	ILLUSTRATION
*******************************/
div #content .plain_img img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	border: 0px;
}

/*******************************
	TOGGLE ILLUSTRATION
*******************************/

div #content .toggle_img {
	position: relative;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
	box-shadow: 0px 1px 2px darkgray;
}

div #content .toggle_img img {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	-webkit-transition: opacity 0.05s linear;
	-moz-transition: opacity 0.05s linear;
	-o-transition: opacity 0.05s linear;
	transition: opacity 0.05s linear;
}

div #content .toggle_img img.top:hover {
	opacity: 0;
}

/*******************************
	"CONTROLS" SLIDING PANEL
*******************************/

div #content .slide_header {
	cursor: pointer;
}
div #content .slide_header:hover,
div #content .slide_header:active {
	color: #55c9c9;
	text-decoration: none;
}
div #content .slide_header .slide_icon {
	font-family: 'Courier New', monospace;
	font-size: 14px;
	line-height: 32px;
}
div #content .slide_header .slide_title {
	/*font-family: 'TwCenMT', sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 16px;
	line-height: 32px;*/
}

div #content .slide_content_sub {
	padding-left: 12px;
}
div #content .slide_content ul {
	margin-bottom: 8px;
	/*border-left: 1px solid #a6a6a6;*/
}
div #content .slide_content ul li {
	margin-left: 4px;
	list-style-type: none;
}
div #content .slide_content code {
	border: 1px solid #a6a6a6;
	border-radius: 4px;
	padding-left: 4px;
	padding-right: 4px;
}