/* 
 * Copyright (c) 1991-2026 by STEP Tools Inc.
 * All Rights Reserved
 * 
 * Author: David Loffredo (loffredo@steptools.com)
 * 
 * STEP Tools Documentation styles - usually duplicated across
 * packages for convenience and to allow update when convenient.
 *
 * 
 * 2023-12-22 -- Better trademark styling
 * 
 * 2022-12-20 -- Code markup with <Q> for double quoted strings and
 * <I> for comments.  Use <SPAN class=str/cmt> outside of a PRE.code
 * block.  Command line args as DL but with a grid layout.  Table
 * styling with normal, minimal, fancy options plus column styles.
 *
 * 2022-08-17 -- Rework for reactive documentation
 */

BODY {
    background: white;
    margin: 1rem auto;
    max-width: 74rem;  /* control large blocks of text */
}

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

    background: #F4E87C;
    background: linear-gradient(90deg, #F4E87C 0%, white 100%);
    border: solid 1px #eee;    
    padding: 0.5rem;
    margin: -0.5rem 0 1rem 0;
}
NAV IMG {
    /* modern browsers */
    content: url("steplogo.svg");
    /* older IE support */
    background-image: url("steplogo.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 2rem;
    height: 4rem;
}
NAV P {
    font-family: helvetica, arial; 
    font-weight: bold; 
    font-size: 	200%; 
    padding: 0 0.5rem;
    margin: 0;
    flex-grow: 1;
} 
NAV UL {
    font-size: 	80%; 
    list-style: none;
    display: inline-block;
    margin: 0 0.2rem;
}
NAV SUP, H1 SUP, H2 SUP { 
    font-size: 40% !important; 
    font-weight: normal; 
    position: relative; top: -0.1em; 
}
SUP.reg { 
    font-size: 70%;
}

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


/* HEADERS - with rule separator */
H1, H2, H3, H4, H5, H6 { 
    font-family: helvetica, arial;
    margin-top: 1.5em;
    margin-bottom: 0.5em; 
}
H1:first-child, H2:first-child, H3:first-child { 
    margin-top:0;
}

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


/* BODY SECTIONS */
DIV.main,  DIV.mainwide { padding: 0 1rem; }    
DIV.main { max-width: 50rem; }    

.cols {
    column-width: 15rem;    
    -moz-column-width: 15rem;
    -webkit-column-width: 15rem; 
}
.cols :first-child { 
    margin-top:0;
}

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


/* Table of contents with simple fold to inline when small. */
DIV.toc {
    font-size: 80%;
    padding: 0.5rem;
    border-radius: 1rem;
    border: 	solid 1px #eee; 
    background: #b0e5ff;
    background: linear-gradient(90deg, #b0e5ff 0%, white 100%);
    margin: 0 1rem 1rem;  /* inline, overridden by media */
}

.toc UL{
    margin: 0; 
    padding: 0;
    padding-left: 1.5em;
    list-style-type: square;
}
.toc UL UL {
    list-style-type: disc; 
}


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

@media only screen and (max-width: 40rem) { 
    .l-f, .r-f { max-width: 90%; margin: 1em auto; float: none; }
}

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

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


FIGURE {
    margin: 2em; 
    text-align: center; 
}
FIGURE IMG {
    max-width: 100%;
    margin: auto; 
    display: block;
}

FIGCAPTION {
    margin-top: 1em; 
    font-weight: bold;
    text-align:center; 
}

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


.shadow {
    box-shadow: 5px 5px 5px #555;
    -moz-box-shadow: 5px 5px 5px #555;
    -webkit-box-shadow: 5px 5px 5px #555;
}



/* ============================================================
 * TABLES - Since tables are often used for formatting, make them
 * borderless so that we dont have to turn things off.
 */
TABLE { 
    border: none; 
    border-collapse: collapse;
} 

/* Tables for data, not formatting.  Past IE ignored auto margins
 * requiring an extra centered div for table centering, but it works
 * now so that markup can be removed.
 */
TABLE.normal, TABLE.fancy, TABLE.minimal {
    max-width: 90%; 
    margin: 2em auto;
}

/* plain table, internal borders, good for lots of rows/columns */
TABLE.normal {
    border: solid 2px black;
}
.normal TD, .normal TH {
    vertical-align: baseline; 
    padding: 0.25em 0.5em;
    border: solid 1px black;
}
.normal TH {
    border-bottom: solid 2px black;
} 


/* fancy table, odd/even rows */
TABLE.fancy {
    font-size: 90%;
    border: 1px solid silver; 
}
.fancy TD, .fancy TH {
    vertical-align: baseline;
    padding: 0.25em 0.5em;
}
.fancy TH {
    color: white; 
    background: #5A79A5;
    font-family: helvetica, arial; 
    font-weight: bold; 
    white-space: nowrap; 
}

.fancy code { background: inherit; font-size: inherit; } 
.fancy TR:nth-child(even) { background: white; }
.fancy TR:nth-child(odd)  { background: #e5f6ff; }
.fancy TR TD.subhead {
    background: white;
    border-top: solid 1px silver;
}


/* minimal table, header with no grid */
TABLE.minimal {
    border-top: solid 1px black;
}
.minimal TD, .minimal TH {
    vertical-align: baseline;
    padding: 0em 0.5em;
}
.minimal TH {
    border-bottom: solid 1px black;
}

/* bump match higher than col styles */
.normal TR TD.subhead,
.fancy TR TD.subhead,
.minimal TR TD.subhead {
    font-weight: bold; 
    padding-top: 1em;
    white-space: normal;
}


/* Individual column styles */
.col1-ctr TD:nth-child(1),
.col2-ctr TD:nth-child(2),
.col3-ctr TD:nth-child(3),
.col4-ctr TD:nth-child(4) {
    text-align: center;
}
.col1-right TD:nth-child(1),
.col2-right TD:nth-child(2),
.col3-right TD:nth-child(3),
.col4-right TD:nth-child(4) {
    text-align: right;
}

.col1-code TD:nth-child(1),
.col2-code TD:nth-child(2),
.col3-code TD:nth-child(3),
.col4-code TD:nth-child(4) {
    font-weight: bold;
    font-family: monospace;
}

.col1-em TD:nth-child(1),
.col2-em TD:nth-child(2),
.col3-em TD:nth-child(3),
.col4-em TD:nth-child(4) {
    font-style: italic;
}

.col1-b TD:nth-child(1),
.col2-b TD:nth-child(2),
.col3-b TD:nth-child(3),
.col4-b TD:nth-child(4) {
    font-weight: bold;
}

.col1-nowrap TD:nth-child(1),
.col2-nowrap TD:nth-child(2),
.col3-nowrap TD:nth-child(3),
.col4-nowrap TD:nth-child(4) {
    white-space: nowrap;
}


/* ============================================================
 * Code Examples -- In PRE.code, wrap strings with <Q> for auto double
 * quote and highlight coloring.  Single quoted strings can be tagged
 * with SPAN.str, but need explicit quotes.  Tag comments with <I> for
 * highlight coloring.
 *
 * Use <EM> if you actually want italics for emphasis.
 */
CODE {
    font-size: 95%;
    font-weight: bold;
    font-family: monospace;
    background: #e5f6ff;
}


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

/* Just a plain PRE, but <Q> and <I> work like PRE.code */
PRE.fndecl { }

.code A:link    { text-decoration: none; }
.code A:visited { text-decoration: none; }

/* strings */
Q, .str { color:#B95004; }
.code Q:before, .fndecl Q:before { content: "\""; }
.code Q:after,  .fndecl Q:before{ content: "\""; }

/* comments */
.cmt { color:#03821B; }
.code I, .fndecl I { color:#03821B; font-style: normal; } /* comments */
.keyword { font-weight: bold; }


/* if wrapping is ok */
PRE.wrap {
    white-space: pre-wrap;
    word-break: keep-all;
    word-wrap: break-word;
}

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



/* ============================================================
 * Term, Argument, and Command Argument lists
 */
DL.defs  { padding: 0 1em; }
DL.defs DT { font-weight: bold; }
DL.defs DD { margin: 0 2em 1em 2em; }

DL.args  { margin: 0.5em 1em; }
DL.args DT {
    font-weight: bold;
    font-family: monospace;
    display: inline-block;  /* keep background from covering entire box */
    background: #e5f6ff;
    padding: 0 0.2em;
}
DL.args DD { margin: 0 2em 0.5em 2em; }


/* Command line args, use class=long for a more traditional DT styling */
DL.cmdargs  {
    display: grid;
    grid-auto-flow: row;
    margin: 0.5em 1em;
    grid-template-columns: fit-content(25%) 1fr;
    column-gap: 1.5rem;
    row-gap: 1rem;
}

DL.cmdargs DT {
    grid-column-start: 1;
    font-weight: bold;
    font-family: monospace;
}
DL.cmdargs DT.long {
    grid-column: 1 / span 2;
    margin-bottom: -1rem;
}

DL.cmdargs DD {
    grid-column-start: 2;
    margin: 0;
}
DL.cmdargs DD.subhead {
    grid-column: 1 / span 2;
}


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



/* ============================================================
 * DOWNLOADS LIST
 *
 * list-style-image does not give control over the size, but svgs
 * without a width/height, just a viewBox sort of work.  The new
 * marker pseudoelement also sort of works, but background-image is
 * good enough.
 */

UL.downloads {
    list-style-type: none;
    padding: 0em;
    margin-top: 0.2em;
    margin-left: 0em;
}

LI.txt { 
    background-image: url("demotxt.gif"); 
    background-repeat: no-repeat;
    background-position: 0 0.5ex;
    padding: 2px 0 2px 30px;
}
LI.src { 	     
    background-image: url("demosrc.gif"); 
    background-repeat: no-repeat;
    background-position: 0 0.5ex;
    padding: 2px 0 2px 30px;
}
LI.java { 	     
    background-image: url("demojava.gif"); 
    background-repeat: no-repeat;
    background-position: 0 0.5ex;
    padding: 2px 0 2px 30px;
}
LI.stp { 	
    background-image: url("demostp.gif");
    background-repeat: no-repeat;
    background-position: 0 0.5ex;
    padding: 2px 0 2px 30px;
}
LI.project { 	
    background-image: url("demoproject.gif");
    background-repeat: no-repeat;
    background-position: 0 0.5ex;
    padding: 2px 0 2px 30px;
}