/**
* Cette CSS sert à la mise en page des éléments de navigations, ainsi que de 
* la Tétière, du pied de page et de la publicité.
*
* Table des matières :
*     * Le haut de page
*           - Les valeurs par défaut
*           - Les liens
*           - La barre de liens
*           - Logo RATP
*           - Logos réseaux
*           - Visuel
*
*     * Le pied de page
*           - Les valeurs par défaut
*           - Gouttière
*           - Couleur d'arrière-plan et hauteur du pied de page
*           - Mise en forme des liens
*
*     * La publicité
*           - Emplacement du cartouche de la Mega Banner pleine page
*           - Spéficifique à la page d'accueil
*           - Positionnement de la publicité Mega Banner pleine page
*           - Postionnement du skycraper
*           - Emplacement du cartouche des liens sponsorisés
*           - Emplacement du cartouche de la Mega Banner pop-up
*           - Positionnement de la publicité Mega Banner pop-up
*     
*     * La navigation contextuelle
*           - Définitions communes aux menus contextuels
*           - Spécifique au menu "Communiquer"
*           - Spécifique au menu "Se déplacer"
*           - Spécifique au menu "Sortir"
*
*     * Les liens institutionnels
*           - Gouttières
*           - Définition de la typo et des couleurs
*           - Définition des liens
*
*     * Défintions par défaut de la navigation transversale
*           - Les espacements
*           - Le conteneur du menu
*           - Les listes
*           - Les titres et les ancres
*
*     * Positionnement des déroulants
*           - Transformation des <li> en conteneur
*           - Comportement des sous-niveaux
*           - Contrôle du positionnement des troisèmes niveaux et au-delà
*
*     * Apparition et disparition des déroulants
*           - Etat par défaut des déroulants
*           - Apparition des déroulants
*
*     * Corrections spécifiques pour Internet Explorer
*           - Utilisation de la class "sfhover"
*           - Problème des espaces vides
*           - Problème d'interprétation de "display: block;" sur les ancres
*
*     * Habillage graphique commun à tous les menus déroulants
*           - Les onglets majeurs
*           - Les entrées déroulantes
*           - Spécifique pour le menu "S'informer"
*           - Spécifique pour le menu "Se déplacer"
*           - Spécifique pour le menu "Sortir"
*           - Spécifique pour le menu "Communiquer"
*           - Spéficifique à la page d'accueil
*           - Rappel des couleurs sur la page d'accueil uniquement
*           - Bande de couleur pour les pages S'informer et S'orienter
*
*     * Chemin de navigation
*
*     * Les pop-up
*           - Eléments communs aux pop-up
*           - Grand pop-up
*           - Petit pop-up
*
* @file      navigation.css
* @version   1.0.1
* @author    Sonny Beaumont <sbeaumont@nealite.fr>
* @copyright 2006, nealite.fr
*/



/*******************************************************************************
/************************************
__HEADER
*************************************/
.header 			{ width:850 px; }
.header .logo		{float:left;}
.header .baseline		{float:left;}
.header .nav_main		{float:left; azimuth:left; padding:80px 0 0 0; 
	margin: 2px 0;
	padding-top: 5px;
	padding-bottom: 5px;
	width: 850 px; /*longueur par défaut */
	text-align: left;}
.header .nav_main ul li	{display:inline; }
.header .nav_main ul li a	{ padding:0 5px 0 13px; background:url(../css/img/puce_verte.gif) 0 2px no-repeat; color:#1a171b;}
.header .nav_lang		{float:right; padding:30px 20px 0 0;}
.header .nav_lang ul li	{display:inline;}

* Le haut de page
*/
body 
{
	margin: 0;
	padding: 0;
}

/**
* Les valeurs par défaut :
* Police de caractère et espacements pour l'ensemble de l'en-tête
*/
#haut_page *
{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0;
	padding: 0;
}

#haut_page
{
	border-bottom: 1px solid #009;
	margin: 0 0 2px 0;
	padding: 0;
	width: 764px; /* longueur par défaut */
}


/**
* Les liens
*/
#haut_page a
{
	color: #009;
	text-decoration: none;
}

#haut_page a:hover
{
	color: #6c9;
}


/**
* La barre des liens "International Passengers" et "Contactez-nous"
*/
#haut_page ul
{
	background-color: #ede4df;
	border-bottom: 1px solid #009;
	list-style: none;
	height: 1.3em;
	padding-top: 1px;
}

#haut_page li
{
	border-right: 1px solid #009;
	float: right;
}

#haut_page li a
{
	margin: 0 8px;
}

#haut_page .last
{
	border: 0;
}


/**
* Logo RATP
*/
#haut_page h6 a
{
	background: url(/css/img/haut_page_logo_ratp.gif) no-repeat;
	display: block;
	float: left;
	height: 60px;
	margin: 14px 0 13px 15px;
	overflow: hidden;
	text-indent: -999em;
	width: 151px;
}


/**
* Logos réseaux
*/
#haut_page .autopromo
{
	background: url(/css/img/haut_page_logos_reseaux.gif) no-repeat right center;
	height: 87px;
	margin: 0 15px 0 166px;
	padding-right: 160px;
	text-align: center;
}


/**
* Visuel des pages intérieures
*/
#haut_page .haut_page_visual
{   /* img/haut_page_visuel.jpg de notre site */
    /* img/haut_page_visuel.gif gif animé pour aimer la ville */
	background: url(/css/img/haut_page_visuel.gif) no-repeat right bottom;
	height: 101px;
}

/**
* Visuel de l'accueil
*/
#haut_page .haut_page_visual_home
{
	background: url(/css/img/haut_page_visuel_home.jpg) no-repeat right bottom;
	height: 101px;
}


/**
* Spéficifique à la page d'accueil
* Pour distinguer la page d'accueil du site des autres pages, dans la balise 
* <body> de la page d'accueil a été rajouté : id="accueil".
*/
#accueil #haut_page
{
	width: 960px;
}

/**
* Spéficifique aux pages PIVI PROXI
* Pour distinguer les pages PIVI PROXI du site des autres pages, dans la balise 
* <body> de la page  a été rajouté : id="pivi_proxi".
*/
#pivi_proxi #haut_page
{
	width: 960px;
}



/*******************************************************************************
* Le pied de page (#pied_page)
*/

/**
* Les valeurs par défaut :
* Police de caractère, couleur et espacements pour l'ensemble du pied de page
*/
#pied_page *
{
	color: #009;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0;
	padding: 0;
}


/**
* Couleur d'arrière-plan et hauteur du pied de page
*/
#pied_page
{
	clear: both;
	padding: 0 0;
	width: 100%;
}


/**
* Mise en forme des liens
*/
#pied_page ul
{
	background-color: #ede4df;
	height: 1.3em;
	list-style: none;
	padding: 2px 0;
	text-align: center;
	width: 758px;
}

#pied_page li
{
	border-right: 1px solid #009;
	display: inline;
}

#pied_page a
{
	color: #009;
	margin: 0 4px;
	text-decoration: none;
}

#pied_page a:hover
{
	color: #6c9;	
}

#pied_page .last
{
	border: 0;
}

/**
* Spéficifique à la page d'accueil
* Pour distinguer la page d'accueil du site des autres pages, dans la balise 
* <body> de la page d'accueil a été rajouté : id="accueil".
*/
#accueil #pied_page ul
{
	width: 960px;
}


/*********************************************************************************
* ********************************LA PUBLICITÉ 18/09/2007*************************
*********************************************************************************/
/**
* Emplacement du cartouche de la Mega Banner pleine page (#mega_banner_box)
*/

#mega_banner_box
{
	background: url(/css/img/pub_left.gif) no-repeat left top;
	font-size: 1px; /* Spécifique pour IE : Permet de gérer correctement la hauteur */
	margin: 0 0 14px 0;
	padding: 0;
	width: 764px; /* Largeur par défaut */
}

#mega_banner_content
{
	background: url(/css/img/pub_right.gif) no-repeat right top;
 	margin-left: 20px;
	height: 90px;
	width: 744px;
}


/**
* Spéficifique à la page d'accueil
* Pour distinguer la page d'accueil du site des autres pages, dans la balise 
* <body> de la page d'accueil a été rajouté : id="accueil".
*/
#accueil #mega_banner_box
{
	width: 960px;
}


/**
* Positionnement de la publicité Mega Banner pleine page
*/
#megabanner
{
	height: 90px;
	left: 20px;
	position: absolute;
	text-align: center;
	top: 10px;
	width: 764px;
}

/**
* Positionnement de la publicité Mega Banner pleine page
*/
#megabanner_touristes
{
	height: 90px;
	left: 0px;
	position: absolute;
	text-align: center;
	top: 10px;
	width: 764px;
}
/**
* Postionnement du skycraper (#skycraper)
*/
#skycraper_box
{
	background: url(/css/img/pub_skycraper.gif) no-repeat center top;
	left: 780px;
	padding-top: 20px;
	position: absolute;
	top: 114px;
}
*html #skycraper_box { z-index: 999; } /* Spécifique pour IE/Win */

#skycraper_content
{
	background: url(/css/img/pub_skycraper.gif) no-repeat center bottom;
	padding-bottom: 20px;
	text-align: center;
	width: 160px;
}


/**
* Emplacement du cartouche des liens sponsorisés (#sponsorises_box)
*/
#sponsorises_box
{
	background: url(/css/img/titre.gif) no-repeat top;

	/*border: 1px solid #666;
	background: url(img/pub_sponsorises.gif) no-repeat top;
	font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif;*/
	position:relative;
	margin-top: 20px;
	margin-left:1px;
	padding-top: 14px;
	width: 132px;
}

#sponsorises_content
{

background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
border:1px solid #666;
border-top:none;
width:128px;
text-align:center;
	/*border-top: 1px solid #666;*/
padding: 1px;
}

/**
* Emplacement du cartouche de la pub 300 par 200
*/
#pub_saisie_300_box
{
	background: url(/css/img/pub_300.gif) no-repeat left;
	width:417px;
	margin-top:50px;
	margin-bottom:50px;
}

#pub_saisie_300_content
{
	background: url(/css/img/pub_300.gif) no-repeat right; 
    text-align:center;
}


/**
* Emplacement du cartouche de la Mega Banner pop-up (#popup_mega_banner_box)
*/
#popup_mega_banner_box
{
	background: url(/css/img/pub_left.gif) no-repeat left;
	font-size: 1px; /* Spécifique pour IE : Permet de gérer correctement la hauteur */
	margin: 0 16px 0 16px;
	padding: 0;
	width: 764px;
}

#popup_mega_banner_box .content
{
	background: url(/css/img/pub_right.gif) no-repeat right top;
	height: 90px;
}


/**
* Positionnement de la publicité Mega Banner pop-up
*/
#popup_megabanner
{
	height: 90px;
	left: 34px;
	position: absolute;
	text-align: center;
	top: 10px;
}




/*******************************************************************************
* La navigation contextuelle
*/

/**
* Définitions communes aux menus contextuels
*/
#nav_context_communiquer *,
#nav_context_deplacer *,
#nav_context_informer *,
#nav_context_sortir *,
#nav_context_international *,
#nav_context_bas *
{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin: 0;
	padding: 0;
}

#nav_context_communiquer,
#nav_context_deplacer,
#nav_context_informer,
#nav_context_sortir,
#nav_context_international,
#nav_context_bas
{
	/* margin-top: -22px; Valeur SANS le chemin de navigation */
	margin-top: -74px; /* Valeur AVEC le chemin de navigation */
	padding-top: 2px;
	position: relative;
	width: 132px;
	height: 415px;

}

/* Valeurs spécifiques pour IE */
*html #nav_context_communiquer,
*html #nav_context_deplacer,
*html #nav_context_informer,
*html #nav_context_sortir,
*html #nav_context_bas
{
	/* margin-top: -24px; Valeur SANS le chemin de navigation */
	margin-top: -57px; /* Valeur AVEC le chemin de navigation */
}

#nav_context_communiquer h4,
#nav_context_deplacer h4,
#nav_context_informer h4,
#nav_context_sortir h4,
#nav_context_international h4,
#nav_context_bas h4
{
	background-repeat: no-repeat;
	height: 90px;
	margin-bottom: 5px;
	overflow: hidden;
	text-indent: -999em;
	width: 132px;
}

#nav_context_communiquer ul,
#nav_context_deplacer ul,
#nav_context_informer ul,
#nav_context_sortir ul,
#nav_context_international ul,
#nav_context_bas ul
{
	list-style: none;
	margin-left: 11px;
}

#nav_context_communiquer li,
#nav_context_deplacer li,
#nav_context_informer li,
#nav_context_sortir li,
#nav_context_international li,
#nav_context_bas li
{
	float: left;
	margin: 5px 0;
	width: 100%;
}

#nav_context_communiquer li a,
#nav_context_deplacer li a,
#nav_context_informer li a,
#nav_context_sortir li a,
#nav_context_international a,
#nav_context_bas a
{
	background-position: left 1px;
	background-repeat: no-repeat;
	color: #009;
	float: left;
	margin: 0 0;
	padding: 0 0 0 14px;
	text-decoration: none;
}

#nav_context_communiquer li a:hover,
#nav_context_deplacer li a:hover,
#nav_context_informer li a:hover,
#nav_context_sortir li a:hover,
#nav_context_international li a:hover,
#nav_context_bas li a:hover
{
	color: #6c9;
}

#nav_context_communiquer h5,
#nav_context_deplacer h5,
#nav_context_informer h5,
#nav_context_sortir h5,
#nav_context_international h5,
#nav_context_bas h5
{
	background-image: url(/css/img/nav_context_deplacer_plan.gif);
	background-repeat: no-repeat;
	background-position: 0 17px;
	clear: both;
	padding-top: 40px;
}

#nav_context_communiquer h5 a,
#nav_context_deplacer h5 a,
#nav_context_informer h5 a,
#nav_context_sortir h5 a,
#nav_context_international h5 a,
#nav_context_bas h5 a
{
	background-image: url(/css/img/nav_context_plan.gif);
	background-repeat: no-repeat;
	display: block;
	height: 29px;
	text-indent: -999em;
	width: 127px;
}


/**
* Spécifique au menu "Communiquer"
*/
#nav_context_communiquer h4         { background-image: url(/css/img/nav_context_comm_titre.jpg); }
#nav_context_communiquer li a       { background-image: url(/css/img/nav_context_comm_off.gif); }
#nav_context_communiquer li a:hover { background-image: url(/css/img/nav_context_comm_on.gif); }
#nav_context_communiquer h5         { background-image: url(/css/img/nav_context_comm_plan.gif); }


/**
* Spécifique au menu "Se déplacer"
*/
#nav_context_deplacer h4         { background-image: url(/css/img/nav_context_deplacer_titre.jpg); }
#nav_context_deplacer li a       { background-image: url(/css/img/nav_context_deplacer_off.gif); }
#nav_context_deplacer li a:hover { background-image: url(/css/img/nav_context_deplacer_on.gif); }
#nav_context_deplacer h5         { background-image: url(/css/img/nav_context_deplacer_plan.gif); }


/**
* Spécifique au menu "S'informer"
*/
#nav_context_informer h4         { background-image: url(/css/img/nav_context_informer_titre.jpg); }
#nav_context_informer li a       { background-image: url(/css/img/nav_context_informer_off.gif); }
#nav_context_informer li a:hover { background-image: url(/css/img/nav_context_informer_on.gif); }
#nav_context_informer h5         { background-image: url(/css/img/nav_context_informer_plan.gif); }


/**
* Spécifique au menu "Sortir"
*/
#nav_context_sortir h4         { background-image: url(/css/img/nav_context_sortir_titre.jpg); }
#nav_context_sortir li a       { background-image: url(/css/img/nav_context_sortir_off.gif); }
#nav_context_sortir li a:hover { background-image: url(/css/img/nav_context_sortir_on.gif); }
#nav_context_sortir h5         { background-image: url(/css/img/nav_context_sortir_plan.gif); }


/**
* Spécifique au menu "International"
*/
#nav_context_international            { margin-top: 0; }
#nav_context_international h4         { background-image: url(/css/img/nav_context_international_titre.jpg); height: 74px; }
#nav_context_international li a       { background-image: url(/css/img/nav_context_international_off.gif); }
#nav_context_international li a:hover { background-image: url(/css/img/nav_context_international_on.gif); }
#nav_context_international h5         { background-image: url(/css/img/nav_context_international_plan.gif); }

/**
* Spécifique au menu "Bas"
*/
#nav_context_bas            { margin-top: -74px; }
#nav_context_bas h4         { background-image: url(/css/img/nav_context_bas_titre.jpg); height: 74px; }
#nav_context_bas li a       { background-image: url(/css/img/nav_context_international_off.gif); }
#nav_context_bas li a:hover { background-image: url(/css/img/nav_context_international_on.gif); }
#nav_context_bas h5         { background-image: url(/css/img/nav_context_international_plan.gif); }




/*******************************************************************************
* Les liens institutionnels (#liens_institutionnels)
*/

/**
* Généralités
*/
#liens_institutionnels *
{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0;
	padding: 0;
}

#liens_institutionnels
{
	background-color: #ede4df;
	border-bottom: 4px solid #009;
	margin: 2px 0;
	padding-top: 1px;
	width: 764px; /* longueur par défaut */
	text-align: right;
}

#liens_institutionnels ul
{
	height: 1.3em;
	list-style: none;
}

#liens_institutionnels li
{
	border-right: 1px solid #009;
	display: inline;
	float: right;
}

#liens_institutionnels li a
{
	color: #009;
	margin: 0 8px;
	text-decoration: none;
}

#liens_institutionnels a:hover
{
	color: #6c9;
}

#liens_institutionnels .last
{
	border: 0;
}

/**
* Spéficifique à la page d'accueil
* Pour distinguer la page d'accueil du site des autres pages, dans la balise 
* <body> de la page d'accueil a été rajouté : id="accueil".
*/
#accueil #liens_institutionnels
{
	width: 960px;
}


/*******************************************************************************
* Défintions par défaut de la navigation transversale
*/

/**
* Les espacements :
* Mise à 0 de tous les espacements par défaut des balises.
*/
#nav_transversale *
{
	margin: 0;
	padding: 0;
}

/**
* Le conteneur du menu :
* Le conteneur est aligné à gauche afin de "retenir" les éléments qu'il 
* encapsule et qui sont eux-même alignés.
*/
#nav_transversale
{
	float: left;
	width: 100%;
	position: relative;
	z-index: 500;
}

/**
* Les listes :
* Chaque liste est alignée à gauche et sans afficher les puces. La longueur par
* défaut des listes est également définie.
*/
#nav_transversale ul
{
	float: left;
	list-style: none;
	width: 12em;
}

/**
* Les titres et les ancres :
* Tous les titres et les ancres sont considérés comment étant des bloques.
* Cela permettra entre autre qu'ils aient par défaut une longeur occupant tout 
* l'espace disponible et se placeront les uns en dessous des autres.
*/
#nav_transversale h4,
#nav_transversale a
{
	display: block;
}




/*******************************************************************************
* Positionnement des déroulants du menu
*

/**
* Transformation des <li> en conteneur :
* Transforme les <li> en conteneur pour les listes <ul> imbriquées. Cela 
* permettra aux listes imbriquées de considérer l'actuel <li> comme point 
* d'origine pour leur positionnement.
*/
#nav_transversale li
{
	position: relative;
}

/**
* Comportement des sous-niveaux :
* Ces défintions vont permettre de faire apparaître tous les sous-niveaux au 
* dessus de la barre de titres lorsqu'ils se dérouleront. Leur longueur est 
* plus grande que la barre de titres.
*/
#nav_transversale ul ul
{
	position: absolute;
	width: 19em;
	z-index: 999;
}

/**
* Contrôle du positionnement des troisèmes niveaux et au-delà :
* Ces définitions servent à s'assurer que ces niveaux vont bien s'ouvrir à la 
* droite de l'entrée correspondante et débuteront au même niveau cette entrée.
*/
#nav_transversale ul ul ul
{
	left: 100%;
	top: 0;
}



/*******************************************************************************
* Apparition et disparition des déroulants
*/

/**
* Etat par défaut des déroulants :
* Tous les sous-niveaux ne doivent apparaître que si l'entrée dont ils dépendent
* est survolée par la souris. Pour s'assurer de cela, on définit par défaut 
* qu'ils soient invisible.
*/
div#nav_transversale ul ul,
div#nav_transversale ul li:hover ul ul,
div#nav_transversale ul ul li:hover ul ul
{
	display: none;
}

/**
* Apparition des déroulants :
* Ce n'est qu'au moment du survole du <li> par la souris que le sous-niveau 
* apparaît.
*/
div#nav_transversale ul li:hover ul,
div#nav_transversale ul ul li:hover ul,
div#nav_transversale ul ul ul li:hover ul
{
	display: block;
}



/*******************************************************************************
* Corrections spécifiques pour Internet Explorer
*/

/**
* Utilisation de la class "sfhover" :
* Cette class est utilisée par le JavaScript "dropdown_menu.js" pour simuler la 
* commande "li:hover" supportée par les autres navigateurs.
*/
div#nav_transversale ul li.sfhover ul ul,
div#nav_transversale ul ul li.sfhover ul ul
{
	display: none;
}

div#nav_transversale ul li.sfhover ul,
div#nav_transversale ul ul li.sfhover ul,
div#nav_transversale ul ul ul li.sfhover ul
{
	display: block;
}

/**
* Problème des espaces vides :
* Supprime les espaces vides entre deux entrées.
*/
*html #nav_transversale ul li
{
	float: left;
	width: 100%;
}

/**
* Problème d'interprétation de "display: block;" sur les ancres :
* Cette astuce permet de s'assurer qu'IE interprétera correctement la commande
* "display: block;"
*/
*html #nav_transversale ul li a
{
	height: 1%;
}
/*******************************************************************************
* Habillage graphique commun à tous les menus déroulants
*/
#nav_transversale *
{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-decoration: none;
}

*#nav_transversale
{
	background-color: #d9f2e5;
	margin-left: 158px;
	-margin-left: 79px;
	width: 606px;
}

html>body {margin-top : 10px;} 

/**
* Les onglets majeurs
*/
#nav_transversale li h4 a
{
	font-size: 10px;
}

#nav_transversale li h4 a
{
	background: none;
	border: 0;
	margin-left: 28px;
	padding: 3px 0 5px 0;
}


/**
* Les entrées déroulantes
*/
#nav_transversale li
{
	background-position: left;
	background-repeat: no-repeat;
}

#nav_transversale li a,
#nav_transversale li:hover li a,
#nav_transversale li:hover li:hover li a,
#nav_transversale li:hover li:hover li:hover li a,
#nav_transversale li.sfhover li a,
#nav_transversale li.sfhover li.sfhover li a,
#nav_transversale li.sfhover li.sfhover li.sfhover li a
{
	border-style: solid;
	border-width: 1px 1px 0 0;
	color: #009;
	margin-left: 4px;
	padding: 2px 0 2px 24px;
}

#nav_transversale li:hover a,
#nav_transversale li:hover li:hover a,
#nav_transversale li:hover li:hover li:hover a,
#nav_transversale li:hover li:hover li:hover li:hover a,
#nav_transversale li.sfhover a,
#nav_transversale li.sfhover li.sfhover a,
#nav_transversale li.sfhover li.sfhover li.sfhover a,
#nav_transversale li.sfhover li.sfhover li.sfhover li.sfhover a
{
	color: #fff;
}

#nav_transversale li.last,
#nav_transversale li.last_sfhover
{
	background-position: left bottom;
	padding-bottom: 6px;
}

#nav_transversale li a.more
{
	background-position: right;
	background-repeat: no-repeat;
}


/**
* Spécifique pour le menu "S'informer"
*/

/* Apparence de l'onglet majeur */
#nav_trans_informer li h4
{
	background: #f8f1f8 url(/css/img/transversale/informer_fleche_off.gif) no-repeat left;
}

#nav_trans_informer li:hover h4,
#nav_trans_informer li.sfhover h4
{
	background: #b680bb url(/css/img/transversale/informer_fleche_on.gif) no-repeat left;
}

/* Apparance des entrées déroulantes */
#nav_trans_informer li
{
	background-color: #f8f1f8;
	background-image: url(/css/img/transversale/informer_puce_off.gif);
}

#nav_trans_informer li:hover,
#nav_trans_informer li.sfhover,
#nav_trans_informer li.last_sfhover
{
	background-color: #b680bb;
	background-image: url(/css/img/transversale/informer_puce_on.gif);
}

#nav_trans_informer li a,
#nav_trans_informer li:hover li a,
#nav_trans_informer li:hover li:hover li a,
#nav_trans_informer li:hover li:hover li:hover li a,
#nav_trans_informer li.sfhover li a,
#nav_trans_informer li.sfhover li.sfhover li a,
#nav_trans_informer li.sfhover li.sfhover li.sfhover li a
{
	border-color: #b680bb;
}

#nav_trans_informer li.last
{
	background-image: url(/css/img/transversale/informer_last_off.gif);
}

#nav_trans_informer li.last:hover,
#nav_trans_informer li.last_sfhover
{
	background-image: url(/css/img/transversale/informer_last_on.gif);
}

#nav_trans_informer li a.more,
#nav_trans_informer li:hover li a.more,
#nav_trans_informer li:hover li:hover li a.more,
#nav_trans_informer li:hover li:hover li:hover li a.more,
#nav_trans_informer li.sfhover li a.more,
#nav_trans_informer li.sfhover li.sfhover li a.more,
#nav_trans_informer li.sfhover li.sfhover li.sfhover li a.more
{
	background-image: url(/css/img/transversale/informer_more_off.gif);
}

#nav_trans_informer li:hover li:hover a.more,
#nav_trans_informer li:hover li:hover li:hover a.more,
#nav_trans_informer li.sfhover li.sfhover a.more,
#nav_trans_informer li.sfhover li.sfhover li.sfhover a.more,
#nav_trans_informer li.sfhover li.last_sfhover a.more,
#nav_trans_informer li.sfhover li.sfhover li.last_sfhover a.more
{
	background-image: url(/css/img/transversale/informer_more_on.gif);
}


/**
* Spécifique pour le menu "Se déplacer"
*/

/* Apparence de l'onglet majeur */
#nav_trans_deplacer li h4
{
	background: #ffeed5 url(/css/img/transversale/deplacer_fleche_off.gif) no-repeat left;
}

#nav_trans_deplacer li:hover h4,
#nav_trans_deplacer li.sfhover h4
{
	background: #ff9933 url(/css/img/transversale/deplacer_fleche_on.gif) no-repeat left;
}

/* Apparance des entrées déroulantes */
#nav_trans_deplacer li
{
	background-color: #ffeed5;
	background-image: url(/css/img/transversale/deplacer_puce_off.gif);
}

#nav_trans_deplacer li:hover,
#nav_trans_deplacer li.sfhover
{
	background-color: #ff9933;
	background-image: url(/css/img/transversale/deplacer_puce_on.gif);
}

#nav_trans_deplacer li a,
#nav_trans_deplacer li:hover li a,
#nav_trans_deplacer li:hover li:hover li a,
#nav_trans_deplacer li:hover li:hover li:hover li a,
#nav_trans_deplacer li.sfhover li a,
#nav_trans_deplacer li.sfhover li.sfhover li a,
#nav_trans_deplacer li.sfhover li.sfhover li.sfhover li a
{
	border-color: #ff9933;
}

#nav_trans_deplacer li.last
{
	background-image: url(/css/img/transversale/deplacer_last_off.gif);
}

#nav_trans_deplacer li.last:hover,
#nav_trans_deplacer li.last_sfhover
{
	background-image: url(/css/img/transversale/deplacer_last_on.gif);
}

#nav_trans_deplacer li a.more,
#nav_trans_deplacer li:hover li a.more,
#nav_trans_deplacer li:hover li:hover li a.more,
#nav_trans_deplacer li:hover li:hover li:hover li a.more,
#nav_trans_deplacer li.sfhover li a.more,
#nav_trans_deplacer li.sfhover li.sfhover li a.more,
#nav_trans_deplacer li.sfhover li.sfhover li.sfhover li a.more
{
	background-image: url(/css/img/transversale/deplacer_more_off.gif);
}

#nav_trans_deplacer li:hover li:hover a.more,
#nav_trans_deplacer li:hover li:hover li:hover a.more,
#nav_trans_deplacer li.sfhover li.sfhover a.more,
#nav_trans_deplacer li.sfhover li.sfhover li.sfhover a.more
{
	background-image: url(/css/img/transversale/deplacer_more_on.gif);
}


/**
* Spécifique pour le menu "Sortir"
*/

/* Apparence de l'onglet majeur */
#nav_trans_sortir li h4
{
	background: #dce4f2 url(/css/img/transversale/sortir_fleche_off.gif) no-repeat left;
}

#nav_trans_sortir li:hover h4,
#nav_trans_sortir li.sfhover h4
{
	background: #4771bb url(/css/img/transversale/sortir_fleche_on.gif) no-repeat left;
}

/* Apparance des entrées déroulantes */
#nav_trans_sortir li
{
	background-color: #ecf1f8;
	background-image: url(/css/img/transversale/sortir_puce_off.gif);
}

#nav_trans_sortir li:hover,
#nav_trans_sortir li.sfhover
{
	background-color: #4771bb;
	background-image: url(/css/img/transversale/sortir_puce_on.gif);
}

#nav_trans_sortir li a,
#nav_trans_sortir li:hover li a,
#nav_trans_sortir li:hover li:hover li a,
#nav_trans_sortir li:hover li:hover li:hover li a,
#nav_trans_sortir li.sfhover li a,
#nav_trans_sortir li.sfhover li.sfhover li a,
#nav_trans_sortir li.sfhover li.sfhover li.sfhover li a
{
	border-color: #4771bb;
}

#nav_trans_sortir li.last
{
	background-image: url(/css/img/transversale/sortir_last_off.gif);
}

#nav_trans_sortir li.last:hover,
#nav_trans_sortir li.last_sfhover
{
	background-image: url(/css/img/transversale/sortir_last_on.gif);
}

#nav_trans_sortir li a.more,
#nav_trans_sortir li:hover li a.more,
#nav_trans_sortir li:hover li:hover li a.more,
#nav_trans_sortir li:hover li:hover li:hover li a.more,
#nav_trans_sortir li.sfhover li a.more,
#nav_trans_sortir li.sfhover li.sfhover li a.more,
#nav_trans_sortir li.sfhover li.sfhover li.sfhover li a.more
{
	background-image: url(/css/img/transversale/sortir_more_off.gif);
}

#nav_trans_sortir li:hover li:hover a.more,
#nav_trans_sortir li:hover li:hover li:hover a.more,
#nav_trans_sortir li.sfhover li.sfhover a.more,
#nav_trans_sortir li.sfhover li.sfhover li.sfhover a.more
{
	background-image: url(/css/img/transversale/sortir_more_on.gif);
}


/**
* Spécifique pour le menu "Communiquer"
*/

/* Apparence de l'onglet majeur */
#nav_trans_communiquer li h4
{
	background: #f7fbe7 url(/css/img/transversale/communiquer_fleche_off.gif) no-repeat left;
}

#nav_trans_communiquer li:hover h4,
#nav_trans_communiquer li.sfhover h4
{
	background: #ade36a url(/css/img/transversale/communiquer_fleche_on.gif) no-repeat left;
}

/* Apparance des entrées déroulantes */
#nav_trans_communiquer li
{
	background-color: #f3fbe9;
	background-image: url(/css/img/transversale/communiquer_puce_off.gif);
}

#nav_trans_communiquer li:hover,
#nav_trans_communiquer li.sfhover
{
	background-color: #ade36a;
	background-image: url(/css/img/transversale/communiquer_puce_on.gif);
}

#nav_trans_communiquer li a,
#nav_trans_communiquer li:hover li a,
#nav_trans_communiquer li:hover li:hover li a,
#nav_trans_communiquer li:hover li:hover li:hover li a,
#nav_trans_communiquer li.sfhover li a,
#nav_trans_communiquer li.sfhover li.sfhover li a,
#nav_trans_communiquer li.sfhover li.sfhover li.sfhover li a
{
	border-color: #ade36a;
}

#nav_trans_communiquer li.last
{
	background-image: url(/css/img/transversale/communiquer_last_off.gif);
}

#nav_trans_communiquer li.last:hover,
#nav_trans_communiquer li.last_sfhover
{
	background-image: url(/css/img/transversale/communiquer_last_on.gif);
}

#nav_trans_communiquer li a.more,
#nav_trans_communiquer li:hover li a.more,
#nav_trans_communiquer li:hover li:hover li a.more,
#nav_trans_communiquer li:hover li:hover li:hover li a.more,
#nav_trans_communiquer li.sfhover li a.more,
#nav_trans_communiquer li.sfhover li.sfhover li a.more,
#nav_trans_communiquer li.sfhover li.sfhover li.sfhover li a.more
{
	background-image: url(/css/img/transversale/communiquer_more_off.gif);
}

#nav_trans_communiquer li:hover li:hover a.more,
#nav_trans_communiquer li:hover li:hover li:hover a.more,
#nav_trans_communiquer li.sfhover li.sfhover a.more,
#nav_trans_communiquer li.sfhover li.sfhover li.sfhover a.more
{
	background-image: url(/css/img/transversale/communiquer_more_on.gif);
}


/**
* Spéficifique à la page d'accueil
* Pour distinguer la page d'accueil du site des autres pages, dans la balise 
* <body> de la page d'accueil a été rajouté : id="accueil".
*/
#accueil #nav_transversale
{
	margin-left: 113px;
	width: 847px;
}

*html #accueil #nav_transversale
{
	margin-left: 57px;
}

/**
* Rappel des couleurs sur la page d'accueil uniquement
*/
#accueil #couleurs
{
/*	background: url(img/couleurs_bg.gif) no-repeat;*/
	display: block;
	height: 10px;
	margin-top: -21px;
	margin-left: 1px;
	width: 40px;
}

/* Spécifique pour IE */
*html #accueil #couleurs
{
	margin-top: -22px;
}
*html #accueil #couleurs
{
	margin-top: -70px;
}
/**
* Bande de couleur pour les pages S'informer et Se déplacer
* un id="informer" et id="deplacer" doit être placé dans la balise body de ces pages
*/

#informer #couleurs,
#deplacer #couleurs
{
	background-color: #d9f2e5;
	display: block;
	height: 20px;
	margin-top: -20px;
	width: 158px;
}
/* Spécifique pour IE */
*html #informer #couleurs,
*html #deplacer #couleurs
{
	margin-top: -20px;
}


/*******************************************************************************
* Chemin de navigation (#nav_chemin)
*/
#nav_chemin
{
	color: #603;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 9px;
	line-height: 11px;
	padding: 20px 0 20px 162px;
	float: left;
}

/* Spécifique pour IE */
*html #nav_chemin
{
	padding-bottom: 0;
}

#nav_chemin a
{
	color: #009;
	text-decoration: none;
}

#nav_chemin a:hover
{
	color: #6c9;
}



/*******************************************************************************
* Les pop-up
*/

/**
* Eléments communs aux pop-up
*/

/* La typo et les espacements */
#popup_grand *,
#popup_petit *
{
	color: #999;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0;
	padding: 0;
}


/**
* Barre de liens
*/
#popup_links
{
	clear: both;
	list-style: none;
	padding-top: 5px;
}

#popup_links li
{
	float: left;
	margin: 0 4px;
	padding: 4px 0 4px 16px;
	white-space: nowrap;
}

#popup_links li.clock
{
	padding-left: 20px;
}

#popup_links a
{
	color: #009;
	float: left;
}

#popup_links a:hover
{
	color: #6c9;
}

/* PDF */
#popup_links .pdf
{
	background: url(/css/img/popup_pdf.gif) no-repeat left;
}

/* Aide */
#popup_links .help
{
	background: url(/css/img/popup_help_on.gif) no-repeat left;
}

#popup_links .help a
{
	background: url(/css/img/popup_help_off.gif) no-repeat left;
	margin: -4px 0 -4px -16px;
	padding: 4px 0 4px 16px;
}

#popup_links .help a:hover
{
	background-image: url(/css/img/popup_help_on.gif);
}

/* Horaires */
#popup_links .clock
{
	background: url(/css/img/popup_clock_on.gif) no-repeat left;
}

#popup_links .clock a
{
	background: url(/css/img/popup_clock_off.gif) no-repeat left;
	margin: -4px 0 -4px -20px;
	padding: 4px 0 4px 20px;
}

#popup_links .clock a:hover
{
	background-image: url(/css/img/popup_clock_on.gif);
}



/**
* Grand pop-up
*/

/* Arrière-plan */
#popup_grand
{
	background: url(/css/img/popup_grand_bg.gif) repeat-x 0 22px;
	height: 59px;
}

/* Logo */
#popup_grand h6
{
	padding-left: 73px;
}

#popup_grand h6 a
{
	background: url(/css/img/popup_grand_logo.gif) no-repeat;
	display: block;
	float: left;
	height: 59px;
	overflow: hidden;
	text-decoration: none;
	text-indent: -999em;
	width: 165px;
}


/**
* Petit pop-up
*/

/* Arrière-plan */
#popup_petit
{
	background: url(/css/img/popup_petit_bg.gif) repeat-x 0 15px;
	height: 43px;
}

/* Logo */
#popup_petit h6 
{
	padding-left: 43px;
}

#popup_petit h6 a
{
	background: url(/css/img/popup_petit_logo.gif) no-repeat;
	float: left;
	height: 43px;
	overflow: hidden;
	text-decoration: none;
	text-indent: -999em;
	width: 121px;
}
/***********************************************************************************************************

* Website :		RATP
* Filename :		content.css
* Description :		css content
* Version :		march 2009

==STRUCTURE=============================================================

* Page width : 		960px
* Number of columns : 	3

__header			Header definition
__nav_main		Global navigation
__main			Plum content
__content		Page information
__aside			Page note

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

.screen			{margin:0 auto; width:960px;}
.screen2			{margin:0 auto; width:760px;}



/************************************
__MAIN
*************************************/



/************************************
__CONTENT
*************************************/
.content				{padding:10px 10px 0;}

/*animation*/
.content .animation			{position:relative; min-height:299px;}
* html .content .animation		{height:299px;}
.content .animation_int		{overflow:hidden; width:939px; min-height:299px;}
* html .content .animation_int		{height:299px;}
.content .animation ul 		{margin:0; padding:0;}
.content .animation ul li 		{position:relative;margin:0; padding:0;}
.content .animation ul li .anim_legende	{position:absolute; bottom:20px; left:13px; margin:0; padding:0; float:left; height:23px; overflow:hidden; background:url(/css/img/anim_legende_left.gif) 0 0 no-repeat;}
.content .animation ul li .anim_legende p	{float:left; margin:0; padding:0 30px 0 8px; height:23px;background:url(/css/img/anim_legende_right.gif) 100% 0 no-repeat; font-size:10px;}
.content .animation ul li .anim_legende p a	{float:left;padding:4px 0 5px; background:#fff; color:#000; text-decoration:none;}
.content .nav_anim			{position:absolute; bottom:13px; right:15px; display:none; }
.content .nav_anim ul 		{margin:0; padding:0;}
.content .nav_anim ul li		{display:inline;margin:0; padding:0;}

/*news*/
.content .news 			{color:#1a171b; font-size:10px; font-weight:bold;}
*+html .content .news 		{padding:0 0 15px 0;}
* html .content .news 		{padding:0 0 15px 0;}
.content .news h2			{float:left; width:125px; margin:0 0 0 0; padding:0 5px 0 0; background:url(/css/img/pipe_gris.gif) 100% 0 no-repeat; font-size:10px;}
.content .news h2 span		{padding:0 0 1px 20px; background:url(/css/img/ico_info.gif) 0 0 no-repeat;}
.content .news p			{float:right; width:795px;}
.content .news a			{color:#1a171b;}
.content .news ul			{padding:0;}
.content .news li			{float:left;}

/*3 block  */
.content .block 			{float:left; margin:0 4px 17px 0; width:250px; background:url(/css/img/block_bg_middle.gif) 0 0 repeat-y;}
.content .block_int			{background:url(/css/img/block_top_middle.gif) 0 0 no-repeat;}
.content .block h2 			{margin:0; padding:0; background:url(/css/img/block_h2_bg_middle.gif) 0 100% no-repeat; color:#333; font-size:17px; font-weight:normal;}
.content .block h2 span		{display:block; padding:8px 10px 8px 35px; background:url(/css/img/rond_rouge.gif) 8px 5px no-repeat;}
.content .block .padder		{min-height:80px; padding:10px 10px 0px 10px; background:url(/css/img/block_ligne_middle.gif) 0 100% no-repeat;}
* html .content .block .padder	{height:80px;}

.content .block_left  		{float:left; margin:0 5px 17px 0; width:250px;}
.content .block_left .block 		{float:none; width:250px; margin:0; }

.content .block .date		{display:block; padding:0 0 2px 10px; background:url(/css/img/arrow_gray.gif) 0 4px no-repeat; color:#4d4d4d; font-size:10px;}
.content .block a			{color:#4d4d4d; font-weight:bold; }
.content .block .link		{padding:5px 10px 8px 0; background:url(/css/img/block_link_bg_middle.gif) 0 100% no-repeat; font-size:9px; font-weight:bold;  text-align:right;}
.content .block .link a		{padding:0 0 5px 17px; background:url(/css/img/puce_rouge.gif) 0 0 no-repeat; color:#e0001a;}

/*voyageurs*/
.content .block_left  .block.voyageurs		{margin:0 0 7px 0;}
.content .block.voyageurs .padder		{padding:10px;}
.content .block.voyageurs ul			{margin:0; padding:0 0 0 2px;}
.content .block.voyageurs ul li		{float:left; margin:0 12px 0 0; padding:0; width:48px;}
.content .block.voyageurs ul li.plan		{margin:0 0 0 0;}
.content .block.voyageurs ul li a		{display:block; padding:50px 0 0 0; width:48px; background:url(img/ico_plan.gif) 50% 0 no-repeat; color:#666; font-size:9px;text-align:center; font-weight:normal;}
.content .block.voyageurs ul li.lignes a		{background-image:url(img/ico_lignes.gif);}
.content .block.voyageurs ul li.horaires a	{background-image:url(img/ico_horaires.gif);}
.content .block.voyageurs ul li.trafic a		{background-image:url(img/ico_trafic.gif);}

/*espace*/
.content .block.espace			{background:url(img/block_espace_bottom.gif) 0 100% no-repeat;}
.content .block.espace .padder		{padding:15px 8px 13px 60px; min-height:10px;background:url(img/ico_espace.gif) 3px 3px no-repeat;}
* html .content .block.espace .padder		{height:10px;}
.content .block.espace .padder ul 		{margin:0; padding:0;}
.content .block.espace .padder ul li		{margin:0; padding:0 0 0 13px; background:url(img/puce_grise.gif) 0 3px no-repeat; font-size:10px;}
.content .block.espace .padder ul li a		{color:#666;}

/*iframe*/
.content .block.iframe		{width:453px; width:469px;background-image:url(img/block_bg_iframe.gif);}
.content .block.iframe		{margin-right:0;}
.content .block.iframe .block_int	{background-image:url(img/block_top_big.gif);}
.content .block.iframe h2 		{background-image:url(img/block_h2_bg_big.gif);} 
.content .block.iframe h2 span	{background-image:url(img/rond_bleu.gif);}
.content .block.iframe .padder	{padding:5px 5px 5px 5px; background:url(img/block_bottom.gif) 0 100% no-repeat;}


/*actualite*/
.content .block.actualite		{float:right;width:212px; margin-right:0; background-image:url(img/block_bg.gif);}
.content .block.actualite .block_int	{background-image:url(img/block_top.gif);}
.content .block.actualite h2 		{background-image:url(img/block_h2_bg.gif);} 
.content .block.actualite h2 span	{background-image:url(img/rond_rose.gif);}
.content .block.actualite .padder	{min-height:151px; background-image:url(img/block_ligne.gif);}
* html .content .block.actualite .padder	{height:151px;}
.content .block.actualite .link		{background-image:url(img/block_link_bg.gif);} 
.content .block.actualite .link a	{padding:0 0 0 13px; background:url(img/puce_rose.gif) 0 2px no-repeat;color:#e2007a;} 


/************************************
__ASIDE
*************************************/


/************************************
__FOOTER
*************************************/
.footer 				{padding:0 0 10px 0; color:#4d4d4d; font-size:9px; text-align:center;}
.footer ul li			{display:inline; padding:0 5px 0 12px; background:url(/css/img/moins_gris.gif) 0 5px no-repeat;}
.footer ul li.first			{padding:0 5px 0 0; background:none;}
.footer ul li a			{color:#4d4d4d;}
/***********************************************************************************************************

* Filename :		base.css
* Description :		css globale
* Version :		march 2009

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


/**********************************************************************************************************	
reset css, tribute to eric meyer
http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
***********************************************************************************************************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
{margin:0; padding:0; border:0; outline:0; font-size:100%;}
body 			{line-height:1; position:relative;}
ol, ul 			{list-style:none;}
blockquote, q 		{quotes:none;}
/* remember to highlight inserts somehow! */
ins 			{text-decoration:none;}
del 			{text-decoration:line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table 			{border-collapse:collapse; border-spacing: 0;}


/**********************************************************************************************************	
Global defini	
***********************************************************************************************************/
.clear			{clear:both; font:0px/0px arial; height:0;}
body			{position:relative; font:11px/14px verdana;}

h1			{margin:0; padding:0; font-size:18px;}
h2			{margin:0 0 15px 0; padding:3px 0 0 0; font-size:18px;}

h3			{margin:0 0 10px 0; padding:5px 0 0 0; font-size:16px;}
h4			{margin:0 0 10px 0; padding:5px 0 0 0; font-size:14px;}

.content ul		{padding:5px 0 10px 0;}
.content ol		{padding:5px 0 10px 0; list-style-type:decimal;}
.content	ul li		{padding:0 0 5px 15px;  }
.content ol li		{margin:0 0 5px 15px;}
.content ul ul,
.content ol ol,
.content ul ol,
.content ol ul		{margin:0 0 0 10px; padding:10px 0 0px 0;}

.content ul li ol li		{padding:0 0 5px 0; background:none; text-indent:0;}
.content ol li ul 		{margin:0;}
.content ul li ul li		{}

.aside h2			{margin:0; padding:0 0 5px 0; font-size:15px;}
.aside h3			{margin:0 0 3px 0; padding:8px 0 0px 0;}

.aside ul			{padding:5px 0 10px 0;}
.aside ol			{padding:5px 0 10px 0; list-style-type:decimal;}
.aside ul li		{padding:0 0 5px 15px;}
.aside ol li		{margin:0 0 5px 15px;}
aside ul ul,
aside ol ol,
.aside ul ol,
aside ol ul		{margin:0 0 0 10px; padding:10px 0 0px 0;}

.aside ul li ol li		{padding:0 0 5px 0; background:none; text-indent:0;}
.aside ol li ul 		{margin:0;}
.aside ul li ul li		{}

a			{text-decoration:none; color:#4fa3d3;}

a:focus,
a:active,
a:hover,
a:focus,
a:active			{color:#4fa3d3; text-decoration:underline;}

.input_submit		{cursor:pointer;}

.skip_link			{padding:5px 0;}
.skip_link ul li		{display:inline; padding:0 5px 0 0; background:none;}