/* the overlayed element */
.blackOverlay
{
    /* initially overlay is hidden */
    display: none; /* growing background image */
    background-image: url(../images/black.png); /*  		width after the growing animation finishes 		height is automatically calculated 	*/
    width: 640px; /* some padding to layout nested elements nicely  */
    padding: 35px; /* a little styling */
    font-size: 11px;
}

.whiteOverlay
{
    /* initially overlay is hidden */
    display: none; /* growing background image */
    background-image: url(../images/white.png); /*  		width after the growing animation finishes 		height is automatically calculated 	*/
    width: 640px; /* some padding to layout nested elements nicely  */
    padding: 35px; /* a little styling */
    font-size: 11px;
}

.whiteTallOverlay
{
    /* initially overlay is hidden */
    display: none; /* growing background image */
    background-image: url(../images/whiteTall.png); /*  		width after the growing animation finishes 		height is automatically calculated 	*/
    width: 600px; /* some padding to layout nested elements nicely  */
    padding: 35px; /* a little styling */
    font-size: 11px;
}

.whiteWideOverlay
{
    /* initially overlay is hidden */
    display: none; /* growing background image */
    background-image: url(../images/whiteWide.png); /*  		width after the growing animation finishes 		height is automatically calculated 	*/
    width: 400px; /* some padding to layout nested elements nicely  */
    padding: 35px; /* a little styling */
    font-size: 11px;
}

/* default close button positioned on upper right corner */
.blackOverlay .close, .whiteOverlay .close, .whiteTallOverlay .close, .whiteWideOverlay .close
{
    background-image: url(../images/close.png);
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
    height: 35px;
    width: 35px;
}