* {
font-size: 15px;
}
#menu {
padding-left:16px;
background: black url('images/menu.png');
list-style: none;/*vire les points de liste*/
margin: 0;
height: 29px;/*hauteur de l'image*/
border:none;
}
#finmenu {
float:right;
background: url('images/menu-droite.png');
list-style: none;/*vire les points de liste*/
margin: 0;
padding-left:16px;
height: 29px;/*hauteur de l'image*/
}
#menu li {
float: left; /*chak elem juste a droite du precedent*/
margin: 0 2px; /* Espacer horizontalement chaque bouton du menu */
}
#menu li>a {
display:block; /* Afin de pouvoir assigner une hauteur au lien */
text-decoration: none;
color:black;
background: url('images/menu-lien.png');
background-repeat:no-repeat;
cursor: pointer;
float:left;
}
#menu li>a>span {
display: block;
height: 29px;
line-height: 29px;
padding: 0 10px;
background: url('images/menu-lien-droite.png') 100% 0 no-repeat;
float:left;
}
#menu a:hover, /* Au survol de la souris */
#menu a:focus, /* focus, sous Firefox et autres navigateurs */
#menu a:active /* Lorsque le lien a le focus, sous Internet Explorer */
{
color: white;
background-color: aqua;
background-position: 0 -29px;
}
#menu a:hover span, /* Au survol de la souris */
#menu a:focus span, /* Lorsque le lien a le focus, sous Firefox */
#menu a:active span /* Lorsque le lien a le focus, sous Internet Explorer */
{
background-position: 100% -29px;
}
#menu .actuel { /* Indique au visiteur que ce lien est la page affichée */
font-weight: bold; /* Gras... */
text-decoration: underline; /* ... et souligné */
}
a[class = "bouton"]{
display:block;
background: url('images/bouton-gauche.jpg');
float: left;
margin: 7px;
text-decoration:none;
border:none;
cursor: pointer; /*Curseur en forme de main, pour résoudre un bug sous IE*/
}
.bouton span {
display:block;
background: url('images/bouton-droite.jpg') 100% 0 no-repeat;
height: 24px; /* Hauteur des images*/
line-height: 24px;
padding: 0 10px;
color:white;
}
a[class = "bouton"]:hover,
a[class = "bouton"]:focus,
a[class = "bouton"]:active {
background-color: yellow;
background-position: 0 -24px ; /* On remonte l'image de moitié*/
}
.bouton:hover span,
.bouton:focus span,
.bouton:active span {
background-position: 100% -24px;/*tjr aligné a droite*/
}
/*------------------------------------------------------------------*/
#page {
background: white url('images/sous-menu.png') repeat-y;
/* Technique des colonnes factices : le menu de gauche a un fond sur toute la hauteur de la page */
border: 1px solid black;
height:100%;
}
#sousmenu {
background: black url('images/sous-menu.png') repeat-y;
/* Fond noir si images non chargées, mais image de fond de #page */
float: left; /* Colonne de gauche sur la page */
width: 198px; /* Largeur de l'image sous-menu-lien.png */
list-style: none;
/* On ne veut plus que les lignes de la liste aient de puces */
margin: 0;
/* Aucune marge au dessus et en dessous de la liste (les listes étant normalement utilisées entre des paragraphes) */
padding: 0;
/* Aucune indentation des éléments contenus dans la liste (généralement, les listes ont un padding à gauche) */
}
#contenu {
background: white;
margin: 10px 2px 10px 209px;
/*margin:5px 2px 5px 2px;*/
/*float:right;*/
}
#pied-gauche{
clear: both;
float:left;
width:100%;
/* Si le menu de gauche est plus haut que le contenu de la page, s'assurer de positionner le pied juste en dessous du menu */
background: #9f9f9f url('images/pied-gauche.png');
/*border-top: 1px solid black; /* Séparer le pied du contenu de la page */
font-size: 15px;
font-weight:bold;
/* Un peu moins que les 19 pixels de line-height */
/*padding-top: 9px;*/
padding-right:-5px;
/* = 8 (la hauteur de la partie hachurée noir/orange) + 1 (bordure noire) */
/*height: 71px;*/
height:80px;
/* = 47 (hauteur de pied.png)-9 (le padding-top défini ci-dessus) */
/*line-height: 19px; */
/* = 38 (hauteur définie ci-dessus)/2 */
/*(on veut 2lignes de texte dans le pied de page) */
text-align: center; /* Center le texte horizontalement sur le pied de page */
color: white; /* Texte gris foncé, se fondant avec le fond gris clair : moins lisible, car ce paragraphe est moins important */
}
#pied-gauche > #partenaires{
margin-top:5px;
}
#pied-droit {
float:right;
background: #9f9f9f url('images/pied-droit.png');
padding-left:20px;
height: 80px;
/*margin-top:-28px;*/
margin-left:-20px;
/* = 47 (hauteur de pied.png)-9 (le padding-top défini ci-dessus) */
line-height: 19px;
text-align: center; /* Center le texte horizontalement sur le pied de page */
color: black; /* Texte gris foncé, se fondant avec le fond gris clair : moins lisible, car ce paragraphe est moins important */
}
#pied a {
color: white; /* Les liens du pied de page doivent ressortir du reste du pied de page. C'est chose faite avec des liens blancs */
}
#sousmenu li[class="lien"]{
display:block;
/*min-height:25px;*/
padding-right:1px;
width:198px;
}
#sousmenu >li[class="lien"]>a{
display: block; /* Afin de pouvoir assigner une hauteur au lien*/
/*min-height: 25px;/*30 plus 10 du bas*/
line-height: 20px;
background: url('images/sous-menu-lien-haut.png');
/*text-align: justify;*/
text-decoration: none;
color: black;
padding-top:5px;
padding-left:25px;
padding-right:10px;
/*padding-bottom:10px;*/
font-size:14px;
margin-bottom:5px;
}
#sousmenu >li[class="lien"]>a:hover, /* Au survol de la souris */
#sousmenu >li[class="lien"]>a:focus, /* Lorsque le lien a le focus, sous Firefox */
#sousmenu >li[class="lien"]>a:active /* Lorsque le lien a le focus, sous IE */
{
background-color: aqua;
background-position: 0 -251px;
color:blue;
}
#sousmenu >li[class="lien"]>a>span{
display:block;
background: url('images/sous-menu-lien-bas.png');
background-position:0 100%;
background-repeat:no-repeat;
/*padding-bottom:10px;*/
bottom:100%;
margin-left:-25px;
margin-right:-10px;
/*margin-top:-10px;*/
height:10px;
width:198px;
}
#sousmenu >li[class="lien"]>a:hover>span,
#sousmenu >li[class="lien"]>a:hover>span,
#sousmenu >li[class="lien"]>a:hover>span{
background-position:-198px 100%;
}
#sousmenu hr{
color:white;
}
#sousmenu >li{
text-align: center;
color:white;
font-weight: bold;
}
#sousmenu .actuel {
/* Indique au visiteur que ce lien est la page actuellement affichée */
font-weight: bold; /* Gras... */
text-decoration: underline; /* ... et souligné */
}
/*==========================================================================================*/
/*==========================================================================================*/
div[class="boite"],
.boite .boite{
background: #f0f0f0 url('images/cadre-haut-gauche.png');
/* La couleur de fond de la boite... */
margin:7px;
/* ... et la marge de la boite se définissant dans le bloc le plus externe */
}
.boite div,
.boite .boite div {
background: url('images/cadre-bas.png') 0 100% no-repeat;
}
.boite div div ,
.boite .boite div div{
background: url('images/cadre-droite.png') 100% 0 no-repeat;
}
.boite div div div ,
.boite .boite div div div{
background: url('images/cadre-bas-droite.png') 100% 100% no-repeat;
padding: 13px 10px 16px 10px;
text-align:justify;
/* L'espacement intérieur se définit dans le bloc le plus interne */
}
/*Petit bonus de sécurité : */
.boite div div div div ,
.boite .boite div div div div{
background: none;
padding: 0;
}
/*==================================================================================================*/
/*==================================================================================================*/
/*==================================================================================================*/
/*==================================================================================================*/
div[class="boiteorange"],
.boite div[class="boiteorange"]{
background: #f0f0f0 url('images/cadre-orange-haut-gauche.png');
/* La couleur de fond de la boite... */
margin: 7px;
/* ... et la marge de la boite se définissant dans le bloc le plus externe */
}
.boiteorange div,
.boite .boiteorange div {
background: url('images/cadre-orange-bas.png') 0 100% no-repeat;
}
.boiteorange div div ,
.boite .boiteorange div div{
background: url('images/cadre-orange-droite.png') 100% 0 no-repeat;
}
.boiteorange div div div ,
.boite .boiteorange div div div {
background: url('images/cadre-orange-bas-droite.png') 100% 100% no-repeat;
padding: 13px 10px 16px 10px;
text-align:justify;
/* L'espacement intérieur se définit dans le bloc le plus interne */
}
/* Petit bonus de sécurité : */
.boiteorange div div div div ,
.boite .boiteorange div div div div
{
background: none;
padding: 0;
}
/*==================================================================================================*/
/*==================================================================================================*/
/*==================================================================================================*/
/*==================================================================================================*/
div[class="boiterouge"],
.boite div[class="boiterouge"]{
background: #f0f0f0 url('images/cadre-rouge-haut-gauche.png');
/* La couleur de fond de la boite... */
margin: 7px;
/* ... et la marge de la boite se définissant dans le bloc le plus externe */
}
.boiterouge div,
.boite .boiterouge div {
background: url('images/cadre-rouge-bas.png') 0 100% no-repeat;
}
.boiterouge div div ,
.boite .boiterouge div div{
background: url('images/cadre-rouge-droite.png') 100% 0 no-repeat;
}
.boiterouge div div div ,
.boite .boiterouge div div div {
background: url('images/cadre-rouge-bas-droite.png') 100% 100% no-repeat;
padding: 13px 10px 16px 10px;
text-align:justify;
/* L'espacement intérieur se définit dans le bloc le plus interne */
}
/* Petit bonus de sécurité : */
.boiterouge div div div div ,
.boite .boiterouge div div div div
{
background: none;
padding: 0;
}
/*==================================================================================================*/
/*==================================================================================================*/
/*==================================================================================================*/
/*==================================================================================================*/
div[class="boitejaune"],
.boite div[class="boitejaune"]{
background: #f0f0f0 url('images/cadre-jaune-haut-gauche.png');
/* La couleur de fond de la boite... */
margin: 7px;
/* ... et la marge de la boite se définissant dans le bloc le plus externe */
}
.boitejaune div,
.boite .boitejaune div {
background: url('images/cadre-jaune-bas.png') 0 100% no-repeat;
}
.boitejaune div div ,
.boite .boitejaune div div{
background: url('images/cadre-jaune-droite.png') 100% 0 no-repeat;
}
.boitejaune div div div ,
.boite .boitejaune div div div {
background: url('images/cadre-jaune-bas-droite.png') 100% 100% no-repeat;
padding: 13px 10px 16px 10px;
text-align:justify;
/* L'espacement intérieur se définit dans le bloc le plus interne */
}
/* Petit bonus de sécurité : */
.boitejaune div div div div ,
.boite .boitejaune div div div div
{
background: none;
padding: 0;
}
/*==================================================================================================*/
/*==================================================================================================*/
/*==================================================================================================*/
/*==================================================================================================*/
div[class="boiteteal"],
.boite div[class="boiteteal"]{
background: #f0f0f0 url('images/cadre-teal-haut-gauche.png');
/* La couleur de fond de la boite... */
margin: 7px;
/* ... et la marge de la boite se définissant dans le bloc le plus externe */
}
.boiteteal div,
.boite .boiteteal div {
background: url('images/cadre-teal-bas.png') 0 100% no-repeat;
}
.boiteteal div div ,
.boite .boiteteal div div{
background: url('images/cadre-teal-droite.png') 100% 0 no-repeat;
}
.boiteteal div div div ,
.boite .boiteteal div div div {
background: url('images/cadre-teal-bas-droite.png') 100% 100% no-repeat;
padding: 13px 10px 16px 10px;
text-align:justify;
/* L'espacement intérieur se définit dans le bloc le plus interne */
}
/* Petit bonus de sécurité : */
.boiteteal div div div div ,
.boite .boiteteal div div div div
{
background: none;
padding: 0;
}
/*==================================================================================================*/
/*==================================================================================================*/
/*==================================================================================================*/
/*==================================================================================================*/
div[class="boiteverte"],
.boite div[class="boiteverte"]{
background: #f0f0f0 url('images/cadre-vert-haut-gauche.png');
/* La couleur de fond de la boite... */
margin: 7px;
/* ... et la marge de la boite se définissant dans le bloc le plus externe */
}
.boiteverte div ,
.boite .boiteverte div {
background: url('images/cadre-vert-bas.png') 0 100% no-repeat;
}
.boiteverte div div ,
.boite .boiteverte div div{
background: url('images/cadre-vert-droite.png') 100% 0 no-repeat;
}
.boiteverte div div div ,
.boite .boiteverte div div div{
background: url('images/cadre-vert-bas-droite.png') 100% 100% no-repeat;
padding: 13px 10px 10px 10px;
text-align:justify;
/* L'espacement intérieur se définit dans le bloc le plus interne */
}
/* Petit bonus de sécurité : */
.boiteverte div div div div ,
.boite .boiteverte div div div div{
background: none;
padding: 0;
}
/*==================================================================================================*/
/*==================================================================================================*/
div[class="boiteMenu"]{
background: #f0f0f0 url('images/cadre-sous-menu-haut-gauche.png');
/* La couleur de fond de la boite... */
margin: 7px;
/* ... et la marge de la boite se définissant dans le bloc le plus externe */
}
.boiteMenu div {
background: url('images/cadre-sous-menu-bas.png') 0 100% no-repeat;
}
.boiteMenu div div {
background: url('images/cadre-sous-menu-droite.png') 100% 0 no-repeat;
overflow:visible;
}
.boiteMenu div div div {
background: url('images/cadre-sous-menu-bas-droite.png') 100% 100% no-repeat;
padding: 13px 16px 16px 5px;
text-align:left;
color : black;
overflow:visible;
/* L'espacement intérieur se définit dans le bloc le plus interne */
}
/* Petit bonus de sécurité : */
.boiteMenu div div div div {
background: none;
/* Si la boite contient elle-même des div, éviter que ceux-ci aient cadre-bas-droite.png comme image de fond... */
padding: 0;
/* ... et qu'elles aient un padding, définit dans la règle ci-dessus */
}
.boiteMenu div div div a{
font-weight: none;
font-style:none;
padding-left:20px;
height:20px;
width:100%;
color:black;
background:url('images/lien-boite-sous-menu.png');
background-repeat:no-repeat;
font-size:15px;
text-align:left;
margin-top:5px;
margin-bottom:5px;
}
.boiteMenu div div div a:hover,
.boiteMenu div div div a:focus,
.boiteMenu div div div a:active {
color:blue;
background-position: 0 -780px;
}
body {
color: black;
min-width:700px;
padding-left:50px;
padding-right:50px;
}
body[class="main"]{
background:rgb(191,223,233);
min-width:1000px;
overflow:auto;
}
h1 {
height: 227px;
width:100%;
background: url('images/banniere.jpg') 0 100% no-repeat;
background-position:center;
text-align: center;
color: white;
font_style:bold;
font-size:xx-large;
}
h2 {
color: blue;
/*font-weight : bold;*/
font-size:25px;
font-style:italic;
/*font-family:eras demi itc;*/
}
/*mettre tous les liens en bleu*/
a {
color: blue;
}
/*syntaxe : balise_mere balise_fille*/
/*modifie les balises contenues dans les d'autres balises */
li li {
font-size: 10px;
}
h3{
font-style:italic;
color:teal;
text-align:left;
font-size:20px;
}
.introduction { font-style: italic; }
.encadre { border: 1px solid black; background: cyan; }
.css { background: lightgray; }
[class="important"]{color:red;}
.important { color: red; }
.bouton { border: 1px solid gray; background: lightgray; }
.onglet {
border-top: 1px solid gray;
border-left: 1px solid gray;
border-right: 1px solid gray;
}
.complement { float: right;}
.img-legende {
float: right;
border: 1px solid black;
}
.encadre {
border: 1px solid black;
}
.info{
color: blue;
font-size: 20px;
}
.attention{
color:red;
font-size:20px;
}
.info strong{
font-size: 25px;
}
/*Sélecteur d'attribut : balise[attribut]*/
/*exemples :*/
a[href] { color: blue; }
a[name] { /* Aucun style particulier */ }
/* changer la decoration d'un lien au survol de la souris*/
.menu a:hover {
text-decoration: underline;
}
dt{
color: blue;
}
ol > li{
font-size:20px;
color:blue;
}
ul > li {
color:black;
font-size:15px;
}
p.alinea:first-letter {
padding-left : 2em;
}
h2 *{
font-size:25px;
}
h3 *{
font-size:20px;
}
ul p, ol p, li p{
padding-top:0;
padding-bottom:0;
}
ul [class="selection"] {
height:100px;
overflow: scroll;
list-style-type:none;
}
ul [class="selection"] > li {
list-style-type:none;
}
font[class="bleu"]{
color:blue;
font-size:105%;
}
font[class="vert"]{
color:green;
font-size:105%;
}
font[class="rouge"]{
color:red;
font-size:105%;
}
font[class="noir"]{
color:black;
font-size:105%;
}
font[class="bleu2"]{
color:teal;
font-size:105%;
}
b,u,i {
font-size:120%;
}
a[class="download"]{
display:block;
background: url('images/telecharger.png');
height:20px;
width:150px;
}
a[class="download"]:hover,
a[class="download"]:focus,
a[class="download"]:active{
background-position:0 -20px;
}
input[type="submit"][class="modifcarte"]{
display:block;
background: url('images/modif-carte.png');
height:20px;
width:150px;
border-style:none;
}
input[type="submit"][class="modifcarte"]:hover,
input[type="submit"][class="modifcarte"]:focus,
input[type="submit"][class="modifcarte"]:active{
background-position:0 -20px;
}
a{
font-size:102%;
}
ul > p , ol > p{
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
}