/* @group Module: Content */
@media all {

}

@media print {
    .modContent {
        margin: 1em 0 2em;
    }

    .modContent iframe {display: none;}
    .modContent img { max-width: 100%; height: auto; }

    .modContent .span2,
    .modContent .span1 {
        width: 47%;
        margin-right: 3%;
    }

    .modContent .interval {display: none;}


}

@media screen {
    .modContent {
        margin: 1em 0 2em 0; /* keinen Abstand rechts, damit das Grid innerhalb noch möglich ist - Abstand machen die Subelemente wie t.B. richtext */
    }


    /* enable for floated elements inside */
    .modContent .richtext {
        overflow: hidden;
        margin-right: 10px;
    }
    .modContent .richtext.second {
        padding-left: 20px;
    }


    /* iframe max-width */
    .modContent iframe {
        max-width: 100%;
    }



    /* colored box */
    .modContent .box {
        background: #f5f5f5;
        margin-right: 10px;
    }
    .modContent .box .richtext {
        padding: 1.2em 10px .6em;
    }






    /* content images (mediaX) */
    .modContent img {margin-bottom: 10px;} /* non floated */
    
    .modContent img.inline { margin-bottom: 0} /* non floated images that should be displayed inline (i.e. within a line of text). */

    .modContent .media1,
    .modContent .media2,
    .modContent .media3 { /* floated images (media) - inside grid */
        clear: left;
        float: left;

        margin-right: 10px;
        margin-bottom: 3px;

        max-width: 464px;
        width: auto;
        height: auto;

        -ms-interpolation-mode: bicubic;
    }
    .modContent .media1 {max-width: 227px;}
    .modContent .media3 {max-width: 701px;}

    .skinLayoutCompressed .modContent .media1 {max-width: 178px;}
    .skinLayoutCompressed .modContent .media2 {max-width: 366px;}
    .skinLayoutCompressed .modContent .media3 {max-width: 554px;}

}
/* @end */