Platinum sponsors
Extension Key: template_basics_doc
Copyright 2000-2003, Marlies Cohen, <mc@mcuniverse.com>
Traduction : Francis Larrey <francis.larrey@freesbee.fr>
This document is published under the Open Content License
available from http://www.opencontent.org/opl.shtml
The content of this document is related to TYPO3
- a GNU/GPL CMS/Framework available from www.typo3.com
Table des matières
Gabarits Typo3 – Les Bases1
Gabarits Typo3 - Les Bases2
Le Gabarit HTML2
Exemple de Gabarit HTML3
Le Gabarit Typo36
Gabarit Typo3 : Constants6
Gabarit Typo3 : Setup7
Gabarit Typo3 : Static8
Feuille de Styles9
Exemple de Feuille de Styles9
Après beaucoup d’essais et d’erreurs, j’ai créé ce document pour m’aider à voir clairement comment s’articulent le Gabarit HTML, le Gabarit Typo3 et ma Feuille de Styles. Chaque section de mon site ayant une combinaison de couleurs différente, il m’a semblé pratique d’avoir une base de travail que je puisse adapter facilement.
Je me suis aperçue, à la lecture du groupe de news Typo3, que beaucoup d’autres utilisateurs avaient du mal à comprendre le fonctionnement des Gabarits. C’est pourquoi je publie ce document.
Une page Typo3 se compose de 3 éléments :
Elément 1 : Le Gabarit HTML Elément 2 : Le Gabarit Typo3 Elément 3 : La Feuille de Styless CSS
Pour voir comment les Gabarits travaillent ensemble, vous pouvez consulter ma version en ligne de ce tutoriel : http://www.mcuniverse.com/index.php/T3_Template_Basics/847/0/
C’est dans le Gabarit HTML que vous définissez le design de votre page. Il contient des parties statiques, qui restent donc les mêmes dans tout le site –ou dans une section-, et des parties dynamiques, qui changent à chaque page
J’utilise généralement des tableaux pour créer l’ossature de mon site. Mon tableau a une largeur de 750px, 2 colonnes et plusieurs lignes. La première colonne a une largeur de 175px, la seconde, qui reçoit le texte principal, 575px.
Dans la ligne du haut, je mets mon image principale. Sur cette page, c’est mon image de Tuteur en Informatique. Elle est la même sur toutes les pages de cette section du site (statique).
Dans la ligne suivante, je place la Navigation Haute, centrée dans un tableau sans bordure, composé d’une seule cellule. J’insère une balise Typo3 ###TOPNAV### pour qu’elle soit générée automatiquement (dynamique).
La troisième ligne est scindée en deux colonnes :
La colonne de gauche contient ma Navigation Gauche, repérée par une balise Typo3 ###LEFTNAV### pour une génération automatique (dynamique).
La colonne de droite, qui reçoit le contenu principal est repérée par une balise ###CONTENT###. Cette partie est générée quand j’ajoute du contenu à ma page (dynamique).
Dans la quatrième ligne, je mets tous les liens que je n’ai pas pu placer ailleurs et qui sont les mêmes à chaque page (statique).
Dans la cinquième ligne, je mets la date de mise à jour. Comme je n’ai pas réussi à la générer automatiquement, j’utilise une «bordure de contenu » pour l’insérer manuellement et place donc la balise Typo3 ###CONTENT_BORDER###
La sixième ligne est identique sur toutes les pages (statique). Les informations sont placées dans une cellule et formatées par une classe CSS.
La dernière ligne est une réplique de ma Navigation Haute, mais ne porte pas le même nom, pour que je puisse leur appliquer des styles différents –couleur de fond, par exemple-. J’insère donc une balise ###BOTTOMNAV###, pour que cette partie soit générée automatiquement (dynamique).
Image Principale fileadmin/pics/* Partie Statique | |
Navigation Haute – tableau d’une seule cellule, 550px de largeur.<!-- ###TOPNAV### --><SPAN class="topnav"> Partie Dynamaique | |
Navigation Gauche <!-- ###LEFTNAV### --> <DIV class="leftnav"> Partie Dynamique | Contenu principal <!-- ###CONTENU### --> Partie Dynamaique |
Rechercher | Envoyer à un ami | Imprimer | Haut de page Ligne Feedback <SPAN class="fback"> Partie Statique | |
!-- ###BORD_CONTENU### --><DIV class="lastupdate"> Page mise à jour le : Partie Dynamaique | |
Site and graphics created and maintained by Marlies Cohen © 1997-2003 * mcu(at)mcuniverse.com * <P class="footer"> Partie Statique | |
Navigation Basse – tableau d’une seule cellule, 550px de largeur.<!-- ###BOTTOMNAV### --><SPAN class="bottomnav "> Partie Dynamaique |
Notes
Dans Typo3 Template Setup, insérez :
- Un lien vers cette page.- Un lien vers l’image de fond. - Un lien vers la Feuille de Styles
Dans le Gabarit HTML, assurez-vous que le lien vers la Feuille de Styles soit valide.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><HEAD>
<!-- This website is brought to you by Typo3 - get.content.right Typo3 is a free open source Content Management Framework created by Kasper Skaarhoej and licensed under GNU/GPL. Information and contribution at http://www.typo3.com--><TITLE>Tutor Template</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR="#FFFFFF" BACKGROUND="/fileadmin/pics/ctutor/ct_bg4b.gif"><!-- ###DOCUMENT_BODY### START--><script language="JavaScript" type="text/javascript" src="/pphlogger.js"></SCRIPT><noscript><img alt="" src="http://ruv.net/fileadmin/pphlogger/pphlogger.php?id=mcu&st=img"></noscript> <LINK HREF="/fileadmin/mcucss/t3_style.css" REL="stylesheet" TYPE="text/css"><TABLE WIDTH="750" BORDER="1" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="#333333"> <TR> <TD><TABLE WIDTH="748" BORDER="0" CELLSPACING="0" CELLPADDING="0"> <TR ALIGN="CENTER" VALIGN="MIDDLE"> <td colspan="2" BGCOLOR="#C0C8D4">
<img src="/fileadmin/pics/ctutor/ctut_t3.jpg" width="750" height="100"></td> </TR> <tr> <td height="1" colspan="2" align="center" valign="bottom" BGCOLOR="#333333" color="#000000">
<img src="spacer.gif" width="1" height="1"></td> </tr> <TR ALIGN="CENTER" VALIGN="MIDDLE" BGCOLOR="#C0C8D4"> <TD COLSPAN="2"> <!—Navigation Haute --> <table width="550" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td align="center" valign="top"> <!-- ###TOPNAV### START --> <span class="topnav"> <a href="/extension-manuals/doc_tut_tmplbasic_fr/0.0.1/view/1/1/#">Navigation One</a> </span> <span class="topnav_act"> <a href="#">Navigation two</a> </span> <!-- ###TOPNAV### END --> </td> </tr> </table></TD> </TR> <tr> <td height="1" colspan="2" align="center" valign="bottom" BGCOLOR="#333333" color="#000000"><img src="spacer.gif" width="1" height="1"></td> </tr> <tr> <td BGCOLOR="#FFFFFF" COLSPAN="2" ALIGN="CENTER" VALIGN="MIDDLE"><img src="spacer.gif" width="1" height="10"></td> </tr> <TR> <TD WIDTH="175" ALIGN="LEFT" VALIGN="TOP" BGCOLOR="#FFFFFF"> <!—Navigation Gauche --> <!--###LEFTNAV### START--> <DIV class="leftnav"><a href="#">Navigation One</a></DIV> <DIV class="leftnav_act"><a href="#">Navigation two</a></DIV> <!--###LEFTNAV### STOP-->
</TD> <td WIDTH="575" ALIGN="LEFT" VALIGN="TOP" BGCOLOR="#FFFFFF"> <!-- ###CONTENT### START--> <H2>- Title -</H2> <P>this is the where new content goes</P> <!-- ###CONTENT### END--> <br /> </TD> </TR> <TR> <TD COLSPAN="2" ALIGN="LEFT" VALIGN="TOP" BGCOLOR="#FFFFFF"> <br><br><!—Début Section Feedback --><TABLE WIDTH="575" BORDER="0" ALIGN="RIGHT" CELLPADDING="2" CELLSPACING="0"> <TR> <TD ID="fback" ALIGN="CENTER" VALIGN="MIDDLE"><a href="/index.php?id=newsletter">Newsletter</a></TD> <TD ID="fback" ALIGN="CENTER" VALIGN="MIDDLE"><a href="/index.php?id=contact">Contact</a></TD> <TD ID="fback" ALIGN="CENTER" VALIGN="MIDDLE"><a href="/index.php?id=sitemap">SiteMap</a></TD> <TD ID="fback" ALIGN="CENTER" VALIGN="MIDDLE"><a href="/index.php?id=search">Search</a></TD> <TD ID="fback" ALIGN="CENTER" VALIGN="MIDDLE"><a href="/index.php?id=tipafriend&tipUrl=http://www.mcuniverse.com/?###PAGE_UID###" alt="Tip A Friend About McUniverse">Tip a Friend</a></TD> <TD ID="fback" ALIGN="CENTER" VALIGN="MIDDLE"><a href="/index.php?id=###PAGE_UID###&type=98" target=_blank alt="Printer Friendly Page">Print</a></TD> <TD ID="fback" ALIGN="CENTER" VALIGN="MIDDLE"><a href="#" alt="To Top of Page">To Top</a></TD> </TR> </TABLE> <!—Fin Section Feedback --> </TD> </TR> <tr> <td height="1" colspan="3" align="center" valign="bottom" BGCOLOR="#333333" color="#000000">
<img src="spacer.gif" width="1" height="1"></td> </tr> <tr BGCOLOR="#C0C8D4"> <td COLSPAN="2" ALIGN="CENTER" VALIGN="MIDDLE"> <!—DERNIERE MISE A JOUR --> <!-- ###CONTENT_BORDER### --> <DIV class="lastupdate">lastupdate</DIV> <!-- ###CONTENT_BORDER### --> </td> </tr> <!—Début Footer --> <tr BGCOLOR="#C0C8D4"> <td COLSPAN="2" ALIGN="CENTER" VALIGN="MIDDLE"> <DIV CLASS="footer">Site and graphics created and maintained by Marlies Cohen © 1997-2003 All Rights Reserved * mcu(at)mcuniverse.com *</DIV></td> </tr> <!-- Fin Footer --> <tr> <td height="1" colspan="2" align="center" valign="bottom" BGCOLOR="#333333" color="#000000">
<img src="spacer.gif" width="1" height="1"></td> </tr> <TR ALIGN="CENTER" VALIGN="MIDDLE"> <TD COLSPAN="2"> <table width="550" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td align="center" valign="top"> <!-- ###BOTTOMNAV### Start--> <span class="bottomnav"> <a href="/extension-manuals/doc_tut_tmplbasic_fr/0.0.1/view/1/1/#">Navigation One</a> </span> <span class="bottomnav_act"> <a href="#">Navigation two</a> </span> <!-- ###BOTTOMNAV### End--> </td> </tr> </table></TD> </TR> </TABLE></TD> </TR></TABLE></td></tr></table><!-- ###DOCUMENT_BODY### END--></BODY></HTML>
Le Gabarit Typo3 dit à Typo3 comment il doit interagir avec le Gabarit HTML et la Feuille de Styless CSS pour afficher la page.
Le Template Typo3 est divisé en trois grandes sections : Constants, Setup et Static. Vous pouvez voir ci-dessous le contenu de ces 3 sections.
content {wrap.header1 = <H1> | </H1>wrap.header2 = <H2> | </H2>wrap.header3 = <H3> | </H3>wrap.header4 = <H4> | </H4>wrap.bodytext = <P class="p"> | </P> case.header1 = | case.header2 = | headerSpace = 0 space = 0}
styles.content.textStyle {face = size = color = }
cSet {pageColor = #FFFFFFtableCellColor = #FFFFFFcolor = blackcolor1 = #003366color2 = #003366fontFace = VerdanafontFace.text = Verdana}
# Largeur maxi des images, pixels.styles.content.imgtext.maxW = 600
# Cibles, laisser vide pour les sites sans frames.PAGE_TARGET =content.pageFrameObj =
# Style à utiliser pour l’impression. Vérifier la validité du lien vers la Feuille de Styles. plugin.alt.print.file.stylesheet = fileadmin/css/print_style.cssplugin.alt.print.file.template = fileadmin/media/scripts/printversion_content.tmpl
# Activation du lien vers le haut de page.content.linkToTop = <div align="right"><A href="#top"><font color="{$cSet.color2}" face="{$cSet.fontFace}" size={$cSet.size1}><B>To top</b></font></a></div><BR>
# Activation de RTE (Rich Text Editor = Editeur HTML, NdT).content.RTE_compliant = 1
# Activation Enoyer à un ami.plugin.tipafriend.color1 = plugin.tipafriend.color2 = plugin.tipafriend.color3 = plugin.tipafriend.wrap1 = <font face="Verdana, Arial, Helvetica, sans-serif" size=2 color=black> | </font>plugin.tipafriend.wrap2 = <font face="Verdana, Arial, Helvetica, sans-serif" size=1 color=black> | </font>
# Activation de l’indexage de recherchepage.config.index_enable = 1
# Définition d’une 'page' comme objet PAGE par défaut (type=0)lib.stdheader.10.stdWrap.wrap = tt_content.stdWrap.dataWrap = <A name="{field:uid}"></a>
page = PAGEpage.typeNum = 0page.stylesheet = fileadmin/mcucss/mcu_wn_htm_style.csspage.bodyTag = <body background="/fileadmin/pics/mcu/mcu_bg_blue.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">page.1 = TEMPLATEpage.1.marks.PAGE_UID = TEXTpage.1.marks.PAGE_UID.field = uidpage.1 { template = FILE template.file = fileadmin/mcu_nw_htm_template.htm workOnSubpart = DOCUMENT_BODY subparts.CONTENT_LEFT < styles.content.getLeft subparts.CONTENT_RIGHT < styles.content.getRight subparts.CONTENT_BORDER < styles.content.getBorder subparts.CONTENT < styles.content.get
# Navigation Haute subparts.TOPNAV = HMENU subparts.TOPNAV.special = directory subparts.TOPNAV.special.value = 224 subparts.TOPNAV.1 = TMENU subparts.TOPNAV.1 { NO.allWrap = |*| <span class="topnav"> | |</span> |*| ACT = 1 ACT.allWrap = |*| <span class="topnav"> | | </span> |*| }
# Navigation Basse subparts.BOTTOMNAV = HMENU subparts.BOTTOMNAV.special = directory subparts.BOTTOMNAV.special.value = 224 subparts.BOTTOMNAV.1 = TMENU subparts.BOTTOMNAV.1 { NO.allWrap = |*| <span class="bottomnav"> | |</span> |*| ACT = 1 ACT.allWrap = |*| <span class="bottomnav"> | |</span> |*|}
# Navigation Gauche subparts.LEFTNAV = HMENU subparts.LEFTNAV.special = directory subparts.LEFTNAV.special.value = 440 subparts.LEFTNAV.1 = TMENU subparts.LEFTNAV.1 { NO.allWrap = <div class="leftnav"> | </div> ACT = 1 ACT.allWrap = <div class="leftnav-act"> | </div> } subparts.LEFTNAV.1.2 = TMENU subparts.LEFTNAV.1.2 { NO.allWrap = <div class="leftnav"> | </div> ACT = 1 ACT.allWrap = <div class="leftnav-act"> | </div> } }
# Activation du panneau d’administration pour l’objet PAGE ‘page’:page.config.admPanel=1
# Anti-spam pour l’e-mailconfig {spamProtectEmailAddresses = 2spamProtectEmailAddresses_atSubst = (at)}
# PATH_INFO:config.simulateStaticDocuments = PATH_INFOconfig.simulateStaticDocuments_addTitle = 30#config.absRefPrefix = http://www.mcuniverse.com/
# N’oubliez pas d’ajouter la Feuille de Styles CSet pour que les marges de paragraphes fonctionnent.
Voila à quoi ressemble la partie basse de mon Gabarit Typo3 :
La Feuille de Styles est la troisième partie de ce tutoriel. Son utilisation simplifie tellement la gestion du design du site !Dans l’exemple ci-dessous, j’utilise encore un code couleur pour distinguer les différentes parties du Gabarit HTML et du Gabarit Typo3.
Note :
Ma Feuille de Styles contient toutes les classes qui sont utilisées par Typo3. Cela facilite les corrections quand on ajoute une extension et que le texte n’est pas affiché comme dans le reste du site : il n’y a alors qu’à regarder dans le code source quelle est la classe utilisée, et faire les ajustements nécessaires.
/* MCU Stylesheet - left 175 - right column 575 */
BODY { scrollbar-face-color:#003366; /* bleu foncé */ scrollbar-highlight-color:#FFFFFF; /* blanc */ scrollbar-3dlight-color:#C0C0C0; /* gris clair */ scrollbar-darkshadow-color:#000000; /* noir */ scrollbar-shadow-color:#808080; /* gris moyen */ scrollbar-arrow-color:#FFFFFF; /* blanc */ scrollbar-track-color:#E0E0E0; /* bleu-gris clair */ background-image: url(../pics/mcu/mcu_bg_blue.gif); margin: 0.25em 0.5em;}
/* Polices Générales */BODY, P,OL,UL,DIV { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;
color: black; font-style: normal;
line-height: 150%; margin: 0.25em 0.5em;}
/* Titres */H1,H2,H3,H4,H5 { font-family: Trebuchet MS, Verdana, sans-serif; color: #003366; /* bleu foncé */ font-variant: small-caps; font-stretch: wider; margin_bottom: 0.5em; border-bottom: thin dashed #003366;/* bleu foncé */}
/* Titre gras de la même taille que le texte */.title { font-family: Verdana, sans-serif; color: #00000; /* noir */ font-weight: bold; font-variant: small-caps; font-stretch: wider; font-size: 11px; padding: 0.2em}
/* Bordure bleue pour les tableaux */.border { border: 1px solid #COC8D4;/* bleu-gris clair */}
/* Footer */.footer { font-size: 10px; color: #003366;/* bleu foncé */ line-height: 150%; text-align: center;}
/* Dernière mise à jour */.lastupdate { font-size: 10px; color: #003366; /* bleu foncé */ line-height: 150%; text-align: center;}
/* Citation */.quote { color: #9B193D; /* Bordeaux foncé */ font-weight: 550;}
/* Liens dans le texte */a:link { font-weight: bold; color: #000000; /* noir */ text-decoration: none;}
a:visited { font-weight: bold; color: #000000; /* noir */ text-decoration: none;}
a:hover { font-weight: bold; color: Red; text-decoration: underline;}
/* Navigation haute */.topnav { background: #C0C8D4; /* gris-bleu clair */ font-family: Verdana, sans-serif; font-size: 11px; font-variant: small-caps;} .topnav a:link { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px;}.topnav a:visited { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px;}.topnav a:hover { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: underline; background: #003366; /* bleu foncé */ color: #FFFFFF; /* blanc */ padding: 2px;}.topnav_act a:active { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: underline; background: #003366; /* bleu foncé */ color: #FFFFFF; /* blanc */ padding: 2px;}
.topnav_act a:link { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px;}.topnav_act a:visted { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px;}.topnav_act a:hover { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: underline; background: #003366; /* bleu foncé */ color: #FFFFFF; /* blanc */ padding: 2px;}
/* Navigation basse */.bottomnav { font-family: Verdana, sans-serif; font-size: 11px; font-variant: small-caps;} .bottomnav a:link { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px;}.bottomnav a:visited { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px;}.bottomnav a:hover { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: underline; background: #003366; /* bleu foncé */ color: #FFFFFF; /* blanc */ padding: 2px;}.bottomnav_act a:active { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: underline; background: #003366; /* bleu foncé */ color: #FFFFFF; /* blanc */ padding: 2px;}
.bottomnav_act a:link { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px;}.bottomnav_act a:visted { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px;}.bottomnav_act a:hover { font-weight: bold; font-family: Verdana, sans-serif; font-variant: small-caps; text-decoration: underline; background: #003366; /* bleu foncé */ color: #FFFFFF; /* blanc */ padding: 2px;}
/* Navigation Gauche */.leftnav { font-family: Verdana, sans-serif; font-size: 11px; color: #003366; /* bleu foncé */} .leftnav a:link { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px; margin-left: 10px; border-bottom: 1px dotted #003366;/* bleu foncé */}.leftnav a:visited { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #003366; /* bleu foncé */ padding: 2px; margin-left: 10px; border-bottom: 1px dotted #003366;/* bleu foncé */}.leftnav a:active { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #003366; /* bleu foncé */ padding: 1px 2px 2px 2px; margin-left: 10px; border: 1px solid #003366; /* bleu foncé */ background-color: #C0C8D4; /* bleu-gris clair */}.leftnav a:hover { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #9B193D; /* bordeaux */ padding: 1px 2px 2px 2px; margin-left: 10px; border: 1px solid #003366;/* bleu foncé */ background-color: #C0C8D4; /* bleu-gris clair */}.leftnav_act a:link { font-size: 11px; font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #003366; /* bleu foncé */ padding: 1px 2px 2px 2px; margin-left: 10px; border: 1px solid #003366; /* bleu foncé */ background-color: #C0C8D4; /* bleu-gris clair */}.leftnav_act a:visited { font-size: 11px; font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #003366; /* bleu foncé */ padding: 1px 2px 2px 2px; margin-left: 10px; border: 1px solid #003366; /* bleu foncé */ background-color: #C0C8D4; /* bleu-gris clair */}.leftnav_act a:hover { font-size: 11px; font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #003366; /* bleu foncé */ padding: 1px 2px 2px 2px; margin-left: 10px; border: 1px solid #003366;/* bleu foncé */ background-color: #C0C8D4; /* bleu-gris clair */}
/* Spacer sous-menu Navigation Gauche */.leftnavspc { font-family: Verdana, sans-serif; font-size: 11px; font-variant: small-caps; font-weight: bolder; color: #003366; /* bleu foncé */ text-decoration: none; padding: 2px; margin-left: 15px; background-color: #FFFFFF; /* bleu foncé / border-bottom: thin dotted #9B193D; / bordeaux /}
/* Sous-menu Navigation Gauche */.leftnav1 { font-family: Verdana, sans-serif; font-size: 11px; color: #003366; /* bleu foncé */} .leftnav1 a:link { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: underline; color: #003366; /* bleu foncé */ padding: 2px; margin-left: 15px;}.leftnav1 a:visited { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: underline; color: #003366; /* bleu foncé */ padding: 2px; margin-left: 15px;}.leftnav1 a:active { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #C0C8D4; /* bleu clair */ padding: 2px; margin-left: 15px; background-color: #003366; /* bleu foncé */}.leftnav1 a:hover { font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #C0C8D4; /* bleu clair */ padding: 2px; margin-left: 15px; background-color: #003366; /* bleu foncé */}.leftnav1_act a:link { font-size: 11px; font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #C0C8D4; /* bleu clair */ padding: 2px; margin-left: 15px; background-color: #003366; /* bleu foncé */}.leftnav1_act a:visited { font-size: 11px; font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #C0C8D4; /* bleu clair */ padding: 2px; margin-left: 15px; background-color: #003366; /* bleu foncé */}.leftnav1_act a:hover { font-size: 11px; font-weight: bold; font-family: Verdana, sans-serif; text-decoration: none; color: #C0C8D4; /* bleu clair */ padding: 2px; margin-left: 15px; background-color: #003366; /* bleu foncé */}
/* Left Navigation SubMenu Level 2 */.leftnav2 { font-family: Verdana, sans-serif; font-size: 11px; color: #003366; /* bleu foncé */} .leftnav2 a:link { font-weight: normal; font-family: Verdana, sans-serif; text-decoration: underline; color: #003366; /* bleu foncé */ padding: 2px; margin-left: 20px;}.leftnav2 a:visited { font-weight: normal; font-family: Verdana, sans-serif; text-decoration: underline; color: #003366; /* bleu foncé */ padding: 2px; margin-left: 20px;}.leftnav2 a:active { font-weight: normal; font-family: Verdana, sans-serif; text-decoration: none; color: #9B193D; /* bordeaux */ padding: 2px; margin-left: 20px; border: 1px solid #003366; /* bleu foncé */}.leftnav2 a:hover { font-weight: normal; font-family: Verdana, sans-serif; color: #9B193D; /* bordeaux */ padding: 2px; margin-left: 20px; border: 1px solid #003366; /* bleu foncé */}.leftnav2_act a:link { font-size: 11px; font-weight: normal; font-family: Verdana, sans-serif; text-decoration: none; color: #9B193D; /* bordeaux */ padding: 2px; margin-left: 20px; border: 1px solid #003366; /* bleu foncé */}.leftnav2_act a:visited { font-size: 11px; font-weight: normal; font-family: Verdana, sans-serif; text-decoration: none; color: #9B193D; /* bordeaux */ padding: 2px; margin-left: 20px; border: 1px solid #003366; /* bleu foncé */}.leftnav2_act a:hover { font-size: 11px; font-weight: normal; font-family: Verdana, sans-serif; text-decoration: none; color: #9B193D; /* bordeaux */ padding: 2px; margin-left: 20px; border: 1px solid #003366; /* bleu foncé */}
/* Lien Feedback */.fback A { font-family: Verdana, Arial, Helvetica, sans-serif; color: #003366; /* bleu foncé */ font-weight: bold; font-size: 11px; font-stretch: wider; text-decoration: none; display: block; padding: 0.25em; border: 1px solid #003366; /* bleu foncé */}
.fback A:visited { font-family: Verdana, Arial, Helvetica, sans-serif; color: #003366; /* bleu foncé */ font-weight: bold; font-size: 11px; font-stretch: wider; text-decoration: none; display: block; padding: 0.25em; border: 1px solid #003366; /* bleu foncé */}.fback A:hover { font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; /* blanc */ font-weight: bold; font-size: 11px; font-stretch: wider; text-decoration: none; display: block; background: #003366; /* bleu foncé */ padding: 0.25em; border: 1px solid #333333; /* gris moyen */}
/* Champs des Formulaires */SELECT { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px }TEXTAREA { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px} INPUT { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px }
.caption { font-family : Verdana, sans-serif; font-size : 10px; color : #000000;}
.bulletlist { font-family : Verdana, sans-serif; font-size : 10px; color : #000000;}
.table { font-family : Verdana, sans-serif; font-size : 11px; color : #000000;}
.contenttable { font-family : Verdana, sans-serif; font-size : 11px; color : #000000; padding: 1em; margin-top: 1em; margin-bottom: 1em; border: 1px solid #C0C8D4;}
/*Formulaire Recherche */.searchform { font-family : Verdana, sans-serif; font-size : 11px; color : #000000; font-weight : normal;}.searchresultpagetitle { font-family : Verdana, sans-serif; font-size : 15px; color : #333333; font-weight : bold;}.searchresultcontent { font-family : Verdana, sans-serif; font-size : 11px; color : #000000; font-weight : normal;}.searchresultheader { font-family : Verdana, sans-serif; font-size : 14px; color : #333366; font-weight : bolder;}.searchmarkup { color : #000000;}.loginform { font-family : Verdana, sans-serif; font-size : 14px; color : #000000; font-weight : normal;}
/* Formulaire Mail */.mailform { font-family : Verdana, sans-serif; font-size : 11px; color : #003366; font-weight : normal;}.mailformrequired { font-family : Verdana, sans-serif; font-size : 11px; color : #003366; font-weight : bolder;}.mailformcomment { font-family : Verdana, sans-serif; font-size : 11px; color : #CC0000; font-weight : bolder;}.mailformradio { font-family : Verdana, sans-serif; font-size : 10px; color : #003366; font-weight : normal;}
.filelinks { font-family : Verdana, sans-serif; font-size : 12px; color : #000000;}.filelinkssize { font-family : Verdana, sans-serif; font-size : 12px; color : #000000;}
