/* propriétés générales de la page */ 
body   { 
background:#ffc url('../images/AOC3.jpg') no-repeat fixed 50% 50%;  


}
/* propriétés du menu horizontal */
#menu_horizontal {
	text-align:center;
	}
/* propriétés du chemin de fer */
#chemin_fer {	
	}
/* bloc central uniquement crée pour uniformiser les hauteurs des deux blocs contenus (menu_vertical et contenu) */
#bloc_central {
 	}
/* propriétés du menu vertical */
#menu_vertical {
	float:left;
	width:20%;
	height:300px;
	}
/* propriétés du contenu */
#contenu {
	float:left;
	width:80%;
	height:300px;
	font-size:28px;
	text-align:center;
	}
/* propriétés du pied de page */
#pied_page {
	clear:both;
	font-size:12px;
	text-align:center;
	}
/* comportement de la liste dans le bloc menu_horizontal */
#menu_horizontal li  { text-decoration: none; list-style-type: none; display: inline; margin-right: 20px }
/* propriétés des liens (de base et déjà visités) contenus dans le bloc menu_horizontal */
#menu_horizontal a:link, #menu_horizontal a:visited  { color: #33f; font-weight: bold; text-decoration: none }
/* propriétés des liens (au dessus et actifs) contenus dans le bloc menu_horizontal */
#menu_horizontal a:hover, #menu_horizontal a:active {
	text-decoration:underline overline;
	}
/* propriétés des liens (de base et déjà visités) contenus dans le bloc chemin_fer */
#chemin_fer a:link, #chemin_fer a:visited  { color: #e80074; font-weight: bold; text-decoration: none }
/* propriétés des liens (au dessus et actifs) contenus dans le bloc chemin_fer */
#chemin_fer a:hover, #chemin_fer a:active {
	text-decoration:underline overline;
	}
/* propriétés des liens (de base et déjà visités) contenus dans le bloc menu_vertical */
#menu_vertical a:link, #menu_vertical a:visited    
{ border-left:2px solid #ffffff; 
  border-right:2px solid #000000; 
  border-top:1px solid #ffffff; 
  border-bottom:1px solid #000000; 
  color: #e80074; 
  font-size: 15px; 
  font-variant: small-caps; 
  font-weight: bold; 
  text-decoration: none; 
  text-align: center; 
  /*  text-indent: 4.23mm */
   width: 160px;
  display: block;

  background: url('images/bouton02.jpg') 50% 50%;
  }
/* propriétés des liens (au dessus et actifs) contenus dans le bloc menu_gauche */
#menu_vertical a:hover, #menu_vertical a:active    
{ color: blue ; /* white; */  
 /* font-size: 16px; */
  text-decoration: none ; /*underline; */
  background: url('images/bouton01.jpg') no-repeat relative 50%; 
			  bordure: #000000 ; 
			  background-position-x:50%; background-position-y:50%}
#menu_vertical a.nouveau {
	background: url('images/boutoNew.gif');
}
#menu_vertical a.nouveau:hover, #menu_vertical a.nouveau:active    
{ color: blue ; /* white; */  
  /* font-size: 16px; */
  text-decoration: none ; /*underline; */
  background: url('images/bouton01.jpg') no-repeat relative 50%; 
			  bordure: #000000 ; 
			  background-position-x:50%; background-position-y:50%}

//---------------------------------------------------------------------------------------------------------	
/* pour afficher la carte dans un bloc*/
#Bloc_image  { width: 100%; height: 300% }
/* titre principal des pages */ 
#Titre01   { color: #30c; font-size: 12mm; font-weight: bold; text-decoration: underline; text-align: center; text-transform: uppercase }
#Titre01Marge   { color: #30c; font-size: 12mm; font-weight: bold; text-decoration: underline; text-align: center; text-transform: uppercase; margin: 0 0 0 7cm }
#Titre02      { color: #30f; font-size: 12mm; font-family: "Monotype Corsiva"; font-style: normal; font-weight: bold; font-stretch: normal; text-decoration: underline; text-align: left; margin-top: 1cm }
#Titre02Marge  { color: #30f; font-size: 12mm; font-family: "Monotype Corsiva"; font-style: normal; font-weight: bold; font-stretch: normal; text-decoration: underline; text-align: left; margin-top: 1cm; margin: 0 0 0 7cm }
#Titre03      { color: #333; font-size: 8mm; font-family: "Monotype Corsiva"; font-style: normal; font-weight: bold; text-decoration: none; text-align: left; text-indent: 10mm }
#Titre03Marge   { color: #333; font-size: 8mm; font-family: "Monotype Corsiva"; font-style: normal; font-weight: bold; text-decoration: none; text-align: left; text-indent: 10mm; margin: 0 0 0 8cm }
#TitreDecale01  { color: #30c; font-size: 12mm; font-weight: bold; text-decoration: underline; text-align: center; text-transform: uppercase; text-indent: 5cm }
#paragr01      { color: #000; font-size: 8mm; font-family: "Monotype Corsiva"; font-style: normal; font-weight: normal; text-decoration: none; text-align: left }
#paragr02     { color: #000; font-size: 6mm; font-style: normal; font-weight: normal; text-decoration: none; text-align: justify; margin: 0 0 0 7cm }
#paragr03  { color: #000; font-size: 6mm; font-family: "Times New Roman"; font-style: normal; font-weight: normal; text-decoration: none; text-align: justify; margin: 0 0 }
#paragrCentrer01  { color: #000; font-size: 6mm; font-family: "Times New Roman"; font-style: normal; font-weight: normal; text-decoration: none; text-align: center; margin: 0 }
#TexteRouge01  { color: #f63; font-weight: bold }
#TexteBleu01   { color: #03f; font-weight: bold }
#TexteBleu01Ita   { color: #03f; font-weight: lighter ; font-size: 4mm;font-style:italic }
#TexteRougeIta   { color: red; font-weight: bold ; font-size: 6mm;font-style:italic }
#minuscule   { color: #000; font-size: 6mm; font-family: "Monotype Corsiva"; font-style: normal; font-weight: normal; text-decoration: none; text-align: left }
#TexteNormal { text-align: left }

.miniature  { text-align: center; margin-bottom: 5ex; width: 15ex; float: left; vertical-align: bottom }
a img { border:0px;}


--------------------- album photos ------------------------------------------------------------------------	
/*
Les images sont déclarées dans le code html sans valeurs de tailles (ni width, ni height), 
chacune d'elle est dans un <div class="thumb"> dont les propriétés seront déclarées dans la feuille de style. 
Une seule image par zoom est nécessaire, le poids de la page doit pouvoir rester raisonnable 
si l'on n'utilise pas d'images trop grandes.
*/
img {border:0px none; } 

.thumb {
	width:100px;
	height:75px; 
	margin:1px;
	float:left; 
	background-color:#D3D3D3; 
	display: block;
	
	} 

.thumb a {
	display:block;
	}

.thumb a:hover {
	position: absolute;	
	}	 
	
/*hack pour permettre le rollover 
de gauche à droite avec mozilla*/

body>.thumb a:hover {	  
	position:relative;	 
	}	
	
.thumb a img { 
	margin:0;
	padding:0;
	width:100px;
	height:75px; 
	}

.thumb a:hover img  { position: relative; top: 80px; left: 0; width: 300px; height: 225px }

/* pour le diaporama */ 

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; /* couleur de la bordure de l'image*/ width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; } /*largeur de la bordure autour de la photo. Si vous la modifier, modifier la variable correspondante dans le fichier lightbox.js (borderSize: 10,  )*/

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } /*position de l'image de chargement*/
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url('data:image/gif;base64,AAAA'); /* hack IE pour montrer le hover */ display: block }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url('../images/prevlabel.gif') no-repeat left 15%; } /*image et position du lien "précédent". modifier le pourcentage pour déplacer le lien en hauteur (% compté depuis le haut de l'image)*/
#nextLink:hover, #nextLink:visited:hover { background: url('../images/nextlabel.gif') no-repeat right 15%; } /*idem pour le lien "suivant"*/

/*Cadre d'information en bas de l'image*/
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; /*couleur de fond */ margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; } /* couleur du texte*/
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;} /*si vous voulez une couleur différente pour la légende, ajoutez un attribut color*/
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;}	/*si vous voulez une couleur différente pour les numéros de photos, ajoutez un attribut color*/
#imageData #bottomNavClose{ width: 66px; /*à modifier si vous modifier la largeur du bouton "fermer"*/ float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; /*couleur de l'ombre*/}

/*--------------------- création d'un bouton ------------------------------------------------------------------------	
*/
.buttonImg {
    width: 70px;
    height: 30px;
    border: medium none;
    cursor: pointer;
    background: url('images/bouton01.jpg') no-repeat left top;
    }

.buttonImg:hover {
    background: url('images/bouton01.jpg') no-repeat left bottom;
    } 
/*--------------------- pour afficher les news dans un tableau ------------------------------------------------------------------------	
*/

#tabdiv {
    /* border:solid blue 1px ; 
	 border-top:blue 2px ;
	*/
	background-color:#D3D3D3;
	 border-width: 4px; /* thin medium thick;*/
	 border-style:double; /*- solid, bordure continue,
                            - double, bordure en double trait,
                            - groove, bordure en creux,
                            - ridge, bordure en saillie,
                            - inset, bordure en 3d lumière basse,
                            - outset, bordure en 3d lumière haute 
							- dotted, bordure en pointillé (sauf internet explorer),
                            - dashed, bordure en tirets (sauf internet explorer)
							*/
}
#tabdiv p {
	clear:both;
	text-align:left;
	font-size: 4mm;
	margin-top:0;
	margin-rigth: 0;
	margin-botton: 0px;
	margin-left: 100px;
	/*border: solid blue 1px ; */
}
#tabdiv p sousligne {text-decoration: underline ; } /*  underline = souligné dessous */
#tabdiv p span {
	float:left;
	width:100px;
	text-align:left;
	
	margin-top:0;
	margin-rigth: 0;
	margin-botton: 0;
	margin-left: -100px;
}
#tabdiv p span titre {
    font-variant: small-caps ;
	font-size: 4mm;
	/*background-color:#D3D3D3; */
	font-weight: bold;
	 
}
#tabdiv p span titre1 {
    font-variant: small-caps ;
	font-size: 4mm;
	/*background-color:#D3D3D3; */
	font-weight: bold;
	white-space: pre; /* pas de retour à la ligne automatique*/
	 
}