/* customize the interlude styles for the keyboards */

.interlude {
    /* disable avoid page break for this piece only, since it makes PDF layout problematic */
    page-break-inside: auto;
}

.interlude figure {
    max-width: 32rem;
    /* ensure images are centered within the interlude */
    margin-left: auto;
    margin-right: auto;
}

/* NOTE: disabling to improve PDF rendering
.interlude p:first-child {
     margin-bottom: 0;
}*/

@media print {
    body.article iframe {
        width: 95%;
        margin-bottom: 0;
    }
}

/* explicitly set heights for embedded keyboards to make sure the full content displays */
/* TODO: convert to rem? */
@media screen {
    #kb-s01 { height: 240px; }
    #kb-s02, #kb-s03, #kb-s04 { height: 320px; }
    #kb-s05, #kb-s06, #kb-s07 { height: 420px; }
    #kb-s08 { height: 520px; }
    #kb-s09 { height: 560px; }
}

@media print {
    body.article iframe {
        overflow: hidden;
        width: 99%;
        margin: 0;
    }
    body.article article ol, body.article article ul {
        line-height: 1rem;
    }
    #kb-s01 { max-height: 220px; }
    #kb-s02, #kb-s03, #kb-s04 { max-height: 280px; }
    #kb-s05 { max-height: 375px; }
    #kb-s06 { max-height: 405px; }
    /* This height is necessary for kb-s07 so that input is not cutoff */
    #kb-s07 { max-height: 390px; }
    #kb-s08 { max-height: 490px; }
    #kb-s09 { max-height: 530px; }
}