@font-face {
    font-family: 'DejaVu Sans Mono';
    font-style: normal;
    font-weight: 400;
    /* IE6-8 compat */
    src: url('/fonts/DejaVuSansMono-webfont.eot');
    src: local('DejaVu Sans Mono'),
         local('DejaVu Sans Mono Book'),
         local('DejaVuSansMono'),
         local('DejaVuSansMono-Book'),
         url('/fonts/DejaVuSansMono-webfont.woff') format('woff'),
         url('/fonts/DejaVuSansMono-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/DejaVuSansMono-webfont.ttf') format('truetype'),
         url('/fonts/DejaVuSansMono-webfont.svg#dejavu_sans_monobook') format('svg');
}

html {
    font-size: 100%;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {  
    margin:0; 
    padding:0; 
}

@media only screen and (min-device-width : 1080px) {
    body {
        max-width: 75em;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
    }
}
@media only screen and (min-device-width : 600px) {
    .side {
        float: right;
        margin: 0 1em;
    }
}
@media only screen and (max-device-width : 599px) {
    .side {
        display: block;
    }
}
@media only screen and (max-device-width : 329px) {
    .side {
        display: block;
        margin: 0 0 0 -8px;
    }
}


body {
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    margin-bottom: 10px;
    padding: 0 10px;
    min-width: 320px;

    color: #444;
    background-color: #DDD; 

    font-size: 100%;
    font-family: 'DejaVu Sans Mono', monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.618em;  /* 22px */
}

h1, h2, h3, h4 {
    color: #666;
    font-family: 'Source Code Pro', monospace;
    font-weight: 700;
}

h1 {
    font-size: 2.618em;
    letter-spacing: -0.06em;
    line-height: 1.24em;
    margin-top: 0.93em;
    margin-bottom: 0.31em;
}

h2 {
    font-size: 1.618em;
    letter-spacing: -0.04em;
    line-height: 1em;
    margin-top: 1.25em;
    margin-bottom: 0.75em;
    hyphens: auto;
}

h3 {
    font-size: 1em;
    line-height: 1.618em;
    margin-top: 2.427em;
    margin-bottom: 0.809em;
}

p {
    font-size: 1em;
    line-height: 1.618em;
    max-width: 45em; /* 630 px */
    margin: 0 1.25em 1.618em 1.25em; 
    hyphens: auto;    
}

nav > ol {
    list-style: none;
}
nav > ol > li {
    display: inline-block;
}
nav > ol > li:after {
    content: ' / ';
    color: #777;
}
nav > ol > li:last-child:after {
    content: '';
}

nav a {
    color: #444;
    text-decoration: none;
}

nav a:hover {
    color: #111;
    text-decoration: underline dotted #333;
}

header p {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
    margin-left: 0;
}

header h1 + p {
    margin-top: -0.618em;
}

footer {
    margin-top: 1em;
}

footer address {
    font-style: normal;
}

footer address a {
    text-decoration: none;
}

.light {
    color: #777;
}

a {
    color: #36B;
    text-decoration: underline;
    text-decoration-style: dotted;
}


a:hover {
    color: #149;
}

strong {
    font-weight: 700;
    font-family: 'Source Code Pro', monospace;
}