body {width: 900px; margin: auto; margin-top: 10px; margin-bottom: 10px; background-color: #fff;}

/* L'en-tête prq */

#en_tete_PRQ
{
   width: 900px;
   height: 125px;
   background-image: url("images/banniere PRQ.jpg");
   background-repeat: no-repeat;
}

#logo {position: absolute; top: 150px; right: 100px;}

/* Le menu PRQ */

#navigation {float: right; font-weight: bold; font-family: arial; font-size: 12px;}

#navigation, #navigation ul{
	height:25px;
	margin:0;
	padding:0;
	margin-top : -15px;
	margin-right : 10px;
    list-style : none; /* on supprime le style par défaut de la liste */
    line-height : 16px; /* on définit une hauteur pour chaque élément */
    text-align : center; /* on centre le texte qui se trouve dans la liste */
}

#navigation a {
    display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
    padding : 5px 4px 0px 4px; /* aucune marge intérieure */
	margin-right : 6px;
    background : red; /* couleur de fond */        
    color : #fff; /* couleur du texte */
	font-size: 1.2em;
    text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    width : auto; /* largeur des boutons */
	height: 25px;
	vertical-align: middle;
	-moz-border-radius: 10px 10px 0px 0px;
	-moz-box-shadow: white 0px 0px 5px;	
}

#navigation ul.second-level li.sousmenu a {
    display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
    background : red; /* couleur de fond */        
    color : #fff; /* couleur du texte */
    text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    width : 150px; /* largeur des boutons */
	height: auto;
	-moz-border-radius: 0;
	-moz-box-shadow: none;
	text-align: left;
	padding-left: 5px;
	border-bottom: 1px solid white
}

#navigation ul li{
	padding: 0;
	list-style:none;
	float:left;
}

#menu li.hover,
#menu li:hover {
	position:relative;
}
#menu li.hover a,
#menu li:hover a{
	background-color: #fff; /* couleur du lien du menu lorsque la souris passe dessus */
	color: black; /* couleur du lien du bouton du menu lorsque la souris passe dessus  */
}

#menu li.hover ul.second-level,
#menu li:hover ul.second-level{
	display:block; /* le sous-menu s'affiche lorsqu'on passe sur le bouton du menu */
}

#menu ul.second-level { /* caractéristiques des sous-menus */
	width:210px;
	height: auto;
	padding-bottom: 10px;
	background: red;
	display:none;
	position:absolute;
	top:48px; /* positionnement du sous-menu par rapport au bouton du menu */
	-moz-border-radius: 0px 0px 10px 10px;
}

#menu ul li a{
	float:left;
	display:block;
	padding:2px 0 2px 0px;
	font-weight: bold;
}

#menu ul ul{
	border-top:2px solid black;
	height: auto;
	width:200px;
	margin:0;
	padding:0 2px 15px;
	display:none;
	position:absolute;
	left:152px;
	top:0;
	z-index:10;
}
#menu ul ul li{
	width:200px;
	background-color: #fff;
}
#menu ul ul li a{
	width:200px;
	float:left;
	display:block;
}

/* L'image sous le menu */

#photo { 
	width: 900px;
	height: 150px;
}

/* Le corps de la page */

#corps { width: 860px; min-height: 470px; margin-top: 10px; padding-left: 20px; padding-top: 1px; padding-bottom: 1px; padding-right: 20px; color: #000000; background-color: #fddedc; background-image: url("images/degrade-corps-rouge.jpg"); background-repeat: repeat-x;}
#corps h1 {margin: 20px; font-size: 1.3em; color: white; text-align: center; font-family: helvetica;}
#corps h2 {margin: 2px; font-size: 1.3em; color: black; text-align: center; font-family: helvetica;}
#corps h3 {margin: 2px; font-size: 1.2em; color: red; text-align: left; font-family: helvetica; }
#corps h4 {margin: 14px;margin-bottom: 30px; font-size: 1em; color: black; text-align: left; font-family: helvetica;}

/* Éléments des sommaires isolés du corps */

#elements_sommaires {width: 600px; height: 140px; background-color: #fff; margin: 10px; -moz-border-radius: 20px;}
#elements_sommaires h3 {padding: 10px; padding-bottom: 0px;}
#elements_sommaires p {padding: 0px 20px 0px 20px; font-family: helvetica; font-size: 0.9em;}
#elements_sommaires a {display: block; width: 600px; height: 140px; text-decoration:none; color: #000;}
#elements_sommaires a:hover {background : red; -moz-border-radius: 20px;}
#elements_sommaires a:hover p, #elements_sommaires a:hover h3 {color : #fff;}

img#droite_petite {position: relative; top: -5px; left: 50px; border: 0;}

/* Éléments isolés du corps */

#elements {width: 550px; background-color: #fff; margin: 30px 15px 15px 15px; padding: 0 30px 20px 20px;-moz-border-radius: 20px; font-family: helvetica;}
#elements h3 {padding: 20px 20px 0px 0px;} 
#elements ul {padding-left: 60px;}

/* Blocs de droite pour accès rapide */

#blocdroite {position: absolute; top: 520px; margin-left: 660px;}
#blocdroite div {position: relative; width: 200px; height: 50px; margin-bottom: 5px; -moz-box-shadow: black 0px 0px 5px;}
#blocdroite a {display: block; width: 200px; height: 50px; background-image: url("testblocdroite.jpg");}
#blocdroite a:hover
#blocdroite a:hover p, #blocdroite a:hover h3 {color: #fff;}

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

#pied_de_page { width: 890px; height: 100px; padding: 5px; margin-top: 10px; text-align: left; font-family: helvetica; font-size: 0.6em; color: #fff; background-image: url("images/footer-rouge.jpg"); background-repeat: repeat-x;}
#pied_de_page .accueil {float: left; width: 50px; margin-right: 15px;}
#pied_de_page .accueil a {display: block; float: left; width: 50px; margin-right: 15px; color: #fd0404; padding-bottom: 4px;border-bottom: 1px solid #fff; text-decoration: none; font-weight: bold;}
#pied_de_page .prq {float: left; width: 180px; margin-right: 15px;}
#pied_de_page .prq a {display: block; float: left; width: 180px; margin-right: 15px; color: #fd0404; padding-bottom: 4px;border-bottom: 1px solid #fff; text-decoration: none; font-weight: bold;}
#pied_de_page .prq ul {margin: 0;padding: 0;list-style-type: none;}
#pied_de_page .prq ul li {margin: 0; width: 180px;}
#pied_de_page .prq ul li a {font-weight: normal; color: #fff; padding: 3px 0; text-decoration: none;}
#pied_de_page .formationsPRQ {float: left; width: 130px; margin-right: 15px;}
#pied_de_page .formationsPRQ a {display: block; float: left; width: 130px; margin-right: 15px; color: #fd0404; padding-bottom: 4px;border-bottom: 1px solid #fff; text-decoration: none; font-weight: bold;}
#pied_de_page .formationsPRQ ul {margin: 0;padding: 0;list-style-type: none;}
#pied_de_page .formationsPRQ ul li {margin: 0; width: 130px;}
#pied_de_page .formationsPRQ ul li a {font-weight: normal; color: #fff; padding: 3px 0; text-decoration: none;}
#pied_de_page .demarches {float: left; width: 80px; margin-right: 15px;}
#pied_de_page .demarches a {display: block; float: left; width: 80px; margin-right: 15px; color: #fd0404; padding-bottom: 4px;border-bottom: 1px solid #fff; text-decoration: none; font-weight: bold;}
#pied_de_page .demarches ul {margin: 0;padding: 0;list-style-type: none;}
#pied_de_page .demarches ul li {margin: 0; width: 80px;}
#pied_de_page .demarches ul li a {font-weight: normal; color: #fff; padding: 3px 0; text-decoration: none;}
#pied_de_page .adresse {float: right; width: 165px; text-align: right;}
#pied_de_page .adresse a {display: block; float: left; width: 165px; margin-right: 15px; color: #fd0404; padding-bottom: 4px;border-bottom: 1px solid #fff; text-decoration: none; font-weight: bold;}
#pied_de_page .copyright {font-family: helvetica; font-size: 0.9em; margin-top: 90px; margin-left: 325px; color: #fff;}
#pied_de_page .copyright a {color: #fff; text-decoration: none; border-bottom: 1px solid #fff;}
