body {
	margin:             0;
	font-family:        -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
}

* {
	scroll-margin-top: 3.6rem;
}

header {
	position:         fixed;
	z-index:          20;
	top:              0;
	left:             0;
	right:            0;
	height:           3.6rem;
	padding:          .7rem 1.5rem;
	box-sizing:       border-box;
	background-color: #fff;
	border-bottom:    1px solid #dadcdf;
	line-height:      2.2rem;
}
header .logo {
	display:        inline-block;
	height:         2.2rem;
	min-width:      2.2rem;
	margin-right:   .8rem;
	vertical-align: top;
}

aside#sidebar {
	display:          block;
	position:         fixed;
	width:            20rem;
	z-index:          10;
	top:              3.6rem;
	left:             0;
	bottom:           0;
	box-sizing:       border-box;
	background-color: #FFF; /* is transparent without this. */
	border-right:     1px solid #dadcdf;
	overflow-y:       auto;
}

/* The sidebar button is conditionally rendered.  Most of it is set up here, but then note it's set to display=none. */
.sidebar-button {
	cursor:   pointer;
	display:  none;
	width:    1.25rem;
	height:   1.25rem;
	position: absolute;
	padding:  .6rem;
	top:      .6rem;
	left:     1rem;
}
.sidebar-button .icon {
	display: block;
	width:   1.25rem;
	height:  1.25rem;
}

/* The first element inside the main area should be pushed down with a top margin so as not to get stuck under the header. */
main {
	margin-top:     3.6rem;
	padding-bottom: 2rem;
	padding-left:   20rem;
}

/* The main content area should have some margins. Another div will be used to acheive this. */
/* The buttons for grabbing header links will jab back out into them. */
main > div.content {
	margin:    4.7rem auto;
	max-width: 940px;
	padding:   0 2rem;
}
a.header-anchor:before {
	float:          left; /* take me out of flow so I don't push the header around. */
	margin-left:    -1.4rem;
	content:        "#";
}

/* As the screen gets smaller, we shrink the nav sidebar. */
@media (max-width: 959px) {
	aside#sidebar {
		font-size: 15px;
		width:     16.4rem;
	}
	main {
		padding-left: 16.4rem;
	}
}

/* As the screen gets quite small, we translate the nav sidebar off-screen entirely... */
/* ... and will add buttons, and shift the header over to make room for the button, and etc. */
@media (max-width: 719px) {
	aside#sidebar {
		top:         0;
		padding-top: 3.6rem;
		transform:   translateX(-100%);
		transition:  transform .2s ease;
	}
	/* Enable the rendering of the menu button at this size.  (And shift the header, to account for it.)  */
	.sidebar-button {
		display: block;
	}
	header {
		padding-left: 4rem;
	}
	/* The button will use a tiny piece of JS to toggle this 'sidebar-open' class, which causes it to translate back on-screen. */
	/*  FUTURE: I feel like one could do this with a carefully styled checkbox, and thus no javascript.  That would be neat. */
	.sidebar-open#sidebar {
		transform: translateX(0);
	}
	/* And the content area just gets less and less margin. */
	main {
		padding-left: 0rem;
	}
}

/* Styling for the breadcrumbs. */
aside#breadcrumbs {
	display: inline;
}
#breadcrumbs ul {
	display: inline;
	padding: 0;
}
#breadcrumbs ul li {
	display: inline-block;
}
#breadcrumbs ul li:before {
	content: " » ";
	margin: 0 0.4rem;
}

.children-table > tbody > tr > td:first-child {
	text-align: right;
	font-weight: bold;
}

.children-table > tbody > tr > td {
	vertical-align: middle;
}