/* 
 * Author: David Loffredo (dave@dave.org)
 */

BODY {
    background: white;
    margin: 1rem auto;
    max-width: 64rem;
}
A:link    { text-decoration: none; }
A:visited { text-decoration: none; }
A:hover   { color: #FF0000; text-decoration: underline; }

H1,H2,H3 { font-family: arial, helvetica; }
.rule { border-top:1px solid black; padding-top:0.2em; margin-top:3em; }
H1.rule { }
H2.rule { width:75% }
H3.rule { width:50% }

NAV {
    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom: solid 1px #eee;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}
NAV IMG { height: 2rem;  margin: 0 1rem 0 0.2rem; }
NAV UL {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0.2rem;
}
NAV LI + LI::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin: 0 0.5ch;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
}


DIV.sewnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: arial, helvetica; 
    font-weight: bold; 
    margin: 1rem 0;
}


DIV.flex, DIV.flexfloat, DIV.gallery{
    display: flex;
    justify-content: center;
}    
DIV.gallery { flex-wrap: wrap; }

DIV.main {
    margin: 0 0.5rem;
    max-width: 40rem;
}    

DIV.copyright {
    font-size: 	70%;
    margin-right: 	20%;
    margin-left: 	20%;
    margin-top: 	2rem;
    margin-bottom: 	1rem;
    padding:		0.5rem;
    text-align: 	center;
    border-top: 	1px solid #eee;
    clear: both; /* avoid interference with floats */
}


DIV.toc { font-size: 80%; }
DIV.toc, DIV.side {
    margin: 0 0.5rem;
    padding-left: 1rem;
    border-left: 1px solid black;
    order: 2;
}


/* Kill the indent on lists and use different bullets.  Some browsers
 * use margin and others use padding, so set both to zero and just use
 * the padding 
 */
.toc UL{
    margin: 0; 
    padding: 0;
    padding-left: 1.5em;
    list-style-type: square;
}
.toc UL UL { list-style-type: disc; }

IMG.block-shrink { max-width: 100%; display: block; margin: 1em auto; }
IMG.block { width: 100%; display: block; }
FIGCAPTION { text-align: center; }


/* TABLES */
TABLE { 
	vertical-align: top; 
	border: none; 
	border-collapse: collapse;
} 

/* For normal text tables, as opposed to ones used for  formatting. 
 * The auto margins will center tables on Moz and opera, but we force
 * center in the html tag because IE will not center tables through
 * CSS unless you center the entire body block.
 */
TABLE.normal { 	width: 70%; 
	/* margin-left: auto; */
	/* margin-right: auto; */
	margin-top: 1em;
	margin-bottom: 1em;
	border: solid 2px black}
TABLE.normal TD { 	vertical-align: top; margin: 0px; padding: 0.25em; } 
TABLE.normal TH { 	vertical-align: top; margin: 0px; padding: 0.25em; 
			border-bottom: solid 2px black; } 

/* For fancy text tables, with odd/even highlighting. */
TABLE.fancy {
	border: 1px solid black; 
	border-collapse: collapse; 
	font-size: 90%; 
}

TABLE.fancy TD { padding: 0.2em; }
TABLE.fancy TH {
	padding: 0.2em; 
	color: white; 
	background: #5A79A5; 
	font-family: arial, helvetica; 
	font-weight: bold; 
	white-space: nowrap; 
	border-bottom: 1px solid black; 
}

TR.even { background: white; }
TR.odd {  background: #DEE7EF; }



/* PARAGRAPH AND FONT STYLES */
CODE {
    font-size: 95%;
    font-weight: bold;
    font-family: monospace;
    background: #dee7ef; 
}

PRE.code {
    font-size: 95%;
    font-family: monospace;
    margin-left: 2em; 
    margin-right: 2em; 
    padding: 0.5em; 
    background: #dee7ef; 
    border-radius: 0.5rem;
    border: 1px solid silver;
}


/* Turn off the fancy backgrounds when used in tables */
TD PRE.code, TH PRE.code { 
	background: none; 
	border: none;
	margin: 0; 
	padding: 0; 
}

.l-f, .r-f { width: 18rem; }
.l-f { float: left; margin-right: 1em; }
.r-f { float: right; margin-left: 1em; }
.c-f { clear: both; }


.l-ff, .r-ff { flex-shrink:0; }
@media only screen and (max-width: 40rem) { 
    DIV.toc, DIV.side { border: none; padding: 0; border-top: 1px solid black; }
    DIV.flex { flex-wrap: wrap; }
    DIV.flexfloat { display: block; }
    .l-ff { float: left; }
    .r-ff { float: right; }
    .l-f, .r-f { width: 90%; margin: 1em auto; float: none; }
}