.imgdia { 
border : 3px solid white;
width: 100px;
height: 100px;
}

a:hover .imgdia  { 
border : 3px solid #ff6600;

}

.image { 
border : 10px solid white;
}

.imgmenu{ 
border : none;
position:relative;
}

.imghome{ 
border : none;
}

div#flashcontent{ 
border : none;
margin: 0 auto ;
padding:10px;
text-align:center;
width:850px;
height: 700px ;
}

div#menubar{ 
border : none;
margin: 0 auto ;
padding:10px;
text-align:center;
}
div#legende { 
width:300px;
border : none;
margin: 10px auto 10px auto ;
padding:0px;
text-align: justify ;
line-height: 1.7em ;
color: #333333 ;
}

a:link {
	color:#ff6600;
	text-decoration:none;
}
a:visited {
	color:#ff6600;
	text-decoration:none;
}

body
{
	margin: 10px 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background: #efefef ;
}
/* marges haute et basse à 10px et les marges droite et gauche à 0 */
/* padding à 0 pour le browser Opera qui définit des padding par défaut du body */
/* text-align: center ; pour IE c'est la seule façon de centrer les éléments de type block avec ce navigateur */

div#conteneurflash
{
	width: 900px ;
	height: 800px;
	margin: 0 auto ;
	padding:5px;
	text-align: left ;
	border: 1px solid #808080;
	background: #cccccc ;

}

div#conteneur
{
	width: 770px ;
	margin: 0 auto ;
	padding:5px;
	text-align: left ;
	border: 1px solid #808080;
	background: #cccccc ;

}
/* largeur 770 max pour un non scroll en 800/600 */
/* margin: 0 auto ; pour centrer les éléments blocks ou div */
/* Il faut rétablir l'alignement à gauche que nous avons changé dans le body */

h1#header
{
	height: 100px ;
	background: url(bibheader.jpg) no-repeat left top;
	padding-top: 15px;
	color: #333333;
	font-size: 2em ;
	text-align: center;
}

ul#menu
{
	height: 35px ;
	margin: 0 ;
	padding: 0 ;
	background: url(img/bg3_menu.png) repeat-x 0 -25;
	list-style-type: none ;
}
/* On donne une hauteur au menu, correspondant à la taille de l'image utilisée en fond, on met ensuite l'image de fond
  avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over */
ul#menu li
{
	float: left ;
	text-align: center ;
}
/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */

ul#menu li a
{
	width: 130px ;
	line-height: 25px ;
	font-size: 1.2em ;
	font-weight: bold ;
	letter-spacing: 2px ;
	color: #333333 ;
	display: block ;
	text-decoration: none ;
	border-right: 1px solid #dea ;
}

ul#menu li a:hover
{
	background: url(img/bg3_menu.png) repeat-x 0 0;
}
/* on décale l'image de fond au passage de la souris pour laisser aparaître l'état survolé de l'image*/


div#image
{
	padding: 0 20px 0 20px ;
	text-align:center;
}
/* mise en place d'un espace à gauche et à droite du contenu*/

div#contenu h2
{
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.4em ;
	/* background: url(little_apple.gif) no-repeat right bottom ;*/
	color: #333333 ;
	border-bottom: 1px solid #ff6600 ;
}
/* Mise en forme du titre de page, une petite image, on décale le texte en fonction de l'image, on donne un couleur au texte et on met une bordure basse */

div#contenu h3
{
	margin-left: 20px ;
	margin-right: 400px;
	padding-left: 5px ;
	border-bottom: 1px solid #ff6600 ;
	border-left: 1px solid #ff6600 ;
	color: #333333 ;
}
/* De même que pour le titre h2, à ceci près qu'on ne donne pas d'image décorative cette fois ci */

div#contenu p
{
	text-align: justify ;
	text-indent: 20px ;
	line-height: 1.7em ;
	color: #333333 ;
}
/* On rend les paragraphes plus propre, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */

div#contenu a
{
	color: #ff6600 ;
	text-decoration:none;
}

div#contenu a:hover
{
	color: #ff6600;
	text-decoration:underline;
}
/* On met en forme les liens contenu dans la page */

div#footer
{
	height: 20px ;
	margin: 0 ;
	padding: 10px ;
	text-align: center ;
	color: #333333 ;
	font-size: smaller;
	clear:left;
}

div#footer2
{
	height: 20px ;
	margin: 0 ;
	padding: 5px ;
	text-align: center ;
	color: #333333 ;
	font-size: smaller;
}
/* style des liens contenu dans le footer */
div#footer2 a
{
	color: #333333 ;
	text-decoration:none;
}

/* style des liens contenu dans le footer  au passage de la souris*/
div#footer2 a:hover
{
	color: #ff6600;
	text-decoration:underline;
}
pre
{
	/* overflow: auto ;*/
	padding: 5px 0 0 5px ;
}
/*overflow de la balise pre à auto pour permettre d'afficher des barres de défilement si le texte contenu dans cette balise est trop grand */

pre span
{
	color: #333333 ;
}
/* Couleur de texte des éléments compris dans des span
 eux mêmes compris dans un pre */

pre span.comment
{
	color: #333333 ;
}
/* Couleur différente pour les span.comment, les span utilisés pour les commentaires */
div#spacer{ 
	clear:left;
	border : none;
	margin: 0 auto ;
	padding:10px;
	background-color: #cccccc;
	text-align:center;
}
div.diaporama
{
	/*background-color:red;*/
	background-color:#cccccc;
	width : 770px;
	/*display: inline;*/
	float: left;
	
	text-align: center;
	/*padding: 5px;*/
		}