@CHARSET "UTF-8";

html {
	display: flex;
	min-height: 100%;
	background: hsl(0, 0%, 90%);
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 14pt;
}
body {
	margin: 0;
	flex-grow: 1; /* Stretch it to fill screen at least */
	display: flex;
	flex-flow: column nowrap;
}
/* Content with limited width.
 * Can't use padding, beacuse it's not dynamic.*/
.narrow {
	margin-right: auto;
	margin-left: auto;
	max-width: 1000px;
}
header,
/*nav,*/
main,
footer {
	padding: 16px 64px;
}
header {
	height: 156px; /* The image is 256px tall */
	position: relative;
/*	margin-bottom: 4px; /* Space for border */
/*	padding: 16px 0;*/
	box-sizing: border-box;
	background:
		url(img/header.png) center top no-repeat,
		linear-gradient(
			to bottom,
			#030e70,
			#020a50
		);
	text-align: right;
}
header>*{
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-end;
	justify-content: flex-end;
}
header #company-name {
	margin: 8px 0 0 0;
	text-transform: uppercase;
	font-size: 10pt;
	font-weight: 500;
	letter-spacing: 8px;
}
header #logo {
	height: 100px;
}
header,
footer {
	color: white;
}
/* Border on header and footer */
/*header::after,*/
footer::after {
	content: "";
	position: absolute;
	left: 0;
	height: 4px;
	width: 100%;
	background: linear-gradient(to bottom,
		white,
		grey
	);
}
header::after {
	bottom: -4px;
}
footer::after {
	top: -4px;
}
nav {
	/* Bring it over main and footer.
	 * As long as this is a flex item,
	 * no additional settings are required
	 * to make the z-index work. */
	z-index: 100;
}
nav #top-nav {
	background: linear-gradient(to bottom,
		hsl(0, 0%, 95%),
		hsl(0, 0%, 75%)
	);
}
nav ul {
	padding-left: 0;
	list-style-type: none;
	text-transform: uppercase;
}
nav ul:not(.top-level)>li {
	background: silver;
}
nav ul.top-level>li.current,
nav ul.top-level>li.currentpath {
	background: linear-gradient(to bottom,
		hsla(0, 0%, 75%, 1),
		hsla(0, 0%, 95%, 1)
	);
}
nav ul li a {
	display: block; /* To enclose padding */
	padding: 16px 32px;
	color: inherit;
}
nav ul li a:hover {
	text-decoration: none;
	color: white;
/*	box-shadow: inset 0 0 64px 0 hsla(0, 0%, 100%, 0.5);*/
}
/* Deeper menu levels, hidden here, pop up in wider. */
nav ul:not(.top-level) {
	display: none;
}
nav #breadcrumbs {
	position: relative;
	top: 7px;
	height: 0;
	padding-top: 0;
	padding-bottom: 0;
}

aside#slideshow {
	position: relative;
	background-color: #020945;
	background: radial-gradient(
		circle,
		#050e5a 50%,
		#01062c
	);
}
aside#slideshow:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background:
		linear-gradient(to top,
			black 0%,
			transparent 30%
		);
	z-index: 10;
	opacity: 0.8;
	pointer-events: none;
}

main {
/*	padding: 0 64px;*/
	flex-grow: 1;
	text-align: justify;
}
.album {
	margin-top: 32px;
	clear: both;
}

footer {
	display: flex;
	position: relative;
	height: 64px;
	box-sizing: border-box;
/*	padding: 16px 64px;*/
	flex-flow: row;
	justify-content: space-between;
	align-items: center;
	background:
/*		url(img/header.png) center bottom no-repeat;*/
		#020945;
}
footer #login {
/*	position: absolute;
	bottom: 0;
	left: 0;*/
}

/*** CONTENT ***/
#child-pages {
	list-style-type: none;
	text-transform: uppercase;
	padding-left: 0;
}
#child-pages li {
	position: relative;
	margin: 8px 0;
	border: 1px solid hsla(0, 0%, 0%, 0.5);
}
#child-pages li:before {
/*	content: "►";
	position: absolute;
	left: -32px;*/
/*	font-size: 0.5rem;*/
}
#child-pages a {
	display: block;
	padding: 1em;
	color: inherit;
	text-decoration: none
}
#child-pages li:hover {
/*	border: 1px solid white;
	color: white;*/
	text-decoration: underline;
}

/*** GENERAL STYLE ***/
.fill-height {
	position: relative;
	height: 100%;
}
/*.sink-bottom {
	position: absolute;
	left: 0;
	bottom: 0;
}*/

#breadcrumbs {
	font-size: 0.8rem;
}
.breadcrumb {
	margin-right: 0.5em;
}

strong {
	font-weight: 500;
}

/* Links */
a {
	color: blue;
	text-decoration: none; /* Stays for hover */
}
a:hover {
	text-decoration: underline;
}
a.hidden,
#breadcrumbs a {
	color: inherit;
}

/* Headings */
#page-name {
	display: inline-block;
	position: relative;
	color: white;
	text-transform: uppercase;
	font-weight: 300;
}
#page-name:before {
	content: "";
	position: absolute;
	top: -0.25em;
	bottom: -0.25em;
	left: calc(-50vw + 486px);
	right: -100px;
	z-index: -1;
	background-color: #020945;
	transform: skewX(30deg);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 500;
}

/* Tables */
table, th, td {
/*	border: none;*/
}
th, td {
	padding: 0 0.5em;
}
th {
	font-weight: 500;
}

/* Map (map.php) */
#map {
	height: 500px;
	margin-top: 1em;
	margin-bottom: 1em;
	/* (The map covers padding as well.) */
}

/* Gallery */
.gallery-prettyphoto,
.gallery-fancybox {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
.gallery.gallery-prettyphoto .gallery-thumb,
.gallery.gallery-fancybox .gallery-thumb {
	margin: 1px;
}
.gallery div[style^=clear] {
	/* This is to prevent the inherent clearfix
	 * div from showing. */
	display: none;
}

/* Links to child galleries. (album-parent.php) */
.album-link-list {
	display: block;
	list-style-type: none;
	padding-left: 0;
}
.album-link {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	min-height: 100px;
	margin: 16px 0;
	overflow: auto;
}
.album-link:hover {
	background-color: rgba(0, 0, 0, 0.1);
}
.album-link-image {
	pointer-events: none;
}
.album-link-desc {
	padding: 0 32px
}
.album-link-title {
	margin-bottom: 1em;
	color: #020945;
	font-size: 120%;
	font-weight: 300;
}
.album-link .gallery .gallery-thumb {
	margin: 0;
}
.album-link .gallery .gallery-thumb a {
	display: block;
}
.album-link .gallery .gallery-thumb img {
	display: block;
	max-width: 400px;
}
.album-link-link {
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
/* In case more than one image is marked as cover,
hide it. (Or make it a feature?) */
.album-link .gallery-thumb:not(:first-of-type) {
	display: none;
}