.modalDialog {
    width: 95vw;
    /* display: none;
    The next two lines are a bodge for a map because Google doesn't render the content if the div is not initially displayed.
    The expectation is to call the resize method but that would require JS, which we don't want to have to use */
    position: absolute;
    left: -9999px;
}
    
.modalDialog:target {
    /* display: block;
    The next two lines are a bodge fro a map because Google doesn't render the content if the div is not initially displayed.
    The expectation is to call the resize method but that would require JS, which we don't want to have to use */
    position: relative;
    left: 0px;
}

.modalDialog > div {
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
    
.modalClose {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.modalClose:hover { background: #00d9ff; }