/*  ************************************************************************  *
 *                               controls.css                                 *
 *  ************************************************************************  */

/*  Include after MASTER.CSS and DOCUMENT.CSS. Familiarity with both is 
    assumed.  */

/*  ************************************************************************  */
/*  Buttons  */

/*  Any one button is one control. One or more can be organised into a DIV 
    as a set of Controls.  */

div.Controls button {

    /*  Show the buttons as if raised (given lighting from the top). 

        The linear-gradient is available in Internet Explorer 10 and higher. 
        Earlier versions, back to 5.5, have a non-standard property named 
        filter that does much the same (if the security option "Binary and 
        script behaviors" is not disabled). Keep it in for old browsers for 
        as long as it seems to do no harm. 

        While Expression Web is the word processor, be sure to have filter 
        before the background-image. Otherwise, Expression Web removes it - 
        and any comments that follow it - from the CSS on disk.  */

    background-color:#EEEEEE;
    filter:progid:DXImageTransform.Microsoft.Gradient (startColorStr="#FFFFFF", endColorStr="#EEEEEE", gradientType="0");
    background-image:linear-gradient(180deg, #FFFFFF, #EEEEEE);

    /*  Other styles that we expect to override if the button has a 
        pseudo-class that tells of its progress through some user-interface 
        activity  */

    border:1px #777777 solid;
    color:#0044CC;      /* was #0066CC, but low contrast against #FFFFFF */

    /*  Styles we expect to apply whatever the pseudo-class  */

    border-radius:0.5em;
    font:inherit;
    margin:0.5em 1em 0.5em 0;
    outline:none;
    padding:0.5em 1em;
}

div.Controls button:focus {
    background-color:#DDDDDD;
    filter:progid:DXImageTransform.Microsoft.Gradient (startColorStr="#FFFFFF", endColorStr="#DDDDDD", gradientType="0");
    background-image:linear-gradient(180deg, #EEEEEE, #CCCCCC);
    border:2px #333333 dotted;
}

div.Controls button:hover {
    background-color:#88AACC;
    filter:progid:DXImageTransform.Microsoft.Gradient (startColorStr="#88AACC", endColorStr="#6699CC", gradientType="0");
    background-image:linear-gradient(180deg, #88AACC, #6699CC);
    color:#FFFFFF;
}

div.Controls button:active {
    background-color:#88AACC;
    filter:progid:DXImageTransform.Microsoft.Gradient (startColorStr="#336699", endColorStr="#88AACC", gradientType="0");
    background-image:linear-gradient(180deg, #6699CC, #88AACC);
    color:#FFFFFF;
}

/*  The buttons in a set of Controls that can be disabled and re-enabled 
    jointly while any one of them has been clicked to start a possibly 
    lengthy operation. Disabled buttons show as pale shadows in the hope 
    that users see them as (temporarily) inoperable.  */

div.Disabled.Controls button {
    background-color:#EEEEEE;
    filter:progid:DXImageTransform.Microsoft.Gradient (startColorStr="#FFFFFF", endColorStr="#EEEEEE", gradientType="0");
    background-image:linear-gradient(180deg, #FFFFFF, #EEEEEE);
    color:#CCCCCC;
}

div.Disabled.Controls button:active {
    background-color:#EEEEEE;
    filter:progid:DXImageTransform.Microsoft.Gradient (startColorStr="#CCCCCC", endColorStr="#EEEEEE", gradientType="0");
    background-image:linear-gradient(180deg, #FFFFFF, #EEEEEE);
    color:#CCCCCC;
}

/*  ======  */
/*  Status  */

/*  The general intention regarding a status area is that it follows one or 
    more buttons as one row of controls. Whatever's to show beneath, e.g., 
    whatever the controls operate on, is surely not intended to be on the 
    same row. 

    This arrangement comes for apparently free if the Controls container is 
    a block and the controls are inline (in contrast, for instance, to 
    blocks that are floated left).  */

div.Controls p {
    color:#FF4488;
    display:inline;
    margin-left:1em;
    white-space:nowrap;
}

/*  *************  */
/*  Interactivity  */

/*  Controls can selectively be hidden.  */

div.Controls .Hidden {
    display:none;
}

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