/* soft reset */
html, body, form {
margin: 0;
padding: 0;
}
*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html{
font-size: 62.5%;
background: #F0EDE1;
/* background: rgba(129,108,88,.5);
background: #816C58;
background: rgba(226,220,196,1);*/
}
body{
font-size: 1.6em;
line-height: 1.5;
padding-top: 1.5em;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', Verdana, 'Verdana Ref', sans-serif;
color: #362418;
/* --- vertical rhythm background image --- */
background: -moz-linear-gradient(top, #E7E3CF .1em, transparent .1em );
background-image: -webkit-linear-gradient(#E7E3CF .1em, transparent .1em);
background-size: 100% 1.5em;
/* --- */
}
.box{
margin-top: 1.5em;
background: rgba(132,30,30, .75);
color: #F0EDE1;
padding: 1.5em ;
}
.box p{margin: 0;}
h1, h2, h3{
color: #841E1E;
}
.txtcenter{
text-align: center;
}
p, ul, ol, dl, blockquote, pre, td, th, label, textarea, caption {
font-size: 1em; /* equiv 14px */
line-height: 1.5em;
margin: 1.5em 0;
}
h1, .h1-like{
font-size: 1.8571em; /* equiv 26px */
line-height: 1.6154em;
margin: 1.6154em 0 .8077em 0;
}
h2, .h2-like{
font-size: 1.7143em; /* equiv 24px */
line-height: 1.75em;
margin: 1.75em 0 .875em 0;
}
h3, .h3-like{
font-size: 1.5714em; /* equiv 22px */
line-height: 1.909em;
margin: 1.909em 0 .9545em 0;
}
h4, .h4-like{
font-size: 1.4286em; /* equiv 20px */
line-height: 1.05em;
margin: 2.1em 0 1.05em 0;
}
h5, .h5-like{
font-size: 1.2857em; /* equiv 18px */
line-height: 1.1667em;
margin: 2.3334em 0 1.1667em 0;
}
h6, .h6-like{
font-size: 1.1429em; /* equiv 16px */
line-height: 1.3125em;
margin: 2.625em 0 1.3125em 0;
}
.smaller{
font-size: .7143em; /* equiv 10px */
line-height: 2.1em;
margin: 2.1em 0 2.1em 0;
}
.small{
font-size: .8571em; /* equiv 12px */
line-height: 1.75em;
margin: 1.75em 0 1.75em 0;
}
.big{
font-size: 1.1429em; /* equiv 16px */
line-height: 1.3125em;
margin: 1.3125em 0 1.3125em 0;
}
.bigger{
font-size: 1.2857em; /* equiv 18px */
line-height: 1.1667em;
margin: 1.1667em 0 1.1667em 0;
}
.biggest{
font-size: 1.4286em; /* equiv 20px */
line-height: 1.05em;
margin: 1.05em 0 1.05em 0;
}
/* avoid collapsing margins
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
margin-top: 0;
}*/
/* avoid last paragraph bottom margin */
p:last-child, ul:last-child, pre:last-child {
margin-bottom: 0;
}
/* avoid supp margin on nested elements */
li p, li ul{
margin-top: 0;
margin-bottom: 0;
}
/* you shall not pass */
textarea, table, td, th, code, pre, samp, div, p {
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
code, pre, kbd, samp {
white-space: pre-wrap;
font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
}
input, button, select, option{
line-height: 1;
border: 0;
box-shadow: 0 0 1px #362418;
padding: 0;
}
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
font-family: inherit;
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
button,
input {
line-height: normal; /* 1 */
}
.container { max-width: 960px; padding: 0 1em; margin: 0 auto; overflow: hidden;}
#v-rhythm input[type="text"]{
max-width: 2em;
}
code{
line-height: 1em;
}
#method input{margin-left: .75em;}
#method input[type=radio]:checked + pre{
background: #E7E3CF;
}
#method .h6-like{
margin-top: 1.3125em;
}
a{
color: #841E1E;
}
a:visited{
opacity: .8;
}
@media screen and (min-width: 46em){
/* =============================================================================
Grid
========================================================================== */
/*
* Example uses:
*
*
*
*
*/
/* Grid core
========================================================================== */
/*
* Grid container
* Must only contain `.grid` or `.grid__cell` components as children.
*/
.grid {
display: block;
padding: 0;
margin: 0 -1.5em;
/* Ensure consistent default alignment */
text-align: left;
/* Remove inter-unit whitespace for all non-monospace font-families
* If you're using a monospace base font, you will need to set the `grid`
* font-family to `sans-serif` and then redeclare the monospace font on
* the `grid__cell` objects.
*/
letter-spacing: -0.31em;
word-spacing: -0.43em;
/* Protect against WebKit bug with optimizelegibility */
text-rendering: optimizespeed;
}
/*
* Child `grid` object adjustments
* Used for more complex fixed-fluid hybrid grids
*/
.grid > .grid {
overflow: hidden;
margin-right: 0;
margin-left: 0;
}
/*
* Grid units
* No explicit width by default. Apply `.unit-x-y` classes.
*/
.grid__cell {
width: 100%;
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0 1.5em;
/* controls vertical positioning of units */
vertical-align: top;
/* keeps unit content correctly aligned */
text-align: left;
/* reset text defaults */
letter-spacing: normal;
word-spacing: normal;
text-rendering: auto;
}
/*
* Modifier: horizontally center all grid units
* Allows for automatic unit centering irrespective of the number of
* units in the grid.
*/
.grid--center {
text-align: center;
}
/*
* Modifier: horizontally center one unit
* Set a specific unit to be horizontally centered. Doesn't affect
* any other units. Can still contain a child `grid` object.
*/
.grid__cell--center {
display: block;
margin: 0 auto;
}
/* 2, 3, 4 column grids */
/* Proportional units
========================================================================== */
/*
* Specify the proportional width of an object.
* Primarily for, but not limited to, use with `.grid__cell` components.
* Intentional redundancy build into each set of unit classes.
*/
.unit-1-2, .unit-2-4 {
width: 50%;
}
.before-1-2, .before-2-4 {
margin-left: 50%;
}
.unit-1-3 {
width: 33.333%;
}
.before-1-3 {
margin-left: 33.333%;
}
.unit-2-3 {
width: 66.667%;
}
.before-2-3 {
margin-left: 66.667%;
}
.unit-1-4 {
width: 25%;
}
.before-1-4 {
margin-left: 25%;
}
.unit-3-4 {
width: 75%;
}
.before-3-4 {
margin-left: 75%;
}
}