: #fff; font-size: 0.875em; font-family: monospace; padding: 0; margin: 0; background: linear-gradient(rgb(251, 220, 220, 0.15), rgb(251, 220, 220, 0.15)), url("/cinnamonbird_cairoovercoat_roxy2alt.png"); } .wrapper { background: none; top: 0; margin: 0 auto; width: 870px; } .sidebar-left, .sidebar-right { width: 175px; } .main { width: 500px; margin-left: 185px; } .sidebar-left { margin-left: 0px; } .wrapper, .links a { color: #4f3d46; } .box { border: 3px double #333; background: #fff; padding: 0; } .header { border: 3px double #333; background: linear-gradient(rgb(251, 220, 220, 0.75), rgb(251, 220, 220, 0.75)); text-align: center; margin-top: 15px; top: 0; height: auto; } .links { margin-top: 1em; } .title { /*suppress title, since we're putting the title as text in the header box*/ display: none; } .footer { height: 0; } .box h1, .box h2, .box h3, .box h4 { background: #facbd8; margin: 0; padding: 0.35em 0.25em 0.3em 0.25em; text-align: center; border-bottom: 3px double #333; } .inner { padding: 0.25em 1em 0.3em 1em; font-size: 1.075em; } /* For narrow screens: slightly narrows sidebars, and makes the width * of the main/center div flexible (sized relative to viewport width.) */ @media(max-width:880px) { .wrapper { width: calc(340px + 50vw); } .sidebar-left, .sidebar-right { width: 160px; } .main { width: 50vw; margin-left: 170px; } } /*Mobile compatibility. Just turns it all into a vertical layout.*/ @media(orientation:portrait) { .wrapper { width: 96vw; margin: 0 auto; padding:0; position: relative; } .wrapper-2 { width: 94vw; margin: 0 auto; padding:0; position: relative; } .sidebar-left, .main, .sidebar-right { position: relative; width: 92vw; margin: 0.25rem 1vw; } }

Meow