/* quick testing goes heres */

debug.fflex-item:beforee {
  content: "To do -- make this a percentage until a small size, then wrap -- maybe make this a min-width? how to make it fill before wrapping" ;
  color: purple;
}


div.nth-2 	{
		background-color: #efefef;
		border-top: .1rem solid #666 !important;
		} 




/* updated january 2022 -- be sure to only edit within the section's focus: color, spacing, text styling, or ol-li numbering */

/* 1. Enable smooth scrolling PAGE LEVEL Enable smooth scrolling PAGE LEVEL   */
html {
	scroll-behavior: smooth;
}

div#skipTo {display: none;}


/* 2.Javascript related css  ScrollSpy active styles  Javascript related css  */
.section-nav li.active > a, .section-nav li.active  {
  background-color: #ffefc0;
}


.section-nav li.active  a, .section-nav li.active  {
  color: black;
}



.section-nav a {
	transition: all 50ms ease-in-out; /* 💡 This small transition makes setting of the active state smooth */
}




/* 0.  Font families  Font families  Font families  and line space for text  ---------------- */

html {						font-family: "IBM Plex Sans" 
}


body 			{	
							text-rendering: optimizeLegibility;
							-webkit-font-smoothing: antialiased;
}

main > nav ol,
main > nav ul  {			font-family: "Be Vietnam Pro";
							}
							
main > nav ol li,
main > nav ul li  {			padding-bottom: .2rem;

							}						
nav.section-nav { 			/*  section-nav is needed to make sticky work */ 
							}

ul.ul-sticky-sidenav-style {
							list-style: none;
							}
							
ul.ul-sticky-sidenav-style li {
							padding: .3rem;
							font-size: .9rem;
							margin: .1rem;
							}
							
ulul-sticky-sidenav-style  li:after {
							}
							
ul.ul-sticky-sidenav-style li:last-child:after {
							}							


ul.ul-sticky-sidenav-style li a {
							text-decoration: none;
							}	
ul.ul-sticky-sidenav-style li a:hover {
							text-decoration: underline;
							}	
ul.ul-toc-style li {
							display: inline; 
							white-space:nowrap;
							}
							
ul.ul-toc-style li:after {
							content: " • "
							}
ul.ul-toc-style li:last-child:after {
							content: "  "
							}							

footer	{					/* font-size: 1.2 rem !important; 
							padding: 2rem; */
							margin-top: 3rem;
							
							}

main > nav  h2  {			font-size: 1.5rem;
							color: #666
							 }
							 
header p  {					line-height: 125%;
							border: 0px solid purple;
							margin: .5rem auto;
							font-size: 1.1rem;
							padding: 0.2rem auto;
					}
					
header p.inline  {			line-height: 125%;
							align-items: flex-start;
							border: 0px solid red;
							padding: 0.2rem auto;
  							justify-content: flex-end;
  							
  							}

h1 {						font-size: 2rem
	}
															
h2 {						font-size: 1.5rem
					}

											 
h1, h2, h3, h4			{
							font-weight: semi-bold;
							font-family: "IBM Plex Sans"; /* font-family: 'Source Serif Pro', serif;*/
							color: orangered;
							box-sizing: border-box;
							}
							
h2.flex-item-full.text-center {
							padding-top:2rem;
							font-size: 2rem;
							}
	

.tight-leading {
							padding: .5rem auto;
							line-height: 100%;
							margin: 0.2rem auto;
							margin-top:  .8rem;
						}		
.tight-leading *  {
							padding: .5rem auto;
							line-height: 100%;
							margin: 0.2rem auto;
							margin-top:  .8rem;
							}

							
h2.tight-leading a {		color: orangered;
							text-decoration: none;
							}

h2.tight-leading a:hover {	color: firebrick;
							text-decoration: underline;
							}
							
							
h3.tight-leading +  ul {
							padding: .25rem auto;
							line-height: 100%;
							margin: 0rem auto;
							padding: 0rem auto;
							padding-inline-start: .2rem;
							
						}		
						
							
							
p {							line-height: 145%;
							border: 0 px solid purple;
					}
p.callout {
							color: darkslategray;
							border: 0px solid pink;
							font-weight: 600;
							font-style: italic;
							margin: 0rem;
							width: 100%;
							}	
														

p.byline, p.second-deck,
span.byline, span.second-deck {
							color: darkslategray;
							border: 0px solid pink;
							font-weight: 600;
							margin: 0rem;
							width: 100%;
							font-size: 1.2rem;
							}	
							

					
p.date  {					font-size: .9em; 
							color: #665 
							}
p.post-meta {	}
p.legaltext {	}

p.sidenote {			
							font-color: darkslategray; 
							font-family: "IBM Plex Serif";	 
							font-style:italic;	 
							}
span.running-time {
							color: #666;
							font-size: .9rem;
							font-weight: normal;
							white-space:nowrap;
							}	
span.running-time:after {
							}		

div.abstract.subtraction a,
a.abstract	{
							text-decoration: none; /* 2022-04 */
							}
							

							
div.abstract.subtraction a:hover,
a.abstract:hover {
							text-decoration: underline;  /* 2022-04 */
							}		
							
					
caption, 
p.caption, 
figcaption {				
							font-family:"IBM Plex Serif" !important 
							font-weight: normal; /* bold; */
							} 	

time			{ /* dt-published */ 				}

time.dt-published {		}

																				
p.flex-item-full.text-center {
							padding-bottom: 1rem;
							font-size: 1.4rem;
							}
							
.flex-item 			{		color: #333;
							line-height: 140%;
							}


.story-title {				font-size: 110% important; font-weight: bold; }
.story-date {				color: slateblue !important}
.text-center {				text-align: center;	}
.story-title.clip 	{		display: none	} /* hide some things the story is a clip */ 
.story-date.clip {			display: none } /* hide some things the story is a clip */ 


b 		 {					font-weight: 600; }
u { 						text-decoration: underline; }
italic {					font-style: italic		}


.lotsaleading {		line-height: 150%;
					}



/* hyperlinks */
.section-nav a {			padding: .125rem 0; }


/* 1b.  Wraps in flex   ----------------  Wraps in flex   ----------------  * Wraps in flex   ---------------- / Wraps in flex   ----------------  */
h1, h2, h3, h4			{
							width: 100%; /* make it wrap in flex */ 
}

caption, 
p.caption, 
figcaption {				
							display: block; 
							width: 100%;
} 	


img {
  							max-width: 100%;
  							align-self: center;
}

img.align-self {
							align-self: center;
}
									
									
									
									
/* tags  --- use the tags element for semantic reasons, for parsing, for schema     -------------------------------             */
/* then add the .inline to dictate inline vs block  */

tags {		
				border: 0px solid green; 
				/* width: 100%; */ 
				padding: 0; margin: auto .5rem;
				}
div.tags  {							
				border: 0px solid pink; 
				display: inline;
				padding: 0px; margin: 0px;
				}
span.tags  {							
				border: 0px solid orange; 
				display: inline;
				}
				
				
/* not needed 					

tagsZ.inline {		
				border: 1px solid purple; 
				display: inline;
				padding: auto; margin: auto;
				width: auto;
				}

			 
tagsZ ul , .tagsZ ul,
ul.inline.tags {
				display: flex;
				margin: 0px;
				border: 1px solid orange; 
				padding: 0em;
				}
							
tagsZ ul  li , .tagsZ ul  li,
ul.inline.tags li  {
				border: 0px dotted blue;
				display: inline;
				padding: 0;
				margin: 0;
				/* background-color: #ffcc33;/*
				}

END  Not needed */
							


/* 1. Layout and padding Margins for the flexie Layout and padding Margins for the flexie  Layout and padding Margins for the flexie  Layout and padding Margins for the flexie   */



-----


html {				margin: 0rem;  }
body {				margin: 0rem; }

main {		/* main--> nav + content*/
					display: flex;
					width: 100%;
}

main.blogpost {		/* main--> nav + content -- somehow this needs a div.wrapper*/
					border: 0px solid red;
					display: flex;
					justify-contents: center;
					margin: auto auto;
					width: 90%; /* give a little space left and right */ 
}
					
main > nav.section-nav  {	 /* must have this class designation, which is annoying to me */
				align-self: start;
				border: 0px solid orange !important;
				box-sizing: border-box;
				flex-grow: 1;
				margin-left: 1.2rem;		
				margin: 0rem;
				padding: 0rem;		
				position: sticky;
				top: 2rem;
				width: 20%;
}
				
main > content {
				align-self: start;
				border: 0px solid red;
				box-sizing: border-box;
				flex-grow: 1;
				margin: 0 1rem;
				padding: 0 2rem;
				width: 65%;
}


main > content > section { /* used for multi-section pages like the annotated references */
				border: 0px solid purple;
				box-sizing: border-box;
				flex-grow: 1;
				padding: 0 2rem;
				align-self: start;
}

header { 	/* -- no flex -- no clear if I need a legit header  -- this used in several places */ 
					border: 0rem solid beige;
					display: flex;
					flex-wrap: wrap;
}

	
	

div.flex-container,
.flex-container {	
					-ms-box-orient: horizontal;
					border: 0px dotted blue !important;
					box-sizing: border-box;
					display: -moz-box;
					display: -moz-flex;
					display: -ms-flexbox;
					display: -webkit-box;
					display: -webkit-flex;
					display: flex; 
					list-style: none;
					margin: 0;
					padding: 0;
					width:  100%;
}					


div.no-flex-container {
				flex-direction: column;
}

div.flex-container.wrap.clips { /* ? when is this used? */
				border-bottom:  2rem solid #efefef; /* separates the divider */
				padding: 2rem 2rem;
}


/* end horizontal flex divs  and banner  -- -- -- -- -- -- -- -- -- -- -- -- -- */
.flex-item-full {	box-sizing: border-box;
					height: auto;
					margin: auto;
					width: 100%;  /* once this turns into a percentage it will stop wrapping, duh */
					}
					

.flex-item {
					border: 0px dotted slategray; /* home page items in the flex-wide horizontal row */
					box-sizing: border-box;
					height: auto ; /* debug 10rem; */
					margin: 1.5rem;
					/*  2022-04 */ 	padding: 1rem; 
					text-align: left;
					width:  40% ; /*  30rem; once this turns into a percentage it will stop wrapping, duh */
					}

.wrap    {
					-webkit-flex-wrap: wrap;
					flex-wrap: wrap;
					}

.nowrap  {
					-webkit-flex-wrap: nowrap;
					flex-wrap: nowrap;
					}
.wrap-reverse     {
					-webkit-flex-wrap: wrap-reverse;
					flex-wrap: wrap-reverse;
					}





.halfflex {
					width: 70%;
					border-radius: .3rem;
					padding: .5rem .8rem .8rem 1.3rem
					}

/* Structure */





/* horizontal flex divs  and banner  -- -- -- -- -- -- -- -- -- -- -- -- -- 
https://stackoverflow.com/questions/14142378/how-can-i-fill-a-div-with-an-image-while-keeping-it-proportional
				background-image: url(https://stateoftheunit.com/images/Reach_Kilogram_2.jpg); 									*/
					
#banner {		border-top: 1px solid gray;
				border-bottom:  1px solid gray;
				display: flex;
}
		
.wrapper-two-column { /* ? When is this used? */
				border: 0rem solid yellow; 		
				box-sizing: border-box;	
				display:flex;	
				border-top: 1px solid gray;
				border-bottom:  1px solid gray;
				flex-direction: row;
				
}


.wrapper-two-column-right-filler { /* ? When is this used? */
				background-color: #64707D; /* changed on 2022-12-26 slategray */ ; 
				display: none;
				order: 2;			
				background-image: url("http://stateoftheunit.com/images/Background-Filler.jpg");
				background-position: right center;
				margin: 0px; padding: 0px;
				box-sizing: border-box;	
				flex-direction: column;
}

.wrapper-two-column-right-filler * {
				width: 100%;
				border: 1px solid pink;
}


.wrapper-two-column-right {
				background-color:   #64707D; /* changed on 2022-12-26 slategray */ ; 
				border: 0rem solid pink; 		
				box-sizing: border-box;	
				color: white;
				display: flex;
				flex-direction: column;
				font-size: 1.4rem;
				order: 1;
				padding: 2rem;
				width: 60%; 
}


.wrapper-two-column-img-container {
				align-items: flex-start; 
				border: 0px solid blue;
				display: flex;
				justify-content: center;
				min-width: 0;
				overflow: hidden;  
}


.wrapper-two-column-img-container .img-to-fit {
				align-self: center;
				border: 0px solid yellow !important;
				height: 100%;
				object-fit: cover;
				width: 100%;
				margin: 0px;
				padding: 0px;
}







.flipped .wrapper-two-column-right-filler.flipped { /* ? When is this used? */
				background-color: tomato; 
				display: flex;					
				background-image: url("Background_Explosion_WWII.jpg");
				background-position: right center;
				margin: 0px; padding: 2rem;
				border: 0rem solid purple; 
				font-size: 1.2rem;
				flex-direction: column;		
				
	align-items: center;		
}

#ssoo  p:first-line {
   font-weight: bold;
}


.flipped .wrapper-two-column-right-filler.flipped h1,
.flipped .wrapper-two-column-right-filler.flipped h2,
.flipped .wrapper-two-column-right-filler.flipped h3 {
				display: flex;	
				border: 0px solid white;
}

.flipped .wrapper-two-column-right-filler.flipped p {
				display: flex;	
				border: 0px solid white;
}



.flipped .wrapper-two-column-right.flipped {
				background-color: darkred; 
				border: 0rem solid pink; 		
				box-sizing: border-box;	
				color: white;
				display: flex;
				flex-direction: column;
				font-size: 1.2rem;
				order: 1;
				padding: 2rem;
				width: 40% !important; 
}


.flipped .wrapper-two-column-img-container.flipped {
				align-items: flex-start; 
				border: 0px solid blue;
				order: 2;
				background-color: brown; 
				width: 40%; 
}






   
/* https://codepen.io/mosbth/pen/KdQzKq https://flexbox.help  */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items  */
/* the special flexbox case */ 
/* https://codepen.io/team/css-tricks/pen/1ea1ef35d942d0041b0467b4d39888d3 */
/* https://stackoverflow.com/questions/46627848/flexbox-responsive-row-column-layout */
.flexbox {
				/* justify-content: flex-start; */
				background: orange;
				box-sizing: border-box;	
				display: flex;
				flex-flow: row wrap;
}
.flexbox > .left {  	/* background-image: url(https://stateoftheunit.com/images/Reach_Kilogram_2.jpg); */
				object-fit: cover; 
				order: 1;
				width: 50%;
}
.flexbox .right { 	
				background-color: slategray; 
				border: 0px solid red;
				box-sizing: border-box; 
				color: #fff;
				font-size: 1.5rem;
				order: 2;
				padding: 2rem;
				width:50%;
}
.flexbox>.center { 	background-color: #23B776; }
.flexbox>.left {    order: 1;  }
.flexbox>.center {  order: 3;  }
.flexbox>.right {   order: 2;  }
/* END the special flexbox case -------------- */