/* NEW WAY TO MAKE NEW IMAGE LARGE - JQUERY DOES THE FIND AND REPLACE AND THEN THIS STYLE FADES IT IN TO MASK THE BRIEF IMAGE BLUR BEFORE THE SCRIPT FIRES */

#content-body img.newsImage {width: 100%; max-width: 100%; visibility: visible;
    animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}
@keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes fadein { /* Firefox */
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {opacity:0;}
    to {opacity:1;}
}
@-o-keyframes fadein { /* Opera */
    from {opacity:0;}
    to {opacity:1;}
}


/* ------------------------------------------- NOT CURRENTLY USED ---------------------------
The following styles make a news item's default image larger on the page by hiding the inline image and setting the default image as the background of the newsImageContainer.  For some reason, it doesn't work to import this as a style sheet in the site-wide CSS and since placing  CSS there breaks other imports, need to find another solutuon to set background-image: url("image"); 

#content-body img.newsImage {
    visibility: visible; 
    width: 100%;
    max-height: 340px;
    margin-left: 0px;
} 

div.newsImageContainer a {width: 810px; border: 0px solid red;}

#content-body div.newsImageContainer {
    width: 100%;
    background-color: #eee;
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-size: cover;
    margin-bottom: 15px;
    display: block;
}
----------------------------------------------------- */

#content-body div.newsImageContainer {margin-left:0px; float: none; width: 100%;}

#content-body div.newsImageContainer p.discreet { /* restyle the caption */
    display: table-caption;
    caption-side: bottom;
    background-color: rgba(40, 40, 40, 0.7);
    color: white;
    font-weight: normal;
    font-size: 70%;
    margin: 0;
    padding-left: 10px;
    width: auto;
}

#document-description {display: none} /* hides the description on THE PAGE only, but make sure you still put a description in the field so it shows up in the collection */

footer.white {
    background-color: #000;
}