/*  ************************************************************************  *
 *                                 hifi.css                                   *
 *  ************************************************************************  */

/*  The style sheet and its accompanying script, HIFI.JS, allow for changing 
    a relatively small (lo-fi) image to a larger (hi-fi) image for closer 
    inspection - and back again.  

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

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

/*  What the HTML author prepares is 

        arbitrary parent node 
          A with href for hi-fi image 
            IMG.HiFi with src for lo-fi image 

    See that even if the script doesn't run, the user can get the hi-fi 
    image by clicking on the lo-fi. Even if the script does run, the hi-fi 
    image is not downloaded unless the user wants it. 

    The script initially reworks the DOM tree to 

        arbitrary parent node 
          DIV.HiFi 
            IMG.Small with src for lo-fi image 
            IMG.Large with no src 

    Only when the lo-fi image is first clicked, does the script download the 
    hi-fi image and produce the DOM tree as 

        arbitrary parent node 
          DIV.HiFi 
            IMG.Small with src for lo-fi image 
            IMG.Large with src for hi-fi image 

    and arranges that only one IMG shows at a time, and that clicking on it 
    changes to showing the other.  */

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

/*  For the author's convenience, style the IMG. Without this, Expression 
    Web may show the image with a blue border - and if Expression Web does, 
    then who's to know that some browser won't also?  */

img.HiFi {
  border-width:0;
}

/*  Hint to the user that the IMG is interactive.  */

div.HiFi img {
    cursor:pointer;
}

/*  One or the other image is always hidden.  */

div.HiFi .Hidden {
    display:none;
}

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