/*  ************************************************************************  *
 *                               tableset.css                                 *
 *  ************************************************************************  */

/*  This style sheet and its accompanying script, TABLESET.JS, support the 
    interactive presentation of a table either as one (typically large) 
    table or broken into categories. 

    Assume prior inclusion of MASTER.CSS, DOCUMENT.CSS and CONTROLS.CSS. 
    Familiarity with all is assumed.  */

/*  ************************************************************************  */

/*  What the HTML author prepares - and what is presented if scripts don't 
    run - is 

        DIV CLASS="TableSet"
            arbitrary nodes, typically for explanatory text 
            TABLE CLASS="Deferred class"
                CAPTION, optionally 
                COLGROUP, optionally 
                THEAD, optionally 
                TFOOT, optionally 
                TBODY TITLE="set1"
                TBODY TITLE="set2"
                ...

    Here, class and set1, set2, etc., are placeholders. Each TBODY defines a 
    category which can be broken out as its own table. The result - which 
    has to be styled here - is 

        DIV CLASS=TableSet"
            arbitrary nodes, typically for explanatory text 
            DIV CLASS="Controls"
                BUTTON
                ...
                BUTTON
            DIV CLASS="Visible Tables"
                DIV CLASS="Controls"
                    BUTTON
                    BUTTON
                TABLE CLASS="Hidden class"
                    COLGROUP, optionally 
                    THEAD, optionally
                    TFOOT, optionally 
                    TBODY TITLE="set1"
                DIV CLASS="Controls"
                    BUTTON
                    BUTTON
                TABLE CLASS="Visible class"
                    COLGROUP, optionally 
                    THEAD, optionally
                    TFOOT, optionally 
                    TBODY TITLE="set2"
                ...
            TABLE CLASS="Hidden class"
                CAPTION, optionally 
                COLGROUP, optionally 
                THEAD, optionally 
                TFOOT, optionally 
                TBODY TITLE="set1"
                TBODY TITLE="set2"
                ...

    Which nodes have Visible or Hidden in their CLASS is under the user's 
    control, except that DIV.Tables and the original TABLE cannot both have 
    Visible concurrently.  */

/*  ************************************************************************  */

/*  The master styling of BUTTON elements in a DIV.Controls is cascaded from 
    CONTROLS.CSS. We keep this styling for the master controls, i.e., the 
    first DIV.Controls. The buttons for the possibly many category tables 
    are to look less prominent. Removing the border does must of this. 
    Reducing what then shows of them does the rest.  */

div.TableSet div.Tables button {
    border:0;
    padding:0.25em 0.5em;
}

div.TableSet div.Tables button:focus {
    border:1px #777777 dotted;
}

/*  =============  */
/*  Interactivity  */

/*  That controls in a DIV.Controls can selectively be hidden is styled in 
    CONTROLS.CSS. The same styling is used for DIV.Tables and for every 
    TABLE in the table set. We're as well to let it apply to any element in 
    the table set.  */

div.TableSet .Hidden {
    display:none;
}

/*  ************************************************************************  *
 *        Copyright © 2021. Geoff Chappell. All rights reserved.              *
 *  ************************************************************************  */