/* About page CSS */
hgroup.about.main.heading {
	padding: 2em 1em 1em;
	background: url('../images/about.svg');
	background-size: 100% 100%;
	box-shadow: 1ex 1em var(--dblack);
	margin: 1em 0 2em;
}

/* section navigation
 * When JS is available, these are tabs.
 * When JS is not available, these index each section. */
nav {
	background: var(--dgreen);
}

nav .hint {
	color: var(--lgreen);
}

nav .tabs {
	flex-grow: 1;
	display: flex;
	justify-content: flex-start;
	position: relative;
	flex-wrap: wrap;
	margin: 0 1ex 0 0;
	padding: 0;
	text-align: center;
	overflow: clip;
}

.tabs li {
	display: flex;
	flex-grow: 1;
	justify-content: center;
}

.tabs .tab {
	flex-grow: 1;
	position: relative;
	box-shadow: 1ex 1em var(--dblack);
	display: inline-block;
	padding: .5em 1em 2em;
	margin: -.5em 1ex;
	top: 1em;
}

/* tabs "pop out" */
.tabs .tab:hover {
	top: .5em;
}

/* create illusion that tabs and content are contiguous using shadows? */
.tab.active {
	z-index: 2;
}


/* white labels on the tabs */
.label {
	color: var(--dblack);
	font-weight: bold;
	padding: 0 1ex;
	margin: 0;
	background: var(--lwhite);
}

/* headings should look like tabs, but not *be* tabs */
.tablike {
	text-align: center;
	position: relative;
	box-shadow: 1ex 1em var(--dblack);
	display: inline-block;
	padding: .5em;
	margin: 1em 1ex 0;
}

/* the dossier */
div.about {
	position: relative;
	z-index: 2;
	background: var(--lgreen);
	color: var(--dblack);
	margin: 0;
	padding: 0 0 1em;
	box-shadow: 1ex 1em var(--dblack);
}

section {
	.contents {
		padding: 1em 1ex;
		margin: 0 2ex 1em 1ex;
		box-shadow: 1ex 1em var(--dblack);
		/* ensure tabs are "behind" the contents */
		position: relative;
		z-index: 1;

		/* .textbox groups text that should be kept together
		 * and separated from other text */
		.textbox {
			margin-bottom: 1em;

			p {
				margin-top: 1em;
			}

			hgroup p {
				margin: 0;
			}
		}
	}
}

.bio { background: var(--lred);}
#bio {
	.contents { background: var(--lred);}
	.tablike {background: var(--lred);}
}

.skills {background: var(--dyellow);}
#skills {
	.contents {background: var(--dyellow);}
	.tablike {background: var(--dyellow);}
}

.edu {background: var(--dmagenta);}
#edu {
	.contents {background: var(--dmagenta);}
	.tablike {background: var(--dmagenta);}
}

.exp {background: var(--dblue);}
#exp {
	.contents {background: var(--dblue);}
	.tablike {background: var(--dblue);}
}