#page{
    display: block;
}


/*** page layout ***/

/* main column */
.content, .comments, .comment-form {
    width: 70%;
    max-width: none;
    margin: 0;
    padding: 0 3rem 0;
}

.content, .comment-form {
    padding-bottom: 2rem;
}


/* sidebar in margin */
#sidebar {
    position: relative;
    z-index: 2;
    float: right;
    clear: right;
    width: 30%;
    left: auto;
    top: 0;
    /* torn paper border */
    background-color: none;
    border: 20px solid transparent;
    border-image-source: url(images/backgrounds/torn_paper_border.png);
    border-image-repeat: repeat;
    border-image-slice: 35 fill;
    border-image-outset: 5px;
}

#sidebar .recent, #sidebar .recent-comments  {
    display: block;
}


/* footnotes in margin */
.footdef {
    display: block;
    float: right;
    clear: right;
    /* 42.857% * 70% (width of .content) = 30% (width of margin space)
       (Doesn't account for .footdef being inside p, which is shrunk by
       .content padding. But net effect is effectively to give sensible
       right-padding to .footdef */
    width: 43%;
    margin-right: calc(-43% - 3rem);   /* -3rem for .content padding */
    vertical-align: baseline;
    padding-bottom: 1rem;
}

.footpara {
    display: inline;
}

label.footnote-toggle {
    display: none;
}

a.footref {
    display: inline;
}

a.footref-label {
    display: none;
}


/* footnotes within footnotes expand inline on click */

.footdef label.footnote-toggle {
    display: inline;
    cursor: pointer;
}

.footdef a.footref {
    display: none;
}

.footdef a.footref-label {
    display: inline;
}

.footdef .footdef {
    display: none;
}

.footdef input.footnote-toggle:checked + .footdef {
    display: block;
    float: left;
    clear: both;
    width: 95%;
    margin: 1rem 2.5%;
    vertical-align: baseline;
    position: relative;
}