@charset "utf-8";
                                         

#global {
	position: relative;/*  on positionne le conteneur */
	margin-left:50px;
	/*margin-right:auto;*/
	width:780px;
	background-color:#f9fafa;
	border: 1px solid #7f7e83;
	padding:2px;
	border-radius : 7px;
}

body {
	background-color:#eee;
	/*width:748px;*/
	margin:2px;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 11px;
	font-style: normal;
	color: #333333;
	/*border: 1px solid red;*/
}


#header {
	height:125px;
	width: 683px;
	/*ATTENTION§! à modifier pour insérer le lien vers PSud
	penser à styler les liens*/
	background-image:url("../images/bandeau.png");
	background-repeat:no-repeat;
	background-color:##fff;
	margin: 0px 50px 10px 50px;
	border-radius : 5px;
}

#colonne {
	clear: both;
	width:auto;
	hight:auto;
	margin:60px 50px 30px 50px ;
}

.title {
	font-weight:bold;
	color:#3366FF;
	background-color:#99CCCC;
	text-align:center;
	height: 30px;
}


#footer {
	clear: both;
	height:30px;
    width: 680px;
	margin-left: 50px ;
	margin-right: 50px ;
	margin-top:10px;
	margin-bottom:25px;
	/*padding: .5em;*/
	background-color: #f9fafa;
	border-top: 1px solid #00537f;
	text-align:left;
}
	


/* Styles de paragraphes et de polices */

p {	
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color: #434246;
	font-style: normal;
	text-align: justify;
	text-indent: 0px;
	margin: 3px 5px 7px 5px;	
}

/* TITRAILLE */

h1 { 
	text-align: right;
	font-size: 22px;
	font-style: bold;
	font-weight: 800;
	letter-spacing:1px;
	color:rgb(0,153,153);
	margin:10px 0px 30px 0px;
	/*width:auto;*/
}


h2 { 
	font-size: 12px;
	font-weight: bold;
	color: #004870;
	text-align: left;
	line-height:22px;
	/*width:80%;*/
	border-bottom: 2px  solid #85b919;
	border-left: 1px  solid #85b919;
	border-radius:5px;
	margin: 15px 350px 15px 5px;
	padding-left:5px;
	background-color:#eee;
}

h3 {
	font-size: 12px;
	font-weight: bold;
	color:#004870;
	text-align: left;
	line-height:20px;
	border: 1px  solid #7ac141;
	margin:3px 500px 5px 5px;
	padding-left:10px;
	background-color:#eee;
	border-radius:3px;
}

h4 {
	font-size: 13px;
	font-weight:300;
	color: #85b919;
	text-align: left;
	line-height:20px;
	border-bottom: 1px  solid #004870;
	margin: 15px 7px 10px 5px;
	padding-left:5px;
	background-color:#eee;
	border-radius:3px;
}
	
h5 {/*petit titre flashy avant une énumération, par exemple*/
	text-align: left;
	line-height:11px;
	font-size: 11px;
	font-weight:bold;
	color: #00537f;
	padding-left:5px;
	border-left:3px solid #7ac141;
	margin-left:5px;
}
h6 {/*mini-titre en gris*/
	margin: 0px 0px 0px 50px;
	text-align: left;
	line-height:15px;
	font-size: 11px;
	font-weight:bold;
	color: #7f7e83;
	margin-top: 12px;
	margin-bottom: 12px;
	text-decoration:underline;
	/*border-bottom:1px solid #f7931e; pas de soulignement avec border-bottom car ça fait toute la largeur de la page*/
}

/* LES LISTES - penser à spécifier toutes les li:before*/


ul  {/*COORDONNEES des contacts dans les infos*/
	line-height: 16px;
	margin-top:15px 0px 0px 0px;
	padding:0px;
/*si je mets marge à ul, elle s'ajoute à li qui en hérite*/
}
li {	
	list-style:none;
	margin-left:50px;
	padding-left:12px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color: #434246;
	font-style: normal;
	text-align: justify;
	text-indent: 0px;
	margin: 3px 5px 7px 5px;	
	
}
li:before {
   content: "• "; /* caractère UTF-8 */
   color:rgb(0,153,153);  
}


/* MENUS*/
#menu{
	float:left;
	background:#fff;
	border-radius:8px ;
	margin-left:50px;
	height:25x;
}
.menu{
	float:left;
	width:165px;
	text-align:center;
	border-style:double;
	border-radius:5px ;
	border-width:2px;
	border-color:rgb(0,153,153);
	margin:1px;
}


.menu a{
	display:block;
	height:17px;
	padding:7px;
}

.menu a:link, .menu a:visited{
	text-decoration:none;
	color:rgb(0,102,102);
	font-family:verdana, sans-serif;
	font-size:14px;
	/*background:#abc url(fond.jpg) 0 -45px;*/
	background-color:rgb(153,204,204);
	/*border-radius:5px ;*/
}

.menu#activ a:link, .menu#activ a:visited{
	background:#85b919 url(fond.jpg);;
	color: #000000;
}
.menu a:hover, .menu a:active, .menu a:focus{
	background:teal url(fond.jpg) 0 -90px;
	color:white;
}
.menu#activ a:hover, .menu #activ a:active, .menu#activ a:focus{
	background:#85b919 url(fond.jpg);
	color: white;
}

/*

Ce menu possède une seule image dont la position est modifiée en fonction de l'événement déclanché (link, hover). Par un jeu d'identifiant, l'onglet de la page sur laquelle on se trouve se différencie des autres.
Si vous voulez obtenir un résultat optimal, couplez ce menu d'un langage serveur qui détectera la page sur laquelle vous vous trouvez et lui appliquera le bon style en fonction. De ce fait vous n'aurez pas à répéter le menu sur chacune de vos pages.

Ce menu a été conçu intégralement en div et non par l'intermédiaire de listes pour éviter au maximum les différences d'interprétations de celles-ci par les navigateurs, ce qui fait qu'on arrive à un résultat optimal sur la plupart des navigateurs.

Le centrage vertical du texte dans chacun des éléments se fait au pixel près avec la propriété CSS padding-top. A savoir qu'en XHTML 1.0 Strict, le padding s'ajoute à la taille de l'élément sur lequel il est mis, donc pour avoir un div de 20px de hauteur, on lui met 18px avec la propriété height et 2px avec la propriété padding-top.

Valide XHTML 1.0 Strict et CSS 2.1.
*/