@charset "UTF-8";
/* 
  S. Bouchard / 27.06.2014
  F. Frey / 13.03.2015
  La règle @ CSS @charset définit l'encodage des caractères utilisés dans 
  la feuille de style. Elle doit être le premier élément de la feuille de 
  style et ne doit être précédée par aucun caractère.

  Ici, remplacement du positionnement float par un dispaly inline-block.
  Il faut dimensionner la largeur correctement pour que ces deux blocs
  soient sur la même ligne.
  Les éléments inline-block se positionnent sur la même ligne de base (appelée
  baseline), en bas. inline-block permet d'utiliser la propriété vertical-align
  normalement réservée aux tableaux.
*/

/* Bonne pratique : mettre à zéro les marges de TOUS les éléments HTML */
* {
    margin:0px;
    padding:0px;
}
body{
    background-color: #DEDEDE;
    color: #777;
    font-family: Verdana, sans-serif;
    font-size: 12px;
}
h1{
    font-size: 1.75em;
}
#conteneur{
    width: 1000px;
    margin: 15px auto;
    padding: 5px;
    border: 1px solid #06C;
    background-color: white;
}
header{
    width: 990px;
    height: 175px;
    margin: 5px;
    background-image: url('images/ex31-banner.jpg');
}
nav{
    display: inline-block;
    width: 180px;
    margin: 5px;
    padding: 5px;
    vertical-align: top;
}
nav > h1{
    padding-left: 10px;
    border-bottom: 1px dotted #39F;
    line-height: 1.5em;
}
nav > ul{
    list-style: none;
}
nav > ul > li{
    border-bottom: 1px dotted #39F;
}
nav a{ 
    display: block;
    line-height: 2em;
    padding-left: 10px;
    color: #777;
    font-weight: bold;
    text-decoration: none;
}
nav a:first-letter{
    text-transform: uppercase; 
}
nav a:hover{
    background-color: #43779C;
    color: #E1FDFF;
}
section{
    display: inline-block;
    width: 759px;
    margin: 5px;
    padding: 1em;;
    border: 1px dashed black;
    background-color:#EEE;
}
section > h1{
    margin-bottom: 0.5em;
}
section > p{
    margin-bottom: 0.75em;
}
footer{
    padding: 5px 0;
    color: #ABABAB;
    font-size: 10px;
    text-align: center;
}