/* ================================================================================== */
/*                                                                                    */
/*                                  STYLE-HEADERS.CSS                                 */
/*                                                                                    */																 
/* ================================================================================== */

/* Head blocks, 36px high */

/*
section {			in style-page-breaks.css
	padding-top:80px;
	}
*/

header, .header-div, .header-div-full-page, .header-div-no-margin {	/* header { */
	margin:0 auto 24px auto;
	height:auto;
	min-height:30px;	/* 2019/11 changed from fixed height 48px */
	border-bottom:1px dotted #888;
	page-break-inside: avoid;	/* mPDF may not like this */
	break-inside: avoid;		/* mPDF may not like this */
	}
	
.online #maps header,
.app #maps header {
	height:36px;	/* to fit in menubar */
	}

.full-page header, .full-page .header {
	color:white;
	border:none;
	}

#quick-start .full-page header {	/* For quick-start */
	padding-top:18px;
	padding-bottom:8px;
	text-align:center;
	border-bottom:1px dotted rgba(255,255,255,0.5);
	}

.header-div-full-page {
	padding-top:24px;
	border:none;
	}

.header-div-no-margin {
	margin-bottom:0;
	}

body > header, article > header, article > section:first-child > header {
	border-bottom:1px solid black;
	}


/* Header headlines */

header + h1, header + h2, header + h3, header + h4, header + h5, header + h6,
header + figure > h1, header + figure > h2, header + figure > h3, header + figure > h4, header + figure > h5, header + figure > h6 {
	margin-top:0.667rem;
	}

h1.header, h2.header, h3.header, h4.header, h5.header, h6.header {
	position:relative;
	margin:0;
	top:-2px;
	font-size:19px;	/* 2011/19 was font-size:32px; */
	line-height:26px;
	padding-bottom:2px;
	}

@media (min-width:360px) {
h1.header, h2.header, h3.header, h4.header, h5.header, h6.header {
	font-size:22px;	/* 2011/19 was font-size:32px; */
	line-height:30px;
	}
}

@media (min-width:500px) {
h1.header, h2.header, h3.header, h4.header, h5.header, h6.header {
	font-size:24px;	/* 2011/19 was font-size:32px; */
	line-height:32px;
	}
}

@media (min-width:640px) {
h1.header, h2.header, h3.header, h4.header, h5.header, h6.header {
	font-size:26px;	/* 2011/19 was font-size:32px; */
	line-height:35px;
	}
}

@media (min-width:840px) {
h1.header, h2.header, h3.header, h4.header, h5.header, h6.header {
	font-size:28px;	/* 2011/19 was font-size:32px; */
	line-height:40px;
	}
}

@media (min-width:1024px) {
h1.header, h2.header, h3.header, h4.header, h5.header, h6.header {
	font-size:30px;	/* 2011/19 was font-size:32px; */
	line-height:42px;
	}
}

h2.header {
	margin-top:12px;
	}
	
h2.header.margins {		/* fudge for map, where map is browser width but header is in margin */
	margin-left:12px;
	margin-right:auto;
	}

@media (min-width:1024px) {
	h2.header.margins {
		margin-left:auto;
	}
}

h3.header, h4.header, h5.header, h6.header {
	font-size:24px;
	}

.full-page h1.header  {
	padding-left:5%;
	top:4px;
	text-align:center;
	}

header > h3 {
	margin:0;
	font-size:18px;
	line-height:24px;
	}

header > h4 {
	margin:0;
	font-size:16px;
	line-height:22px;
	}

.header-byline, .header-aside {
	display:none;
	position:relative;
	top:-30px;
	margin:0;
	padding:0;
	height:0;
	font-family:'Source Sans Pro',arial;
	font-size:0.9em;
	}

@media (min-width:420px) {
.header-byline, .header-aside {
	display:block;
	}
}

.location .headline h1 {
	margin-top:0;
	}

header + p, header + section > p, header + ul, header + section > ul {
	margin-top:1rem;
	}
	

/* Header aside (top-right) */

header aside {
	float:none;	/* Cancel out column */
	margin:0;
	padding:0;
	border:none;
	width:100%;	
	position:relative;	/* Required to keep above h3 if h3 is relative */	
	height:0;
	text-align:right;
	margin-top:-20px;	/* Make same as .header font-size */
	font-size:12px;
	line-height:12px;
	color:#888;
	white-space: pre-line;	/* avoids wrapping lines */
	display:none;
	}

header aside a {
	display:inline-block;
	color:#888;
	height:32px;
	padding: 0 0 0 24px;
	display:none;
	}

header aside a:hover {
	cursor:pointer;	
	}

.guide-breadcrumbs, .guide-breadcrumbs a {
	color:#888;
	margin:0.5rem 0 0.75rem 0;
	text-decoration:none;	/* this is a link */
	/*margin:0.5rem 0 0.75rem 0;*/
	}
	
.guide-breadcrumbs a:hover {
	color:black;
	}