@font-face {
    font-family: goudy_bookletter_1911regular;

    src: url('fonts/goudy_bookletter_1911-webfont.eot');
    src: url('fonts/goudy_bookletter_1911-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/goudy_bookletter_1911-webfont.woff') format('woff'),
         url('fonts/goudy_bookletter_1911-webfont.ttf') format('truetype'),
         url('fonts/goudy_bookletter_1911-webfont.svg#goudy_bookletter_1911regular') format('svg');

    font-weight: normal;
    font-style: normal;
}



/*
 * Background colors to debug positioning
 */
body > button {
    right: 1em;
    position: fixed;
    top: 1em;
    z-index: 1001;
}

body.debug {}
    body.debug article { background-color: #d0d0ff; }
    body.debug aside { background-color: #ffd0d0; }
    body.debug footer { background-color: #fff0f0; }
    body.debug header  { background-color: #fff0f0; }
    body.debug main { background-color: yellow; }
    body.debug nav { background-color: #f0f0ff; }
    body.debug section { background-color: #f0f0f0; }
    body.debug h1 { background-color: red; }
    body.debug h2 { background-color: #a00000; }
    body.debug h3 { background-color: #800000; }



/*
 * Reset
 */
article, aside, body, div, footer, h1, h2, h3, header, main, nav, p, section, ul, li {
    margin: 0;
    padding: 0;
}



/*
 * General
 */
.surname { font-variant: small-caps; }



/*
 * Positioning
 */
footer { text-align: center; }

header {
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
}

main {
    display: flex;
    flex-direction: row;
    min-width: 40em;
    margin-top: 64px;
}

    main > div { flex: 1; }

        main > div > section {}

            main > div > section > div {
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
            }

                main > div > section > div article { flex: 1; }

                main > div > section > div aside { width: 200px; }

    main > nav { width: 10em; }

        main > nav ul {
            left: 0;
            list-style-type: none;
            position: fixed;
            top: 84px;
            width: 10em;
        }

            main > nav ul li {}

                main > nav ul li a {
                    display: inline-block;
                    width: 100%;
                }



/*
 * Style
 */
footer {
    background-color: #f0f0f0;
    box-shadow: 0 -4px 8px #a0a0a0;
    font-family: goudy_bookletter_1911regular, serif;
    margin-top: 16px;
    padding: 1em;
}


header {
    background-color: #f0f0f0;
    box-shadow: 0 4px 8px #a0a0a0;
    font-family: goudy_bookletter_1911regular, serif;
    height: 64px;
    line-height: 64px;
    white-space: nowrap;
}

    header h1 { font-size: 32px; }


main {}

    main > div {}

        main > div > section {
            border-top: solid 1px black;
            margin: 1em;
        }
        main > div > section:first-child { border-top-width: 0; }

            main > div > section > h2 {
                border-bottom: dotted 1px gray;
                margin-top: 16px;
            }

            main > div > section > div {
                border-radius: 1em;
                padding-left: 1em;
            }
            main > div > section:target > div { background-color: #fff0f0 }

                main > div > section > div article {
                    margin: 1em 0;
                    border-bottom: dotted 1px silver;
                }

                    main > div > section > div article h3 { border-bottom: dotted 1px silver; }

                    main > div > section > div article p {
                        margin: 1em 0;
                        text-align: justify;
                        text-indent: 1.4em;
                        word-wrap: break-word;
                    }

                main > div > section > div aside {
                    background-color: #f0a0a0;
                    border-radius: 1em;
                    box-shadow: -4px 4px 8px #a08080;
                    margin: 1ex 0 0 1em;
                    padding: 1ex;
                }
                main > div > section > div aside:only-of-type { width: 150px; }
                main > div > section:target > div aside { background-color: #f08040; }

                main > div > section > div aside p {
                    overflow: hidden;
                    resize: vertical;
                    text-overflow: ellipsis;
                    word-wrap: break-word;
                }


    main > nav {}

        main > nav ul {}

            main > nav ul li {
                background-color: #80a080;
                box-shadow: 4px 4px 8px #a0a0a0;
                left: 0;
                position: relative;
                transition: left .5s;
            }
            main > nav ul li:hover {
                background-color: #a0f0a0;
                left: 1em;
            }
            main > nav ul li:nth-child(3n+1) { background-color: #f0a080; }
            main > nav ul li:nth-child(3n+1):hover { background-color: #f0f0a0; }

                main > nav ul li a {
                    border-top: solid 1px black;
                    color: black;
                    padding: 1ex 0;
                    text-align: center;
                    text-decoration: none;
                }
                main > nav ul li:first-child a { border-top-width: 0; }


form {}

    form ul { list-style-type: none; }

        form ul li { margin-bottom: 1ex; }

    form label { font-weight: bold; }
    form label:after { content: " :"; }

    form input {}
    form input[type="text"]:disabled { width: 1em; }
    form input[type="text"]:valid { background-color: #c0ffc0; }

        form input:checked + span { display: none; }

        form input:required + span:after {
            color: red;
            content: "*";
        }