/* ============================================================
   R22 CSS additions for rocketsfight.org
   Paste into a site stylesheet (for example altbox.css) or add
   as a new file referenced after MainGreen.css.
   ============================================================ */

/* ------------------------------------------------------------
   1) .box.quiet  -- light grey callout box
   Variant of the theme's .box: very light grey background that
   matches the sidebar band color (rgba(230,235,237,0.25)) and a
   border one pixel wider than the standard .box (2px vs 1px).
   Usage: <div class="box quiet"> ... </div>
   ------------------------------------------------------------ */
.box.quiet {
    background-color: rgba(230, 235, 237, 0.25);
    border: solid 2px rgba(210, 215, 217, 0.75);
    border-radius: 0.375em;
    margin-bottom: 2em;
    padding: 1.5em;
}

    .box.quiet > :last-child,
    .box.quiet > :last-child > :last-child,
    .box.quiet > :last-child > :last-child > :last-child {
        margin-bottom: 0;
    }

/* ------------------------------------------------------------
   2) .image.snug  -- natural-size image that shrinks on mobile
   Renders the image at its natural pixel size, never larger,
   and shrinks it the way .image.fit does when the container
   narrows (phones, portrait tablets). No upscaling on desktop.
   Usage: <span class="image snug"><img src="..." /></span>
   ------------------------------------------------------------ */
.image.snug {
    display: block;
    margin: 0 0 2em 0;
    max-width: 100%;
}

    .image.snug img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
    }