/* ------------------------------------------------------------------------------------ */
/* Default document styles 																*/
/* ------------------------------------------------------------------------------------ */
body {
	font-family: 					Cambria, Palatino, Baskerville, Georgia ;
	font-size: 						1.2rem ;
	font-weight: 					150 ;
	text-align: 					justify ;
 	text-align-last: 				left ;
	line-height: 					1.75 ;
	padding: 						0 ;
	margin: 						0 ;
	border:							0 ;
}

/* ------------------------------------------------------------------------------------ */
/* default styles 																		*/
/* ------------------------------------------------------------------------------------ */
pre {
	background-color: 				#eee ;
	border-radius: 					4px ;
	padding: 						1rem ;
}

p {
	margin-bottom:					1rem ;
	margin-top:						0 ;
}

p:last-child {
	margin-bottom:					0 ;
}

img	{
	border-radius: 					8px ;
	border:							thin dotted #871410 ;
	display:						block ;
}

/* ------------------------------------------------------------------------------------ */
/* global links 																		*/
/* ------------------------------------------------------------------------------------ */
a:link, a:visited, a:active {
	text-decoration:				none ;
	font-style:						italic ;
	color:							#871410 ;
}

a:hover {
	text-decoration:				underline ;
}

/* ------------------------------------------------------------------------------------ */
/* Headings 																			*/
/* ------------------------------------------------------------------------------------ */
h1 {
	font-family:					verdana ;
	font-weight: 					400 ;
	font-size:						2rem ;
	border-top:						none ;
	margin-top:						0 ;
	color: 							#871410 ;
	overflow:						hidden ;
	border-bottom:					thin dotted #871410 ;		
}

em {
	font-style: 					italic ;
	font-weight: 					200 ;
	color: 							#871410 ;	
}

/* ------------------------------------------------------------------------------------ */
/* H2 Header replacement 																*/
/* ------------------------------------------------------------------------------------ */
.h2section {						/* H2 replacement */
	font-family:					verdana ;
	font-weight: 					350 ;
	border-top:						thin dotted #871410 ;
	color: 							#871410 ;
	margin:							0 0 0.5em 0 ;
	overflow:						hidden ;
	display:						block ;
	}

	.h2title {						/* H2 title section */
		font-size:					1.5rem ;
		float:						left ;
	}

	.h2link {						/* Link on H2 section line */
		font-size:					0.8rem ;
		float:						right ;
	}

.h2title > a {						/* links in H2 title section */
	font-style: 					normal;
}

.h2link > a:active {				/* active links in H2 links */
	font-style: 					italic;
}

/* ------------------------------------------------------------------------------------ */
/* images 																				*/
/* ------------------------------------------------------------------------------------ */
.imagenote {						/* notes under images */
	font-size:						0.9rem ;
	color:							#871410 ;
	margin-bottom:					0.5rem ;
	text-align: 					left ;
}

.imagenote > a {					/* links in imagenode class */
	font-style: 					normal ;
	text-decoration: 				underline;
}

.right-image {						/* image on right of page */
	float:							right ;
	margin-left:					2rem ;
	width:							350px ;
}

.left-image {						/* image on left of page */
	display:						inline-block ;
	float:							left ;
	margin-right:					2rem ;
	width:							350px ;
}

/* ------------------------------------------------------------------------------------ */
/* Links section 																		*/
/* ------------------------------------------------------------------------------------ */
.links {							/* links box */
	display:						flex ;
	background: 					#eee ;
	border-radius: 					8px ;
	border:							thin dotted #871410 ;
	padding-left: 					1rem ;
}

.links > ul > li {					/* link entry <li> tag */
	font-size: 						0.9rem ;
	line-height: 					1.5 ;
	list-style-type: 				"🌐" ;
	padding-inline-start: 			1ch;
}

li > a:active {						/* links in <li> tags */
	font-style: 					italic;
}

/* ------------------------------------------------------------------------------------ */
/* default page layout grid 															*/
/* ------------------------------------------------------------------------------------ */
.pagegrid {							/* page body class */
	display: 						grid ;
	grid-template-columns: 			1fr minmax(0,1200px) 1fr ;	
	grid-template-rows: 			62px 1.5em 1fr 100px ;
	grid-template-areas: 			'header' 'navigation' 'main' 'footer' ;
	height: 						100vh ;
	width: 							100vw ;
	gap:							0 ;
}

.header {							/* page header */
	grid-area: 						header ;
	grid-column: 					2 ;
	background-image:				url("/images/header.png") ;
	text-align:						right ;
 	text-align-last: 				right ;	
}

.menubutton {						/* menu button in header */
	top:							0 ;
	padding-right:					1rem ;
	font-size:						1.8rem ;
	color:							#fff ;
	font-weight:					bold ;
}

.menubutton > span {				/* menu button mouse cursor */
	cursor:							pointer ;
}

.navigation {						/* navigation bar */
	grid-area: 						navigation ;
	font-size: 						0.8rem ;
	grid-column: 					2 ;
	border-bottom: 					thin dotted #871410 ;
 	background-color: 				#fff ;
 	font-style:						italic ;
}

.navigation > a:active {
	font-style: 					italic ;
}

.main {								/* main body of page between navigation/footer */
	grid-area: 						main ;
	grid-column: 					2 ;	
	margin-bottom:					1rem ;
}

.pageblock {						/* block of content */
	display:						inline-block ;
	margin-bottom:					1rem ;
	padding:						0 ;
	width:							100%
}

.footer {							/* footer */
	grid-area: 						footer ;
	grid-column: 					2 ;
	border-top: 					thin dotted #871410 ;
	margin-bottom:					1rem ;
}

.copyright {						/* copyright message style */
	float:							left ;
}

.flinks {							/* footer links style */
	float:							right ;
	font-size:						1em ;
}

.flinks > a:active {				/* footer active link style */
	font-style: 					italic;
}

/* ------------------------------------------------------------------------------------ */
/* page grid, small with heading column													*/
/* ------------------------------------------------------------------------------------ */
.front-grid {						/* small page list, used on main page/galleries etc */
	display:						grid ;
	gap:							0 ;
	grid-template-columns: 			140px 1fr;
	grid-template-rows: 			auto ;
	grid-template-areas: 			'title' 'bodyentry';
	border-top:						thin dotted #871410 ;
	margin-bottom:					1rem ;
}

.front-title {						/* class for title */
	grid-area: 						title ;
	border-right: 					thin dotted #871410 ;
	grid-column: 					1 ;
	grid-row:						1 / 99 ;
	margin-top:						1em ;	
	font-style:						italic ;
	color:							#871410 ;
	margin-left: 					1rem ;
}

.body-entry {						/* page list section */
	grid-area: 						bodyentry ;
	grid-column: 					2 ;
	grid-row:						auto ;
	margin-top:						1rem ;
	margin-left:					1rem ;
	margin-right:					1rem ;
}


.front-grid > .body-entry > a > img {	/* image in page list section */
	float:							left ;
	margin-right:					1rem ;
}

/* .front-grid > .body-entry > a {
	font-weight:					bold ;
}
*/
/* ------------------------------------------------------------------------------------ */
/* section menu, nested grid 															*/
/* ------------------------------------------------------------------------------------ */
.menu-grid {						/* 7 cell menu on main page only */
	display:						grid ;
	grid-template-columns: 			repeat(7, minmax(0,1fr)) ;
	gap:							1rem ;
	font-size:						0.9rem ;
	font-weight: 					450 ;
	margin-bottom: 1em;
}

	.menu-entry {					/* menu cell */	
		background-color: 			#eee ;
		border-radius: 				4px ;
		border: 					thin dotted #871410 ;
		display: 					flex ;
		align-items: 				center;
		justify-content: 			center;
		font-family:				verdana ; 
	}


.menu-entry > a {					/* links in menu cell */
	font-style: normal ;
}

/* ------------------------------------------------------------------------------------ */
/* gallery menu, nested grid 															*/
/* ------------------------------------------------------------------------------------ */
.gallery-grid {						/* gallery images */
	display:						grid ;
	grid-template-columns: 			repeat(3, minmax(0,1fr)) ;
	gap:							1em ;
	font-size:						0.9rem ;
	font-weight: 					450 ;

}

.gallery-image {					/* gallery image cell */
	display:						inline-block ;
	border-radius: 					4px ;
}

.gallery-image img {				/* images in gallery cells */
	width: 							100% ;
	border: 						thin dotted #871410 ;	
}

.gallery-image a:active {			/* links in image notes in this grid */
	font-style: 					italic ;
}

/* ------------------------------------------------------------------------------------ */
/* gallery sections, nested grid, used on all gallery sub pages 						*/
/* ------------------------------------------------------------------------------------ */
.gallery-section-grid {
	display:						grid ;
	grid-template-columns: 			repeat(3, minmax(0,1fr)) ;
	gap:							1em ;
	text-align: 					center ;
	font-size:						0.9rem ;
	font-weight: 					450 ;
	margin-bottom:					1em ;
}

.gallery-section-grid > div {
	background-color: 				#eee ;
	border-radius: 					4px ;
	border: 						thin dotted #871410 ;
	display: 						flex ;
    align-items: 					center;
    justify-content: 				center;
    font-family: 					verdana ;
}

.gallery-section-grid > div:hover a, .gallery-section-grid > div:hover {
	color: 							#fff ;
	background-color: 				#871410 ;
}

.gallery-section-grid a:link, a:visited, a:active {
	text-decoration: 				none ;
	color: 							#871410 ;
    font-style:						normal ;	
}

/* ------------------------------------------------------------------------------------ */
/* notes 																				*/
/* ------------------------------------------------------------------------------------ */
.note {
	display:						grid ;
	grid-template-rows: 			auto ;
	grid-template-columns: 			50px 1fr ;
	gap:							1rem ;
	background-color:				#eee ;
	margin-left:					5rem ;
	margin-right:					5rem ;
	padding:						1rem ;
	border-radius: 					8px ;
	border: 						thin dotted #871410 ;	
}

.note pre {
	margin-top: 					1rem ;
	margin-bottom: 					1rem ;
	margin-left: 					0 ;
	margin-right: 					0 ;
	padding: 						0 ;
	overflow-x: 					auto ;
}

.note icon {
	vertical-align: 				top ;
}

/* ------------------------------------------------------------------------------------ */
/* gallery menu, nested grid 															*/
/* ------------------------------------------------------------------------------------ */
.gallery-index-grid {
	display:						grid ;
	grid-template-columns: 			repeat(4, minmax(0,1fr)) ;
	gap:							1rem ;
	font-size:						0.9rem ;
	font-weight: 					450 ;
	margin-bottom:					1rem ;
}

.gallery-index-grid .menu-entry {
	background-color: 				#eee ;
	border-radius: 					4px ;
	border: 						thin dotted #871410 ;
	display: 						flex ;
    align-items: 					center;
    justify-content: 				center;
}

/* ------------------------------------------------------------------------------------ */
/* side navigation menu 																*/
/* ------------------------------------------------------------------------------------ */
.sidenav {
  	height: 						100%;
  	width: 							0;
  	position: 						fixed;
  	z-index: 						1;
  	top: 							0;
  	left: 							0;
  	background-color: 				#111;
  	overflow-x: 					hidden;
  	padding-top:					60px;
  	transition: 					0.5s; 
}

.sidenav a {
  	padding: 						8px 8px 8px 32px;
  	text-decoration: 				none;
  	font-size: 						1rem;
  	color: 							#818181;
  	display: 						block;
  	transition: 					0.3s;
}

.sidenav a:hover {
  	color: 							#fff;
}

.sidenav .closebtn {
  	position: 						absolute;
  	top: 							0;
  	right: 							25px;
  	font-size: 						36px;
  	margin-left: 					50px;
}

@media screen and (max-height: 450px) {
  	.sidenav {padding-top: 15px;}
  	.sidenav a {font-size: 18px;}
}