/* Collapsible Tree CSS (no frameworks). Keep it clean and light. */

* { box-sizing: border-box; }


/* ********************************************************************************************* */
/* MAIN                                                                                          */
/* ********************************************************************************************* */

BODY
{
    color:          var(--Frames-Body-Color);
    background:     var(--Frames-Body-Background);
    font-family:    'DejaVu Sans', Arial, Helvetica, sans-serif;
    font-size:      14px;
    margin:         0;
    padding:        0;
    height:         100%;
    width:          100%;
}

H1
{
    color:          var(--Frames-H1-Color) !important;
    background:     var(--Frames-H1-Background);

    border:         0.1em solid var(--Frames-H1-Border);
    border-bottom:  0.3em solid var(--Frames-H1-Border) !important;

    font-size:      120%;
    font-weight:    bold;

    padding:        0.7rem 1rem 0.7rem 1rem !important;
    margin:         0.75rem 0.5rem 1rem 0.5rem !important;

    border:         1px solid parent;
    border-radius:  0.75rem;

    overflow:       auto;
    cursor:         pointer;

    box-shadow:
        0 2px 4px       var(--Frames-H1H2-Shadow1-Down),
        inset 0 0 10px  var(--Frames-H1H2-Shadow2),
        inset 0 1px 2px var(--Frames-H1H2-Shadow3);
}


/* ********************************************************************************************* */
/* The Complicated Stuff                                                                         */
/* ********************************************************************************************* */

/*
 * There are THREE-LEVELS of <UL> on these 2 pages.
 * 
 * <!-- List of all domains in the API (All Browser Domains, or all JS Domains) -->
 * <UL CLASS=TREE>
 * <LI CLASS=DOMAIN> 
 * 
 *      <!-- List w/ only two <LI>: "Standard Types Sub-List" and "Event-Types Sub-List" -->
 *      <UL CLASS=HIDDEN> 
 *      <LI CLASS=CATEGORY>
 * 
 *          <!-- List of all Inner-Classes (List of Standard-Types or Event-Types -->
 *          <UL CLASS=TYPES/EVENTS>
 *          <LI>
 */
UL
{
    list-style: none;
    padding: 0;
}

LI
{
    margin: 0.25rem 0 0.25rem 0;
    padding: 0;
}

UL.TREE,
UL.TREE > LI > UL
{ margin-left: 1.25rem; }

UL.TYPES,
UL.EVENTS
{ margin-left: 0; }

UL.TREE > LI    { margin: 0.25rem 0rem; }
LI.CATEGORY     { margin: 0.5rem 0rem; }

LI.CATEGORY > .CAT-LABEL
{
    margin-left:        0.25rem;
    color:              #a6781f;                    /* darker gold for contrast */
    background-color:   rgba(255, 215, 0, 0.15);    /* faint gold tint */
    padding:            0.25rem 0.5em;
    border-radius:      0.25em;
    font-weight:        600;
}


/* ********************************************************************************************* */
/* THE + / - <BUTTON>                                                                            */
/* ********************************************************************************************* */

BUTTON.TOGGLE
{
    display:        inline-block;
    width:          1.25rem;
    height:         1.25rem;
    line-height:    1.05rem;
    margin-right:   0.25rem;
    text-align:     center;

    border:         1px solid #6e4f1f;  /* deep brown-gold border */
    background:     #8b5a2b;            /* saddle-brown/dark gold background */
    color:          #f8f5e7;            /* warm off-white for +/− symbol */

    border-radius:  0.25rem;
    cursor:         pointer;
    font-weight:    700;

    /* Slight shadow for depth like the label */
    /* box-shadow:     0 0 2px rgba(166, 120, 31, 0.4) inset; */
}

.HIDDEN     { display: none; }
.EMPTY-NOTE { opacity: 0.6; font-style: italic; }


/* ********************************************************************************************* */
/* THE Collapse-All & Expand-All <BUTTON>'s                                                      */
/* ********************************************************************************************* */

BUTTON.TOGGLE-ALL
{
    display:        inline-block;
    padding:        0.25rem 0.5rem;
    margin:         0 0 0.5rem 1.25rem;
    border:         2px solid #704214;  /* deep warm brown */
    background:     #a0522d;            /* rich sienna/dark gold */
    color:          white;              /* readable text */
    border-radius:  0.25rem;
    cursor:         pointer;
    font-weight:    700;
    line-height:    1.1;
}


/* ********************************************************************************************* */
/* Anchors - COPIED FROM: javadoc/stylesheets/List-Frames.css                                                                                      */
/* ********************************************************************************************* */

A
{ text-decoration: none; }

H1 A,
H1 A:visited
{ color: var(--Frames-H1-Anchor) }

H1 A:HOVER,
H1 A:FOCUS
{ color: var(--Frames-H1-Anchor-Hover) }

LI A,
LI A:visited
{ color: var(--Frames-LI-Anchor) }

LI A:HOVER, 
LI A:FOCUS
{ color: var(--Frames-LI-Anchor-Hover) }