body
{
	vertical-align:text-top;
	margin: 10px 0 ;
	padding: 0 ;
	text-align: left ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background-color:#FFFFff;
	
}
/* On d�finit les marges haute et basse � 10px et les marges droite et gauche � 0 */
/* On met le padding � 0 pour le navigateur Opera qui d�finit des padding par d�faut pour le body */
/* On utilise text-align: center ; pour Internet Explorer, 
c'est la seule fa�on de centrer les �l�ments de type block avec ce navigateur */
a img
{
border:none;
}

div#conteneur
{
	width: 966px ;
	margin: 0 auto ;
	text-align: left ;
	border: 1px solid #FF6633 ;
	background: #ffffec ;
	overflow:hidden;
}
/* On d�finit la largeur de la division qui contient l'ensemble de la page � 966 pixels */
/* margin: 0 auto ; est la m�thode correcte pour centrer les �l�ments de type
 block (comme les divisions), nous centrons donc cette division */
/* Il faut r�tablir l'alignement � gauche que nous avons chang� plus haut */


div#colonneg
{
	float:left;
	width: 180px ;
	margin-top:5px;
	margin-right:5px;
	padding-left:2px;
	border-right: 1px dotted #e1e1e1;
	text-align:left;
	background:#ffffff ;
}

div#contenu
{
	width: 765px ;
	float:right;
	padding: 0 5px 0 5px;
	margin-top:0px;
	text-align: left ;
	color: #666666;
	background-color: #ffffff;
}

/*
div#colonned
{
	width: 155px ;
	float:right;
	margin-top:0px;
	margin-left: 5px;
	padding-right:2px;
	border-top: 1px dotted #FF6633;
	border-left: 1px dotted #FF6633;
	border-bottom: 1px dotted #FF6633;
	text-align:left;
	background: #ffffff url(bg_col.gif) repeat-x ;
}
*/
div#intro
{
/*width:580px;*/
height:300px;
display:block;
float:left;
clear:both;
line-height:1.5em;
font-size:1.1em;
}

h1{
font-size:1.3em;
padding-top:5px;
}

h1#contenu
{
	color:#F93;
	padding-left:10px;
	border-bottom:solid 2px #000;
}

h2
{
	margin:0;
	padding:0 0 0 30px;
	line-height: 25px ;
	font-size: 1.1em ;
	font-family:Arial, Helvetica, sans-serif;
	background: url(bg_ulmenu.jpg) repeat-x top left;
	color: #000;
	border-bottom: 1px dotted #ff0 ;
	border-top:3px solid #eff;

}

h3
{
	margin-left: 15px ;
	color: #FFCC00;
	font-size: 1.1em ;
}

p#entete
{
	background:url(puce.gif) no-repeat;
	padding-left: 20px ;
	margin-bottom:0px;
	line-height: 15px ;
	font-size: 1em ;
	font-weight:400;
	color: #FF6600;
}

p#contenu
{
	padding-left: 40px ;
	margin-top:0px;
	margin-right: 100px;
	line-height: 15px ;
	font-size: 1em ;
	border-top: 1px dotted #000000;
}

p
{
	text-align:justify;
	margin-top:1px;
}
/* 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
{
	border-bottom:1px solid #ff0000;
	color: #FF0000;
	font-size: 1.2em ;
	margin-top:0px;
	margin-bottom:0px;
}
/* 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
{
	line-height: 1.7em ;
	letter-spacing:0.5px;
}
/* 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#conteneur a
{
	color: #660;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:700;
	text-decoration:none;
}

div#conteneur a:hover
{
	color: #000000;
}
/* On met en forme les liens contenu dans la page */

div#blok
{
	border : 1px solid #cccccc ;
	padding: 5px;
}

div#blokg
{
	width:280px;
	display: block ;
	float:left
}

div#blokd
{
	width:280px;
	display: block ;
	float:right
}

p#annot
{
	margin-left: 350px;
	text-align: right;
	background-color: #eeeeee;
	font-size: 0.9em;
	font-style: italic;
	color: #8a0 ;
	margin-top:0px;
}

p#pagin
{
	text-align: right;
	border:1px dotted;
	font-style: italic;
	color: #003355 ;
}


p#footer
{
	text-align:center;
	margin: 5px ;
	color: #003355 ;
}
/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */


h1#titre
{
	height: 138px ;
	padding:0;
	margin:0;
	background: url(banniere2.jpg) no-repeat left top;
	clear:both;
}
/* On d�finit la hauteur de la partie header, contenant le titre du site */

h1#titre a
{
	width: 966px ;
	height: 100px ;
	display: block ;
	background: url(title.gif) no-repeat ;
	text-indent: -5000px ;
	margin:0;
	padding:0;
}

.edito
{
	color: #FF6633;
	border-bottom: 1px dashed;
	border-top:1px solid #ff0;
	background:url(puce_menu.gif) no-repeat;
	padding-left:25px;
}
/* On donne les m�mes dimensions au lien, chose
 possible gr�ce � la propri�t� display: block ; qui transforme le lien
  en �l�ment de type block, auquel on peut donner des propri�t�s de taille.
   On met aussi l'image de fond qui a les m�mes dimensions que le cadre ainsi cr�� */
/* Le text-indent n�gatif est fait pour pouvoir ne
 cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
  exploitable pour les synt�ses vocales */
.menu{
	background:url(tab_right.png) no-repeat bottom right;
	padding:2px 16px 4px 20px;
	height:16px;
	font-style:italic;
	font-weight:bold;
	font-variant:small-caps;
	margin:1px 2px 1px 2px;
	float:inherit;
	color:#000;
}

ul#menu
{
	height: 30px ;
	width:966px;
	border-bottom:#000 solid 1px;
	border-top:1px solid #000;
	text-align:center;
	margin: 0px;
	padding: 0px;
	float:left;
	font-size:1.1em;
	list-style-type: none ;
	background:url(bg_ulmenu2.jpg);
}
/* On donne une hauteur au menu, correspondant a
 la taille de l'image utilis�e en fond, on met ensuite l'image de fond
  avec un d�calage de 30 pixels vers le haut pour utiliser la technique de roll over expliqu�e dans un autre tutoriel; */
ul#menu li
{
	float: left ;
	text-align: left ;
	list-style-type:none;
}
ul#menu li ul
{
	margin:0;
	padding:0;
}
/* On rend les li en flottant pour pouvoir les
 afficher horizontalement, on cache les puces, et on centre le texte */

ul#menu li a
{
	text-align: center ;
	border-right:1px #000 solid;
	padding: 3px 10px;
	line-height: 21px ;
	font-weight: bold ;
	font-size:13px;
	letter-spacing: 0.5px ;
	color: #000000 ;
	display: block ;
	text-decoration: none ;
	border-bottom:3px solid #ff0;
	background: url(bg_menu.gif) repeat-x 0 0 ;
}
/* C'est sur les liens que le gros du travail est
 effectu�, largeur, hauteur de ligne, taille de police, graisse de police,
  espacement des lettres, couleur, bordure et decoration du texte. 
  Nous pouvons dimensionner les a gr�ce � la propri�t� display: block ; */

ul#menu li a:hover, ul#menu li a:focus
{
	background: url(bg_menu.gif) repeat-x 0 -30px ;
	border-bottom:3px solid #f93;
}

ul#menu li a:active
{
	background: url(bg_menu.gif) repeat-x 0 -30px ;
	border-bottom:3px solid #fff;
}

/* Et pour finir on d�cale l'image de fond au passage
 de la souris pour laisser apara�tre l'�tat survol� de l'image, 
 voir le tutoriel sur les roll over pour plus de d�tails */

ul#menuv
{
	height: 30px ;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#menuv li
{
	float: left ;
	text-align: center ;
}

ul#menuv li a
{
	width: auto ;
	height: 15px;
	font-size: 1.2em ;
	font-weight: bold ;
	padding: 0 5px 0 5px ;
	display: block ;
	text-decoration: none ;
	border-right:1px dotted #666666;
	background:url(bg_col.gif) repeat-x;
}

textarea,input,select
{
	font:1.1em Arial, Helvetica, sans-serif;
}
/*
-----------------------FORMULAIRE DE RECHERCHE---------------------
*/
form#form_rech
{
border:dotted 1px #f9c;
}
 
pre
{
	overflow: hidden ;
	background: #dea ;
	border: 2px solid #FF6633 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}

/* En passant on d�finit l'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 */

/* On doit donner une largeur au <pre> � cause d'Internet Explorer, 
on ne va donc l'appliquer qu'� Internet Explorer en utilisant le 
 commentaire conditionnel suivant, � placer dans la partie HTML, 
 et plus pr�cis�ment dans l'�l�ment <head> : */
p#dateheure
{
font-weight:800;
opacity:0.8;
padding-left:23px;
background:url(calendar.png) no-repeat;
}

.leftColumn{
	width:530px;
	left:0px;
	padding:5px;
	position:relative;
	float:left;
	clear:none;
}
.rightColumn{
	width:210px;
	right:0px;
	padding:5px;
	position:relative;
	float:right;
	clear:none;
}

.box{padding:2px; margin:0px; border:1px solid #e1e1e1;border-top:none;width:210px;float:inherit;clear:both;background-color:#eef;}
.box h6{margin:0px; float:right; padding:5px; position:relative;}
.box ul{list-style-type:square;}

.bigbox{padding:2px; margin:0px; border:1px solid #e1e1e1;border-top:none;width:530px;float:left;clear:both;}
.bigbox h6{margin:0px; float:right; padding:5px; position:relative;}
.bigbox ul{list-style-type:square;}

.left {

float:left;
margin:2px;
padding:2px;
}
.right {
	margin: 2px;
	padding: 2px;
	float: right;
}
/**************************************************************

	SlideShow
	v 1.3

**************************************************************/

.slideshowContainer {
	border: 1px solid #ccc;
	width: 320px;
	height: 220px;
	margin-top:0px;
	margin-left:0px;
	display:block;
	float:left;
	clear:both;
	margin-right:5px;
}

.slideshowContainer img{
	border: 1px solid #ccc;
	margin: 10px;
	width:300px;
	height:200px;
}

.loading {
	background: url(images/loader.gif) center no-repeat;
}

.slideshowThumbnail {
	outline: none;
}

.slideshowThumbnail img {
	border: 1px solid white;
	padding: 4px;
	height:0px;
}

a:hover.slideshowThumbnail img {
	border: none;
	padding: 4px;
}

.current img {
	border: none;
	padding: 5px;
}

.outline {
	border: 1px solid orange;
	z-index: 0;
	position: absolute;
}

#thumbnails {
visibility:hidden;
height:0px;
	width: 130px;
	z-index:-1;
	float: left;
}
/*************************************************************/
/*---------------------TABLEAUX------------------------------*/
/*************************************************************/
table {
	width: 100%;
	border:1px solid #000000;
	border-spacing: 0px; }

table a, table, tbody, tfoot, tr, th, td {
	font-family: Arial, Helvetica, sans-serif;
	vertical-align:top;
}

table caption {
	text-align: left;
	text-indent: 100px;
	background: url(images/bg_caption.gif) left top;
	height: 40px;
	color: #FFFFFF;
	border:1px solid #000000; }

thead th {
	background: #000000;
	height: 21px;
	color: #FFFFFF;
	font-family: Arial;
	font-weight: bold;
	padding: 0px 7px;
	margin: 20px 0px 0px;
	text-align: left; }

tbody tr {	background: #ffffff; }

tbody tr.odd {	background: #f0f0f0; }

tbody th {
	background: url(images/arrow_red.gif) top no-repeat #e1e1e1;
	background-position: 5px;
	padding-left: 40px !important; }

tbody tr.odd th {
	background: url(images/arrow_red.gif) left top no-repeat;
	background-position: 5px;
	padding-left: 40px !important; }

tbody th, tbody td {
	line-height: 1.4em;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	padding: 10px 7px;
	border-bottom: 1px solid #800000;
	text-align: left; }

tbody a {
	color: #000000;
	font-weight: bold;
	text-decoration: none; }

tbody a:hover {
	color: #ffffff;
	text-decoration: underline; }

tbody tr:hover th {
	background: #aaa url(images/arrow_red.gif) left top no-repeat;
	background-position: 5px;
	color: #ffffff; }

tbody tr.odd:hover th {
	background: #000000 url(images/arrow_red.gif) left top no-repeat;
	background-position: 5px;
	color: #ffffff; }

tbody tr:hover th a, tr.odd:hover th a	{
		 color: #ffffff; }

tbody tr:hover td, tr:hover td a, tr.odd:hover td, tr.odd:hover td a {
	background: #aaa;
	color: #ffffff;	 }

tbody tr.odd:hover td, tr.odd:hover td a{
	background: #000000;
	color: #ffffff;	 }

tfoot th, tfoot td {
	background: #ffffff url(images/bg_footer.gif) repeat-x bottom;
	color: #ffffff;
	height: 21px;
	}

/*****************************************************/
/*----------------NEWS BOX----------------------------
/*****************************************************/
#box8{
	position:absolute;
}
#box8 div{
	width:210px;
	float:left;
}
#box8 .buttons{
	text-align:left
}
#box8 .next{
	float:right
}
.sample8 .buttons{
	text-align:center;
	clear:both;
}
.sample8 .mask1{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

/* ********************************** */


.info{
	width:210px;
	height:100px;
	background:#000;
	position:absolute;
}

.mask1{
	position:relative;
	width:210px;
	height:100px;
	overflow:hidden;
}

#bigbox8{
	position:absolute;
}
#bigbox8 div{
	width:530px;
	float:left;
}
#bigbox8 .buttons{
	text-align:left
}
#bigbox8 .next{
	float:right
}
.sample8 .buttons{
	text-align:center;
	clear:both;
}
.sample8 .bigmask1{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

/* ********************************** */


.biginfo{
	width:530px;
	height:120px;
	background:#000;
	position:absolute;
}

.bigmask1{
	position:relative;
	width:530px;
	height:130px;
	overflow:hidden;
}