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

Grays
-----
Standard gray	#3D484E	Text; nav-bar; Bram-fake-sc
Dark gray	#181C1F	News headers
Medium gray	#677A84	Notes; block quotes; captions; thick lines (header underlines; table header borders)
Light gray	#94AFBE	Thin lines (table borders; nav-bar submenu borders)
White		#FFFFFF	Nav stuff

Header colors
-------------
Header slate	#2A6889
Header lt-gray	#AECAD9	Header divider lines
Title slate	#173A4C	Page titles; used only in Inkscape. RGB values are 23, 58, 76.

Greens
------
Dark green	#0D4D1A	Nav active
Light green	#16802B	Nav current
Extra-dk green	#51915E	Link underlines
Extra-lt green	#70B17D	Link underlines

Special
-------
Faded dark-grn	#5E9168	Nav-bar separator (mobile only)
Extra-lt gray 1	#ABC9DA	Form button hover
Extra-lt gray 2	#D4E1E8	Form button neutral/active
Extra-lt gray 3	#DEEAF0	Nav-bar submenu header backdrop
Extra-lt gray 4	#F0F6FA	Nav-bar submenu backdrop; entire nav-bar menu backdrop in mobile
Blue		#086494	Alerts

Not used
--------
Old dark gray	#293034	Sub-headers (piece titles, news date headers, contact page fields)
Old hdr lt-gray	#BCCFDA	Header divider lines - worked better when I was using Lato, which was lighter than Quattrocento
Medium green	#147327	Nav hover
*/



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

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

body{
	margin:0px;border:0px none;padding:0px;
	background:#FFFFFF url('images/general/body_bg.jpg') no-repeat;
	text-align:left;
	}

article{
	font-family:'Quattrocento-sans-regular';
	font-size:0.96em;line-height:1.35;letter-spacing:-0.02em;
	color:#3D484E;
	}

article p{margin-bottom:1.1em;}

h1,h2,h3,h4,h5,h6{margin:0px;font-family:'Crimson-semibold';font-weight:normal;color:#2A6889;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.png');}
li{margin-left:-1em;}

a{text-decoration:none;}
article a:link{color:#16802B;}
article a:visited{color:#16802B;}
article a:hover{color:#0D4D1A;border-bottom:1px #51915E solid;}
article a:active{color:#16802B;border-bottom:1px #70B17D solid;}

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

nav li{margin:0px;padding:0px;}
nav li.nav_link{color:#3D484E;} /* Basic link color */

nav a,nav a:link,nav a:visited,nav a:hover,nav a:active{color:inherit;} /* if I specify #3D484E here instead, it overrides highlighted links for some reason */

nav a,nav label.nav_responsive_submenu_toggle{
	display:block;
	width:100%; /* These need to be in A, not LI, or the LIs overlap for some reason*/
	line-height:1;
	text-transform:uppercase;
	}



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

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

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

	div#nav_container{
		position:fixed;top:0px;left:0px;
		width:100%;height:48px;
		z-index:2;
		background-color:#0D4D1A;
		}
	nav{
		display:none;
		position:absolute;top:48px;left:0px;
		border-bottom:1px #94AFBE solid;
		padding:4px 0px;
		background-color:#F0F6FA;
		}

	nav a,nav label.nav_responsive_submenu_toggle{
		height:40px; /* These need to be in A, not LI, or the LIs overlap for some reason*/
		padding:12px 9px 0px 9px;
		font-family:'Quattrocento-sans-regular';
		font-size:1em;
		}

	nav a:active{color:#FFFFFF;background-color:#16802B;}
	nav li>ul{display:none;}
	nav li>ul>li>a{padding-left:30px;} /* Indent by 24px, but it already has 6px worth of padding */

	input[type=checkbox]:checked+nav{display:block;}
	input[type=checkbox]:checked+ul{display:block;}
	div#nav_container label{cursor:pointer;}

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

	.nav_responsive_remove{visibility:hidden;}
	.nav_responsive_submenu_toggle{position:absolute;margin-top:-39px;} /* I can't remember why this is (height of nav entry) - 1. Also, no z-index needed and I think it's because of nav_responsive_remove{visibility:hidden;} - no need to bump above them anymore */
	.nav_responsive_checkbox{position:absolute;top:-999px;left:-999px;opacity:0;}

	nav li.nav_sub_menu_header{display:none;} /* Hides nav-bar sub-menu descriptive headers on mobile */

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

	body{background-position:-174px 48px;}

	header{
		z-index:1;
		width:100%;
		margin-top:48px;
		display:flex;flex-flow:row nowrap;justify-content:center;
		height:120px; /* Height of 120px provides 0px distance beneath the white line */
		}

	header>a{position:relative;display:block;flex:0 0 279px;top:30px;height:60px;}

	article{z-index:1;width:100%;}

	}

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

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

	nav{width:100%;}

	div#article_format{padding:0px 12px 24px 12px;}

	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{width:230px;}

	div#article_format{padding:0px 24px 36px 24px;}

	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 ---------------- */

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

	nav{position:absolute;top:132px;left:12px;width:170px;}

	nav li.nav_link:hover{color:#FFFFFF;background-color:#0D4D1A;}
	nav a:active{color:#FFFFFF;background-color:#16802B;}

	nav a,nav label.nav_responsive_submenu_toggle{
		height:28px; /* These need to be in A, not LI, or the LIs overlap for some reason*/
		padding:9px 6px 0px 6px;
		font-family:'Quattrocento-sans-bold';
		font-size:0.8em;
		letter-spacing:0.06em;
		}

	nav a#nav_current{color:#FFFFFF;background-color:#16802B;pointer-events:none;cursor:default;}

	nav li>ul{
		display:none;
		position:absolute;z-index:2;
		width:170px;margin-top:-33px;margin-left:170px;
		border-top:1px #94AFBE solid;border-bottom:1px #94AFBE solid;padding-bottom:4px;
		background-color:#DEEAF0;
		}

	nav li:hover>ul{display:block;}

	nav li.nav_sub_menu_header{
		padding:6px;
		font-size:0.8em;line-height:1;
		font-family:'Crimson-regular';font-style:italic;
		color:#677A84;background-color:#F0F6FA;
		}

	div#nav_container input,div#nav_container label,.nav_responsive_appear{display:none;}

	nav li>ul>li:nth-of-type(2){display:none;} /* Hides duplicate links, which only exist for mobile nav categories */

	header{position:absolute;top:30px;left:194px;}

	article{position:absolute;top:120px;right:0px;bottom:0px;left:194px;overflow:auto;}
	article>div#article_format{position:absolute;width:574px;padding:12px 0px 24px 0px;overflow:hidden;}

	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;}

	}



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

.italic{font-style:italic;}
.notitalic{font-style:normal;}
.bold{font-family:'Quattrocento-sans-bold';}

span.superscript{display:inline-block;font-size:60%;vertical-align:top;padding:1px 0px 0px 1px;} /* Superscript */
.sc{font-size:80%;line-height:1;text-transform:uppercase;} /* nailed it */
.sc_all{font-size:80%;line-height:1;text-transform:uppercase;} /* what */
a>span.sc{color:inherit;}
.uc{text-transform:uppercase;}

.acronym{
	-webkit-font-feature-settings:"onum" 1,"pnum" 1,"smcp" 1,"c2sc" 1;
	-moz-font-feature-settings:"onum" 1,"pnum" 1,"smcp" 1,"c2sc" 1;
	-ms-font-feature-settings:"onum" 1,"pnum" 1,"smcp" 1,"c2sc" 1;
	font-feature-settings:"onum" 1,"pnum" 1,"smcp" 1,"c2sc" 1;
	}

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

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

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

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

ul.qa{list-style-type:none;list-style-image:none;margin:0px;padding:0px;}
ul.qa>li.qa_q{margin-bottom:0em;margin-left:0px;font-weight:bold;}
ul.qa>li.qa_a{margin-bottom:1.35em;margin-left:0px;}

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



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

h1{font-family:'Crimson-bold-sc';font-size:2em;line-height:1.15;} /* Only for header text */

h2#page_title{
	margin-top:18px;
	/* border-bottom:1px #677A84 solid; */ /* Old */
	}

h3{ /* Standard content header */
	margin-top:1.5em;margin-bottom:0.67em;
	border-top:1px #AECAD9 solid;
	padding:1.5em 0px 6px 0px;
	font-family:'Crimson-regular-sc';
	font-size:1.5em;line-height:1;
	letter-spacing:-0.01em;
	}

h4{margin-top:2.4em;margin-bottom:-0.33em;font-family:'Crimson-semibold';font-size:1.15em;} /* Standard content subheader */

h3+p.caption,h4+p.caption{margin-top:0.25em;} /* for that rare captioned-margin */

h2+h3,h2+h4{margin-top:1em;border-top:0px none;padding-top:0em;} /* for headers that start a page beneath the page title */
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.center_note{
	margin-top:4em;margin-bottom:2em;
	font-size:0.625em;line-height:1.15;
	color:#677A84;
	}

.jump_to{font-family:'Quattrocento-sans-bold';}
.alert{font-family:'Quattrocento-sans-bold';color:#086494;}
.no_display{display:none;}