body {
margin: 0;
padding: 0;
background-color: #ffffff;
}
a span { display: none;}
a:hover span { 
display: inline;
position: absolute;
top: 10px; 
left: 696px;
width: 298px;
height: 500px;
background: #f8f8f5;
text-align: center;
margin: 0;
padding-left: 4px;
padding-right: 4px;	
}

a:hover {background: none; /* correction d'un bug IE */}


a:hover
{
    text-decoration: none;
    color: #666699;;
}
a
{
    text-decoration: none;
    color: #ffffff;
}

a:tranversal {color: #ffffff;}
a:hover.transversal {color: #ffff00;} 
a.menuprinc {color: #669988;}
a:hover.menuprinc {color: #ea4f00;}
a.courriel {color: #666699;}
a:hover.courriel{color: #ea4f00;}
a.suite {color: #ffffff;}
a:hover.suite {color: #fff000;}
a:hover.date {color: #3366f0;}

.reaction{
	width: 478px;
	padding-left: 3px;
	padding-right: 2px;
	border: dashed 1px #29d055;
	margin-bottom: 5px;
	color: #444444; 
	font-weight: normal; 
	font-family: courier, arial; 
	font-size: 11px;	
}

p {margin-bottom:3px; margin-top: 0}
h3 {margin-top: 4px; 
margin-bottom: 6px;
color: #666699; font-weight: bold; font-family: arial; font-size: 12px;}
h4 {margin-bottom: 0; margin-top: 3px; color: #ea4f00; font-weight: bold; font-family: arial; font-size: 14px;}
div {margin: 0;}
	
a.image { /* définition de la classe "image" de la balise a */
	display: block; /* la balise a doit être en bloc */
	width: 241px; /* largeur de l'image réactive */
	height: 22px; /* hauteur de l'image réactive */
	background-image: url(bandeau2.png); /* source de l'image de départ */
	background-repeat: no-repeat;	
}

a.image:hover { /* définition de la classe "image" de la balise a au survol */
background-image: url(bandeau22.png); /* source de l'image d'arrivée */
}

/* styles du document */
/* --*-*-*-*-*-*-*-*-*-*--  */

#main_logo {width:1004px; 
	margin: 0;
	padding: 0;
	background-color: #ea4f00; 	
	height: 50px;
}
	
#partie_gauche {
	width:194px;
	float: left;
	background: #ffffff; 
	margin-top: 25px;
	margin-left: 0px;
	margin-right: 0px;
	padding: 0;
	/*border: 1px #ea4f00 dashed;*/
	padding: 0;	
}

.programme {
	width: 480px;
	margin: 0;
	padding: 0;
	}



#partie_centrale {width:485px;
	float: left;
	/*background-color: #00ff00;*/
	background-color: #f8f8f5;
	margin: 0;
	padding-left: 10px;
	padding-right: 5px;
	z-index:0;
	/*align-text: center;*/	
}
#partie_droite {
	width:298px;
	float: left;
	background-color: #f8f8f5;
	margin: 0;
	padding-top: 10px;
	padding-left: 5px;
	padding-right: 5px;	
	text-align: center;
}
#main {width: 1004px;
	position: absolute;
	background: #ffffff; 
	top: 72px;
	left: 0;
	margin: 0;
	padding: 0;
}
#main1 {width: 808px;
	background: #f8f8f5; 
	float: left;
	margin: 0;
	padding: 0;
	border-left: dashed 1px #ea2900;
	border-right: dashed 1px #ea2900;
}


#main_transversal {
clear: both;
margin-left: 195px;
width:808px; 
height: 30px; 
background-color: #ea4f00; 
padding: 0; 
background-image: url(http://www.rueleon.net/maquette/aaa.png); 
background-repeat: no;
} 

/*-*-*-*-*-*-*-*-*-*-*-*-*---*-*-*-*-*-*/
/* styles de la mise en forme du texte */
/*-*-*-*-*-*-*-*-*-*-*-*-*---*-*-*-*-*-*/

.parag {
	font-family: arial;
	font-size: 10px;
	color: #555555;

	}
	
.legende {
	font-family: arial;
	font-size: 9px;
	color: #333333;
	margin-top: -2px;
	}
	
.date {
	font-family: arial;
	font-size: 12px;
	color: #ff4f00;
	font-weight: bold;

	}	
	
.hypertexte {
	margin-top: 2px;
	margin-bottom: 4px;

	}	
.hypertexte2 {

	font-family: arial;
	font-size: 11px;
	color: #00a055;
	font-weight: bold;


	}	
.texte {
	font-family: arial;
	font-size: 11px;
	color: #555555;
	font-weight: normal;
	margin-bottom: 8px;
	letter-spacing: 1px;	

	}
.intro {
	font-family: arial;
	font-size: 12px;
	color: #669988;
	font-weight: normal;
	margin-top: 4px;
	font-weight: bold;
	margin-bottom: 6px;
	}		

.select {
	font-family: arial;
	font-size: 12px;
	color: #3366f0;
	font-weight: bold;
	}

.video {
	font-family: courier, arial;
	font-size: 12px;
	color: #aa99ff;
	font-weight: bold;	
	vertical-align: top;
}	
.video2 {
	font-family: courier, arial;
	font-size: 10px;
	color: #bbccff;
	font-weight: bold;	
	
}	
.type{
	font-family: arial;
	font-size: 13px;
	color: #555566;
	font-weight: bold;
	background: #ffffff;
	/*height: 20px;*/
	}	
.parag2 {
	font-family: arial;
	font-size: 10px;
	color: #666699;
	}
.pages {
	text-align: right;
	margin-top: 6px;
	margin-bottom: 8px;
	}
.sppages {
	display: inline;
	font-family: arial;
	font-size: 12px;
	color: #ffffff;
	background: #996600;
	}		
.sppages2 {
	display: inline;
	font-family: arial;
	font-size: 12px;
	color: #ffffff;
	background: #fa4f00;
	}	
		
.sppages3 {
	display: inline;
	font-family: arial;
	font-size: 12px;
	color: #ffffff;
	background: #006ff0;
	}	
.parag_gd {
	font-family: arial;
	font-size: 11px;
	color: #444466;
	}

.titre_principal{
	font-family: arial;
	font-size: 15px;
	color: #33a055;
	font-weight: bold;
	background-image: url(maquette/petit_rond.png);
	background-repeat: no-repeat;
	background-position: top left;	
	padding-left: 30px;
	margin-bottom:12px;
	margin-top:4px	
	}

.titre_rub{
	font-family: arial;
	font-size: 16px;
	color: #449944;
	font-weight: bold;
	background-image: url(maquette/petit_rond.png);
	background-repeat: no-repeat;
	background-position: top left;	
	padding-left: 30px;
	margin-bottom:12px;
	margin-top:6px	
	}
.titre_programme{
	font-family: arial;
	font-size: 14px;
	color: #448866;
	font-weight: bold;
	background-image: url(maquette/petit_rond.png);
	background-repeat: no-repeat;
	background-position: top left;	
	padding-left: 30px;
	margin-bottom:12px;
	margin-top:0px	
	}	
.titre_gd{
	font-family: arial;
	font-size: 18px;
	color: #5544cf;
	font-weight: bold;
	letter-spacing: 1px;	
	margin-top: 0px;
	margin-bottom: 0px;
	}

.sous_titre_gd{
	font-family: arial;
	font-size: 14px;
	color: #5544cf;
	font-weight: bold;
	}

.sous_titre{
	font-family: arial;
	font-size: 14px;
	color: #cf4455;
	font-weight: bold;
	}

.titre_rub_bleu{
	font-family: arial;
	font-size: 13px;
	color: #3366f0;
	font-weight: bold;
	background-image: url(maquette/carre18_22.png);
	background-repeat: no-repeat;
	background-position: top left;	
	padding-left: 30px;
	margin-bottom:12px;
	margin-top:0px	
	}
	
.tit_droit{
	font-family: arial;
	font-size: 13px;
	color: #ffffff;
	font-weight: bold;
	background-color: #3366f0;
}
.lien_bas {
	font-family: arial, verdana;
	font-size: 10px;
	color: #ffffff;
	font-stretch: expanded;
	font-weight: bold;
	text-align: center;
	margin-top:12px;
	margin-bottom:5px;
	letter-spacing: 3px;
	}
	
.titre {
	font-family: arial;
	font-size: 14px;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
	margin-top: 3px;
	margin-bottom: 3px
	}


.liste_puce{
	list-style-type: disc;
	margin-left: 20px;
	font-family: arial;
	font-size: 12px;
	color: #555555;	
	margin-top:0;
	margin-bottom: 0;
	padding:0;
}
.ressource a {
	font-family: arial;
	font-size: 14px;
	color: #55aaaa;
	font-weight: bold;
	text-align: left;
	margin-top: 5px;
	margin-bottom: 3px
}
. ressource a:hover {color: #aaaa55;}


.main a:hover {
    	background-image: url(bandeau_blanc.png);
	background-repeat: no-repeat; 
	background-position: top left;	
	width: 241px;	
}




.spacer {
	clear: both;
	}
hr {
	clear: both;
	visibility: hidden;
	}
	
/* formulaire */
.form1 {
    border: 1px solid #334fcc; 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666699;
}

/* menu déroulant */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
position: absolute;
top: 50px;
left: 194px;
z-index:200;
width: 810px;
float: left;
}

#image_sous_logo {
position: absolute;
top: 50px
left: 0px;
z-index:100;
float: left;
}


#menu dl {
float: left;
width: 270px;
margin: 0;
z-index: 100;
}

.imp {
margin-top: 33px;
text-align: center;
}


#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ea2900;
z-index: 100;
background-image: url(maquette/bandeau.png); /* source de l'image de départ */
background-repeat: no-repeat;
	font-family: arial;
	letter-spacing: 2px;
	font-size: 11px;
	color: #ffffff;
	height: 22px;
	
}
#menu dd {
	font-family: arial;
	font-size: 11px;
	height: 18px;
	z-index: 100;
}
#menu li {
text-align: center;
background: #ea2900;
background-image: url(maquette/lig1.png); /* source de l'image de départ */
background-repeat: repeat-y;
width: 270px;
z-index: 100;
}
#menu li a{
color: #ffffff;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover {
background: #fff000;
color: #ea4f00;
font-weight: bold;
background-image: url(maquette/lig2.png); /* source de l'image de départ */
background-repeat: repeat-y;
}


/* menu vertical de gauche */
ul {list-style-type: none;} 
.vertical_li {margin-bottom: 5px;
	height:auto;
	}


.vertical_menu a {
     margin: 0 5px;
     width: 167px; 
     height: auto;
     display: block;
     text-align: left;
     border: 1px solid #e0e0e0;
     text-decoration: none;
     color: #666680;
     background: #fff;
     font-family: arial;
     font-size: 10px;
     padding-left: 15px;
	background-image: url(maquette/menu.png); /* source de l'image de départ */
	background-repeat: repeat-y;
	 }

	 
.vertical_menu a:hover {
     background: #ffffff;
     border: 1px solid #ffff00; 
	background-image: url(maquette/menu2.png); /* source de l'image de départ */
	background-repeat: repeat-y;
     }



.vertical_menu a:active {
     background: #ffffff;
     border: 1px solid #ffff00; 
     	background-image: url(maquette/menu2.png); /* source de l'image de départ */
     	background-repeat: repeat-y;
 
     }



.vertical_menu_selected {
     margin: 0 5px;
     width: 167px; 
     height: auto;
     display: block;
     text-align: left;
     border: 1px solid #ea2900;
     text-decoration: none;
     color: #666680;
     background: #ffff00;
     font-family: arial;
     font-size: 10px;
     padding-left: 15px;
	background-image: url(maquette/menu3.png); /* source de l'image de départ */
	background-repeat: repeat-y;
	margin-bottom: 5px;
	 }
	 
		 
.table_video{
margin-top: 3px;
margin-bottom: 2px
}