1 

     2 /**

     3  * @file

     4  * Basic styling for the Overlay module.

     5  */

     6 

     7 html.overlay-open,

     8 html.overlay-open body {

     9   height: 100%;

    10   overflow: hidden;

    11 }

    12 

    13 #overlay-container,

    14 .overlay-modal-background,

    15 .overlay-element {

    16   height: 100%;

    17   left: 0;

    18   position: absolute;

    19   top: 0;

    20   width: 100%;

    21   z-index: 500;

    22 }

    23 

    24 .overlay-modal-background {

    25   /* Using a transparent png renders faster than using opacity */

    26   background: transparent url(images/background.png) repeat;

    27 }

    28 

    29 .overlay-element {

    30   background: transparent;

    31   left: -200%;

    32   z-index: 501;

    33 }

    34 .overlay-element.overlay-active {

    35   left: 0;

    36 }

    37 

    38 html.overlay-open .displace-top,

    39 html.overlay-open .displace-bottom {

    40   z-index: 600;

    41 }

    42 

    43 /**

    44  * Within the overlay parent, the message about disabling the overlay is for

    45  * screen-reader users only. It is always kept invisible with the

    46  * element-invisible class, and removed from the tab order. Overlay-child.css

    47  * contains styling for the same message appearing within the overlay, and

    48  * intended for sighted users.

    49  */

    50 #overlay-disable-message {

    51   display: none;

    52 }

    53 html.overlay-open #overlay-disable-message {

    54   display: block;

    55 }