/* Base Theme Variables */
:root {
  /* values from 2015 contract app
  --color-main: #1a3a68;
	--color-accent: #d2232a;
	--color-light-1: #eeeeff;
	--color-light-2: #eeeeee;
	--color-medium: #6688bb;
	--color-text: #222222;
  */
  --color-main: #d2232a;
	--color-accent: rgb(164, 30, 39);
	--color-accent: #1a3a68;
	--color-light-1: #eeeaf0;
	--color-light-2: #eeeeee;
	--color-medium: #668899;
	--color-text: #222222;
  --menu-font: 'Open Sans', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
	--display-font:	'Liberation Sans Narrow',
					'Gill Sans MT Condensed',
					sans-serif;
	--body-font:	Georgia, 
					serif;
	--font-scale: 1.2;
	--text-size-0: 18px;
	--text-size-1: calc( var(--text-size-0) * var(--font-scale) );
	--text-size-2: calc( var(--text-size-1) * var(--font-scale) );
	--text-size-3: calc( var(--text-size-2) * var(--font-scale) );
	--text-size-4: calc( var(--text-size-3) * var(--font-scale) );
	--text-size-5: calc( var(--text-size-4) * var(--font-scale) );
	--text-size-6: calc( var(--text-size-5) * var(--font-scale) );
	--text-size-sm: calc( var(--text-size-0) / var(--font-scale) );
        --text-size-tiny: calc(var(--text-size-sm)/var(--font-scale) );
	--underline-shadow: 1px 1px 1px white, -1px 1px 1px white, 2px 1px 1px white, -2px 1px 1px white, 1px -1px 1px white, -1px -1px 1px white, 2px -1px 1px white, -2px -1px 1px white;
}
body {
	font-size: 21.6px;
	font-size: var(--text-size-1);
	color: var(--color-text);
	margin:0;
	padding:0;
        max-width:100vw;
        box-sizing:border-box;
}

p {
	margin: 1em 0 1em 0;
	padding: 0;
}

.chunk {
  white-space: nowrap;
}

/* Top Header: Menus, etc. */
body>header {
	display:block;
	width: 100%;
	position:fixed;
	z-index:2;
	left:0;
	top:0;
	margin:0 auto 1em auto;
	box-sizing:border-box;
}
@media screen and (max-width:599px) {
  header nav {
    width: 100vw;
  }
}
header nav {
	display:block;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
  height:70px;
  background: -webkit-linear-gradient(bottom,rgba(164, 30, 39,0),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1)); /*Safari 5.1-6*/
  background: -o-linear-gradient(top,rgba(164, 30, 39,0),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1)); /*Opera 11.1-12*/
  background: -moz-linear-gradient(top,rgba(164, 30, 39,0),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1)); /*Fx 3.6-15*/
  background: linear-gradient(to top, rgba(164, 30, 39,0),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1),rgba(164, 30, 39,1)); /*Standard*/
}
header nav ul {
	display:flex;
	flex-direction: row;
	width:100vw;
  max-width: 100%;
	margin:0;
	padding:0;
	list-style-type:none;
	border-bottom: 3px solid var(--color-main);
}
header nav ul li a:hover, header nav ul li a:focus {
  border: 3px dotted var(--color-accent);
}

header nav ul li {
	display:flex-item;
	flex-grow:1;
	margin:0;
	padding:0;
  text-align:center;
}
header nav ul li:not(:first-child) {
  border-left:1px solid #ddddee;
}
header nav ul li a {
	display:inline-block;
	box-sizing:border-box;
	width:calc(100% - 2px);
	padding:5px 10px;
	vertical-align:middle;
	text-decoration:none;
	outline: 1px solid var(--color-light-2);
	//border-top:  1px solid var(--color-main);
	font-family: var(--menu-font);
	font-weight:normal;
	line-height: var(--text-size-5);
	background: var(--color-light-1);
	color: var(--color-main);
	font-size: var(--text-size-3);
	min-height:60px;
        border: 3px dotted var(--color-light-1);
}


/* Overall Main and Articles */
main {
	width: 100vw;
	max-width:600px;
	margin: 1.5em auto;
        border-top:36px solid var(--color-main);
	box-sizing:border-box;
	font-size: var(--text-size-1);
  overflow-x: visible;
}

/* Article block styles */
article {
  display:block;
  min-height: 100vh;
	padding: calc(50px + 1em) 0 1em 0;
	border-top:1px solid var(--color-light-2);
  border-top:5px solid var(--color-accent);
	max-width:600px;
	width: calc(100vw - 30px);
  overflow-x: visible;
	position:relative;
	z-index:1;
	margin: -75px auto 0 auto;
  box-sizing:border-box;
}
article::after {
	content: ' ';
	display:block;
	clear:both;
}

/* Article content standards */
section, article p, article li {
	font-family: var(--body-font);
	font-size: var(--text-size-1);
	line-height: var(--text-size-3);
  margin-top: var(--text-size-1);
}
article li::marker {
	font-family: var(--display-font);
  font-weight: bold;
}
section::after {
	content: ' ';
	display:block;
	margin:1.4em;
}
h2 + section, 
h3 + section {
  margin-top:1em;
}
h1 {
	font-family: var(--body-font);
	font-weight: normal;
	font-size: var(--text-size-4);
}
h2, h1.level1, h1.level2, 
p .num,
li .num,
h2 .num, 
h3 .num  {
	font-family: var(--display-font);
	font-weight:bold;
}
p + h3::before {
  content: " ";
  display:block;
  height: 0.3em;
}
h1.level1 {
	margin-top:1em;
	font-size: var(--text-size-3);
	text-transform: uppercase;
}
h1.level1 span {
	display:block;
	width: calc(100vw - 20px);
	max-width:600px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}
h2 .num, 
h1.level1 .num {
	font-size: var(--text-size-1);
}
h1.level2 {
	font-size: var(--text-size-2);
	display:table;
	margin: 1em 0;
	color: var(--color-text);
}
h1.level2 .num {
	display:table-cell;
	white-space:nowrap;
	text-align:left;
}
h1.level2 .title {
	display: table-cell;
	margin:0;
	text-indent:0;
	padding-left:0.5em;
	text-shadow: var(--underline-shadow);
}
h2, h3 {
	font-family:var(--body-font);
	font-size: var(--text-size-1);
	font-weight:normal;
	display:inline;
	margin:0 0 -0.4em 0;
}
h2 .title {
	display:inline;
	text-shadow: 2px 2px white, -2px 2px white, 2px -2px white, -1px -1px white, 1px 1px white, -1px 1px white, 1px -1px white, -1px -1px white;
        box-shadow: inset 0 -0.05em 0 0 #fff, inset 0 -0.1em 0 0 #333333;
}
h2 + p, h3 + p {
  display:inline;
}
h3 .title {
	font-weight:normal;
	font-style:italic;
	text-decoration:none;
}
.level6 {
	padding-left: 1.5em;
	box-sizing:border-box;
}
h4 {
  font-family: var(--display-font);
}
section .content,
section .content p:first-child {
	display:inline;
}
section.level4 {
  margin-left: 1.6em;
}
li:marker {
  font-family: var(--display-font)
}
ol.upper-alpha-list {
	list-style-type: upper-alpha;
	font-weight:bold;
	font-family: var(--display-font);
}
ol.upper-alpha-list ol li,
ol.upper-alpha-list ul li,
ol.upper-alpha-list>li {
	font-weight:normal;
	font-family: var(--body-font)
}
.parensDecimalParens {
  margin-top:0;
  padding-top:0;
  counter-reset:dec;
}
.parensDecimalParens>li {
  counter-increment:numbers;
}
.parensDecimalParens>li::marker {
  content:"(" counter(numbers) ") ";
}
.parensLowerAlphaParens {
  margin-top:0;
  padding-top:0;
  counter-reset:letters;
}
.parensLowerAlphaParens>li {
  counter-increment:letters;
}
.parensLowerAlphaParens>li::marker {
  content:"(" counter(letters,lower-alpha) ") ";
}


/* Blockquote Special Case */
blockquote {
	display:block;
	margin:1em;
	clear:both;
}
blockquote>ol>li,
blockquote>ol>li>ol>li>ol>li {
	font-family: var(--display-font);
}
blockquote h2, 
blockquote h3, 
blockquote h4 {
	font-size: 1em;
}
blockquote h3, 
blockquote h4,
blockquote>ol>li>ol>li,
blockquote>ol>li>ol>li>ol>li p,
blockquote>ol>li>ol>li>ol>li ul {
	font-family: var(--body-font);
	font-weight: normal;
}

/* Breadcrumbs */
nav.breadcrumb {
	margin-top:2em;
}
nav.breadcrumb ol {
	list-style-type: none;
	display:table;
	padding:0;
	margin:0;
}
nav.breadcrumb ol li {
	display:table-cell;
	font-family: var(--display-font);
}
article nav.breadcrumb ol li:first-child {
	white-space:nowrap;
}
nav.breadcrumb ol a {
	font-size: var(--text-size-0);
	
}
nav.breadcrumb ol+ol {
	margin: 0 0 1em 0;
	float:right;
	text-align:right;
}
nav.breadcrumb ol:nth-child(2) + h4 {
	clear:both;
}

/* TOC of child articles in top level articles */
.toc {
  border-collapse: collapse;
  border: 0.5em solid var(--color-light-1);
  background:var(--color-light-1);
  width: 100%;
}
.toc caption {
  margin:1.3em 0 0 0;
  text-transform:uppercase;
  padding:20px 20px 12px;
  color:white;
  font-weight:bold;
}
tr {
  width:100vw;
  max-width:600px;
  white-space:normal;
}
.toc tr, .toc td {
  padding:.5em;
  border:none;
  vertical-align:top;
}
.toc a {
  display:inline-block;
  width:100%;
}
.toc td.num {
  text-align:right;
  width: 20px;
  max-width: 3em;
  white-space: nowrap;
}



/* WILL NEED REVISION PROBABLY */
/* tables in .content */
 table:not(.toc), table.tablesaw {
	font-family: var(--display-font);
	font-size: var(--text-size-0);
	border-collapse: collapse;
	border: 1px solid var(--color-text);
	font-weight:normal;
}
 table:not(.toc) td, table.tablesaw td {
	border: 1px solid var(--color-text);
  padding: 3px 6px;
}
table.tablesaw-row-zebra tr:nth-child(2n) {
  background: var(--color-light-2)
}
 table:not(.toc) th:not(:last-child), table.tablesaw th:not(:last-child)  {
	border: 1px solid var(--color-text);
}
 table:not(.toc) thead th, table.tablesaw thead th {
	background: var(--color-text);
	color: var(--color-light-2);
	margin:0;
	border: 1px solid var(--color-text);
  vertical-align: bottom;
}
 table:not(.toc) thead th:not(:last-child), table.tablesaw thead th:not(:last-child) {
	border-right: 1px solid var(--color-light-2);
}
 table:not(.toc) thead tr:not(:last-child) th, table.tablesaw thead tr:not(:last-child) th {
	border-bottom: 1px solid var(--color-light-2);
}
 table:not(.toc) p, table.tablesaw p {
	font-family:var(--display-text); 
	font-size:var(--text-size-0); 
	line-height: 1.3em
}

/* Footnote tables */
table.fn {
  border: none;
  margin: 1.6em 0;
}
table.fn th[scope="row"] {
  font-family: var(--display-font);
}
table.fn th[scope="row"],
table.fn td {
  vertical-align: top;
  border: none;
  padding: 0.6em .6em 0 0;
  font-size: var(--text-size-0);
  font-family: var(--display-font);
  line-height: var(--text-size-1);
}
table.fn caption {
  text-align: left;
  font-family: var(--display-font);
  font-size: var(--text-size-1);
  font-weight: bold;
}

/* Search Form */
#searchForm {
  padding-top:50px;
}
#searchForm label {
  font-family: var(--menu-font);
}
#searchButton, #searchBox {
  display:inline-block;
}
#searchBox {
  font-size: var(--text-size-3);
  width:100%;
}
#searchResults {
  padding-left:0;
}
#searchResults li {
  font-size: var(--text-size-sm);
  line-height: var(--text-size-0);
  list-style-type:none;
  margin: 1em 0;
  padding: 0.3em 0.7em;
  box-sizing: border-box; 
  background: var(--color-light-2);
}
#searchResults h4 {
  font-size: var(--text-size-1);
  line-height: var(--text-size-2);
  margin: 0.2em 0 0.2em 0;
}
#searchResults div {
    font-family: var(--display-font);
    font-size: var(--text-size-tiny);
}

/* Prev and Next Navigation (per-article) */
article footer nav {
	width: 100%;
	max-width:600px;
	margin:0 auto;
	overflow-y:hidden;
	overflow-x:visible;
//	padding: 20px 0 0 0;
//  	border-top-left-radius: 30px;
//	border-top-right-radius: 30px;
}
article footer nav ol{
	display:flex;
	flex-direction: row;
	width:100vw;
	max-width:100%;
	margin:0;
	padding:0;
	list-style-type:none;
//	box-shadow: 0 0 30px var(--color-medium);
}
article footer nav li{
	display:flex-item;
	flex-grow:1;
	margin:0;
	padding:0;
	width:50%;
	vertical-align:middle;
	border: 1px solid var(--color-medium);
}
article footer nav a {
	display:inline-block;
	box-sizing:border-box;
	width:100%;
	padding:5px 10px;
	vertical-align:middle;
	text-decoration:none;
	font-family: var(--display-font);
	font-size: var(--text-size-1);
	font-weight:normal;
	line-height: 30px;
	background: var(--color-main);
	color: var(--color-light-2);
        min-height: 24px;
        border: 3px dotted var(--color-main);
}
article footer nav li:last-child {
	text-align:right;
}

footer nav li a:hover, footer nav li a:focus {
  border: 3px dotted var(--color-accent);
}

/* Site footer */
body > footer {
	background: var(--color-light-1);
	color: var(--color-text);
	box-sizing: border-box;
	vertical-align:top;
	width: 100vw;
	max-width:600px;
	padding: 1em 1em 3em 1em;
	margin: 1em auto 0 auto;
        border-top: 1px solid var(--color-light-2);
	// margin-top: calc( 3 * var(--text-size-6) ) 
	}
body > footer p {
	font-family: var(--display-font);
	font-size: var(--text-size-sm);
	line-height: var(--text-size-0);
	font-style: italic;
	font-weight:normal;
	text-align:center;
}

/* Leader lists */
ul.leaders {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none}
ul.leaders li:before {
    float: left;
    width: 0;
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "}
ul.leaders span:first-child {
    padding-right: 0.33em;
    background: white}
ul.leaders span + span {
    float: right;
    padding-left: 0.33em;
    background: white}


/* Makes #id scroll not go all the way to the top but stay under header navs */
section, a.anchor {
  position: relative;
}
span.anchor {
  display: block;
  position:absolute;
  top: -120px;
}

/* FROM PREVIOUS APP VERSION - WILL LIKELY REMOVE */
App-like hiding of non-target articles. To test visibility in case :target isn’t supported erase this close-comment and the one above navs 
@keyframes pulse {
	0% { transform: scale(1) }
    50% { transform: scale(1.05) }
    100% { transform: scale(1) }
}
@keyframes fade-in {
	0% { opacity: 0}
	100% {opacity: 1}
}
article {
	display:none;
	}
article:last-of-type,
article:last-of-type footer nav {
	display:block;
}
article:last-of-type footer {
	animation:none;
	display:block;
	width: 100%;
	bottom:0;
	min-height:30px;
	position:fixed;
	left:0;
	bottom:0;
	margin: 1em 0 0 0;
}

article{
	display:block;
	//min-height:calc(  (100vw + 90px) + ( 2 * var(--text-size-3) )  );
        min-height: 100vh;
}
article * {
	animation: fade-in 0.25s linear 1;
}
article ~ article {
    display: none;
}
/* DELETE THIS WHEN SEARCH IS WORKING
#searchForm {
  display:none;
}
/* Prev-Next Navs revealed on targeting for app behavior. To test visibility in case :target isn't supported erase this close-comment and the one above navs  
article footer * {
	animation:none;
}
article footer nav {
	display:block;
}
article footer {
	animation:none;
	display:block;
	width: 100%;
	bottom:0;
	min-height:30px;
	position:fixed;
	left:0;
	bottom:0;
	margin: 1em 0 0 0;
}