/**
* all and (min-width: 800px)
*
* Anything more than 800px - max device width 1366px.
*/

@media all and (min-height: 800px) {
    body {
        background: url(bg1.svg) no-repeat left top, url(bg2.svg) no-repeat right top;
        background-color: transparent;
        background-attachment: fixed;
        -moz-background-size: auto 100%, auto 75%;
        -o-background-size: auto 100%, auto 75%;
        -webkit-background-size: auto 100%, auto 75%;
        background-size: auto 100%, auto 75%;
    }
}

@media all and (min-height: 1366px) {
    body {
        -moz-background-size: auto 100%, auto 50%;
        -o-background-size: auto 100%, auto 50%;
        -webkit-background-size: auto 100%, auto 50%;
        background-size: auto 100%, auto 50%;
    }
}

.page-wrapper {
    margin: 0 auto;
    padding: 0;
    width: 760px;
    background: transparent;
}

    .page-wrapper::before,
    .page-wrapper::after {
        display: none;
    }

header::before,
header::after,
.summary::before,
.summary::after,
.preamble::before,
.preamble::after,
.design-selection::before,
.design-selection::after,
.design-archives::before,
.design-archives::after,
.zen-resources::before,
.zen-resources::after,
.explanation::before,
.explanation::after,
.participation::before,
.participation::after,
.benefits::before,
.benefits::after,
.requirements > *::before,
.requirements > *::after,
footer::before,
footer::after {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 360px;
    content: '';
}

header::before,
.summary::before,
.preamble::before,
.design-selection::before,
.design-archives::before,
.zen-resources::before,
.explanation::before,
.participation::before,
.benefits::before,
.requirements > *::before,
footer::before {
    top: -600px;
    height: 600px;
    background: url(hook3.svg) no-repeat center bottom, url(layer-frame.svg) no-repeat center 567px;
    -moz-background-size: 300px auto, 360px auto;
    -o-background-size: 300px auto, 360px auto;
    -webkit-background-size: 300px auto, 360px auto;
    background-size: 300px auto, 360px auto;
}

header::after,
.summary::after,
.preamble::after,
.design-selection::after,
.design-archives::after,
.zen-resources::after,
.explanation::after,
.participation::after,
.benefits::after,
.requirements > *::after,
footer::after {
    bottom: -33px;
    height: 33px;
    background: transparent url(layer-frame.svg) no-repeat center bottom;
    -moz-background-size: 360px auto;
    -o-background-size: 360px auto;
    -webkit-background-size: 360px auto;
    background-size: 360px auto;
}

.sidebar {
    float: left;
    clear: left;
}

header,
.summary,
.preamble,
.design-selection,
.design-archives,
.zen-resources,
.explanation,
.participation,
.benefits,
.requirements > *,
footer {
    position: relative;
    float: left;
    margin: 45px 10px;
    padding: 0 50px 15px 50px;
    width: 260px;
    background: url(layer-middle.svg) repeat-y center top;
    -moz-background-size: 360px auto;
    -o-background-size: 360px auto;
    -webkit-background-size: 360px auto;
    background-size: 360px auto;
}

header,
.summary {
    margin-top: 80px;
}

.requirements > * {
    padding: 15px 65px;
    width: 230px;
}
