@charset "utf-8";
/* © 2019–2020 Richard W. Adams 

Style sheet for a "page group" container. As used on this Web site site, a "page group"  displays and navigates within a related 
group of pages. Page group containers are used for lists of hymn titles, author & composer names, tune names, tune meters,
non-English texts, etc.

The page group container is implemented as a full screen, 2x2 CSS grid:

The left sidebar contains navigation links, one for each page in the group. Using these links a user can navigate from 
one page to another in any order. 

The "content" entry show the content of the user selected page.

The optional header can display anything: a description of the current page, the name of its language,  etc.

*/
html { height: 100vh; }
body { 
	height: 100vh;
	margin: 0;
}
.nav-arrows:first-child {
	margin-bottom: 0px;
	margin-top: 2ex;
}
#page-group {
	display: grid;
	grid-template-columns: min-content auto;
	grid-template-rows:  auto 1fr;
	column-gap: 1em;
	width: 100%;
	height: 100%;
	grid-auto-rows: auto;
}
#page-group-navigation {
	grid-column-start	: 1; 
	grid-column-end	: 2; 
	grid-row-start	: 1; 
	grid-row-end	: 3; 
	background-color	: aliceblue;
	overflow		: scroll;
}
.page-group-header {
	grid-column-start	: 2; 
	grid-column-end	: 3; 
	grid-row-start	: 1; 
	grid-row-end	: 2; 
	background-color	: aliceblue;
	margin-right		: 2em;
	text-align		: center;
}
#page-group-content {
	grid-column-start	: 2; 
	grid-column-end	: 3; 
	grid-row-start	: 2; 
	grid-row-end	: 3; 
	margin-right		: 2em;
}
#page-group-navigation ul {
	margin-right: 1em;
	list-style-type: none;
	margin: auto;
	padding: 1em;
}
 
#page-group-navigation li, .nav-arrows { text-align: center;  }
#page-group-navigation li:not(:last-child) { margin-bottom: .75em; }

p#choose {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 200%;
}