/*        < blank >       */
/*     Nicolas Taffin     */
/*  http://polylogue.com  */

/****************************************/
/*     	 palette des couleurs			*/							
/****************************************/


/* couleur			normale		claire		foncée 		*/

/* interstices old	#867fc2		#a39dd1		#7e76b9 	*/

/* interstices new	#1b194b		#484674		#1b1a42 	*/
/* en direct		#4AB4B7		#91c1c8		#66a5ae 	*/
/* découvrir		#50A7CB		#74C5D6		#36A6C3 	*/
/* approfondir		#86bf5e		#a3ce84		#7db556 	*/
/* itin�raires		#e5aa24		#eac057		#dba11d 	*/
/* c'�tait hier		#b09769		#c3b08d		#a78e61 	*/
/* d�battre			#a67081		#bb939f		#9d6879 	*/
/* lire et voir		#68cb96		#8cd8af		#5fc28d 	*/
/* ludique			#cb4b70		#dd8aa2		#C7325E 	*/
/* gris				#eeece7		#d2d4c9		#2d2d2c 	*/



/****************************************/
/*     	        simple tabs    	       	*/
/****************************************/

ul.tabBar
{
	display: block;
	clear: both;
	width: 100%;
	float: left;
	list-style-type: none;
	text-align: left;
	
	background-color: transparent;
}

ul.tabBar li
{
	clear: none;
	display: block;
	float: left;
	margin-left: 7px;
}


ul.tabBar li a
{
	text-decoration: none;
	clear: none;
	display: block;
	float: left;
	padding: 3px 5px 3px 5px;
	color: white;
	background-color: #AAA;
}
ul.tabBar li a:hover
{
	margin-top: -3px;
	padding: 3px 5px 6px 5px;
	
	color: white;
	background-color: #BBB;
}
ul.tabBar li.selected a
{
	margin-top: -3px;
	padding: 3px 5px 6px 5px;
	
	color: #555;
	background-color: #CCC;
}


/****************************************/
/*     	      menuBar vertical	       	*/
/****************************************/

ul.menuBar.vertical
{
	display: block;
	clear: both;
	width: 100%;
	float: left;
	list-style-type: none;
	text-align: left;
	

}

ul.menuBar.vertical li
{
	display: block;
	width: 100%;
}


ul.menuBar.vertical li a
{
	text-decoration: none;
	display: block;
	padding: 3px 5px 3px 5px;
	color: white;
	background-color: #CCC;
}
ul.menuBar.vertical li a:hover
{

	padding: 3px 5px 3px 7px;
	
	color: white;
	background-color: #BBB;
}
ul.menuBar.vertical li.selected a
{

	padding: 3px 5px 3px 7px;
	
	color: #555;
	background-color: #AAA;
}


/****************************************/
/*     	    menus deroulants    		*/
/****************************************/


ul.menuBar.horizontal
{
	display: block;
	clear: both;
	width: 100%;
	float: left;
	list-style-type: none;
	text-align: left;
	background-color: transparent;

}

ul.menuBar.horizontal li
{
	display: block;
	position: relative;
	width: auto;
	float: left;
	position: relative;
	line-height: 1.4em;
}
ul.menuBar.horizontal li span.ombreGauche
{
	display: none;
	position: absolute;
	width: 15px;
	height: 42px;
	top: 0px;
	left: -15px;
	background-image: url(../images/menuOmbreGauche.png);
	background-repeat: no-repeat;
	z-index: 1000;
}
ul.menuBar.horizontal li span.ombreDroite
{
	display: none;
	width: 15px;
	height: 42px;
	position: absolute;
	top: 0px;
	right: -15px;
	background-image: url(../images/menuOmbreDroite.png);
	background-repeat: no-repeat;
	z-index: 1000;
}
ul.menuBar.horizontal li.selected span.ombreGauche, ul.menuBar.horizontal li.selected span.ombreDroite
{
	display: block;
}

ul.menuBar.horizontal li a
{
	text-decoration: none;
	display: block;
	height: 22px;
	width: 93px;
	overflow: hidden;
	padding: 20px 0px 0px 0px;
	color: #EEE;
	background-image: url(../images/menuLumiere.png);
	background-position: bottom left;
	background-repeat: repeat-x;
	background-color: transparent;
	text-transform: uppercase;
	text-align: center;
	font-size: 11px;
	line-height: 16px;
	vertical-align: bottom;


}
ul.menuBar.horizontal li a:hover
{
	color: white;
	background-color: #BBB;
}

ul.menuBar.horizontal li.selected a
{
	color: white;
	background-color: transparent;
	background-image: none;
	
}
ul.menuBar.horizontal li ul
{
	display: none;
}





ul.menuBar.horizontal li:hover > ul
{
	display: block;
	background-color: red;
	width: auto;
	position: absolute;
	top: 2.1em;
	left: 0.5em;
	z-index: 100;
}

ul.menuBar.horizontal li ul li
{
	display: block;
	clear: both;
	width: 100%;
	white-space: nowrap;
}
ul.menuBar.horizontal li ul li a
{
	text-decoration: none;
	display: block;
	width: auto;
	padding: 0.4em;
	color: white;
	background-color: #CCC;
	border-top: 1px dotted white;
}
ul.menuBar.horizontal li.selected ul li a
{
	color: white;
	background-color: #CCC;
}
ul.menuBar.horizontal li ul li a:hover
{
	color: white;
	background-color: #BBB;
}



/******************************************************/
/* 	        personnalisation des touches  	       	*/
/******************************************************/


ul.menuBar.horizontal li.accueil a
{	
	width: 206px;
	height: 42px;
	padding: 0px;
	background-image: url(../images/logoInterstices.png);
	background-color: #25265C;
	background-position: left -84px;
	background-repeat: no-repeat;
}

ul.menuBar.horizontal li.accueil a:hover
{
	background-image: url(../images/logoInterstices.png);
	background-position: left -42px;
}
ul.menuBar.horizontal li.accueil a:active,
ul.menuBar.horizontal li.accueil.selected a:active
{
	background-position: left 0px;
}
ul.menuBar.horizontal li.accueil.selected a
{
	background-image: url(../images/logoInterstices.png);
	background-position: left -42px;
}


ul.menuBar.horizontal li.recherche a,
ul.menuBar.horizontal li.delarecherche a
{
	text-align: left;
	height: 37px;
	padding: 5px 0px 0px 10px;
	width: 83px;
	background-color: #828DD3;
}
ul.menuBar.horizontal li.decouvrir a
{

	background-color: #4AB5BB;
}
ul.menuBar.horizontal li.approfondir a
{
	background-color: #86bf5e;
}
ul.menuBar.horizontal li.itineraires a
{
	background-color: #e5aa24;
}
ul.menuBar.horizontal li.hier a,
ul.menuBar.horizontal li.cetaithier a
{
	background-color: #b09769;
}
ul.menuBar.horizontal li.debattre a
{
	background-color: #a67081;
}
ul.menuBar.horizontal li.ludique a
{
	background-color: #cb4b70;
}
ul.menuBar.horizontal li.lire a,
ul.menuBar.horizontal li.lireetvoir a
{
	background-color: #68cb96;
}




ul.menuBar.horizontal li a:hover
{
	color: white;
	background-image: none;
}
ul.menuBar.horizontal li.recherche a:hover,
ul.menuBar.horizontal li.delarecherche a:hover
{
	background-color: #828DD3;
}
ul.menuBar.horizontal li.decouvrir a:hover
{
	background-color: #4AB5BB;
}
ul.menuBar.horizontal li.approfondir a:hover
{
	background-color: #86bf5e;
}
ul.menuBar.horizontal li.itineraires a:hover
{
	background-color: #e5aa24;
}
ul.menuBar.horizontal li.hier a:hover,
ul.menuBar.horizontal li.cetaithier a:hover
{
	background-color: #b09769;
}
ul.menuBar.horizontal li.debattre a:hover
{
	background-color: #a67081;
}
ul.menuBar.horizontal li.ludique a:hover
{
	background-color: #cb4b70;
}
ul.menuBar.horizontal li.lire a:hover,
ul.menuBar.horizontal li.lireetvoir a:hover
{
	background-color: #68cb96;
}



ul.menuBar.horizontal li.recherche a:active,
ul.menuBar.horizontal li.delarecherche a:active
{
	background-color: #929CD3;
}
ul.menuBar.horizontal li.decouvrir a:active
{
	background-color: #70B9BB;
}
ul.menuBar.horizontal li.approfondir a:active
{
	background-color: #a3ce84;
}
ul.menuBar.horizontal li.itineraires a:active
{
	background-color: #eac057;
}
ul.menuBar.horizontal li.hier a:active,
ul.menuBar.horizontal li.cetaithier a:active
{
	background-color: #c3b08d;
}
ul.menuBar.horizontal li.debattre a:active
{
	background-color: #bb939f;
}
ul.menuBar.horizontal li.ludique a:active
{
	background-color: #dd8aa2;
}
ul.menuBar.horizontal li.lire a:active,
ul.menuBar.horizontal li.lireetvoir a:active
{
	background-color: #8cd8af;
}


ul.menuBar.horizontal li.accueil.selected span.ombreGauche, 
ul.menuBar.horizontal li.lire.selected span.ombreDroite,
ul.menuBar.horizontal li.lireetvoir.selected span.ombreDroite
{
	display: none;
}




/****************************************/
/*     	        fil d'Ariane  	       	*/
/****************************************/


ul.filAriane
{
	display: block;
	text-align: right;
	list-style-type: none;
	color: #5CABD0;
}

ul.filAriane li
{
	display: inline;
	font-size: 0.8em;
}
ul.filAriane li:after
{
	content:" | "; 
}


ul.filAriane li a
{
	color: #5CABD0;
	text-decoration: none;
}



ul.filAriane li a:hover
{
	color: #549DBF;
	text-decoration: underline;
}