.gf_panel {display: inline-block; margin: 4px;}
.gf_panel > div {width: 100%; overflow: auto; resize:both; border: #ddd solid 1px; }
.gf_panel > figcaption {width: 100%; height:2.5em; padding-bottom: 0.2em; padding-left:0.5em; margin-left:0; margin-bottom:0; box-sizing: border-box; display: flex; align-items: center; background-color: #ddd; }
.gf_panel > figcaption img {margin-left: 0.5em;}
.gf_panel > figcaption > input {margin-left: 0.5em; width: 3em;}
.gf_panel > div > textarea { height: 6em; width: 100%}
.gf_panel > div > input { width: calc(100% - 1px)}
#tweak {resize: none;}
#tweak input {width: calc(100% - 2.5em); margin-left: 2em; }
#snow3 {resize: vertical;}

/* use full page width but leave room for sidebar */
.inner { width: calc(100% - 6em); margin-left: 2em; margin-right: 2em; }
#main-content { width: calc(100% - 260px); }
@media (max-width: 767px) {
    .inner { margin-left: 0.5em; margin-right: 0.5em; }
    .inner { width: calc(100% - 1.5em); }
    #main-content { width: 100%; }
}

#main-content > ul, #main-content > ol, #main-content > p, #main-content > h1, #main-content > h2, #main-content > h3, #main-content > h4, #main-content > pre, #main-content > blockquote, #main-content > hr, #main-content > table, #main-content > .deprecated {
    max-width: 690px;
    padding-left: calc((100% - 690px)/2);
}

#main-content > ul, #main-content > ol {
    padding-left: calc(max(1em, (100% - 690px)/2 + 1em));
}