/* 1. Les sélecteurs */ /* 2. Les sélécteurs d'identifiant id */ /* 3. Les classes*/ /* 4. Les pseudo-classes */ /* 1. Les sélecteurs */ body { /* Définition des marges extérieures et intérieures de l'élément . */ margin:0; padding:0; /*overflow:hidden;*/ text-align:center; /* Permet de palier à un bug d'IE et de centrer le design*/ font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#FCF8E5; background-image:url(../medias/images/design_site/fond.png); background-repeat:repeat-x;/* Par défaut, l'image de fond est répétée horizontalement et verticalement, et occupe tout l'espace disponible de l'élément. Pour modifier cette caractéristique, nous pouvons limiter le type de répétition à l'aide de la propriété background-repeat. Avec la valeur repeat-x, l'image n'est répétée que horizontalement en haut de l'élément. */ }/*OK*/ div { height:auto; }/*OK*/ p { margin:0; border:0; padding:0; font-size: 11px; color: #333333; text-align: left; height:auto; line-height:15px; } br{ margin:0; border:0; padding:0; line-height:15px; } table{ border:0; margin-left : 0px; font-size:11px; table-layout:auto; } td{ padding-left:0; vertical-align:top; } pre { margin:0; border:0; padding:0; font-size: 11px; color: #333333; text-align: left; height:auto; line-height:15px; } /* 2. Les sélécteurs d'identifiant id */ /* Le sélecteur d'identifiant #haut contient #en_tete ainsi que l'ensemble des id qui constituent le menu horizontal. Il constitue le haut de la page. */ #haut{ position:relative; margin-left: auto; margin-right: auto; width:1024px; height:227px; }/*OK*/ #bandeau{ position:absolute; left:784px; top:10px; width:220px; }/*OK*/ #menu_1{ position:absolute; left:0px; top:177px; width:302px; height:50px; background-image:url(../medias/images/design_site/menu_1.png); }/*OK*/ #menu_2 a{ position:absolute; left:302px; top:177px; width:96px; height:50px; background-image:url(../medias/images/design_site/menu_2.png); background-position:left; text-indent:7px; line-height:24px; }/*OK*/ #menu_2 a:hover{ background-position:right; }/*OK*/ #menu_3 a{ position:absolute; left:398px; top:177px; width:158px; height:50px; background-image:url(../medias/images/design_site/menu_3.png); background-position:left; text-indent:7px; line-height:24px; }/*OK*/ #menu_3 a:hover{ background-position:right; }/*OK*/ #menu_4 a{ position:absolute; left:556px; top:177px; width:178px; height:50px; background-image:url(../medias/images/design_site/menu_4.png); background-position:left; text-indent:7px; line-height:24px; }/*OK*/ #menu_4 a:hover{ background-position:right; }/*OK*/ #menu_5 a{ position:absolute; left:734px; top:177px; width:165px; height:50px; background-image:url(../medias/images/design_site/menu_5.png); background-position:left; text-indent:7px; line-height:24px; }/*OK*/ #menu_5 a:hover{ background-position:right; }/*OK*/ #menu_6 a{ position:absolute; left:899px; top:177px; width:95px; height:50px; background-image:url(../medias/images/design_site/menu_6.png); background-position:left; text-indent:7px; line-height:24px; }/*OK*/ #menu_6 a:hover{ background-position:right; }/*OK*/ #menu_7{ position:absolute; left:994px; top:177px; width:30px; height:50px; background-image: url(../medias/images/design_site/menu_7.png); }/*OK*/ /* Le sélecteur d'identifiant #centre contient #gauche, #milieu et #droite. Il constitue le centre de la page. */ #centre{ position:relative; margin-left:auto; margin-right:auto; width:1024px; /* Largeur en pixels du bloc centre. */ background-image:url(../medias/images/design_site/centre.png); background-repeat:repeat-y; background-position:center top; }/*OK*/ #gauche{ float:left; position:relative; width:301px;/* Largeur en pixels du bloc texte_gauche. */ }/*OK*/ #milieu{ float:left; position:relative; left:0px;/* Signifie que le bloc texte_centre se trouve positionner contre le bord extérieur droit du bloc texte_gauche. */ width:488px;/* Largeur en pixels du bloc texte_gauche. */ }/*OK*/ #droite{ float:right; position:relative; width:225px; /* Largeur en pixels du bloc texte_droite. Pour que cela fonctonne sous Firefox, la valeur de la propriété width doit être inférieure (ici de 10px) à la valeur que peux supporter IE (ici de 235px). */ }/*OK*/ /* Le sélecteur d'identifiant #footer constitue le bas de la page. */ #bas{ position:relative; width:1024px; height:100%; clear:both; /* Agit, dans la cas présent, sur la position du footer. */ background-image:url(../medias/images/design_site/centre.png); }/*OK*/ #block_interne a { font-size: 11px; color: #99B1D0; text-decoration: none; line-height:17px; } /* 3. Les classes*/ .bandeau{ font-size:9px; }/*OK*/ .onglet{ font-size:10px; }/*OK*/ .menu_article{ margin-top: 0px; margin-bottom: 10px; margin-right : 25px; margin-left : 35px; text-align:left; /* La valeur de cette propriété permet de justifier le texte de #texte-centre. Pour le ferrer à gauche il suffit de remplacer la valeur "justify" par "left". */ } h1.puce_bonhomme { font-size:12px; font-weight:bold; color:#C4E268; background-image:url(../medias/images/design_site/puce-bonhomme.png); background-position:left top; background-repeat:no-repeat; text-indent:20px; text-align:left; white-space:pre; display:block; margin-top:0px; margin-bottom:10px; margin-left:55px; line-height:18px; }/*OK*/ .gauche { margin-left:55px; line-height:26px; } .gauche_centre { margin-left:10px; margin-right:10px; text-align: center; color: #E2E2E2; } h1.commentaire { font-style:italic; font-size:11px; color:#87AF32; font-weight:bold; margin-top: 0px; margin-bottom: 10px; margin-right : 25px; margin-left : 25px; text-align:left; } .texte_droite { margin-right:25px; font-style:italic; font-size:9px; color:#87AF32; margin-top:0px; margin-bottom:5px; } h1.texte_centre { font-size: 12px; color: #333333; background-image:url(../medias/images/design_site/cartouche_titre.png); background-repeat:no-repeat; text-indent:10px; text-align:left; white-space:pre; display:block; margin-top:0px; margin-bottom:10px; margin-left:25px; line-height:35px; } h2.texte_centre_haut { font-size:11px; color:#333333; } h3.texte_centre_haut { font-size:11px; color:#FF9900; } h4.texte_centre_haut { font-size:11px; color:#333333; } .texte_centre_haut { background-image:url(../medias/images/design_site/cartouche_texte_haut.png); background-repeat:no-repeat; text-indent:10px; text-align:left; white-space:pre; display:block; margin-top:0px; margin-bottom:10px; margin-left:25px; line-height:35px; } .texte_centre_bas{ background-image:url(../medias/images/design_site/cartouche_texte_bas.png); background-repeat:no-repeat; text-indent:10px; white-space:pre; display:block; margin-top:10px; margin-bottom:10px; margin-left:310px; line-height:20px; } .texte_centre { margin-top: 0px; margin-bottom: 10px; margin-right : 25px; margin-left : 35px; text-align:left; /* La valeur de cette propriété permet de justifier le texte de #texte-centre. Pour le ferrer à gauche il suffit de remplacer la valeur "justify" par "left". */ } .texte_centre_italique { font-style:italic; color:#87AF32; margin-top: 0px; margin-bottom: 10px; margin-right : 25px; margin-left : 35px; text-align:left; /* La valeur de cette propriété permet de justifier le texte de #texte-centre. Pour le ferrer à gauche il suffit de remplacer la valeur "justify" par "left". */ } .texte_centre_droite { margin-top: 0px; margin-bottom: 0px; margin-right : 25px; margin-left : 25px; text-align:right; /* La valeur de cette propriété permet de justifier le texte de #texte-centre. Pour le ferrer à gauche il suffit de remplacer la valeur "justify" par "left". */ } .texte_centre_centre { margin-top: 0px; margin-bottom: 0px; margin-right : 25px; margin-left : 25px; text-align:center; /* La valeur de cette propriété permet de justifier le texte de #texte-centre. Pour le ferrer à gauche il suffit de remplacer la valeur "justify" par "left". */ } .lire_suite { margin-top: 0px; margin-bottom: 10px; margin-right : 0px; margin-left : 200px; text-align:right; /* La valeur de cette propriété permet de justifier le texte de #texte-centre. Pour le ferrer à gauche il suffit de remplacer la valeur "justify" par "left". */ } .lire_suite_1 { margin-top: 0px; margin-bottom: 10px; margin-right : 0px; margin-left : 320px; text-align:right; /* La valeur de cette propriété permet de justifier le texte de #texte-centre. Pour le ferrer à gauche il suffit de remplacer la valeur "justify" par "left". */ } ul.vert { margin-top:0px; margin-bottom:9px; display:compact; list-style-type:square; list-style-position:inside; line-height:17px; font-size:10px; color:#87AF32; text-align:left; } .vert{ font-size:11px; color:#87AF32; text-align:left; } ul.noir { margin-top:0px; margin-bottom:9px; display:compact; list-style-type:square; list-style-position:inside; line-height:17px; font-size:11px; color:#1f1f1f; text-align:left; } .sommaire { margin-top: 0px; margin-bottom: 10px; margin-right : 25px; margin-left : 35px; text-indent : 25px; text-align:left; } ul.orange{ margin-top:0px; margin-bottom:9px; display:compact; list-style-type:square; list-style-position:inside; line-height:17px; font-size:11px; color:#FF9900; text-align:left; } ul.menu_article li{ display:inline; list-style-type:none; } ul.menu_article{ padding:0; margin-left:25px; font-size:10px; } .orange{ font-size:11px; color:#FF9900; text-align:left; } .orange_cadre-txt{ font-size:9px; color:#FF9900; text-align:left; } .bouton{ font-size:12px; font-weight:bold; color:#FF9900; text-align:center; } .texte_bas { margin-top: 0px; margin-bottom: 0px; margin-right : 25px; margin-left : 93px; color:#87AF32; text-align:left; max-width: 200px; } .cadre{ margin:0; border:0; padding:0; width:225px; background-position:center bottom; background-color:white; background-image:url(../medias/images/design_site/cadre_bas.png); background-repeat:no-repeat; } /*OK*/ .cadre-titre{ margin:0px; border:0px; padding-top:10px; padding-bottom:10px; padding-left: 10px; padding-right:10px; font-size:11px; color:#FF9900; background-position:center top; text-align:left; background-color:transparent; background-image:url(../medias/images/design_site/cadre_haut.png); background-repeat:no-repeat; } /*OK*/ .cadre-txt{ margin:0px; border:0px; padding-left:10px; font-size:9px; color:#000000; text-align:left; } /*OK*/ .image_centre{ text-align: center; } /* Les classes des éléments de formulaire */ input.orange{ padding:2px; font-size:10px; font-weight:bold; color:#FF9900; text-align:center; width:70px; } /*3Bo. Les classes du Back Office*/ .texte_centre_Bo { font-size: 11px; color: #333333; text-align:left; margin-left:25px; } .texte_centre_Bo a:link { font-size: 11px; color: #99B1D0; text-decoration: none; } .texte_centre_Bo a:visited { font-size: 11px; color: #99B1D0; text-decoration: none; } .texte_centre_Bo ul{ display:compact; list-style-type:square; list-style-position:inside; line-height:17px; font-size:11px; color:#1f1f1f; text-align:left; } .table { margin-top: 0px; margin-bottom: 10px; margin-right : 25px; margin-left : 25px; text-align:left; /* La valeur de cette propriété permet de justifier le texte de #texte-centre. Pour le ferrer à gauche il suffit de remplacer la valeur "justify" par "left". */ } .colgroup_1{ padding-left:10px; padding-top:15px; } .colgroup_2{ background-color:#1a1a1a; margin-left:0px; border:0px; padding-left:10px; text-align:left; vertical-align:middle; line-height:18px; border-right-color:#1a1a1a; } .colgroup_3{ background-color:#1a1a1a; margin:0px; border:0px; padding:5px; text-align:center; vertical-align:middle; border-collapse:collapse; border-left-color:#1a1a1a; } .titre_tableaux{ background-color:#1a1a1a; margin-left:0px; border:0px; padding-left:10px; text-align:left; vertical-align:middle; font-size: 12px; color: #ffffff; } /* 4. Les pseudo-classes */ /* Les pseudo-classes applicables aux liens*/ /* La pseudo classe : link permet d'attribuer un style à un lien qui pointe vers un document non encore vu. C'est l'état normal de tous les liens à l'ouverture de la page. */ a.texte { font-size: 10px; color: #87AF32; } a:link { font-size: 11px; color: #FFFFFF; text-decoration: none; /* Par défaut, les liens sont écrits en bleu et soulignés. Si l'on souhaite qu'ils ne soient plus soulignés, il faut donner la valeur "none" à la propriété "text-decoration" */ } /*OK*/ a.bandeau:link{ font-size: 9px; color: #000000; text-decoration: none; } /*OK*/ a.lien_gris:link{ font-size: 11px; color: #99B1D0; text-decoration: none; line-height:17px; } a.lien_gris_cadre:link{ font-size: 10px; color: #99B1D0; text-decoration: none; } a.lien_orange:link{ color: #FF9900; text-decoration: none; } /* La pseudo classe : visited permet d'attribuer un style à un lien qui pointe vers un document déjà vu, après un retour sur la page d'origine. */ a:visited { color: #FFCC66; text-decoration: none; } a.lien_gris:visited{ font-size: 11px; color: #68676B; text-decoration: none; line-height:17px; } a.lien_gris_cadre:visited{ font-size: 10px; color: #68676B; text-decoration: none; } a.lien_orange:visited{ color: #935443; text-decoration: none; } /* Les pseudo-classes dynamiques*/ /* La pseudo classe dynamique : focus permet d'attribuer un style à l'élément qui a le focus, soit qu'il lui ait été donné par le code XHTML à l'aide des attributs tabindex ou accesskey, soit qu'il l'ait obtenu par un déplacement du pointeur provoqué par l'internaute. */ a:focus { color: #FF9900; text-decoration: none; } a.lien_gris:focus{ font-size: 11px; color: #6C94C7; text-decoration: none; line-height:17px; } a.lien_gris_cadre:focus{ font-size: 10px; color: #6C94C7; text-decoration: none; } a.lien_orange:focus{ color: #FF9900; text-decoration: none; } /* La pseudo classe dynamique : hover permet d'attribuer un style à un élément visible dont la zone est survolée par le pointeur de la souris. Quand le pointeur quite cette zone, le style est annulé, ce qui peut produire des effets visuels intéressants. */ a:hover { color: #FF9900; text-decoration: none; } a.lien_gris:hover{ font-size: 11px; color: #6C94C7; text-decoration: none; } a.lien_gris_cadre:hover{ font-size: 10px; color: #6C94C7; text-decoration: none; } a.lien_orange:hover{ color: #773D2A; text-decoration: none; } a img { border: none; } a.vert{ font-size:11px; color:#87AF32; text-align:left; }