HTML 
{font-size: 100%;}
BODY 
{ width: 100%; margin: auto; background: white; background-image: url("images/degrade02.jpg"); background-repeat: repeat-y; color: rgb(0,4,94); font-family: Verdana,Tahoma,Optimum,sans-serif; font-size: small; text-align: center;}
/*      DIV     */
/* En-tête de la page d'accueil */
DIV.entete 
{margin: auto; width: 100%; text-align: center; background: rgb(4,140,255); border-bottom: outset 10px blue;}
DIV.entete IMG.gauche 
{float: left; padding-left: 50px;}
DIV.entete IMG.milieu 
{text-align: center;}
DIV.entete IMG.droite 
{float: right; padding-right: 50px;}
DIV.entete P 
{padding: 0px; margin: 0px; }
/* Menu de gauche */
DIV.gauche 
{float: left; position: absolute; top: 100px; left: 60px; text-align: center; width: 250px; margin: auto; margin-left: 0;}
DIV.gauche IMG 
{padding: 5px;}
/* Menu gauche sur la page d'accueil uniquement : plus bas que sur les autres pages à cause du logo grand format. */
DIV.ind 
{float: left; position: absolute; top: 200px; left: 60px; text-align: center; width: 250px; margin: auto; margin-left: 0;}
DIV.ind IMG 
{padding: 5px;}
/* Annonce de la page d'accueil */
DIV.ann 
{font-weight: bold; 
color: green; 
padding: 10px;
border: inset 5px green; 
border-radius: 50px 0;
-moz-border-radius: 50px 0;
-webkit-border-radius: 50px 0;
max-width: 700px; 
margin: auto;}
/* Comme son nom l'indique (sur la page d'accueil) */
DIV.piedpage 
{clear: both; padding-top: 10px;}
/* Corps de texte (à droite du menu) */
DIV.corps 
{margin-left: 280px; padding: 20px 110px 10px 100px; max-width: 900px;}
DIV.corps A
{ text-decoration: none;}
/* Par défaut, un lien est souligné quand on passe dessus */
DIV.corps A:hover
{ text-decoration: underline ;} 
/* Bouton rond, sur le même modèle que le menu de gauche (multicolore) */
DIV.corps A.choisir 
{width: 36px; height: 36px; text-decoration: none; background-image: url("images/boutonr01moy.png"); background-repeat: no-repeat; color: navy; font-weight: bold; font-size: large; padding: 7px 15px 15px 12px; text-align: center;}
DIV.corps A.choisir:hover 
{background-image: url("images/boutonr02moy.png"); color: rgb(164,4,4);}
DIV.corps A.choisir:focus 
{background-image: url("images/boutonr02moy.png"); color: rgb(253,206,4);}
/* Bouton allongé, centré dans le corps de texte, sur le même modèle que le menu de gauche (multicolore) */
DIV.corps A.boutoncentre 
{width: 160px; display: block; text-decoration: none; background-image: url("images/boutonarcjclair.jpg"); background-repeat: no-repeat; color: navy; font-weight: bold; font-size: large; padding: 10px 15px 20px 15px; text-align: center; margin: auto;}
DIV.corps A.boutoncentre:hover 
{background-image: url("images/boutonarcinvjclair.jpg"); color: rgb(164,4,4);}
DIV.corps A.boutoncentre:focus 
{background-image: url("images/boutonarcinvjclair.jpg"); color: rgb(253,206,4);}
/* Jeu */
DIV.jeu {font-size: small; font-weight: bold; font-style: italic; color: blue; text-align: center; padding-top: 10px;}
/*      IMAGES     */
IMG 
{border: none; vertical-align: middle;}
/* Petit logo en haut à gauche (sauf sur la page d'index */
IMG.logo 
{position: absolute; left: 0px; top: 0px;}
/* Signature de la page d'accueil */
IMG.sign 
{text-align: right; padding: 5px 5px 30px 450px;}
IMG.dec
{text-align: center; padding-bottom : 10px;}
/* Images ombrées */
IMG.ombre
{
box-shadow: 3px 3px 15px rgb(45,45,80);
-moz-box-shadow: 3px 3px 15px rgb(45,45,80);
-webkit-box-shadow: 3px 3px 15px rgb(45,45,80);
padding: 5px;
}
IMG.activ
{
float: left; margin-right: 5px; height: 100px; display: inline-block;}
}
/*      LIENS     */
/* Par défaut, aucun lien n'est souligné */
A 
{ text-decoration: none;}
/* Par défaut, un lien est souligné quand on passe dessus */
A:hover
{ text-decoration: underline ;} 
/* Liens du menu de gauche (fond coloré, pseudo-bouton) */
A.menu 
{width: 160px; display: block; text-decoration: none; background-image: url("images/boutonarcj.jpg"); background-repeat: no-repeat; color: navy; font-weight: bold; font-size: large; padding: 8px 15px 20px 15px; text-align: center;}
A.menu:hover 
{background-image: url("images/boutonarcinvj.jpg"); color: rgb(164,4,4);}
A.menu:focus 
{background-image: url("images/boutonarcinvj.jpg"); color: rgb(253,206,4);}
/* Fait ressortir les liens sur la page des mentions légales */
A.pub 
{font-weight: bold;}
A.discr
{text-decoration: none; color: navy;}
/* Liens permettant d'accéder au détail des évènements */
A.evts 
{width: 32px; height: 32px; text-decoration: none; background-image: url("images/boutonrpetit01.png"); background-repeat: no-repeat; color: navy; font-weight: bold; padding: 10px 15px 20px 40px;}
A.evts:hover 
{background-image: url("images/boutonrpetit02.png"); color: rgb(164,4,4);}
A.evts:focus 
{background-image: url("images/boutonrpetit02.png");}
/* Lien vers le programme d'un évènement */
A.boutonevt
{width: 160px; display: block; text-decoration: none; background-image: url("images/boutonarcbclair.jpg"); background-repeat: no-repeat; color: navy; font-weight: bold; font-size: large; padding: 7px 15px 20px 15px; text-align: center; margin: auto;}
A.boutonevt:hover 
{background-image: url("images/boutonarcinvbclair.jpg"); color: rgb(164,4,4);}
A.boutonevt:focus 
{background-image: url("images/boutonarcinvbclair.jpg"); color: rgb(253,206,4);}
/*      TITRES     */
H1 {text-align: center; font-size: x-large; font-weight: bold; color: rgb(164,4,4); padding: 15px 10px 20px 10px;}
H2 {text-align: center; font-size: large; color: rgb(205,92,92); padding: 12px 8px 5px 8px; clear: both;}
H3 {text-align: center; font-size: medium; color: rgb(217,133,133);}
/*      TABLEAUX     */
/* Tableau des tarifs */
TABLE.tar 
{width: 95%; margin-top: 50px; margin-left: auto; margin-right: auto; margin-bottom: 30px; border-collapse: collapse; }
TABLE.tar TD
{border-bottom: solid 1px;}
TABLE.tar TH
{border-bottom: inset; border-top: inset; text-align: center;}
/* Libellé du tarif */
TABLE.tar .lib 
{text-align: left; padding: 10px;}
/* Montant du tarif */
TABLE.tar .px 
{text-align: right; padding: 10px;}
TABLE.tar .eco {font-size: x-small; font-weight: bold; font-style: italic; color: blue; background: rgb(240,240,255);}
TABLE.tar .fp {font-size: x-small; font-style: italic; }
/* Table pour le formulaire permettant de rechercher un cours */
TABLE.form  
{border: none; width: 100%;}
TABLE.form TD.col1 
{text-align: right; padding: 5px; width: 65%; font-weight: bold;}
TABLE.form TD.col2 
{text-align: right; padding: 5px; width: 20%;}
TABLE.form TD.col3 
{text-align: center; padding: 5px; width: 15%;}
TABLE.form CAPTION 
{font-weight: normal; font-style: italic; padding-bottom: 5px; font-size: small; color: rgb(19,50,0);}
/* Tableau des horaires */
TABLE.hor 
{ max-width: 80%; margin-top: auto; margin-left: auto; margin-right: auto; margin-bottom: 30px; border-collapse: collapse; text-align: left;}
TABLE.hor CAPTION 
{padding: 25px 20px 20px 20px; font-weight: bold; font-size: large; color: rgb(205,92,92); text-align: center; }
TABLE.hor TH 
{padding: 15px 11px 15px 11px; border-bottom: inset; border-top: inset; font-size: small;}
TABLE.hor TD 
{padding: 11px; border-bottom: solid 1px; font-size: small;}
TABLE.hor TD.date 
{text-align: left;}
TABLE.hor IMG
{padding-left: 5px; vertical-align: middle;}
/* Tableau du programme d'un évènement */
TABLE.prog 
{width: 99%; margin: auto; border-collapse: collapse; text-align: left; font-weight: bold; margin-bottom: 15px;}
TABLE.prog CAPTION
{padding: 20px; font-size: large; color: rgb(205,92,92); }
TABLE.prog TR.haut
{border-bottom: inset; border-top: inset; text-align: center; padding: 5px;}
TABLE.prog TD
{border-bottom: solid 1px blue; padding: 7px;}
TABLE.prog TD.heure { color: rgb(205,92,92); border-color: blue;}
TABLE.prog TD.enf {background-color: rgb(0,200,0);}
TABLE.prog TR.ann {background-color: yellow; font-style: italic;}
/* Tableau des partenaires et liens */
TABLE.part
{width: 98%; margin: auto; padding: 8px 3px 25px 3px; text-align: center; font-size : x-small; color: navy; border: none;}
TABLE.part CAPTION
{font-weight: bold; padding: 10px; font-size: large; color: rgb(205,92,92);}
TABLE.part TD 
{padding: 7px;}
TABLE.part A 
{font-size : x-small; color: navy; font-weight: bold;}
TABLE.part TD.sl {color: navy; padding: 5px 3px 10px 3px; text-align: left; vertical-align: top; font-size: x-small;}
TABLE.part TD.sl IMG.flo {float: left}
UL.part
{width: 98%; margin: auto; padding-top: 8px; padding-bottom: 25px; text-align: left; font-size : x-small; color: navy; border: none;}
UL.part LI 
{display: inline-block; float: left;}
UL.part A 
{font-size : x-small; color: navy; font-weight: bold;}
UL.part LI.sl {color: navy; padding: 3px 0px 3px 5px;  text-align: left; vertical-align: top; font-size: x-small; width: 180px; height: 80px;}
UL.part LI.sl IMG.flo {float: left; padding-right: 2px;}
.nom {font-weight: bold; font-variant: small-caps; font-size: x-small;}
/* Formulaire de contact */
TABLE.ecr 
{width: 98%; padding: 10px; border-style: none; margin: auto;}
TD.col1f 
{text-align: left; font-weight:bold; padding: 5px; font-size: small;}
TD.col2f 
{text-align: left; padding: 5px; font-size: small;}
/*      FORMULAIRES ET BOÎTES     */
FORM.choix 
{width: 80%; padding: 20px; margin-right: auto; margin-left: auto; margin-top: 10px; margin-bottom: 10px; border: solid 1px; border-radius: 12px 0 12px 0; }
.boitefac
{color:rgb(0,0,153); background-color:rgb(243,243,220); border: solid 1px;}
.boiteobl 
{color:rgb(0,0,153); background-color:rgb(243,243,220); border-style: solid; border-width: 2px; border-left-color:rgb(0,0,153); border-top-color:rgb(0,0,153); border-right-color:rgb(100,100,220); border-bottom-color:rgb(100,100,220);}
/* LISTES*/
/* Définitions et réponses, liste utilisée aussi pour les évènements  */
.definir 
{text-align: left; padding: 15px 15px 15px 5px; font-size: small; list-style-position: outside; list-style-type: none;}
.def 
{text-align: justify; padding: 10px; margin-left: 32px; margin-top: 10px; background: rgb(240,240,255); color: blue;}
.defbleu
{ background: rgb(200,210,255); text-align: justify; padding: 10px; margin-left: 32px; margin-top: 10px; color: blue;}
.defvert
{ background: rgb(200,255,210); text-align: justify; padding: 10px; margin-left: 32px; margin-top: 10px; color: blue; }
.quoi 
{text-align: left; font-weight: bold; padding-top: 15px; padding-bottom: 7px; list-style-position: outside; clear: both;}
.definirpetit 
{text-align: left; padding: 12px 12px 12px 3px; font-size: 10px; list-style-position: outside; list-style-type: none; border-top: inset 2px blue; border-bottom: inset 2px blue;}
.defpetit 
{text-align: justify; padding: 7px; margin-left: 25px; margin-top: 7px; background: rgb(240,240,255); color: blue;}
.quoipetit 
{text-align: left; font-weight: bold; padding-top: 10px; padding-bottom: 5px; list-style-position: outside;}
LI.titrevt 
{text-align: left; font-weight: bold; padding-top: 30px; padding-bottom: 20px; list-style-position: outside;}
/* Liste non ordonnée standard */
UL.liste {text-align: left;}
/* Liste non ordonnée standard avec espacement supplémentaire */
UL.listecar LI {text-align: justify; padding: 3px;}
/*Liste non ordonnée flottante avec marge à gauche*/
UL.mat 
{padding: 10px; margin-left: 50px; float: left;}
UL.mat LI 
{text-align: justify; padding: 5px;}
/*Liste non ordonnée avec marge à gauche plus grande */
UL.marq 
{padding: 15px; margin-left: 100px;}
UL.marq LI 
{text-align: justify; padding: 5px;}
/*      PARAGRAPHES ET BLOBS     */
P 
{text-align: center;}
/* Texte important (en gras) */
P.imp {font-weight: bold; padding: 10px;}
/* Fin de l'intro sur la page d'accueil */
P.finintro {font-weight: bold; text-align: left; padding: 10px 10px 10px 400px;}
/* Indicaations de remplissage */
P.indic {font-weight: normal; font-style: italic; padding: 5px; width: 80%; margin: auto; font-size: small; color: rgb(19,50,0);}
P.indiclarge {font-weight: normal; font-style: italic; padding: 20px; width: 80%; margin: auto; font-size: medium; color: rgb(19,50,0);}
P.indiccl {clear: both; font-weight: bold; font-style: italic; padding: 10px 2px 10px 2px; width: 98%; margin: auto; font-size: small; color: rgb(19,50,0);}
/* Avertissement */
P.avert {font-weight: bold; color: red; text-align: center;}
/* Bas de page et lien de bas de page */
P.bas {font-size: x-small; color: gray; padding-top: 10px;}
P.bas A {font-size: x-small; color: gray; font-weight: bold;}
/* Mentions légales en bas à gauche */
P.basgauche A {font-size: x-small; color: gray; margin-left: -60px;}
/* Icônes de la validation W3C */
P.val {text-align: center; margin-left: -60px;} 
/* Euh... c'est quoi, ça, déjà ? */
P.elem {text-align: right;}
/* Précisions en petit */
P.prec {font-size: x-small; font-style: italic;}
/* Texte très espacé en haut et en bas */
P.env {padding-top: 200px; padding-bottom: 200px;}
/* Texte en gras, centré, marge importante à gauche */ 
P.act {padding: 50px 5px 8px 5px; font-weight: bold; text-align: left; width: 50%; margin: auto;}
/* Rubriques de la galerie */
P.gal {clear: both; padding: 40px 5px 50px 5px; font-weight: bold; text-align: left; width: 90%; margin: auto;}
/* Texte tout venant */
P.recit {clear: both; text-align: justify;}
/* Texte tout venant, mais plus étroit et plus espacé */
P.etroit {text-align: justify; width: 80%; margin: auto; padding: 5px;}
/* Titre cadré à gauche */
P.titreg {text-align: left; font-size: medium; color: rgb(205,92,92); font-weight: bold;}
/* Liens de la page partenaires */
P.part {text-align: center; font-size: small; color: gray; font-weight: normal;}
P.part A {text-align: center; font-size: small; color: gray; font-weight: bold;}
/* Jeu */
.regles {width: 50%; margin: auto; border-style: outset; border-width: 5px; padding: 5px 30px 15px 30px; margin-top: 30px; margin-bottom: 30px;}
.horf {background: rgb(200,210,255);}
.hfres {background: rgb(200,255,210);}