*
{   margin: 0;
    padding: 0;
    /*text-align: justify;*/
}
body
{   /*bleu en haut, blanc en bas*/
    background: White url(backgrounds/ligne_bleue_fond.jpg) repeat-x top;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
#background_up /* ce calque sert uniquement à afficher la bannière */
{   position: absolute; left: 0px; top: 0px; width: 100%; height: 332px;
    background: url(backgrounds/background_up.jpg) no-repeat top ;
}

#conteneur /* colonne centrée de 1000px*/
{   margin: 0 auto 0 auto;
    position: relative;
    width: 980px;
    padding: 0;/*
	border: solid 1px Green;*/
}


#banniere /* ====================== BANNIERE =============================== */
{   position: absolute;
    left: 0px;  top: 0px;   right: 0px;
    height: 140px;
}
#navig_haut
{   position: absolute;
    left: 120px;   top: 0px;
    width: 743px;   height: 41px;
    background: transparent url(backgrounds/barre_rouge.png) no-repeat top;
    padding-top: 10px;
}
#navig_haut a
{   color: White;
    text-decoration: none;
    font-size: smaller;
    font-weight: bold;
    display: block;
    padding-left : 25px;
    margin-right: 18px;
    background: url(elements/puce_verte.png) no-repeat left; /* puce */
}
#navig_haut li
{   list-style:none;
    float:right;
}
#navig_haut a:hover
{   text-decoration: underline;
}



#logo
{   z-index: 50; /* Pour que le logo ne soit pas masqué par la barre de liens */
    position: absolute;
    left: 220px;    top: 25px;
    width: 260px;   height: 108px;
    background: transparent url(elements/logo_Pistes_Solidaires.png) no-repeat top;
}
#logo a
{   position: absolute;
    top:   63px;    left: 0px;
    width: 260px;   height: 45px;
    text-decoration: none;
}
#logo a em
{   visibility: hidden; /* le lien est invisible, mais existe : sa position correspond à celle du logo */
}


/* ============ ONGLETS_PRINCIPAUX =================== */

#onglets_principaux     /* Ce calque englobe les 5 onglets, qui ont chacun leur propre calque */
{   position: absolute;
    left: 170px;    top: 175px;
    width: 650px;   height: 90px;
}
#onglets_principaux li
{   list-style:none;
}
#onglets_principaux a
{   text-decoration: none;
    position: absolute; /* chaque onglet a une position précise, voir + bas */
    background: no-repeat left; /* pour chaque onglet, on ne verra que la moitié gauche de l'image de fond */
}
#onglets_principaux a em
{   visibility: hidden; }
/* les liens sont invisibles, mais existent :
ce sont les images de fond qui apparaissent comme cliquables. */

#onglets_principaux a:hover
{   background-position: right;
    /* Quand la souris est sur le lien, on fait apparaitre la seconde moitie de
    l'image de fond => le bouton change d'apparence ... Voir image de fond */
}
#onglet_p1,#onglet_p2,#onglet_p3,#onglet_p4,#onglet_p5 {   position: absolute; }
a#onglet_p1 { left: -20px; top: 21px; width: 143px; height: 62px;   background: url(backgrounds/onglet1.png); }
a#onglet_p2 { left: 127px; top: 11px; width: 142px; height: 53px;   background: url(backgrounds/onglet2.png); }
a#onglet_p3 { left: 276px; top: 10px; width: 140px; height: 47px;   background: url(backgrounds/onglet3.png); }
a#onglet_p4 { left: 423px; top: 13px; width: 142px; height: 56px;   background: url(backgrounds/onglet4.png); }
a#onglet_p5 { left: 571px; top: 26px; width: 143px; height: 65px;   background: url(backgrounds/onglet5.png); }






#page /* ============================== PAGE ======================================== */
{   position: relative;
    top: 240px;
    left: 0px;
    width: 100%;
    min-height: 500px;
}
.fin_de_calque
{   clear: both;    }



#colonne_liens /* ====================== COLONNE_LIENS =============================== */
{   float: left;
    width: 220px;
    margin: 50px 0px 0px 30px;
}
#colonne_liens ul
{   list-style: none;
}


#liens_intra_rub
{   background: url(backgrounds/cadre_gauche_bleu.png) no-repeat top;
    min-height: 209px;/* = hauteur_background(259) - padding-top(40) - padding-bottom(10) */
    padding : 40px 0px 10px 10px;
    margin-bottom: 10px;
}
#liens_intra_rub strong
{   color: #0C6F8E; /* Bleu foncé */
    font-size: 1.1em;
    font-weight: bold;
}
#liens_intra_rub ul
{   line-height: 0.9em;
}
#liens_intra_rub ul li
{   color: #C1AA06; /* Jaune/vert */
    font-size: 0.85em;
    font-weight: bold;
    margin-top: 5px;
}
#liens_intra_rub ul li a
{   color: #C1AA06; /* Jaune/vert */
}
#liens_intra_rub ul li ul li
{   margin-top: 0;
}
#liens_intra_rub ul li ul li a
{   padding: 0 0 0 10px;
    background: url(elements/quatre_points.png) no-repeat left;
    color: Black;
    font-size: 1em;
    font-weight: normal;
}

#colonne_liens a            {   text-decoration: none;      }
#colonne_liens a:hover  {   text-decoration: underline;}

#liens_generaux
{   width: 100%;
    height: 7em;
    font-variant: small-caps;
	font-size: 15px;
    list-style: none;
    margin-top: 30px;
	margin-bottom: 100px;
	/*background: url(bloc_lien_bleuvertl.jpg) no-repeat;
	border: solid 1px Black;*/
}
.calque_seul #liens_generaux
{   position: relative;
    top: 130px;
}
ul#liens_generaux li a
{   color: #0C6F8E; /* #0C6F8E  */
    border-style: dashed;
    border-width: 0 0 1px 0;
    padding-bottom: 0px;
    text-decoration: none;
}
ul#liens_generaux li a:hover
{   color: #990033; /* Rouge au survol souris */
    text-decoration: none;
}

#glink1, #glink2, #glink3, #glink4, #glink5, #glink6, #glink7, #glink8    {   position: relative; width: 3em; }
#glink1 { left:  25px; top:   0px; }/* Témoignages */
#glink2 { left: 115px; top:   0px; }/* Liens */
#glink3 { left:  35px; top: -15px; }/* Photos */
#glink4 { left:  20px; top:  -5px; }/* Médias */
#glink5 { left:  80px; top: -30px; }/* Téléchargement */
#glink6 { left: 115px; top: -25px; }/* Otesha */
#glink7 { left:  65px; top: -35px; }/* YNG */





/* FACEBOOK, TWITTER, BLOG -------------------------------------- */
ul#boutons_web2
{   float: left;
	margin: 0px 0 20px 15px;
	width: 220px; height: 60px;
	/*border: solid 1px Black;*/
}
#boutons_web2 li
{   list-style:none;
}
#boutons_web2 a
{   float: left;
	display: block;
	width: 60px; height: 60px;
	background: no-repeat left;
	margin: 0 5px 0 1px;
	/*border : solid 1px Red;*/
}
#boutons_web2 a em
{   position:absolute; left:0px; top:-500px;
	width:1px; height:1px; overflow:hidden;
}
#boutons_web2 a:hover
{   text-decoration: none;
	background-position: right;
}
a#bouton_facebook { background: url(icones/icone_facebook.png); }
a#bouton_twitter  { background: url(icones/icone_twitter.png); }
a#bouton_blog     { background: url(icones/icone_blog.png); }




#colonne_texte /* ====================== COLONNE_TEXTE =============================== */
{   float: left;
    width: 550px;
    margin: 55px 0px 20px 0px;
    background: url(backgrounds/parentheses_jaunes.png) no-repeat 100% 100%;
    min-height: 335px;
}
#colonne_texte p
{   font-size: small;
    padding: 10px 0 10px 0;
}
#colonne_texte p a
{   color: #0C6F8E;/*#1D63B7*/
}
#colonne_texte h1
{   color: #C1AA06;/*jaune cuivre*/
    font-size: 1.2em;
    margin: 8px 0 0 5px;
    float: left;
    max-width: 400px;/* reste 550-400px pour afficher le lien PDF */
}
#colonne_texte h1 a
{   color: #C1AA06;
    text-decoration: none;
}
.souligne
{   border-style: dashed;
    border-width: 0 0 2px 0;
}
a.rubrique_version_PDF
{   float: left;
    margin: 8px 0 0 20px;
    width: 40px;    height: 40px;
    background: url(elements/bouton_PDF.png) no-repeat center;
    text-decoration: none;
}
a.rubrique_version_PDF em
{   display: none;
}

#colonne_texte h2
{   font-size: 0.9em;
    margin-top: 30px;
    margin-left: 25px;
}
.emballage_article
{   float: left;
    width: 241px; /*45%;*/
    margin: 10px 10px 10px 15px;
    font-size: 11px;
    text-align: justify;/*
	border: solid 1px Red;*/
}
.emballage_article .spip_documents
{   margin-right: 5px;
}
.spip_documents dt a img
{   border: none ;
}
.emballage_article a
{   color: #1D63B7 ;
}

.emballage_article h3
{   font-size: 14px;
    color: #B62501; /* rouge titre article */
    padding: 0 0 5px 0;
    text-align: left;
}
.emballage_article h3 a
{   color: #B62501;
    text-decoration: none;
}
.emballage_article h3 a:hover
{   text-decoration: underline;
}
.emballage_article h4
{   font-size: 14px;
    color: #B62501;
    padding: 10px 0 5px 0;
}


#colonne_texte p
{   /*font-size: 0.7em;
    text-align: justify;*/
}
hr
{   clear: both;
    visibility: hidden;
}
#colonne_texte a.suite_article
{   float: right;
}
.galerie_images h3,
.galerie_images h4
{   font-size: 14px;
    color: #B62501; /* rouge titre article */
    text-align: left;
    clear: both;
    padding: 5px 0 5px 10px;
}

#colonne_images /* ====================== COLONNE IMAGES =============================== */
{   position: absolute;
	left: 785px;
	top: 25px;
	width: 200px; height: 425px;
}
#decor_images
{   position: absolute;
    left:0px; top: 0px; width: 200px; height: 425px;
    background: url(backgrounds/guirlande_photo_trouee.png) no-repeat top left;
}
#decor_images strong
{   visibility: hidden;
}
#colonne_images a
{   text-decoration: none;}
#colonne_images a   em
{   visibility: hidden;}

#img1, a#lien_img1,
#img2, a#lien_img2,
#img3, a#lien_img3,
#img4, a#lien_img4      { position: absolute; width: 130px; height: 115px; }

#img1, a#lien_img1 { left: 14px; top:   0px; }
#img2, a#lien_img2 { left:  0px; top: 112px; }
#img3, a#lien_img3 { left:  0px; top: 210px; }
#img4, a#lien_img4 { left: 27px; top: 308px; }

a#lien_img1 { height: 105px; }
a#lien_img2 { height:  90px; }
a#lien_img3 { height: 100px; }
a#lien_img4 { height: 115px; }

#img1               {   z-index: 10; }
#img2               {   z-index: 11; }
#img3               {   z-index: 12; }
#img4               {   z-index: 13; }
#decor_images   {   z-index: 14; }
#lien_img1      {   z-index: 15; }
#lien_img2      {   z-index: 16; }
#lien_img3      {   z-index: 17; }
#lien_img4      {   z-index: 18; }

#img1 { background: url(images_par_defaut/img1_130x115px.jpg) center no-repeat; }
#img2 { background: url(images_par_defaut/img2_130x115px.jpg) center no-repeat; }
#img3 { background: url(images_par_defaut/img3_130x115px.jpg) center no-repeat; }
#img4 { background: url(images_par_defaut/img4_130x115px.jpg) center no-repeat; }



#bas_de_page /* ====================== BAS DE PAGE =============================== */
{   clear: both;
    position: relative;
    top: 240px;
    left: 0px;
    width: 100%;
    height: 126px;
    text-align: center;
    background: #ffBC01 url(backgrounds/background_bas.jpg) top repeat-x;
}
#bas_de_page a
{   color: White;
    text-decoration: none;
    font-size: 0.7em;
    font-weight: bold;
    padding: 0 5px 0 12px;
    background: #FFBB04 url(elements/quatre_points_blancs.png) no-repeat left;
}
#bas_de_page a:hover
{   text-decoration: underline;
}






/* ====================== PAGE D'ACCUEIL =============================== */
#home_page
{   position: relative;
    top: 240px;
    width: 800px;
    margin: 0 auto 0 auto;
    padding-top: 50px;
    background: url(backgrounds/parentheses_jaunes.png) no-repeat 100% 105%;
    font-size: smaller;
}

#home_text /* =============== fenêtre texte */
{   float: left;
    width: 300px;
    padding-left: 90px;
}
#home_text h1
{   color: #0C6F8E; /* #1D63B7 bleu ciel */
    border-bottom: dashed 2px #0C6F8E;
    font-variant: small-caps;
    font-size: 22px;
    margin: 10px 0px 10px 0px;
    padding-left: 20px;
}
#home_text h2
{   font-size: 13px;
    padding-left: 20px;
}
#home_text p
{   font-size: 11px;
    padding: 0 25px 10px 20px;
}
a.suite_article
{   float: right;
    width: 24px;
    height: 25px;
    background: url(elements/suivant.png) no-repeat right;
    text-decoration: none;
}
#home_text a.suite_article
{   position: relative;
    top: -24px;
    left: 25px;
}
a.suite_article em
{   display: none;
}

.colonne_droite
{	float: right;
	width: 260px;
	padding-right: 120px;
	/*border: solid 1px Red; */
}

#home_news /* =============== fenêtre actualités */
{   float: right;
    width: 250px;
    background: url(backgrounds/cadre250x750_haut.png) no-repeat top left;
    margin-bottom: 25px;
}
#home_news h2
{   font-variant: small-caps;
    font-size: 200%;
    color: #9B0034; /* actualités : titre rouge */
    padding: 10px 20px 0px 20px;
}
#home_news ul
{   line-height: 1em;
    list-style: none;
    padding: 10px 20px 20px 20px;
    font-size: 90%;
    background: url(backgrounds/cadre250x750_bas.png) no-repeat bottom left;
}
#home_news ul li
{   padding-bottom: 10px;
}
#home_news ul a
{   text-decoration: none;
    color: #7A7E80; /* gris */
    background: url(elements/quatre_points_gris.png) no-repeat 0px 5px;
    padding-left: 12px;
}
#home_news ul a:hover
{   text-decoration: underline;
}
#home_page #liens_generaux
{   float: left;
	margin: 0 0 15px 30px;
}
#home_page #boutons_web2
{   float: left;
	margin-left: 30px;
}














/* ====================== PLAN DE RUBRIQUE RECURSIF =============================== */

.plan_rubrique  {   margin-left: 20px; }
.plan_rubrique ul
{   border-left: solid 1px #0C6F8E;
    background: url(elements/trait_bleu_0C6F8E.png) bottom left no-repeat;
    padding: 0 0 5px 30px;
    margin:  0 0 5px 10px;
    list-style: none;
    font-size: 90%;
}
.plan_rubrique a,
.plan_rubrique ul a,
.plan_rubrique strong
{   font-weight: bold;
    text-decoration: none;
    color: #0C6F8E; /* Bleu foncé */
    border-bottom: solid 1px #0C6F8E ;
}
ul.plan_rubrique li .liste_articles,
.plan_rubrique .liste_articles
{   color: Gray;
    margin-left: 10px;
    font-size: 90%;
}
ul.plan_rubrique li a.lien_article,
.plan_rubrique a.lien_article
{   color: Gray;
    border: none;
    text-decoration: none;
    font-weight: normal;
}
ul.plan_rubrique li a.lien_article:hover
{   text-decoration : underline;
}

/* ====================== ARTICLE COMPLET =============================== */
.article_complet
{   width: 90%;
    float: none;
    padding-bottom: 50px;
}
.article_complet h3
{   clear: both;
    padding-top: 10px;
}
.article_complet h4
{   clear: both;
}

p.portfolio
{   margin: 5px 5px 35px 10px;
	padding: 0 0 0 50px;
	/*text-align: justify;
	border: solid 1px #B5D7DF;
	border-width: 0 0 1px 1px;
	background-color: #B5D5DF;*/
	background: url(backgrounds/degrade_bleu.png) left repeat-y;	
}
p.portfolio a img
{   /*float: left;*/
    margin: 0 0 8px 8px;
	background: White url(backgrounds/reflet_vignette.jpg) top left no-repeat;
	border: solid 1px;
	border-color: #FFF #BBB #BBB #FFF ;
	padding: 8px;
}
img.icone_article,
.icone_article img
{   float: left;
    margin: 0 10px 0 0;
}

/* ============================ IMAGE ===================================== */
p.grande_image
{   text-align: center;
}
p.grande_image img
{   padding: 7px 0 7px 0;
    border: none;
}
.grande_image img.picto
{   background: transparent;
    padding: 0px;
    border: none;
}
p.galerie_toutes_photos a img
{   border: none;
}
a.img_prec
{   float: left; width: 24px; height: 25px;
    background: url(elements/precedent.png) no-repeat right;
    text-decoration: none;
    margin-left: 15px;
}
a.img_suiv
{   float: right; width: 24px; height: 25px;
    background: url(elements/suivant.png) no-repeat right;
    text-decoration: none;
    margin-right: 15px;
}
a.img_prec em,
a.img_suiv em
{   display: none; }

.complement_titre
{
    font-size: 90%;
    font-style: italic;
}


.spip_form_champ
{   width: 400px;
    text-align: left;
}
#colonne_texte .emballage_article,
#colonne_texte .emballage_article p.spip
{   font-size: 13px;
}


img { border: none; }

.spip_documents_center { clear: both; width: 100%; margin: auto; }
span.spip_documents_center { display: block; margin-top:1em; }
span.spip_documents_center { text-align: center; }

span.spip_documents_right { margin-left: 10px; }