html{
    font-size:100%;
}

body{
    margin:10px;
    background-color:#FFFFCC;
    max-width:1000px;
    min-width:600px;
}

/*pour les anciennes versions IE*/
header, nav, section, footer{
    display:block;
}

header{
    padding:0px;
}

header img{
    display:inline-block;
    width:100%;
    font:normal bold 150%/200% Verdana,Arial,sans-serif;
    color:blue;
    text-align:center;
}

header p{
    padding:0;
    margin:0;
}

nav{
    display:inline-block;
    width:100%;
    text-align:center;
}

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

nav li{
    display:inline-block;
    width:12%;
    padding:5px;
    margin-top:10px;
    margin-right:10px;
    border-radius:10px;
    background:linear-gradient(#AFAFAF,#000000);
    background:-webkit- linear-gradient(black,gray);
    background:-moz- linear-gradient(black,gray);
    background:-ms- linear-gradient(black,gray);
    background:-o- linear-gradient(black,gray);
}

nav a{
    color:#FFFFCC;
    text-decoration:none;
    font:normal normal 95%/100% "PT sans", Arial, sans-serif;
    letter-spacing:0.02em;
    vertical-align:text-bottom;
}

nav a:hover{
    color:#FFCC00;
    border-bottom:2px solid #FFCC00;
}

section{
    margin:0;
    padding:0;
}

section h1{
    padding:10px;
    text-align:center;
    font:normal bold 150%/110% Arial, sans-serif;
    letter-spacing: 4px;
    text-shadow: 3px 3px 3px grey;
}

section p{
    font:normal normal 90%/140% "PT sans", Arial, sans-serif;
    margin:0;
}

section small{
    font-size:50%;
}

section a{
    color:blue;
    text-decoration:none;
}

section a:hover{
    color:red;
    border-bottom:1px solid red;
}

#courrier{
    background-image:url(iconecourrier.png);
    background-repeat:no-repeat;
    background-position:left;
    background-size:contain;
}

#arobase{
    background-image:url(arobase.png);
    background-repeat:no-repeat;
    background-position:left;
    background-size:contain;
}

#telfixe{
    background-image:url(telfixe.png);
    background-repeat:no-repeat;
    background-position:left;
    background-size:contain;
}

#telportable{
    background-image:url(telportable.png);
    background-repeat:no-repeat;
    background-position:left;
    background-size:contain;
}

.gauche{
    display:inline-block; 
    position:relative;
    left:30%;
    width:15%;
    min-width:8em;
    text-align:right;
    vertical-align:top;
    padding-top:0.8em;
    padding-bottom:0.8em;
    margin:0;
}

.milieu{
    display:inline-block;
    position:relative;
    left:31%;
    width:35%;
    min-width:13em;
    vertical-align:top;
    font-weight:bold;
    padding-top:0.8em;
    padding-bottom:0.8em;
    margin:0;
}

.droite{
    position:relative;
    left:25%;
    width:55%;
    min-width:16em;
    text-align:justify;
    vertical-align:top;
    font:italic normal 90%/130% Arial, sans-serif;
    margin-bottom:1em;
}


footer{
    margin-top:5px;
    border-top:1px solid green;
    width:100%;
    text-align:center;
}

footer p{
    font:normal normal 70%/100% Verdana, Arial, sans-serif;
    color:green;
    text-align:left;
    line-height:130%;
}


footer ul{
    display:inline-block;
    list-style-type:none;
    text-align:left;
    
}

footer ul strong{
    color:green;
    font:normal bold 70%/100% Verdana, Arial, sans-serif;
}

footer li{
    display:inline-block;
    padding-right:20px;
    padding-left:20px;
    vertical-align:top;
    
}

footer a{
    color:blue;
    text-decoration:none;
}

footer a:hover{
    color:red;
    border-bottom:1px solid red;
}

.mentions{
    text-align:center;
    margin-top:0;
}

.new{
    text-align:center;
    color:red;
}

.attention{
    font-size:250%;
    vertical-align: bottom;
}

.red{
    color:red;
}