/*
    Custom (backend-generated) elements should have display of
    either block or inline-block. 
    inline (the default value for custom elements) is confusing.

    Custom element authors are free to set the default display of their
    element to block. Ie:
    qnc-cms-element[type="my-gallery"] {display: block;}
*/
qnc-cms-element {
    display: inline-block;
}
.qnc-cms-eat-internal-margins:before,
.qnc-cms-eat-internal-margins:after {
    content: '';
    display: block;
    margin-top: 1000px;
    margin-bottom: -1000px;
}

/* Default styles for backdrop added by SimpleModal.js */
.SimpleModalBackdrop {
    background-color: rgba(0,0,0,0.25);
    pointer-events: none;
}
.SimpleModalBackdrop.animating {
    animation: 0.3s ease-in SimpleModalBackdrop;
}
.SimpleModalBackdrop.closing {
    animation-direction: reverse;
    /* make sure the offscreen state persists while backdrop is removed */
    animation-fill-mode: forwards;
}
@keyframes SimpleModalBackdrop {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/*
    By default, the editor adds this class to <img>, <audio>, and <video>.
    We want these to display as full paragraphs/blocks.

    These center themselves by default. It is expected that your cms content 
    will generally be inside some reasonably width-limited container
    (with at least some of the content spanning the full width)

    Feel free to change the vertical margin to match your site's styles.
    Feel free to change margin in specific contexts

    TODO - should we set up element names so that img.qnccms-block is called "block image"?
    Should we show classes in element names?
    I'd almost rather show actual element names and classes throughout editor, using names/titles ONLY in insert menu.
*/
/*.qnccms-block {
    max-width: 100%;
    display: block;
    margin: 0 auto 1em auto;
}*/
/*
    Inside a figure, remove bottom margin
    The figure already has bottom margin
    <figcaption> (if present) will have top margin
*/
/*figure > .qnccms-block {
    margin-bottom: 0;
}*/