/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */


/* --- STYLES DE BASE POUR LE TEXTE ET LES PRINCIPAUX ÉLÉMENTS --- */

/* Page */
html {
	font-size: 100%; /* Voir -> Note 1 à la fin de la feuille de styles. */
}
body {
	margin: 0;
	padding: 00px 00px; /* Note -> 2 */
	font-family: Arial, Helvetica, sans-serif, "Trebuchet MS"; /* 3 */
	font-size: 0.76em; /* -> 4 */
	line-height: 1; /* -> 5 */
	color: black;
	/*background: white;*/
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
	margin:  0; /* -> 6 */
	color: #72036e;
}
h1, h2 {
	font-family: Arial, Helvetica, sans-serif, "Trebuchet MS";
	font-weight: normal; /* -> 7 */
	
}
h1 {
	font-size: 2.5em; /* -> 8 */
	font-style: normal;
}
h2 {font-size: 1.3em; font-weight:bold;}
h3 {font-size: 1em;}
h4 {font-size: 1em;}

/* Listes */
ul, ol {
	margin: .75em 0 .75em 24px;
	padding: 0; /* -> 9 */
}
ul {
	list-style: square;
}
li {
	margin: 0;
	padding: 0;
}

/* Paragraphes */
p {
	margin: .75em 0;

}
li p, blockquote p {
	margin: .5em 0;
}

/* Citations */
blockquote, q {
	font-size: 1.1em;
	font-style: italic;
	font-family: Arial, Helvetica, sans-serif, "Trebuchet MS";
}
blockquote {
	margin: .75em 0 .75em 24px;
}
cite {
	font-style: italic;
}

/* Liens */
a {
	color: mediumblue;
	text-decoration: underline;
}
a:hover, a:focus {
	color: #808080;
}
a img {
	border: none; /* -> 10 */
}

:focus { outline: none;}


/* Divers éléments de type en-ligne */
em {
	font-style: italic;
}
strong {
	font-weight: bold;
	color: dimgray;
}


/* --- STYLES POUR CERTAINS CONTENUS DES GABARITS --- */

pre, code {
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif, "Trebuchet MS";
}
pre {
	width: 90%;
	overflow: auto;
	overflow-y: hidden;
	margin: .75em 0;
	padding: 12px;
	background: #eee;
	color: #555;
}
pre strong {
	font-weight: normal;
	color: black;
}
#copyright {
	margin: 20px 0 5px 0;
	text-align: right;
	font-size: .8em;
	color: #6493a0;
}
#copyright a {
	color: #6493a0;
	text-decoration: none;
}
#copyright a:hover, #copyright a:focus {
	text-decoration: underline;
}


/* --- NOTES ---

1.	Ce "font-size: 100%" est normalement inutile. On l'utilise uniquement
	pour éviter un bug de redimensionnement du texte dans Internet Explorer.

2.	Par défaut, les navigateurs ont un padding (ou, pour certains, un
	margin) de 6px pour l'élément BODY. C'est ce qui évite que le texte
	ne soit complètement collé aux bords de la zone de visualisation du
	navigateur lorsqu'on affiche une page «brute», sans mise en forme.
	Mais ce retrait de 6px est un peu faiblard: on le renforce donc.
	Notez bien que les feuilles de styles des gabarits pourront augmenter
	ce retrait, ou bien l'annuler.
	
3.	Voici quelques exemples de collections cohérentes de fontes (propriété
	CSS "font-family"):
	font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
	font-family: "Times New Roman", Times, "Nimbus Roman No9 L", serif;
		
4.	Taille du texte de base de la page. Dépend de la taille du texte par
	défaut du navigateur (souvent 16px), et des réglages de l'utilisateur.
	À adapter en fonction de la fonte choisie, et du rendu souhaité.
	En général, on utilisera une valeur de base entre .65em et 1em
	(ou 65% et 100%).

5.	Hauteur de ligne. À adapter en fonction de la fonte choisie, et des
	besoins particuliers (lignes de texte longues ou courtes, titre ou
	corps de texte...).

6.	En général, les styles par défaut des navigateurs font que les marges
	en haut et en bas des titres sont équivalentes. Ici, en diminuant la
	marge du bas, on cherche à rapprocher le titre du contenu qu'il introduit.

7.	Les styles par défaut des navigateurs mettent les titres en gras.
	Si on souhaite passer à des caractères «normaux», on doit utiliser
	font-size: normal.

8.	Pour un élément en "font-size: 3em", la taille du texte sera le triple de
	la taille du texte de l'élément parent.
	À noter: on aurait pu écrire "font-size: 300%" pour le même résultat.

9.	Par défaut, les listes UL et OL ont un retrait à gauche qui peut être,
	suivant les navigateurs:
	- un padding-left de 40px;
	- ou bien un margin-left de 40px.
	On met tout le monde d'accord avec une marge à gauche de 24px, et pas
	de padding.

10.	Les navigateurs donnent souvent aux images placées dans des liens
	une bordure disgracieuse. On annule ce style souvent gênant en appliquant
	un "border: none" aux images qui se trouvent à l'intérieur d'un lien.

*/


/* ==============================================
   FEUILLE DE STYLES DES GABARITS HTML/CSS --- 08
   © Elephorm & Alsacreations.com
   Conditions d'utilisation:
   http://creativecommons.org/licenses/by/2.0/fr/
   ============================================== */


/* --- COULEURS --- */

/* Note: vous pouvez modifier simplement l'aspect de ce gabarit en modifiant
   uniquement les couleurs de fond (propriétés background) et les couleurs
   du texte (propriété color).
   Pour modifier la disposition des blocs, voir plus bas dans la feuille de
   styles la partie «positionnement». */

/* Général */
body {
	color: #000;
	background: #FFF;
}
a {
	color: #808080;
	text-decoration:none;
}
a:hover, a:focus {
	color: #808080;
	text-decoration:underline;

}
strong {
	color: #808080;
}

/* Navigation */
#navigation {
	padding: 4px 0px 0px 0px;
	width: 1060px;
	height: 55px;
	margin: 0 auto;
	background-image:url(../img/line_bg_nav.jpg);
	background-repeat:repeat-x;
	
}
#navigation a {
	color: #000;
}
#navigation a:hover, #navigation a:focus {
	/*background: #000000;*/
	color: #ba0522;
}

/* Bloc central */
#centre {
	/*background: url(../img/08-colonnes.png) repeat-y; /* Voir -> Note 1 */
}

/* Contenu principal */
#principal {
	color: #000;
	/*background: #FFF; /* -> 2 */
}
#principal a {
	color: #808080;
	text-decoration:none

}
#principal a:hover, #principal a:focus {
	text-decoration:underline;
}
#principal strong {
	color: #000;
}

/* Contenu secondaire */
#secondaire {
	/*background: #FFF; /* -> 2 */
}



/* --- POSITIONNEMENT --- */

/* Page */
body {
	padding: 00px 5px;
}
#global {
	width: 1068px;
	margin: 0 auto; /* -> 3 */
	background-image:url(../img/line_bg.jpg);
	background-repeat:repeat-y;
}

/* En-tête */
#entete {
	position: relative;
	top:0;
	left: 0;	
	padding: 0px;
	width: 1060px;
	height: 165px;
	margin: 0 auto;
	background-color:#ececee;
}
#flashbanner-wrapper {
	position: relative;
	top:0;
	left: 0;
	z-index: 250;
}
#flashbanner-back {
	position: absolute;
	top:0;
	left: 0;
	width: 375px;
	height: 165px;
	cursor: pointer;
	z-index: 500;
}
#flashbanner {
	position: absolute;
	top:0;
	left: 0;
	z-index: 250;
	width: 1060px;
	height: 165px;	
}
#banner {
	position: absolute;
	top:0;
	left: 465px;
	z-index: 500;
	padding: 0px;
	width: 456px;
	height: 34px;
	/*margin-right: 75px;*/
	background-image:url(../img/banner.jpg);
}


/* champ de recherche  */

#recherche {
	float: right;
	/*margin-left: 74px;*/
	margin-top: 7px;
	padding-top :2px;
	padding-left :10px;
	width: 216px;
	height: 30px;
	background-image:url(../img/champrecherche.jpg);
	background-repeat:no-repeat;

}
#recherche input[type='submit']{
	display: none;
}
input {
	height:14px;
	width:153px;
	border:0;
	margin : 0;
	padding: 0;
	color: #808080;
	font-size: 0.9em;
	
}

input.ok {
	height:16px;
	width:17px;
	border:0;
	margin : 0;
	padding: 0;	
}



/* Bloc central */

#centre {
	width: 1060px; /* -> 4 */
	margin: 0 auto;
	/*margin-top: 5px;*/
	overflow: hidden; /* -> 4 */
	background-image:url(../img/bg_train.jpg);
	background-position: 400px 95% ;
	background-repeat:no-repeat;
	background-color:#FFF;

	
}




/* Contenu principal */
#principal {
	float: left; /* -> 5 */
	width: 670px;
	padding: 15px 30px;

	
}
#principal > :first-child {
	margin-top: 10px;
}
#principal p, #principal li {
	line-height: 1.5;
}


/* Contenu secondaire */
#secondaire {
	width: 270px;
	height: 600px;
	margin-left: 730px; /* -> 6 */
	margin-right: 0px;
	padding: 17px 18px;

}


/* Styles Blocs */

#bloctitre{
	width: 600px;
	height: 40px;
	border-bottom: #72036e solid 1px;
	margin:0;
	padding: 0;


}
#espacetitre{
	float: left;
	width: 450px;
	height: 40px;

}

#espacepartage {
	float: left;
	margin-left: 40px;
	padding-top: 12px;
	width: 110px;

}

#blocontenu{
	width: 600px;
	height: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align:justify;

}

#blocslidepub{
	width: 270px;
	height: 330px;
}

#blocslidepub .slide{
	width: 270px;
	height: 256px;
	background-image: url(../img/bg_blocpub.jpg);
	padding-top: 6px;

}
#blocslidepub .trio{
	width: 178px;
	height: 64px;
	background-image: url(../img/bg_triopub.jpg);
	margin-left: 42px;
	padding-left: 8px;
	
}

#bigpub{
	width: 250px;
	height: 250px;
	/*margin-top: 6px;*/
	margin-left: 10px;
	background-color:#e4e4e4;
}

#puba {
	float:left;
	width: 50px;
	height: 50px;
	margin-top: 7px;
	background-color:#e4e4e4;
}

#pubb {
	float:left;
	width: 50px;
	height: 50px;
	margin-left: 10px;
	margin-top: 7px;
	background-color:#e4e4e4;


}
#pubc {
	float:left;
	width: 50px;
	height: 50px;
	margin-left: 10px;
	margin-top: 7px;
	background-color:#e4e4e4;


}



#blocnewsagenda {
	width: 251px;
	height: 56px;
	margin-top: 10px;
	margin-left: 10px;
}

#newsletter{
	float: left;
	width: 176px;
	height: 29px;
	padding-top: 27px;
	background-image:url(../img/abnmt-nwsltr.jpg);
}
#agenda{
	float: left;
	width: 66px;
	height: 56px;
	margin-left: 9px;
	background-color:#996600;
	outline: none;

}

#blockitpromo{
	width: 270px;
	height: 51px;
	text-align:center;	
	margin-bottom: 10px;
	margin-top: 10px;
}

.outilsbtn{
	width: 221px;
	height: 19px;
	background-image:url(../img/outils_btn.jpg);
	margin-left: 10px;
	padding-left: 30px;
	padding-top:3px;
	margin-top: 4px;

}



#suiveznous{
	width: 270px;
	height: 25px;
	margin-top: 20px;
	margin-left: 20px;
	color: #666666;
	font-size: 0.9em;
	font-weight:bold;

}

#button {
	display:block;
	width: 150px;
	height : 27px;
	padding-top: 13px;
	text-align:center;
	margin: auto;
	background-image: url(../img/button.jpg);
}

#button a {
	font-family: Arial, Helvetica, sans-serif, "Trebuchet MS"; /* 3 */
	font-size: 1em; /* -> 4 */
	color: #FFFFFF;
	font-weight: bold;
	text-decoration:none;
}

#button a:hover {
	text-decoration:underline;
}
/* Typos  */


.partager{
	color: #72036e;
	font-size: 0.9em;
}

.bigtext {
	color: #72036e;
	font-weight:bold;
}



/* Pied de page */

#piedpage {
	width: 1068px; /* -> 4 */
	height: 30px;
	margin: 0 auto;
	overflow: hidden; /* -> 4 */
}
#piedpagebackground {
	width: 1068px; /* -> 4 */
	height: 15px;
	background-image:url(../img/piedpage_bg.jpg);
	margin: 0;
	padding: 0;
	overflow: hidden; /* -> 4 */
}
#piedpagelinks {
	width: 1068px; /* -> 4 */
	height: 15px;
	margin: 0;
	padding: 0;
	overflow: hidden; /* -> 4 */
	background-color:#FFFFFF;
}
#piedpagesncf {
	width: 70px; /* -> 4 */
	float:left;
	height: 15px;
	margin: 0;
	padding: 0px 0px 0px 13px;
	overflow: hidden; /* -> 4 */
}


/* Mention de copyright */
#copyright {
	margin: 0;
	margin-top: 0.1em;
	font-size: .82em;
	text-align: left;
	float:left;
}
.copyrightsncf {
	margin: 20px 0;
	color: #72036e;
	font-weight:bold;
	font-size: 0.9em;
	text-align: left;
}

/* --- NOTES ---

1.	Dans ce gabarit, nous avons un conteneur div#centre, qui regroupe
	div#principal et div#secondaire uniquement. C'est ce conteneur que l'on
	utilise pour placer une image de fond répétée en hauteur, qui dessine
	le fond de la colonne de gauche et de la colonne de droite.
	Ainsi, quelle que soit la colonne la plus longue, on aura bien,
	visuellement, deux colonnes de hauteurs égales.

2.	On utilise ici des couleurs de fond pour div#principal et div#secondaire.
	Et pourtant, nous avons déjà une image de fond, sur div#centre, qui
	«dessine» nos deux colonnes. Pourquoi rajouter des couleurs de fond à
	ces blocs, alors? C'est en fait une sécurité, au cas où:
	- l'image de fond mettrait du temps à se charger (ça arrive);
	- l'image de fond ne peut pas être chargée (rare, mais ça arrive aussi).
	Ainsi, si ces problèmes surviennent, le contenu restera lisible. Notamment
	le contenu de div#principal, qui est sombre, tandis que le fond de la page
	est déjà sombre.
	Notez que dans certains cas ce genre de «sécurité» sera difficile à mettre
	en place, par exemple parce que la couleur de fond des blocs masquerait
	une image de fond comportant des motifs.
	Mais, plus généralement, un bon design de site web devrait rester lisible
	même si les images sont désactivées (ce qui est une option de beaucoup
	de navigateurs).

3.	Les marges automatiques à gauche et à droite permettent de centrer notre
	bloc div#global, et donc tout le site.
	Pour aligner div#global à gauche, on fera:
		margin-left: 0;
		margin-rigth: auto;
	Pour aligner div#global à droite, on fera:
		margin-left: auto;
		margin-right: 0;
	Pour aligner div#global à droite avec un retrait (à droite) de 100px:
		margin-left: auto;
		margin-right: 100px;

4.	On utilise ces propriétés pour empêcher le dépassement des flottants (cf.
	http://web.covertprestige.info/test/
	03-elements-flottants-et-element-parent-1.html).
	Le overflow:hidden crée un contexte de formatage qui vient contenir les
	flottants. Le width:100% a le même rôle, mais uniquement pour Internet
	Explorer 6 (utilisation du HasLayout). Dans l'idéal, on le placera avec
	des correctifs destinés à IE6 dans une feuille de styles appelée via un
	commentaire conditionnel.

5.	C'est la propriété "float" qui nous permet de placer deux blocs
	côte-à-côte. Notez bien que l'élément flottant (ici, notre contenu
	principal) doit être placé en premier dans le code HTML. Il est
	préférable de lui donner une largeur, ce que nous faisons ici avec un
	"width: 560px;" (mais à cause du padding la largeur réelle sera de 600px).

6.	Les éléments flottants ne repoussent pas les blocs, mais repoussent
	uniquement leur contenu. Pour que notre bloc de contenu secondaire forme
	une colonne distincte du contenu principal, on lui donne donc une marge à
	gauche de 620px (largeur réelle de div#principal + 20px).
	Il existe une autre technique pour adapter la largeur d'un bloc aux
	flottants qui le précèdent. On pourra lire l'article suivant:
		http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/
		design-trois-colonnes-positionnement-flottant

*/


/* the menu styling */

#menu {list-style: none; height: 55px; width: 750px; overflow: hidden; margin: 0; padding: 0; margin-left: 10px;  float:left;}

#menu a:active, #menu a:focus {outline:0;}

#menu ul.none {display:none;}
#menu ul.yes {display:block;}

#menu ul {list-style-type:none; padding:0; height:25px; margin:0 auto; }
#menu ul#sub_0 {width:850px;}
/*#menu ul#sub_1 {width:750px;}
#menu ul#sub_2 {width:550px;}
#menu ul#sub_3 {width:550px;}
#menu ul#sub_4 {width:550px;}*/


/*#menu ul li {display:block; width:130px; height:25px; float:left; margin-right:10px;}*/

#menu ul li {display:block; height:25px; float:left; margin-left: 10px; }

#menu ul a {display:block; width:100px; height:25px; position:relative; text-decoration:none; width:0; height:0; }
#menu ul a strong {display:block; width:100px; height:25px; color:#fff; position:absolute; top:0; left:0; cursor:pointer; white-space:nowrap; text-align:center; line-height:25px;}

#menu ul a:active, #menu ul a:focus {width:20px; height:25px;}
#menu ul a:active b, #menu ul a:focus strong {color:#666;}
#menu a:hover {color:#ba0522;}
#menu a:hover strong {color:#ba0522; background:#000 url(brickd.jpg);}


/* boutons */

#menu ul a.topbtn1 strong {background-image:url(../img/topbtn1.jpg); background-repeat:no-repeat; color:#666; width: 90px;}
#menu a.topbtn1:hover strong {background-image:url(../img/topbtn1.jpg); background-repeat:no-repeat; color:#ba0522;}
#menu ul li.selected a.topbtn1 strong {background-image:url(../img/topbtn1.jpg); background-repeat:no-repeat; color:#ba0522;}

#menu ul a.topbtn2 strong {background-image:url(../img/topbtn2.jpg); background-repeat:no-repeat; color:#666; width: 110px;}
#menu a.topbtn2:hover strong {background-image:url(../img/topbtn2.jpg); background-repeat:no-repeat; color:#ba0522;}
#menu ul li.selected a.topbtn2 strong {background-image:url(../img/topbtn2.jpg); background-repeat:no-repeat; color:#ba0522; }

#menu ul a.topbtn3 strong {background-image:url(../img/topbtn3.jpg); background-repeat:no-repeat; color:#666; width: 165px;}
#menu a.topbtn3:hover strong {background-image:url(../img/topbtn3.jpg); background-repeat:no-repeat; color:#ba0522;}
#menu ul li.selected a.topbtn3 strong {background-image:url(../img/topbtn3.jpg); background-repeat:no-repeat; color:#ba0522;}

#menu ul a.btn4 strong {background-image:url(../img/btn4.jpg); background-repeat:no-repeat; color:#666; width: 130px;}
#menu a.btn4:hover strong {background-image:url(../img/btn4.jpg); background-repeat:no-repeat; color:#ba0522;}
#menu ul li.selected a.btn4 strong {background-image:url(../img/btn4.jpg); background-repeat:no-repeat; color:#ba0522;}

/*__sous menus */

#menu ul a.btn5 strong {background-image:url(../img/btn5.jpg); background-repeat:no-repeat; color:#FFF; width: 110px;}
#menu a.btn5:hover strong {background-image:url(../img/btn5.jpg); background-repeat:no-repeat; color:#cecece;}
#menu ul li.selected a.btn5 strong {background-image:url(../img/btn5.jpg); background-repeat:no-repeat; color:#cecece;}

#menu ul a.btn6 strong {background-image:url(../img/btn6.jpg); background-repeat:no-repeat; color:#FFF; width: 150px;}
#menu a.btn6:hover strong {background-image:url(../img/btn6.jpg); background-repeat:no-repeat; color:#cecece;}
#menu ul li.selected a.btn6 strong {background-image:url(../img/btn6.jpg); background-repeat:no-repeat; color:#cecece;}

#menu ul a.btn7 strong {background-image:url(../img/btn7.jpg); background-repeat:no-repeat; color:#FFF; width: 170px;}
#menu a.btn7:hover strong {background-image:url(../img/btn7.jpg); background-repeat:no-repeat; color:#cecece;}
#menu ul li.selected a.btn7 strong {background-image:url(../img/btn7.jpg); background-repeat:no-repeat; color:#cecece;}

#menu ul a.btn8 strong {background-image:url(../img/btn8.jpg); background-repeat:no-repeat; color:#FFF; width: 195px;}
#menu a.btn8:hover strong {background-image:url(../img/btn8.jpg); background-repeat:no-repeat; color:#cecece;}
#menu ul li.selected a.btn8 strong {background-image:url(../img/btn8.jpg); background-repeat:no-repeat; color:#cecece;}

#centre {
	width: 1060px; 
	margin: 0 auto;
	overflow: hidden; 
	background-image:url(../img/bg_train_home.jpg);
	background-position: 00px 00px ;
	background-repeat:no-repeat;
	background-color:#eceded;

	
}


#secondaire {
	width: 270px;
	margin-left: 730px;
	margin-right: 0px;
	padding: 17px 18px;
	height: 620px;
	background-color: #eceded;

}

#blocedito{
	float:left;
	width: 500px;
	height: auto;
	margin-left: 16px;
}


#photo-edito {
	float:left;
	height: 109px;
	width: 84px;
	background-image:url(../img/photo-edito.jpg);

}



#blocslidepub .slide{
	width: 270px;
	height: 256px;
	background-image: url(../img/bg_blocpubhome.jpg);
	padding-top: 6px;

}
#blocslidepub .trio{
	width: 178px;
	height: 64px;
	background-image: url(../img/bg_triopubhome.jpg);
	margin-left: 42px;
	padding-left: 8px;
	
}

#newsletter{
	float: left;
	width: 176px;
	height: 29px;
	padding-top: 27px;
	background-image:url(../img/abnmthome-nwsltr.jpg);
}

.outilsbtn{
	width: 221px;
	height: 19px;
	background-image:url(../img/outilshome_btn.jpg);
	margin-left: 10px;
	padding-left: 30px;
	padding-top:3px;
	margin-top: 4px;

}


#piedpagebackground {
	width: 1068px;
	height: 15px;
	background-image:url(../img/piedpagehome_bg.jpg);
	margin: 0;
	overflow: hidden;
}



#newsticker-wrapper{
   padding: 0 0;
   padding-top:10px;
   margin: 0;
}

.tickercontainer { /* the outer div with the black border */
background: transparent; 
width: 435px; 
height: 19px; 
margin: 0; 
padding: 0;
overflow: hidden; 
}
.tickercontainer .mask { /* that serves as a mask. so you get a sort of padding both left and right */
position: relative;
left: 10px;
top: 8px;
width: 440px;
overflow: hidden;
}
ul#newsticker { /* that's your list */
position: relative;
left: 435px;
list-style-type: none;
margin: 0;
padding: 0;

}
ul#newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 0;
padding: 0;
color :#fff;
}
ul#newsticker a {
white-space: nowrap;
padding: 0;
color :#fff;
margin: 0 50px 0 0;
} 
ul#newsticker span {
margin: 0 10px 0 0;
} 

#scrollerpub { 
 
    /* required settings */ 
    position:relative;
    top: 0;
    left: 0;
    overflow:hidden; 
    width: 250px; 
    height:250px; 
} 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div.item { 
    float:left; 
} 


#lang{
    position: absolute;
    top:0;
    right: 75px;
    z-index: 500;
    padding: 0px;
    width: 68px;
    height: 82px;

	
}
.lang-en{
    width: 68px;
    height: 82px;
    background:url(../img/drapeaux.jpg) no-repeat -68px 0;
}
.lang-fr{
    width: 68px;
    height: 82px;
    background:url(../img/drapeaux.jpg) no-repeat 0 0;
}
#language_switch ul, #language_switch ul li{
margin: 0;
padding: 0;
list-style: none;
text-indent: -9999px;
}
#language_switch ul li a{
display: block;
width: 60px;
height: 33px;
}

#language_switch ul li a:active,#language_switch ul li a:focus{
    outline: none;
}