/*-----------------------------------------------------------------*/
/* css  massage-gays.com : Terre des Chakras/
* By France Lavallé,  http://www.webstands.net/
* Contents under Licence Creative Commons by-nc-sa/
 http://creativecommons.org/licenses/by-nc-sa/2.0/fr/deed.en_GB  Attribution-NonCommercial-ShareAlike 2.0 France 
*  French : sous Licence Creative Commons by-nc-sa :  Paternité -   Pas d'Utilisation Commerciale - Partage des Conditions Initiales à l'Identique 2.0 France. /  
 http://creativecommons.org/licenses/by-nc-sa/2.0/fr/
* Last mod 2008 december 06 /
*/

/*--------------------------------*/
/*      Style généraux      */ 
/*--------------------------------*/

body, html {
padding: 0;
margin: 0;
background-color: #c08566; /*  brique pâle */ 
color: #000; /*  noir  */  
font-family: georgia, serif;   
}
body {font-size:62.5%;}
#gdconteneur {
position: absolute;
width: 780px;
left: 50%;
margin-left: -390px; 

}
/*taille et couleurs de textes, titres, éléments spéciaux*/

/* Taille du texte et titres   */
p {
margin-bottom: 10px;
line-height: 19px;
text-align: justify;
font-size: 1.25em; 
}
/* texte en gras bordé de jaune */
p.centre {  
font-size: 1.4em;
margin-bottom: 8px;
line-height: 19px;
text-align: center;
font-weight: bold;
background: #ddaa7b; /*  beige doré */
border-top: 1px solid #7d5229; /* maron doré  */
border-bottom: 1px solid #7d5229; /* maron doré  */
}

p.ital{
margin-bottom: 1px;
line-height: 15px;
font-style: italic;
font-size: 1.1em;
}
h1 {
margin-top: 3px;
font-size: 2em;
letter-spacing: 1px;  
}
h2 {
margin-top: 15px;
margin-bottom: 10px;
font-size: 1.60em;
text-align: center;
letter-spacing: 1px;
color: #4a362f; /*  presque noir  */
}
h3 {
margin-top: 15px;
margin-bottom: 5px;
font-size: 1.35em;
letter-spacing: 1px; 
color: #7d5229; /* maron doré  */ 
}
h4 {
margin-top: 10px;
margin-bottom: 5px;
font-size: 1.25em;
color: #4a362f; /*  presque noir  */
}
h5 {
margin: 5px;
font-size: 1.15em; 
}
h6 {
margin: 5px;
font-size: 0.9em; 
}

em.rouge {
margin: 0;
color: #bc0b15;
 }
em.orange {
margin: 0;
color: #c66708; 
 }
em.jaune {
margin: 0;
color: #f4e240; 
 }
em.vert {
margin: 0;
color: #44973a; 
}
em.bleufonce {
margin: 0;
color: #0e1664; 
 }
em.bleu {
margin: 0;
color: #54a8ec; 
 }
em.cristal {
margin: 0;
color: #7f5ba3; 
 }
em {
font-weight: bold;
font-style: italic;
color: #b42314;  /*rouge profond  */
}
em.rose {
font-weight: bold;
font-style: italic;
color: #ad2b67;  /* rose   */
}

/*affichage des liens internes et externes*/
a{
font-family: georgia; 
font-weight: bold;
text-decoration: none;
font-size: 0.9em;
}
a, a:link{
color: #6b2624;  /* marron  brique */
}
a.external {	
color: #6b2624;  /* marron  brique */
font-style: italic; 	
}

a:active, a:focus, a:hover, a.external:hover, a.external:focus, a.external:active  {
text-decoration: underline; 
color: #855747;  /*  marron  brique  plus clair  */
}  
a:visited { color: #855747; /*  marron  brique  plus clair  */ }

a img { border: none; }
img { border: none; }

/* sigles, acronymes, abréviations */
/* affiche un point d'interrogation  sera lu en texte normal*/
abbr{
cursor:help;
border-bottom: #990000 1px dotted; 
} 
/* affiche un point d'interrogation  le sigle sera lu en épelant*/
acronym{
cursor:help;
border-bottom: #990000 1px dotted;
speak:spell-out;
}

/* citations*/
blockquote { 
font-style: italic;
}
q { 
font-style: italic;
}

/*pause pour lecteurs vocaux*/
#nav span, #fildariane span, #precedent span, .centrage span, .gdcontenu span, .contenu span, .contenu2 span, .news span, .navcontainer span, .rubriques span, .retour span, .navFooter span, #footer span { display:none; }	
.spacer {
clear: both;
visibility: hidden;
height: 1px;
margin: 1px;
padding:0;
overflow: hidden
}

.retour { 
clear:both; 
text-align: right; 
margin-right: 1em; 
font-size: 1.2em;
}
.retour a:visited { color: #6b2624;  /* marron  brique */}

.auteur { 
clear:both; 
text-align: right;
margin-top: 1em; 
margin-right: 2em; 
font-size: 1.2em;
font-style: italic;
font-weight: bold;
color: #7d5229; /* maron doré  */
}
img { border: none; }
a img { border: none; }

/*--------------------------------*/
/*Styles spécifiques*/
/*--------------------------------*/
/* Header  */ 

/*  liens de navigations  centrés en haut aller au contenu et tabulation directe vers les pages officielles */
#nav {
text-align: center;
width: 100%;
z-index: 10;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
font-size: 1.2em;
}
#nav a {color: #897161; } 

/*affichage du logo  centré  */
#header{
margin: 0;	
padding: 1em;
/*vidth: 100%;*/
clear: both;
height: 190px;
}

#centrage  {
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px;
margin-top: 15px;
height: 170px;
}
/* images rollover centrée,  css  inspirée d'un tutoriel  http://www.alsacréations.com */ 
p a.image { 
position: absolute;
left: 50%;
top: 50%;
padding: 0;
/* définition de la classe "image" de la balise <a> */
display: block; /* la balise a doit être en bloc */
width: 780px; /* largeur de l'image réactive */
height: 170px; /* hauteur de l'image réactive */
margin-left: -390px;
margin-top: -85px; 
background-image: url(img/head.jpg); /* source de l'image de départ */
background-repeat: no-repeat;
}	 
p a.image:hover { /* définition de la classe "image" de la balise <a> au survol */
background-image: url(img/head2.jpg); /* source de l'image d'arrivée */      
}

/*liens  centrés du menu du top  en liens texte*/

#navcontainer ul{
padding: .4em 0;
margin: 0;
list-style-type: none;
width: 100%;
text-align: right;
font-size: 12pt;
}
#navcontainer li { display: inline; }
#navcontainer li a{
text-decoration: none;
padding:.2em 1.5em;  /* .2em 1em;  */
background: #ec8e4e;   /* orangé vif */ /* plus vif  #e77e41; */
letter-spacing: 1px;
}
#navcontainer li a:hover, #navcontainer li a:focus {background-color: #ddaa7b; /*  beige doré */
}

/*liens  centrés vers le menu du bas de page  en liens texte*/
/*Affichage identique au menu du top, mais obligation de différencier les ID sinon page invalide*/

#navFooter ul{
padding: .4em 0;
margin: 0;
list-style-type: none;
width: 100%; 
text-align: right;
font-size: 12pt;
}
#navFooter li { display: inline; }
#navFooter li a{
padding: .2em 1.5em;  /* .2em 1em;  */
background: #ec8e4e;  /* orangé vif */ /* plus vif  #e77e41; */
letter-spacing: 1px;
}

#navFooter li a:hover, #navFooter li a:focus {background-color: #ddaa7b; /*  beige doré */
}

/*--------------------------------------------------------------------------------------------*/
/*  Les colonnes gauche et droite et le  contenu  texte affichage au centre     */ 
/*--------------------------------------------------------------------------------------------*/

#conteneur {
position: absolute;
width: 780px;
margin-top: 0;
}

/*Affichage du positionnement de la page consultée et retour précédent*/
#fildariane {
float: right;
clear: right; 
margin: 0;
display: inline;
font-size: 1.1em;
color: #ddaa7b; /*  beige doré */
}

#contenu {
background: transparent url(bg_contenu.jpg);
margin-top: 40px;
margin-left: 203px;
margin-right: 0px;
padding: 10px;
font-size: 1.2em;
}
#contenu ul.centre {
text-align: left;
margin-left: 2em;
list-style-type: disc;
}
#contenu ul li { 
list-style-type: disc; 
list-style-position: outside; 
}
#contenu li{
margin-bottom: 5px;
line-height: 19px;
}
#contenu ol li { 
list-style-type: decimal; 
list-style-position: inside;
}
#contenu dt { 
margin-bottom: 5px;
line-height: 19px; 
}
#contenu dd { 
list-style-position: outside; 
text-align: justify;
margin-bottom: 5px;
line-height: 19px;
}
/* images directes sans paragragraphe flottent à droite , laissent le texte défiler  sur  leurgauche */
#contenu img {
float: right;
margin:  0.5em;
display: inline;
border: none;
}
#contenu p img {
float: none;
margin: 0 1em .5em  0;
display: inline;
border: none;
}
/* pour images dans un  paragragraphe  à gauche du texte */
#contenu p.gauche img{
float: left;
margin:  0.5em 3em 0.5em 0.5em;
display: inline;
border: none;
}
/* positionnement spécifique à la age liens */
#contenu p.boutonsPart img{
float: none;
margin: 0;
display: inline;
clear:both;
}
/* image  au bas du contenu dans un  paragragraphe s'aligne sur la ligne, ne laisse pas de texte défiler  */
p.bas img{
float: none;
margin: 0;
width: 100%;
display: inline;
border: none;
}

/*
*affichage de contenu sans image en background  page contact et newsletter
*/
#contenu2{
margin-top: 20px;
margin-left: 200px;
margin-right: 0px;
padding: 10px;
font-size: 1.2em;
}
#contenu2 ul li { 
list-style-type: disc; 
list-style-position: outside; 
}
#contenu2 li{
margin-bottom: 5px;
line-height: 19px;
}
#contenu2 ol li { 
list-style-type: decimal; 
list-style-position: inside;
}
#contenu2 dt { 
margin-bottom: 5px;
line-height: 19px; 
}
#contenu2 dd { 
list-style-position: outside; 
text-align: justify;
margin-bottom: 5px;
line-height: 19px;
}
/* images directes sans paragragraphe laissent le texte défiler à gauche */
#contenu2 img {
float: right;
margin:  1em;
display: inline;
border: none;
}
/* images dans un  paragragraphe s'alignent sur une ligne, ne laissent pas de texte défiler à gauche */
#contenu2 p img {
float: none;
margin: 0 1em .5em  0;
display: inline;
border: none;
}

/* Bloc d'affichage  par ul li centré à droite de l'image - pas d'image  ou uatre ul supérieure à 200px de large*/
#blocUlDr{ /*le bloc de listes */
display: block;
float:left;
margin: 0 0 0 30px;
padding: 0;
width: 300px;
list-style-type: none;
}
#blocUlDr li { /* tous les items de  la liste */
display: block;
text-align: left;
line-height: 1.25em;
margin-bottom: -1px;
width: 300px;
font-style: italic;
list-style-type: none;
}

/* --- preambule, bloc spécifique avant contenu --- */
#preambule {
margin-left: 1em;
margin-right: 1em; 
}
#preambule p{
font-style: italic;
font-weight: bold;
text-align: center;
}
/* --- preambule, bloc spécifique entouré --- */
#encadre {
padding: 0.3em; 
border-style: double;
border-color: #7f5ba3;
}
/*contenu  demandant plus d'espace, autre positionnement sans les colonnes latérales*/
#gdcontenu {
margin-left: 30px;
margin-right: 30px;
padding: 10px;
font-size: 1.2em;
max-width: 900px;   
}
#gdcontenu ul li { list-style-type: disc; list-style-position: outside;}
#gdcontenu ol li { list-style-type: decimal; list-style-position: inside;}
#gdcontenu dt { 
font-size: 90%;
font-weight: bold;
padding-top: 2ex;
}
#gdcontenu  dd { 
list-style-position: outside; 
text-align: justify;
padding-left: 2ex;
font-size: 1.1em;
}
#gdcontenu img {
float: left;
margin: 0 1em .5em 0;
display: inline;
}
#gdcontenu * img {
float: none;
margin: 0;
}

 /* style spécifique  affichage des news  en php*/
#news { 
margin-top: 0;
margin-left: 203px;
margin-right: 0px;
padding: 10px;
font-size: 1.2em;
}  

.news .news_date  {
float: left;
clear: both; 
width: 5em; 
text-align: right;
font-size: 1.2em;
color: #b33b1f; /*rouge  */
}
.news .news_texte {
float: left;
clear: both; 
padding: .5em;
text-align: justify;
font-size: 1em;
}
p.news_old {
clear: both;
float: right;
margin-top: 0.5em;
margin-right: 3em;
}
.news + *    { clear: both; }
#news ul li { 
list-style-type: disc; 
list-style-position: outside; 
}
#news li{
margin-bottom: 5px;
line-height: 19px;
}
/*-----------------------------------------------------------------*/
/*             Les blocs des colonnes gauche et droite   */
/*-----------------------------------------------------------------*/

/*
*colonne gauche 
*/
/*  Menulist  liste des  sous rubriques  de chaque rubriques*/

#gauche {
position: absolute;
top: 40px;
left: 3px;
width: 190px;
padding: 5px 0 5px 0; 
background-color: #9d632c; /* marron   */     
}
#gauche h4 {
width: 180px;
margin: 0;
padding: 2px;
background: #b33c20; /* oranger rouge */
border: 2px ridge #b33c20; /* oranger rouge */
text-align: center;
font-size: 12pt;
font-style: italic;
color: #de8b7a; /* texte clair */
clear:both;
}
#gauche img {
float: left;
clear: left;
display: inline;
margin-top: 5px;
margin-left: 5px;
}
#rubriques{ /* toutes les listes */
padding: 0;
margin: 0;
list-style-type: none;
width: 190px;	    
text-align: left;
font-size: 1.1em;
}
#rubriques  ul { /* toutes les listes */
padding: 0;
margin-top: 5px;
list-style-type: none;
width: 190px;
border-top: 1px solid #000;  
border-bottom: 1px solid #000; 	    
text-align: left;
background-color: #ddaa7b; /* beige  doré*/
}
#rubriques li { /* tous les items de liste */
position: relative;
float: left;
margin-top: 5px;
border-top: 1px solid #000;  
border-bottom: 1px solid #000;
line-height: 1.25em;
margin-bottom: -1px;
width: 190px;
background-color: #ddaa7b; /* beige doré */
}
#rubriques li ul { /* listes de deuxième niveau */
position: absolute;
left: -999em;
margin-left: 190px;
margin-top: -2.50em;
border-left: 4px solid #7a4b1d;
background-color: #9d632c; /* marron   */ 
}
#rubriques li ul ul { /* listes de troisième niveau et plus */
	left: -999em;
}
#rubriques li a {
width: 185px;
w\idth : 185px;
display: block;
padding: 4px;	
font-size: 9pt;
font-weight: bold;
}
	

#rubriques li:hover ul ul, #rubriques li:hover ul ul ul, #rubriques li.sfhover ul ul, #rubriques li.sfhover ul ul ul {
left: -999em;
}
#rubriques li:hover ul, #rubriquesli li:hover ul, #rubriques li li li:hover ul, #rubriques li.sfhover ul, #rubriques li li.sfhover ul, #rubriques li li li.sfhover ul { /* listes imbriquées sous les items de listes survolés */
left: auto;
}
/* couleurs spécifiques pour les liens du menu de gauche */
#rubriques li a:hover, #rubriques li a:focus, #rubriques li a:active { 
background-color: #9d632c; /* marron   */ 
color: #b3725b;  /*  marron  brique   clair  un peu plus foncé que sur les autres liens à cause du fond     */ 
}
#rubriques li a:visited { color: #7a5352; } /*   marron  plus   terne  un peu plus foncé que sur les autres liens à cause du fond */

#rubriques li.rss img{
margin:0;
padding: 0 0.5em 0 0;
}
/* Newsletter positionnement avec Javascript  activé*/
/* contenu de la newsletter voir aussi le fichier external.htm et le fichier datamain.js pour l'affichage script*/
#datamain {
float: right;
margin-top: 10px;
margin-left: 10px;
width:200px;
height:100px;
overflow: hidden;
}
#datacontainer{
position:absolute;
left:1px;
top: 100px;
width:100%;
background: #efa065; /* orangé pâle */ 
}
#datacontainer a { 
text-align: center; 
}
#datacontainer p {	
margin-bottom: 10px;
line-height: 16px;
text-align: center;
font-family: Verdana, serif;
font-style: italic; 
}
#datacontainer em { 
text-align: center;
font-size: 1.2em;
}

/* ---  affichage  du contenu de la newsletter sans javascript ---*/
#news2  {
float: right;
clear:right;
width: 300px;	
margin-top: 2px;
margin-right: 1px;
margin-left: 10px;
padding: 3px;
background: #efa065; /* orangé pâle */ 
font-size: 0.9em;
}

#news2 a {
text-align: center;
}
#news2 p {
margin-bottom: 10px;
line-height: 16px;
text-align: center;
font-family: Verdana;
font-style: italic; 
}
#news2 em { 
text-align: center;
font-size: 1em;
}
/* ---  affichage du formulaire de d'inscription à la newsletter  ---  */
#inscription{ 
margin-left: 3em;
margin-right: 3em;
margin-bottom: 2em;
padding: 1em;
}
#inscription p input {
border:2px inset #c08566;   /*  brique pâle */ 
background: #ddaa7b;  /* #ddaa7b;  beige doré   ou  #cba591;  vieux rose     */
}

/* ---  affichage du formulaire de contact  ---  */
#mail { 
margin-top: 0;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 2em;
padding: 0;
}
#boite{
border: 1px solid;
border-color: #c08566;
background-color: #ddaa7b;
padding-left: 1em;
}
#mail p input, #mail p textarea {
border:2px inset #c08566;   /*  brique pâle */ 
background: #ddaa7b;  /* #ddaa7b;  beige doré   ou  #cba591;  vieux rose     */
}
#form  p{
font-size: 1em;
}
/* --- Pied de page --- */

#footer {
clear:both;
margin-top: 20px;
width: 100%;
/*width: 100%;*/
height: 45px;
font-size: 0.8em;
}
#footer  p{
text-align: right;
line-height: 8px;
margin-bottom: 5px;
margin-right: 0;
}
#footer  a{
font-size: 1em;
}
/* 
* Pour l'impression des contenus
*/

@media print { /* on n'imprime pas les menus, images etc. */
#nav, .spacer, .space, .retour, #header, #navcontainer, #gauche, #rubriques, #fildariane, #navFooter, #footer { display: none;}

#preambule, #contenu, #gdcontenu  {
float: none;
margin: 0;
}
/* pas de fond */
html, body {
color: #000;
background: #fff;
}
a {
color: blue;
}

a:after { 
content: " [" attr(href) "]";
}

h1, h2, h3, h4, h5, h6{
page-break-after: avoid;
}
p {
width: 90%;
}
}