/*-----------------------------------------------------------------*/
/* css 2 pour Le Drapeau Noir http://www.drapeaunoir.org
* 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 2009 july 30
*/
body{
margin: 0;
padding: 0;
font-size:62.5%
}
body, html {
width: 99%;
min-width: 780px;
max-width: 1100px;
margin: 0 auto;
position: relative;
top: 0;
color: #30261d; /* */
font-family: georgia;
background-color: #47251e; /* rouge fond */ /* ou #30261d; */
}
/*taille et couleurs de textes, titres, éléments spéciaux*/
p {
line-height: 19px;
margin-bottom: 8px;
text-align: justify;
font-size: 1.2em;
}
small {
line-height: 17px;
margin-bottom: 3px;
text-align: left;
font-size: 1em;
}
/* texte en gras bordé de jaune */
p.centre {
width:100%;
font-size: 1.2em;
margin-bottom: 8px;
line-height: 19px;
text-align: center;
font-weight: bold;
color:#a8917e;
background: #47251e; /* ou #30261d; */
border-top: 1px solid #802525;
border-bottom: 1px solid #802525;
}
h1 {
font-size: 2.3em;
text-align: center;
margin-top: 2px;
font-weight:bold;
letter-spacing: 1px;
}
h1:first-letter {
font-size: 120%;
}
h2 {
font-size: 1.85em;
text-align: center;
letter-spacing: 1px;
margin-top: 2px;
font-weight:bold;
}
h2:first-letter {
font-size: 120%;
}
h3 {
margin-top: 8px;
font-size: 1.60em;
letter-spacing: 1px;
font-weight:bold;
font-style: italic;
color: #802525; /*ou #52221b; */
}
h3:first-letter {
font-size: 120%;
}
h4 {
font-size: 1.40em;
margin-top: 8px;
font-weight:bold;
color: #802525; /*ou #52221b; */
}
h4:first-letter {
font-size: 120%;
}
h5 { font-size: 1.20em; }
h6 { font-size: 1.10em; }
em {
color: #6e4137; /* rouge foncé */
font-weight: bold;
}
/* citations*/
blockquote {
text-align: justify;
font-style: italic;
}
q{
line-height: 19px;
margin-bottom: 8px;
text-align: justify;
font-size: 1.2em;
font-style: italic;
}
/*affichage des liens internes et externes*/
a {
font-size: 1.2em;
font-weight: bold;
text-decoration: none;
Color: #938271; /*ou #907a78; */
}
a.external {
font-style: italic;
font-weight: bold;
text-decoration: underline;
color: #938271; /*ou #907a78; */
}
a:hover, a:active , a:focus, a.external:hover, a.external:focus, a.external:active {
font-weight: bold;
text-decoration: underline;
color: #949d9e; /* ou: #535f60; plus clair*/
}
a img { border: none; }
img { border: none; }
.accesskey { text-decoration: underline; }
/*pause pour lecteurs vocaux*/
#nav span, .contenu span, .menutop span, .retour span, .rubriques span, #boutons span, .divers span, .contact span , #footer span{ display:none; }
.spacer {
clear: both;
visibility: hidden;
height: 1px;
margin:0;
}
/*Trait de séparation */
.space {
clear: both;
margin-bottom: 8px;
height: 1px;
border-bottom: solid 1px darkred; /* maroon; darkred; */
}
.retour {
clear:both;
height: 25px;
padding: 0.3em;
text-align: right;
margin-right: 160px;
font-size: 0.9em;}
/* 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;
}
/* liens de navigations centrés en haut */
#nav {
text-align: center;
width: 100%;
z-index: 10;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
font-size: 0.9em;
}
#nav, #nav * {color: #7e5a56; } /* effacé */
/* image degradée (fond) */
#fond {
margin-top: 0;
height: 20px;
/*width: 100%;*/
background-image: url('img/bg_del.png');
background-repeat: repeat-x;
background-position: left bottom;
}
/* différents blocs */
/*affichage du logo centré en rollover */
#head {
padding: .2em;
/*vidth: 100%;*/
clear: both;
}
#head {
background-color: #802424; /* rouge */
height: 125px;
}
#bannniere {
position: absolute;
left: 50%;
padding: 0;
display: inline;
width: 468px;
height: 60px;
margin-left: -234px;
margin-top: 0;
background: #fff url('img/ban.jpg') no-repeat;
}
#centrage {
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px;
margin-top: 0px;
height: 124px;
}
/* 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 */
display: block; /* la balise a doit être en bloc */
width: 780px; /* largeur de l'image réactive */
height: 124px; /* hauteur de l'image réactive */
margin-left: -390px;
margin-top: -62px;
background-image: url(img/head1.png); /* source de l'image de départ */
background-repeat: no-repeat;
}
p a.image:hover { /* définition de la classe "image" de la balise au survol */
background-image: url(img/head2.png); /* source de l'image d'arrivée */
}
/*liens vers les forums et le moteur de recherche */
#headRight {
float: right;
clear: right;
margin-top: .1em;
padding: 0;
width: 100%;
clear: both;
}
#menutop{
float: left;
clear: left;
margin-left: 2em;
margin-top: 1em;
display:inline;
padding:0;
width: auto;
font-size: 1.2em;
}
#menutop li {
display: inline;
float: left;
padding: 0;
list-style-type: none;
}
/* moteurs de recherche */
#recherche {
float: right;
clear: right;
margin-top: 1em;
display: inline;
width: 150px;
}
#recherche form{
margin:0;
padding:0;
}
#recherche p{
width: 150px;
w\idth : 150px;
display: block;
padding: 0;
margin: 0;
text-align: left;
}
#recherche input {
background: #a8917e;
display: inline;
}
/* moteur nouvelle recherche sur la page de résultats du moteur*/
#recherche2 {
float: left;
clear:left;
margin-left: 1em;
}
#recherche2 form{
margin:0;
padding-top: 5px;
}
#recherche2 p{
width: 350px;
w\idth : 350px;
padding: 0;
margin: 0;
display: inline;
text-align: left;
}
#recherche2 p input {
margin-top: 5px;
background: #a8917e;
display: inline;
}
/* affichage du contenu au centre*/
#conteneur {
position: absolute;
width: 100%;
margin-top: 0;
}
#contenu {
background-color: #c2ad98; /* ou plus clair #c4af9a; ou foncé : #8f7d6f; */
border-bottom: 3px solid #802525; /* rouge */
border-right: 3px solid #802525; /* rouge */
}
#contenu {
margin-left: 170px;
margin-right: 158px;
margin-top: 0;
padding: 1em;
}
#contenu img {
float: left;
margin: 0 1em .5em 0;
display: inline;
}
#contenu * img {
float: none;
margin: 0;
}
.contenu ul li {
list-style-type: disc;
list-style-position: outside;
font-size: 1.2em;
}
.contenu {
list-style-type: disc;
list-style-position: outside;
}
.contenu ol li {
list-style-type: decimal;
list-style-position: inside;}
.contenu dt {
padding-top: 1ex;
font-size: 1.2em; }
.contenu dd {
list-style-position: outside;
text-align: justify;
padding-top: 1ex;
font-size: 1.2em;
}
#contenu fieldset{
margin-right: 5em;
border: solid 1px #30261d; /* comme le fond de page */
}
#contenu fieldset p {
font-size: 1.4em;
text-align: left;
}
.poeme p {
Font-size: 1.2em;
text-align: center;
color: #30261d; /* couleur du texte normal*/
}
.poeme p:first-letter {
font-size: 120%;
font-weight: bold;
color: #733237; /*rouge très foncé */
}
.poeme h3, .poeme h4 {
text-align: center;
}
/*
* les blocs des colonnes gauche et droite
*/
/*colone gauche*/
/*listes des rubriques menu déroulant inspiré de: http://pompage.net/pompe/deroulants/*/
#gauche { /* toutes les listes */
position: absolute;
top: 0;
left: 0;
width: 155px;
height: 350px;
background-color: #802525; /* ou #8d1d1d; couleur de fond rouge*/
font-size: 1.3em;
}
html>body #gauche {
height: auto;
min-height: 350px;
}
#gauche img {
padding: 1ex 0 0 0;
margin: 0;
}
#rubriques, #rubriques ul { /* toutes les listes */
padding: 0;
margin: 0;
list-style-type: none;
width: 150px;
background-color: #802525; /* ou #8d1d1d; couleur de fond rouge*/
}
#rubriques li { /* tous les items de liste */
position: relative;
float: left;
line-height: 1.25em;
margin-bottom: -1px;
width: 150px;
}
#rubriques li ul { /* listes de deuxième niveau */
position: absolute;
left: -999em;
margin-left: 145px;
margin-top: -1.40em;
background-color: #47251e; /* ou #30261d; */
border-top: 4px solid #802525;
border-right: 4px solid #a8917e;
border-bottom: 4px solid #802525;
border-left: 4px solid #a8917e;
}
#rubriques li ul ul { /* listes de troisième niveau et plus */
left: -999em;
}
#rubriques li a {
width: 150px;
w\idth : 150px;
display: block;
font-family: verdana, sans-serif;
font-size: 0.9em;
font-weight: bold;
padding: 0.2em;
}
/* padding: 0 0.2em; */
#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;
}
/* Divers: Autres pages et liens partenaires ou sponsors*/
#divers ul {
/*affichage normal des liens selon style propre à a.link*/
padding: 0;
margin: 0;
list-style-type: none;
width: 150px;
background-color: #802525; /* ou #8d1d1d; couleur de fond rouge*/
}
#divers li { /* tous les items de liste */
position: relative;
float: left;
line-height: 1.25em;
margin-bottom: -1px;
width: 150px;
}
#divers li a {
width: 150px;
w\idth : 150px;
display: block;
font-family: verdana, sans-serif;
font-size: 0.9em;
font-weight: bold;
padding: 0 0.2em;
}
/*affichage du lien ou de l'image clicable vers le formulaire de cntact*/
#contact ul{
padding: 0;
margin: 0;
background-color: #802525; /* ou #8d1d1d; couleur de fond rouge*/
}
.contact li {
padding:0 0.5em;
margin: 0;
}
/*Affichage des boutons et liens */
#boutons p {
float:left;
Display:inline;
margin-top: 5px;
margin-left: 5px;
padding: 1px; /*0.2em; */
font-size: 0.7em;
}
#boutons img {
float: left;
clear: left;
margin: 0;
padding: 1ex 0 0 1ex;
display:inline;
}
/*colone droite */
#droite {
position: absolute;
top: 0;
right: 0;
width: 150px;
background-color: #a8917e;
font-size: 1.2em;
}
/*citations*/
#entete {
margin-right: 3px;
padding: 2px;
}
#entete p {
font: italic 10pt/22pt georgia;
text-align:center;
color: #891919; /*ou: #802525; comme le fond rubrique ou #8d1d1d; autre rouge prononcé */
font-size: 1em;
}
/* --- affichage du formulaire de contact --- */
#mail {
margin-left: 1em;
margin-right: 1em;
margin-bottom: 2em;
padding: 0.5em;
color: #30261d;
background-color: #c2ad98;
}
#mail p input,#mail p textarea {
border:2px inset #c2ad98;
background: #a8917e;
}
/* Pied de page*/
#pied {
clear:both;
height: 45px;
margin: 5px 0;
text-align: center;
width: 100%;
/*width: 100%;*/
font-size: 1.1em;
}
#pied p{
font-size: 1em;
text-align: center;
margin-bottom: 10px;
line-height: 12px;
width: 100%;
/*width: 100%;*/
color: #60574d;
}
#pied a{
font-size: 0.9em;
}
/*
* Pour l'impression des contenus
*/
@media print { /* on n'imprime pas les menus, images etc. */
#logo, #fond, #rubriques, #divers, #head, #menutop, #contact, #entete, #pied { display: none;}
#contenu {
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{
page-break-after: avoid;
}
p {
width: 90%;
}
}