@media screen {
    body, header, nav, main, header h1, header p, nav ul, main h2, footer, footer p {
        margin: 0px;

    }
    body {
        font-family: sans-serif;
        font-size: 0.9em;
        margin : 0.5em;
    }
}
@media screen and (max-width:59em) {
    header {
        text-align: center;
        padding-top:1em;
        padding-bottom:1em;
    }
    header::before {
        content:url('/images/logoNat.png');
        
    }
    nav, main {
        padding : 0.5em;
    }
    nav#menu h1 {
        display:none;
    }
     main img {      
        display:block;
         margin-left:40%;
        height: auto;

        margin-right: 1em;
        margin-top: 1em;
        margin-bottom: 1em;
        max-width: 10rem;        
    }
}

@media screen and (min-width:59em) {
    /* blocks positionning */

    main img {
        /*	width : 10em;*/
        height: auto;
        float: left;
        margin-right: 1em;
        margin-top: 1em;
        margin-bottom: 1em;
        max-width: 50%;
        /*width : unset;*/
    }

    header {
        width: 100%;
    }

    header p {
        /*	position : absolute;
	top : 1em;
	right :1em;*/
    }

    nav {
        /*position: fixed;*/
        clear: both;
        float: left;
    }

    main {
        width: 40em;
        float: left;
    }

    footer {
        width: 100%;
        clear: both;
    }

    /* optional presentation refinement */
    header {
        padding-bottom: 1em;
        padding-top: 1em;
    }

    header h1, header p {
        display: inline;
        /*	padding-left : 1em;*/
    }

    header h1, header p {
        padding-left: 1em;
        font-weight: bold;
    }


    nav, main {
        padding-top: 1.5em;
        padding-right: 1em;
        margin: 1em;

    }

    main {
        padding-bottom: 4em;
        margin-bottom: 50%;
    }

    nav {
        padding-bottom: 5em;
    }

    nav ul {
        list-style-type: none;
        padding-left: 1.5em;
        font-weight: bold;
    }

    nav ul ul {}

    main {
        padding-left: 2em;
        padding-top: 2em;
    }

    header {
        padding-bottom: 1em;
    }
}

@media screen {

    /* colors */
    body {
        background-color: #DDF;
        color: #333;
        margin : 1em;
    }

    header {
        background-color: #f5f5f5;
        border-bottom: 1px solid #E5E5E5;
    }

    nav {
        background-color: #fefefe;
        font-size: 80%;
        margin-bottom: 2em;
        border-bottom: 1em;
    }

    main {
        background-color: #fefefe;

    }

    footer {
        background-color: #f1f1f1;
        padding: 3em;
    }

    nav a:hover {
        color: #4183C4;

    }

    h2, h3, h4 {
        clear: both;
    }

    /* djidjo adding (vivien addingue media restriction) */
    @media screen and (min-width:59em) {
        nav h1 {
            text-align: center;
        }
    }

    main .subheader {
        font-size: 60%;
        color: #777;
    }
}

/* djidjo adding */

main img.logothanks {
    width: auto;
    max-width: 200px;
    vertical-align: middle;
    /*float : left;*/
    margin-right: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
    clear: both;
    float: none;
}

main img.helpimage {
    /*width:unset;*/
    max-width: 100%;
}

main p.date {
    font-size: 10pt;
    font-weight: bolder;
}


header p.maintitle {
    font-size: 20pt;
    font-weight: bolder;
}

/* vivien retour à la ligne après une image avant une liste à puce */
main ul {
    /*    clear : both;*/
}

main img.icon {
    /*width:unset;*/
}

main img.what {
    width: 10em;
    max-width: 50%;
}

main ul#accesskeys li {
    display: inline;
    font-size: 9pt;
}

@media print {
    nav {
        display: none;
    }

    header {
        display: none;
    }

}