System Maintenance CSS

HTML

<div class="shadowBox">
    <h1>System Maintenance</h1>
    <p>Our apologies, but our system is undergoing maintenance or is having capacity problems.  We will be back online shortly.  Thank you for your patience.</p>
</div>

CSS

body {
    font-family: "Helvetica", Arial, sans-serif;
    background: #484848;
    }

:before, :after {content: "";}

.shadowBox {
    border: 1px solid #ccc;
    background: #fefefe;
    margin: 20px;
    padding: 10px;
    text-align: center;
    height: 150px;
    
    /* important CSS */
    border-radius: 5px;
    position: relative;
    }

    .shadowBox:after {
        background: #000;            
        opacity: .5;

        /* important CSS */
        position: absolute;  
        /**
         * Radius = parent's 5px + this padding
         * Set the top & left to be padding * -1.
         */
        padding: 10px;
        border-radius: 15px; 
        top: -10px;
        left: -10px;
        width: 100%;
        height: 100%;
        z-index: -1;
        }

h1 {
    font-size: 29px;
    color: #484848;
    margin-bottom: 10px;
    }