/* 
 * Simple Documentation CSS Styles 
 * David Loffredo
 */

/* colors: #deefe6, #e2deef, #dee7ef */

/* Limit width to a reasonable amount for more comfortable reading of
 * large blocks of text.
 */
BODY {
    background: white;
    margin: 1em auto;
    max-width: 74rem;
}

DIV.main {
    padding: 0 1rem;
    max-width: 50rem;
}    

/* Table of contents.  Base properties, see other styling in the
 * reactive layer below.
 */
DIV.toc {
    font-size: 90%;
    padding: 1rem;
}
    
/* 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; 
}


FIGURE {
    display: block;
    margin: 1em 0;
}

FIGURE IMG {
    max-width: 100%;
}

FIGCAPTION {
    display: block;
    text-align:center; 
    font-size: 90%;
}

/* Simple reactive settings - Limit body width to a reasonable amount
 * and fold the TOC box to inline when you get small.
 */

/* eventually fold toc into a hamburger menu
@media only screen and (max-width: 34.99rem) { }
*/

@media only screen and (min-width: 35rem) and (max-width: 73.99rem) { 
    DIV.toc {
	width: 20rem;
	margin: 0 0 1rem 1rem; 

	float: right;
	border-left: 2px solid black;
    }
    FIGURE {
	margin: 1em 10%;
    }
}

@media only screen and (min-width: 74rem) {
    DIV.toc {
	width: 20rem;
	margin: 0 0 1rem 1rem; 

	float: right;
	border-left: 2px solid black;
    }
    FIGURE {
	margin: 1em 10%;
    }
}


/*------------------------------*/
/* Use the default browser color, but flash the underline and color */
A:link    { text-decoration: underline; }
A:visited { text-decoration: underline; }
A:hover   { color: #FF0000; text-decoration: none; }


H1,H2,H3 { 
	font-family: helvetica, arial; 
}

/* add a rule separator */
.rule { border-top:1px solid black; padding-top:0.2em; margin-top:3em; }
H1.rule { }
H2.rule { width:75% }
H3.rule { width:50% }

DIV.copyright {
    font-size: 70%;
    margin: 3rem 20% 0 20%;
    text-align: center;
    clear: both; /* avoid interference with floats */
}

/* ============================================================
 * TABLES - Since tables are often used for formatting, make them
 * borderless so that we dont have to turn things off.
 */
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-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.  We define local
 * styles for TDs that match certain types of content
 */
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: helvetica, arial; 
    font-weight: bold; 
    white-space: nowrap; 
    border-bottom: 1px solid black; 
}

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


/* ============================================================
 * PARAGRAPH AND FONT STYLES - Used primarily by the reference manuals
 * generated from Framemaker, but available for other pages as well.
 */
CODE {
    font-size: 95%;
    font-weight: bold;
    font-family: monospace;
    background: #dee7ef; 
}

SPAN.code {
    font-size: 95%;
    font-weight: bold;
    font-family: monospace;
}

PRE.code {
    font-size: 95%;
    font-family: monospace;
    margin-left: 5%; 
    margin-right:5%; 
    padding: 0.5em; 
    background: #dee7ef; 
    box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.5);
    border-radius: 0.5em;
}

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

/* Nicely indented definition list for terms.  Consider applying this
 * to the base DL element.
 */
DL.termdefs  { margin: 2em; padding: 0; }
DL.termdefs DT { font-weight: bold; }
DL.termdefs DD { margin: 0 3em 1em 3em; }

UL.tight LI { margin-top: 0; margin-bottom: 0; }
UL.loose LI { margin-top: 1em; margin-bottom: 1em; }


/* Table for displaying command line arguments.  Originally we did
   termdefs but this seems to work better.  The arg is in a TH and the
   description is in a TD */

TABLE.cmdopts TH {
    vertical-align: baseline;
    text-align: left;
    min-width: 10em;
    font-weight: bold;
    font-family: monospace;
    padding-right: 1em;
    white-space: nowrap; 
}
TABLE.cmdopts TD {
    vertical-align: baseline;
    text-align: left;
    padding-bottom: 0.5em;
}
/* need to use px because the fonts are different size */
TABLE.cmdopts TR.subhead TH { padding-top: 20px;}
TABLE.cmdopts TR.subhead TD { padding-top: 20px;}
TABLE.cmdopts  { margin: 1em 2em 2em 2em; padding: 0; }