/**
 * Subsite styles
 * (hosted demos, ...)
 */

/**
 * Split view
 * (sidebar + content)
 */

.split {
    display: flex;
}

.split aside {
    width: 350px;
    flex-shrink: 4;
    padding: 8px 16px;
    color: white;
    background: #F44336;
}

.split aside header {
    margin: -8px -16px 0 -16px;
    background: #D32F2F;
}

.split aside header a {
    padding: 8px 16px;
    display: block;
    text-decoration: none;
}

.split aside header:hover {
    background: #C62828;
}

.split aside header img {
    width: 2.5em;
    float: left;
    margin-right: 0.5em;

    border-radius: 100%;
    border: 2px solid white;
}

.split aside header span {
    font-weight: bold;
}

.split aside header:after {
    content: '';
    display: table;
    clear: both;
}

.split aside h1 + h3 {
    margin-top: -1.3em;
}

.split #content {
    width: calc(100% - 350px);
    flex-shrink: 1;
}