.header,
.body,
.footer {
    box-sizing: border-box;
}

/* __________________________________ HEADER __________________________________ */
.header {
    top: 0;
    margin: 0;
    padding-top: @page-margin-top;
    width: 100%;
    height: @header-height;
    text-align: left;
}

.header:after { content: @header-text; }

/* __________________________________ MAIN SECTION __________________________________ */
.body {
    height: @page-height - @header-height - @footer-height;
    width: @page-width;
    margin-bottom: @page-margin-bottom;
    padding-top: @page-margin-top + @header-height;
    padding-bottom: @page-margin-bottom;
    position: absolute;
}

.recipient {
    -webkit-flow-from: myStory;
            flow-from: myStory;
}

#my-story {
    -webkit-flow-into: myStory;
            flow-into: myStory;
}
/* __________________________________ FOOTER __________________________________ */
.footer {
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 100%;
    height: @footer-height;
    text-align: center;
}

.footer:after { content: @footer-text; }

/* mirrored pages */
.paper:nth-child(odd) .header { text-align: right; }
.paper:nth-child(odd) .header,
.paper:nth-child(odd) .body,
.paper:nth-child(odd) .footer {
    padding-left: @page-margin-inside;
    padding-right: @page-margin-outside;
}
.paper:nth-child(even) .header,
.paper:nth-child(even) .body,
.paper:nth-child(even) .footer {
    padding-left: @page-margin-outside;
    padding-right: @page-margin-inside;
}

img { max-width: 100%; }

h1,
h2,
h3,
h4,
h5,
h6 {
    /* Avoids headings to be cut or to be orphans.
     * But it doesn't seem to work
     * if the element after has a page-break-inside avoid. It tries its best! */
    -webkit-region-break-inside: avoid;
    -webkit-region-break-after: avoid;
}

/* AN EXAMPLE TO AVOID PAGE BREAK INSIDE,
 * HERE NO PARAGRAPH WILL BE CUT,
 * BUT YOU MIGHT WANT TO DEACTIVATE THIS */
/* p { -webkit-region-break-inside: avoid; } */