/*---------------------Style de toutes les pages : body, contenugenaral,menu,cadre,titrepage,contenu,localisation-----------*/
* {padding :0; margin :0; }

body{
    text-align : center;
    font-family : Arial, sans-serif;
    font-size: 0.8em; 
}

#contenugeneral{
position : absolute;
width : 100%;
height : 96%;
margin-left : 10%;
margin:auto;

}

#logoMusee{
	height :4%;
	width : 100%;
	color : #ffffff;
	background-color : #d80000;
	text-align : center;
}
#logoMusee h1{
	font-size : 1.2em;
	font-weight : normal;
}
#menu{
    width : 100%;
    height : 17%;
}

#menu object{
    width : 100%;
     height: 100%;
    margin : 0;
    padding :0;
}

#cadre{
width : 100%;
height : 80%;
}

#titrePage{
width : 100%;
height : 10%;
text-align: center;
    }
     
/*Les coins rouges formant la barre des titres de page*/ 
#titrePage .titrecadreupperleft{
	position: absolute;
    width : 20%;
    margin-top : 1%;   
    background-color : #d80000;
    text-indent: 5%;
}

#titrePage .titrecadreupperright{
    background-image : url('images/coin2_rouge.gif');
    background-repeat : no-repeat;
    background-position : top right;
}

#titrePage .titrecadrelowerleft{
   
}

#titrePage .titrecadrelowerright{
    font-size : 11pt;
    background-repeat : no-repeat;
    text-align:center;
    padding : 1% 1% 1% 1%;
    color : #ffffff;
}


#contenu{
width : 100%;
height : 90%;
background-color: transparent;
overflow: auto;
    }


#localisation{
	width : 100%;
	height : 3%;
	color : #d80000;
	text-align : left;
}
#localisation .lienlocaliation{
	background-color : #fdd790;
	height : 100%;
	width : 75%;
	float : left;
}

#localisation .titrelocalisation{
	width : 15%;
	height : 100%;
	background-color : #d80000;
	float : left;
	color : #ffffff;
	text-align : center;
}
#localisation .titrelocalisation p {
	float : right;
	height : 100%;
	display : inline;
}
#localisation .titrelocalisation img{
	height : 100%;
}

#localisation a{
	text-decoration : none;
	color : #d80000;
	background-color: transparent;
}

#localisation a:hover{
	font-weight : bold;
}
#localisation #lienManuel{
	color : #000000;
	float : left;
	width : 10%;
	height : 100%;
	background-color : #fdd790;
	text-align : center;	
}
#localisation #lienManuel a{
	color : #000000;
	font-weight : bolder;
}
#localisation #lienMentionsLegales{
	color : #000000;
	float : left;
	width : 10%;
	height : 100%;
	background-color : #fdd790;
	text-align : center;	
}
#localisation #lienMentionsLegales a{
	color : #000000;
}

.retouradministration{
color : #d80000;
background-color : transparent;
    }

	 /*les lettres du titre : gras et fin*/
.lettregras {
font-weight: bolder;
    }       
    
.lettrefine {
font-weight: lighter;
    } 
	 
	 .message{
	color : #d80000;
	width : 100%;
	margin-top : 2%;
}
#message p{
	text-align : center;
}
/*-------------------------------------Style de la Page d'accueil---------------------------------------------------------------*/

#accueil{
	width : 90%;
	height : 100%;
	margin:auto;
}

#accueil #titreAccueil{
	height : 20%;
	width : 100%;
	text-align: left;
}
#accueil #titreAccueil h1{
	width : 100%;
	font-weight : normal;
	font-size : 2em;
	color : #d80000;

		
}
#accueil #titreAccueil h2{
	width : 100%;
	margin-right : 10%;
	text-indent : 40%;
	font-weight : normal;
	font-size : 1.5em;
	color : #d80000;
}
#accueil #centrePage{
	width : 100%;
	height : 70%;
	
}
#accueil #centrePage #imageGranville{
	float : left;
	width : 15%;
	height : 80%;
	margin-top : 5%;
}

#accueil #centrePage #imageGranville img{		
	width : 100%;
	min-width : 100px;
	min-height : 200px;
	height : 100%;	
	margin : auto;
}
#accueil #centrePage #texteAccueil{
	width : 65%;
	height : auto;
	float : left;
	padding-top : 5%;
	line-height : 170%;
}
#accueil #centrePage #texteAccueil p{
	text-indent : 3%;
	text-align : justify;
	width : 90%;
	margin : auto;
}
#accueil #basPage{
	width : 100%;
	height : 10%;
}

#accueil #basPage #logoAccueil{
	width : 100%;
	height : 100%;
	float : left;
}
#accueil #basPage #logoAccueil p{
	width : 100%;
	height : 100%;
	text-align : center;
}
#accueil #basPage #logoAccueil img{
	
	height : 80%;
	margin-right : 10%;		
}

#accueil #oeuvreHasard #enteteoeuvrehasard{
	color : #d80000;
	font-style: normal;
	font-weight: normal;
	font-family: sans-serif;
	font-size: 1.2em;
	height : 15%;
}
	 
#accueil #oeuvreHasard{
	float : left;
	width : 20%;
	height : 70%;
	margin-top : 5%;
}


/*les 4 coins entourant le bloc droit*/	 
#accueil #oeuvreHasard .upperleftphoto{
	background-image : url('images/upperleft_photo_beige.png');
	background-repeat : no-repeat;
	background-position : top left;
	width : 100%;
	height : 100%;
	margin: auto;
	margin-top : 2%;
}

#accueil #oeuvreHasard .upperrightphoto{
	background-image : url('images/upperright_photo_beige.png');
	background-repeat : no-repeat;
	background-position : top right;
	width : 100%;
	height : 100%;
}

#accueil #oeuvreHasard .lowerleftphoto{
	background-image : url('images/lowerleft_photo_beige.png');
	background-repeat : no-repeat;
	background-position : bottom left;
	width : 100%;
	height : 100%;
}

#accueil #oeuvreHasard .lowerrightphoto{
	background-image : url('images/lowerright_photo_beige.png');
	background-repeat : no-repeat;
	background-position : bottom right;
	text-align:center;
	width : 100%;
	height : 100%;
}
#accueil #oeuvreHasard .upperleftphoto a{
   text-decoration : none;
   color : #000000;
   display : block;
   width : 100%;
   height : 100%;
}
#accueil #oeuvreHasard .lowerrightphoto h2{
	margin : 0;
}
#accueil #oeuvreHasard .lowerrightphoto .presentationoeuvre{
	height : 60%;
}
#accueil #oeuvreHasard .lowerrightphoto .pied{
	height : 25%;
}
#accueil #oeuvreHasard .lowerrightphoto .imgLarger{
	width : 70%;
}
#accueil #oeuvreHasard .lowerrightphoto .imgHigher{
	height : 100%;
}

#accueil #oeuvreHasard .h2over{
   color : #ffffff;
   background-color : #d80000;
}


/*-------------------------------------------------------------------------------------------------------------------style concernant l'affihage des paragraphes dans la section Granville--------------------------*/

/*bloc principal*/
#pierrekathleengranville{
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right : auto;
	overflow : auto;
}

#pierrekathleengranville #illustration{
	float : left;
	height : 90%;
	margin-left : 10%;
	margin-top : 2%;
}
#pierrekathleengranville #tableau{
	margin : auto;
	width : 875px;
	height : auto;
	margin : auto;
	
	margin-top : 2%;
}
#pierrekathleengranville  #tableau #tableau_haut{
	width : 100%;
	height : 100%;
	background-image : url('images/tableau_haut_grand.gif');
	background-position : top;
	background-repeat : no-repeat;
	padding-top : 22px;
	padding-bottom : 22px;
}
#pierrekathleengranville  #tableau #tableau_bas{
	width : 100%;
	height : 100%;
	
	background-image : url('images/tableau_bas_grand.gif');
	background-position : bottom;
	background-repeat : no-repeat;
}
#pierrekathleengranville  #tableau #tableau_gauche{
	width : 100%;
	height : 100%;
	background-image : url('images/tableau_gauche_motif.gif');
	background-position : left;
	background-repeat : repeat-y;
}
#pierrekathleengranville  #tableau #tableau_droit{
	width : 100%;
	height : 100%;
	background-image : url('images/tableau_droite_motif.gif');
	background-position : right;
	background-repeat : repeat-y;
	
}
	
/*bloc accueillant les différents titres des pages de cette rubrique*/
 #pierrekathleengranville #liens{
	margin-left : 25px;
 	width:827px;
	
	
	background-image : url('images/pierre_kathleen_Granville.gif');
	background-repeat : no-repeat;
	background-position :  right;
}
#pierrekathleengranville #liens hr{
	border : 0;
	background-color : #fdd790;
	width : 60%;
	margin-left : 3%;
	height : 1px;
	text-align : left;
	margin-top : 1%;
}
  /*bloc accueillant les différents titres des pages de cette rubrique*/
 #pierrekathleengranville #liens #titreliens{
	width:65%;
	height:20px;
	text-align:left;
	font-size : 1em;
}
		  
 /*bloc accueillant les différents titres des pages de cette rubrique*/
 #pierrekathleengranville #liens #titreliens p{
	padding-top : 0.5%;
}
		  
/*bloc accueillant les différents titres des pages de cette rubrique*/
 #pierrekathleengranville #liens .couleur1{
	
}
		  
/*bloc accueillant les différents titres des pages de cette rubrique*/
#pierrekathleengranville #liens .couleur2{
}
		  
		  
/*style des liens*/
 #pierrekathleengranville #liens  a{
	color:#000000;
	display : block;
	height : 100%;
	width : 90%;
	margin : auto;
	text-decoration: none;
}
 #pierrekathleengranville #liens  a:link{
	color:#000000;
	text-decoration: none;
}

 #pierrekathleengranville #liens  a:hover{
	color:#d80000;
	font-weight : bold;
	background-color : #FDD790;
}

/*bloc accueillant le contenu des pages de cette rubrique*/ 
#pierrekathleengranville #page {
    width: 90%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1%;
	padding-bottom : 3%;
}
#pierrekathleengranville #page table{
    margin : auto;
	width : 90%;
}
/*bloc accueillant le titre des pages de cette rubrique*/ 
#pierrekathleengranville #titrepage {
    width: 90%;
	text-align : center;
	margin : auto;
    margin-top: 2%;
	 margin-bottom: 2%;
	 
	 background-color: #fdd790;
	 font-weight: bold;
}

/*bloc accueillant les légendes en fin de page*/ 
#pierrekathleengranville #legendes {
	
    width: 90%;
	margin : auto;
	font-style: italic;
	text-align:left;
	margin-top:5%;
	margin-bottom:5%;
	border-top: 1px solid #ffd790;
}
#pierrekathleengranville #navigation{
	width : 90%;
	margin : auto;
}
/*lien retour*/ 
#pierrekathleengranville #lienretour {
    width : 30%;
	float : left;
	color:#000000;
	text-decoration: none;
	text-align:left;
}
#pierrekathleengranville #lienretour a{
	color:#d80000;
	text-decoration: none;
	text-align:left;
}

/*définition des styles du lien retour*/ 

#pierrekathleengranville #lienretour a:hover{
	color : #ffffff;
	background-color : #d80000;
}

/*lien page suivante*/ 
#pierrekathleengranville #lienpagesuivante {
	width : 70%;
	color:black;
	text-decoration: none;
	text-align:right;
	float : left;
}
#pierrekathleengranville #lienpagesuivante a{
	text-decoration: none;
	color:#d80000;
	text-align:right;
}


/*définition des styles du lien page suivante*/ 
#pierrekathleengranville #lienpagesuivante a:hover{
	color : #ffffff;
	background-color : #d80000;
}



#pierrekathleengranville .col1{
	width:20%;
	text-align : center;
}

#pierrekathleengranville .col2{
	width:60%;
	
	vertical-align: top;
}
#pierrekathleengranville .col2 p{
	width: 95%;
	text-align:justify;	
	line-height:170%;
	text-indent : 5%;
}

#pierrekathleengranville .col3{
	width:20%;
}
/* Format n°0 : Aucune photo, texte seul*/
.format0{
	text-align:justify;
	width: 90%;
	margin:auto;
	text-indent:5%;
}

.format1{
	width:100%;
	height:auto;
}

/* Format n°1 : texte à droite et photo à gauche*/
.format1 .texteparagraphe{
float:left;
	width: 80%;
	height:auto;
   text-align : justify;
   text-indent: 5%;
	margin-bottom:2.5%;
		line-height: 150%;
}
/*disposition photo en format 1*/
 .format1 .photo1{
 width:auto;
    float : left;
	 text-align:left;
    margin-right : 5%;
    font-size : 0.7em;
    font-style : italic;
}
     

     

/* Format n°2 : texte à gauche et photo à droite*/

.format2{
	width:100%;
	height:auto;

}

/*le paragraphe*/
 .format2 .texteparagraphe{
 float:left;
   	width: 80%;
	height:auto;
   text-align : justify;
   text-indent: 5%;
		line-height: 150%;
}

/*le bloc photo*/
 .format2 .photo1{
    float : right;
    margin-left : 5%;
    font-size : 0.7em;
    font-style : italic;
    }
     


/*légende de la photo*/
 .format2 .photo1 p{
    text-align: right;
    }


/* Format n°3 : texte à droite et photos à gauche*/

#page .format3{
float:left;
	width:100%;
	height:auto;

}
/*le texte du paragraphe*/ 
 .format3 .texteparagraphe{
	width: 100%;
	height:auto;
   text-align : justify;
   text-indent: 5%;
	line-height: 170%;
	font-size:1em;
			line-height: 150%;
    }

/*le bloc photo*/
 .format3 .photos {
    float : left;
    margin-left : 5%;
    font-size : 0.7em;
    font-style : italic;
    }

	 
/*legende à la fin du texte*/ 
 .legendeformat3 {
    float: right;
    text-align: left;
    font-size : 0.8em;
    font-style : italic;
    border-top: 1px solid #fdd790;
    }
     

     
/* Format n°4 : texte à gauche et photos à droite*/

 .format4{
float:left;
	width:100%;
	height:auto;

    }
	 
/*indentation du paragraphe*/
 .format4 .texteparagraphe{
    text-indent : 0;
	 line-height: 150%;
}
/*bloc photo*/ 
 .format4 .photos {
    float : right;
    margin-left : 5%;
    font-size : 0.7em;
    font-style : italic;
    }
/*légende de la photo*/ 
 .format4 .photos p{
    text-align: right;
    }
     
     
/*legende à la fin du texte*/
.legendeformat4 {
    border-top: 1px solid #fdd790;
    float: left;
    width: 70%;
    margin-top : 2%;
    text-align : left;
    font-size : 0.8em;
    font-style : italic;
    }

/*-------------------------------style concernant l'affihage de la visite des salles--------------------------*/

#visite{
    width : 80%;
    height : 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    margin-bottom: auto;

}
#visite object{
    width : 100%;
    height : 100%;
     
}
     
/*-------------------------------------------------------------------------------------------------------------------------------------------PAGE MOTEUR DE RECHERCHE*/
#pagerechercheoeuvre{
	width : 100%;
	height : 100%;
	overflow : auto;
}

#pagerechercheoeuvre #blocRechercheGeneral{
	width : 98%;
	height : 93%;
	margin : auto;
	margin-top : 2%;
	text-align : center;
	float : right;
}
#pagerechercheoeuvre #blocRechercheGeneral #menuOnglet{
	text-align : center;
	width : 100%;
	border-bottom : 2px solid #980000;
	height : 5%;
}

#pagerechercheoeuvre #blocRechercheGeneral #contenu{
	text-align : center;
	width : 100%;
	height : 93%;
}

#pagerechercheoeuvre #blocRechercheGeneral #contenu #contenuupperleft{
	
}
#pagerechercheoeuvre #blocRechercheGeneral #contenu #contenuupperright{

}
#pagerechercheoeuvre #blocRechercheGeneral #contenu #contenulowerleft{
	/*background-image : url('images/lowerleft_photo.png');
	background-repeat : no-repeat;
	background-position : bottom left;*/
}
#pagerechercheoeuvre #blocRechercheGeneral #contenu #contenulowerright{
	border-bottom : 0;
	border-right : 0;
}

#pagerechercheoeuvre #blocRechercheGeneral #menuOnglet .ongletActif .ongletupperleft{
	background-image : url('images/coin1_rouge.gif');
	background-repeat : no-repeat;
	background-position : top left;
}
#pagerechercheoeuvre #blocRechercheGeneral #menuOnglet .ongletInactif .ongletupperleft{
	background-image : url('images/coin1_rouge_fonc.gif');
	background-repeat : no-repeat;
	background-position : top left;
}
#pagerechercheoeuvre #blocRechercheGeneral #menuOnglet .ongletupperright{

}
#pagerechercheoeuvre #blocRechercheGeneral #menuOnglet .ongletlowerleft{

}
#pagerechercheoeuvre #blocRechercheGeneral #menuOnglet .ongletlowerright{

}
#pagerechercheoeuvre #blocRechercheGeneral #menuOnglet a{
	color : #ffffff;
	text-decoration : none;
}
#pagerechercheoeuvre #blocRechercheGeneral #menuOnglet hover{
	color : #ffffff;
	text-decoration : none;
}
#pagerechercheoeuvre #blocRechercheGeneral #menuOnglet .ongletActif{
	width : 20%;
	height : 100%;
	float : left;
	background-color: #d80000;
	margin-right : 1%;
}
#pagerechercheoeuvre #blocRechercheGeneral #menuOnglet .ongletInactif{
	width : 20%;
	height : 100%;
	background-color: #980000;
	float : left;
	margin-right : 1%;
}
#pagerechercheoeuvre #blocRechercheGeneral .contenuVisible{
	
}
#pagerechercheoeuvre #blocRechercheGeneral .contenuInvisible{
	visibility : hidden;
	display : none;
}
/********************//***VISITE LIBRE***//*********************/
#visiteLibre{
	width : 100%;
	height : 100%;
	background-color : #ffffff;
}

#visiteLibre h2{
	color : #d80000;
	font-style: normal;
	font-weight: normal;
	font-family: sans-serif;
	font-size: 1.2em;
	width : auto;
}


#visiteLibre a{
   text-decoration : none;
   color : #000000;
}
#visiteLibre #menuVisLibre a{
	display : block;
	width : 100%;
	height : 100%;
	color : #000000;
}
/* menu a gauche de la visite libre */
#visiteLibre #menuVisLibre{
	width : 20%;
	height : 100%;
	float : left;
}

#visiteLibre #menuVisLibre table{
	margin-top : 5%;
	width : 80%;
	height : 35%;
	text-align : left;
	margin-left: 0;
	
}
#visiteLibre #menuVisLibre table .col1{
	width : 5%;
	
}
#visiteLibre #menuVisLibre table .col2{
	width : 90%;
	
	
}
#visiteLibre #menuVisLibre table .tdover{
	background-color : #fdd790;
}
#visiteLibre #menuVisLibre #aide{
	margin-top : 70%;
	margin-left : 10%;
	width : 100%;
	text-align : left;
}
#visiteLibre #menuVisLibre #information{
	width : 100%;
	height : 35%;
	margin-top : 30%;
	
}

#visiteLibre #menuVisLibre #information #info_titre, 
#visiteLibre #menuVisLibre #information #info_artiste,
#visiteLibre #menuVisLibre #information #info_donation,
#visiteLibre #menuVisLibre #information #info_domaine{
	width : 90%;
	margin : auto;
	text-align : justify;
	text-indent : 10%;
	font-style : italic;
	font-size : 0.9em;
}
#visiteLibre #menuVisLibre #information #info_titre p{
	padding-top : 10%;
}
#visiteLibre #menuVisLibre #information #info_artiste p{
	padding-top : 10%;
}
#visiteLibre #menuVisLibre #information #info_donation p{
	padding-top : 2%;
}
#visiteLibre #menuVisLibre #information #info_domaine p{
	padding-top : 6%;
}
#visiteLibre #menuVisLibre  .cache{
	display : none;
	visibility : hidden;
}
#visiteLibre #menuVisLibre  .cache img{
	display : none;
	
}

#visiteLibre #menuVisLibre  .visible{
	display : block;
	visibility : visible;	
}

#visiteLibre #menuVisLibre #information #information_upperleft{
	width : 100%;
	height : 100%;
	color : #000000;
	background-repeat : no-repeat;
	background-position : top left;
}
#visiteLibre #menuVisLibre #information #information_upperright{
	width : 100%;
	height : 100%;
	background-image : url('images/upperright_photo.png');
	background-repeat : no-repeat;
	background-position : top right;
}
#visiteLibre #menuVisLibre #information #information_lowerleft{
	width : 100%;
	height : 100%;
	background-image : url('images/lowerleft_photo.png');
	background-repeat : no-repeat;
	background-position : bottom left;

}
#visiteLibre #menuVisLibre #information #information_lowerright{
	width : 100%;
	height : 100%;
}
/* bloc central de la visite libre*/
#visiteLibre #contenuVisiteLibre{
	width : 80%;
	height : 90%;
	float : left;
}
#visiteLibre #contenuVisiteLibre table{
	height : 100%;
	width : 100%;
	vertical-align : middle;
}
#visiteLibre #contenuVisiteLibre table td{
	height : 100%;
	
}
#visiteLibre #contenuVisiteLibre  .colCentre{
	height : 100%;
	width : 50%;
	float : left;
}


#visiteLibre #contenuVisiteLibre #blocGaucheContenu{
	width : 15%;
	height : 100%;
	float : left;
}
#visiteLibre #contenuVisiteLibre #blocDroitContenu{
	width : 15%;
	height : 100%;
	float : left;	
}
/*Menu des sous liens correspondant soit aux domaine de création pour une lettre ou aux auteurs de cette lettre*/
#visiteLibre #contenuVisiteLibre  #listeSousLiens{
	height : 100%;
	width : 18%;
	float : left;
	text-align : left;
	vertical-align : bottom;
	
	overflow : auto;
}
#visiteLibre #contenuVisiteLibre  #listeSousLiens table{
	height : 98%;
	width : 90%;
	float : left;
	text-align : left;
	vertical-align : bottom;
	overflow : auto;
}

#visiteLibre #contenuVisiteLibre  #listeSousLiens td{
	width : 100%;
	vertical-align : bottom;
	padding-bottom : 20%;
}
#visiteLibre #contenuVisiteLibre  #listeSousLiens td .titreSousLien{
	margin-bottom : 2%;
	
}
#visiteLibre #contenuVisiteLibre  #listeSousLiens p {
	margin-bottom : 1%;
}
#visiteLibre #contenuVisiteLibre  #listeSousLiens a{
	margin-left : 10%;
	color : #d80000;
}
#visiteLibre #contenuVisiteLibre  #listeSousLiens a:hover{
	color : #d80000;
}

#visiteLibre #contenuVisiteLibre  #listeSousLiens #sousLienActif {
	font-weight : bolder;
	margin-left : 0%;
}

#visiteLibre #contenuVisiteLibre #blocOeuvre{
	width : 100%;
	height : 90%;
	padding-top : 5%
}
	
#visiteLibre #contenuVisiteLibre #blocOeuvre .entete p{
	
}
#visiteLibre #contenuVisiteLibre .blocOeuvreOver .entete p{
	background-color : #d80000;
	color : #ffffff;
	
}
#visiteLibre #contenuVisiteLibre #blocOeuvre a{
	display : block;
	height : 100%;
	width : 100%;
	
}
#visiteLibre #contenuVisiteLibre  #listeSousLiens .sousLienOver{
	color : #ffffff;
	background-color : #d80000;
}
#visiteLibre #contenuVisiteLibre  #listeSousLiens .sousLienOver a{
	color : #ffffff;
	
}
#visiteLibre #contenuVisiteLibre #blocOeuvre .entete{
	width : 100%;
	height:15%;
	text-decoration : underline;
	color : #d80000;
	font-size : 1.2em;
	margin-top : 0%;
}
#visiteLibre #contenuVisiteLibre #blocOeuvre .presentationoeuvre{
	height : 75%;
	width : 100%;
	
}
#visiteLibre #contenuVisiteLibre  #blocOeuvre .positionOeuvre{
	/*height : 10%;*/
	/*width : 100%;*/
	font-style : italic;
	text-align : right;
}

#visiteLibre #contenuVisiteLibre #blocOeuvre img{
	height : 80%;
	margin : 0;
}
#visiteLibre #contenuVisiteLibre #blocGaucheContenu #lienPrecedent{
	margin-top : 100%;
	text-align : right;
}

#visiteLibre #contenuVisiteLibre #blocDroitContenu #lienSuivant{
	text-align : left;
	margin-top : 100%;
}

/*bloc de lien permettant la navigation dans la visite libre*/
#visiteLibre #lienNavigation{
	width : 64%;
	height : 10%;
	float : left;

	
}
#visiteLibre #lienNavigation p{
	width : 100%;
	text-align : center;
}
#visiteLibre #lienNavigation #imgFlech{
	text-align : left;
	width : 15%;
	margin-left : 65%;
	margin-top : -2%;
	float : left;
	background-color : #fafafa;
	
}
#visiteLibre #lienNavigation #imgFlech img{
	width : 100%;
}

#visiteLibre #lienNavigation a{
	font-size : 1.2em;
	color : #d80000;
	float : center;
	
}
#visiteLibre #lienNavigation .lienNavigationOver{
	background-color : #d80000;
	color : #ffffff;
	/*font-size : 1.4em;*/
	
}
#visiteLibre #lienNavigation #lienActif{
	font-weight : bolder;
	font-size : 1.7em;
}
#visiteLibre #lienNavigation #lienActifDonation{
	font-weight : bolder;
}

#visiteLibre #lienNavigation .lienVide{
	color : #c0c0c0;
}

/********************//*RECHERCHE AVANCEE*//********************/
#pagerechercheoeuvre #rechercheAvancee .infoCachee{
	display : none;
}
#pagerechercheoeuvre #rechercheAvancee .infoVisible{
	font-size : 0.8em;
	color : #d80000;
	position : absolute;
}

#pagerechercheoeuvre #rechercheAvancee{
	height : 100%;
	width : 100%;
	background-color : #ffffff;
}
#pagerechercheoeuvre #rechercheAvancee #blocGauche{
	width : 55%;
	height : 60%;
	float : left;
	margin-top : 1%;
	background-color : #ffffff;
}


#pagerechercheoeuvre #rechercheAvancee #blocGauche .col1{
	width : 22%;
	text-align : left;
	
}
#pagerechercheoeuvre #rechercheAvancee #blocGauche .col2{
	width : 70%;
	text-align :left;
	font-weight : bolder;
}
#pagerechercheoeuvre #rechercheAvancee #blocGauche .col3{
	width : 7%;
	color : #d80000;
	vertical-align : middle;
	text-align : left;
}

#pagerechercheoeuvre #rechercheAvancee #blocGauche select{
	width : 90%;
	margin-top : 2.5%;
}
#pagerechercheoeuvre #rechercheAvancee #blocGauche .select_date{
	width : 30%;
}

#pagerechercheoeuvre #rechercheAvancee  #blocGauche .fieldword{
	width : 90%;
	margin-top : 2.5%;
}

#pagerechercheoeuvre #rechercheAvancee #blocDroit{
	width : 45%;
	height : 60%;
	float : left;
	text-align : center;
	margin-top : 1%;
	background-color : #ffffff;
}
#pagerechercheoeuvre #rechercheAvancee #blocDroit .col1{
	width : 80%;
}
#pagerechercheoeuvre #rechercheAvancee #blocDroit  input{
	width : 95%;
	margin-top : 3%;
	background-color : #ffffff;
}
#pagerechercheoeuvre #rechercheAvancee #blocDroit  select{
	width : 31%;
	margin-top : 1%;
}

#pagerechercheoeuvre #rechercheAvancee #blocDroit  .champColor{
	background-color : #d80000;
	color : #ffffff;
}
#pagerechercheoeuvre #rechercheAvancee #blocDroit .col2{
	width : 12%;
}

#pagerechercheoeuvre #rechercheAvancee #boutonreset{
	width : 40%;
}
#pagerechercheoeuvre #rechercheAvancee #boutonreset input{
	font-size : 0.7em;
}
#pagerechercheoeuvre #rechercheAvancee #lancementrecherche{
	width : 45%;
	height : 20%;
	margin : auto;
	margin-top : 2%;
	text-align : left;
	float : right;
}
#pagerechercheoeuvre #rechercheAvancee #lancementrecherche #choixtyperech{
	
	width : 50%;
	float : left;
	margin-top : 1%;
}
#pagerechercheoeuvre #rechercheAvancee #lancementrecherche #boutonlancement{
	width : 20%;
	float : left;
	text-align : center;
	padding-top : 5%;
}
#pagerechercheoeuvre #rechercheAvancee #lancementrecherche #boutonlancement input{
	
}
#pagerechercheoeuvre #rechercheAvancee #lancementreche p{
	
}
/********************//*RECHERCHE HIERARCHIC*//********************/
#pagerechercheoeuvre #rechercheGuidee{
	width : 100%;
	height : 100%;
}

#pagerechercheoeuvre #rechercheGuidee .introduction{
	width : 40%;
	margin:auto;
	margin-top : 7%;
	text-align : justify;
}
#pagerechercheoeuvre #rechercheGuidee .note{
	width : 40%;
	text-align : justify;
	font-style : italic;
	margin:auto;
	margin-top : 2%;
}
#pagerechercheoeuvre #rechercheGuidee select{
	width : 40%;
	float : left;
	margin-right : 2%;
	margin-left : 30%;
	margin-bottom : 2%;
}
#pagerechercheoeuvre #rechercheGuidee input{
	float : left;
}

/********************//*RECHERCHE PAR TITRE*//********************/
#pagerechercheoeuvre #rechercheTitre{
	width : 100%;
	height : 100%;
}

#pagerechercheoeuvre #rechercheTitre p{
	margin:auto;
	margin-top : 7%;
	width : 40%;
	text-align : left;
}
#pagerechercheoeuvre #rechercheTitre select{
	width : 75%;
	margin-top : 7%;
}
#pagerechercheoeuvre #rechercheTitre input{
	margin-left : 2%;
	width : 20%;
}
/*--------Style : page de visualisation des résultats de la recherche--------------------------------------------------------*/
#resultat{
    text-align : center;
    height : 100%;
    font-size: 0.8em;
}
#resultat #diaporama{
    height : 90%;
	width : 80%;
    margin: auto;
}

#resultat #diaporama table{
    height : 100%;
	width : 100%;
    margin: auto;
    
}
#resultat #diaporama table td{
    width:25%;
    height : 33%;
    vertical-align: top;
    
}
#resultat #diaporama table tr{
    width: auto;
    height: auto;
}

#resultat .oeuvre{
    height: 15%;
    text-align : center;
}

#resultat .oeuvre  a{
    text-decoration : none;
    color : #d80000;
    width: 100%;
    height: 100%;
}

#resultat .oeuvre  a:hover{
    background-color : #fdd790;
    color : #d80000;
    width: 100%;
    height: 100%;
}

#resultat .oeuvre .titre{
    width : 100%;
    height : 30%;
    margin-bottom : 3%;
    text-align: center;
    font-size: 0.8em;
}
#resultat .oeuvre .blocresultat{
    margin-top : 0;
    width : 100%;
    height : 100%;
}

#resultat .oeuvre .blocactif{
width: 100%;
height: 100%;
	background-color : #fdd790;
}
#resultat #infos_resultats{
	text-align : center;
	width : 20%;
	height : 3%;
	background-color : #d80000;
	color : #ffffff;
}
#resultat .lienresultat {
	height : 3%;
	width : 100%;
	border-top : 1px solid #d80000;
}

#resultat .lienresultat a{
    color : #d80000;
    text-decoration : none;
}

#resultat #liencourant{
    text-decoration : none;
	color : #d80000;
	font-weight: bolder;
	font-size : 1.5em;
	background-color : #d80000;
	color : #ffffff;
}

#resultat .lien{
height: 2%;
}
#resultat .lien2{
height:2%;
margin-left: 2%;
}


/*------------------------------------------------------------------------------------PAGE DE VISUALISATION DES OEUVRES--------------------------*/

#pagevisualisationoeuvre{
    width: 100%;
    height: 100%;
	margin: auto;
}



/**************************//*BLOC ONGLETS*//*****************/
#pagevisualisationoeuvre #onglets{
	height : 5%;
	width : 50%;
	float : left;
	position : absolute;
	margin-top : -2%;
}
#pagevisualisationoeuvre #ongletFDes{
	position : absolute;
}
#pagevisualisationoeuvre #ongletFDes img{
	
}
#pagevisualisationoeuvre #ongletFDet{
	margin-left : 45%;
	position : absolute;
}
#pagevisualisationoeuvre #ongletFDet img{
}

#pagevisualisationoeuvre .ongletselected{
	z-index : 10;
}
#pagevisualisationoeuvre .ongletnotselected{
	z-index : 0;
}
/**************************//*FIN BLOC ONGLETS*//*****************/

/*bloc fiche : contient tous les renseignements sur l'oeuvre*/
#pagevisualisationoeuvre #fiche{
    margin-left: 2.5%;
    width : 90%;
    height : 55%;
	margin-top : 2%;
	position : absolute;
	
}


/*style permettant d'afficher ou de cacher les éléments*/
#pagevisualisationoeuvre .fichevisible{
    height: 100%;
    visibility : visible;
}

#pagevisualisationoeuvre .ficheinvisible{
    display : none;
    visibility : hidden;
}

/*bloc titre oeuvre et nom auteur*/
#pagevisualisationoeuvre #titreauteur{
    width: 90%;
    height: 10%;
    text-align: left;
	margin-bottom : 2%;
}
/*bloc contenant la barre d'outils sous la photo*/
#pagevisualisationoeuvre .barreoutils{
    width: 100%;
	height : 10%;
    float : left;
    text-align: center;
}

/*bloc contenant la barre d'outils sous la photo : le tableau*/
#pagevisualisationoeuvre .barreoutils table{
	float: right;
    width: 100%;
	height: 100%;
}
/*bloc contenant la barre d'outils sous la photo : les cellules*/
#pagevisualisationoeuvre .barreoutils td {
	width: 20%;
	height: 100%;
}

#pagevisualisationoeuvre .outils {
	width: 100%;
	height: 100%;
}

#pagevisualisationoeuvre  #no_photo{
	margin-top : 30%;
	
}
#pagevisualisationoeuvre .photoinvisible{
    display : none;
	width : 90%;
	height : 90%;
}
#pagevisualisationoeuvre .photovisible{
	width : 90%;
	height : 90%;
}

#pagevisualisationoeuvre #fichedescriptive, #pagevisualisationoeuvre #fichedetaillee{
    width: 100%;
    height : 80%;
}

/*bloc : fiche descriptive : contient toutes les info affichées à droite de la photo*/
#pagevisualisationoeuvre #fichedescriptive{
    width : 100%;
    height: 100%;
	margin-top : 6%;
}

/*bloc : fiche détaillée*/
#pagevisualisationoeuvre #fichedetaillee{   
    width: 96%;
    margin: auto;
    height: 80%;
    visibility : hidden;
	margin-top : 6%;
}

/*tableau général*/   
#pagevisualisationoeuvre .tabgeneral{
    width : 100%;
    height: 100%;
}

/*cellule accueillant les info texte à droite de la photo*/
#pagevisualisationoeuvre .colfiche{
    width: 60%;    
    height: 100%;
    float: left;
    vertical-align: top;
    text-align: left;
}

/*cellule accueillant la photo*/
#pagevisualisationoeuvre .colphoto{ 
    width: 40%;
	height: 100%;
    text-align: center;
    vertical-align: top;
    float : left;
}

/*tableau contenant : date,dimensions, donation,mouvement et periode*/
#pagevisualisationoeuvre #fichedescriptive table, #pagevisualisationoeuvre #fichedetaillee table{
}

/*tableau contenant : date,dimensions, donation*/
#pagevisualisationoeuvre #fichedescriptive #tabgauche{
    text-align: left;
    float: left;
    margin-right: 3%;
}

/*tableau contenant mouvement et periode*/
#pagevisualisationoeuvre #fichedescriptive #tabdroite{
    text-align: left;
}

/*bloc résumé description oeuvre*/
#pagevisualisationoeuvre #resume{
    margin-top : 15%;
    text-align : center;
}

/*lien: "la suite" inactif*/
#pagevisualisationoeuvre #resume a{
    text-decoration : none;
    color : #000000;
}

/*lien: "la suite" survol*/
#pagevisualisationoeuvre #resume a:hover{
}

/*le paragraphe du résumé de description*/
#pagevisualisationoeuvre #resume p{
    text-align : justify;
}

/*images pour le bloc du résumé de la description de l'oeuvre*/
#pagevisualisationoeuvre .upperleftdescription{
    width : 100%;
    margin-left : auto;
    margin-right : auto;
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
}

#pagevisualisationoeuvre .upperrightdescription{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
}

#pagevisualisationoeuvre .lowerleftdescription{ 
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
}

#pagevisualisationoeuvre .lowerrightdescription{
    height : 100%;
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    padding : 3%;
}


/*les 4 coins rouges*/
#pagevisualisationoeuvre .upperleftphoto{
    width: 90%;
    height: 100%;
    background-image : url('images/upperleft_photo.png');
    background-repeat : no-repeat;  
    background-position : top left;
    float: left;
    margin: auto;
}

#pagevisualisationoeuvre .upperrightphoto{
    width: 100%;
    height: 100%;
    float: left;
    background-image : url('images/upperright_photo.png');
    background-repeat : no-repeat;
    background-position : top right;
    margin: auto;
}

#pagevisualisationoeuvre .lowerleftphoto{   
    width: 100%;
    height: 100%;
    float: left;
    background-image : url('images/lowerleft_photo.png');
    background-repeat : no-repeat;
    background-position : bottom left;
    margin: auto;
}

#pagevisualisationoeuvre .lowerrightphoto{
    width: 100%;
    height: 100%;
    background-image : url('images/lowerright_photo.png');  
    background-repeat : no-repeat;
    background-position : bottom right;   
}

#pagevisualisationoeuvre .lowerrightphoto p {
	height : 100%;
	width  : 100%;
}
#pagevisualisationoeuvre .lowerrightphoto img{
	margin-top : 5%;
	height : 80%;
}

#pagevisualisationoeuvre #renseignement{
	
}

#pagevisualisationoeuvre #lienrenseignement{
    float: left;
    width: 100%;
    height: 13%;
	margin-top : -4%;
	border-bottom : 1px solid #d80000;
}

/*Les titres "Descriptif" "historique" "biographie" "renseignement annexe" sont mis en gras lorsqu'ils sont actifs*/
#pagevisualisationoeuvre .lienRenseignementActif{
	font-weight : bolder;
}


#pagevisualisationoeuvre .upperleftrenseignement{
    width:100%;
    height : 80%;
    clear: left;
    text-align: justify;
}

#pagevisualisationoeuvre .upperrightrenseignement{
    height: 100%;
    width:100%;
}

#pagevisualisationoeuvre .lowerleftrenseignement{   
    width:100%;
    height: 100%;
}

#pagevisualisationoeuvre .lowerrightrenseignement{
    width:100%;
    height: 100%;
    text-align:center;
    text-align: justify;
}

#pagevisualisationoeuvre .cache{
    visibility : hidden;
    display : none;
}   

#pagevisualisationoeuvre #descriptifoeuvre, #acquisition, #biographie, #renseignementannexe{
    position: absolute;
    width: 57%;
    height: 80%;
    text-align:justify;
	line-height : 170%;
    overflow:auto;  
}

#pagevisualisationoeuvre .collectionneur{
	margin-left : 8%;
}


#pagevisualisationoeuvre ul{
    width: 98%;
    height: 100%;
    float: left;
    margin-bottom: 5%;
}

#pagevisualisationoeuvre li{
    width: 22%;
    height: auto;
    margin-left: 2%;
    margin-bottom: 2%;
    list-style: none;
    float: left;
    text-align: center;
}

#pagevisualisationoeuvre li a{
    text-decoration : none;
    color : #d80000;
}


/*------------------------------style concernant l'affihage de la rubrique : A vous de jouer--------------------------*/

#jeux {
    width: 98%;
	 margin: auto;
    height: 100%;
}

#jeux object{
	width: 98%;
	margin: auto;
	height: 100%;
	border: 1px solid black;
}

/*------------------------------style concernant l'affihage de la rubrique : Goodies--------------------------*/

#goodies {
    width: 100%;
    height: 100%;
    font-size: 5em;
}

/*------------------------------style concernant l'affihage de la rubrique : Contacts--------------------------*/

#contacts {
    width: 100%;
    height: 100%;
}
/*phrase: pour nous contacter veuillez remplir le formulaire ci-dessous:*/
#contacts .intro{
	text-align: left;
	width: 100%;
	margin-bottom: 2%;
}
/*Le tableau entier*/
#contacts #contactstableau{
	width: 50%;
	margin: auto;
}
/*Les trois ligne : votre nom; votre prenom; votre courriel*/
#contacts #tableau1{
	width: 100%;
	height: 100%;
	margin-bottom: 3%;
}
/*les lignes du tableau 1*/
#contacts #tableau1 tr{
	width: 100%;
} 

/*Les champs de saisie du tableau1*/
#contacts #tableau1 .champ{
	text-align: left;
	width: 100%;
} 
/*Les cellules vides en début et fin de ligne du tableau1 (cellules vides)*/
#contacts #tableau1 .col0{
	width: 10%;
	text-align: left;
} 
/*Les cellules "nom, prenom, courriel"*/
#contacts #tableau1 .col1{
	width: 21%;
	text-align: left;
} 

/*Ce tableau contient : "Votre message concerne"+Liste à choix multiples*/
#contacts #tableau2{
	width: 100%;
	height: 100%;
	margin-bottom: 2%;
}
/*La liste a choix multiple*/
#contacts #tableau2 select{
	width: 100%;
text-align: left;
}
#contacts #destinataire{
	width: 50%;
	margin-left:0;
	text-align: left;
}
/*La ligne du tableau3*/
#contacts #tableau2 tr{
	width: 100%;
} 

/*La cellule vide de fin de ligne*/
#contacts #tableau2 .col0{
	width: 5%;
	text-align: center;
} 
/*La cellule vide de debut de ligne*/
#contacts #tableau2 .col00{
	width: 5%;
	text-align: center;
}

/*Le tableau contenant "objet et message"*/
#contacts #tableau3{
	width: 100%;
	height: 100%;
}
/*Les cellules de début et de fin de ligne du tableau 2 (cellules vides)*/
#contacts #tableau3 .col0{
	width: 5%;
}
/*Les lignes du tableau2*/
#contacts #tableau3 tr{
	width: 100%;
} 

/*Le champ de saisie de l'objet du mail*/
#contacts #tableau3 .champ{
	width: 100%;
	text-align: left;
} 
/*Les celulles objet et message*/
#contacts #tableau3 .col1{
	width: 10%;
	text-align: left;
}
/*Les deux labels "objet et message"*/
#contacts #tableau3 .col1 label{
	width: 40%;
	height : 100%;
	text-align: right;
}
/*Le champ "textarea" du message*/
#contacts #tableau3 .champtexte{
	width: 100%;
	height: 100%;
	text-align: justify;
}
/*Le bouton "envoyer*/
#contacts .bouton {
width: 98%;
margin: auto;
text-align: center;
margin-top: 2%;
}
 
/*Le titre: Expediteur*/
#contacts #titre1{
	width: 100%;
	background-color: #FFD790;
	font-weight: bold;
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 1%;
}

/*Le titre: "Destinataire"*/
#contacts #titre2{
	width: 100%;
	color: Black;
	background-color: #FFD790;
	font-weight: bold;
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 1%;
	
}

/*------------------------------style concernant l'affihage des mentions légales--------------------------*/
/*bloc principal*/
#mentions{
    width : 100%;
    height : 100%;
	margin:auto;
	line-height: 170%;
}
#mentions a{
  color : #d80000;
  text-decoration:none;
}
#mentions a:hover{
  background-color : #d80000;
  color : #ffffff;
}
/*les titres de chaque parties*/
#mentions .titre{
   width : 75%;
	margin:auto;
	margin-top:3%;
	margin-bottom:1%;
	text-align: center;
	background-color: #fdd790;
}


/*les différentes parties"*/
#mentions .parties{
   width : 75%;
	margin:auto;
	text-align: justify;
	text-indent: 2%;
}

/*les différentes parties non indentées (utile pour la partie "liens", juste après la liste à puces"*/
#mentions .partiesnonindentee{
   width : 75%;
	margin:auto;
	text-align: justify;
}

/*les listes à puces"*/
#mentions .listeapuce{
   width : 67%;
	margin:auto;
	margin-left:20%;
	text-align: justify;
}


/*l'adresse pour contacter le musée"*/
#mentions .adresse{
   width : 75%;
	margin: auto;
	margin-top:1%;
	font-style: italic;
	line-height: 100%;
}

/*------------------------------------------------------------------------------------------------------------Menu d'administration*/
/*bloc général*/
#connection{
    width:100%;
	height : 100%;
	
}

/*bloc général*/
#connection form{
    width:80%;
	margin: auto;
	text-align: center;
}


/*Les 4 images pour le bloc de fond couleur blond*/
#connection .upperleft{
     width: 40%;
     margin: auto;  
     margin-top: 10%;
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#connection .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#connection .lowerleft{ 
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#connection .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    padding : 3%;
    text-align:center;
    }
#connection .lowerright table{
	width : 100%;
}
     /*message d'erreur*/
#message{
    width: 100%;
    margin: auto;
    margin-top:2%;
   color : #d80000;
    }


#menuadmin{
	width:100%;
	height:100%;
}
	
/*message de bienvenue*/
#menuadmin #messagebienvenue{
    width : 100%;
	height : 3%;
    margin: auto;
    text-align : center;
}

#menuadmin .titrecadre{
    width : 90%;
    height: 15%;
}

/*image de fond pour chacun des titres des bloc menu d'admin*/
#menuadmin .titrecadreupperleft{
	width:100%;
	height:100%;
    margin-left : auto;
    margin-right : auto;    
    background-color : #d80000;
}

#menuadmin .titrecadreupperright{
	width:100%;
	height:100%;
    background-image : url('images/coin2_rouge.gif');
    background-repeat : no-repeat;
    background-position : top right; 
}

#menuadmin .titrecadrelowerleft{
	width:100%;
	height:100%;
}

#menuadmin .titrecadrelowerright{
	width:100%;
	height:100%;
    background-repeat : no-repeat;
    text-align:center;
    padding : 1% 1% 1% 1%;
    color : #ffffff;
}

/*les lettres des titres des bloc menu d'admin : gras*/
#menuadmin .lettregras {
font-weight: bolder;
font-size: 1.1em;
    }       

#menuadmin a{
    text-decoration : none;
    color : #000000;
    font-weight : bolder;
}
#menuadmin a:hover{
    text-decoration : none;
    color :  #d80000;
}
#menuadmin #lienoeuvre{
	float: left;
    width  : 22%;
	height : 30%;
    margin-left : 5%;
    margin-top: 2%;
}

#menuadmin #liengestionMouvement{
    float: left;
    width  : 22%;
	height : 30%;
    margin-top: 2%;
    margin-left : 1%;
}
#menuadmin #liengestionPage{
float: left;
    width  : 23%;
	height : 30%;
    margin-top : 2%;
    margin-left : 1%;
}
#menuadmin #liengestionLien{
float: left;
    width  : 20%;
	height : 30%;
    margin-top : 2%;
    margin-left : 1%;
}
#menuadmin #liengestionAdmin{
	float: left;
    width  : 25%;
	height : 30%;
    margin-top : 5%;
    margin-right : 49%;
    margin-left: 5%;
	
}

#menuadmin .lienAdminupperleft{
    margin-left : auto;
    margin-right : auto;    
    background-color : #fdd790;
	height : 70%;
}

#menuadmin .lienAdminupperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
	height : 100%;
}

#menuadmin .lienAdminlowerleft{ 
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
	height : 100%;
}

#menuadmin .lienAdminlowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
	height : 100%;
    text-align:center;
	
}
#menuadmin #liendeconnexion{
float: left;
    width : 16%;
    margin-top : -5%;
    margin-left : 80%;
	color : #ffffff;
}
#menuadmin #liendeconnexion a{
	color : #ffffff;
}
#menuadmin #liendeconnexion a:hover{
	color : #000000;
}
#menuadmin .deconnexionupperleft{
    margin-left : auto;
    margin-right : auto;    
    background-color : #d80000;
    background-image : url('images/coin1_rouge.gif');
    background-repeat : no-repeat;  
    background-position : top left;
}

#menuadmin .deconnexionupperright{
    background-image : url('images/coin2_rouge.gif');
    background-repeat : no-repeat;
    background-position : top right;
}

#menuadmin .deconnexionlowerleft{
    background-image : url('images/coin4_rouge.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
}

#menuadmin .deconnexionlowerright{
    background-image : url('images/coin3_rouge.gif');   
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
    padding: 5%;
	
}

/*--------------ajout oeuvre: charger fichier csv----------------*/
#formulaireAjout{
    text-align : center;
}

#ajoutoeuvre{
    margin-top : 10%; 
    width : 60%;
    margin: auto;
    margin-bottom : 10%;
}

/*la barre de progression*/
#formulaireAjout #barreChargement{
	background-color : #000000;
	width : 90%;
	margin : auto;
	margin-top : 3%;	
}
#formulaireAjout #barreChargement table{
	width : 100%;
}
#formulaireAjout .fragmentVide{
	float : left;
	height : 3%;
	
	
}
#formulaireAjout .fragmentPlein{
	background-color : #32cd32;
	color : #32cd32;
	float : left;
	
}

/*Les 4 images pour le bloc de fond couleur blond*/
#formulaireAjout .upperleft{
     width: 100%;
     margin: auto;  
     margin-top: 15%;
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#formulaireAjout .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#formulaireAjout .lowerleft{ 
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#formulaireAjout .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    padding : 3%;
    text-align:center;
    }
     
/*---------------------------------------------------------------------------------------------------------------------------------------Page de modification des OEUVRES*/


#pagemodifoeuvre {
    width : 100%;
    height: 100%;

}
/*le bloc où on peut choisir dans une liste à choix multiple quelle oeuvre on veut modifier*/
#pagemodifoeuvre #formmodifoeuvre{
	width : 100%;
	padding-top : 10%;
	text-align : center;
    margin: auto;
}
/*le bloc accueillant la liste à choix multiple pour choisir quelle oeuvre modifier*/
#pagemodifoeuvre  #formmodifoeuvre #choixOeuvre{
    width : 60%;
	height : 30%;
    margin: auto;
	margin-bottom: 10%;
}


/*Les 4 images pour le bloc de fond couleur blond*/
#pagemodifoeuvre #choixOeuvre .upperleft{
     margin: auto;  
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#pagemodifoeuvre #choixOeuvre .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#pagemodifoeuvre #choixOeuvre .lowerleft{ 
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#pagemodifoeuvre #choixOeuvre .lowerright{
   
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    padding : 3%;
    text-align:center;
    }
     
     
/*les tableaux contenu dans chaque bloc de la page*/
#pagemodifoeuvre table{
    float : left;
}

/*les zones de type "textearea" dans la page*/
#pagemodifoeuvre textarea{
    width : 90%;
}

/*le fieldset pour l'oeuvre*/
#pagemodifoeuvre #fieldsetoeuvre{
    width: 90%;
    padding : 5%;
}
/*les fieldset de la page de modification d'info concernant les notices*/
#pagemodifoeuvre #formmodifoeuvre2 {
	width : 100%;
	height : 100%;
	text-align : center;
}

/*les fieldset de la page de modification d'info concernant les notices*/
#pagemodifoeuvre #formmodifoeuvre2 fieldset{
	width: 90%;
	margin : auto;
	margin-bottom : 2%;
	border : 1px solid #fdd790;
}

/*les fieldset de la page de modification d'info concernant les notices*/
#pagemodifoeuvre #formmodifoeuvre2 fieldset legend{
	color: #d80000;
	font-weight  : bolder;
	width : 100%;
	background-color : #fdd790;
}


/*les listes à choix multiples dans le fieldset de l'oeuvre*/
#pagemodifoeuvre #fieldsetoeuvre select{
    width : 100%;
}   

/*les liens dans le fieldset de l'oeuvre*/
#pagemodifoeuvre fieldset a{
    color : #d80000;
}

/*le bloc accueillant les photographies pour les oeuvres*/
#pagemodifoeuvre #mondiv2 td{
    vertical-align: bottom;
}

/*le bloc contenant toutes les infos sur l'artiste (info+biographie) dans le fieldset auteur*/
#pagemodifoeuvre #mondiv9{
float: left;
}

/*le bouton dans le fieldset auteur*/
#pagemodifoeuvre #mondiv9 input{
float: left;
width: auto;
height: auto;
border: 1px solid black;
margin-left: 75%;
margin-top: 5%;
}



/*le fieldset pour l'auteur*/
#pagemodifoeuvre .fieldsetauteur{
    width: 80%;
    padding : 2%;
    text-align: justify;
}

/*le tableau dans le fieldset auteur. Ce tableau accueil les infos au dessus de la biographie*/
#pagemodifoeuvre .fieldsetauteur table{
float: left;
width: 40%;
text-align: left;
margin-left : 5%;
margin-bottom: 5%;
}

/*bloc biographie pour l'auteur*/
#pagemodifoeuvre .fieldsetauteur .biographie{
margin: auto;
width: 90%;
text-indent: 5%;
margin-top : 0%;
border: 1px solid black;
}

/*le paragraphe pour la biographie*/
#pagemodifoeuvre .fieldsetauteur .biographie p{
line-height: 170%;
text-align: justify;
}

/*????????*/
#pagemodifoeuvre .cachediv {
    visibility: hidden;
    overflow: hidden;
}

/*????????*/
#pagemodifoeuvre .cachediv table{
    display : none;
    visibility : hidden;
}

/*????????*/
#pagemodifoeuvre #auteur{

}

/*------------------------------------PAGE DE SUPPRESSION D'OEUVRE----------------------------*/

/*bloc principal*/
#supoeuvre{
    width : 65%;
    margin: auto;
}

/*bloc principal*/
#supoeuvre table{
    width : 60%;
    margin: auto;
}

/*bloc principal*/
#supoeuvre table tr{
    width : 100%;
    margin: auto;
}
/*bloc principal*/
#supoeuvre table td{
    width : 50%;
    margin: auto;
}
/*bloc principal*/
#supoeuvre table td select{
    width : 100%;
    margin: auto;
}


/*le formulaire*/
#formsupoeuvre{
    text-align : center;
    
}

/*Les 4 images pour le bloc de fond couleur blond*/
#supoeuvre .upperleft{
     margin: auto;  
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#supoeuvre .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#supoeuvre .lowerleft{ 
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#supoeuvre .lowerright{
    margin-top: 10%;
    margin-bottom: 10%;
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    padding : 3%;
    text-align:center;
    }

/*--------------------Page de modicication d'AUTEUR (page 1)----------------------------------- */

/*le bloc principal*/
#modifauteur{
    margin-top : 5%; 
    width : 60%;
    margin: auto;
    margin-bottom : 10%;
    text-align : center;
}

/*Les 4 images pour le bloc de fond couleur blond*/
#modifauteur .upperleft{
     margin: auto;  
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#modifauteur .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#modifauteur .lowerleft{ 
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#modifauteur .lowerright{
    margin-top: 10%;
    margin-bottom: 10%;
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    padding : 3%;
    text-align:center;
    }

/*--------------------Page de modicication d'AUTEUR (page 2)------------------------------------*/

/*le fieldset de la page*/
#formmodifauteur2 fieldset{
    width : 80%;
    height: auto;
    margin: auto;
    margin-bottom: 10%;
    padding: 2%;
    text-align: justify;
}

/*le fieldset de la page*/
#formmodifauteur2 table{
width:42%;
float: left;
margin-left: 3%;
margin-right: 2%;
margin-bottom:3%;
}


/*le titre du fieldset de la page*/
#formmodifauteur2 .titrefieldsetauteur{
color: #d80000;
}


/*le bouton : "valider les modifications*/
#formmodifauteur2 .boutonvalid{
width:25%;
margin-left: 67%;
margin-top: 3%;
}

/*le bouton : "valider les modifications*/
#formmodifauteur2 textarea{
width:85%;
margin-left: 5%;
margin-top:2%;
}

/*----------------Page d'ajout de MOUVEMENT---------------------------------------------------*/

/*bloc rpincipal*/
#ajoutmouvement{
    width : 50%;    
    height: 70%;
    margin:auto;    
    margin-bottom: 5%;      
}



/*Les 4 images pour le bloc de fond couleur blond*/
#ajoutmouvement .upperleft{
     margin: auto;  
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#ajoutmouvement .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#ajoutmouvement .lowerleft{ 
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#ajoutmouvement .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
     padding: 2%;
    }

/*le bloc "formulaire"*/
#formajoutmouvement{
    width : 100%;
height: 100%;
    text-align : center;
}

/*le champs de texte pour le titre du mouvement*/
#formajoutmouvement input{
    width : 50%;
    margin-bottom: 2%;
}

/*le lien "retour vers le menu d'administration"*/
#formajoutmouvement a{
float: left;
margin-top: 5%;
margin-left: 59.5%;
}

/*le champs de texte "textarea"*/
#formajoutmouvement textarea{
width: 80%;
}

/*-------------------------Page de modification des MOUVEMENT---------------------------------*/

/*bloc principal*/
#formmodifmouvement{
    width : 60%;    
    height: 70%;
    margin:auto;    
    margin-bottom: 5%;
	 margin-top: 8%;
    text-align: center;
    }
    
/*le bloc secondaire contenant le bloc au centre de la page*/
#modifmouvement{
    width : 100%;
    margin: auto;

}

/*Les 4 images pour le bloc de fond couleur blond*/
#formmodifmouvement .upperleft{
     margin: auto;  
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#formmodifmouvement .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#formmodifmouvement .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#formmodifmouvement .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
     padding: 2%;
    }

#formmodifmouvement #modifmouvement2 .lowerright{
	margin-bottom : 2%;
	padding-top : 1%;
}
#formmodifmouvement #modifmouvement2{
	width : 60%;
	height : auto;
	margin-top : 3%;
}

#formmodifmouvement #modifmouvement2 .boutonvalid{
	margin-bottom : 1%;
}
	
/*le bloc contenant : "liste mouvement" + liste déroulante + bouton*/
#formmodifmouvement .essai{
margin-top: 5%;
margin-bottom: 2%;
}

/*le bouton "modifier"*/
#formmodifmouvement .boutonvalid{
	margin-top: 4%;
}


/*le champ de texte "textarea"*/
#formmodifmouvement textarea{
    width : 90%;
    margin: auto;
}

/*le lien "retour vers le menu d'administration"*/
#formmodifmouvement a{
float: left;
width: 55%;
margin-top: 5%;
margin-left: 22%;
}


/*-------------------------PAGE DE SUPPRESSION DE MOUVEMENT------------------------------------*/
/*bloc principal*/
#formsupmouvement{
    width : 55%; 
	 height: 70%;   
    margin: auto;   
    margin-bottom: 5%;
	 margin-top: 8%;
    text-align: center;
}
/*bloc secondaire*/
#supmouvement{
    width : 100%;
    margin: auto;
    
}

/*Les 4 images pour le bloc de fond couleur blond*/
#formsupmouvement .upperleft{
     margin: auto;  
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#formsupmouvement .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#formsupmouvement .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#formsupmouvement .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
     padding:5%;
     margin-bottom: 5%;
    }
#formsupmouvement p{
    text-align : center;
}

/*le bouton "supprimer"*/
#supmouvement .boutonvalid{
margin-top: 4%;
}


/*----------Page d'ajout de page dans les rubriques Granville et Auteurs ----------------------*/
/*bloc principal*/
#formajoutpage{
width: 100%;
height : 100%; 
 
}

/*bloc page1*/
#formajoutpage1, #formajoutpage2{
width: 100%;
height: 70%;
margin: auto;
padding-top: 10%;
}

/*bloc page1*/
#formajoutpage a{
float: left;
width: 55%;
margin-top: 5%;
margin-left: 22%;
}
}


#formajoutpage  #choixsection, #formajoutpage #parametrepage {
	width: 70%;
	height: 100%;
	margin: auto;
}

 #formajoutpage #parametrepage table input{
	width: 100%;
	text-align:left;
}

/*Les 4 images pour le bloc de fond couleur blond pour le choix de la section*/
#formajoutpage1 #choixsection .upperleft{
width: 60%;
height: 25%;
	margin: auto;
	background-color : #fdd790;
	background-image : url('images/coin1.gif');
	background-repeat : no-repeat;  
	background-position : top left;
}

#formajoutpage1 #choixsection .upperright{
width: 100%;
height: 100%;
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#formajoutpage1 #choixsection .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#formajoutpage1 #choixsection .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
    padding:5%;
    margin-bottom: 5%;    
    }


#formajoutpage2 #choixsection, #formajoutpage #parametrepage{
    width : 70%;
	 margin: auto;
	 text-align: center;

}

#formajoutpage2 #parametrepage #avertissement{
    width : 100%;
	 background-color: #fbe8c3;
	 color: #d80000;
	 margin-bottom: 3%;

}
     
/*Les 4 images pour le bloc de fond couleur blond pour les paramètres de la page*/
#formajoutpage2 #parametrepage .upperleft{
     margin: auto; 
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#formajoutpage2 #parametrepage .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#formajoutpage2 #parametrepage .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#formajoutpage2 #parametrepage .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
     padding-top:3%;
     margin-bottom: 5%;
	  margin: auto;
    }
 
/*les deux champs input*/
#formajoutpage2 #parametrepage input{
 text-align: left;
    }
	 
	 /*le formulaire*/
#formajoutpage2 #parametrepage form{
width: 98%;
margin: auto;
    }
	 
	 	 /*le formulaire*/
#formajoutpage2 #parametrepage table{
width: 68%;
margin: auto;
text-align:left;
    }
	 
     
/*le gros bloc*/
#formajoutpage .parametresparagraphes{
    height : 100%;
    text-align : center;
}


#formajoutpage .unparagraphe{
    float: left;
    width : 100%;
    margin-bottom: 5%;
}

/*le fieldset de la page*/
#formajoutpage fieldset{
    width : 90%;
    height : 100%;
    margin: auto;
    padding: 3%;
}

#formajoutpage .divFormat{
    display : none; 
    margin-bottom : 0;
}
/*le bloc gauche*/
#formajoutpage .blocgauche{
    float : left;
    width : 50%;
    height : 55%;
}

/*le paragraphe du bloc gauche*/
#formajoutpage .blocgauche{
    text-align: left;
}
/*le champ textarea"*/
#formajoutpage .blocgauche textarea{
    float: left;
    width : 100%;
    border: 1px solid black;
}
/*le bloc droit*/
#formajoutpage .blocdroit{
    width : 48%;
    float: left;
    margin-left:1%;
    margin-top: 2%;
    border: 2px solid #fbe8c3;
}

/*le bloc droit*/
#formajoutpage .blocdroit td{
margin-left: 0.5%;

}

#formajoutpage #apercuphoto{
    width : 40%;
    text-align : center;
}

#formajoutpage .selectionphoto table{
text-align: left;
margin-bottom: 5%;
}

#formajoutpage .selectionphoto p{
margin-bottom: 5%;
}

/*------------------------------------------------------------------------------------------------------------PAGE DE MODIFICATION DES PAGES */
#pagemodifpage{
	text-align : center;
	width : 100%;
	height : 100%;
	overflow : auto;
	margin: auto;
}

#pagemodifpage #formmodifpage{
	text-align : center;
	width : 100%;
	margin: auto;
}

#pagemodifpage #formmodifpage #choixsection{
	text-align : center;
	width : 50%;
	margin: auto;
	margin-top: 10%;
}

#pagemodifpage #formmodifpage #choixsection table{
	text-align : center;
	width : 70%;
	margin: auto;
}

#pagemodifpage #formmodifpage #choixsection table select{
	text-align : left;
	width : 100%;
	margin: auto;
}



/*Les 4 images pour le bloc de fond couleur blond pour le choix de la section*/
#pagemodifpage #formmodifpage #choixsection .upperleft{
width: 100%;
height: 25%;
	margin: auto;
	background-color : #fdd790;
	background-image : url('images/coin1.gif');
	background-repeat : no-repeat;  
	background-position : top left;
}

#pagemodifpage #formmodifpage #choixsection .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#pagemodifpage #formmodifpage #choixsection .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#pagemodifpage #formmodifpage #choixsection .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
    padding:5%;
    margin-bottom: 5%;    
    }
	 
	 
#pagemodifpage #choixpage{
	text-align : center;
	width : 50%;
	margin: auto;
	margin-top: 10%;
}

#pagemodifpage #choixpage table{
	width : 90%;
	margin: auto;
	text-align: left;
} 

#pagemodifpage #choixpage #modifOrdrePage{
	width : 10%;
	text-align: left;
} 
#pagemodifpage #tabPage select{
	width : 15%;
	text-align:center;
}

#pagemodifpage #choixpage #modif1page{
	width : 10%;
	text-align: left;
} 

/*Les 4 images pour le bloc de fond couleur blond pour le choix de la section*/
#pagemodifpage  #choixpage .upperleft{
	margin: auto;
	background-color : #fdd790;
	background-image : url('images/coin1.gif');
	background-repeat : no-repeat;  
	background-position : top left;
}

#pagemodifpage  #choixpage .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#pagemodifpage  #choixpage .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#pagemodifpage  #choixpage .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:left;  
	 padding: 5%;
	 margin-bottom: 5%; 
    }
	 
#pagemodifpage  #choixpage form{
text-align: center;
    width:100%;
    }
	 
#pagemodifpage #choixaction{
width : 60%;
height: 35%;
margin-bottom : 10%;	
margin: auto;
text-align: center;
}

#pagemodifpage #choixaction table{
width : 60%;
height: 100%;
margin: auto;
text-align: left;
}

#pagemodifpage #choixaction table td{
width : 100%;
height: 10%;
margin-bottom: 3%;
}



/*Les 4 images pour le bloc de fond couleur blond pour le choix de la section*/
#formmodifpage  #choixaction .upperleft{

	margin: auto;
	background-color : #fdd790;
	background-image : url('images/coin1.gif');
	background-repeat : no-repeat;  
	background-position : top left;
}

#formmodifpage  #choixaction.upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#formmodifpage  #choixaction .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#formmodifpage  #choixaction .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;  
	 padding: 2%;
	 margin-bottom: 5%; 
	margin-top : 10%;
    }


#pagemodifpage #modifOrdrePage #tabPage{
	width : 60%;
	height : 75%;
	border : 1px solid #fbe8c3;
	margin : auto;
	
	
}
#pagemodifpage #modifOrdrePage #tabPage th{
	background-color : #fbe8c3;
	height : 5%;
	padding  :1%;
	
}

#pagemodifpage #modifOrdrePage #tabPage td{
	border : 1px solid #fbe8c3;
	width : 50%;
}
#pagemodifpage #modifOrdrePage .message{
	width : 60%;
	margin: auto;
	
	background-color : #fbe8c3;
}

#pagemodifpage #modifOrdrePage #piedTab{
	background-color : #fbe8c3;
	width : 60%;
	padding-top : 0.2%;
	padding-bottom : 0.2%;
	margin-bottom : 2%;
}
#pagemodifpage #choixaction #avertissement{
	width : 80%;
	margin : auto;
	color : #d80000;
	border : 1px solid #d80000;
	margin-bottom : 3%;
	padding : 1%;
}

#pagemodifpage #choixaction table{
	text-align : left;
}
#pagemodifpage #ajoutParagraphe{
	height : auto;
	width : 98%;
	
}

#pagemodifpage  #modifParagraphe {
float: left;
width : 100%;
margin: auto;
height: auto;
	
}

#pagemodifpage #ajoutParagraphe .message, #pagemodifpage #modifParagraphe .message{
	background-color : #fdd793;
	width : 98%;
	margin-bottom : 2%;
	font-size : 1.2em;
}
#pagemodifpage #paragrapheexistant{
	margin : 0;
}

/*ici, on agit sur les paragraphes (donc sur le bloc de gauche)*/
#pagemodifpage .unparagraphe{
float: left;
	width : 100%;
	height: 100%;
	margin-top : 3%;
}

/*Le bloc gauche*/
#pagemodifpage .blocgauche{
	float: left;
	width : 50%;
	height: 100%;
	text-align: left;
}

/*Le textarea du bloc gauche : là où il y a le texte du paragraphe*/
#pagemodifpage .blocgauche textarea{
	width : 100%;
}

/*Choix photo1 et choix photo2*/
#pagemodifpage .divFormat{
	display : none; 
}

#pagemodifpage .parametresparagraphes{
	height : 100%;
	width : 100%;
	text-align : center;
}

#pagemodifpage fieldset{
	width : 90%;
	height : 100%;
}

/*Les légendes pour les photo et les champs parcourir*/
#pagemodifpage .divFormat{
	display : none; 
	margin-bottom : 0;
}


/*Bloc de droite : combien de photo pour le paragraphe*/
#pagemodifpage .blocdroit{
	float : left;
	width : 40%;
	margin-left: 5%;
	margin-top: 6%;
	border : 1px solid #fbe8c3;
}

/*Bloc de droite : combien de photo pour le paragraphe*/
 #aperçu_photo {
width: 90%;
height: auto;
text-align: center;
margin: auto;
background-color: Aqua;
}


#pagemodifpage .boutonvalid{
float: left;
width: 100%;
	margin-top: 4%;
}

#pagemodifpage #titrePageActuel{
	width: 100%;
	background-color: #fbe8c3;
	margin: auto;
	text-align: center;
	
}
#pagemodifpage #aperçuphoto{
	width : 40%;
	text-align : center;
	background-color: Gray;
}

#pagemodifpage .selectionphoto #aperçuphoto{
	width : 100%;
	height : 100%;
}

#pagemodifpage .selectionphoto2 img{
	width : 60%;
	height : 60%;
	margin-top : 2%;
	
}

#ajoutParagraphe .boutonvalid{
	width: 100%;
	margin: auto;
	text-align: center;
	margin-top: 2%;
}

#ajoutParagraphe .blocdroit{
float : left;
	width : 40%;
	margin-left: 5%;
	margin-top: 2%;
	border : 1px solid #fbe8c3;
}
#pagemodifpage .choixformat{
	background-color : #fbe8c3;
}
#pagemodifpage #supParagraphe table #entete, #pagemodifpage #supParagraphe table #pied{
	background-color : #fbe8c3;
	
}
#pagemodifpage #supParagraphe table td{
	border : 1px solid #fbe8c3;
}
#pagemodifpage #supParagraphe table tr{
	margin-top : 3%;
}
#pagemodifpage #supParagraphe table .col1{
	background-color : #fbe8c3;
}

#pagemodifpage #supParagraphe table .paragrapheexistant{
	margin-top : 2%;
}
#pagemodifpage #modifOrdrePage{
	width: 98%;
	margin: auto;
	margin-top: 3%;
	text-align: center;
}

#pagemodifpage #piedTab{
	margin: auto;
	text-align: center;
}
/*----------------------------------------------------------------------------------------------------PAGE DE SUPPRESSION DE PAGES----------------------------------*/

/*bloc principal*/
#pagesuppage{
width: 100%;
margin-top: 10%;
text-align : center;
}

#pagesuppage #choixsection, #pagesuppage #choixpage{
    margin-top : 10%; 
    margin-bottom : 10%; 
    width : 60%;
    margin: auto;
}



/*Les 4 images pour le bloc de fond couleur blond pour les paramètres de la page*/
#pagesuppage .upperleft{
    width: 80%;
     margin: auto;  
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#pagesuppage .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#pagesuppage .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#pagesuppage .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
     padding:5%;
     margin-bottom: 5%;
    }

/*le tableau qui accueille le texte et la liste déroulante*/
#pagesuppage #choixpage table {
width: 70%;
margin: auto;
    text-align: center;
}


/*le tableau qui accueille le texte et la liste déroulante*/
#pagesuppage #choixsection table {
width: 70%;
margin: auto;
    text-align: center;
}

/*la liste déroulante*/
#pagesuppage #choixsection select{
    width: 100%;
    height: 100%;
}

/*---------------------------Page d'ajout de LIENS--------------------------------------------*/
/*bloc principal*/
#formajoutlien{
    width: 100%;
    height: auto;
    text-align : center;
    margin-top: 10%;
}

/*bloc contenant le texte et les deux champs*/
#ajoutlien{
    margin-top : 10%; 
    margin: auto;
    width : 60%;
    margin-bottom : 10%;
}

/*Les 4 images pour le bloc de fond couleur blond pour les paramètres de la page*/
#formajoutlien .upperleft{
    width: 80%;
     margin: auto;  
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#formajoutlien .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#formajoutlien .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#formajoutlien .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
     padding:5%;
     margin-bottom: 5%;
    }
     
/*bloc contenant le texte et les deux champs*/
#ajoutlien .boutonvalid{
    margin-top : 5%; 
border: 1px solid black;
}

/*-------------------Page de modification des LIENS-----------------------------------------*/

/*bloc principal*/
#pagemodiflien{
    text-align : center;
	 width:50%;
	 margin: auto;
	 margin-top:10%;
}

#pagemodiflien #choixlien, #pagemodiflien #parametrelien{
    margin-bottom : 10%; 
    width : 100%;
    margin: auto;
}

/*Les 4 images pour le bloc de fond couleur blond pour les paramètres de la page*/
#pagemodiflien .upperleft{
    width: 100%;
     margin: auto;  
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#pagemodiflien .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#pagemodiflien .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#pagemodiflien .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
     padding:5%;
     margin-bottom: 5%;
    }
/*la liste déroulante*/
     #pagemodiflien select{
     width: 100%;
     }
/*le formulaire*/    
      #pagemodiflien form{
     width: 100%;
     text-align: center;
     }
/*le tableau contenant le texte et la liste déroulante*/
     #pagemodiflien table{
     width: auto;
     margin: auto;
     text-align: center;
     }
     
/*-------------------------PAGE DE SUPPRESSION DE LIEN----------------------------------------*/
/*bloc principal*/
#suplien{
	width : 50%;
	margin: auto; 
    margin-top : 10%; 
    

}
/*bloc secondaire accueillant le contenu de la page*/
#pagesuplien{
width: 100%;
    margin-top: 5%;
    text-align : center;
}

/*Les 4 images pour le bloc de fond couleur blond pour les paramètres de la page*/
#pagesuplien .upperleft{
    width: 100%;
     margin: auto;  
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#pagesuplien .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#pagesuplien .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#pagesuplien .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
     padding:5%;
     margin-bottom: 5%;
    }
     
     /*-------------------------------Page de modicication de COMPTE------------------------*/
/*bloc principal*/
#formmodifcompte #modifcompte{
    margin-top : 2%;
    margin-bottom : 1%;
    width : 60%;
    margin: auto;
}
/*bloc secondaire*/
#formmodifcompte{
margin-top: 2%;
    text-align : center;    
}

/*le tableau*/
 #modifcompte table{
    width : 90%;
    margin: auto;
	 margin-top: 2%;
}

/*la phrase : "pour modifier vos paramètres vous devez obligatoirement..."*/
 #modifcompte .intro{
    width : 100%;
    margin: auto;
	 background-color: #fbe8c3;
	 color: #d80000;
}

/*la ligne : mot de passe actuel*/
 #modifcompte .colancienpassword{
font-weight: bold;
}


/*Les 4 images pour le bloc de fond couleur blond pour les paramètres de la page*/
#formmodifcompte .upperleft{
    width: 80%;
     margin: auto;  
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#formmodifcompte .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#formmodifcompte .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#formmodifcompte .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
     padding-bottom:5%;
	  padding-top:3%;
     margin-bottom: 5%;
    }
     
/*----------------------------Page d'ajout d'ADMINSITRATEUR--------------------------------*/
/*bloc principal*/
#ajoutadmin{
    margin-top : 5%; 
    width : 60%;
    margin-bottom : 5%;
    margin: auto;
}

#ajoutadmin table {
width: 95%;
text-align: left;
margin-left:5%;
}

/*bloc secondaire*/
#pageajoutadmin{
    text-align : center;
    margin-top: 5%;
}
/*le bouton "ajouter l'administrateur"*/
#pageajoutadmin .boutonvalid{
    margin-top: 5%;
}

/*Les 4 images pour le bloc de fond couleur blond pour les paramètres de la page*/
#pageajoutadmin .upperleft{
    width: 80%;
     margin: auto;  
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#pageajoutadmin .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#pageajoutadmin .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#pageajoutadmin .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
     padding:5%;
     margin-bottom: 5%;
    }
     
/*---------------------------PAGE DE SUPPRESSION D'ADMINISTRATEUR--------------------------*/

/*le bloc principal*/
#pagesupadmin #supadmin{
    width : 50%;
	 margin: auto;
	 margin-top : 10%; 
    margin-bottom : 5%;  
}

/*le bloc secondaire*/
#pagesupadmin{
width: 100%;
margin:auto;
    text-align : center;
}

/*Les 4 images pour le bloc de fond couleur blond pour les paramètres de la page*/
#pagesupadmin .upperleft{
    width: 100%;
     margin: auto;  
    background-color : #fdd790;
    background-image : url('images/coin1.gif');
    background-repeat : no-repeat;  
    background-position : top left;
    }

#pagesupadmin .upperright{
    background-image : url('images/coin2.gif');
    background-repeat : no-repeat;
    background-position : top right;
    }

#pagesupadmin .lowerleft{
    background-image : url('images/coin4.gif');
    background-repeat : no-repeat;
    background-position : bottom left;
    }

#pagesupadmin .lowerright{
    background-image : url('images/coin3.gif'); 
    background-repeat : no-repeat;
    background-position : bottom right; 
    text-align:center;
     padding:5%;
     margin-bottom: 5%;
    }
     
/*le tableau contenant le texte et la liste déroulante*/
#pagesupadmin table{
    width: 70%;
    margin: auto;
    text-align : center;
}


/*------------------------------------------------------------------------------------------------------------PAGE DE ZOOM*/
 #zoom{
	width : 100%;
	height : 100%;
	margin-top : 5%;
	text-align : center;
}

#zoom object {
	height : 85%;
	width : 100%;
}



/*-------------------------------------------------------------------------------------------------------------------style concernant l'affihage des paragraphes dans la section en souvenir--------------------------*/
#ensouvenir{
	width : 100%;
	height : 100%;
}

#ensouvenir #blocgauche{
	width : 70%;
	height : 100%;
	float : left;
	overflow : auto;
}
#ensouvenir  #blocgauche table{
	width : 98%;
	text-align : center;
}
#ensouvenir  #blocgauche td{
	width : 25%;
	height : 200px;
}

#ensouvenir  #blocgauche .imgLarger{
	text-align :center;

}
#ensouvenir  #blocgauche .imgHeigher{
	text-align :center;
	
}
#ensouvenir #blocdroit{
	width : 30%;
	height : 100%;
	float : left;
	text-align : center;
}

#ensouvenir #blocdroit #upperleftphoto{
	margin : auto;
	width : 90%;
	height : 60%;
	background-image : url('images/upperleft_photo.png');
	background-repeat : no-repeat;
	background-position : top left;
}
#ensouvenir #blocdroit #upperrightphoto{
	width : 100%;
	height : 100%;
	background-image : url('images/upperright_photo.png');
	background-repeat : no-repeat;
	background-position : top right;
	
}
#ensouvenir #blocdroit #lowerleftphoto{
	width : 100%;
	height : 100%;
	background-image : url('images/lowerleft_photo.png');
	background-repeat : no-repeat;
	background-position : bottom left;
}
#ensouvenir #blocdroit #lowerrightphoto{
	width : 100%;
	height : 100%;
	background-image : url('images/lowerright_photo.png');
	background-repeat : no-repeat;
	background-position : bottom right;
}
#ensouvenir #blocdroit #lowerrightphoto .p_image{
	width : 100%;
	height : 100%;
	
}
#ensouvenir #blocdroit #lowerrightphoto .imgHeigher{
	height : 90%;
	display : block;
	padding-top : 3%;
	margin : auto;
}
#ensouvenir #blocdroit #lowerrightphoto .imgLarger{
	width : 80%;
	display : block;
	padding-top : 5%;
	margin:auto;
}
#ensouvenir #blocdroit #intro_ensouvenir{
	padding-top : 15%;
	line-height : 170%;
	text-align : justify;
	text-indent : 0.5cm;
	width : 90%;
	margin:auto;
}
#ensouvenir #blocdroit .aperçuImgSelHidden{
	display : none;
}

#ensouvenir .invisible{
	visibility : none;
	display : none;
}
#ensouvenir .imgSelection{
	border : 2px solid #d80000;
}
#ensouvenir #lien{
	margin-top: 2%;
	width : 100%;
	text-align : center;
}
#ensouvenir #lien a{
	color : #d80000;
	text-decoration : none;
	margin-top : 1%;
}
#ensouvenir #lien a:hover{
	color : #ffffff;
	background-color : #d80000;
	text-decoration : none;
}
/*--------------------------------------------------------------------------------------------------------------------PAGE D'ENVOI DE CARTE POSTALE NUMERIQUE--------------*/

#message{
	width : 100%;
	background-color : #fdd790;
	text-align : center;
	font-weight : bolder;
}
#cartepostalenumerique{
	position : absolute;
	width : 70%;
	height : 70%;
	margin-left : 15%;
	border : 5px solid #dddddd;
}
#cartepostalenumerique .obligatoire{
	color : #d80000;
	font-size : 1.3em;
	margin-right : 1%;
}


#cartepostalenumerique #blocHaut{
	width : 100%;
	height : 25%;
}
#cartepostalenumerique #blocHaut img {
	float : right;
	height : 80%;
	margin-right : 3%;
}
#cartepostalenumerique #ecard{
	width : 100%;
	height : 65%;
}
#cartepostalenumerique #ecard table{
	text-align : left;
}

#cartepostalenumerique #ecard table .col1{
	width : 1%;
}
#cartepostalenumerique #ecard table .col2{
	width : 25%;
}
#cartepostalenumerique #ecard table .col3{
	width : 50%;
}
#cartepostalenumerique #ecard table .col3 input{
	width : 90%;
	
}
#cartepostalenumerique #ecard table .col3 textarea{
	width : 90%;
}
#cartepostalenumerique #ecard #blocPhoto{
	width : 45%;
	height : 100%;
	float : left;
}
#cartepostalenumerique #ecard #blocPhoto p {
	text-align : center;
}
#cartepostalenumerique #ecard #blocPhoto #imageMessage{
	width :100%;
	height : 100%;
}
#cartepostalenumerique #ecard #blocPhoto .imgLarger{
	width : 80%;
	margin-top : 5%;
	margin-left : 2%;
}
#cartepostalenumerique #ecard #blocPhoto .imgHeigher{
	height : 100%;
	margin-left : 10%;
	margin-right : 10%;
}
#cartepostalenumerique #ecard #blocPhoto  #imgTextVertical{
	height : 100%;
}
#cartepostalenumerique #ecard #blocPhoto p{
	display : block;
	text-align : center;
}

#cartepostalenumerique #ecard #formulaireMessage{
	float : left;
	width : 54%;
}
#cartepostalenumerique #ecard #imageMessage img{
	float : left;
}
#cartepostalenumerique #ecard textarea{
	width : 60%;
	float : left;
}
#cartepostalenumerique #blocBas{
	text-align : center;
	width : 100%;
	height : 5%;
}

/*-------------------------------------------------------------------------------------------------------------PAGE DE REMERCIEMENTS*/
#remerciement{
	height : 100%;
	width : 100%;
	overflow : auto;
}
#remerciement p {
	text-indent : 1cm;
	text-align : justify;
	width : 70%;
	line-height : 170%;
	margin:auto;
	margin-bottom : 2%;
	margin-top : 2%;
}
#remerciement ul {
	margin:auto;
	text-align : justify;
	width : 70%;
	
	line-height : 170%;
	margin-bottom : 2%;
}
#remerciement ul img{
	margin-right : 1%;
	
}
#remerciement .s-li{
	text-indent : 2cm;
	list-style : none;
	font-style: italic;
}
#remerciement #p_centre{
	text-align : center;
	text-indent : 0;
}
#remerciement a{
	text-decoration : none;
	color : #d80000;
}
#remerciement a:hover{
	text-decoration : none;
	color : #ffffff;
	background-color : #d80000;
}
#remerciement hr{
	width : 40%;
	color : #fdd790;
	border : 0;
	background-color : #fdd790;
	height : 1px;
	margin : auto;
}