body {
	display: flex; /* Necessary to stretch the tab columns to the bottom */
	flex-direction: column;
	min-height: 100vh;
}
#blue {
	height: 388px;
	overflow: hidden !important;
}
.nopic .current-menu-item::after { display: none !important; }
#bump {
	height: 100%; width: 960px;
	box-shadow: 0 -7px 15px rgb(0 0 0 / 40%);
	border-style: solid solid none;
	border-color: rgb(0 0 0 / 50%);
	border-width: 1px;
	box-sizing: content-box;
	position: absolute;
	left: 50%; top: 54px;
	margin-left: -481px;
}

.content {
	margin-top: -334px !important;
	position: relative;
}

#picframe {
	position: relative;
	line-height: 0;
}
#picframe::after {
	content: "";
	display: block;
	position: absolute;
	height: 100%; width: 960px;
	border: 1px solid rgb(255 255 255 / 15%);
	top: 0; left: 0;
	pointer-events: none;
	box-sizing: border-box;
}
#picframe img { max-width: 960px; }

#picframe h1 {
	position: absolute;
	width: 958px; height: 34px;
	background: rgb(255 255 255 / 67%);
	background: linear-gradient(rgb(255 255 255 / 80%),rgb(255 255 255 / 60%));
	background-clip: padding-box;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 50%);
	padding: 25px 0;
	margin: 0;
	font-size: 40px;
	line-height: 1;
	color: black;
	text-shadow: 0 0 10px rgb(255 255 255 / 75%);
	border-color: rgb(0 0 0 / 20%) rgb(150 150 150 / 50%) rgb(150 150 150 / 75%);
	border-style: solid;
	border-width: 1px;
	bottom: 0;
	text-align: center;
}

#desc {
	text-align: center;
	padding: 60px 0;
	background: radial-gradient(ellipse farthest-side at 50% 100%, #FFF,rgb(255 255 255 / 0%));
	font-size: 1.25em;
	line-height: 1.5;
}
#desc a {
	padding: 5px 10px;
	margin: 6px 0 0 5px;
	position: absolute;
}

#mainbody {
	position: relative;
	background: #F6F6F6;
	border-top: 1px solid rgb(0 0 0 / 20%);
	flex-grow: 1;
	display: flex;
}
#left-gray {
	width: 50%;
	height: 100%;
	position: absolute;
	left: 0; top: 0;
	background: #333 url('../images/speckle.png') repeat;
	border-top: 1px solid rgb(0 0 0 / 80%);
	box-shadow: inset -6px 3px 12px rgb(0 0 0 / 80%);
	margin-top: -1px;
}

#body {
	display: flex;
	flex: 1;
}

/* Tabs */

#tabs {
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 2;
	z-index: 999;
	position: relative;
}

#tabs li {
	padding: 10px 1.25em;
	border-bottom: 1px solid rgb(255 255 255 / 10%);
	height: 32px;
	font: 18px/32px 'Optimo';
	cursor: pointer;
	position: relative;
	color: rgb(255 255 255 / 60%);
	text-shadow: 0 1px 2px rgb(0 0 0 / 80%);
}
#tabs li:last-child { border-bottom: none; }
#tabs li:hover {
	background: linear-gradient(to right,transparent,rgb(0 0 0 / 30%));
	color: rgb(255 255 255 / 80%);
	border-right: 1px solid transparent;
}
#tabs li:hover::before { opacity: 0.95; }
#tabs [aria-selected="true"]:first-child, #tabs [aria-selected="true"]:first-child:hover {
	border-top: 1px solid #CCC;
	margin-top: -1px;
	border-radius: 0 0 0 3px;
}
/* #tabs [aria-selected="true"]:last-child, #tabs [aria-selected="true"]:last-child:hover { border-radius: 3px 0 0 0; } */
#tabs [aria-selected="true"], #tabs [aria-selected="true"]:hover {
	color: #444;
	background-color: #F6F6F6;
	background-image: linear-gradient(#F6F6F6,#999);
	position: relative;
	box-shadow: -2px 3px 2px rgb(0 0 0 / 40%);
	border-bottom: none;
	padding-bottom: 11px;
	border-radius: 3px 0 0 3px;
	text-shadow: 0 1px 1px rgb(255 255 255 / 80%);
	cursor: default;
}
#tabs [aria-selected="true"]::after {
	content: "";
	display: block;
	height: 100%; width: 100%;
	top: 0; left: 2px;
	position: absolute;
	background: linear-gradient(to right,rgb(246 246 246 / 0%),#F6F6F6);
}
#tabs li::before {
	content: "";
	display: inline-block;
	font-size: 16px;
	height: 2em; width: 2em;
	background-image: url('../images/icons-white.svg');
	background-size: 16em 2em;
	margin: -5px 1.5em 0 0;
	filter: drop-shadow(0 1px 2px rgb(0 0 0 / 75%));
	opacity: 0.75;
	vertical-align: middle;
}
#tabs li[aria-selected="true"]::before {
	opacity: 1;
	background-image: url('../images/icons.svg');
	filter: drop-shadow(0 1px 0 rgb(255 255 255 / 75%));
}
#tabs span {
	position: relative;
	z-index: 99;
}
#tab-blog::before { background-position: -2em 0; }
#tab-twitter::before { background-position: -4em 0; }
#tab-research::before { background-position: -6em 0; }
#tab-music::before { background-position: -8em 0; }
#tab-contact::before { background-position: -10em 0; }
#tab-teaching::before { background-position: -14em 0; }

/* Panes */

section[role="tabpanel"] {
	flex: 5;
	background: #F6F6F6;
	margin: -1px 0 0 -1px;
	position: relative;
	border-top: 1px solid #CCC;
	box-shadow: -8px 6px 8px rgb(0 0 0 / 30%);
	padding: 30px 0 30px 50px;
}

section[aria-hidden="true"] { display: none; }

/* Research */

#pane-research ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#pane-research li::before {
	content: '';
	height: calc(100% - 1.5em);
	width: 5px;
	background: var(--emph1);
	display: block;
	position: absolute;
	left: 0;
	border-radius: 5px;
}
#pane-research li {
	padding-left: 1.5em;
	position: relative;
}

#pane-research h3 { margin-bottom: 0; }
#pane-research h3 span {
	color: #999;
	font-style: italic;
	font-size: smaller;
}
#pane-research li > span {
	color: #999;
	text-transform: uppercase;
	font: 11px Verdana, Arial, sans-serif;
}
#pane-research p, #pane-teaching p {
	font: 1em/1.5 Georgia, serif;
	text-align: justify;
	margin: 0.5em 0 1em;
}

#pane-research ul .more {
	border: none;
	text-align: left;
	padding-top: 0;
	opacity: 0;
	transition: 0.2s opacity;
	margin-bottom: 2em;
}
#pane-research li:hover .more { opacity: 1; }

.expand {
	display: inline-block;
	color: #999;
	font: 10px Verdana, sans-serif;
	text-transform: uppercase;
	padding: 2px 6px;
	margin-left: 10px;
	border-radius: 3px;
}
.expand:hover {
	color: #666;
	background: var(--emph1);
}
/* FE0E stops Edge from using an emoji here */
#pane-research .expand::after { content: 'Expand Abstract \25B6\FE0E\00A0\00A0'; }
#pane-research .shown-abstract .expand::after { content: '\25C0\FE0E\00A0\00A0 Collapse to Summary'; }

#pane-research .abstract { display: none; }
#pane-research .shown-abstract .abstract { display: block; }
#pane-research .shown-abstract .summary { display: none; }
#pane-research .biblio { font: 0.8em 'Lucida Grande',Calibri, sans-serif; }
#pane-research .abstract::before { content: 'Abstract. '; }

nav#research-nav {
	background: #F6F6F699;
	margin: -30px 0 30px;
	padding: 0 35px;
	font-size: 12px;
	border-bottom: 1px solid var(--emph2);
	position: sticky;
	top: 0;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	display: flex;
	justify-content: space-around;
	z-index: 99;
}
#research-nav a {
	text-align: center;
	padding: 15px;
}
#research-nav a:hover, #research-nav a.active {
	background: var(--emph05);
}
#cv .more {
	margin: 0;
	border: none;
	padding: 0;
}

/* Teaching */

#pane-teaching { text-align: center; }
#pane-teaching .caption { margin-bottom: 1em; }
#pane-teaching h2 { margin-top: 2em; }

#pane-teaching #classes {
	text-align: left;
	list-style: none;
	padding: 0;
	border-bottom: 1px solid var(--emph1);
}
#classes li a {
	border-top: 1px solid var(--emph1);
	padding: 10px 15px;
	display: block;
	font: 1.2em Georgia;
	color: #666;
}
#classes li a:hover {
	background: var(--emph05);
	color: #333;
}
#classes li a:hover::after {
	content: " \25B6 \00A0\00A0";
	color: #999;
	font-size: 0.5em;
	margin-left: 5px;
}

a#pickal {
	margin-top: 3em;
	display: flex;
}
a#pickal::after {
	display: block;
	content: '';
	flex: 1;
	border-top: 1px solid var(--emph2);
	border-bottom: 1px solid rgb(255 255 255 / 50%);
	height: 0;
	margin: 1.25em 0 0 1em;
}

/* Twitter */

#pane-twitter li {
	padding: 20px 0;
	font-size: 15px;
	margin-bottom: 0 !important;
}
#pane-twitter li:first-child { padding-top: 0; }

#twitterhead a { border-bottom: none; }
#twitterhead .caption {
	float: left;
	margin-right: 20px;
	height: 80px; width: 80px;
	border-bottom: 1px solid rgb(0 0 0 / 50%);
}
#pane-twitter #twitterhead p {
	float: none;
	font-size: 12px;
	color: #777;
	max-width: none;
}
#twitterhead {
	border-bottom: 1px solid var(--emph1);
	padding-bottom: 1em;
}
#twitterhead h2 {
	margin: 0 0 0.5em;
	padding-top: 3px;
}
#twitterhead h2 span {
	color: #BBB;
	padding-left: 15px;
}
#twitterhead h2 a:hover span { color: #777; }
.tweet_gallery {
	display: flex;
	justify-content: space-between;
	margin-left: 53px;
}
.tweet_gallery.multi { margin-left: 0; }
.multi .tweet_image { max-width: 49%; }

.type_animated_gif::after {
	content: 'GIF';
	position: absolute;
	top: 50%; left: 50%;
	font: 36px/75px Verdana, sans-serif;
	color: #FFF;
	border: 3px dotted #FFFF;
	padding: 10px;
	height: 75px; width: 75px;
	border-radius: 75px;
	margin: -49px 0 0 -49px;
}

/* Music & CV */

img.tilt {
	box-shadow: 0 3px 6px rgb(0 0 0 / 50%);
	margin-bottom: 15px;
	transform: perspective(600px);
	transition: transform 0.5s;
	transform-style: preserve-3d;
	display: block;
	margin: 0 auto 30px;
}
#pane-music .tilt { margin: 0 0 20px; }
img.tilt:hover { transform: perspective(600px) rotateY(-22deg); }

#cv img, #pane-music img { height: 210px; }

#pane-music .more, #pane-resume .more {
	border-top: none;
	margin-bottom: 0;
}
#mymusic .more { text-align: left; }

#mymusic { display: flex; }
#pane-music hr { margin: 0 0 50px; }
#pane-music h2 a { color: inherit;}

/* Playlist */

.wp-playlist {
	margin: 0 0 0 50px;
	flex-grow: 2;
	position: relative;
	width: 280px;
}

.mejs-duration-container, .mejs-volume-button, .mejs-horizontal-volume-slider,
.mejs-offscreen, .wp-playlist-current-item img, .wp-playlist-item-album,
.mejs-poster, .wp-playlist-item-artist { display: none !important; }
.wp-playlist-current-item { margin-left: 115px; }

.wp-playlist audio {
	display: none;
	max-width: 100%;
	width: 400px;
}

.mejs-container {
	padding: 0 0 0 103px;
	width: 100% !important;
	box-sizing: border-box;
	vertical-align: top;
}

.wp-playlist .mejs-controls .mejs-button button {
	outline: 0;
}

.wp-playlist-caption {
	display: block;
	max-width: 88%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	line-height: 1.5;
}

.wp-playlist-item .wp-playlist-caption {
	text-decoration: none;
	color: #333;
	max-width: calc(100% - 40px);
}

.wp-playlist-item-length {
	position: absolute;
	right: 3px; top: 8px;
	font: 11px Verdana,sans-serif;
	color: #999;
}

.wp-playlist-tracks { margin-top: 20px; }

.wp-playlist-item {
	position: relative;
	cursor: pointer;
	padding: 8px 0 8px 50px;
	border-bottom: 1px solid var(--emph1);
}
.wp-playlist-item:hover { background: var(--emph05); }
.wp-playlist-item:last-child { border-bottom: 0; }

.wp-playlist-playing {
	font-weight: bold;
	background: #FFF;
}

.wp-playlist-current-item .wp-playlist-item-title,
.wp-playlist-current-item .wp-playlist-item-artist {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mejs-fill-container,
.mejs-fill-container .mejs-container {
	width: 100%;
	height: 100%
}
.mejs-fill-container { overflow: hidden }
.mejs-container:focus { outline: 0 }

.mejs-container .mejs-controls div {
	list-style-type: none;
	background-image: none;
	display: block;
	float: left;
	margin: 0;
	padding: 0;
	font: 11px/11px Verdana,sans-serif;
	border: 0
}
.mejs-controls .mejs-button button {
	cursor: pointer;
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
	height: 48px; width: 48px;
	top: 0; left: 50px;
	background: rgb(44 65 87) url(/wp-includes/js/mediaelement/mejs-controls.svg) no-repeat;
	background-size: 900px;
}
.mejs-controls button:hover { background-color: rgb(66 84 104); }

.no-svg .mejs-controls .mejs-button button {
	background-image: url(/wp-includes/js/mediaelement/mejs-controls.png)
}
.mejs-controls .mejs-button button:focus {
	outline: dotted 1px #999
}
.mejs-container .mejs-controls .mejs-time {
	display: block;
	height: 17px;
	width: auto;
	padding: 10px 3px 0;
	overflow: hidden;
	text-align: center;
	box-sizing: content-box
}
.mejs-container .mejs-controls .mejs-time a {
	font-size: 11px;
	line-height: 12px;
	display: block;
	float: left;
	margin: 1px 2px 0 0;
	width: auto
}
.mejs-controls .mejs-play button {
	background-position: 3px 4px
}
.mejs-controls .mejs-pause button {
	background-position: -43px 5px
}
.mejs-controls div.mejs-time-rail {
	width: auto !important; height: 26px;
	padding-top: 5px
}
.mejs-time-rail span, .mejs-time-rail a {
	display: block;
	position: absolute;
	width: 180px;
	height: 10px;
	border-radius: 2px;
	cursor: pointer
}
.mejs-controls .mejs-time-rail .mejs-time-total {
	margin: 5px 0 5px 5px;
	border: 1px solid var(--emph2);
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
	background: var(--emph1);
	width: 0
}
.mejs-controls .mejs-time-rail .mejs-time-current {
	background: rgb(44 65 87);
	width: 100%;
	transform-origin: 0 0;
	border: 1px solid var(--emph2);
	border-right: none;
	margin: -1px 0 -1px -1px;
	height: 10px;
}
.mejs-controls .mejs-time-rail .mejs-time-handle {
	display: none;
	position: absolute;
	margin: 0;
	width: 10px;
	background: #fff;
	border-radius: 5px;
	cursor: pointer;
	border: solid 2px #333;
	top: -2px;
	text-align: center
}
.mejs-controls .mejs-time-rail .mejs-time-float {
	position: absolute;
	display: none;
	background: rgb(0 0 0 / 80%);
	width: 36px; height: 17px;
	border: 3px solid rgb(0 0 0 / 80%); /* Padding messes things up */
	border-style: none solid;
	border-radius: 3px;
	top: -25px;
	margin-left: -18px;
	text-align: center;
	color: #FFF;
	font: 11px/11px Verdana,sans-serif;
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
	margin: 2px;
	width: 30px;
	display: block;
	text-align: center;
	left: 0
}
.mejs-controls .mejs-time-rail .mejs-time-float-corner {
	position: absolute;
	display: block;
	width: 0; height: 0;
	border: solid 5px rgb(0 0 0 / 80%);
	border-color: rgb(0 0 0 / 80%) transparent transparent;
	top: 17px; left: 13px
}

/* Last.fm */

ul#lastfm {
	padding: 0;
	margin: 0;
	list-style: none;
}
#lastfm li {
	border-top: 1px solid var(--emph1);
	padding: 0;
	height: 64px;
}
#lastfm .year {
	font-size: 28px;
	height: auto;
	padding: 8px 20px;
	border-radius: 5px 5px 5px 0;
	border-top: none;
	margin: 30px 0 0;
}
#lastfm li:first-child { margin-top: 0; }
#lastfm li.year + li { border-top: none; }
#lastfm .info {
	width: 100%;
	font-size: 14px;
	padding-top: 19px;
	display: block;
}
#lastfm img {
	height: 64px; width: 64px;
	display: block;
	margin-right: 30px;
	float: left;
}
.playtime {
	text-align: center;
	float: right;
	text-transform: uppercase;
	font: 11px Verdana, Arial, sans-serif;
	color: #999;
	margin-top: 22px;
}

/* Contact */

ul.gform_fields { list-style: none; padding: 0; margin: 0; }
#entry ul.gform_fields > li { margin: 0; }
.gfield_required { color: #C00; }
.gform_validation_container { display: none; } /* Honeypot */
.ginput_left, .ginput_right { display: block; float: left; }
.ginput_right { margin-left: 40px; }
.ginput_left label, .ginput_right label { display: block; font-size: 10px; margin-bottom: 1em; }
.ginput_container input, .ginput_container textarea { width: 400px; }
.ginput_container .ginput_left input, .ginput_container .ginput_right input { width: 180px; }
#gform_1 .gform_body { margin-bottom: 0; }

.hidden_label .gfield_label, .gform_required_legend { display: none; }
#input_1_4 {
	float: left;
	border-right: 1px solid rgba(0, 0, 0, 0.1);
}
#input_1_2 { float: right; }
#input_1_4, #input_1_2 {
	width: 50%;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#input_1_3 { width: 100%; }
#gform_ajax_spinner_1 { float: left; }

.gform_footer::after {
	content: "All fields are required.";
	display: inline-block;
	font-size: 12px;
	font-style: italic;
	color: #999;
}

#findme {
	list-style: none;
	padding: 0;
	display: flex;
	justify-content: space-around;
}

#findme a {
	display: inline-block;
	background: var(--emph1);
	padding: 7px 12px;
	border-radius: 20px;
	margin-left: 2em;
	transition: 0.1s background;
	color: #555;
	font-size: 0.9em;
}
#findme a:hover { background: var(--emph2); }

/* Remove tab icons and make header pic full width */
@media only screen and (max-width : 975px) {
	#blue {
		height: auto;
		border-bottom: none !important;
	}
	#bump { display: none; }
	.content {
		padding: 0 !important;
		width: auto !important;
		margin-top: 0 !important;
	}
	#picframe::after {
		width: 100%;
		border-style: solid none none;
	}
	#picframe img { max-width: 100%; }
	#picframe h1 {
		width: 100%;
		border-style: solid none;
	}
	#tabs, #tabs [aria-selected="true"]::after {
		width: 200px;
		flex: 0 1 200px;
	}
	section[role="tabpanel"] {
		float: left;
		padding: 30px 50px;
	}
	#tabs li[aria-selected="true"], #tabs li[aria-selected="true"]:hover { border-radius: 0 !important; }
	#tabs li::before { display: none; }
	#entry { width: auto; }
}

/* Put back the tab icons and remove the text */
@media only screen and (max-width : 857px) {
	#tabs, #tabs [aria-selected="true"]::after {
		width: 59px;
		flex: 0 1 59px;
	}
	#tabs li {
		position: relative;
		padding: 10px 0;
	}
	#tabs li span { display: none; }
	#tabs li::before {
		display: block;
		margin: 0 auto;
	}
	#tabs li[aria-selected="true"], #tabs li[aria-selected="true"]:hover {
		background-color: #F6F6F6;
		background-image: linear-gradient(to right,rgb(0 0 0 / 10%),transparent);
	}
	#tabs li[aria-selected="true"]::after { display: none; }
	#tabs li[aria-selected="true"]::before { opacity: 0.8; }
	
	#tabs li:hover span {
		display: block;
		position: absolute;
		background: rgb(0 0 0 / 85%);
		padding: 5px 15px 5px 10px;
		left: 81px; top: 6px;
		border-radius: 0 3px 3px 0;
		color: #DDD;
		text-shadow: none;
		height: 32px;
		white-space: nowrap;
	}
	#tabs li:hover span::before {
		content:"";
		display: block;
		position: absolute;
		height: 0; width: 0;
		border-width: 21px;
		border-style: solid;
		border-color: transparent rgb(0 0 0 / 85%) transparent transparent;
		left: -42px; top: 0;
	}
	
	#desc {
		font-size: 1em;
		padding: 40px 20px;
	}
}

/* Move the tabs to the top and start rearranging */
@media only screen and (max-width : 715px) {
	#picframe h1 {
		font-size: 32px;
		height: 24px;
		padding: 20px 0;
	}
	#left-gray { display: none; }
	#break { display: none; }
	#desc a {
		display: block;
		position: static;
	}
	#body { display: block; } /* Turn off flex */

	#tabs {
		float: none;
		border-left: none;
		border-bottom: none;
		width: 100%;
		background-image: linear-gradient(#222,#444);
		background-image: url('../images/speckle.png'), linear-gradient(#222,#444);
		display: flex;
	}
	#tabs li {
		box-sizing: border-box;
		height: 56px;
		border-bottom: none;
		flex-grow: 1;
	}
	#tabs li:hover span { display: none; }
	#tabs li[aria-selected="true"], #tabs li[aria-selected="true"]:hover {
		border-color: rgb(0 0 0 / 20%);
		border-bottom: none !important;
		box-shadow: none;
		background: linear-gradient(#FFF,#F6F6F6);
		height: 57px;
	}
	#tabs [aria-selected="true"]::after { display: none; }
	#tabs li:hover { background: rgb(0 0 0 / 40%); }
	section[role="tabpanel"] {
		border: none;
		width: auto;
		float: none;
		clear: both;
		padding: 30px;
	}
	.postthumb img { width: 100%; }
	
	.tweet_gallery { margin-left: 0; }
	
	#pane-music .tilt { margin: 0 auto 20px; }
	#pane-music .more { text-align: center; }
	.more br { display: none; }
	
	#mymusic { display: block; }
	#previews {
		margin-left: 0;
		padding-left: 0;
		border: none;
	}
	
	#lastfm img {
		height: 48px; width: 48px;
		margin-right: 20px;
	}
	#lastfm li { height: 48px; }
	.playtime { display: none; }
	#lastfm .info {
		padding-top: 12px;
		font-size: 12px;
	}
	
	#previews li {
		width: auto;
		padding: 10px 0;
	}
	#pane-twitter li { font-size: 13px; }
	nav#research-nav {
		margin: -29px -20px 30px;
		padding: 0;
	}
}

/* Shrink the tabs and font size */
@media only screen and (max-width : 445px) {
	#picframe h1 {
		font-size: 24px;
		height: 16px;
		padding: 15px 0;
	}
	#twitterhead h2 span {
		display: block;
		padding: 0;
		font-size: 16px;
		color: #999;
	}
	#tabs li { height: 45px; }
	#tabs li[aria-selected="true"], #tabs li[aria-selected="true"]:hover { height: 46px; }
	#tabs li::before { font-size: 0.75rem; }
	#pane-twitter li { font-size: 12px; }
	
	#pane-research ul { margin: 0; }
	#pane-research p {
		text-align: left;
		font-size: 0.9em;
	}
}