/*!
 * TYPOGRAPHY
 *
 * Text is aligned on multiples of 12px.
 * Font size can vary as long as line height matches 12px boundaries.
 * Normal text (e.g. paragraphs) is 16px text with 24px line height.
 * Headings are larger but have line height and margins locked into 12px multiples.
 */

/*** Basic styles ***/

body {
    background-color: #D4E9F2;
    font-family: Raleway, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 24px 48px;
}
#wrapper {
    margin: 0 auto;
    max-width: 900px;
}

h1, h2, h3, h4, h5, h6 {
    color: #426472;
    font-size: 1em;
    margin: 1.5em 0 0 0;
    text-shadow: 1px 1px 2px #A7B8BF;
}
h1 {
    font-size: 2.5em;
    margin-top: 48px;
}
h2 {
    font-size: 2em;
}
h3 {
    font-size: 1.5em;
    margin: 48px 0 24px 0;
}
h2 + h3 {
    margin-top: 36px;
}
h4 {
    font-size: 1.25em;
    line-height: 1.2;
    margin: 36px 0 24px 0;
}
h1 .version {
    background-color: #426472;
    border-radius: .25em;
    color: #EBF5F9; /* hsl(198, 54%, 95%); */
    font-size: 24px;
    line-height: 2.5;
    margin-left: 24px;
    padding: 4px 12px;
    text-shadow: 1px 1px 2px #456;
    vertical-align: top;
}

p {
    margin: 12px 0 0 0;
}
a {
    color: #333;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}

pre, code {
    background-color: #EBF5F9; /* hsl(198, 54%, 95%); */
    border-radius: 5px;
    color: #8A0F24; /* hsl(350, 80%, 30%); */
    font-family: Monaco,Consolas,'Courier New',monospace;
    font-size: 0.875em;        /* 14px */
    line-height: 1.714285714;  /* 24px */
    margin: 12px 0 0 0;
    padding: 6px 12px;
}
pre {
    white-space: pre-wrap;
}
code {
    margin: 0;
    padding: 2px 5px;
}
pre code {
    font-size: 1em;
    padding: 0;
}
code .comment {
    color: #6D6850; /* hsl(50, 15%, 37%); */
}

ul {
    margin: 12px 0 0 0;
    padding: 0 24px;
}
ul ul {
    margin-top: 0.25em;
}
dl, dt {
    margin: 12px 0 0 0;
}
dd {
    margin-left: 36px;
}
dl.deprecated {
    border-top: 1px dashed #89a;
    font-style: italic;
    margin-top: 11px;
}

.changelog dt {
    font-weight: bold;
}
.changelog .major {
    font-size: 1.5em;
    line-height: 1;
}
.changelog .minor {
    font-size: 1.25em;
    line-height: 1.2;
}

a.forkme {
    background-color: #000;
    border-width: 1px 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    color: #0F0;
    display: block;
    font-family: Monaco,Consolas,'Courier New',monospace;
    font-size: 13px;
    padding: 4px 0;
    position: fixed;
    right: -62px;
    text-decoration: none;
    text-align: center;
    top: 35px;
    width: 220px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 80px 0;
       -moz-transform-origin: 80px 0;
        -ms-transform-origin: 80px 0;
         -o-transform-origin: 80px 0;
            transform-origin: 80px 0;
    -webkit-transition: all 0.3s;
       -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
         -o-transition: all 0.3s;
            transition: all 0.3s;
}
a.forkme:hover {
    text-shadow: 1px 1px 15px #0F0, -1px -1px 15px #0F0;
    box-shadow: 0 0 20px #000;
}

@media screen and (max-width: 768px) {
    a.forkme {
        position: absolute;
        right: -220px;
        top: 0;
        -webkit-transform: rotate(90deg);
           -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
             -o-transform: rotate(90deg);
                transform: rotate(90deg);
        -webkit-transform-origin: 0 0;
           -moz-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
             -o-transform-origin: 0 0;
                transform-origin: 0 0;
    }
}


/*** DEBUG - Grid ***/

body.debug-grid {
    background-image: repeating-linear-gradient(to bottom,
        rgba(0,0,0,0) 0,
        rgba(0,0,0,0) 11px,
        rgba(255,102,0,0.3) 11px,
        rgba(255,102,0,0.3) 12px,
        rgba(0,0,0,0) 12px,
        rgba(0,0,0,0) 23px,
        #f60 23px,
        #f60 24px
    );
    background-size: 100% 24px;
}