body, p, tr, td, h1, h2, h3, h4, h5, h6, #menu ul, #menu li {
    margin: 0;
    padding: 0;
    text-indent: 0;
}
html { background: #ccc; }
body { background: transparent; }
#page {
    width: 60em;
    background: #fff;
    color: #000;
    margin: 2em auto 0 auto;
}
#top {
}
#langselect {
    display: none; /* not implemented yet */
    text-align: right;
    font: 100% sans-serif;
    padding: 0.5em;
    margin-bottom: -2em;
}
#langselect span, #langselect a {
    padding: 0.5em;
}
#langselect a { text-decoration: none; color: #000; }
#langselect a:hover, #langselect a:focus { text-decoration: underline; }
#top h1 {
    font: 200% sans-serif;
    text-align: center;
    padding: 1em;
    color: #999;
}
#menu {
}
#menu li {
    list-style-type: none;
    display: inline;
}
#menu ul, #menu li a {
    background: #666;
    color: #fff;
    font: 110% sans-serif;
    font-weight: bold;
}
#menu li a {
    display: inline;
    display: inline-block;
    padding: 1em;
    text-decoration: none;
}
#menu li a:hover, #menu li a:focus {
    background: #999;
}
#content {
    padding: 1em;
    padding-bottom: 3em;
    font-family: sans-serif;
}
#content img {
    display: block;
    border: none;
    margin: 0 auto;
    max-width: 100%;
}
#content h1 { margin-top: 1em; }
#content h2 { margin-top: 0.8em; }
#content h3, #content h4 { margin-top: 0.7em; }
#content p { margin-bottom: 0.7em; }
#page {
    position: relative;
}
#footer {
    display: block;
    position: absolute;
    bottom: 1em;
    left: 1em;
    right: 1em;
    line-height: 1em;
    text-align: center;
    color: #999;
    font: 100% sans-serif;
}


@media(max-width: 61em) {
    #page {
        width: auto;
        margin: 0;
    }
}
@media(max-width: 50em) {
    #top h1 {
        padding: 0.75em;
    }
    #menu {
        text-align: left !important;
    }
    #menu li {
        display: inline-block;
        width: 49%;
    }
    #menu li a {
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    #langselect, #langselect span, #langselect a {
        padding-top: 1em;
        padding-bottom: 1em;
    }
}
@media(max-width: 30em) {
    #top h1 {
        padding: 0.4em;
    }
    #langselect { text-align: center; margin-bottom: -1.5em; }
    #menu li {
        display: block;
        width: 65%; /* right side can be used for scrolling */
    }
    #menu li a {
        text-align: left;
    }
}
@media(max-width: 12em) {
    #top h1 {
        padding: 0.25em;
    }
    #menu li {
        width: 100%;
    }
    #menu li a {
        font-size: 100%;
        padding: 1em 0.5em;
    }
}
@media(max-height: 30em) {
    #top h1 { padding: 0.25em; }
    #menu li a { font-size: 100%; padding: 1em 0.5em; }
}
@media(max-height: 20em) {
    #top h1, #menu ul { font-size: 100%; }
}