/*-----------------------------------------------------------------*/
/* 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 2007 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;
}
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 {
font-weight: bold;
font-style: italic;
color: #b42314; /*rouge profond */
}
/*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: 1em;
}
.retour a:visited { color: #6b2624; /* marron brique */}
/*--------------------------------*/
/*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: 1em;
}
#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 */
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('http://www.massages-gays.com/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 au survol */
background-image: url('http://www.massages-gays.com/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 */
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: 1em;
color: #ddaa7b; /* beige doré */
}
#contenu {
background: transparent url('http://www.massages-gays.com/bg_contenu.jpg');
margin-top: 40px;
margin-left: 203px;
margin-right: 0px;
padding: 10px;
font-size: 1.2em;
}
/*-----------------------------------------------------------------*/
/* 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é*/
/* --- Pied de page --- */
#footer {
clear:both;
margin-top: 20px;
width: 100%;
/*width: 100%;*/
height: 45px;
font-size: 0.9em;
}
#footer p{
text-align: right;
line-height: 8px;
margin-bottom: 5px;
margin-right: 0;
}
#footer a{
font-size: 0.9em;
}
/*
* 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%;
}
}