/*  ************************************************************************  *
 *                                 demo.css                                   *
 *  ************************************************************************  */

/*  The style sheet and its accompanying script, DEMO.JS, support the 
    presentation of a script fragment with buttons to show and hide the 
    source code and to run the script. 

    Assume prior inclusion of MASTER.CSS, DOCUMENT.CSS and CONTROLS.CSS.  */

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

/*  What the HTML author prepares is just the code fragment in a PRE block, 
    much as if showing any other source code, but wrapped in a DIV that 
    marks the fragment for demonstration. 

        DIV.Demonstration       // ID names demonstration
          ...
          PRE.Script            // ID names function
          ...

    Elements for interactivity and presentation are built by DEMO.JS: 

        DIV.Demonstration
          ...
          DIV.Controls
            BUTTON.Show
            BUTTON.Hide
            BUTTON.Run
            P.Status
          DIV.Script 
            SCRIPT
            PRE.source
          ...
*/

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

div.Demonstration {
  margin:1em 0;
}

/*  ================  */
/*  Script Container  */

/*  We want that the code fragment is in a box that adjusts to its content. 
    This is straightforward in modern browsers, but Internet Explorer 7 
    implements inline-block only very selectively. The apparently minimal 
    work-around is to have display:inline and zoom:1 on the PRE element. 

    Unfortunately, Expression Web doesn't know the zoom property (that gives 
    layout to the otherwise inline PRE). It then mangles the code fragment 
    at design time. The combined work-around is to shift the basic Internet 
    Explorer 7 work-around to the Script container and keep the PRE as a 
    block for Expression Web.  */

div.Demonstration div.Script {
    *display:inline;
    *zoom:1;
}

div.Demonstration pre {
    border:1px #C0C0F0 solid;
    display:inline-block;
    *display:block;
    margin-bottom:0;
    margin-top:0;
    padding:1em;
}

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

/*  Elements in the containers can selectively be hidden. CSS parsing is 
    surely easier if we let this apply throughout the Demonstration. 

    Beware that because display is styled above for PRE the rule here needs 
    more specificity. This will require a change if ever the rule for PRE 
    specifies the PRE by its CLASS.  */

div.Demonstration .Hidden {
    display:none;
}

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