/*-----------------------------------------------------------------*/
/*SOH   css   style foncé pour  Spirit of Hack :  http://www.spiritofhack.net/
* By Malicia/
* 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 march 24/
*/

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

body, html {
margin: 0;
padding: 0;
}
body{
text-align: center; 
font-size: 62.4%;
background: #33484d; /* bleuté */
background-image: url(../img/fond_top.jpg);
background-repeat: repeat-x;
color: #faf0e6;  /*  blanc linen    */
font-family: verdana, "Bitstream Vera Sans", sans-serif;     
}

#gdconteneur {
text-align: left;
width: 90%;
min-width: 780px;
max-width: 1280px;
margin: 0 auto;
position: relative;
top: -8px;
background-color: #161719; /* noir  presque*/
}

p {
line-height: 19px;
margin-bottom: 8px;
text-align: justify;
font-size: 1em;
}
 /* affichage nom de l'auteur sous le titre*/
p.auteurTop { 
line-height: 10px;
margin-bottom: 0; 
color: #7a7a7a;  /*marron gris  */  
font-size: 1.1em;
font-style: italic;
font-weight : bold;
letter-spacing: 1px;
}
 /* affichage nom de l'auteur en bas de page*/
p.auteur { 
clear:both; 
text-align: right; 
margin-right: 2em;
line-height: 10px;
margin-bottom: 2px; 
color: #7a7a7a;  /*marron gris  */
font-size: 1.2em;
font-style: italic;
font-weight : bold;
letter-spacing: 1px;
}
p.mailAuteur { 
clear:both; 
text-align: right; 
margin-right: 2em;
font-size: 1em;
line-height: 10px;
margin-bottom: 0;
}

 p.small { 
font-size: 0.9em;
}
p.milieu { 
line-height: 12px;
margin-bottom: 5px;
text-align: center; 
color: #000; /* noir  */
font-size: 1.2em;
}
p.ital{ font-style: italic;}

h1, h2, h3, h4, h5, h6 {padding: 0;}
h1 {
margin-top: 3px;
font-size: 1.60em;
text-align: center;
letter-spacing: 1px; 
}
h2 {
margin-top: 3px;
font-size: 1.30em;
text-align: center;
letter-spacing: 1px;  
clear:both;
}
h2.suite {
margin-top: 3px;
font-size: 1.20em;
text-align: center;
letter-spacing: 0; 
}
h3 {
margin-top: 10px;
font-size: 1.25em;
text-align: left; 
color: #bcc4d9; /*gris  assez clair */
}
h3.centre {
font-size: 1.25em;
text-align: center;
}
h4 {
margin-top: 10px;
font-size: 1.10em;
text-align: left;
color: #bcc4d9; /*gris  assez clair */ 
}
h5 {
margin-top: 5px;
font-size: 1.10em;
text-align: left;
font-weight: bold; 
}
h6 {
margin-top: 5px; 
font-size: 0.9em;
text-align: left;
font-weight: normal; 
}
em {
font-size: 1em;
font-style: italic;
font-weight: bold;
}

/*affichage des liens internes et externes*/
a{ 
font-weight: bold;
text-decoration: none;
font-size: 0.9em;
}
a, a:link{
color: #0066cc; /*bleu */
}
a.external {	
font-style: italic; 	
}
a:active, a:focus, a:hover, a.external:hover,  a.external:focus, a.external:active  {
text-decoration: underline; 
color: #5b81a7;  /*bleu  atténué   */
} 

#contenu a:visited, #contenu a.external:visited , #menuListD a:visited, #menuListD a.external:visited ,
#menuListG a:visited, #menuListG a.external:visited , #navcontainer a:visited, 
#footer a:visited, #footer a.external:visited, #news a:visited, #datacontainer a:visited {
color:  #5b81a7;  /*bleu  atténué   */  
}
#contenu a {font-size: 1em;}

span a {
font-weight: bold;
text-decoration: underline;
font-family: georgia; 
}
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: #fff 1px dotted; 
} 
/* affiche un point d'interrogation  le sigle sera lu en épelant*/

acronym{
cursor:help;
border-bottom: #fff 1px dotted;
speak:spell-out;
}

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

code{
background: #5a5151; 
font-size: 1.2em;
}
/* Sert à entourer et afficher du code sans déformer la page*/
pre {
	border: 1px solid silver; 
	padding: 1em;
	margin: 1em;
	font-size: 1.1em;
	width: 85%;
	overflow: auto;
	-moz-border-radius: 6px;
}
pre.code {
	border: 1px solid silver; 
	padding: 1em;
	margin: 1em;
	font-size: 1.2em;
	width: 85%;
	background: #5a5151;
	overflow: auto;
	-moz-border-radius:6px;
}
/*bloc texte encadré */
#blocText{
margin: 0.5em 0;
padding: 0.5em;
width: 85%;
overflow: auto;
border: #bcc4d9 1px dotted; /*gris  assez clair */
}
/*pause pour lecteurs vocaux*/
#gdconteneur span, #nav span, #styleswitcher span, #header span, p a.image span, #navcontainer span, #fildariane span, 
.retour span, #gdcontenu span, #contenu span, #gauche span, #menuListG span, 
 .news span,  #footer span { display:none; }	

hr.spacer {
clear: both;
visibility: hidden;
height: 1px;
margin: 1px;
padding:0;
}
/*Trait de séparation   */
.space {
clear: both;
margin-bottom: 8px;
height: 1px;   
border-bottom: solid 1px black; 
}
/*navigation située en bas de page : remonter, accueil, page précédente   */
.retour { 
clear:both; 
text-align: right; 
margin-right: 70px;
font-size: 1.1em;
color: #594d4d; /*gris marron  spécial trait de séparation */
}
.retour a{
color: #0066cc; /*bleu */
}
img { border: none; }
a img { border: none; }

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

/*  Header */ 
#header{
margin: 0;
width: 100%;
/*width: 100%;*/		
padding: 0;
height: 145px;
background-color: #161719; /* noir  presque */
background-image: url(../img/bg_header.jpg);
background-repeat: repeat-x;
}

/*  liens de navigations  en haut,  tabulation directe  */
#nav {
position: absolute;
text-align: left;
top: 2px;
left:0.5em;
margin: 0;
padding: 0;
font-size: 1.15em;
color: #594d4d; /*gris marron  spécial trait de séparation */
}

/* Changement de feuille de style couleur  */
#styleswitcher {
position: absolute;
text-align: left;
top: 30px;
left:0.5em;
margin: 0;
padding: 0;
font-size: 1.20em;
color: #594d4d; /*gris marron */
}

/*  moteur de recherche  interne */
#recherche {
position: absolute;
text-align: left;
width: 150px;
w\idth : 150px;	
top: 70px;
left:0.3em;
font-size: 1em;
}
#recherche form{
float: left;
margin:0;
padding-top: 2px;
}
#recherche p{
margin-top: 3px;
float: left;			
padding: 0;
text-align: left;
font-size: 0.9em;
}
#recherche  input {
margin: 0;
padding: 1px;
border: 2px inset  #d2d4d8; /*gris  */
background: #d2d4d8; /*gris  */	  	
display: inline;
}

/*affichage du logo  */
p a.image {  
float: right;
clear: both;
margin: 0;
padding: 0;
/* définition de la classe "image" de la balise <a> */
display: block; /* la balise a doit être en bloc */
width: 645px; /* largeur de l'image réactive */
height: 102px; /* hauteur de l'image réactive */
background-image: url(../img/header.jpg); /* source de l'image de départ */
background-repeat: no-repeat;
}	 

/*liens   du menu principal du top  en images*/
#navcontainer {
float: right;
clear: both;
margin-top: .5em;
margin-right: 0.5em;
padding: 0;
}
#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:.1em 1.1em; 
letter-spacing: 1px;
}

/* espace image sous le header */
#centreWave a.wave{
margin: 0 auto;
background-image: url(../img/wave.jpg); 
background-repeat: no-repeat;
display: block;
text-align: center;
width: 428px;
height: 16px;
clear: both;
}

/*  les blocs  sous l'espace image. Conteneur englobe la colonne gauche le contenu et le footer*/
#conteneur {
position: absolute;
width: 100%;
margin: 0;	
padding: 0;
background-color: #000; /* noir */
background-image: url(../img/bg_conteneur.jpg); 
background-repeat: repeat-x;
}

/*Positionnement de la page consultée dans l'arborescence du site */	
#fildariane {
float: left;
clear: both;
text-align: left;
padding: 0; 
margin: 0.5em;
display: inline;
width: 90%;
font-size: 1em;
}
#fildariane a{
font-size: 0.9em;
}
#fildariane em{
font-size: 1.1em;
}

/*--------------------------------------------------------------------------------------------*/
/*  Les colonnes gauche et droite et le  contenu  texte affichage au centre    
background: transparent url(img/bg_right.jpg) right repeat-y; */ 
/*--------------------------------------------------------------------------------------------*/

#contenu {
margin-top: 40px;
margin-left: 210px;
margin-right: 40px;
padding: 0.5em 1em;
font-size: 1.2em; 
min-height: 650px;
border-left: 2px solid #161719; /* noir  presque*/
border-right: 2px solid #161719; /* noir  presque*/
}

#contenuCentre{
Margin: 1em;
padding: 0.5em;
}
#contenuCentre h2, #contenuCentre h3, #contenuCentre h4, #contenuCentre p, #contenuCentre li{
text-align: center;
}
/* les listes */
.contenu ul, .contenu ol {
margin-left: 40px;
padding-left: 0;
}
.contenu ul li { 
list-style-image: url('../img/puce.jpg'); 
list-style-position: outside; 
font-size: 1em;
}
.contenu ol li { 
list-style-type: decimal; 
list-style-position: inside;
font-size: 1.1em;
}
.contenu dt { 
padding-top: 2ex; 
font-size: 1.2em; }
.contenu  dd { 
list-style-position: outside; 
text-align: justify;
padding-top: 1ex;
font-size: 1.1em; 
}
/* images directes sans paragragraphe laissent le texte défiler à gauche */
#contenu img {
float: left;
margin: 0.5em;
padding:0;
display: inline;
border: none;
}
/* images dans un  paragragraphe, ne laissent pas de texte défiler  */
#contenu p img {
float: none;
margin: 0 auto;
padding:0;
display: block;
border: none;
}
#contenu p.banSponsors img {
float: none;
margin: 0.5em 0;
border: none;
}

#contenu fieldset{
padding: 1em;
margin: 0.2em;
font-size: 1em;
width: 80%;
overflow: auto;
-moz-border-radius:6px;
border: 1px solid silver; 
}

/* moteur  nouvelle recherche sur la page de résultats du moteur*/
#recherche2 {
float: left;
clear:left;
margin-left: 1em;
width: 85%;		
}
#recherche2  form{
float: left;
margin:0;
padding-top: 5px;
}
#recherche2  p{	
margin-top: 5px;			
padding: 0;
text-align: left;
}
#recherche2  input {
margin: 0;
padding: 1px;
border:2px inset #4a3d3d;  /* noir violine */	
background: #a5b4bc;  /* bleu grisé moyen */	
display: inline;
}
 /* affichage par script moteur de news */
 
.news { 
clear: both;
margin: 0;
padding: 0.5em;
width: 98%;
/*width: 98% */ /* Pour Opera */
font-size: 1em; 
text-align: left;
}
.news .news_date  { 
float: left;
clear: both; 
width: 7em;
margin: 0; 
padding: 3px 10px;
text-align: left;
font-size: 1em;
color: #363d46; /* bleuté */
}
.news .news_texte { 
float: left;
clear: both; 
padding: .5em;
text-align: justify;
font-size: 1.1em;
}
p.news_old {
clear: both;
float: right;
margin-top: 0.3em;
margin-right: 3em;
font-size: 1em;
}
.news + *  { clear: both; }

/*-----------------------------------------------------------------*/
/* les blocs de la colonne gauche */
/*-----------------------------------------------------------------*/

/*liens  vers le menu principal colonne gauche*/
#gauche {
position: absolute;
top: 50px;
left:0;
padding: 0;
width: 205px;
height: 100px;
background-color: #161719; /* noir  presque*/

}
html>body #gauche {
height: auto;
min-height: 100px;
}

/*Menu liste des sous rubriques */
#menuListG {
float: left;
clear: left;
width: 205px;
margin: 0;
padding: 0;    
background-color: #161719; /* noir  presque*/	    
text-align: left;
font-size: 1.2em;    
}
#menuListG h2 {
margin: 2px 0 5px 0;
width: 205px;
padding: 0; 
text-align: center;
font-size: 1.20em;
letter-spacing: 1px;  
color: #f7f9f9; /*  blanc */ 
}
#menuListG h3 {
margin: 2px 0 2px 0;
width: 205px;
padding: 0 0 0 0.3em;
text-align: center;
font-size: 1em;
color: #a4c0d0;  /* bleu grisé clair */
}
#menuListG div {
float: left;
width: 205px;	
margin: 3px 0 0 0;
padding: 0;
background: #000;  /*  noir */ 
}
#menuListG div a {
width: 195px;	
font-size: 0.9em;	
display: block;
margin: 0;
text-align:left;
padding: 4px 0 4px 10px;
letter-spacing: 1px;	
}
#menuListG div a:hover {
background-color: #a4c0d0;  /* bleu grisé clair */
}
#menuListG a:active, #menuListG a:focus, #menuListG a:hover, 
#menuListG a.external:hover,  #menuListG a.external:focus, #menuListG a.external:active  {
text-decoration: none; 
color:  #5b81a7;  /*bleu  atténué   */
} 
/* Affichage des boutons publicitaires si on les place ici */
#gauche img{
float: left;  
margin: .3em 0 .3em 0.3em;
padding: 0;
display: inline;
}

/*fil rss */
#rss {
margin:  3px 0;
width: 160px;
padding: 0;  	    
text-align: center;
font-size: 1em;    
}
#rss  img{
margin:0;
padding: 0 0.5em;
}
#rss  div {
float: left;
width: 160px;	
margin: 3px 0 5px 5px;
padding: 0;
background: #3a1e64; /* bleu violet logo  */ 
}
#rss div a {
width: 160px;
padding-top: 2px;
padding-bottom: 4px;	
font-size: 0.9em;	
display: block;
text-align: center;	
}
#rss  div a:hover {
background-color: #a4c0d0;  /* bleu grisé clair */   
}
.rss a:active, .rss a:focus, .rss a:hover {
text-decoration: none;
}
/* ---  affichage du formulaire de contact  ---  */
#mail { 
margin-left: 1em;
margin-right: 1em;
margin-bottom: 2em;
padding: 1em;
}
#mail p input, #mail p textarea {
border:2px inset #333333;  /* marron  */ 
background: #727070;  /* grisé foncé  spécial champ de mail*/
color: #fff;
}


#loginbox { 
margin-left: 1em;
margin-right: 1em;
margin-bottom: 2em;
padding: 1em;
}
#loginbox p input, #loginbox p textarea {
border:2px inset #333333;  /* marron  */ 
background: #727070;  /* grisé foncé  spécial champ de mail*/
color: #fff;
}

/* --- Pied de page --- */
#footer {
clear:both;
width: 100%;
/*width: 100%;*/
height: 45px;
margin: 5px;
font-size: 1em;
}
#footer  p{
text-align: center;
line-height: 5px;
padding-top: 5px;
color: #99a2a7; /*gris  spécial trait de séparation */
}

/* 
* Pour l'impression des contenus
*/

@media print { /* on n'imprime pas les menus, images, formulaires  etc. */
#nav, .spacer, .space, .retour, #header, p a.image, #navcontainer, #styleswitcher,  #fildariane, #recherche, 
#menuListG, #gauche, #mail, #footer { display: none;}

#contenu {
float: none;
margin: 0;
}
/* pas de fond */
html, body {
color: #000;
background: #fff;
}
a {
color: blue;
}
/* on imprime l'url des liens */
a:after { 
content: " [" attr(href) "]";
}

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