Upgrader-Widgets.css

/*************************************************************************************************/
/*************************************************************************************************/
/* CSS-Rules applied to HTML Widgets / Entities created by the Upgrader (rather than javadoc)    */
/*************************************************************************************************/
/*************************************************************************************************/


/*
 * Most Content that exists on an Upgraded Java-Doc Web-Page was already there after the actual
 * javadoc Tool (the original utility written by Sun / Oracle) has run to completion.  The CSS
 * Rules that have been written to improve that content is all saved inside the file named 
 * 'Original-Widgets.css'.
 *
 * This file, however, contains CSS Definitions & Rules that are applied to HTML Elements that have
 * been added during the Upgrade-Process.  For instance, when a user sorts a Summary-Table to add
 * Section Header-Bars, extra HTML-Widgets are added / inserted.  The CSS Rules to set the color,
 * background, size & font of those bars has all been placed in this CSS File.
 */

/* ********************************************************************************************* */
/* STATELESS-CLASS (@StaticFunctional) and HiLited Source-Code Links: Widgets at Top of Page     */
/* ********************************************************************************************* */

/*
 * IMPORTANT: The actual black/gold label CSS-Definitions are in "Original-Widgets.css" because
 *            their actual definitions/properties are identical to all of the other "Header
 *            Labels" on the HTML-Page that are at the top of a page
 * 
 * The stuff defined directly below is specific only to the HiLited-Source & Stateless Class
 * HTML - OTHER THAN THE BLACK-NEON-GOLD Title-Label-Thingy
 */

/*
 * Pushes forward the "Stateless Class" and the "Static Functional" labels.  The JavaDoc Upgrader
 * Class adds a <DIV CLASS=JDTopIndent> to both of those Banner-Labels
 *
 * NOTE: These little "trivialities" add-up slowly...  They look bad when the text below the banner
 *       is "Pressed Up Directly" to the left-side of the page.
 */
DIV.JDTopIndent { margin-left: 1em; }

SPAN.srcCodeLabel, SPAN.staticFunctional
{ font-size: 95% !important; /* Overrides CSS Line above! */ }

/*
 * These are added directly after the description-divider at the top of the CIET Page, directly
 * before the Summaries Sections.  The first provides a link to hilited source code, and the
 * second includes the notes about 'The Spaghetti Report'
 *
 * DIV#SrcCodeLink, #StatelessClass
 * { border-radius:  2em; box-shadow: inset 0 0 1em var(--JD-DarkBlue2); }
 *
 * Added by HiLiteSrcCode.java: #SrcCodeLink
 * Added by StatelessClasses.java #StatelessClass
 */
DIV#SrcCodeLink UL
{ background: var(--Source-Link-Background); max-width: 75%; }

/*
 * This contains the actual file-name of the HiLited Source Code. This can be ver long in a few
 * cases.  The 'auto' adds a scroll-bar if it is too long
 */
DIV#SrcCodeLink LI
{ 
    overflow:       auto;
    padding-right:  1em;    /* When it runs off the end, more padding looks nicer */
}
 
DIV#StatelessClass
{ max-width: 75%; }

DIV#StatelessClass UL 
{ background: var(--Stateless-Class-Background); }

DIV#StatelessClass LI
{ font-family: monospace; }

/*
 * THIS IS ONLY USED WHEN: The user has requested extra HiLited Source Code Files be
 * inserted.  As of late that is the Node-Search Package, and the javax.json packge.
 *
 * This is just a light-gray, rounded-border tab-background.  It is behind the little Source-Code
 * File-Description provided in a user's ExtraHiLitedSrc.class Config-Class File.
 */
SPAN.SrcCodeTitle
{
    background:     var(--Source-Link-Title-Background);
    display:        inline-block;
    padding:        0.4em 1.5em 0.4em 1em;
    border:         1px solid parent;
    white-space:    nowrap; 
    font-weight:    bold;
    border-radius:  0.75em;
    overflow:       auto;
}
  

/* ********************************************************************************************* */
/* Rearrange-Summaries, ORANGE-GRADIENT: Package-Summary.html *AND* Summary-Sections in CIET's   */
/* ********************************************************************************************* */

/* 
 * Adds an ORANGE-DITHERED (GRADIENT) background to Header-Summaries.
 *
 * Added by RearrangePkgFrame.java: RowsSumm
 * Added by RearrangeSummaries.java: PkgRowsSumm
 *
 * RowsSumm: Summary-Sections - Field, Method, Constructor, Enum-Constant and Annotation-Elements
 * PkgRowsSumm: package-summary.html CIET Categories - Class, Interface, Enum-Type, Annotations.
 */
TH.RowsSumm, TH.PkgRowsSumm
{
    font-weight:    bold; 
    white-space:    nowrap; 
    background:     linear-gradient(
                        0.25turn, var(--Summary-Section-Dithered-Start),
                        35%, var(--Summary-Section-Dithered-End)
                    );
}

/*
 * The HTML Looks Like: <TH CLASS=RowsSumm or PkgRowsSumm><SPAN>...</SPAN></TH>
 * The 'display: inline-block' allows a 'padding' element to actually work.
 * This definition just adds padding so it looks reasonable.  It also makes the text larger.
 */
TH.RowsSumm > SPAN
{ display: inline-block; padding: 0.6em; font-size: larger; }
 
/* CSS-SELECTOR OPERATOR-PRECEDENCE OCCASIONALLY WORRIES ME */
TH.PkgRowsSumm > SPAN
{ display: inline-block; padding: 0.6em; font-size: larger; }
 
/* These are for the bold labels first-word inside a summary table, they just make it white */
B.STBLabel { color: var(--Summary-Table-Entry-Leading-Text); }
 

/* ********************************************************************************************* */
/* Convenience Method's, Convenience Constructor's                                               */
/* ********************************************************************************************* */

/*
 * These classes make a rectangular-background label for the text "Convenience Method" and
 * "Convenience Constructor" that has a var(--JD-Brown) brown (Standard Java-Doc Color) background,
 * with a white text foreground.
 *
 * Added by Convenience.java: convMethodLabel, convCtorLabel
 */
SPAN.ConvMethodLabel, SPAN.ConvCtorLabel
{
    color:          var(--Convenience-Detail-Label-Color);
    background:     var(--Convenience-Detail-Label-Background);
    display:        inline-block; 
    padding:        0.4em 1.3em 0.4em 0.8em;
    margin:         0em 0em 0.5em 0em;
    font-weight:    bold;
    letter-spacing: 0.08em;
    text-shadow:    0.1em 0.1em black;
}

/*
 * Makes a DITHERED-GRADIENT background for Convenience Methods and Convenience Constructors.
 * Also added by Convenience.java
 *
 * This line was: UL.CNVMETHOD DIV.C12, UL.CNVCTOR DIV.C12
 */
UL.ConvMethod DIV.C12, UL.ConvCtor DIV.C12
{
    background: linear-gradient(
        0.25turn, var(--Convenience-Dithered-Start),
        75%, var(--Convenience-Dithered-End)
    );
}
 
 
/* ********************************************************************************************* */
/* Stats.html                                                                                    */
/* ********************************************************************************************* */
 
TABLE.STATS
{
    margin:     2.5em;
    padding:    1em;
    max-width:  95%;
}
 
TABLE.STATS TD
{
    white-space:    nowrap;
    overflow:       hidden;
}
 
/* These are the table header rows.  They just say the name of the package */
TABLE.STATS TH
{
    color:          var(--Stats-HeaderRow-Color);
    background:     var(--Stats-HeaderRow-Background);
    font-size:      125%;
    font-family:    'Cinzel Decorative', monospace;
    font-style:     normal;
    font-weight:    700;
    letter-spacing: 0.08em;
    padding:        1em;
}

/* This prevents the little numbers from receiving too small a space allocation on the table */
TABLE.STATS TD:Nth-Child(1)
{ padding-right: 2em; }

BODY.STATS
{
    /* The Standard Java Doc Font */
    font-family:    'DejaVu Sans', Arial, Helvetica, sans-serif;
    background:     var(--Stats-Body);
}

/* <SPAN> CLASS for the "Package Name" <TH> text */
SPAN.PNSTATS
{
    color:          var(--Stats-Package-Name);
    font-weight:    bold;
}

/* <TH> <SPAN> CLASS JAR-Totals <TH>-Text. */
SPAN.PNTSTATS
{
    color:          var(--Stats-Totals-Complete);
    font-weight:    bold;
}
 

/* ********************************************************************************************* */
/* Details-List Popup-Window, Listed Under "PAGE: TOP | ALL" Link in Navigation Bar              */
/* ********************************************************************************************* */

/*
 * This "Popup-Window" can be viewed, simply, by hovering over the word "Menu" that is in the 
 * top-right hand corner of every javadoc web-page for a class/type (CIET).  If you were to go to
 * the page for 'Torello.HTML.TagNode', and hoving over the word "MENU" in the top right corner,
 * a (very long) list of Methods, Constructors and Fields would suddenly appear in a Popup-Window.
 * 
 * The contents of this Pop-Up Window are nothing more than the exact same list of Methods, Fields
 * and Constructors that are present in the Summary-Tables Section that is occupies the top of
 * every Java-Doc Web-page.  Yes, this Pop-Up list contains redundant-information, but it also
 * facilitate moving around to the different Detail-Entry Explanation that are present on a
 * javadoc Web-page without having to go back and forth to the top Table-of-Contetns to do so.
*/

/*
 * *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
 * The <NOSCRIPT> Tag (included via the JavaDoc original stuff) seems to work pretty well
 * *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
 */
DIV#NoScriptDetailsPopup
{
    color:          var(--NO-SCRIPT-Popup-Color);
    background:     var(--NO-SCRIPT-Popup-Background);
    border:         1px solid var(--NO-SCRIPT-Popup-Border);
    display:        none;
    z-index:        99;
    position:       fixed;
    right:          2em;
}

/*
 * Makes sure the "Java Script is Disable In Your Browser ToolTip Popup *ONLY* comes up when
 * the mouse hovers over the "ALL" link on the Navigation Bar
 */
LI.DetailsPopupButton:hover DIV#NoScriptDetailsPopup
{ display: block; padding: 1.5em; }
 
/*
 * *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
 *  Main Popup Definitions
 * *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
 * The List of Details is only displayed when the mouse hovers over it.
 * This DIV relies on JavaScript ... 'this.style.display = "block"' to show it on the screen.
 */
DIV.DetailsPopup
{
    display:        none;
    /*font-family:    'DejaVu Serif', Georgia, "Times New Roman", Times, serif !important; */
    /*font-family:    'DejaVu Sans', Arial, Helvetica, sans-serif !important;*/
    /*font-family:    'DejaVu Sans Mono', monospace;*/
    font-family:    Verdana,Arial,sans-serif;
}

/* Makes sure that the "onhover" gray background is not broken by <TD> elements */
DIV.DetailsPopup TABLE { border-collapse: collapse; border-spacing: 10px; }

/*
 * This is the popup that shows, it uses 'z-index', 'position', and 'right' to get the  placement
 * correct / accurate.  Overflow adds scrollbars if needed.  Position fixed, means, (I think),
 * it will always display at the right-most point on the screen, no matter where the actual
 * link actually was...  (in conjunction with "right: 2em")
 */
DIV.DetailsPopup
{
    color:          var(--Details-Popup-Hide);
    background:     var(--Details-Popup-Hide);
    border:         1px solid black;
    z-index:        99;
    position:       fixed;
    padding:        1em;
    overflow:       auto;
    right:          2em;
    max-height:     80vh;
    max-width:      75%;
}

DIV.DetailsPopup TR
{
    /* This property erases the JavaDoc CSS File's Definition that capitalizes everything! */
    text-transform: none;

    /* Make sure that the PopUp-Menu-DIV widens - that the text (Menu-Items) occup only 1 line */
    white-space: nowrap;

    /* I dunno, it works: Eye of Newt, Wing of Bat, Toe of Frog */
    width: 100%;
}

/*
 * *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
 * DPI => "Details Popup Items"  These are the linked methods, fields, etc... (links, not titles)
 * *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
 * These are *NOT* the Rows that have actual Titles (which say 'Method', 'Field', 'Constructor')
 * Those are DPL's instead
 */
DIV.DetailsPopup TR.DPI TD
{
    color:          var(--Details-Popup-Item);
    padding:        0.25em 0 0.25em 0.75em;
    font-size:      120%;
}

/*
 * This HiLites the actual Method, Field or Constructor *NAME* itself.  It will look distinct
 * from the rest of the data/information on the table-row.  This makes the *NAME* sort of
 * stand out from long lists of parameter-types, parameter-names, and return-types.
 */
DIV.DetailsPopup TR.DPI TD SPAN
{ font-weight: bold; }

DIV.DetailsPopup TR.DPI:hover TD SPAN
{ color: var(--Details-Popup-Item-Hover-Color) !important; }
 
DIV.DetailsPopup TR.DPI:hover TD
{
    /* These overrides are *COMPLETELY* unnecessary, but they are staying for now */
    background:     var(--Details-Popup-Item-Hover-Background)  !important;
    color:          var(--Details-Popup-Item-Hover-Color)       !important;

    /* This just doesn't work.  The JavaDoc Menu uses an actual image-file for its background */
    /* background: linear-gradient(0deg, lightgray 40%, darkgray 50%, lightgray 60%); */
}

DIV.DetailsPopup TR.DPI { width: 100%; }

/*
 * *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
 * "DPL" => "Details Popup Labels" (rather than the menu items / DPI)
 * *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
 *
 * Only the "Title Rows" use a <TH>, they have a different color, and font-size.
 * The Title-Rows are the things that say the actual words "Methods", "Fields", "Constructors" ...
 */
DIV.DetailsPopup TR.DPL TH
{
    font-weight:    bold;
    font-size:      130%;
    color:          var(--Details-Popup-Hide);
    background:     var(--Details-Popup-Hide);
    /*
     * The <DIV> overrides the 'white text / white-background' thing.
     *
     * NOTE: There is something sort-of complicated going on here.  The blue-background needs to
     *       have some white-space margin above and below it, or else the menu looks crunched.
     *       However, since a <TR> cannot have a Margin, the white-space is inside the <TH> itself
     *       and the margin & padding are dealt with by the inner <DIV> (which is explained next)
     */
}
 
/* "Details Popup Label" (The Rows with Titles Use a <DIV> for the text) */
DIV.DetailsPopup TR.DPL TH DIV
{
    /*
     * Same Color as the Sun/Oracle JavaDoc Search Bar
     *
     * NOTE: This overrides the previous override! (which was overriding the hover color)
     *       CSS Margin, Padding, Inline, Block really are difficult to figure out.
     *       It really is just trial and error.
     */
    background: var(--Details-Popup-Label-Background) !important;
 
    margin:     0.3em 0em 0.3em 0em;        /* Extra white-space surrounding the blue color */
    padding:    0.35em 0em 0.35em 0.25em;   /* Extra blue coloring */
 
    /*
     * Because (I think) there is a margin, if this is 100%, then the browser adds a completely
     * unnecessary horizontal scroll bar.  Getting rid of the margin makes it go away...
     * NOTE: If there is **NO "width"**, then the title bar blue-coloring won't go past the words
     *       "Methods" "Fields" etc... - The blue coloring won't fill up the entire row!
     */
    width: 96%;
 
    /*
     * This is a Small Blue Line Border above and below it. It's the same Color as the Sun/Oracle
     * JavaDoc Search Bar border-colors.
     */
    border-top:     1px solid var(--Details-Popup-Label-Border);
    border-bottom:  1px solid var(--Details-Popup-Label-Border);
}


/* ********************************************************************************************* */
/* MPMAB: Minimize, Partialize, Maximize All Buttons (Upper-Top-Right-Corner of all Pages)       */
/* ********************************************************************************************* */

/*
 * These are the three buttons that are at the very-top-right hand corner of each and every 
 * javadoc web-page.  These three buttons, when click, will shink or expand each and every Detail
 * Element to show or hide it's content.
 * 
 * For some odd reason, these have to be <A onclick=...> Anchor-Elements.  They cannt be buttons.
 * It looks like the surrounding <UL> Button-Bar is just "eating up" the Java-Script Click-Events.
 * You simply aren't able to click on these buttons if they are HTML <BUTTON>-Elements instead of 
 * <A>-Anchors.
 * 
 * NOTE: I have worked on this project for 5 years now, and to this day, I haven't ever once
 * bothered to figured out all of the javadoc-generated 'stylesheet.css' - or the Java-Script that
 * it includes
 * 
 * Also, I played with the next 20 lines of CSS for many hours straight, trying every combination
 * of 'flex', 'nowrap' and 'fit-content' to get the two boxes in the exact position, and of the
 * exact size that they currently are.  CSS can be a very difficult thing to use properly.  It's
 * always easy to get "most of it" - but if you want everything to line up just right, and all of
 * the colors to work right, it often takes me several days of staring at it to get just one
 * widget "just right".
 * 
 * CSS always takes A LONG TIME to get it to look "finished" and "correct".  These 5 little
 * definitions were no exception.
*/
DIV#MPMAB
{
    position:       fixed;
    right:          0;
    top:            0;
    margin-top:     0.9em;
    margin-right:   0.9em;
    padding:        0;
    white-space:    nowrap;
    width:          fit-content;
    display:        flex;
    align-items:    center;
}

#MPMAB DIV
{
    color:          var(--Min-Max-Part-All-Color);
    white-space:    nowrap;
    width:          fit-content;
    padding-top:    0.25em;
    padding-bottom: 0.25em;
    padding-right:  1em;
    height:         1.5em;
    display:        flex;
    align-items:    center;
}

#MPMAB DIV:first-child
{
    background:     var(--Min-Max-Part-All-Background-Left);
    padding-left:   1em;
}

#MPMAB DIV:nth-child(2)
{
    background:     var(--Min-Max-Part-All-Background-Right);
    padding-left:   0;
}

#MPMAB DIV:nth-child(2) A
{
    padding-top:    0.25em;
    padding-left:   1em;
}

DIV#NoScriptMPMAB
{
    color:          var(--NO-SCRIPT-Popup-Color);
    background:     var(--NO-SCRIPT-Popup-Background);
    border:         1px solid var(--NO-SCRIPT-Popup-Border);
    display:        none;
    z-index:        99;
    position:       fixed;
    right:          2em;
}

DIV#MPMAB:hover DIV#NoScriptMPMAB
{
    display:    block;
    padding:    1.5em;
    background: var(--NO-SCRIPT-Popup-Background);
}


/* ********************************************************************************************* */
/* Little Naviation Bar for each Details: blue buttons of Arrows, maximize, minimize ...         */
/* ********************************************************************************************* */

/*
 * These Buttons are the (currently) six blue buttons that are directly below the Detail Signature
 * part of each "Detail Entry" (the explanations for methods, fields, constructors, etc...) on a
 * Java-Doc Page.
 * 
 * Currently there are:
 *      An Up-Arrow Button          - previous Detail
 *      A Down-Arrow Button         - next Detail Element
 *      A Double-Up-Arrow Button    - Go to Summary-Section corresponding to this Detail
 *      A Curving-Right Arrow       - Go to the HiLited Source-Code
 * 
 * Also - at the far right of the screen, there are:
 *      A Maximize Button   - Show the entire Detail-Entry
 *      A Partialize Button - Show only the Method, Field or Constructor's Signature
 *      A Minimize Button   - Show only the Name of Part of the Detail-Entry 
*/
DIV.DetailNav
{
    font-weight:    bold;
    font-size:      125%;
    margin:         0.75em 0 0.75em 1em;
    width:          93%;
}

DIV.DetailNav A
{
    color:          var(--Detail-Nav-Bar-Button-Color);
    background:     var(--Detail-Nav-Bar-Button-Background);
    padding-top:    0.2em;
    cursor:         pointer; /* If there is no HREF, this would be "caret" */
    width:          2em;
    display:        inline-block;
    text-align:     center;
    border-radius:  0.25em;
}

DIV.DetailNav A:hover
{
    color:          var(--Detail-Nav-Bar-Button-Hover-Color);
    background:     var(--Detail-Nav-Bar-Button-Hover-Background);
}

DIV.DetailNav SPAN
{ float: right; }


/* ********************************************************************************************* */
/* Flashing Summary Table-Rows. ==> Flash BLUE In-And-Out when DOUBLE-UP-ARROW Button is Clicked */
/* ********************************************************************************************* */
 
/*
 * When the user clicks on the Double-Up-Arrow Button on a Details-Section, the browser will
 * move the location to the Summary Table Row for that Detail-Section.  When this happens, it is
 * usually very hard to see where the row is.
 * 
 * This CSS Class will "flash" the Table-Row using the "keyframes" thing-y that I just started
 * reading about.  It looks all right, and I hope this is cross-browser-compatible
 * 
 * NOTE: This CSS Class is only set when the user clicks on the button.  As soon as the 2 or 3
 *       second animation is finished, JavaScript will fire an "Animation End" event, and at that
 *       point this class is immediately removed from the Summary-Table Row, and it goes back to
 *       normal (and stops flashing).
 * 
 * ALSO: It is actually imperative to remove the 'flashSumm' class using Java-Script if you are
 *       expecting the Table-Row to flash EVERY-SINGLE-TIME that the user clicks on the UP-ARROW
 *       BUTTON.  If you will notice, the animation property is set to blink 3 times for 1 second
 *       each and then stop - PERMANENTLY.  The only way to reset the blinker/flasher so it will
 *       blink/flash again is to clear the "flashSumm" class from the CSS-Class Name String, and
 *       then put it right back the next time the user clicks on it.
 * 
 * SEE:  JDU.js File - that file contains the blinker code.  It is very brief (only a few lines).
 */
 
TR.flashSumm
{ animation: flashSummBlinker 750ms linear 2; }

TR.flashSumm TD,
TR.flashSumm TH,
TR.flashSumm A,
TR.flashSumm SPAN
{
    color:      var(--Summary-Row-Flash-Color)      !important;
    background: var(--Summary-Row-Flash-Background) !important;
}

@keyframes flashSummBlinker
{ 
    0%      { opacity: 0; }
    50%     { opacity: 1; }
    100%    { opacity: 0; }
}
 

/* ********************************************************************************************* */
/* For Syntax-HiLited Dividers (<DIV CLASS=SNIP, EXAMPLE, JSON...> ...</DIV>)                    */
/* ********************************************************************************************* */

/* Both HiLited Dividers and HiLited Details need a few spaces inserted beforethe title */
B.HLN:before    { content: "\00a0\00a0\00a0" }

/*
 * This is used on String's from JavaDoc Upgrader "HiLiteDetails":
 *      "Exact Field Declaration Expression:"
 *      "Exact Method Body:"
 *      "Exact Constant Declaration:"
 *      etc... 
 *
 * There are 5 of these: Methods, Fields, Constructors, Enum-Constants & Annotation-Elements
 */
B.HLN
{
    font-family:    Verdana, Arial, sans-serif;
    color:          var(--HiLite-Details-Label-Color);
}
 
/*
 * This is the String that is directly above the HiLited Source Code. The String's are from
 * the User-Supplied HiLited HTML <DIV> (Dividers).  Each User-Supplied Documentation-<DIV> has
 * an HTML Label directly above the HiLited-Source.  Some of the Label's that are auto-inserted by
 * the Upgrader (which correspond to the User's Source-Type/Kind) are as below:
 *
 * "UNIX or DOS Shell Command:"
 * "Regular Expression:"
 * "Terminal Output:"
 * "Example:"
 * "HTML Elements:"
 * "JavaScript:"
 * "Java Line of Code"
 * etc...
 *
 * The User has 15 different choices for these.  All 15 options are listed in the next
 * definition.
 */
B.CHLN
{
    color:          var(--HiLited-DIV-Label-Color) !important;
    background:     var(--HiLited-DIV-Label-Background);
    text-shadow:    0.1em 0.1em var(--HiLited-DIV-Label-Shadow); 
    font-family:    Verdana, Arial, sans-serif;
    display:        inline-block !important;
    padding:        0.375em 4em 0.375em 1.5em !important;
    margin-bottom:  0.25em;
    border-radius:  1em;
}

/* These are the 15 different HiLited <DIV> Elements that a user may insert into a Web-Page */
DIV.IHL01, /* [0]   <DIV CLASS="COMPLETE">{@code ... }</DIV>        */
DIV.IHL02, /* [1]   <DIV CLASS="EXAMPLE">{@code ... }</DIV>         */
DIV.IHL03, /* [2]   <DIV CLASS="METHODSIGNATURE">{@code ... }</DIV> */
DIV.IHL04, /* [3]   <DIV CLASS="SNIP">{@code ... }</DIV>            */
DIV.IHL05, /* [4]   <DIV CLASS="HTML">{@code ... }</DIV>            */
DIV.IHL06, /* [5]   <DIV CLASS="LOC">{@code ... }</DIV>             */
DIV.IHL07, /* [6]   <DIV CLASS="SHELL">{@code ... }</DIV>           */
DIV.IHL08, /* [7]   <DIV CLASS="SHELLBLOCK">{@code ... }</DIV>      */
DIV.IHL09, /* [8]   <DIV CLASS="REGEX">{@code ... }</DIV>           */
DIV.IHL10, /* [9]   <DIV CLASS="JAVASCRIPT">{@code ... }</DIV>      */
DIV.IHL11, /* [10]  <DIV CLASS="JSON">{@code ... }</DIV>            */
DIV.IHL12, /* [11]  <DIV CLASS="CSS">{@code ... }</DIV>             */
DIV.IHL13, /* [12]  <DIV CLASS="XML">{@code ... }</DIV>             */
DIV.IHL14, /* [13]  <DIV CLASS="SQL">{@code ... }</DIV>             */
DIV.IHL15  /* [14]  <DIV CLASS="OUTPUT">{@code ... }</DIV>          */
{
    background:     var(--HiLited-DIV-Background);
    border:         solid var(--HiLited-DIV-Border);
    overflow:       auto;
    width:          auto;
    max-width:      93%; /* This is necessary, or it will possibly make them very-wide */
    border-width:   .1em .1em .1em .8em;
    border-radius:  0.75em;
    padding:        0.75em 1.75em 0.75em 1em;
    margin-top:     0.4em;
}

DIV.IHL07, /* [6]   <DIV CLASS="SHELL">{@code ... }</DIV>           */
DIV.IHL08, /* [7]   <DIV CLASS="SHELLBLOCK">{@code ... }</DIV>      */
DIV.IHL09, /* [8]   <DIV CLASS="REGEX">{@code ... }</DIV>           */
DIV.IHL15  /* [14]  <DIV CLASS="OUTPUT">{@code ... }</DIV>          */
{
    font-family:    monospace;
    white-space:    pre;
    font-weight:    bold;
}

DIV.IHL07, /* [6]   <DIV CLASS="SHELL">{@code ... }</DIV>           */
DIV.IHL08, /* [7]   <DIV CLASS="SHELLBLOCK">{@code ... }</DIV>      */
DIV.IHL15  /* [14]  <DIV CLASS="OUTPUT">{@code ... }</DIV>          */
{ color: var(--HiLited-DIV-Special-Case); }

DIV.IHL09  /* [8]   <DIV CLASS="REGEX">{@code ... }</DIV>           */
{ color: var(--HiLited-DIV-RegEx); }

/* [3] <DIV CLASS="SNIP">{@code ... }</DIV> */
DIV.IHL04 { display: inline-block; }

/* <DIV CLASS="EXAMPLE-SCROLL"> */
DIV.SCROLLERDIV { max-height: 20em; }


/* ********************************************************************************************* */
/* These are for the HiLited Methods, Fields, Constructors, EC's and AE's                        */
/* ********************************************************************************************* */

DIV.IHLM,   /* In-Line Hi-Lited Methods                 */
DIV.IHLC,   /* In-Line Hi-Lited Constructors            */
DIV.IHLF,   /* In-Line Hi-Lited Fields                  */
DIV.IHLEC,  /* In-Line Hi-Lited Enumeration-Constants   */
DIV.IHLAE   /* In-Line Hi-Lited Annotation-Elements     */ 
{
    background:     var(--HiLite-Details-Background);
    border:         solid var(--HiLite-Details-Border);
    border-width:   .1em .1em .1em .8em;
    border-radius:  0.75em;
    overflow:       auto;
    width:          auto;
    max-height:     20em;
    padding:        0.75em 1.75em 0.75em 1em;
    margin-top:     0.4em;
}


/* ********************************************************************************************* */
/* These are for the *COMPLETE* HiLited Source Code Files (HLSCF)                                */
/* ********************************************************************************************* */

DIV.HLSCF
{
    background:     var(--HiLited-SourceFile-Background);
    border:         solid var(--HiLited-SourceFile-Border);
    border-width:   .1em .1em .1em .8em;
    overflow:       auto;
    width:          auto;
    padding:        0.6em 1.75em 0.6em 2em;
}

DIV.HLSCF TD:Nth-Child(1)
{
    color:          var(--HiLited-SourceFile-LineNum);
    font-weight:    bold;
    padding-right:  1em;
}


/* ********************************************************************************************* */
/* The Wooden Board at the top of classes which have been Annotated with @JDHeaderBackgroundImg  */
/* ********************************************************************************************* */

DIV.JDWoodBoardDark
{
    margin:             2em 0em 2.5em 0em;
    padding:            3em 2.5em 3em 2.5em;
    box-shadow:         12px 12px 8px 0px var(--Wood-Plank-Header-Shadow);
    width:              88% !important;
    background-image:   url('../img/WoodPlank.Dark.jpg');
    background-origin:  content-box;
    border:             1px solid transparent;
    border-radius:      1em;

    /* background-repeat:  no-repeat; */ /* This might be needed for "big screens" */
}

DIV.JDWoodBoardDark > DIV
{
    background:         var(--Wood-Plank-Header-Background);
    border:             0.4em inset var(Wood-Plank-Header-Border);
    border-radius:      2.5em;
    text-align:         initial !important;
    width:              90%;
    padding:            1.5em 2em 1.5em 2em;
    background-image:   var(--JD-Dark-Sand-Paper-Background); /* Defined in Base64.css */
}


/* ********************************************************************************************* */
/* These color-styles are used by the class Torello.Java.Shell.C method's 'toHTML(...)'          */
/* ********************************************************************************************* */

/*
 * IMPORTANT: These are not placed in the "Colors.css" File because they are not actually intended
 *            to be changed - these are not "configurable."  This is because these colors and
 *            backgrounds are actually mapped to the UNIX-Shell Command-Line Colors.
 */
 
.SC1 { color: black;    }
.SC2 { color: red;      }
.SC3 { color: green;    }
.SC4 { color: yellow;   }
.SC5 { color: blue;     }
.SC6 { color: purple;   }
.SC7 { color: cyan;     }
.SC8 { color: white;    }

.SB1 { background: black;    }
.SB2 { background: red;      }
.SB3 { background: green;    }
.SB4 { background: yellow;   }
.SB5 { background: blue;     }
.SB6 { background: purple;   }
.SB7 { background: cyan;     }
.SB8 { background: white;    }

.BC1 { color: black;    font-weight: bold; }
.BC2 { color: red;      font-weight: bold; }
.BC3 { color: green;    font-weight: bold; }
.BC4 { color: yellow;   font-weight: bold; }
.BC5 { color: blue;     font-weight: bold; }
.BC6 { color: purple;   font-weight: bold; }
.BC7 { color: cyan;     font-weight: bold; }
.BC8 { color: white;    font-weight: bold; }

.BB1 { background: brightblack;    }
.BB2 { background: brightred;      }
.BB3 { background: brightgreen;    }
.BB4 { background: brightyellow;   }
.BB5 { background: brightblue;     }
.BB6 { background: brightpurple;   }
.BB7 { background: brightcyan;     }
.BB8 { background: brightwhite;    }