Useful stylesheets for layouts done with Plone's Mosaic Editor

Mosaic is a nice way of creating more complex content layouts in Plone. But the default styling might not always fit your needs. For example some of the styles of the Plone default theme are only effect elements inside of #content-core, which does not exists in a mosaic layout.

Some useful stylesheets for Mosaic layouts

/* usefull in content listing tile */
.tileItem .summary-image img {
    float:left;
    width: 128px;
}

/* always usefull to fix some layout issues when using Mosaic */
.mosaic-tile-content {
    img{
        max-width: 100%;
    }
    :first-child {
        margin-top: 0;
    }
}

/* usefull when using collective.tiles.collection */
.collectionTile {
    ul {
        padding-left: 0.5em;
        list-style-type: none;
    }
    li {
        margin-bottom: 0.5em;
        img {
            margin-right: 0.5em;
        }
    }
}