body
{
    width: 1200px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    background-image: url("images/fond_vert.jpg");
    font-family: 'Istok Web', sans-serif;
}

/* L'en-t?te */

#header
{
    width: 100%;
    height: 150px;
    background-image: url("images/banniere.jpg");
    background-repeat: no-repeat;
    margin-bottom: 2px;
    border: 1px solid black;
    border-radius:10px;


}

/* Le menu Haut */

#top_menu
{
    width:100%;
    height:30px;

    margin: 5px;

}

#top_menu a
{
    display:block; /*Pour que le "bloc" soit un vrai bloc*/
    float:left; /*Pour que les blocs soient align?s horizontalement (essayez de l'enlever pour voir)*/
    width:15%; /*J'explique en d?tail apr?s*/
    height:30px; /*La m?me hauteur que notre menu*/
    text-align:center; /*Pour que les liens soient centr?s par rapport ? l'horizontale*/
    background:url('images/bouton.jpg') repeat-x;
    margin-left: 15px;
    border: 1px solid black;
    border-radius:12px;
    text-decoration:none;

}

#top_menu a, #top_menu a:visited    /*on utilisera les propri?t?s qui suivront sur les liens dans menu, et les liens visit?s dans menu*/
{
    color:black;   /*la couleur*/
    text-align:center; /*on le centre horizontalement*/
    padding-top:3px; /*on le centre verticalement*/
}

#top_menu a:hover, #top_menu:visited:hover   /*on utilisera les propri?t?s qui suivront sur les liens survol?s dans menu, et les liens survol?s et visit?s dans menu*/
{
    color:blue; /*la couleur*/
    /*text-decoration:none;  /*on enl?ve le soulignement du lien*/
    opacity:0.9;
    font-weight: bold;
    border:2px green groove;
    color:black;
}

#menu_raid
{
    width:100%;
    height:30px;
    background:url('images/') repeat-x;
    margin-bottom: 2px;
    margin-top: 10px;

}
#menu_raid a
{
    display:block; /*Pour que le "bloc" soit un vrai bloc*/
    float:left; /*Pour que les blocs soient align?s horizontalement (essayez de l'enlever pour voir)*/
    width:48%; /*J'explique en d?tail apr?s*/
    height:26px; /*La m?me hauteur que notre menu*/
    border:none; /*On enl?ve les bordures (enfin, on ne les met pas, m?me s'il n'y en avait pas)*/
    text-align:center; /*Pour que les liens soient centr?s par rapport ? l'horizontale*/
    background:url('images/sous_menu.jpg') repeat-x;
    margin-left: 15px;
    border: 1px solid black;

}

#menu_raid a, #menu_raid a:visited    /*on utilisera les propri?t?s qui suivront sur les liens dans menu, et les liens visit?s dans menu*/
{
    color:black;   /*la couleur*/
    text-align:center; /*on le centre horizontalement*/
    padding-top:3px; /*on le centre verticalement*/
}

#menu_raid a:hover, #menu_raid:visited:hover   /*on utilisera les propri?t?s qui suivront sur les liens survol?s dans menu, et les liens survol?s et visit?s dans menu*/
{
    color:blue; /*la couleur*/
    text-decoration:none;  /*on enl?ve le soulignement du lien*/
}
#submenu
{
    width:100%;
    height:30px;
    background:url('images/') repeat-x;
    margin-bottom: 2px;
    margin-top: 10px;
    margin-left: 8px;

}
#submenu a
{
    display:block; /*Pour que le "bloc" soit un vrai bloc*/
    float:left; /*Pour que les blocs soient align?s horizontalement (essayez de l'enlever pour voir)*/
    width:18%; /*J'explique en d?tail apr?s*/
    height:26px; /*La m?me hauteur que notre menu*/
    text-align:center; /*Pour que les liens soient centr?s par rapport ? l'horizontale*/
    background:url('images/sous_menu.jpg') repeat-x;
    margin-left: 15px;
    border: 1px solid black;
    text-decoration:none;
    border-radius:12px;

}

#submenu a, #submenu a:visited    /*on utilisera les propri?t?s qui suivront sur les liens dans menu, et les liens visit?s dans menu*/
{
    color:black;   /*la couleur*/
    text-align:center; /*on le centre horizontalement*/
    padding-top:3px; /*on le centre verticalement*/
}

#submenu a:hover, #submenu:visited:hover   /*on utilisera les propri?t?s qui suivront sur les liens survol?s dans menu, et les liens survol?s et visit?s dans menu*/
{
    font-weight: bold;
    text-decoration:none;  /*on enl?ve le soulignement du lien*/
}

#menu_partenaires
{
    width:100%;
    height:30px;
    background:url('images/') repeat-x;
    margin-bottom: 2px;
    margin-top: 10px;

}
#menu_partenaires a
{
    display:block; /*Pour que le "bloc" soit un vrai bloc*/
    float:left; /*Pour que les blocs soient align?s horizontalement (essayez de l'enlever pour voir)*/
    width:48%; /*J'explique en d?tail apr?s*/
    height:26px; /*La m?me hauteur que notre menu*/
    border:none; /*On enl?ve les bordures (enfin, on ne les met pas, m?me s'il n'y en avait pas)*/
    text-align:center; /*Pour que les liens soient centr?s par rapport ? l'horizontale*/
    background:url('images/sous_menu.jpg') repeat-x;
    margin-left: 15px;
    border: 1px solid black;

}

#menu_partenaires a, #menu_partenaires a:visited    /*on utilisera les propri?t?s qui suivront sur les liens dans menu, et les liens visit?s dans menu*/
{
    color:black;   /*la couleur*/
    text-align:center; /*on le centre horizontalement*/
    padding-top:3px; /*on le centre verticalement*/
}

#menu_partenaires a:hover, #menu_partenaires:visited:hover   /*on utilisera les propri?t?s qui suivront sur les liens survol?s dans menu, et les liens survol?s et visit?s dans menu*/
{
    color:blue; /*la couleur*/
    text-decoration:none;  /*on enl?ve le soulignement du lien*/
}
/* Le corps de la page */

#main
{
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 1px;
    margin-top:10px;
    padding: 5px;
    min-height: 1000px;
    width:1200px;
    overflow: no-content;

    color: black;
    background-color: white;
    background-image: url("images/fond_corps.jpg");
    background-repeat: repeat;

    border: 2px groove black;
    border-radius:12px;
}
#corps1
{
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 1px;
    padding: 5px;
    height: px;
    float:left;
    color: black;
    background-color: white;
    background-image: url("images/fond_corps.jpg");
    background-repeat: repeat;

    border: 2px solid black;
    border-radius:10px;
}

#corps h1
{
    color: green;
    text-align: center;
    font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
    height: 30px;
    background-image: url("images/titre.png");
    background-repeat: no-repeat;

    padding-left: 30px;
    color: brown;
    text-align: left;
}
#colonnegauche
{
    display:block;
    float:left;
    margin-left: 15px;
    margin-right: px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 0px;
    width: 300px;
    height:1200px;
    color: black;
    background-repeat: repeat-x;
    border: 0px solid black;
}

#colonnehaut
{
    display:block;
    margin-left: 370px;
    margin-right: px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px;
    width: 800px;
    min-height:1000px;
    color: black;
    background-repeat: repeat-x;
    border: 0px solid black;
}

#colonnebas
{
    display:block;
    margin-left: 340px;
    margin-right: px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px;
    width: 830px;
    height:430px;
    color: black;
    background-repeat: repeat-x;
    border: 0px solid black;
}

#corps_gauche1
{

    display:block;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 20px;
    padding: 5px;
    width: 280px;
    height: 400px;
    color: black;
    background-color: beige;
    background-repeat: repeat-x;

    border: 1px solid black;
    border-radius:10px;
}
#corps_gauche2
{

    margin-left: 0px;
    margin-right: 2px;
    margin-bottom: 10px;
    margin-top: 50px;
    padding: 5px;
    width: 280px;
    height: 400px;
    color: black;
    background-color: beige;
    background-repeat: repeat-x;
    border: 1px solid black;
    border-radius:10px;
}



#corps_centre2
{

    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 20px;
    padding: 5px;
    width: 800px;

    color: black;

    background-color: beige;
    background-repeat: repeat-x;

    border: 1px solid black;
    border-radius:10px;
}

#corps_centre3
{
    float:left;
    margin-left: 20px;
    margin-right: 40px;
    margin-bottom: 0px;
    margin-top: 30px;
    padding: 5px;
    min-width: 1000px;
    min-height: 350px;
    color: black;
    background-color:beige;
    border: 1px solid black;
    border-radius:12px;
}

#colonnegauche a
{
    opacity:0.9;

}

#colonnegauche a:hover
{
    opacity:2;

}
/* Le pied de page (qui se trouve tout en bas, en g?n?ral pour les copyrights) */

#footer

{
    padding: 5px;
    clear: both;

    text-align: center;

    color: #B3B3B3;
    background-color: #626262;
    border-radius: 10px;
    background-repeat: repeat-x;
    margin-top:5px;
    border: 2px solid black;
}

/* ======================================================================================================= */

#listephotos
{
    display:block;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    margin-top: 1px;
    padding: 1px;
    width: 100%;
    height:270px;
    color: black;
    background-repeat: repeat-x;
    border: 1px solid black;
}

#blocphoto
{
    display:block;
    float:left;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    margin-top: 1px;
    padding: px;
    width: 48%;
    height:260px;
    color: black;
    background-repeat: repeat-x;
    border: 0px solid black;
}

#blocdescription
{

    display:block;
    float:left;
    margin-left: px;
    margin-right: px;
    margin-bottom: px;
    margin-top: 60px;
    padding: 10px;
    width: 50%;
    height:150px;
    color: black;
    background-repeat: repeat-x;
    border: 0px solid black;
}

h0
{
    color: red;
    text-align: center;
    font-family: Verdana, Arial, "Arial Black", "Times New Roman", Times, serif;
}

h1
{
    color:black ;
    text-align: center;
    font-family: Verdana, Arial, "Arial Black", "Times New Roman", Times, serif;
}

h2
{

    font-family: Verdana, Arial, "Arial Black", "Times New Roman", Times, serif;
}


#countdown
{
    text-align: center;
    font-size: 25px;
    margin:auto;

}


.article
{border:1px solid black;
 margin:15px;
 text-indent:3px;
 border-radius:12px;
 overflow: auto;
 height: 200px;}


p
{
    font-size:18px;
        text-align:justify;
}

ul
{
    font-size:17px;
   alignment-adjust: central;
}

.article p
{margin:3px;
 text-align: justify;
 font-size:15px}

.article a
{

}

.article img{
    float:left;
    margin-left:10px;

}



#mapviewer
{
    position:absolute;
    left:400px;
    top:800px;

    border: 5px black;
    border-radius:10px;
    background-color:beige;
    margin-top:20px;
    clear:both;

}









.article .title
{font-weight: bold;
 font-size: 30px;
 margin-right: 20px;

}

.center
{margin: auto;
 display: block;
 margin-top : 10px;
 margin-bottom : 10px; }



.ileft
{
    transform:rotate(-7deg);
    -ms-transform:rotate(-7deg); /* IE 9 */
    -moz-transform:rotate(-7deg); /* Firefox */
    -webkit-transform:rotate(-7deg); /* Safari and Chrome */
    -o-transform:rotate(-7deg); /* Opera */
    float:left;
    height:150px;
    width:150px;
    margin:20px;
    border-radius:5px;
}


.iright
{
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
    float:right;
    height:150px;
    width:150px;
    margin:20px;
    border-radius:15px;
}


.ct
{
    margin: 100px;
    display: block;
    margin-top : 10px;
    margin-bottom : 10px;
    text-align:justify;}