/*  ************************************************************************  *
 *                                  box.css                                   *
 *  ************************************************************************  */

/*  The style sheet and its accompanying script, BOX.JS, support the 
    interactive presentation of a digression in a box. 

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

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

/*  All the HTML author does is put the digression in a DIV with a 
    particular CLASS and optionally an ID. The material that is intended to 
    show in a box is in a nested DIV with another particular CLASS. 

        DIV.Digression          // ID names digression
          ...
          DIV.Box 
          ... 

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

        DIV.Digression
          ...
          DIV.Controls
            BUTTON.Show
            BUTTON.Hide
          DIV.Content
            DIV.Box
          ...

    A simplified layout for the author's HTML persists from old pages. These 
    have no DIV.Box. Everything in the DIV.Digression ends up in the box.  */

/*  ************************************************************************  */
/*  Content Container  */

/*  We want 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 DIV.Box element. 

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

div.Digression div.Content {
    *display:inline;
    *zoom:1;
}

div.Digression div.Box {
    border:1px #C0C0F0 solid;
    display:inline-block;
    *display:block;
    padding:0 1em;
}

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

/*  Elements in the containers can selectively be hidden. CSS parsing 
    would be easier if we let this apply throughout the Digression - 
    but because display is styled above for DIV.Box we need more 
    specificity.  */

div.Digression div.Content .Hidden {
    display:none;
}

/*  ********************************  */
/*  Readability Limit on Line Length  */

/*  Some elements ordinariy have their width limited for readability. See 
    DOCUMENT.CSS. Inclusion in a box comes with padding on the left and 
    right - see above - to push the text from the border. It's hardly vital 
    but it does look neater, if the widths are reduced correspondingly.  */

div.Digression div.Box p {
    max-width:38em;
}

div.Digression div.Box blockquote {
    max-width:34em;
}

div.Digression div.Box ol, 
div.Digression div.Box ul {
    max-width:36em;
}

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