p { line-height: 1.5em; }


/* Some basic flexbox defaults */
.FlexBox {
	display: flex;
	flex-flow: row wrap;
	/* row spacing */
	justify-content: space-around;
	/* vertical alignment */ 
	align-items: center;
	/* vertical spacing ?????? don't even know */ 
	/*align-content: space-around;*/
}
.FlexBox > * {
	flex: 1 1 auto;
}



/* These rules set the base font size for the page.
width <= 200                 font size is 12px
width > 200 AND width < 1000 font size will scale from 12 to 16 px
width => 1000                font size is 16px
*/
html { font-size: calc( 12px + ( 16 - 12 ) * ( 100vw - 200px ) / ( 1000 - 200 ) ); }
@media ( max-width: 200px ) { html { font-size: 12px; } }
@media ( min-width: 1000px ) { html { font-size: 16px; } }



/*** Header */

header {
	background-color: #531A31;
	
	border-width: 0 0 3px;
	border-style: solid;
	border-color: #000;
}

/* Menu link styling */
header a { color: #FFF; text-decoration: none; }
header a:hover { color: #E6E67A; }

/* We don't want the top box to wrap, that's it's point*/
#headerTopBox { flex-wrap: nowrap; }

/* The logo box needs a white background to match the logo image */
#logoBox {
	background-color: #FFF;
	padding: 1em 2em;
	text-align: center;
}

#logoBox img {
	width: calc( 100% - 10vw );
	max-width: 542px;
	max-height: 39px;
}

#menuSwitch {
	padding: .3em 1em;
}

#menuBox {
	flex-wrap: nowrap;
	text-align: center;
	white-space: nowrap;
	padding: .3em 0;
}

#menuBox a {
	padding: 0 1em;
}

/*** Narrow width  menu settings */

@media ( max-width: 600px ) {
	
	#menuBox { display: none; padding: 0; }
	#menuBox.showMenu { display: block }
	#menuBox a {
		display: block;
		border-color:#631f3b;
		border-style:solid;
		border-width:0 0 1px;
		padding: .3em 1em;
	}
		
}

@media ( min-width: 601px ) {
	#menuSwitch { display: none; }
}



/*** Basic Page Formatting */

.Page {
	max-width: 1000px;
	margin: 0 auto;
	padding: 1.5em 0;
}

#breadcrumbs a { color:#777; text-decoration:none; }
#breadcrumbs a:hover { text-decoration:underline; }
#breadcrumbs .Break { color:#777; padding: 0 .5em; }


.TextBox { max-width: 30em; margin: 1em 2em; }

.ImageBox * { display: block; }

.ImageBox .ImageBoxLiner {
	margin: .5em 1em;
	padding: .2em;
	border: 1px solid #FFF;
}

.ImageBox a { text-decoration: none; color: #000; }
.ImageBox a.ImageBoxLiner:hover { border-color: grey; }
.ImageBox a.ImageBoxLiner:focus { border-color: #FFF; }

.ImageBox img { margin: 0 auto; width: 100%; }
.ImageBox a:not(img),
.ImageBox span { text-align: center; padding-top: .5em; }

.Gallery { justify-content: space-evenly; }

/* As long as the image box contains any text, such as a label, the flex box item will expand to fill any space given,
 * so if we want the border to wrap tighter around the image / label we need to specify a width
 */
 /*
.Gallery > .ImageBox { max-width: calc( 1000px / 5 ); }
@media ( max-width: 999px ) and ( min-width: 801px ) { .Gallery > .ImageBox { max-width: calc( 100vw / 5 ); }}
@media ( max-width: 800px ) and ( min-width: 601px ) { .Gallery > .ImageBox { max-width: calc( 100vw / 4 ); }}
@media ( max-width: 600px ) and ( min-width: 401px ) { .Gallery > .ImageBox { max-width: calc( 100vw / 3 ); }}
@media ( max-width: 400px ) { .Gallery > .ImageBox { max-width: calc( 100vw / 2 ); }}
*/

.Gallery > .ImageBox img { width: auto; }

/* The width of the boxes are well established, flex-grow will only expand the clickable area of a portrait image into surounding white space */
.Gallery > .ImageBox { flex-grow: 0; } 

/* Landscape ImageBoxes have an explict width, this will sxpand / shrink the landscape image fit that width. */ 
.Gallery > .ImageBox.landscape img { max-width: 100%; }

/* We hardcode the number of columns the gallery has to the view window */
/*.Gallery > .ImageBox { max-width: calc( 1000px / 5 ); }*/
.Gallery > .ImageBox.landscape img { max-width: calc( 1000px / 5 ); }

/* This constrains portrait images to a max height which matches the max width of a landscape image
 * We find this size by takeing the column calc from directly above then subtract the margin / border / padding of any other surrounding elements.
 * In this care it's just the link surrounding it.
 * This is important especially for images near square but slightly taller, they will near match a near sqare but slightly wider.
 */  
/*.Gallery > .ImageBox.portrait img { max-height: calc( 1000px / 5 - 2.4em - 2px ); }*/
.Gallery > .ImageBox.portrait img { max-height: calc( 1000px / 5 ); }

/* Now we carry those styles into the different column breakpoints */
/*
@media ( max-width: 999px ) and ( min-width: 801px ) {
	.Gallery > .ImageBox { max-width: calc( 100vw / 5 ); }
	.Gallery > .ImageBox.portrait img { max-height: calc( 100vw / 5 - 2.4em - 2px ); }
}
@media ( max-width: 800px ) and ( min-width: 601px ) {
	.Gallery > .ImageBox { max-width: calc( 100vw / 4 ); }
	.Gallery > .ImageBox.portrait img { max-height: calc( 100vw / 4 - 2.4em - 2px ); }
}
@media ( max-width: 600px ) and ( min-width: 401px ) {
	.Gallery > .ImageBox { max-width: calc( 100vw / 3 ); }
	.Gallery > .ImageBox.portrait img { max-height: calc( 100vw / 3 - 2.4em - 2px ); }
}
@media ( max-width: 400px ) {
	.Gallery > .ImageBox { max-width: calc( 100vw / 2 ); }
	.Gallery > .ImageBox.portrait img { max-height: calc( 100vw / 2 - 2.4em - 2px ); }
}
*/
@media ( max-width: 999px ) and ( min-width: 801px ) {
	.Gallery > .ImageBox.landscape img { max-width: calc( 100vw / 5 ); }
	.Gallery > .ImageBox.portrait img { max-height: calc( 100vw / 5 ); }
}
@media ( max-width: 800px ) and ( min-width: 601px ) {
	.Gallery > .ImageBox.landscape img { max-width: calc( 100vw / 4 ); }
	.Gallery > .ImageBox.portrait img { max-height: calc( 100vw / 4 ); }
}
@media ( max-width: 600px ) and ( min-width: 401px ) {
	.Gallery > .ImageBox.landscape img { max-width: calc( 100vw / 3 ); }
	.Gallery > .ImageBox.portrait img { max-height: calc( 100vw / 3 ); }
}
@media ( max-width: 400px ) {
	.Gallery > .ImageBox.landscape img { max-width: calc( 100vw / 2.75 ); }
	.Gallery > .ImageBox.portrait img { max-height: calc( 100vw / 2.75 ); }
}


/*** Gallery Styling */
.pswp__share-tooltip a.pswp__share--facebook { display: none; }
.pswp__share-tooltip a.pswp__share--twitter { display: none; }
.pswp__share-tooltip a.pswp__share--pinterest { display: none; }


/*** Footer styling */

#socialFooter { text-align:center; }
#socialFooter a { display:inline-block; margin:0 .75em; padding: .125em; text-decoration:none; border:1px solid transparent; }
#socialFooter a:hover { border:1px solid #777; border-radius:0.2em; background-color: #EEE; }
#socialFooter img { display:block; vertical-align:top; }

#copyright { text-align:center; font-size:60%; color:#999; }