/*---------------------------------------------------------------------------------------------------
!                 Feuille de style (CSS2) développée, écrite et commentée                      !
!	      par Josée Valérie Murat  pour le site FromCantoCanvas.fr                     !
-----------------------------------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------------------------------
+				ELEMENTS  PRINCIPAUX  			                  +
-----------------------------------------------------------------------------------------------------*/

body { /* La totalité de l'écran */
	margin: 0;
	padding: 0;
	text-align: center;
	background: rgb(255,255,255);
	width: 100%;  
}
div#page { /* La page du site contient absolument tous les autres éléments */
	margin-top : 0px;
	margin-left: auto;
	margin-right: auto; 	
	padding-top: 0px; 
	width: 780px;
	/* height: 900px; */
	background-image: url("log5.jpg");
	background-repeat: no-repeat;
	/* background: rgb(244,245,249); */
	color : #0998f6; 
	font-family : arial, sans-serif; 
	font-size: 95%; 
}

/* ---------------------------------------------------------------------------------------------------
+				  Menu d'accessibilité     			                  +
-----------------------------------------------------------------------------------------------------*/

div#Accessibilite {
	margin-top: 0;
	margin-bottom : 0px;
	background : transparent;
	text-align: right;
}
ul.accessible {
	padding-left: 0pt; 
	width: 100%;
	display : inline; 
	list-style-type : none;
	background: transparent;
	color : rgb(76,76,76); 
	font-size: 80%;
	padding-top : 1pt;  
	overflow : auto; 
}
ul.accessible li {
	display : inline; 
	background : transparent; 
	list-style-type : none;
 	padding : 1%; 
	overflow : auto; 
}
ul.accessible li a {
	text-decoration: none; 
	background: transparent;
	color : rgb(76,76,76);
}
ul.accessible li a:hover {
	text-decoration: underline; 
	background: transparent;
	color : #0998f6;
}

/* ---------------------------------------------------------------------------------------------------
+				           Bandeau titre     	    		                             +
-----------------------------------------------------------------------------------------------------*/

div#header { 
	margin-top : 0;
	margin-left : 275px;
	padding: 0;
	width: 500px;
	height:100px;
	background: transparent;	
	text-align: right;
	border-bottom : solid 1px gray; 
/* 	color: gray; */
	font-size: 80%;
}
p.gros_titre {
	margin-top: 20px;
	padding: 0px;
	font-size: 200%;
	font-weight: bold;
	} 
p.petit_titre {
	margin-top: -15px;
	padding: 0px;
	font-size: 122%;
	font-weight: bold;
	color: black;
	}
sup.petit_titre {
	margin-top: 2px;
	line-height: 2%; 

/* 	padding: 0px;
	font-size: 122%;
	font-weight: bold;
	color: black; */
	} 
/* div#header p {display: none;} */

/* ---------------------------------------------------------------------------------------------------
+	            Menu principal horizontal (les différents services)   	                  +
-----------------------------------------------------------------------------------------------------*/

div#menu {
	margin-top: -1%; 
	margin-left: 0%;
	margin-right: 0%;
	background-attachment: fixed;  
	text-align : center; 
/* 	border-top : solid 1px black; 
	border-bottom : solid 1px black;  */
	background : transparent; 
	color: gray; 
    font-size: 92%;
}
ul.barre { /*  Egalement présent dans le menu de bas de page div#bas */
	padding-left: 0pt; 
	width: 100%;
	display : inline; 
	list-style-type : none;
	background: transparent;
	color : gray; 
	text-align : center; 
	font-size: 100%;
	padding-top : 0pt;  
	overflow : auto; 
}
ul.barre li {
	display : inline; 
	background : transparent; 
	list-style-type : none;
	font-size: 120%;
 	padding : 6pt; 
	overflow : auto; 
}
ul.barre li a {
	text-decoration: none; 
	background: transparent;
	color : rgb(76,76,76);
}
/* ul.barre li a.hfocus { 
	background : white;
	border-top : solid 1px rgb(219,221,233);
/* 	border-bottom : dotted 1px navy; */
	/* border-right: solid 1px white;
	color: #0998f6;
	list-style-type : none; 
}  */ 
 ul.barre li a:hover {
	text-decoration: underline; 
	background: transparent;
	color : #0998f6;
} 
/* ---------------------------------------------------------------------------------------------------
+		           Menu secondaire vertical gauche (les outils)     		        +
-----------------------------------------------------------------------------------------------------*/

div#drop { 
	margin-top: 2%; 
	margin-left: 0;
	margin-right: 3%;
	padding: 0px;
	float: left;
	width: 20%;
	height: 100%;
	background:  rgb(241,241,250);
	border-top : solid 1px white;
	border-right : solid 1px rgb(219,221,233); 
	color : rgb(120,3,81);
	text-align: left;
	font-family : arial, sans-serif; 
}
#drop ul{
	background: transparent;
	color : rgb(120,3,81);
	font-family: arial, sans-serif;
	margin-left : 0px;
	padding-top : 1pt;  
	padding-left : 0px;
	width: 80%;
	text-align: left;
}
#drop ul li { 
	background : transparent;
	margin-left : 4px;
	margin-bottom: 1px;
	padding: 4px;
	border-top : solid 1px rgb(241,241,250);
	border-right: solid 1px rgb(241,241,250);
	list-style-type : none; 
	text-align: left;
}
#drop ul li.focus { 
	background : rgb(250,250,248);
	margin-left : 4px;
	margin-bottom: 1px;
	padding: 4px;
	border-top : solid 1px rgb(219,221,233);
	border-right: solid 1px white;
	list-style-type : none; 
} 
/* div#drop ul li { 
	padding: 5px;
    width: 100%;
	list-style-type: none;
	text-align: left;
} */
div#drop a {
	color : #0998f6;
	text-decoration: none; 
}
div#drop a:hover {
	text-decoration: underline; 
}
div#drop ul li.focus a  {
	border-bottom : dotted 1px navy;
	color: navy;
}

/* ---------------------------------------------------------------------------------------------------
+		              Zone de corps de texte de chaque page     	                  +
-----------------------------------------------------------------------------------------------------*/

div#photo { /*photo exceptionnelle à mettre en avant */
	background: white;
	/* color: rgb(190,4,4); */
	/* width : 215px; */
	margin-left : 2%;
	margin-right : 25%;
	margin-top : 5%;
	margin-bottom : 2%;
	/* border : solid 1px red; */
	/* font-weight: bold; */
	font-family : arial, sans-serif; 
	font-size: 120%;
	text-align: center;
}
div#photo p  {
	color : rgb(76,76,76);
	font-weight: normal;
	/* margin-bottom: 55px; */
	margin-right : 95%;
}

div#signal { /*Info exceptionnelle à mettre en avant */
	background: white;
	color: rgb(190,4,4);
	/* width : 215px; */
	margin-left : 3%;
	margin-right : 3%;
	margin-top : 7%;
	margin-bottom : 2%;
	border : solid 1px red;
	font-weight: bold;
	font-family : arial, sans-serif; 
	font-size: 120%;
	text-align: center;
}
div#signal p.norme{
	color : rgb(76,76,76);
	font-weight: normal;
	margin: 5px;
}
div#signal p.norme a{
	color : navy;
	font-weight: normal;
	text-decoration: underline;
	margin: 0px;
}

div#corps { 	
	margin-top: 5%; /*Cela marche mieux pour IE6 et n'est pas trop génant pour les autres navigateurs*/
	margin-left: 0;
	margin-right: 0px;
	padding: 1%; 
	width: 760px;
	height: 98%;
	min-height: 400px;
	/* background: rgb(246,246,249);*/
	color : rgb(76,76,76);  
 	/* border : solid 1px #cccccc;
	border-top : transparent; */
	text-align: justify; 
	font-family : arial, sans-serif; 
	font-size: 95%; 
	overflow: auto;
}
div#corps  h1{
	color: #0998f6;
	font-family : arial, sans-serif; 
	font-size: 160%;
	text-align: left;
}
div#corps  h1.bio{
	color: rgb(120,3,81);
	font-family : arial, sans-serif; 
	font-size: 120%;
	text-align: left;
}
div#corps  h1 span.stitre{
	color: rgb(120,3,81);
	font-family : arial, sans-serif; 
	font-size: 70%;
	text-align: center;
}
div#corps  h2{
	color: #0998f6;
	font-family : arial, sans-serif; 
	font-size: 120%;
}
div#corps  h2.actu{
	background: rgb(233,231,232);
	color: rgb(103,2,69);
	margin-bottom : 5%;
	font-family : arial, sans-serif; 
	font-size: 120%;
	text-align: center;
}
div#corps  h2.wichtig{
	background: white;
	color: rgb(190,4,4);
	margin-bottom : 5%;
	border : solid 1px red;
	font-weight: bold;
	font-family : arial, sans-serif; 
	font-size: 120%;
	text-align: center;
}
div#corps  h3{
	color: #0998f6;
	font-family : arial, sans-serif; 
	font-size: 100%;
}
div#corps  h4{
	color: rgb(120,3,81);
	font-family : arial, sans-serif; 
	font-weight: normal;
	font-size: 95%;
}
#corps span.rot {
	color : red;
	font-weight: bold;
}
#corps span.titre {font-style : italic;}
#corps img {padding: 5px;}
#corps img.ico {
	padding-top: 0px;
	padding-bottom: 0px;
}
#corps a {
	color : #0998f6;
	text-decoration: none;
}
#corps a:hover {text-decoration: underline;}
#corps a:visited {color :#0998f6; }
#corps a.mail {
	color : rgb(17,17,204);
	text-decoration: underline;
}
/* #corps a:hover {text-decoration: underline;} */
#corps a:visited {color :#0998f6; }
ul.ligne {  /*  Petit menu de navigation à l'intérieur d'une page à texte trop long mais hiérarchisé en différents niveaux de titres   */
	padding-left: 0pt; 
	width: 100%;
	display : inline; 
	list-style-type : none;
	background: transparent;
	color : #990066; 
	text-align : center; 
	padding-top : 1pt;  
	overflow : auto; 
}
ul.decal {
	margin-left: 30%;
	padding-left: 25%;
	}
ul.ligne li {
	display : inline; 
	background : transparent; 
	list-style-type : none;
 	padding : 1%; 
	text-align : center; 
	overflow : auto; 
}
ul.ligne li a {
	text-decoration: none; 
	background: transparent;
	text-align : center; 
	color : #666666;
}
ul.ligne li a:hover {
	text-decoration: overline; 
	background: transparent;
	color : #990066;
}

ul.ariane { /*  équivalent de la classe .ligne pour le petit menu de navigation de la page accessibilité */
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
	text-align: center;
}
ul.ariane li {
	display: inline;
}

#corps ul.plan li a { /* Lien cliquables dan le plan du site */
	text-decoration: none; 
	background: transparent;
	color : rgb(76,76,76);
}
#corps ul.plan li a:hover {
	text-decoration: underline; 
	background: transparent;
	color : #990066;
}
li.espace {
	padding-top : 5px;
}
li.wichtig {
	color : rgb(190,4,4);
	font-weight: bold;
	padding-bottom : 5px;
}
#corps ul li.wichtig a {
	color : rgb(190,4,4);
	font-weight: bold;
	text-decoration: underline; 

}
#corps span.wichtig a{
	color : rgb(190,4,4);
	font-weight: bold;
}
div.wichtig {
	background: white;
	margin-bottom : 5%;
	border-bottom : solid 1px red;
}

/* ---------------------------------------------------------------------------------------------------
+				    Menu de bas de page    			                  +
-----------------------------------------------------------------------------------------------------*/

div#bas {
	margin-top: 2%;
	margin-bottom: 1%;
	padding-top: 1%;
	text-align: center;
	border-top : solid 1px gray;
	border-bottom: solid 1px gray;
	}
div#bas p {
	padding: 0px;
	margin: 0px;
	font-family : arial, sans-serif; 
	font-size: 80%;
	color : rgb(88,88,88);
}
div#bas a.bleu {
	color : #0998f6;
	text-decoration: none;
}
/* ---------------------------------------------------------------------------------------------------
+				         Pour la recherche  		     	                            +
-----------------------------------------------------------------------------------------------------*/

fieldset { /*  Pour le formulaire de recherche */
	width: 100px;
	border: none;
}
input { margin-top : 2px;}
form { width : 100px; }
.b { font-weight: bold; } /*  Utilisé pour la mise en gras de l'affichage des résultats de la recherche */

/* ---------------------------------------------------------------------------------------------------
+				             Illustrations       	     	     	                  +
-----------------------------------------------------------------------------------------------------*/

.illustration {
	margin-top : 0px;
	font-size: 85%;
	text-align: center;
}
.ill_droite {
	float : right;
	font-size: 85%;
	text-align : center;
}
.ill_gauche {
	float : left;
	font-size: 85%;
	text-align : center;
}
.legende {
	margin-top : 0px;
	padding-left: 25px;
	padding-right: 25px;
	font-size: 85%;
	text-align: center;
}
/* ---------------------------------------------------------------------------------------------------
+				         Pour éléments particuliers  		     	        +
-----------------------------------------------------------------------------------------------------*/
sup {
	font-size: 80%;
}
.droite {
	float : right;

}
.gauche {
	float : left;
}
.centre {
	text-align : center;
}
span.petit { /*  Utilisé pour certains éléments de titre des fiches biographiques */
	font-family : arial, sans-serif; 
	font-size: 80%; 
	text-align : right;
}
div.imagcentre {text-align : center; }

/* ---------------------------------------------------------------------------------------------------
+				                   Images   			                            +
-----------------------------------------------------------------------------------------------------*/

img {border: none;}