@import url(shared.css);

body {
	background-color: var(--azure-90);
}

iframe {
	margin: 0;
	padding: 0;
	border: none;
	height: 100%;
	width: 100%;
}

section {
	position: relative;
}

main.container {
	display: grid;
	grid-template-columns: 10px 1fr 10px;
	grid-template-rows: auto 1fr 10px;
	height: 100%;
	overflow: hidden;
}

.grid-1_2 {
	grid-row: 1;
	grid-column: 2 / span 1;
}

.grid-2_2 {
	grid-row: 2;
	grid-column: 2 / span 1;
}

.book-select {
	width: 12em;
}

.chapter-next {
	width: 11em;
}

div.information-buttons {
	position: absolute;
	top: 1em;
	right: .5em;
}

div.copyright {
	position: absolute;
	bottom: .5em;
	right: .5em;
}

/* Overlay area */
nav.fill, div.fill {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: var(--azure-99);
}

/* position:absolute overrides display:grid 
   We need a second container for the nav */
div.nav-content {
	display: grid;
	grid-template-columns: 1fr auto auto 1fr;
	column-gap: 1em;
	grid-template-rows: 2em 1fr;
	height: 100%;
}

div.nav-content-1 {
	grid-column: 2 / span 1;
	grid-row: 2;
}

button.light.book {
	width: 10em;
}

div.nav-content-2 {
	grid-column: 3 / span 1;
	grid-row: 2;
}

button.light.chapter {
	width: 2.5em;
}

/* 
 *	Information, Options areas 
 */
/* Buttons at top left */
div.centered {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	max-width: 55em;
	height: 100%;
	border-left: .25em solid var(--azure-85);
	border-right: .25em solid var(--azure-85);
}

div.scroll-y {
	height: 100%;
	padding: 0 1em;
	overflow-x: hidden;
	overflow-y: scroll;
}

button.information {
	font-size: 100%;
	font-weight: 500;
	width: 7.5em;
}

button.light.close {
	position: absolute;
	top: .5em;
	right: -6em;
	z-index: 2;
	font-size: 100%;
	font-weight: 500;
	width: 5em;
}

/*
 * For morphology info, which is embedded
 */
iframe.morphology {
	height: 50%;
	padding: 3px 0;
	border: 1px solid var(--azure-85);
}

div.morphology {
	margin-left: auto;
	margin-right: auto;
	max-width: 55em;
	height: 100%;
	padding: 0 .5em;
	overflow-y: scroll;
}

table {
	display: inline-block;
	vertical-align: text-top;
	margin: .2em;
}

table, caption, th, td {
	padding: .2em;
}

caption {
	text-align: center;
	font-weight: 600;
}

th {
	font-weight: 500;
}