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:2002-11-01T00:32:00
Changed:2003-05-12T15:24:23
Author:Marlies Cohen
Email:mc@mcuniverse.com
Info 3:
Info 4:

EXT:Typo3 Template Basics

Extension Key: template_basics_doc

Copyright 2000-2003, Marlies Cohen, <mc@mcuniverse.com>

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 of Contents

Typo3 Template Basics 1

Typo3 Template Basics 2

HTML Template 2

HTML Template Example 3

Typo3 Template 6

Typo3 Template Constants 6

Typo3 Template Setup 7

Typo3 Template Static 8

Stylesheet 9

Stylesheet Example 9

Typo3 Template Basics

After a lot of trial and error I created myself this document to help me easily see how the HTML template, the Typo3 Template and my Stylesheet worked together. As each section in my site has a different color scheme I found it handy to have a basic working combination that I could easily adjust.

Reading the Typo3 newsgroup I know, that there are a lot of others who find it confusing. So, I am making my info public.

A Typo3 page is based on 3 Parts.

Part 1: The HTML TemplatePart 2: The Typo3 TemplatePart 3: The CSS Stylesheet

To see how all templates interact with each other check out my online version of this tutorial here: http://www.mcuniverse.com/index.php/T3_Template_Basics/847/0/

HTML Template

The HTML template is where you design the look of your page. It has static parts, parts that stay the same throughoutthe site/section and dynamic parts, parts that change with each page on your site.

I usually work with tables to create the foundation of my site. My table is 750px wide, has 2 columns and a number of rows.

The width of my table is 750px and I have 2 columns (just like on this page here). One column is narrower 175px than the other where the main text info goes 575px. I also place everything in a number of rows.

  • In the top row goes my main picture. On this page it is my Computer Tutor Picture. It is the same for all pages in this section of my site (static).
  • On the row below goesmy Top Navigation. I place this centered inside a table with no border color and only 1 cell. Here I place my Typo3 marker ###TOPNAV### so that the navigation will be automatically generated (dynamic).
  • The 3rd row is split in two columns.
  • The Left Column contains my Leftside Navigation, so I place my Typo3 marker ###LEFTNAV### here so that the navigation will be automatically generated (dynamic).
  • The Right Column contains my Page Content, so I place my Typo3 marker ###CONTENT### here. When I add content to my page it will go in the Normal column (dynamic).
  • The 4th row contains all my links that I could not fit any place else and they are the same on all pages (static).
  • Row 5 is where I put the date when I update the page. I have not been able to get it automatically generated, so I use the Border Column to put it in manually. To be able to do this I place the Typo3 marker ###CONTENT_BORDER### here.
  • The 6th row stays the same on all my pages (static). So I just write the info in the table cell and format the paragraph with the desired class.
  • The last row has a repeat of my top navigation, but this time it is called Bottom Navigation. The reason for this is that on some of my pages the background is different here than at the top and I need to be able to define different classes. I place my Typo3 marker ###BOTTOMNAV### here so that the navigation will be automatically generated (dynamic).

Top Section Picture

a

Top Section Picture

fileadmin/pics/*

This Part is Static

Top Navigation - this table is 550px wide with no border and is 1

a

Top Navigation - this table is 550px wide with no border and is 1 cell<!-- ###TOPNAV### --><SPAN class="topnav">

This Part is Dynamic

Leftside Navigation

a

Leftside Navigation

<!-- ###LEFTNAV### -->

<DIV class="leftnav">

This Part is Dynamic

b

Page Content

<!-- ###CONTENT### -->

This Part is Dynamic

Search | Tip a Friend | Print | To Top

a

Search | Tip a Friend | Print | To Top

Feedback Row

<SPAN class="fback">

This Part is Static

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

a

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

Page updated:

This Part is Dynamic

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">

This Part is Static

Bottom Navigation - this table is 550px wide with no border and is1

a

Bottom Navigation - this table is 550px wide with no border and is1 cell<!-- ###BOTTOMNAV### --><SPAN class="bottomnav">

This Part is Dynamic

Note

Set Typo3 Template Setup link to this fileSet Typo3 Template Setuplink to the background imageSet Typo3 Template Setup link to the stylesheetMake sure the link to the stylesheet in the HTML Template links to the correct file.

HTML Template Example

<!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">
            <!-- Top Navigation -->
          <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">
        <!-- Leftside Navigation -->
          <!--###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>
<!-- Start Feedback Section -->
<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>
            <!-- End Feedback Section -->
          </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">
            <!-- LASTUPDATE -->
            <!-- ###CONTENT_BORDER### -->
            <DIV class="lastupdate">lastupdate</DIV>
            <!-- ###CONTENT_BORDER### -->
          </td>
        </tr>
        <!-- Start 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>
        <!-- End 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>

Typo3 Template

The Typo3 Template tells Typo3 how it has to interact with the HTML Template and the CSS Stylesheet and how Typo3 is used to display the webpage.

The Typo3 Template is divided into two main sections: Constants and Setup plus Static. Scroll down to read the content of all 3 sections.

Typo3 Template 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
}

# Image maximum widths, pixels
styles.content.imgtext.maxW = 600

# Targets, empty for no-frames websites
PAGE_TARGET =
content.pageFrameObj =


# Print Style, make sure link to proper stylesheet is set
plugin.alt.print.file.stylesheet = fileadmin/css/print_style.css
plugin.alt.print.file.template = fileadmin/media/scripts/printversion_content.tmpl

# Activates Links to top
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>

# Activates RTE
content.RTE_compliant = 1

# Activates Tip a Friend
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>


# Indexed Search activated
page.config.index_enable = 1

Typo3 Template Setup

# Setting up 'page' to be the default PAGE object (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


# Top Navigation
   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> |*|
}


# Bottom Navigation
   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> |*|
}


# Leftside Navigation
   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>
   }
}


 # Enabling the admin panel for the 'page' PAGE object:
page.config.admPanel=1


# Spam Protection for Email
config {
spamProtectEmailAddresses = 2
spamProtectEmailAddresses_atSubst = (at)
}

# Set up PATH_INFO:
config.simulateStaticDocuments = PATH_INFO
config.simulateStaticDocuments_addTitle = 30
#config.absRefPrefix = http://www.mcuniverse.com/


# Don't forget to add CSet Stylesheet for P margins to work properly!

Typo3 Template Static

This is how the lower part of my Typo3 Template looks:

img-1

Stylesheet

The Stylesheet is the 3rd part in my Typo3 Template Basics Tutorial. Using a stylesheet to define the look of the website makes life so much easier. In the example below I am again color coding the different parts to match the colors in the HTML Template and the Typo3 Template.

Note:

My stylesheet contains all the classes that are used by Typo3. That makes it easier to define the look when using an extension and suddenly the text doesn't look like the rest of the site. All you have to do then check the source code and find the class tag that's being used and adjust it.

Stylesheet Example

/* MCU Stylesheet - left 175 - right column 575 */

BODY {
 scrollbar-face-color:#003366;  /* dark blue */
 scrollbar-highlight-color:#FFFFFF;  /* white */
 scrollbar-3dlight-color:#C0C0C0;  /* lte grey */
 scrollbar-darkshadow-color:#000000; /* black */
 scrollbar-shadow-color:#808080;  /* medium grey */
 scrollbar-arrow-color:#FFFFFF;  /* white */
 scrollbar-track-color:#E0E0E0;  /* lite blue grey */
   background-image: url(../pics/mcu/mcu_bg_blue.gif);
   margin: 0.25em 0.5em;
}


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

/* Headings */
H1,H2,H3,H4,H5 {
   font-family: Trebuchet MS, Verdana, sans-serif;
   color: #003366;   /* dark blue */
   font-variant: small-caps;
   font-stretch: wider;
   margin_bottom: 0.5em;
   border-bottom: thin dashed #003366;    /* dark blue */
}

/* Bold Title same as text size */
.title {
   font-family: Verdana, sans-serif;
   color: #00000;   /* black */
   font-weight: bold;
   font-variant: small-caps;
   font-stretch: wider;
   font-size: 11px;
   padding: 0.2em
}


/* Blue Border for Tables */
.border {
   border: 1px solid #COC8D4;        /* lite blue grey */
}

/* Footer */
.footer {
   font-size: 10px;
   color: #003366;                        /* dark blue */
   line-height: 150%;
   text-align: center;
}


/* Last Update */
.lastupdate {
   font-size: 10px;
   color: #003366;                        /* dark blue */
   line-height: 150%;
   text-align: center;
}


/* Quote */
.quote  {
  color: #9B193D;                          /* dark burgundy */
  font-weight: 550;
}


/* In Text Hyperlinks */
a:link {
 font-weight: bold;
 color: #000000;                    /* black */
 text-decoration: none;
}
a:visited {
 font-weight: bold;
 color: #000000;                         /* black */
 text-decoration: none;
}
a:hover {
 font-weight: bold;
 color: Red;
 text-decoration: underline;
}


/* Top Navigation Menu */
.topnav {
   background: #C0C8D4;    /* lite blue grey */
   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;                       /* dark blue */
   padding: 2px;
}
.topnav a:visited {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   font-variant: small-caps;
   text-decoration: none;
   color: #003366;                     /* dark blue */
   padding: 2px;
}
.topnav a:hover {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   font-variant: small-caps;
   text-decoration: underline;
   background: #003366;          /* dark blue */
   color: #FFFFFF;                     /* white */
   padding: 2px;
}
.topnav_act a:active {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   font-variant: small-caps;
   text-decoration: underline;
   background: #003366;      /* dark blue */
   color: #FFFFFF;                     /* white */
   padding: 2px;
}
.topnav_act a:link {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   font-variant: small-caps;
   text-decoration: none;
   color: #003366;                            /* dark blue */
   padding: 2px;
}
.topnav_act a:visted {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   font-variant: small-caps;
   text-decoration: none;
   color: #003366;                          /* dark blue */
   padding: 2px;
}
.topnav_act a:hover {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   font-variant: small-caps;
   text-decoration: underline;
   background: #003366;      /* dark blue */
   color: #FFFFFF;                     /* white */
   padding: 2px;
}


/* Bottom Navigation Menu */
.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;                          /* dark blue */
   padding: 2px;
}
.bottomnav a:visited {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   font-variant: small-caps;
   text-decoration: none;
   color: #003366;                          /* dark blue */
   padding: 2px;
}
.bottomnav a:hover {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   font-variant: small-caps;
   text-decoration: underline;
   background: #003366;       /* dark blue */
   color: #FFFFFF;                     /* white */
   padding: 2px;
}
.bottomnav_act a:active {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   font-variant: small-caps;
   text-decoration: underline;
   background: #003366;           /* dark blue */
   color: #FFFFFF;                     /* white */
   padding: 2px;
}
.bottomnav_act a:link {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   font-variant: small-caps;
   text-decoration: none;
   color: #003366;                         /* dark blue */
   padding: 2px;
}
.bottomnav_act a:visted {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   font-variant: small-caps;
   text-decoration: none;
   color: #003366;                       /* dark blue */
   padding: 2px;
}
.bottomnav_act a:hover {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   font-variant: small-caps;
   text-decoration: underline;
   background: #003366;           /* dark blue */
   color: #FFFFFF;                     /* white */
   padding: 2px;
}


/* Left Navigation Menu */
.leftnav {
   font-family: Verdana, sans-serif;
   font-size: 11px;
   color: #003366;                        /* dark blue */
}
.leftnav a:link {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #003366;                          /* dark blue */
   padding: 2px;
   margin-left: 10px;
   border-bottom: 1px dotted #003366;     /* dark blue */
}
.leftnav a:visited {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #003366;                            /* dark blue */
   padding: 2px;
   margin-left: 10px;
   border-bottom: 1px dotted #003366;     /* dark blue */
}
.leftnav a:active {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #003366;                     /* dark blue */
   padding: 1px 2px 2px 2px;
   margin-left: 10px;
   border: 1px solid #003366;       /* dark blue */
   background-color: #C0C8D4;         /* lite blue grey */
}
.leftnav a:hover {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #9B193D;                         /* burgundy */
   padding: 1px 2px 2px 2px;
   margin-left: 10px;
   border: 1px solid #003366;  /* dark blue */
   background-color: #C0C8D4;    /* lite blue grey */
}
.leftnav_act a:link {
   font-size: 11px;
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #003366;                     /* dark blue */
   padding: 1px 2px 2px 2px;
   margin-left: 10px;
   border: 1px solid #003366;       /* dark blue */
   background-color: #C0C8D4;       /* lite blue grey */
}
.leftnav_act a:visited {
   font-size: 11px;
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #003366;                          /* dark blue */
   padding: 1px 2px 2px 2px;
   margin-left: 10px;
   border: 1px solid #003366;       /* dark blue */
   background-color: #C0C8D4;    /* lite blue grey */
}
.leftnav_act a:hover {
   font-size: 11px;
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #003366;                            /* dark blue */
   padding: 1px 2px 2px 2px;
   margin-left: 10px;
   border: 1px solid #003366; /* dark blue */
   background-color: #C0C8D4;    /* lite blue grey */
}


/* Left Navigation SubMenu Spacer */
.leftnavspc {
   font-family: Verdana, sans-serif;
   font-size: 11px;
   font-variant: small-caps;
   font-weight: bolder;
   color: #003366;                         /* dark blue */
   text-decoration: none;
   padding: 2px;
   margin-left: 15px;
   background-color: #FFFFFF;   /* dark blue /
   border-bottom: thin dotted #9B193D; / burgundy /
}


/* Left Navigation SubMenu */
.leftnav1 {
   font-family: Verdana, sans-serif;
   font-size: 11px;
   color: #003366;                           /* dark blue */
}
.leftnav1 a:link {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: underline;
   color: #003366;                            /* dark blue */
   padding: 2px;
   margin-left: 15px;
}
.leftnav1 a:visited {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: underline;
   color: #003366;                     /* dark blue */
   padding: 2px;
   margin-left: 15px;
}
.leftnav1 a:active {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #C0C8D4;                           /* lite blue */
   padding: 2px;
   margin-left: 15px;
   background-color: #003366;          /* dark blue */
}
.leftnav1 a:hover {
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #C0C8D4;                     /* lite blue */
   padding: 2px;
   margin-left: 15px;
   background-color: #003366;   /* dark blue */
}
.leftnav1_act a:link {
   font-size: 11px;
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #C0C8D4;                         /* lite blue */
   padding: 2px;
   margin-left: 15px;
   background-color: #003366;   /* dark blue */
}
.leftnav1_act a:visited {
   font-size: 11px;
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #C0C8D4;                      /* lite blue */
   padding: 2px;
   margin-left: 15px;
   background-color: #003366;          /* dark blue */
}
.leftnav1_act a:hover {
   font-size: 11px;
   font-weight: bold;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #C0C8D4;                        /* lite blue */
   padding: 2px;
   margin-left: 15px;
   background-color: #003366;   /* dark blue */
}

/* Left Navigation SubMenu Level 2 */
.leftnav2 {
   font-family: Verdana, sans-serif;
   font-size: 11px;
   color: #003366;                         /* dark blue */
}
.leftnav2 a:link {
   font-weight: normal;
   font-family: Verdana, sans-serif;
   text-decoration: underline;
   color: #003366;                    /* dark blue */
   padding: 2px;
   margin-left: 20px;
}
.leftnav2 a:visited {
   font-weight: normal;
   font-family: Verdana, sans-serif;
   text-decoration: underline;
   color: #003366;                     /* dark blue */
   padding: 2px;
   margin-left: 20px;
}
.leftnav2 a:active {
   font-weight: normal;
   font-family: Verdana, sans-serif;
   text-decoration: none;
    color: #9B193D;                           /* burgundy */
   padding: 2px;
   margin-left: 20px;
   border: 1px solid #003366;   /* dark blue */
}
.leftnav2 a:hover {
   font-weight: normal;
   font-family: Verdana, sans-serif;
    color: #9B193D;                            /* burgundy */
   padding: 2px;
   margin-left: 20px;
   border: 1px solid #003366;    /* dark blue */
}
.leftnav2_act a:link {
   font-size: 11px;
   font-weight: normal;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #9B193D;                       /* burgundy */
   padding: 2px;
   margin-left: 20px;
   border: 1px solid #003366;    /* dark blue */
}
.leftnav2_act a:visited {
   font-size: 11px;
   font-weight: normal;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #9B193D;                            /* burgundy */
   padding: 2px;
   margin-left: 20px;
   border: 1px solid #003366;   /* dark blue */
}
.leftnav2_act a:hover {
   font-size: 11px;
   font-weight: normal;
   font-family: Verdana, sans-serif;
   text-decoration: none;
   color: #9B193D;                      /* burgundy */
   padding: 2px;
   margin-left: 20px;
   border: 1px solid #003366;    /* dark blue */
}


/* Feedback Links */
.fback A {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #003366;                        /* dark blue */
   font-weight: bold;
   font-size: 11px;
   font-stretch: wider;
   text-decoration: none;
   display: block;
   padding: 0.25em;
   border: 1px solid #003366;   /* dark blue */
}
.fback A:visited {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #003366;                        /* dark blue */
   font-weight: bold;
   font-size: 11px;
   font-stretch: wider;
   text-decoration: none;
   display: block;
   padding: 0.25em;
   border: 1px solid #003366;   /* dark blue */
}
.fback A:hover {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: #FFFFFF;                        /* white */
   font-weight: bold;
   font-size: 11px;
   font-stretch: wider;
   text-decoration: none;
   display: block;
   background: #003366;         /* dark blue */
   padding: 0.25em;
   border: 1px solid #333333;   /* med grey */
}


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


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


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

img-2 Template Basics - 18