/*...*/

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, img {/*pour tous les éléments du site*/
    margin:0px;/*mise à zéro des marges*/
    padding:0px;/*mise à zéro des padding*/
    }  

/*div>*:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}*/

a {
    color: inherit;/*so the links don't take a special color*/
    }
    
.container {/*all containers=header+main+footer*/
    width: 800px;
    margin: 0 auto;/*centre les container//la page*/
    }


.container:last-child:after {/*pour que chaque container englobe tous ses éléments*/
    content: "";/*obligatoire pour faire fonctionner le pseudo-élément*/
    clear: both;/*supprime float et renvoie à la ligne*/  
    display: block;/*force banner à l'envelopper (en évitant de devoir mettre tout banner en float)*/
    height: 0px;/*pour ne pas prendre de place*/
}



#header {/*=banner+menu*/
    width: 100%;/*cover all the screen*/
    height: 142px;/*size of the image used*/
    position: fixed;/*ancré par rapport à la fenetre=>ne défile pas*/
    top: 0;
    background: url(images/header_slice.png) repeat-x;
    }


#banner img {
    width: 220px;/*taille limitée*/
    float: left;/*pour que le titre h1 flotte à coté de lui*/
    margin: 10px 10px 5px;/*positionnement //coin supérieur gauche +légère marge en bas*/
    }
#banner h1 {
    font-family: "Times New Roman", serif;
    font-size: 40px;
    color: rgb(0, 0, 0);
    float: left;/*se met sur le mm plan que le logo=>positionnement, +ne s'étend pas sur toute la page (=>problèmes)*/
    margin: 25px 0 0 10px;/*bien centré par rapport au logo*/
    }
#banner:after {
    content: "";/*obligatoire pour faire fonctionner le pseudo-élément*/
    clear: both;/*supprime float et renvoie à la ligne*/
    display: block;/*force banner à l'envelopper (en évitant de devoir mettre tout banner en float)*/
    height: 0px;/*pour ne pas prendre de place*/
    }


#menu ol {/*toutes les listes du menu*/
    list-style: none;/*pas de style prédéfini*/
}
#menu>ol>li {/*list items du premier niveau. Pas "a" sinon ils flottent hors des "li"*/
    float: left;/*pour que la liste soit horizontale et non verticale*/
}
#menu a {/*tous les liens du menu."a" et non "li"-->soulignage */
    text-decoration: none;/*ne pas souligner les liens*/
    display: block;/*pour pouvoir adjuster le padding*/
    padding: 10.5px 12px;/*pour aller du bleu au-dessus au bas de la navbar*/
    font-family: "Times New Roman", serif;
    font-size: 26px;
    font-weight: bold;
    }    
#menu a:hover {/*lorsqu'on passe sur un lien du menu*/
    background: #4cceff;
    color: #05017F;
    /*border: #048200 outset /*#4cceff;
    border-width: 0 0 1px 8px;
    border-radius: 0 0 0 20px;*/
    }

#menu ol ol {
    display: none;
    position: absolute;
    top: 100%;
    padding: 0;
}


#menu>ol:after {
    content: "";
    clear: both;
    display: block;
}

#menu ol li:hover>ol{
    display: block;
}



#menu ol ol li {
    float: none;
    position: relative;
    background: #0B1935;
}

#menu ol ol li a {
    color: #fff;
    font-size: 18px;
    border: white 1px solid;
    
}



#main {
    margin-top: 142px;/*to scale down from behind the header*/
    width: 100%;/*cover all the screen*/
    background-color: #0b1935;
    font-family: Arial, Helvetica, sans-serif;
    }
#main .container {
    background: #000000;
    border: dashed black 1px;/*permet de mettre les marges pour h2 (pkoi???)*/
    }
#main h2 {/*en principe que titre de page*/
    margin: 30px 30px -30px;/*marge +ajustement//h3*/
    font-size: 33px;
    color: #72CBFF;
    }   
#main h3 {
    font-size: 24px;  
    color: #2B9ADB;
    margin: 50px 10px 10px;
    }  
#main h4 {
    margin: -8px 0 10px 30px;
    font-size: 18px;
    color: #2B9ADB;
    font-style: italic;
    font-weight: 100;
}
#main img {float: left;}
#main .icon {
    height: 20px;
    margin: 0 10px;
}
#main p {
    text-indent: 20px;
    font-size: 16px;  
    color: #fff;
    margin: 10px;
    text-align: justify;
    }


#main .main_image {
    width: 400px;
    margin: 0 20px;
}

#main .logo {
    margin: 0 20px;
    }


#main #home>img:first-of-type {
    float: none;
    margin-left: 200px;
    }

#main #media .inside_window {
    width: 100%;
    height: 500px;
}



#main #team .portraits h3 {
    margin-top: 0;
}
#main #team .portraits {
    width: 215px;/*assez large=>noms sur la mm ligne*/
    border: ridge white;
    padding: 10px 0 10px 10px;/*pour centrer l'image*/
    margin: 8px;
    float: left;
}

#main .miniatures {
    margin: 0 20px 5px 20px;
    border: groove;
}

#main .liste {
    color: #fff;
    margin-left: 50px;
}



#main #contact a {
    text-decoration: underline;
}
#main #contact a:hover {
    color: red;
}
#main #contact .adresse {overflow: hidden;}
#main #contact #map {
    width: 400px;
    margin: 10px;
}

#main #contact #map:hover {
    width: 800px;
    position: relative;
    left: -10px;
}



#footer {
    height: 80px;
    width: 100%;/*cover all the screen*/
    background: rgb(5, 12, 25);
    }
#footer p {
    color: #fff;
    float: left;
    margin: 20px 0 0 40px;
    }