/* --------------------------------------------------------- */
/* Feuille de style des squelettes pour POP Jura */
/* --------------------------------------------------------- */


/* ------------------------------------------
/* Typographie generale (style transversaux)
/* ------------------------------------------ */
html { font-size: 100%; } /* Cf.: http://pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/ */




body {
background-color:white;
margin:0px 0px 0px 0px;
}
h1 {
font-family:arial, sans-serif;
font-size:90%;
color:black;
font-weight: bold;
background-color:transparent;
text-align:left;
}
h2 {
font-family:arial, sans-serif;
font-size:120%;
color:black;
background-color:transparent;
text-align:left;
}
h3 {
font-family:arial, sans-serif;
font-size:130%;
color:black;
font-weight: bold;
background-color:transparent;
text-align:left;
}
h4 {
font-family:arial, sans-serif;
font-size:160%;
color:black;
font-weight: bold;
background-color:transparent;
text-align:left;
}
h5 {
font-family:arial, sans-serif;
font-size:180%;
color:black;
font-weight: bold;
color:#ffffff;
background-color:#e31723;
text-align:left;
}





a:link {
font-family:arial, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:underline;
}
a:visited {
font-family:arial, sans-serif;
font-size:100%;
color:grey;
background-color:transparent;
text-decoration:underline;
}
a:hover {
font-family:arial, sans-serif;
font-size:100%;
color:red;
background-color:transparent;
text-decoration:underline;
}




/* ------------------------------------------
/* Disposition a l'ecran des blocs principaux
/* ------------------------------------------ */

body { background: url(images/header.png); background-position:center center;
 }


#page { position: relative; width: 75em; margin: 0 auto; text-align: left; }

#entete { background: #fff; width: 75em; margin: 0; padding-top: 1.60em; border-bottom: 20px solid #fff; }
#entete a.accueil { display: block; width: 100%; }
#entete a.accueil img.spip_logos { vertical-align: bottom; line-height: 1em; }
#entete a.accueil #nom_site_spip { vertical-align: bottom; font-size: 2.2em; font-family: Georgia, Times, serif; font-weight: normal; }
#entete .formulaire_menu_lang { position: absolute; right: 0; top: 0.90em; display: block; width: 30%; } /*Cf.: spip_formulaires.css*/

#conteneur { background: url(images/front_clair.png); clear: both; float: left; width: 80%; overflow: hidden; }
#contenu { padding: 10px; }

#navigation { background: #fff; float: right; width: 20%; margin-top: 0em; overflow: hidden; }
#extra { background: #fff; float: right; clear: right; width: 20%; margin-top: 0em; overflow: hidden; }

#pied { background: #fff; clear: both; width: 100%; margin: 0; padding: 0.40em 0; border-top: 10px solid #ff0000; text-align: center; font-size: 0.90em; }
#pied img { vertical-align: middle; }

/* Espaceur de blocs */
.nettoyeur { clear: both; height: 0; margin: 0; padding: 0; border: 0; line-height: 1px; font-size: 1px; }

/* Non visible a l'ecran */
.invisible { position: absolute; top: -3000em; height: 1%; }






/* ------------------------------------------
/* Sous-navigation et autres menus
/* ------------------------------------------ */

/* Habillage general des menus de navigation */
.menu { clear: both; margin-bottom: 2em; text-align: left; }
.menu p { margin: 0.20em 0; padding: 0.20em 0.10em; }
.menu ul { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid #DDD; }
.menu ul li { margin: 0.20em 0; padding: 0.20em; border-top: 1px solid #DDD; }
.menu ul li ul { margin-left: 1em; border: 0; }
.menu ul li li { padding: 0; border: 0; }

/* Pagination */
.pagination { clear: both; text-align: right; font-size: 0.90em; color: #666; }
.pagination .on { font-weight: bold; color: #666; }

/* Rubriques */
.rubriques ul { border: 0; }
.rubriques ul li { background: #241293; border: 0; }

.formulaire_recherche { margin-bottom: 2em; } /*Cf.: spip_formulaires.css*/

/* Listes d'articles et extraits introductifs */
.articles ul li { clear: both; padding: 0.40em 0.20em; }
.articles ul li h3 { margin: 0.30em 0; }
.articles .spip_logos { float: right; clear: right; margin: 0 0 4px 16px; }
.articles ul li .enclosures { float: right; text-align: right; max-width: 60%; margin: 0; }
.articles ul li .introduction { margin-top: 0.30em; line-height: 1.40em; }


/* menu HORIZONTAL*/

.bg {background: url(images/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#fff; text-decoration:none; font-size:15px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #ff0000; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:192px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:15px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#ff0000; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#ff0000 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#ff0000 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid fff; white-space:nowrap; width:93px; z-index:200; height:auto;}


/* Menu latérale */

ul#menu2
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menu2 li
{
	margin: 0 0 2px 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#menu2 li a
{
	display: block ; float:right; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 200px ;
	line-height: 25px ;

        font-family: arial, verdana, sans-serif ;
        font-size: 10pt ; color: #fff ;
	text-indent: 7px ; /* On décale le texte de 7px du bord gauche */

	text-decoration: none ;
	background: url(images/bouton4.png) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 0px solid #f0eceb ;
}

ul#menu2 li a:hover
{
	background: url(images/bouton4.png) no-repeat 0 -25px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 0px solid #fff6b9 ;

}

/* Pour positionner le menu principale */
#calque {

	width: 200px !important; /*pour Firefox */

	margin: auto !important; /*pour Firefox */

        /margin: 20px; /*pour IE6,7 */

        /margin-top: 5px /*pour IE6,7 */

}

/* page liens */

ul#liens
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#liens li
{
	margin: 0 0 5px 0 ;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#liens li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 347px ;
	line-height: 36px ;
	color: #000 ;
	text-indent: 10px ; /* On décale le texte de 4px du bord gauche */

	text-decoration: none ;
	background: url(images/bouton_liens.png) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 1px solid #f0eceb ;
}

ul#liens li a:hover
{
	background: url(images/bouton_liens.png) no-repeat 0 -36px ; /* Et ici on décale l'image du background de 36px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 1px solid #f0eceb ;

}

/* Pour positionner le menu dans lien */
#calque2 {

	width: 370px !important; /*pour Firefox */

	margin: auto !important; /*pour Firefox */

        /margin: 230px; /*pour IE6,7 */

        /margin-top: 5px /*pour IE6,7 */

}