/*
This file defines the style of template content in the managed app.
This content must exist within an <article> element with the class name 'managed'.

This is why all rules in this file should start with article.managed selector,
to ensure that they only apply to the managed content.

This file is expected to be used in conjunction with the site's main CSS files.
Therefore it doesn't provide all styling, as this is left in the site's main CSS files.
*/


/* Images */
article.managed img {
    max-width: 100%;
    display: block;
    margin: 2rem auto;
}
/* Blockquotes */
article.managed blockquote{
    background: rgba(0,0,0,0.1);
    display: block;
    padding: 2rem;
    border-left: 0.5rem solid rgba(0,0,0,0.5);
    font-weight: bold;
    font-style: italic;
}
/* YouTube video
Note: must wrap YouTube code in <div class="youtube-container"> 
*/
article.managed .youtube-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 0px;
    height: 0;
    margin: 4em auto;
}
article.managed .youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Vimeo video 
Note: must wrap Vimeo code in <div class="vimeo-container"> 
*/
article.managed .vimeo-container {
    margin: 4em auto;
}
/* Twitter feed 
Note: must wrap Twitter code in <div class="twitterfeed-container"> 
*/
article.managed .twitterfeed-container {
    overflow: auto;
    margin: 2em auto;
    height: 40rem;
    width: 30rem;
    max-width: 90%;
}