body {
        font-family : Arial;
        background-color : #F5F5F5;
        min-width : 520px;
        margin : 0;
        padding : 0;
}

#logo {
        float : left;
        margin : 1% 4%;
        letter-spacing : 1.5px;
}
#logo h1 {
        color : #004C99;
}
#logo h2 {
        color : #0066C;
        font-size : 1.5em;
}

#content
{
background-color : #FFF; /* font different */
color : #22303D;
padding : 5% 8%; /* plus agreable a lire et au visuel */
clear : both; /* pas concerne par les float donc retour a la ligne */
border-top : 2px solid #DBE3EB; /* faire ressortir */
border-bottom : 2px solid #DBE3EB;
}
span {
font-weight : bold; /* faire ressortir */
letter-spacing: 1px; /* plus de lisibilite */
color : #003366;
}
a { /* style des liens */
text-decoration : none; /* pas de soulignement */
color : #0066CC;
}
a:hover {
font-weight : bold; /* pour ressortir quand survole */
}
p {
text-align : justify; /* plus beau car bien aligne */
}

#research
{
background-color : #FFF; /* font different */
color : #22303D;
padding : 5% 0%; /* plus agreable a lire et au visuel */
clear : both; /* pas concerne par les float donc retour a la ligne */
border-top : 2px solid #DBE3EB; /* faire ressortir */
border-bottom : 2px solid #DBE3EB;
}
span {
font-weight : bold; /* faire ressortir */
letter-spacing: 1px; /* plus de lisibilite */
color : #003366;
}
a { /* style des liens */
text-decoration : none; /* pas de soulignement */
color : #0066CC;
}
a:hover {
font-weight : bold; /* pour ressortir quand survole */
}
p {
text-align : justify; /* plus beau car bien aligne */
}

nav {
text-align : right; /* tout doit etre a droite */
}

nav ul { /* liste dans la navigation */
margin : 1% 3% 0 0;
padding : 0; /* enleve l'indentation de defaut */
float : right; /* colonne a droite par rapport au logo */
}
nav ul li {
display : inline-block; /* les elements de la liste sont presentes en ligne
mais se comportent comme un block */
}
nav li a {
display : block; /* les liens se comportent comme des block individuels,
cela evite le chevauchement en cas de petite largeur d'ecran */
padding : 1em;
margin : 1em 1.1em;
text-decoration : none; /* enleve le soulignement habituel des liens */
letter-spacing : 1.3px; /* pour plus de lisibilite */
font-size : 0.9em;
color : #F5F5F5;
background-color : #003366;
}
nav li a:hover { /* style des boutons de liens qu'on survole */
background-color : #0066CC;
color : #F5F5F5;
font-weight : normal; /* car on a regle le cas general sur bold */
}
#active { /* element ayant l'id "active" */
background-color : #0066CC;
color : #F5F5F5;
}

#banner { /* une banniere pour la decoration */
background : #003366 url(setup.jpg) repeat center; /* couleur image
repetition */
height : 100px; /* hauteur de la banniere */
background-size : cover; /* prend la largeur de page */
clear : both;
}