: #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