DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Typo3 Template Basics

Author:Kasper Skårhøj
Created:2003-11-24T12:06:00
Changed by:
Changed:2003-11-26T10:00:18
Info 1:
Info 2:
Info 3:
Info 4:

EXT: Gabarits Typo3 – Les Bases

Extension Key: template_basics_doc

Copyright 2000-2003, Marlies Cohen, <:underline:``mc@mcuniverse.com <mailto: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 Bases 1

Gabarits Typo3 - Les Bases 2

Le Gabarit HTML 2

Exemple de Gabarit HTML 3

Le Gabarit Typo3 6

Gabarit Typo3 : Constants 6

Gabarit Typo3 : Setup 7

Gabarit Typo3 : Static 8

Feuille de Styles 9

Exemple de Feuille de Styles 9

Gabarits Typo3 - Les Bases

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 HTMLElément 2 : Le Gabarit Typo3Elé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/

Le Gabarit HTML

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

a

Image Principale

fileadmin/pics/*

Partie Statique

Rechercher | Envoyer à un ami | Imprimer | Haut de page

a

Rechercher | Envoyer à un ami | Imprimer | Haut de page

Ligne Feedback

<SPAN class="fback">

Partie Statique

!-- ###BORD_CONTENU### --><DIV class="lastupdate">

a

!-- ###BORD_CONTENU### --><DIV class="lastupdate">

Page mise à jour le :

Partie Dynamaique

Site and graphics created and maintained by Marlies Cohen ©

a

Site and graphics created and maintained by Marlies Cohen © 1997-2003* mcu(at)mcuniverse.com *

<P class="footer">

Partie Statique

Exemple de Gabarit HTML

<!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="#">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
              &copy; 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="#">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

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.

Gabarit Typo3- Constants

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 = #FFFFFF
tableCellColor = #FFFFFF
color = black
color1 = #003366
color2 = #003366
fontFace = Verdana
fontFace.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.css
plugin.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 recherche
page.config.index_enable = 1

Gabarit Typo3- Setup

# 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 = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/mcucss/mcu_wn_htm_style.css
page.bodyTag = <body background="/fileadmin/pics/mcu/mcu_bg_blue.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
page.1 = TEMPLATE
page.1.marks.PAGE_UID = TEXT
page.1.marks.PAGE_UID.field = uid
page.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">&nbsp;&#124;&nbsp;|</span> |*|
      ACT = 1
      ACT.allWrap =  |*| <span class="topnav">&nbsp;&#124;&nbsp;| </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">&nbsp;&#124;&nbsp;|</span> |*|
      ACT = 1
      ACT.allWrap = |*| <span class="bottomnav">&nbsp;&#124;&nbsp;|</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-mail
config {
spamProtectEmailAddresses = 2
spamProtectEmailAddresses_atSubst = (at)
}


# PATH_INFO:
config.simulateStaticDocuments = PATH_INFO
config.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.

Gabarit Typo3 - Static

Voila à quoi ressemble la partie basse de mon Gabarit Typo3 :

img-1

Feuille de Styles

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.

Exemple de Feuille de Styles

/* 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;
}

Gabarits Typo3 – Les Bases- 17