/* ================ Colors ================

Core definitions, brown
-----------------------
221D18		Brown, dark and slightly desaturated - text
9B8978		Lightest text brown (based on 221D18) - captions
664B2E		Brown, burnished - subheaders

8C7E6F		Light grayish brown: lines

Core definitions, white
-----------------------
FFFFFB		Standard off-white

Core definitions, blue
----------------------
172B64		Dark blue: Navigation base color; (failsafe header color)
3F5594		Dark blue: Navigation base highlight

354B88		Mid-dark blue: navigation hover; versal/drop capitals!
6275AE		Mid-dark blue: navigation hover highlight
3954A2		Mid-dark blue: H3 (based on 354B88)

5A6EA7		Mid-range blue: links; active links
7D8EBD		Mid-range blue: hovered links

5C71AE		Mid-light blue: navigation active
8798C8		Mid-light blue: navigation active highlight

Special definitions, blue
-------------------------
97A6D2		Mobile nav bar background
7686B5		Mobile nav bar lines (based on 97A6D2)
4666C1		Alert color

Parchment
---------
CDBA9E		Dark-parchment - header border
F6E3C7		Light parchment - contact form button
F9EEDE		Lightest parchment - contact form button hover

Sources
-------
Sampled brown	705A43

*/



/* ================ Common definitions ================ */

html{box-sizing:border-box;}
*,*:before,*:after{box-sizing:inherit;}

body{
	margin:0px;border:0px none;padding:0px;
	background-color:#FFFFFB;
	text-align:left;
	}

article,div#contact,div#website_credit{
	background-color:#FFFFFB;
	font-family:'TeX_Gyre_Pagella-regular';
	font-size:1em;line-height:1.25;letter-spacing:-0.02em;
	color:#221D18;
	}

article p{margin-bottom:1.1em;}

div#contact p{margin-bottom:-0.75em;}

/*h1,h2,h3,h4,h5,h6{margin:0px;font-family:'Source_Sans_Pro-light';line-height:1.15;font-weight:normal;color:#172B64;clear:both;}NOT SANS SERIF ANYMORE!*/
h1,h2,h3,h4,h5,h6{margin:0px;line-height:1.15;font-weight:normal;color:#172B64;clear:both;}

table{border-collapse:collapse;}
table,tr,th,td{margin:0px;border:0px none;padding:0px;}
th,td{vertical-align:top;text-align:left;}

ul{list-style-image:url('images/general/bullet_point.png');}
li{margin-left:-1em;}

a{text-decoration:none;}
article a:link,div#contact a:link{color:#5A6EA7;}
article a:visited,div#contact a:visited{color:#5A6EA7;}
article a:hover,div#contact a:hover{color:#7D8EBD;}
article a:active,div#contact a:active{color:#5A6EA7;}

nav, nav a{display:block;}

nav{
/*	font-family:'Source_Sans_Pro-light';font-size:1em;*/
	font-family:'TeX_Gyre_Pagella-regular-SC';font-size:1.03em;
	color:#FFFFFF;
	}
nav a,nav a:hover,nav label.nav_mobile_submenu_toggle:hover,nav a:active,nav label.nav_mobile_submenu_toggle:active,nav a:visited{color:inherit;}

nav ul{list-style-type:none;list-style-image:none;margin:0px;padding:0px;}
nav li{display:block;margin:0px;padding:0px;}



/* ================ Page elements: media-responsive ================ */

/* ---------------- Phone and tablet screens: navigation... ---------------- */

@media only screen and (max-width:768px){

	nav{
		position:fixed;top:0px;left:0px;right:0px;z-index:1;
		height:48px;
		background:url('images/general/nav_mobile_background.png') 0px 0px repeat-x;
		}

	nav>ul{
		display:none;
		position:absolute;top:48px;left:0px;
		padding:0px;
		background-color:#97A6D2;
		opacity:0.96;
		}

	nav a,nav label.nav_mobile_submenu_toggle{
		/* More definitions in "Common definitions," above */
		display:block;
		height:40px; /* These need to be in A, not LI, or the LIs overlap for some reason*/
		border-bottom:1px #7686B5 solid;
		padding:10px 9px 0px 9px;
		}

	nav a:active,nav label.nav_mobile_submenu_toggle:active{background-color:#5C71AE;}

	nav input[type=checkbox]:checked+ul{display:block;}
	nav label{cursor:pointer;}
	nav>ul>li>ul{display:none;}
	nav>ul>li>ul a{padding-left:18pt;}

	#nav_mobile_main_toggle{float:left;width:48px;height:48px;background:url('images/general/nav_mobile_menu.png') no-repeat 0px 0px;}

	nav input[type=checkbox]{position:fixed;top:-999px;left:-999px;opacity:0;}

	nav li.submenu_header>a{display:none;} /* On desktop, each main-level entry IS a link, as well as a hover. Those links need to be hidden on mobile so only the category headers remain. */

/* ---------------- ... and other ---------------- */

	body{}

	div#struct_outer{
		display:grid;
		width:100%;margin:0px;border:0px none;padding:0px;
		grid-template-columns:auto;
		grid-template-rows:auto auto auto auto auto auto;
		grid-gap:0px 0px;
		justify-content:stretch;align-content:stretch; /*alignment of cells, first x, then y */
		justify-items:stretch;align-items:stretch; /* alignment within cells, first x, then y */
		}

	div#mobile_header_painting{grid-column:1/2;grid-row:2/3;}
	header{grid-column:1/2;grid-row:3/4;}
	nav{grid-column:1/2;grid-row:1/2;}
	article{grid-column:1/2;grid-row:4/5;}
	div#contact{grid-column:1/2;grid-row:5/6;}
	div#website_credit{grid-column:1/2;grid-row:6/7;}

	article,div#contact,div#website_credit{justify-self:center;width:100%;max-width:606px;} /* Justify-Self seems to override Justify-Items on the parent! 606px = 558px (the text width of articles in desktop) + 24px + 24px padding. */
	article{padding:0px 24px;}
	div#contact{padding:0px 24px 64px 24px;}
	div#website_credit{padding:0px 24px 64px 24px;}

	div#mobile_header_painting{
		height:168px; /* 126pt */
		/* margin-top:48px; /* to clear the navigation bar */
		background:url('images/general/boulogne_concert.jpg') center center no-repeat;
		background-size:100%;
		background-position:center 22%;
		}

	}

/* ---------------- Phone screens only ---------------- */

@media only screen and (max-width:480px){

	nav>ul{width:100%;}

	div.article_image{width:100%;margin:5px 0px 8px 0px;}

	}

/* ---------------- Tablet screens only ---------------- */

@media only screen and (min-width:481px) and (max-width:768px){

	nav>ul{width:216pt;}

	div.article_image{width:30%;}
	div.article_image:nth-of-type(odd){float:right;margin:5px 0px 8px 16px;}
	div.article_image:nth-of-type(even){float:left;margin:5px 16px 8px 0px;}

	}

/* ---------------- Desktop screens (all): navigation... ---------------- */

@media only screen and (min-width:769px){

	nav{
		position:relative;
		background:url('images/general/nav_desktop_background.png') 0px 0px repeat-x;
		}

	nav>ul{width:100%;height:100%;margin:0px;border:0px none;padding:0px;}

	/* -------- Main-level navigation -------- */
	nav>ul{display:flex;flex-flow:row nowrap;justify-content:left;}
	nav>ul>li{
		flex:1 0 auto;
		position:relative; /* Relative positioning allows submenu ULs' absolute positioning to act relative to their parent LIs */
		}

	/* -------- Sub-level navigation -------- */
	nav>ul>li>ul{position:absolute;display:none;}
	nav>ul>li:hover>ul{
		display:block;
		z-index:2; /* The video iframes cover up the drop-down menus! */
		width:180pt;left:-1px;top:27pt;
		background-color:#172B64;
		border:1px #CDBA9E solid;border-top:0px none;
		}

	nav a{
		height:27pt; /* These need to be in A, not LI, or the LIs overlap for some reason*/
		padding-top:4pt;
		text-align:center;
		}

	nav a:hover{background:url('images/general/nav_desktop_hover.png') 0px 0px repeat-x;}
	nav a:active{background:url('images/general/nav_desktop_active.png') 0px 0px repeat-x;}

	nav a.nav_current{color:#FFFFFF;background:url('images/general/nav_desktop_active.png') 0px 0px repeat-x;pointer-events:none;cursor:default;}

	nav input,nav label{display:none;}

/* ---------------- ... and other ---------------- */

	div.article_image{width:30%;}
	div.article_image:nth-of-type(odd){float:right;margin:5px 0px 8px 16px;}
	div.article_image:nth-of-type(even){float:left;margin:5px 16px 8px 0px;}

	div#mobile_header_painting{display:none;}

	}

/* ---------------- Desktop screens - narrower ---------------- */

@media only screen and (min-width:769px) and (max-width:1088px){

	body{
		display:flex;flex-flow:row nowrap;justify-content:center;
		background-color:#FFFFFB;
		}

	body::after{ /* Allows for background image; obnoxious to use a pseudo-element on body, of all things, but legitimate and it works */
		content:"";
		position:absolute;top:0px;left:0px;width:100%;
		height:408px; /* Header on all desktops is 108px high; on narrow desktops, I want 198pts, or 264px, above it; nav bar is 36px high. Background image has to span all of these, which sums to 408 px. */
		z-index:-1; /* Without this, the thing covers up the nav bar! I wonder why. The nav is specified after the body in the HTML, after all. Hmm. */
		background-image:url('images/general/boulogne_concert.jpg');
		background-size:cover;
		background-position:left -72px; /* specify x direction (columns), then y direction (rows) */
		background-repeat:no-repeat;
		}

	div#struct_outer{
		flex:0 0 558px; /* 769px - 16px, to account for scrollbar, and - 96 - 96 for aesthetics, yielded 561px. Aesthetic experiments with wider desktop resulted in 558, nearly equal, so I'm using that value here. */
		display:grid;
		width:100%;margin:0px;border:0px none;padding:0px;
		grid-template-columns:auto;
		grid-template-rows:auto auto auto auto auto;
		grid-gap:0px 0px;
		justify-content:stretch;align-content:stretch; /*alignment of cells, first x, then y */
		justify-items:stretch;align-items:stretch; /* alignment within cells, first x, then y */
		}

	header{grid-column:1/2;grid-row:1/2;}
	nav{grid-column:1/2;grid-row:2/3;}
	article{grid-column:1/2;grid-row:3/4;}
	div#contact{grid-column:1/2;grid-row:4/5;}
	div#website_credit{grid-column:1/2;grid-row:5/6;}

	article{padding:24px 0px 0px 0px;}

	div#contact{padding-bottom:64px;}

	div#website_credit{padding-bottom:48px;}

	}

/* ---------------- Desktop screens - wider ---------------- */

@media only screen and (min-width:1089px){

	body{display:flex;flex-flow:row nowrap;justify-content:center;}

	div#struct_outer{
		flex:0 0 1024px;
		display:grid;
		width:100%;margin:0px;border:0px none;padding:0px;
		grid-template-columns:274px 750px;
		grid-template-rows:auto auto auto auto;
		grid-gap:0px 0px;
		justify-content:stretch;align-content:stretch; /*alignment of cells, first x, then y */
		justify-items:stretch;align-items:stretch; /* alignment within cells, first x, then y */
		background-image:url('images/general/boulogne_concert.jpg');
		background-size:contain;
		background-position:left -60px; /* specify x direction (columns), then y direction (rows) */
		background-repeat:no-repeat;
		}

	header{grid-column:2/3;grid-row:1/2;}
	nav{grid-column:2/3;grid-row:2/3;}
	article{grid-column:2/3;grid-row:3/4;}
	div#contact{grid-column:1/2;grid-row:3/4;}
	div#website_credit{grid-column:2/3;grid-row:4/5;}

	article{padding:32px 96px;}

	div#contact{
		height:180px;
		position:relative;top:160px;
		padding-top:32px;
		border-bottom:1px #8C7E6F solid;
		}

	div#contact>h3{
		font-family:'TeX_Gyre_Pagella-bold-SC';
		font-size:1.25em;
		margin-top:0px;margin-bottom:1em;padding:0px;
		background:none;
		}

	div#website_credit{margin-bottom:48px;padding:0px 96px;}

	}



/* ================ Content - general ================ */

.italic{font-style:italic;}
.not_italic{font-style:normal;}
.bold{font-family:'TeX_Gyre_Pagella-bold';}

span.superscript{display:inline-block;font-size:60%;vertical-align:top;padding:1px 0px 0px 1px;}
.sc{font-family:'TeX_Gyre_Pagella-regular-SC';font-size:1.03em;}
.sc_all{font-family:'TeX_Gyre_Pagella-regular-SC';font-size:1.03em;text-transform:lowercase;}
.acronym{font-family:'TeX_Gyre_Pagella-regular-SC';font-size:1.03em;text-transform:lowercase;}
.sc_bold{font-family:'TeX_Gyre_Pagella-bold-SC';font-size:1.03em;}
/*XXXXXXZZZZZZa>span.sc{color:inherit;}*/
.uc{text-transform:uppercase;}
img.bullet_point{padding:0px 2px 1px 2px;}

/* OLD
span.drop_cap{
	display:inline-block;float:left;
	position:relative;top:-7px;
	height:80px;width:86px;margin:0px;padding:0px;
	font-family:'ATF_1923_Caslon_Initials';font-size:4.67em;text-transform:uppercase;
	}
*/

span.drop_cap{
	display:inline-block;float:left;
	position:relative;top:-15px;
	height:60px;width:70px;margin:0px;padding:0px;
	font-family:'Zallman_Caps';font-size:4.25em;text-transform:uppercase;
	color:#354B88; /* Mid-dark blue */
	}

.note{font-size:0.8em;line-height:1.15;}
.caption{font-size:0.8em;line-height:1.15;font-style:italic;}
p.blockquote{margin:1em 4em;}
.center{text-align:center;}

/* Video */
div.video_container{
	position:relative;
	width:100%;height:0px;
	padding-bottom:56.25%;
	overflow:hidden; /* The overflow property only works on block elements with a specified height. */
	}
div.video_container>iframe,div.video_container>object,div.video_container>embed{
	position:absolute;top:0px;left:0px;
	width:100%;height:100%;
	}

/* Pictures */
div.article_image>img,div.article_full_image>img{width:100%;}
div.article_image>p.caption{margin:0px;}
div.article_full_image{width:100%;}

/* Lists */
ul.half_space>li{margin-bottom:0.625em;}
ul.full_space>li{margin-bottom:1.25em;}

ul.complex_entries{list-style-type:none;list-style-image:none;margin:0px;padding:0px;}
ul.complex_entries>li{margin-bottom:1em;margin-left:0px;}

/* Tables */
table.leaded td{padding-bottom:1em;}

.no_display{display:none;}



/* ================ Headers ================ */

h1{font-family:'TeX_Gyre_Pagella-bold';font-size:2em;} /* Only when website title is displayed as rendered text*/

h2{ /* Standard page header */
	margin-top:24px;margin-bottom:1em;
	font-family:'TeX_Gyre_Pagella-regular-SC';
	font-size:1.75em;
	letter-spacing:-0.5pt;
	text-align:center;
	}

h3{ /* Standard content header */
	margin-top:40px;margin-bottom:0.67em;
	padding-top:46px; /* Determined by sight. The dash is 8px high, so this should be 48px, but it looks odd, probably because of whitespace incorporated in the typeface. */
	background:url('images/general/ornamental_dash.png') center 0px no-repeat;
	font-family:'TeX_Gyre_Pagella-regular-SC';font-size:1.545em; /* Standard small caps is 1.03 em. The header is supposed to be 1.5 ems, so this is 3/2 the size of the standard. */
	color:#3954A2;
	}

h4{ /* Standard content subheader */
	margin-top:3em;margin-bottom:1em;
	text-transform:uppercase;letter-spacing:0.25pt;
	color:#664B2E;
	}

h3+p.caption,h4+p.caption{margin-top:0.25em;} /* for that rare captioned header, or, rather, headered caption (!) */

h2+h3,h2+h4{margin-top:2em;} /* for headers that start a page beneath the page title */
h2+h3{padding-top:0px;background:none;}

h2+p,h2+div.article_image{margin-top:0.5em;padding-top:0em;} /* for paragraphs (or article images) that start a page beneath the page title */



/* ================ Special texts and content ================ */

div#website_credit{font-size:0.625em;line-height:1.15;color:#9B8978;}
div#website_credit p{margin:0.5em 0em;}

article.finial>p:last-of-type::after{
	content:url('images/general/paragraph_finial.png');
	position:relative;
	top:2px;left:6px;
	}

.alert{font-family:'Source_Sans_Pro-bold';color:#4666C1;}
.no_display{display:none;}