ARCHIVED - Government of Canada Common Look and Feel Template Technical Guide

2.1.1 Bilingual Welcome Page template

This template must be used for Web sites that are required to be available simultaneously in both official languages. It provides language links to content in both languages. Different templates that display the official languages in the prescribed order are available for Web sites of institutions headquartered in Quebec and for institutions headquartered in the rest of Canada.

2.1.2 Unilingual Welcome Page template

This template must only be used for sites that are allowed to offer information in one official language only. The unilingual Welcome Page template provides a language link to content in one language and includes a language notice in both official languages indicating that service is only provided in one official language.

2.1.3 Multilingual Welcome Page template

This template may be used by institutions to offer content in one or more languages in addition to content offered simultaneously in both official languages. The multilingual Welcome Page template allows other languages to be supported by including additional language links below the mandatory English and French links. These additional language links may be configured for any languages that need to be supported.

2.2.1 Text-based message area template (recommended)

This template divides the message area into an image-based top section, and a text-based bottom section. Text must not be embedded in the image; it must be kept separate and displayed instead in the foreground. The text-based lower section contains the institution name in both official languages.

This template must only be used for the main point of entry for an institutional Web site or sub site.

Note: This template is recommended for Welcome Pages because the text-based section of the message area is more accessible than the image-only message area of the image-based message area template.

2.2.2 Image-based message area template

This template includes an image in the entire message area. If this template is adopted, text should not be embedded in the image, but displayed in the foreground instead.

This template may only be used for the main point of entry for an institutional Web site or sub site.

Note: The text-based message area template is recommended for Welcome Pages because the text-based section of the message area is more accessible than the image-only message area of this template.

2.3.1 Bilingual Welcome Page templates

• Text-based message area bilingual Welcome Page template - Institutions headquartered outside Quebec (example only)
• Text-based message area bilingual Welcome Page template - Institutions headquartered in Quebec (example only)
• Text-based message area bilingual Welcome Page template - Institutions headquartered outside Quebec using the Coat of Arms (example only)
• Text-based message area bilingual Welcome Page template - Institutions headquartered in Quebec using the Coat of Arms (example only)
• Image-based message area bilingual Welcome Page template - Institutions headquartered outside Quebec (example only)
• Image-based message area bilingual Welcome Page template - Institutions headquartered in Quebec (example only)

2.3.2 Unilingual Welcome Page templates

• Text-based message area unilingual English Welcome Page template (example only)
• Text-based message area unilingual French Welcome Page template (example only)
• Text-based message area unilingual English Welcome Page template using the Coat of Arms (example only)
• Text-based message area unilingual French Welcome Page template using the Coat of Arms (example only)
• Image-based message area unilingual English Welcome Page template (example only)
• Image-based message area unilingual French Welcome Page template (example only)

2.3.3 Multilingual Welcome Page templates

• Text-based message area multilingual Welcome Page template - Institutions headquartered outside Quebec (example only)
• Text-based message area multilingual Welcome Page template - Institutions headquartered in Quebec (example only)
• Text-based message area multilingual Welcome Page template - Institutions headquartered outside Quebec using the Coat of Arms (example only)
• Text-based message area multilingual Welcome Page template - Institutions headquartered in Quebec using the Coat of Arms (example only)
• Image-based message area multilingual Welcome Page template - Institutions headquartered outside Quebec (example only)
• Image-based message area multilingual Welcome Page template - Institutions headquartered in Quebec (example only)

3.1.1 Content page template for bilingual and multilingual sites

This template must be used for all English and French content pages on bilingual and multilingual sites. This content page template is available in English and French. The English and French templates are unilingual except for a link in the common menu to the content in the other official language.

For multilingual site, links to content in languages other than English or French must not be included in the common menu bar. In cases where links to content in languages other than English or French are required, those links should be included in the left-hand menu, the right-hand menu or the content area.

3.1.2 Content page template for unilingual sites

This template must be used for all content pages on unilingual sites; this template is available in English and French. The English and French templates are unilingual except for a link in the common menu bar to an official languages notice.

3.1.3 Content page template for languages other than English or French

This template must be used for any content pages where the content is provided primarily in a language other than English or French. Different templates are available for institutions headquartered in Quebec and for institutions headquartered in the rest of Canada.

3.2.1 Three-column template

This template contains a three-column layout that consists of a central content area with side menus to the left and the right. The institution's primary menu page and all sub site main pages must apply the three-column layout. Although the three-column template must be used for all top-level pages, it can also be used for Web applications and secondary pages on an institutional Web site.

Note: The three-column layout is mandatory for the main pages of an institutional Web. It is however recommended that a two-column layout be used instead for secondary pages, to benefit from an increased content area and allow for shorter Web pages.

3.2.2 Two-column template

This template contains a two-column layout that consists of a central content area with a left side menu. This template is recommended for all secondary pages of an institutional Web site. The two-column layout allows for shorter Web pages than the three-column layout by increasing the width of the content area. This template may also be used for Web applications.

Note: In cases where it is not possible to fit content within the two-column template without exceeding the content area width, the one-column template should be used instead.

3.2.3 One-column template

This template contains a one-column layout that consists of only a central content area. This layout should only be used in cases where it is not possible to fit the content within the two-column template on secondary pages without exceeding the content area width.

3.3.1 Content page templates for bilingual sites

• Three column content page template for bilingual sites - English (example only)
• Three column content page template for bilingual sites - French (example only)
• Three column content page template for bilingual sites using the Coat of Arms - English (example only)
• Three column content page template for bilingual sites using the Coat of Arms - French (example only)
• Two column content page template for bilingual sites - English (example only)
• Two column content page template for bilingual sites - French (example only)
• One column content page template for bilingual sites - English (example only)
• One column content page template for bilingual sites - French (example only)

3.3.2 Content page templates for unilingual sites

• Three column content page template for unilingual sites - English (example only)
• Three column content page template for unilingual sites - French (example only)
• Three column content page template for unilingual sites using the Coat of Arms - English (example only)
• Three column content page template for unilingual sites using the Coat of Arms - French (example only)
• Two column content page template for unilingual sites - English (example only)
• Two column content page template for unilingual sites - French (example only)
• One column content page template for unilingual sites - English (example only)
• One column content page template for unilingual sites - French (example only)

3.3.3 Content page templates for languages other than English or French

• Three column content page template - Spanish - Institutions headquartered outside Quebec (example only)
• Three column content page template - Spanish - Institutions headquartered in Quebec (example only)
• Three column content page template - Spanish - Institutions headquartered outside Quebec using the Coat of Arms (example only)
• Three column content page template - Spanish - Institutions headquartered in Quebec using the Coat of Arms (example only)
• Two column content page template - Spanish - Institutions headquartered outside Quebec (example only)
• Two column content page template - Spanish - Institutions headquartered in Quebec  (example only)
• One column content page template - Spanish - Institutions headquartered outside Quebec (example only)
• One column content page template - Spanish - Institutions headquartered in Quebec (example only)

4.1.1 Unilingual server message page template

This template must be used for server messages of unilingual sites or sites where the language preference of the client is known.

4.1.2 Bilingual server message page template

This template must be used for server messages of bilingual and multilingual sites where the language preference of the client is not known. Different templates that display the official languages in the prescribed order are available for Web sites of institutions headquartered in Quebec and for institutions headquartered in the rest of Canada.

4.2.1 Unilingual server message page templates

• Unilingual English generic server message page template (example only)
• Unilingual French generic server message page template (example only)
• Unilingual English generic server message page template using the Coat of Arms (example only)
• Unilingual French generic server message page template using the Coat of Arms (example only)
• Unilingual English HTTP Error 404 server message page (example only)
• Unilingual French HTTP Error 404 server message page (example only)

4.2.2 Bilingual server message page templates

• Bilingual server message page template - Institutions headquartered outside Quebec (example only)
• Bilingual server message page template - Institutions headquartered in Quebec (example only)
• Bilingual server message page template - Institutions headquartered outside Quebec using the Coat of Arms (example only)
• Bilingual server message page template - Institutions headquartered in Quebec using the Coat of Arms (example only)
• Bilingual HTTP Error 404 server message page - Institutions headquartered outside Quebec (example only)
• Bilingual HTTP Error 404 server message page - Institutions headquartered in Quebec (example only)

6.3.1 Configuring css\wp-pa-institution.css

Both the layout and design of the Welcome Page templates are controlled using CSS. This section provides instructions for configuring some of the visual elements in the Welcome Page templates by modifying the css\wp-pa-institution.css file.

6.3.2 Configuring css\base-institution.css

Both the layout and design of the content page templates are controlled using CSS. This section provides instructions for configuring some of the visual elements in the content page templates by modifying the css\base-institution.css file.

Note: To ensure consistent results on a wide range of browser/platform combinations, do not make any changes to the css\base-institution.css file other than what is specified in this section.

6.5.1 Bilingual Welcome Page template

These instructions apply to the unilingual Welcome Page template selected in section 6.1 (Selecting a Welcome Page template).

1. Modify all image and CSS file paths in the Welcome Page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
   1. ../images/
   2. ../css/
2. Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the Welcome Page template.
   1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif.
   2. For institutions headquartered outside Quebec, the alt text must be the institution name in English, a space, a pipe, another space, followed by the institution name in French (for example, alt="Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada").
   3. For institutions headquartered in Quebec, the alt text must be the institution name in French, a space, a pipe, another space, followed by the institution name in English (for example, alt="Secrétariat du Conseil du Trésor du Canada | Treasury Board of Canada Secretariat").
3. Change the message floating over the image in the message area. The message must be bilingual. In cases where the message needs to be hidden, add "class="hidden"" to the h1 element. This will make the message invisible while allowing it to still be used as a text equivalent by adaptive technologies.
   1. For institutions headquartered outside Quebec, the message must include the English text, a space, a pipe, another space, followed by the French text (for example, <h1>Welcome | <span lang="fr">Bienvenue</span></h1>)
   2. For institutions headquartered in Quebec, the message must include the French text, a space, a pipe, another space, followed by the English text (for example, <h1>Bienvenue | <span lang="en">Welcome</span></h1>)
4. If the text-based message area template is being used, change the institution names in the text-based message area. The institution name must be provided in both official languages.
   1. For institutions headquartered outside Quebec, the English institution name must be on the left and the French institution name must be on the right.
      
      <div class="headtitleLft">Institution Name</div>
<div class="headtitleRgt" lang="fr">Nom de l'institution</div>
   2. For institutions headquartered in Quebec, the French institution name must be on the left and the English institution name must be on the right.
      
      <div class="headtitleLft">Nom de l'institution</div>
<div class="headtitleRgt" lang="en">Institution Name</div>
5. Change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in English:
   1. English
   2. Important Notices
6. Change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in French:
   1. Français
   2. Avis importants
7. Populate the metadata elements with appropriate values.
8. Provide an appropriate title within the title element. The title must be bilingual.
   1. For institutions headquartered outside Quebec, the title must include the English text, a space, a pipe, another space, followed by the French text (for example, <title>Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada</title>).
   2. For institutions headquartered in Quebec, the title must include the French text, a space, a pipe, another space, followed by the English text for example, <title>Secrétariat to Conseil du Trésor du Canada | Treasury Board of Canada Secretariat</title>).
9. Change the filename of the Welcome Page template to the filename that the institutional Web server will load by default (for example, index.html).
10. Copy the Welcome Page template to the main entry point of the site or sub site. The main entry point is usually the root folder (for example, www.tbs-sct.gc.ca/).

6.5.2 Unilingual Welcome Page template

These instructions apply to the unilingual Welcome Page template selected in section 6.1 (Selecting a Welcome Page template).

1. Modify all image and CSS file paths in the Welcome Page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
   1. ../images/
   2. ../css/
2. Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the Welcome Page template.
   1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif.
   2. For unilingual English sites, the alt text must be the institution name in English (for example, alt="Treasury Board of Canada Secretariat").
   3. For unilingual French sites, the alt text must be the institution name in French (for example, alt="Secrétariat du Conseil du Trésor du Canada").
3. Change the message floating over the image in the message area. The message must be in the language of the page. In cases where the message needs to be hidden, add "class="hidden"" to the h1 element. This will make the message invisible while allowing it to still be used as a text equivalent by adaptive technologies.
   1. For unilingual English sites, the message must be in English (for example, <h1>Welcome</h1>)
   2. For unilingual French sites, the message must be in French (for example, <h1>Bienvenue</h1>)
4. If the text-based message area template is being used, change the institution names in the text-based message area. The institution name must be provided in the language of the page.
   1. For unilingual English sites, the English institution name must be on the left. <div class="headtitleLft">Institution Name</div>
   2. For unilingual French sites, the French institution name must be on the left. <div class="headtitleLft">Nom de l'institution</div>
5. For unilingual English sites, change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in English:
   1. Enter
   2. Important Notice
6. For unilingual French sites, change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in French:
   1. Entrer
   2. Avis importants
7. Populate the metadata elements with appropriate values.
8. Provide an appropriate title within the title element. The title must be unilingual..
   1. For unilingual English sites, the title must be in English (for example, <title>Treasury Board of Canada Secretariat</title>).
   2. For unilingual French sites, the title must be in French (for example, <title>Secrétariat to Conseil du Trésor du Canada</title>).
9. Change the filename of the Welcome Page template to the filename that the institutional Web server will load by default for example, index.html).
10. Copy the Welcome Page template to the main entry point of the site or sub site. The main entry point is usually the root folder (for example, www.tbs-sct.gc.ca/).

6.5.3 Multilingual Welcome Page template

These instructions apply to the multilingual Welcome Page template selected in section 6.1 (Selecting a Welcome Page template).

1. Modify all image and CSS file paths in the Welcome Page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
   1. ../images/
   2. ../css/
2. Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the Welcome Page template
   1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif.
   2. For institutions headquartered outside Quebec, the alt text must include the institution name in English, a space, a pipe, another space, followed by the institution name in French (for example, alt="Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada").
   3. For institutions headquartered in Quebec, the alt text must include the institution name in French, a space, a pipe, another space, followed by the institution name in English (for example, alt="Secrétariat du Conseil du Trésor du Canada | Treasury Board of Canada Secretariat").
3. Change the message floating over the image in the message area. The message must be bilingual. In cases where the message needs to be hidden, add "class="hidden"" to the h1 element. This will make the message invisible while allowing it to still be used as a text equivalent by adaptive technologies.
   1. For institutions headquartered outside Quebec, the message must include the English text, a space, a pipe, another space, followed by the French text (for example, <h1>Welcome | <span lang="fr">Bienvenue</span></h1>)
   2. For institutions headquartered in Quebec, the message must include the French text, a space, a pipe, another space, followed by the English text (for example, <h1>Bienvenue | <span lang="en">Welcome</span></h1>)
4. If the text-based message area template is being used, change the institution names in the text-based message area. The institution name must be provided in both official languages.
   1. For institutions headquartered outside Quebec, the English institution name must be on the left and the French institution name must be on the right.
      
      <div class="headtitleLft">Institution Name</div>
<div class="headtitleRgt" lang="fr">Nom de l'institution</div>
   2. For institutions headquartered in Quebec, the French institution name must be on the left and the English institution name must be on the right.
      
      <div class="headtitleLft">Nom de l'institution</div>
<div class="headtitleRgt" lang="en">Institution Name</div>
5. Change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in English:
   1. English
   2. Important Notices
6. Change the paths of the following links in the Welcome Page template to ensure they point to the appropriate institutional pages in French:
   1. Français
   2. Avis importants
7. Change the paths of the language links other than English or French to ensure they point to the appropriate institutional pages in the same language.
8. Populate the metadata elements with appropriate values.
9. Provide an appropriate title within the title element. The title must be bilingual.
   1. For institutions headquartered outside Quebec, the title must include the English text, a space, a pipe, another space, followed by the French (for example, <title>Treasury Board of Canada Secretariat | Secrétariat to Conseil du Trésor du Canada</title>).
   2. For institutions headquartered in Quebec, the title must include the French text, a space, a pipe, another space, followed by the English text (for example, <title>Secrétariat to Conseil du Trésor du Canada | Treasury Board of Canada Secretariat</title>).
10. Change the filename of the Welcome Page template to the filename that the institutional Web server will load by default (for example, index.html).
11. Copy the Welcome Page template to the main entry point of the site or sub site. The main entry point is usually the root folder (for example, www.tbs-sct.gc.ca/).

6.6.1 Content page template for bilingual and multilingual sites

This template must be used for all English and French content pages on bilingual and multilingual sites.

1. Modify all image and CSS file paths in the *col-eng.html and *col-fra.html files so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
   1. ../images/
   2. ../css/
2. Change the image width, height, and alt text specified for the institutional signature (images/sig-eng.gif and images/sig-fra.gif) in the *col-eng.html and *col-fra.html files.
   1. The specified width and height must be consistent with the width and height for images/sig-eng.gif and images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.19 (Adjusting the alignment of the FIP images).
   2. The alt text must be the institution name in English (for example, alt="Treasury Board of Canada Secretariat") for the *col-eng.html files, and the institution name in French (for example, alt="Secrétariat du Conseil du Trésor du Canada") for the *col-fra.html files.
3. Change the institution name in the banner area of the *col-eng.html and *col-fra.html files. The institution name must match the language of the page.
   1. For the *col-eng.html pages, the institution name must be in English (for example, <p class="main">Treasury Board of Canada Secretariat</p>).
   2. For the *col-fra.html pages, the institution name must be in French (for example, <p class="main">Secrétariat du Conseil du Trésor du Canada</p>).
4. Change the institution URL in the banner area of the *col-eng.html and *col-fra.html files. The institution URL in the banner must match the language of the page.
   1. For the *col-eng.html pages, the institution URL must be in English followed by French (for example, <p class="siteuri">tbs-sct.gc.ca</p>).
   2. For the *col-fra.html pages, the institution URL must be in French followed by English (for example, <p class="siteuri">sct-tbs.gc.ca</p>).
5. In the case where separate English and French banner images are required, change the "banner" class for the banner area of the *col-eng.html and *col-fra.html files as follows to enable support for the separate images. This change will also make the text-based institution name and URL invisible while allowing them to still be used as text equivalents by adaptive technologies.
   1. For the *col-eng.html pages, change the "banner" class to "banner-eng" or "banner-lfcoa-eng" if the stylized leaf is included in the image.
   2. For the *col-fra.html pages, change the "banner" class to "banner-fra" or "banner-lfcoa-fra" if the stylized leaf is included in the image.
6. Change the paths of the following links in the *col-eng.html files to ensure they point to the appropriate institutional pages in English:
   1. Home
   2. Contact Us
   3. Help
   4. Search
   5. Important Notices
7. Change the paths of the following links in the *col-fra.html files to ensure they point to the appropriate institutional pages in French:
   1. Accueil
   2. Contactez-nous
   3. Aide
   4. Recherche
   5. Avis importants
8. Change the metadata elements in the *col-eng.html and *col-fra.html files as required.

6.6.2 Content page template for unilingual English sites

This template must be used for all content pages on unilingual English sites.

1. Modify all image and CSS file paths in the uniling\*col-ul-eng.html files so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
   1. ../images/
   2. ../css/
2. Change the image width, height, and alt text specified for the institutional signature (images/sig-eng.gif) in the uniling\*col-ul-eng.html files.
   1. The specified width and height must be consistent with the width and height for images/sig-eng.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.19 (Adjusting the alignment of the FIP images).
   2. The alt text must be the institution name in English (for example, alt="Treasury Board of Canada Secretariat").
3. Change the institution name in the banner area of the uniling\*col-ul-eng.html files. The institution name must be in English (for example, <p class="main">Treasury Board of Canada Secretariat</p>).
4. Change the institution URL in the banner area of the uniling\*col-ul-eng.html files. The institution URL must be in English followed by French (for example, <p class="siteuri">tbs-sct.gc.ca</p>).
5. In the case where the text-based institution name and URL need to be hidden, change the "banner" class for the banner area of the *col-ul-eng.html files as follows. This change will make the text-based institution name and URL invisible while allowing them to still be used as text equivalents by adaptive technologies.
   
   For the *col-ul-eng.html pages, change the "banner" class to "banner-eng" or "banner-lfcoa-eng" if the stylized leaf is included in the image.
6. Change the path of the Avertissement link in the uniling\*col-ul-eng.html files to ensure it points to the official languages notice.
7. Change the paths of the following links in the uniling\*col-ul-eng.html files to ensure they point to the appropriate institutional pages in English:
   1. Home
   2. Contact Us
   3. Help
   4. Search
   5. Important Notices
8. Change the metadata elements in the uniling\*col-ul-eng.html files as required.

6.6.3 Content page template for unilingual French sites

This template must be used for all content pages on unilingual French sites.

1. Modify all image and CSS file paths in the uniling\*col-ul-fra.html files so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
   1. ../images/
   2. ../css/
2. Change the image width, height, and alt text specified for the institutional signature (images/sig-fra.gif) in the uniling\*col-ul-fra.html files.
   1. The specified width and height must be consistent with the width and height for images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.19 (Adjusting the alignment of the FIP images).
   2. The alt text must be the institution name in French (for example, alt="Secrétariat du Conseil du Trésor du Canada").
3. Change the institution name in the banner area of the uniling\*col-ul-fra.html files. The institution name must be in French (for example, <p class="main">Secrétariat du Conseil du Trésor du Canada</p>).
4. Change the institution URL in the banner area of the uniling\*col-ul-fra.html files. The institution URL must be in French followed by English (for example, <p class="siteuri">sct-tbs.gc.ca</p>).
5. In the case where the text-based institution name and URL need to be hidden, change the "banner" class for the banner area of the *col-ul-fra.html files as follows. This change will make the text-based institution name and URL invisible while allowing them to still be used as text equivalents by adaptive technologies.
   
   For the *col-ul-fra.html pages, change the "banner" class to "banner-fra" or "banner-lfcoa-fra" if the stylized leaf is included in the image.
6. Change the path of the Notice link in the uniling\*col-ul-fra.html files to ensure it points to the official languages notice.
7. Change the paths of the following links in the uniling\*col-ul-fra.html files to ensure they point to the appropriate institutional pages in French:
   1. Accueil
   2. Contactez-nous
   3. Aide
   4. Recherche
   5. Avis importants
8. Change the metadata elements in the uniling\*col-ul-fra.html files as required.

6.6.4 Content page template for languages other than English or French

This template must be used for content pages where the content is provided primarily in a language other than English or French.

1. Modify all image and CSS file paths in the content page template files so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
   1. ../images/
   2. ../css/
2. Change the language specified in the html element. The language code for the language of the page must be specified for the lang attribute (for example, <html xmlns="http://www.w3.org/1999/xhtml" lang="es">).
3. Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the content page template files.
   1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.19 (Adjusting the alignment of the FIP images).
   2. The alt text must be the institution name in the language of the page (for example, alt="Gobierno de Canadá").
4. Change the image alt text specified for the "Canada" wordmark in the content page template files. The alt text must be "Symbol of the Government of Canada" in the language of the page (for example, alt="Símbolo del Gobierno de Canadá").
5. Change the institution name in the banner area of the content page template files. The institution name must match the language of the page (for example, <p class="main">Gobierno de Canadá</p>).
6. Change the institution URL in the banner area of the content page template files. The institution URL in the banner must match the language of the page.
   1. For institutions headquartered outside Quebec, the institution URL must be in English followed by French (for example, <p class="siteuri">tbs-sct.gc.ca</p>).
   2. For the *col-fra.html pages, the institution URL must be in French followed by English (for example, <p class="siteuri">sct-tbs.gc.ca</p>).
7. Change the language of the skip navigation links. The skip navigation links must be in the language of the page.
   
   <a href="#cont">Sáltese al contenido</a>
<a href="#il">Sáltese las conexiones institucionales</a>
   
   
8. Change the invisible h1 element for the left side menu. The invisible h1 element must be in the language of the page (for example, <h1 class="navaid"><a name="il" id="il">Conexiones institucionales</a></h1>)
9. Change the paths of the following links in the content page template files to ensure they point to the appropriate institutional pages in English:
   1. Home
   2. Contact Us
   3. Help
   4. Search
   5. Important Notices
10. Change the paths of the following links in the content page template files to ensure they point to the appropriate institutional pages in French:
    1. Accueil
    2. Contactez-nous
    3. Aide
    4. Recherche
    5. Avis importants
11. Change the metadata elements in the content page template files as required. The metadata values must be in the language of the page. Ensure the dc.language metadata element specifies the language code for the language of the page (for example, <meta name="dc.language" scheme="ISO639-2/T" content="es" />).
12. Change the language of the Date Modified | Date de modification label in the lower left corner. The language of the label must be in the language of the page (for example, Fecha modificó : <span class="date">2006-06-22</span>).
13. Change the language of the Top of page links in the content area and in the footer. The language of the link text and the title value must be in the language of the page (for example, <a href="#tphp" title="Vuelva a la cima de página"><img class="uparrow" src="../images/tphp.gif" width="19" height="12" alt="" /><br />Cima de página</a>).

6.7.1 Unilingual server message page templates

This template must be used for server messages of unilingual sites or sites where the language preference of the client is known.

1. Modify all image and CSS file paths in the server message page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
   1. ../images/
   2. ../css/
2. Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the server message page template.
   1. The specified width and height must be consistent with the width and height of images/sig-eng.gif and images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.19 (Adjusting the alignment of the FIP images).
   2. For unilingual English server message pages, the alt text must be the institution name in English (for example, alt="Treasury Board of Canada Secretariat").
   3. For unilingual French server message pages, the alt text must be the institution name in French (for example, alt="Secrétariat du Conseil du Trésor du Canada").
3. For unilingual English server message pages, change the path of the following link in the server message page template to ensure it points to the appropriate institutional page in English
   1. Important Notices
4. For unilingual French server message pages, change the path of the following link in the server message page template to ensure it points to the appropriate institutional page in French:
   1. Avis importants
5. Provide an appropriate title within the title element. The title must be unilingual. Consult Common Error Messages for a list of appropriate message titles and content.
   1. For unilingual English server message pages, the title must be in English (for example, <title>HTTP Error 404 - Not Found</title>).
   2. For unilingual French server message pages, the title must be in French (for example, <title>Erreur HTTP 404 - Non trouvé</title>).
6. Populate the content area title with an appropriate title. The content area title should be consistent with the title provided within the title element (Step 5). Consult Common Error Messages for a list of appropriate message titles and content.
   1. For unilingual English server message pages, the title must be in English:
      <h1><a name="cont" id="cont">
<!-- CONTENT TITLE BEGINS | DEBUT DU TITRE DU CONTENU -->
HTTP Error 404 - Not Found
<!-- CONTENT TITLE ENDS | FIN DU TITRE DU CONTENU -->
</a></h1>
   2. For unilingual French server message pages, the title must be in French:
      <h1><a name="cont" id="cont">
<!-- DEBUT DU TITRE DU CONTENU | CONTENT TITLE BEGINS -->
Erreur HTTP 404 - Non trouvé
<!-- FIN DU TITRE DU CONTENU | CONTENT TITLE ENDS -->
</a></h1>
7. Populate the content area with appropriate content. Consult Common Error Messages for a list of appropriate message titles and content.
   1. For unilingual English server message pages, the content must be in English.
   2. For unilingual French server message pages, the title must be in French.
8. Replace the Date Modified | Date de modification value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

6.7.2 Bilingual server message page templates

This template must be used for server messages of bilingual and multilingual sites where the language preference of the client is not known.

For institutions headquartered outside Quebec, these instructions apply to the srvmsg\srvmsg.html file. For institutions headquartered in Quebec, these instructions apply to the srvmsg\srvmsg-quebec.html file.

1. Modify all image and CSS file paths in the server message page template so they refer to the image files that were installed in section 6.2 (Configuring the image files) and the CSS files that were installed in section 6.3 (Configuring the CSS files). This can be achieved with a search and replace. The paths to replace are:
   1. ../images/
   2. ../css/
2. Change the image width, height, and alt text specified for the institutional signature (either images/sig-eng.gif or images/sig-fra.gif) in the server message page template.
   1. The specified width and height must be consistent with the width and height for images/sig-eng.gif and images/sig-fra.gif. Where the height is greater than 20 pixels, the alignment of the FIP images must be adjusted as specified in section 6.3.2.19 (Adjusting the alignment of the FIP images).
   2. For institutions headquartered outside Quebec, the alt text must be the institution name in English, a space, a pipe, another space, followed by the institution name in French (for example, alt="Treasury Board of Canada Secretariat | Secrétariat du Conseil du Trésor du Canada").
   3. For institutions headquartered in Quebec, the alt text must be the institution name in French, a space, a pipe, another space, followed by the institution name in English (for example, alt="Secrétariat du Conseil du Trésor du Canada | Treasury Board of Canada Secretariat").
3. Change the path of the following link in the server message page template to ensure it points to the appropriate institutional page in English:
   1. Important Notices
4. Change the path of the following link in the server message page template to ensure it points to the appropriate institutional page in French:
   1. Avis importants
5. Provide an appropriate title within the title element. The title must be bilingual. Consult Common Error Messages for a list of appropriate message titles and content.
   1. For institutions headquartered outside Quebec, the title must be the English title, a space, a pipe, another space, followed by the French title
      (for example, <title>HTTP Error 404 - Not Found | Erreur HTTP 404 - Non trouvé</title>).
   2. For institutions headquartered in Quebec, the title must be the French title, a space, a pipe, another space, followed by the English title
      (for example, <title>Erreur HTTP 404 - Non trouvé | HTTP Error 404 - Not Found</title>).
6. Populate the content area titles with appropriate titles in English and French. The content area title should be consistent with the title provided within the title element (Step 5). Consult Common Error Messages for a list of appropriate message titles and content.
   1. For institutions headquartered outside Quebec, the content area title in the left column must be in English and the content area title in the right column must be in French.
   2. For institutions headquartered in Quebec, the content area title in the left column must be in French and the content area title in the right column must be in English.
7. Populate the content area with appropriate content. Consult Common Error Messages for a list of appropriate message titles and content.
   1. For institutions headquartered outside Quebec, the content in the left column must be in English and the content in the right column must be in French.
   2. For institutions headquartered in Quebec, the content in the left column must be in French and the content in the right column must be in English.
8. Replace the Date Modified | Date de modification values in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

7.1.1 Selecting the templates

Select an English (*col-eng.html) and French (*col-fra.html) version of one of the configured content page templates according to the following requirements:

• For the institution's primary menu page and all sub site main pages, the 3col*.html templates must be used.
• For the rest of the pages on the site, either the 2col*.html or the 3col*.html templates may be used. The 2col*.html templates are recommended because they allow for shorter Web pages than the 3col*.html templates by increasing the width of the content area. In cases where it is not possible to fit content within the content area of the 2col*.html templates, the 1col*.html templates should be used.
• For Web applications, either the 2col*.html or the 3col*.html templates may be used. In cases where it is not possible to fit content within the content area of the 2col*.html templates, the 1col*.html templates should be used.

7.1.2 Creating a Web page from the selected templates

1. Make local copies of the selected templates and change the filenames as required.
2. Change the paths of the language selection links.
   1. For the English page, change the path of the Français link so that it links to the French version of the page.
   2. For the French page, change the path of the English link so that it links to the English version of the page.
3. Populate the metadata elements with appropriate values
   1. For the English page, populate the metadata elements with English metadata.
   2. For the French page, populate the metadata elements with French metadata.
4. Provide an appropriate title within the title element. The title must match the language of the page.
   1. For the English page, the title must be in English (for example, <title>Welcome to the Treasury Board of Canada Secretariat</title>).
   2. For the French page, the title must be in French (for example, <title>Bienvenue au Secrétariat du Conseil du Trésor du Canada</title>).
5. Change the breadcrumb as required. All breadcrumb elements must be placed in between <p class="breadcrumb"> and the associated </p>.
   1. For the English page, all breadcrumb elements must be in English and any linked elements must link to English pages.
   2. For the French page, all breadcrumb elements must be in French and any linked elements must link to French pages.
6. If either the 3col*.html or 2col*.html templates are being used, then populate the left side menu with institutional links. To ensure a high level of accessibility, reuse the existing left side menu structure. As demonstrated in the structure, heading elements in the left side menu should only be used to group links and there should be no links that are not grouped by a heading element. The left side menu must remain text-based, so graphical and decorative elements must not be used. Changes can only be made after <div id="left"> and before the associated </div>.
7. If the 3col*.html templates are being used, then populate the right side menu with content. To ensure a high level of accessibility, reuse the existing right side menu structure. As demonstrated in the structure, heading elements in the right side menu should only be used to group content (including links) and there should be no content that is not grouped by a heading element. Changes can only be made after <div id="right"> and before the associated </div>.
8. Populate the content area title with an appropriate title. The content area title should be consistent with the title provided within the title element (Step 4).
   1. For the English page, the content area title must be in English.
<h1><a name="cont" id="cont">
<!-- CONTENT TITLE BEGINS | DEBUT DU TITRE DU CONTENU -->
Welcome to the Treasury Board of Canada Secretariat
<!-- CONTENT TITLE ENDS | FIN DU TITRE DU CONTENU -->
</a></h1>
   2. For the French page, the content area title must be in French.
<h1><a name="cont" id="cont">
<!-- DEBUT DU TITRE DU CONTENU | CONTENT TITLE BEGINS -->
Bienvenue au Secrétariat du Conseil du Trésor du Canada
<!-- FIN DU TITRE DU CONTENU | CONTENT TITLE ENDS -->
</a></h1>
9. Populate the content area with appropriate content in the language of the page. The content should begin after the content area title (following </a></h1>) and should be structured using heading markup (h2 - h6) where appropriate. The heading markup should start at h2 because h1 has already been used for the content area title.
   1. For the English page, the content must be in English.
   2. For the French page, the content must be in French.
10. Replace the Date Modified | Date de modification value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

7.2.1 Selecting the template

Select an English (uniling\*col-ul-eng.html) version of one of the configured content page templates according to the following requirements:

• For the institution's primary menu page and all sub site main pages, the uniling\3col-ul-eng.html template must be used.
• For the rest of the pages on the site, either the uniling\2col-ul-eng.html or the uniling\3col-ul-eng.html templates may be used. The uniling\2col-ul-eng.html template is recommended because it allows for shorter Web pages than the uniling\3col-ul-eng.html template by increasing the width of the content area. In cases where it is not possible to fit content within the content area of the uniling\2col-ul-eng.html template, the uniling\1col-ul-eng.html template should be used.
• For Web applications, either the uniling\2col-ul-eng.html or the 3col-ul-eng.html templates may be used. In cases where it is not possible to fit content within the content area of the 2col-ul-eng.html templates, the 1col-ul-eng.html templates should be used.

7.2.2 Creating a Web page from the selected template

Follow these steps to create a Web page from the selected template:

1. Make a local copy of the selected template and change the filename as required.
2. Populate the metadata elements with appropriate values in English.
3. Provide an appropriate English title within the title element (for example, <title>Welcome to the Treasury Board of Canada Secretariat</title>).
4. Change the breadcrumb as required. All breadcrumb elements must be in English, must be linked to English pages and must be placed between <p class="breadcrumb"> and the associated </p>.
5. If either the 3col-eng.html or 2col-eng.html templates are being used, then populate the left side menu with institutional links. To ensure a high level of accessibility, reuse the existing left side menu structure. As demonstrated in the structure, heading elements in the left side menu should only be used to group links and there should be no links that are not grouped by a heading element. The left side menu must remain text-based, so graphical and decorative elements must not be used. Changes can only be made after <div id="left"> and before the associated </div>.
6. If the 3col-eng.html template is being used, then populate the right side menu with content. To ensure a high level of accessibility, reuse the existing right side menu structure. As demonstrated in the structure, heading elements in the right side menu should only be used to group content (including links) and there should be no content that are is grouped by a heading element. Changes can only be made after <div id="right"> and before the associated </div>.
7. Populate the content area title with an appropriate English title. The content area title should be consistent with the title provided within the title element (Step 4).
   
   <h1><a name="cont" id="cont">
<!-- CONTENT TITLE BEGINS | DEBUT DU TITRE DU CONTENU -->
Welcome to the Treasury Board of Canada Secretariat
<!-- CONTENT TITLE ENDS | FIN DU TITRE DU CONTENU -->
</a></h1>
8. Populate the content area with appropriate English content. The content should begin after the content area title (following </a></h1>) and should be structured using heading markup (h2 - h6) where appropriate. The heading markup should start at h2 because h1 has already been used for the content area title.
9. Replace the Date Modified value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

7.3.2 Creating a Web page from the selected template

Follow these steps to create a Web page from the selected template:

1. Make a local copy of the selected template and change the filename as required.
2. Populate the metadata elements with appropriate values in French.
3. Provide an appropriate French title within the title element (for example, <title>Bienvenue au Secrétariat du Conseil du Trésor du Canada</title>).
4. Change the breadcrumb as required. All breadcrumb elements must be in French, must be linked to French pages and must be placed between <p class="breadcrumb"> and the associated </p>.
5. If either the 3col-fra.html or 2col-fra.html templates are being used, then populate the left side menu with institutional links. To ensure a high level of accessibility, reuse the existing left side menu structure. As demonstrated in the structure, heading elements in the left side menu should only be used to group links and there should be no links that are not grouped by a heading element. The left side menu must remain text-based, so graphical and decorative elements must not be used. Changes can only be made after <div id="left"> and before the associated </div>.
6. If the 3col-fra.html template is being used, then populate the right side menu with content. To ensure a high level of accessibility, reuse the existing right side menu structure. As demonstrated in the structure, heading elements in the right side menu should only be used to group content (including links) and there should be no content that are is grouped by a heading element. Changes can only be made after <div id="right"> and before the associated </div>.
7. Populate the content area title with an appropriate French title. The content area title should be consistent with the title provided within the title element (Step 4).
   
   <h1><a name="cont" id="cont">
<!-- DEBUT DU TITRE DU CONTENU | CONTENT TITLE BEGINS -->
Bienvenue au Secrétariat du Conseil du Trésor du Canada
<!-- FIN DU TITRE DU CONTENU | CONTENT TITLE ENDS -->
</a>
8. Populate the content area with appropriate French content. The content should begin after the content area title (following </a></h1>) and should be structured using heading markup (h2 - h6) where appropriate. The heading markup should start at h2 because h1 has already been used for the content area title.
9. Replace the Date de modification value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

7.4.1 Selecting the template

Select one of the configured content page templates according to the following requirements:

• For the institution's primary menu page and all sub site main pages, the multiling\3col-ml*.html templates must be used.
• For the rest of the pages on the site, either the multiling\2col-ml*.html or the multiling\3col-ml*.html templates may be used. The multiling\2col-ml*.html templates are recommended because they allow for shorter Web pages than the multiling\3col-ml*.html templates by increasing the width of the content area. In cases where it is not possible to fit content within the content area of the multiling\2col-ml*.html templates, the multiling\1col-ml*.html templates should be used.
• For Web applications, either the multiling\2col-ml*.html or the multiling\3col-ml*.html templates may be used. In cases where it is not possible to fit content within the content area of the multiling\2col-ml*.html templates, the multiling\1col-ml*.html templates should be used.

7.4.2 Creating a Web page from the selected template

Follow these steps to create a Web page from the selected template:

1. Make local copies of the selected template and change the filenames as required.
2. Change the paths of the language selection links.
   • Change the path of the Français link so that it links to the French version of the page.
   • Change the path of the English link so that it links to the English version of the page.
3. Populate the metadata elements with appropriate values that match the language of the page.
4. Provide an appropriate title within the title element. The title must match the language of the page (for example, <title>Bienvenido al Gobierno de Canadá</title>).
5. Change the breadcrumb as required. All breadcrumb elements must be placed in between <p class="breadcrumb"> and the associated </p>.
   1. For the English breadcrumb, all breadcrumb elements must be in English and any linked elements must link to English pages.
   2. For the French breadcrumb all breadcrumb elements must be in French and any linked elements must link to French pages.
6. If either the multiling\3col-ml*.html or multiling\2col-ml*.html templates are being used, then populate the left side menu with institutional links. To ensure a high level of accessibility, reuse the existing left side menu structure. As demonstrated in the structure, heading elements in the left side menu should only be used to group links and there should be no links that are not grouped by a heading element. The left side menu must remain text-based, so graphical and decorative elements must not be used. Changes can only be made after <div id="left"> and before the associated </div>.
7. If the multiling\3col-ml*.html templates are being used, then populate the right side menu with content. To ensure a high level of accessibility, reuse the existing right side menu structure. As demonstrated in the structure, heading elements in the right side menu should only be used to group content (including links) and there should be no content that is not grouped by a heading element. Changes can only be made after <div id="right"> and before the associated </div>.
8. Populate the content area title with an appropriate title that matches the language of the page. The content area title should be consistent with the title provided within the title element (Step 4).
   1. For institutions headquartered outside of Quebec:
      
      <h1><a name="cont" id="cont">
<!-- CONTENT TITLE BEGINS | DEBUT DU TITRE DU CONTENU -->
Bienvenido al Gobierno de Canadá
<!-- CONTENT TITLE ENDS | FIN DU TITRE DU CONTENU -->
</a></h1>
   2. For institutions headquartered in Quebec:
      
      <h1><a name="cont" id="cont">
<!-- DEBUT DU TITRE DU CONTENU | CONTENT TITLE BEGINS -->
Bienvenido al Gobierno de Canadá
<!-- FIN DU TITRE DU CONTENU | CONTENT TITLE ENDS -->
</a></h1>
9. Populate the content area with appropriate content in the language of the page. The content should begin after the content area title (following </a></h1>) and should be structured using heading markup (h2 - h6) where appropriate. The heading markup should start at h2 because h1 has already been used for the content area title.
10. Replace the Date Modified | Date de modification value in the footer with the current date (for example, <span class="date">2006-07-01</span>). The date must follow the ISO standard format for numerical dates (YYYY-MM-DD).

10.2.1 How to enable alpha transparency support for specific PNG files

The following are the steps for enabling alpha transparency support in Internet Explorer 5.5 and 6.0 for specific PNG files:

1. Use version 1.03 or later of the GC CLF template.
2. Create a GIF and PNG version of an image that includes transparent sections. The files must have the same file name except for the ".gif" and ".png" file extensions (for example, "lffl.gif" and "lffl.png").
3. Place the GIF and PNG versions of the image in the same directory.
4. Create an img element in the Web page with the path to the GIF version of the image for the src attribute value and "pngfix" for the class attribute value (for example, <img src="images/lffl.gif" class="pngfix" height="65" width="65" alt="..." />).
5. If the img element needs to reference a specific CSS class, then add the CSS class name and a space immediately before "pngfix" (for example, <img src="images/lffl.gif" class="lf pngfix" height="65" width="65" alt="..." />).

When the page loads, the progressive enhancement-based JavaScript approach will:

1. load the PNG version of the image for browsers with native alpha transparency support,
2. load the AlphaImageLoader filter to display the PNG version of the image with alpha transparency support for Internet Explorer 5.5 and 6.0,
3. load the GIF version of the image for all other browsers.

10.3.1 Configuring the multimedia player script file

The GC CLF template includes a multimedia player script file named video.js which is located in the scripts directory. The loadMedia function must be configured by a webmaster to enable the player to be functional. Additional configured options are described in section 10.3.3 (FlashVars).

The following are the steps for configuring the loadMedia function in the video.js file:

1. Specify the path to the mp-jm.swf file for the "mediaplayerUrl" variable.
   
   

   var mediaplayerUrl = "http://<url>/mp-jm.swf" ;

2. Specify the default language for the player for the "pLang" variable. The value in quotes must be "fra" for institutions headquartered in Quebec, and "eng" for institutions headquartered outside of Quebec.

   var pLang = ( pLanguage ) ? pLanguage : "fra" ;

3. Specify the path to the image file for the "logo" variable. The image file will be displayed as a watermark in the bottom right corner of the player when audio files are being played. All image formats are supported but transparent PNG files are recommended.

   var logo = "http://<url>wmms.png" ;

10.3.2 Implementing the multimedia player on a Web page

Once the multimedia script file has been configured by the webmaster, and the necessary template files have been installed, developers can implement the multimedia players on their pages with only a small number of changes.

The following are the steps for implementing the multimedia player solution on a Web page:

1. Use version 1.05 or later of the GC CLF template.
2. Create the following in either the content area or the right side menu of the Web page:
   1. Create a div element with a unique value for the id attribute value (such as "mediacontainer"):

      <div id="mediacontainer">
...
</div>

   2. Within the div element, create a link to the transcript and alternate formats, create a script element, and create a noscript element. The link must include a clear description of the target of the link for the title attribute value, the script element must include "text/javascript" for the type attribute value, and the noscript element should include "smallFont" for the noscript element.

      <div id="mediacontainer">
      <a href="/af-fr/af-fr.html" title="Transcript and alternate formats for ...">
      ...
      </a>
      <script type="text/javascript">
      ...
      </script>
      <noscript class="smallFont">
      ...
      </noscript>
</div>

   3. Within the link, create an img element for the image that will be displayed if the player does not load. The img element must include an appropriate text equivalent for the alt attribute value.

      <a href="/af-fr/af-fr.html" title="Transcript and alternate formats for ...">
      <img src="images/wm-ms.gif" width="83" height="20" alt="Symbol of the Government of Canada" />
</a>

   4. Within the script element, create the loadMedia function call, specify the containerId, file, captions, image, and lang parameters and optionally the playId, height, and width parameters. The containerId parameter must be the same as the value specified for the id attribute in step 3a (such as "mediacontainer") while the purpose of the remaining parameters is described in section 10.3.3.1 (Runtime configurable FlashVars).

      <script type="text/javascript">
      //<![CDATA[
      $(document).ready(function() {
      loadMedia('mediacontainer', '<file>', '<captions>', '<image>', '<lang>'[, <playId>, <height>, <width>] );
      });
      //]]>
</script>

   5. Within the noscript element, create the text that will be displayed if the player does not load. The text should be wrapped with the p element.

      <noscript class="smallFont">
      <p>In order to maximize the functionality of this page, please enable JavaScript.</p>
</noscript>

   6. The following is an example of the code that should be in the content area or the right side menu of the Web page:

      <div id="mediacontainer">
      <a href="/af-fr/af-fr.html" title="Transcript and alternate formats for TV Ad Traffic Jam">
           <img src="images/wm-ms.gif" width="83" height="20" alt="Symbol of the Government of Canada" />
      </a>
      <script type="text/javascript">
           //<![CDATA[
           $(document).ready(function() {
           loadMedia('mediacontainer', 'http://<url>/af-fr.flv', 'http://<url>/af-fr-eng.xml', 'http://<url>/af-fr.png', 'eng');
           });
           //]]>
      </script>
      <noscript class="smallFont">
           <p>In order to maximize the functionality of this page, please enable JavaScript.</p>
      </noscript>
</div>

10.3.3 FlashVars

FlashVars are configuration options that can be included in the loadMedia function of the ca.gc.mp-jm.js file to control the appearance and the behaviour of the player. FlashVars should only be configured by the webmaster using the following format:

so.addVariable("<FlashVar>", "<value>");
(for example, so.addVariable("enablejs","true");)

10.4.1 How to enable the initiative link slideshow

The following are the steps for enabling the initiative link slideshow:

1. Use version 1.04 or later of the GC CLF template.
2. Use initiative link images that are 195 pixels wide by 70 pixels high.
3. Include the "slideshow", "slideshowspeed" and "slideshowlib" parameters with appropriate quoted values for the declaration of the "params" JavaScript variable in the progressive enhancement section of the Web page. The value for "slideshow" must be "slideshow", the value for "slideshowspeed" must be the number of seconds that an initiative link image will be displayed, and the value for "slideshowlib" must be the path to the directory containing the required slideshow images. In version 1.05 or later of the GC CLF template, the value for "randomslide" must be "true" or "false".

   var params = {
      lng:"eng",
      pngfix:"images/inv.gif",
      slideshow: "slideshow",
      slideshowspeed: "8",
      randomslide: true,
      slideshowlib: "images/sshw-mdiap"
};

4. Create the following in the right side menu of the Web page:
   1. Create a ul element with "nav" for the class attribute value and "slideshow" for the id attribute value:

      <li>
      <h2 class="nav">Features</h2>
      <ul class="nav" id="slideshow">
      ...,br />       </ul>
</li>

   2. Within the ul element, create an li element with "menucontent" for the class attribute value for each initiative link. See section 10.4.3 (How to make specific initiative link images appear more frequently) for instructions on how to use the class attribute to control the frequency of specific initiative link images.

      <ul class="nav" id="slideshow">
      <li class="menucontent">
      ...
      </li>
      <li class="menucontent">
      ...
      </li>
</ul>

   3. Within each li element, create two links separated by a br element. Both links must target the same location and must include title attribute values that are appropriate text equivalents for the initiative link image.
      
      The first link must include an img element with the path to the initiative link image for the src attribute value and an alt attribute value that is consistent with the title attribute value for the link. The second link must include "menulink" for the class attribute value.

      <li class="menucontent">
      <a title="Experience the Navy - Canadian Forces Recruiting" href="/navy-marine/"><img src="images/navy-marine-eng.jpg" alt="Experience the Navy - Canadian Forces Recruiting" width="195" height="70" /></a>
      <br />
      <a class="menulink" title="Experience the Navy - Canadian Forces Recruiting" href="/navy-marine/">Canadian Forces Recruiting</a>
</li>

   4. The following is an example of the code that should be in the right side menu of the Web page:

      <ul class="nav" id="slideshow">
      <li class="menucontent">
           <a title="Experience the Navy - Canadian Forces Recruiting" href="/navy-marine/"><img src="images/navy-marine-eng.jpg" alt="Experience the Navy - Canadian Forces Recruiting" width="195" height="70" /></a>
           <br />
           <a class="menulink" title="Experience the Navy - Canadian Forces Recruiting" href="/navy-marine/">Canadian Forces Recruiting</a>
      </li>
      <li class="menucontent">
           <a title="Budget 2007" href="/budget07/menu-eng.html"><img src="images/budget07-eng.jpg" alt="Budget 2007" width="195" height="70" /></a>
           <br />
           <a class="menulink" title="Budget 2007" href="/budget07/menu-eng.html ">Budget 2007</a>
      </li>
</ul>

10.4.2 How to change the slideshow speed

The slideshow speed is controlled using the "slideshowspeed" parameter in the declaration of the "params" JavaScript variable in the progressive enhancement section of the Web page. The "slideshowspeed" value represents the number of seconds that an initiative link image will be displayed. In other words, the lower the value, the faster the slideshow speed.

var params = {
      lng:"eng",
      pngfix:"images/inv.gif",
      slideshow: "slideshow",
      slideshowspeed: "8",
      slideshowlib: "images/sshw-mdiap",
};

10.4.3 How to make specific initiative link images appear more frequently

The frequency that specific initiative link images appear in the slideshow can be controlled through the class attribute of the associated li element. To increase the frequency of a specific initiative link image, add a space to the class attribute value followed by one of the following keywords:

10.4.4 How to display slides in a random order

The option to display slides in a random order was introduced in version 1.05 of the GC CLF template. This option is controlled using the "randomslide" parameter in the declaration of the "params" JavaScript variable in the progressive enhancement section of the Web page. The "randomslide" can be set to either "true" or "false" to enable or disable the display of slides in a a random order.

var params = {
      lng:"eng",
      pngfix:"images/inv.gif",
      slideshow: "slideshow",
      slideshowspeed: "8",
      randomslide: true,
      slideshowlib: "images/sshw-mdiap"
};

11.6.1 Internet Explorer 6.x custom client configurations

The custom client configurations listed in this section were used with all three Internet Explorer accessibility checkboxes selected.

11.6.2 Mozilla Firefox 1.5 custom client configurations

The template was successfully tested with the following Mozilla Firefox 1.5 custom client configurations:

• Minimum font size: 10pt, 16pt, 18pt, 24pt
• "allow pages to choose their own colors": unchecked
• High Contrast Black Scheme

11.6.3 Excluded features

In order to ensure readability and backwards compatibility, the template was tested with several standard browser features excluded, both individually and in combination.

The template was successfully tested with the following features excluded, both individually and in combination:

• Images
• Tables
• Blink
• Frames
• Font
• Body (such as bgcolor, and link)
• Center
• Applet (Java)
• Script (JavaScript)
• Style Sheets (CSS)
• Marquee

11.6.4 Keyboards and alternate input access devices

Not all clients are able to use conventional keyboard and mouse systems as input devices. Some clients are limited to using a keyboard because a mouse is not available or because the client is unable to use a mouse. Some clients may require alternate input access devices because they are unable to use conventional keyboards.

Full navigation of the template was successfully tested with the following keyboards and alternate input access devices:

• Point & Click v1.x + Screen Doors v2 + Internet Explorer 6.x
• MouseTool + v1.0 High Target Area (CSS)
• Standard 101 AT keyboard + Internet Explorer 5.x
• Standard 101 AT keyboard + Mozilla Firefox 1.5 + Accessibility extension

12.2.1 Browsers tested with no noticeable display glitches

The template was tested successfully with the following Windows browser versions (78 in total) without any noticeable glitches being detected:

• AOL Explorer 1.5
• Avant Browser 9.02, 11.5
• Beonex 0.6.4, 0.8.1
• Crazy Browser 1.05, 2.01
• DocZilla 1.0
• Firebird 0.6.1, 0.7.1
• Firefox 0.8, 0.9.1, 1.0, 1.0.8, 1.5.0.4, 2.0, 2.0.0.16, 3.01, 3.53
• Flock 1.2.5
• Google Chrome
• Internet Explorer 5.0, 5.5, 6.02, 7.0, 8.0
• K-Meleon 0.7, 0.8.2, 0.9.13, 1.02, 1.1.2, 1.1.4, 1.5
• ManyOne Beta
• Maxthon 1.6.3.80, 2.0.8.1720, 2.1.4.443
• Mozilla 0.8, 0.9.2, 0.9.4, 1.0.1, 1.1, 1.2.1, 1.4, 1.5, 1.6, 1.7.3, 1.7.13
• MyIE2 0.9.27.68
• Netscape 6.2.3, 7.0, 7.1, 7.2, 8.1, 9.0
• Opera 4.02, 5.12, 6.04, 7.02, 7.1, 7.23, 7.51, 7.54, 8.54, 9.0, 9.2, 9.26, 9.52, 10
• Safari 3.0, 3.1.2, 4.0.3
• SeaMonkey 1.1.2, 1.1.4, 1.1.8, 1.1.11
• SlimBrowser 3.99, 4.10

12.2.2 Browsers tested with small display glitches

The template was tested successfully with the following Windows browser versions (3 in total) with only small glitches being detected:

• Amaya 9.1, 10.0.1
• Mozilla M16

12.2.3 Browsers tested with major display glitches but still legible

The template did not display with the required CLF layout and design when tested on the following Windows browser versions (10 in total), but the page content was still legible and accessible:

• Amaya 7.2a, 8.2
• Netscape 3.04, 4.08, 4.51, 4.61, 4.72
• WebTV Viewer 2.6
• xSmiles 0.91, 1.1

12.3.1 Browsers tested with no noticeable display glitches

The template was tested successfully with the following Mac OS X browser versions (56 in total) without any noticeable glitches being detected:

• Beonex 0.8.1
• Camino 0.7, 0.8, 1.0.2, 1.5, 1.5.5, 1.6.3
• Chimera 0.6
• Firebird 0.6.1, 0.7.1
• Firefox 0.8, 0.9.1, 1.0.8, 1.5.0.4, 2.0, 2.0.0.16, 3.0.1, 3.5.3
• Flock 1.2.5
• Internet Explorer 5.5
• Mozilla 0.9.2, 1.0.2, 1.1, 1.2.1, 1.3, 1.4, 1.5.1, 1.6, 1.7, 1.7.13
• Netscape 6.2.3, 7.02, 7.10, 8.1, 9.0
• OmniWeb 4.5, 5.0b8, 5.1.3, 5.5.4
• Opera 5.0, 6.0, 7.5.1, 8.54, 9.0, 9.2, 9.26, 9.52, 10
• Safari 1.0 (v85), 3.0, 3.1.2, 4.0.3
• SeaMonkey 1.1.2, 1.1.4, 1.1.8, 1.1.11

12.3.2 Browsers tested with small display glitches

The template was tested successfully with the following Mac OS X browser versions (3 in total) with only small glitches being detected:

• Amaya 10.0.1
• Internet Explorer 5.1.3, 5.2.2

12.3.3 Browsers tested with major display glitches but still legible

The template did not display with the required CLF layout and design when tested on the following Mac OS X browser versions (3 in total), but the page content was still legible and accessible:

• Netscape 4.77, 4.8
• xSmiles 0.9.1

12.4.1 Browsers tested with no noticeable display glitches

The template was tested successfully with the following Mac PPC browser versions (10 in total) without any noticeable glitches being detected:

• Internet Explorer 5.5
• Mozilla 0.8, 0.9.2, 1.0.2, 1.1, 1.2.1
• Netscape 6.2.3, 7.02
• Opera 5.0, 6.0

12.4.2 Browsers tested with small display glitches

The template was tested successfully with the following Mac PPC browser versions (2 in total) with only small glitches being detected:

• Internet Explorer 5.0, 5.1.6

12.4.3 Browsers tested with major display glitches but still legible

The template did not display with the required CLF layout and design when tested on the following Mac PPC browser versions (10 in total), but the page content was still legible and accessible:

• Internet Explorer 2.1, 3.01
• Netscape 3.04, 4.04, 4.08, 4.51, 4.61, 4.7, 4.75, 4.8

Summary of changes

• Integrated the jQuery JavaScript library and enabled support for jQuery plugins
• Added progressive enhancement and jQuery support to Welcome Pages
• Added a random slides feature for the initiative link slideshow
• Added a solution for the IE 5.x/6.x content area collapsing issue
• Extended PNG alpha transparency fix for Internet Explorer 5.x/6.x to PNG background images
• Updated the common menu bar "canada.gc.ca" links with the new Canada site main page URLs.
• Added lang and xml:lang attributes to the "dc.description", "description", "keywords", "dcterms.creator", "dcterms.title", and "dcterms.subject" metadata elements in the bilingual and multilingual Welcome Page templates.
• Removed the CSS controlling the visual appearance of the "blockquote" element.
• Corrected the .navaid class to allow the page to scroll to the top of the top of the left side menu when the "Skip to institutional links" link is selected. This correction also allows the page to scroll to any other anchors that are hidden using the .navaid class.
• Corrected the lang and xml:lang values for the "Avertissement" links in the unilingual English templates.
• Corrected a two column template padding issue with the content area in Internet Explorer 5.x and 6.x.
• Corrected a display issue in Firefox where the arrows in the standard top of page links were being underlined.
• Implemented hover/active/focus colours for all links in the content page (excluding the common menu bar links).
• Expanded the selectable area of the top of page links, the Important Notices link, and the side menu links.
• Disabled the automatic display of quotation marks for the q element in non-Internet Explorer browsers to ensure all browsers render the q element consistently.
• Added the menulinkdefault class for forcing a link to be the full width of the parent container (when the class is applied to an a element).
• Added the font-size utility classes to the Welcome Page CSS files.
• Added all utility classes in section 8.0 (Utility CSS classes defined by the template) to the Welcome Page CSS files (except for ".headline", ".menulinkdefault", and ".navaid").
• Improved the width and bottom margins for the Accessible initiative link solution.
• Corrected the widths of the common menu bar buttons at the default text size.
• Corrected the height and width of the Top of Page image at the default text size.
• Corrected compliance issues with the display of the Welcome Page buttons.
• Corrected potential contrast issues with the ".red" and ".redBG" utility colour classes.
• Corrected z-index issues with tooltips in IE 6/7.
• Corrected display issues related to enabling alpha transparency support for PNG files.

Updated files

• base.css
• 2col.css
• base-institution.css
• wp-pa.css
• wp-pa2.css
• pf-if.css
• tphp.gif
• scripts\jquery.min.js (new)
• scripts\swfobject.js (new)
• scripts\video.js (new)
• scripts\pe-ap.js
• scripts\plug\jquery.mp-jm.js (formerly scripts\ca.gc.mp-jm.js)
• scripts\plug\ss-md.js (formerly scripts\ca.gc.sshw-mdiap.js)
• scripts\req\init.js (new)
• scripts\req\patches-retouches.js (new)
• *.html

How to update Web pages based on version 1.04 of the template

1. Replace base.css with the updated version of the file
2. Replace 2col.css with the updated version of the file
3. Migrate previous base-institution.css changes to the updated version of the file
4. Replace base-institutio.css with the updated version of the file
5. Replace wp-pa.css with the updated version of the file
6. Replace wp-pa2.css with the updated version of the file
7. Replace pf-if.css with the updated version of the file
8. Replace tphp.gif with the updated version of the file. If the design of tphp.gif was previously modified, then duplicate at a minimum the image height, the image width, and the bottom four rows of pixels (non-transparent pixel colours can be changed).
9. Add jquery.min.js to your scripts directory
10. Add swfobject.js to your scripts directory
11. Add video.js to your scripts directory
12. Add plug\jquery.mp-jm.js to your scripts directory
13. Add plug\ss-md.js to your scripts directory
14. Remove ca.gc.mp-jm.js from your scripts directory
15. Remove ca.gc.sshw-mdiap.js from your scripts directory
16. Add req\init.js to your scripts directory
17. Add req\patches-retouches.js to your scripts directory
18. Replace pe-ap.js with the updated version of the file then modify all file paths within the the file so they correctly refer to the other script files.
19. Follow the updated instructions for the multimedia player in sections 10.3.1 (Configuring the multimedia player script file) and 10.3.2 (Implementing the multimedia player on a Web page).
20. Add the following code after "<!-- PROGRESSIVE ENHANCEMENT BEGINS | DEBUT DE L'AMELIORATION PROGRESSIVE -->" for all English content pages:

    <script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/swfobject.js" type="text/javascript"></script>
<script src="scripts/video.js" type="text/javascript"></script>

21. Add the following code after "<!-- DEBUT DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT BEGINS -->" for all French content pages:

    <script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/swfobject.js" type="text/javascript"></script>
<script src="scripts/video.js" type="text/javascript"></script>

22. Add the following code after "<!-- TEMPLATE SCRIPTS/CSS END | FIN DES SCRIPTS/CSS DU GABARIT -->" to all unilingual English, bilingual, and multilingual Welcome Pages for institutions headquartered outside of Quebec:

    <!-- PROGRESSIVE ENHANCEMENT BEGINS | DEBUT DE L'AMELIORATION PROGRESSIVE -->
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/swfobject.js" type="text/javascript"></script>
<script src="scripts/video.js" type="text/javascript"></script>
<script src="scripts/pe-ap.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
    var params = {
        lng:"eng",
        pngfix:"images/inv.gif"
    };
    PE.progress(params);
/* ]]> */
</script>
<!-- PROGRESSIVE ENHANCEMENT ENDS | FIN DE L'AMELIORATION PROGRESSIVE -->

23. Add the following code after "<!-- FIN DES SCRIPTS/CSS DU GABARIT | TEMPLATE SCRIPTS/CSS END -->" to all unilingual French, bilingual, and multilingual Welcome Pages for institutions headquartered inside of Quebec:

    <!-- DEBUT DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT BEGINS -->
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/swfobject.js" type="text/javascript"></script>
<script src="scripts/video.js" type="text/javascript"></script>
<script src="scripts/pe-ap.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
    var params = {
        lng:"fra",
        pngfix:"images/inv.gif"
    };
    PE.progress(params);
/* ]]> */
</script>
<!-- FIN DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT ENDS -->

24. Add "lang="en" xml:lang="en"" to the English "dc.description", "description", "keywords", "dcterms.creator", "dcterms.title", and "dcterms.subject" metadata elements in all bilingual and multilingual Welcome Pages.
25. Add "lang="fr" xml:lang="fr"" to the French "dc.description", "description", "keywords", "dcterms.creator", "dcterms.title", and "dcterms.subject" metadata elements in all bilingual and multilingual Welcome Pages.
26. Perform the following global search and replace operations (excluding quotes) for all unilingual English pages using the template:
    1. Replace "lang="en" xml:lang="en" title="Avertissement" with "lang="fr" xml:lang="fr" title="Avertissement"
27. Perform the following global search and replace operations (excluding quotes) for all HTML files using the template content pages:
    1. Replace "http://www.canada.gc.ca/main_e.html" with "http://www.canada.gc.ca/home.html"
    2. Replace "http://www.canada.gc.ca/main_f.html" with "http://www.canada.gc.ca/accueil.html"
28. Perform the following global search and replace operation (excluding quotes) for all HTML files using the template:
    1. Replace "VERSION 1.04" with "VERSION 1.05"

Changes in detail

• Replaced scripts\ca.gc.mp-jm.js with scripts\plug\jquery.mp-jm.js
• Replaced scripts\ca.gc.sshw-mdiap.js with scripts\plug\ss-md.js
• Removed code in scripts\pe-ap.js that duplicates jQuery functionality
• Added scripts\jquery.min.js
• Added scripts\req\init.js
• Added scripts\req\patches.js
• Changed the class "div.left h2.nav, div.left h2.nav a:link, div.left h2.nav a:visited, div.left div.h2nav, div.left div.h2nav a:link, div.left div.h2nav a:visited, div.left p.h2nav, div.left p.h2nav a:link, div.left p.h2nav a:visited, div.right h2.nav, div.right h2.nav a:link, div.right h2.nav a:visited, div.right div.h2nav, div.right div.h2nav a:link, div.right div.h2nav a:visited, div.right p.h2nav, div.right p.h2nav a:link, div.right p.h2nav a:visited" with properties "background-color: #696;", "color: #FFF;", and "text-decoration: none;" to "h2.nav, h2.nav a:link, h2.nav a:visited, div.h2nav, div.h2nav a:link, div.h2nav a:visited, p.h2nav, p.h2nav a:link, p.h2nav a:visited" with properties "background-color: #363;" and "color: #FFF;" in base-institution.css
• Changed the class "div.left h2.nav a:hover, div.left h2.nav a:active, div.left h2.nav a:focus, div.left div.h2nav a:hover, div.left div.h2nav a:active, div.left div.h2nav a:focus, div.left p.h2nav a:hover, div.left p.h2nav a:active, div.left p.h2nav a:focus, div.right h2.nav a:hover, div.right h2.nav a:active, div.right h2.nav a:focus, div.right div.h2nav a:hover, div.right div.h2nav a:active, div.right div.h2nav a:focus, div.right p.h2nav a:hover, div.right p.h2nav a:active, div.right p.h2nav a:focus" with the property "text-decoration: underline" to "h2.nav a:hover, h2.nav a:active, h2.nav a:focus, div.h2nav a:hover, div.h2nav a:active, div.h2nav a:focus, p.h2nav a:hover, p.h2nav a:active, p.h2nav a:focus" with properties "text-decoration: underline;" and "color: #C00;" in base-institution.css
• Changed the class "div.left li.menucontent, div.left div.menucontent, div.left a.menulink" to "div.left li.menucontent, div.left div.menucontent, div.left a:link.menulink, div.left a:visited.menulink" in base-institution.css
• Changed the class "div.right li.menucontent, div.right div.menucontent" to "div.right li.menucontent, div.right div.menucontent, div.right a:link.menulink, div.right a:visited.menulink" in base-institution.css
• Changed the class "div.footer a:link, div.footer a:visited, div.center div.footer a:link, div.center div.footer a:visited, div.center div.topPage a:link, div.center div.topPage a:visited, div.center p.topPage a:link, div.center p.topPage a:visited" to "p.breadcrumb a:link, p.breadcrumb a:visited, div.footer a:link, div.footer a:visited, div.topPage a:link, div.topPage a:visited, p.topPage a:link, p.topPage a:visited" in base-institution.css
• Changed the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.fpml, div.left, div.right, div.footer div.foot1 a, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage" to "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.fpml, div.left, div.right, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage" in pf-if.css.
• Changed the property "color: #FF0000;" to "color: #CC0000;" in the class ".red" of base.css
• Changed the property "background-color: #FF0000;" to "background-color: #CC0000;" in the class ".redBG" of base.css
• Changed the properties "height: 0;", "width: 0;", and "top: -100px;" to "height: 1px;", "width: 1px;", and "left: -100px;" in the class "div.navaid, p.navaid, h1.navaid, h2.navaid, .navaid" of base.css
• Changed the properties "width: 1.46em;" and "height: 0.92em;" to "width: 1.48em;", "height: 0.94em;", "position: relative;", "top: 0.21em;", "margin-left: -1px;", and "margin-right: -1px;" in the class "div.foot2 img, div.topPage img, p.topPage img" of base.css
• Changed the property "width: 16.6%;" to "width: 16.7%;" in the class "li.fiptext" of base.css.
• Changed the property "width: 16.7%;" to "width: 16.6%;" in the class "li.fiptexta" of base.css.
• Changed the property "width: 16.2%;" to "width: 16.6%;" in the class "li.fiptextb" of base.css.
• Changed the property "width: 16.8%;" to "width: 16.7%;" in the class "li.fiptextc" of base.css.
• Changed the property "padding-right: 20px;" to "padding-right: 10px;" in the class "* html div.center" of 2col.css
• Changed the property "top: -100px;" to "left: -100px;" in the class "div.msgarea h1.hidden, div.msgareaalt h1.hidden" of wp-pa.css
• Changed the property "padding: 0.19em;" to "padding: 0.13em;" in the class "div.langbtn, div.mllangbtn" of wp-pa.css
• Changed "http://www.canada.gc.ca/main_e.html" to "http://www.canada.gc.ca/home.html" of *.html
• Changed "http://www.canada.gc.ca/main_f.html" to "http://www.canada.gc.ca/accueil.html" of *.html
• Changed "lang="en" xml:lang="en" title="Avertissement" to "lang="fr" xml:lang="fr" title="Avertissement" in 1col-ul-eng.html and 2col-ul-eng.html
• Changed "VERSION 1.04" to "VERSION 1.05" in *.*
• Removed the class "blockquote" from base.css
• Removed the class "a.menulink" from base.css
• Removed the class "a.menulink:hover" from base.css
• Removed the class "div.right a.menulink" from base-institution.css
• Added the class "h2.nav a, div.h2nav a, p.h2nav a, div.left a.menulink, div.right a.menulink, div.left a.menulinkdefault, div.right a.menulinkdefault" with properties "display: block;" and "width: 99.5%;" to base.css
• Added the class "div.foot2, div.topPage, p.topPage" with the property "line-height: 140%;" to base.css
• Added the class "* html div.foot2 img, * html div.topPage img, * html p.topPage img" with properties "position: static;" and "line-height: inherit;" to base.css
• Added the class "*:first-child+html div.foot2 img, *:first-child+html div.topPage img, *:first-child+html p.topPage img" with properties "position: static;" and "line-height: inherit;" to base.css
• Added the class "div.foot2 a, div.foot3 a, div.topPage a, p.topPage a" with the property "display: block;" to base.css
• Added the class "div.foot2 a, div.foot3 a" with the property "width: 99.5%;" to base.css
• Added the class "div.foot3 a" with the property "padding-bottom: 20px;" to base.css
• Added the class "div.right div.gcinit div" with the properties "width: 193px;" and "margin-bottom: 8px;" to base.css
• Added the class "q:before, q:after" with the property "content: "";" to base.css
• Added the class "h2.nav a:link, h2.nav a:visited, div.h2nav a:link, div.h2nav a:visited, p.h2nav a:link, p.h2nav a:visited" with the property "text-decoration: none;" to base-institution.css
• Added the class "h2.nav a[name]:hover, h2.nav a[name]:active, h2.nav a[name]:focus, div.h2nav a[name]:hover, div.h2nav a[name]:active, div.h2nav a[name]:focus, p.h2nav a[name]:hover, p.h2nav a[name]:active, p.h2nav a[name]:focus" with the property "color: inherit;" to base-institution.css
• Added the class "div.left a:hover, div.left a:active, div.left a:focus, div.right a:hover, div.right a:active, div.right a:focus" with the property "color: #C00;" to base-institution.css
• Added the class "div.left a[name]:hover, div.left a[name]:active, div.left a[name]:focus, div.right a[name]:hover, div.right a[name]:active, div.right a[name]:focus" with the property "color: inherit;" to base-institution.css
• Added the class "div.left a:link.menulink, div.left a:visited.menulink" with the property "text-decoration: none;" to base-institution.css
• Added the class "div.left a:hover.menulink, div.left a:active.menulink, div.left a:focus.menulink" with properties "text-decoration: underline;" and "color: #C00;" to base-institution.css
• Added the class "div.right a:link.menulink, div.right a:visited.menulink" with the property "text-decoration: none;" to base-institution.css
• Added the class "div.right a:hover.menulink, div.right a:active.menulink, div.right a:focus.menulink" with properties "text-decoration: underline;" and "color: #C00;" to base-institution.css
• Added the class "p.breadcrumb a:hover, p.breadcrumb a:active, p.breadcrumb a:focus, div.footer a:hover, div.footer a:active, div.footer a:focus, div.topPage a:hover, div.topPage a:active, div.topPage a:focus, p.topPage a:hover, p.topPage a:active, p.topPage a:focus" with the property "color: #C00;" to base-institution.css
• Added the class "div.center a:hover, div.center a:active, div.center a:focus" with the property "color: #C00;" to base-institution.css
• Added the class "div.center a[name]:hover, div.center a[name]:active, div.center a[name]:focus" with the property "color: inherit;" to base-institution.css
• Added the class ".fontSize200" with the property "font-size: 200%;" to wp-pa2.css
• Added the class ".fontSize195" with the property "font-size: 195%;" to wp-pa2.css
• Added the class ".fontSize190" with the property "font-size: 190%;" to wp-pa2.css
• Added the class ".fontSize185" with the property "font-size: 185%;" to wp-pa2.css
• Added the class ".fontSize180" with the property "font-size: 180%;" to wp-pa2.css
• Added the class ".fontSize175" with the property "font-size: 175%;" to wp-pa2.css
• Added the class ".fontSize170" with the property "font-size: 170%;" to wp-pa2.css
• Added the class ".fontSize165" with the property "font-size: 165%;" to wp-pa2.css
• Added the class ".h1Size, .fontSize160" with the property "font-size: 160%;" to wp-pa2.css
• Added the class ".fontSize155" with the property "font-size: 155%;" to wp-pa2.css
• Added the class ".h2Size, .fontSize150" with the property "font-size: 150%;" to wp-pa2.css
• Added the class ".fontSize145" with the property "font-size: 145%;" to wp-pa2.css
• Added the class ".h3Size, .big, .fontSize140" with the property "font-size: 140%;" to wp-pa2.css
• Added the class ".fontSize135" with the property "font-size: 135%;" to wp-pa2.css
• Added the class ".h4Size, fontSize130" with the property "font-size: 130%;" to wp-pa2.css
• Added the class ".fontSize125" with the property "font-size: 125%;" to wp-pa2.css
• Added the class ".h5Size, .fontSize120" with the property "font-size: 120%;" to wp-pa2.css
• Added the class ".fontSize115" with the property "font-size: 115%;" to wp-pa2.css
• Added the class ".h6Size, fontSize110" with the property "font-size: 110%;" to wp-pa2.css
• Added the class ".fontSize105" with the property "font-size: 105%;" to wp-pa2.css
• Added the class ".fontSize100" with the property "font-size: 100%;" to wp-pa2.css
• Added the class ".fontSize95" with the property "font-size: 95%;" to wp-pa2.css
• Added the class ".fontSize90" with the property "font-size: 90%;" to wp-pa2.css
• Added the class ".mediumFont, fontSize85" with the property "font-size: 85%;" to wp-pa2.css
• Added the class ".fontSize80" with the property "font-size: 80%;" to wp-pa2.css
• Added the class ".smallFont, fontSize75" with the property "font-size: 75%;" to wp-pa2.css
• Added the class ".fontSize70" with the property "font-size: 70%;" to wp-pa2.css
• Added the class ".doubleLineSpace" with the property "line-height: 200%;" to wp-pa2.css
• Added the class ".fontSize200" with the property "font-size: 20.0pt;" to wp-pa.css
• Added the class ".fontSize195" with the property "font-size: 19.5pt;" to wp-pa.css
• Added the class ".fontSize190" with the property "font-size: 19.0pt;" to wp-pa.css
• Added the class ".fontSize185" with the property "font-size: 18.0pt;" to wp-pa.css
• Added the class ".fontSize180" with the property "font-size: 17.5pt;" to wp-pa.css
• Added the class ".fontSize175" with the property "font-size: 17.0pt;" to wp-pa.css
• Added the class ".fontSize170" with the property "font-size: 16.5pt;" to wp-pa.css
• Added the class ".fontSize165" with the property "font-size: 16.0pt;" to wp-pa.css
• Added the class ".h1Size, .fontSize160" with the property "font-size: 15.0pt;" to wp-pa.css
• Added the class ".fontSize155" with the property "font-size: 14.5pt;" to wp-pa.css
• Added the class ".h2Size, .fontSize150" with the property "font-size: 14.0pt;" to wp-pa.css
• Added the class ".fontSize145" with the property "font-size: 13.5pt;" to wp-pa.css
• Added the class ".h3Size, .big, .fontSize140" with the property "font-size: 13.5pt;" to wp-pa.css
• Added the class ".fontSize135" with the property "font-size: 13.0pt;" to wp-pa.css
• Added the class ".h4Size, fontSize130" with the property "font-size: 13.0pt;" to wp-pa.css
• Added the class ".fontSize125" with the property "font-size: 12.0pt;" to wp-pa.css
• Added the class ".h5Size, .fontSize120" with the property "font-size: 11.5pt;" to wp-pa.css
• Added the class ".fontSize115" with the property "font-size: 11.0pt;" to wp-pa.css
• Added the class ".h6Size, fontSize110" with the property "font-size: 10.5pt;" to wp-pa.css
• Added the class ".fontSize105" with the property "font-size: 10.0pt;" to wp-pa.css
• Added the class ".fontSize100" with the property "font-size: 10.0pt;" to wp-pa.css
• Added the class ".fontSize95" with the property "font-size: 9.5pt;" to wp-pa.css
• Added the class ".fontSize90" with the property "font-size: 9.0pt;" to wp-pa.css
• Added the class ".mediumFont, fontSize85" with the property "font-size: 8.5pt;" to wp-pa.css
• Added the class ".fontSize80" with the property "font-size: 8.0pt;" to wp-pa.css
• Added the class ".smallFont, fontSize75" with the property "font-size: 7.5pt;" to wp-pa.css
• Added the class ".fontSize70" with the property "font-size: 7.0pt;" to wp-pa.css
• Added the class "h1.compress, h2.compress, h3.compress, h4.compress, h5.compress, h6.compress, p.compress, ul.compress, ol.compress" with properties "margin-top: 0px;" and "margin-bottom: 0px;" to wp-pa.css
• Added the class ".widthFull" with the property "width: 98.5%;" to wp-pa.css
• Added the class ".width95" with the property "width: 95%;" to wp-pa.css
• Added the class ".width90" with the property "width: 90%;" to wp-pa.css
• Added the class ".width85" with the property "width: 85%;" to wp-pa.css
• Added the class ".width80" with the property "width: 80%;" to wp-pa.css
• Added the class ".width75" with the property "width: 75%;" to wp-pa.css
• Added the class ".width70" with the property "width: 70%;" to wp-pa.css
• Added the class ".width65" with the property "width: 65%;" to wp-pa.css
• Added the class ".width60" with the property "width: 60%;" to wp-pa.css
• Added the class ".width55" with the property "width: 55%;" to wp-pa.css
• Added the class ".width50" with the property "width: 50%;" to wp-pa.css
• Added the class ".width45" with the property "width: 45%;" to wp-pa.css
• Added the class ".width40" with the property "width: 40%;" to wp-pa.css
• Added the class ".width35" with the property "width: 35%;" to wp-pa.css
• Added the class ".width30" with the property "width: 30%;" to wp-pa.css
• Added the class ".width25" with the property "width: 25%;" to wp-pa.css
• Added the class ".width20" with the property "width: 20%;" to wp-pa.css
• Added the class ".width15" with the property "width: 15%;" to wp-pa.css
• Added the class ".width10" with the property "width: 10%;" to wp-pa.css
• Added the class ".width5" with the property "width: 5%;" to wp-pa.css
• Added the class "abbr, acronym, span.abbr" with the property "cursor: help;" to wp-pa.css
• Added the class ".alignRight" with the property "text-align: right;" to wp-pa.css
• Added the class ".alignCenter" with the property "text-align: center;" to wp-pa.css
• Added the class ".alignLeft" with the property "text-align: left;" to wp-pa.css
• Added the class ".alignTop" with the property "vertical-align: top;" to wp-pa.css
• Added the class ".alignBottom" with the property "vertical-align: bottom;" to wp-pa.css
• Added the class ".alignTopRight" with properties "text-align: right;" and "vertical-align: top;" to wp-pa.css
• Added the class ".alignTopCenter" with properties "text-align: center;" and "vertical-align: top;" to wp-pa.css
• Added the class ".alignTopLeft" with properties "text-align: left;" and "vertical-align: top;" to wp-pa.css
• Added the class ".alignBottomRight" with properties "text-align: right;" and "vertical-align: bottom;" to wp-pa.css
• Added the class ".alignBottomCenter" with properties "text-align: center;" and "vertical-align: bottom;" to wp-pa.css
• Added the class ".alignBottomLeft" with properties "text-align: left;" and "vertical-align: bottom;" to wp-pa.css
• Added the class ".floatRight" with the property "float: right;" to wp-pa.css
• Added the class ".floatLeft" with the property "float: left;" to wp-pa.css
• Added the class ".image-left" with properties "float: left;" and "vertical-align: text-top;" to wp-pa.css
• Added the class ".image-right" with properties "float: right;", "vertical-align: text-top;", and "margin-left: 10px;" to wp-pa.css
• Added the class ".indent1" with the property "padding-left: 18px;" to wp-pa.css
• Added the class ".indent2" with the property "padding-left: 36px;" to wp-pa.css
• Added the class ".indent3" with the property "padding-left: 54px;" to wp-pa.css
• Added the class ".indent4" with the property "padding-left: 72px;" to wp-pa.css
• Added the class ".indent5" with the property "padding-left: 90px;" to wp-pa.css
• Added the class "ul.noBullet" with the property "list-style-type: none;" to wp-pa.css
• Added the class "ul.disc" with the property "list-style-type: disc;" to wp-pa.css
• Added the class "ul.square" with the property "list-style-type: square;" to wp-pa.css
• Added the class "ul.circle" with the property "list-style-type: circle;" to wp-pa.css
• Added the class "ol.lower-alpha" with the property "list-style-type: lower-alpha;" to wp-pa.css
• Added the class "ol.upper-alpha" with the property "list-style-type: upper-alpha;" to wp-pa.css
• Added the class "ol.lower-roman" with the property "list-style-type: lower-roman;" to wp-pa.css
• Added the class "ol.upper-roman" with the property "list-style-type: upper-roman;" to wp-pa.css
• Added the class ".noWrap" with the property "white-space: nowrap;" to wp-pa.css
• Added the class ".doubleLineSpace" with the property "line-height: 24.0pt;" to wp-pa.css
• Added the class ".uppercase" with the property "text-transform: uppercase;" to wp-pa.css
• Added the class ".lowercase" with the property "text-transform: lowercase;" to wp-pa.css
• Added the class ".black" with properties "color: #000000;" and "background-color: transparent;" to wp-pa.css
• Added the class ".white" with properties "color: #FFFFFF;" and "background-color: transparent;" to wp-pa.css
• Added the class ".red" with properties "color: #CC0000;" and "background-color: transparent;" to wp-pa.css
• Added the class ".blue" with properties "color: #0000FF;" and "background-color: transparent;" to wp-pa.css
• Added the class ".green" with properties "color: #009933;" and "background-color: transparent;" to wp-pa.css
• Added the class ".grey" with properties "color: #999999;" and "background-color: transparent;" to wp-pa.css
• Added the class ".deepyellow" with properties "color: #FFCC33;" and "background-color: transparent;" to wp-pa.css
• Added the class ".blackBG" with the property "background-color: #000000;" to wp-pa.css
• Added the class ".whiteBG" with the property "background-color: #FFFFFF;" to wp-pa.css
• Added the class ".redBG" with the property "background-color: #CC0000;" to wp-pa.css
• Added the class ".blueBG" with the property "background-color: #0000FF;" to wp-pa.css
• Added the class ".greenBG" with the property "background-color: #009933;" to wp-pa.css
• Added the class ".lightgreyBG" with the property "background-color: #CCCCCC;" to wp-pa.css
• Added the class ".deepyellowBG" with the property "background-color: #FFCC33;" to wp-pa.css
• Added the class "div.highlight, p.highlight" with properties "border: 1px solid #030;", "background-color: #9F9;" and "padding: 5px;" to wp-pa.css
• Added the class "div.wrapContainer" with properties "float: left;" and "width: 100%;" to wp-pa.css
• Added the class "div.langbtn, div.mllangbtn" with the property "font-size: 120%;" to wp-pa2.css
• Added the class "div.foot1" with the property "width: auto;" to pf-if.css
• Added the property "left: auto;" to the class "div.page div.core div.navaid" in base.css
• Added the property "z-index: 21000;" to the class "div.tooltip" in base.css
• Added the property "display: block;" to the class "li.fiptext a, li.fiptexta a, li.fiptextb a, li.fiptextc a" in base.css
• Added the properties "font-family: "times new roman", sans-serif;" and "font-size: 14pt;" to the class "div.langbtn, div.mllangbtn" in wp-pa.css
• Added the following code after "<!-- PROGRESSIVE ENHANCEMENT BEGINS | DEBUT DE L'AMELIORATION PROGRESSIVE -->" in *col*-eng.html:

  <script src="scripts/jquery.min.js" type="text/javascript"></script>

• Added the following code after "<!-- DEBUT DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT BEGINS -->" in *col*-fra.html:

  <script src="scripts/jquery.min.js" type="text/javascript"></script>

• Added the following code after "<!-- TEMPLATE SCRIPTS/CSS END | FIN DES SCRIPTS/CSS DU GABARIT -->" in wp-pa.html, wp-pa-alt.html, wp-pa-ctoam.html, wp-pa*-ml.html and wp-pa*-eng.html:

  <!-- PROGRESSIVE ENHANCEMENT BEGINS | DEBUT DE L'AMELIORATION PROGRESSIVE -->
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/swfobject.js" type="text/javascript"></script>
<script src="scripts/video.js" type="text/javascript"></script>
<script src="scripts/pe-ap.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
    var params = {
        lng:"eng",
        pngfix:"images/inv.gif"
    };
    PE.progress(params);
/* ]]> */
</script>
<!-- PROGRESSIVE ENHANCEMENT ENDS | FIN DE L'AMELIORATION PROGRESSIVE -->

• Added the following code after "<!-- FIN DES SCRIPTS/CSS DU GABARIT | TEMPLATE SCRIPTS/CSS END -->" in wp-pa-quebec.html, wp-pa-alt-quebec.html, wp-pa-quebec-ctoam.html, wp-pa-ml-quebec-ctoam.html, wp-pa-ml-quebec.html and wp-pa*-fra.html:

  <!-- DEBUT DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT BEGINS -->
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/swfobject.js" type="text/javascript"></script>
<script src="scripts/video.js" type="text/javascript"></script>
<script src="scripts/pe-ap.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
    var params = {
        lng:"fra",
        pngfix:"images/inv.gif"
    };
    PE.progress(params);
/* ]]> */
</script>
<!-- FIN DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT ENDS -->

• Added "lang="en" xml:lang="en"" to the English "dc.description", "description", "keywords", "dcterms.creator", "dcterms.title", and "dcterms.subject" metadata elements in wp-pa.html, wp-pa-alt.html, wp-pa-alt-quebec.html, wp-pa-quebec.html, wp-pa-ctoam.html, wp-pa-quebec-ctoam.html, and wp-pa*ml*.html.
• Added "lang="fr" xml:lang="fr"" to the French "dc.description", "description", "keywords", "dcterms.creator", "dcterms.title", and "dcterms.subject" metadata elements in wp-pa.html, wp-pa-alt.html, wp-pa-alt-quebec.html, wp-pa-quebec.html, wp-pa-ctoam.html, wp-pa-quebec-ctoam.html, and wp-pa*ml*.html.
• Replaced "$("img.pngfix").attr("src", ($("img.pngfix").attr("src").substring(0, $("img.pngfix").attr("src").lastIndexOf(".")) + ".png") );" with "jQuery(this).find("img[class$=pngfix]").each( function(){"jQuery(this).attr('src', jQuery(this).attr('src').substring(0, jQuery(this).attr('src').lastIndexOf('.')) + '.png');});" in scripts\req\init.js
• Replaced "lang="en" xml:lang="en" title="Avertissement" with "lang="fr" xml:lang="fr" title="Avertissement" in *col-ul-*.html
• Replaced "http://www.canada.gc.ca/main_e.html" with "http://www.canada.gc.ca/home.html" in *col*-eng.html
• Replaced "http://www.canada.gc.ca/main_f.html" with "http://www.canada.gc.ca/accueil.html" in *col*-fra.html
• Replaced "VERSION 1.04" with "VERSION 1.05" of *.html

Summary of changes

• Integrated version 1.1 of the Service Canada multimedia player
• Integrated JavaScript in the Progressive Enhancement component for the display of title values for links with keyboard focus
• Integrated JavaScript in the Progressive Enhancement component for displaying an initiative link slideshow
• Corrected the alignment of the skip navigation links in Internet Explorer 7.x
• Corrected the issue of skip navigation links persistently overlapping and obscuring other header elements in Internet Explorer 5.5, 6.x and 7.x (JavaScript must be enabled and supported).
• Corrected printer-friendly support for multilingual and server message pages
• Corrected a printer-friendly support issue in Internet Explorer 5.x and 6.x where the footer was randomly being included on more than one printed page
• Corrected a printer-friendly support issue with the "Canada" wordmark when attempting to print out the server message page in landscape
• Improved side menu support to allow div and p elements to look like h2 elements
• Increased the font size of the headline class
• Added a left margin to the image-right class that is equivalent in size to the right margin of the image-left class
• Added the wrap utility class to allow floating of content to the right of the content area h1 in Internet Explorer

Updated files

• base.css
• base2.css
• base-institution.css
• pf-if.css
• ctoam\css\base-institution.css
• *.html
• scripts\pe-ap.js
• scripts\ca.gc.mp-jm.js (new)
• scripts\ca.gc.sshw-mdiap.js (new)
• swf\mp-jm.swf (new)
• images\wmms.png (new)
• images\sshw-mdiap\deco.gif (new)
• images\sshw-mdiap\next-suiv.gif (new)
• images\sshw-mdiap\pause.gif (new)
• images\sshw-mdiap\play-jouer.gif (new)
• images\sshw-mdiap\prev-prec.gif (new)

How to update Web pages based on version 1.03 of the template

1. Replace base.css with the updated version of the file
2. Replace base2.css with the updated version of the file
3. Migrate previous base-institution.css changes to the updated version of the file
4. Replace base-institution.css with the updated version of the file
5. Replace pf-if.css with the updated version of the file
6. Replace pe-ap.js with the updated version of the file
7. Add ca.gc.mp-jm.js to your scripts directory
8. Add ca.gc.sshw-mdiap.js to your scripts directory
9. Add mp-jm.swf to your swf directory
10. Add wmms.png to your images directory
11. Add sshw-mdiap\deco.gif to your images directory
12. Add sshw-mdiap\next-suiv.gif to your images directory
13. Add sshw-mdiap\pause.gif to your images directory
14. Add sshw-mdiap\play-jouer.gif to your images directory
15. Add sshw-mdiap\prev-prec.gif to your images directory
16. Perform the following global search and replace operations (excluding quotes) for all HTML files using the template:
    • Replace "VERSION 1.03" with "VERSION 1.04"

Changes in detail

• Changed the class "h2.nav" to "h2.nav, div.left div.h2nav, div.left p.h2nav" in base.css and base2.css
• Changed the class "div.wrapContainer" to "div.center div.wrapContainer" in base.css
• Changed the class ".fontSize100, .topPage, h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline" to ".fontSize100, .topPage" in base.css and base2.css
• Changed the class "h6, .h6Size, .fontSize110" to "h6, .h6Size, .fontSize110, h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline" in base.css and base2.css
• Changed the class "div.right li ul.nav" to "div.right li ul.nav, div.right li p.nav, div.right li div.nav" in base-institution.css and ctoam\css\base-institution.css
• Changed the class "h2.nav, h2.nav a:link, h2.nav a:visited" to "div.left h2.nav, div.left h2.nav a:link, div.left h2.nav a:visited, div.left div.h2nav, div.left div.h2nav a:link, div.left div.h2nav a:visited, div.left p.h2nav, div.left p.h2nav a:link, div.left p.h2nav a:visited, div.right h2.nav, div.right h2.nav a:link, div.right h2.nav a:visited, div.right div.h2nav, div.right div.h2nav a:link, div.right div.h2nav a:visited, div.right p.h2nav, div.right p.h2nav a:link, div.right p.h2nav a:visited" in base-institution.css and ctoam\css\base-institution.css
• Changed the class "h2.nav a:hover" to "div.left h2.nav a:hover, div.left h2.nav a:active, div.left h2.nav a:focus, div.left div.h2nav a:hover, div.left div.h2nav a:active, div.left div.h2nav a:focus, div.left p.h2nav a:hover, div.left p.h2nav a:active, div.left p.h2nav a:focus, div.right h2.nav a:hover, div.right h2.nav a:active, div.right h2.nav a:focus, div.right div.h2nav a:hover, div.right div.h2nav a:active, div.right div.h2nav a:focus, div.right p.h2nav a:hover, div.right p.h2nav a:active, div.right p.h2nav a:focus" in base-institution.css and ctoam\css\base-institution.css
• Changed the class "div.fip" to "div.fip, div.cwm" in pf-if.css
• Changed the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.left, div.right, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage" to "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.fpml, div.left, div.right, div.footer div.foot1 a, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage" in pf-if.css
• Changed the property "width: 100%;;" to "width: 100%;" in class "* html div.center h1" of base.css
• Changed "VERSION 1.03" to "VERSION 1.04" in *.*
• Removed the class "* html div.page div.core div.navaid a" from base.css
• Removed the class "*:first-child+html div.page div.core div.navaid a" from base.css
• Added the class "* html div.center h1.wrap" with the property "width: auto;" to base.css
• Added the class "div.tooltip" with properties "border: 1px solid InfoText;", "background: InfoBackground;", "color: InfoText;", "font: message-box;", "padding: 2px 4px;", "text-align: left;", "position: absolute;", "width: auto;", and "height: auto;" to base.css
• Added the class "div.safetooltip" with the properties "z-index: 21000;", "border: 1px solid #000;", "background-color: #fffeee;", "color: #000;", "font: 0.85em Verdana, Geneva, Arial, Helvetica, sans-serif;", "padding: 2px 4px;", "text-align: left;", "position: absolute;", "width: auto;", and "height: auto;" to base.css
• Added the property "margin-left: 10px; to the class ".image-right" in base.css
• Added the property "float: none;" to the class "div.center, * html div.center" in pf-if.css

Summary of changes

• Improved the skip navigation links by enabling them to become visible when a mouse pointer hovers over top or when selected using a keyboard or other alternate input device
• Improved the appearance of the stylized leaf in the banner
• Added support for boxes in the right side menu that do not contain lists
• Added support for content area headlines
• Corrected an issue with the printer-friendly functionality in Internet Explorer 6.x where an extra white page was being printed unnecessarily
• Corrected a display issue in Netscape 7.x where the common menu bar links disappeared when the text size was increased enough to cause the common menu bar to wrap
• Corrected a display issue in Netscape 6.x where the vertical white lines separating the common menu bar links were not the same height as the links
• Corrected a display issue with the Proactive Disclosure link in the coat of arms example
• Corrected a typo in the dcterms.modified metadata field.
• Improved support for text wrapping around images and tables
• Added a vertical bar between skip navigation links that was missing in the two column content page templates

Updated files

• base.css
• base2.css
• base-institution.css
• pf-if.css
• ctoam\css\base-institution.css
• *.html
• lffl.gif
• lffl.png (new)
• inv.gif (new)
• scripts\pe-ap.js (new)

How to update Web pages based on version 1.02 of the template

1. Replace lffl.gif with the updated version of the file
2. Replace base.css with the updated version of the file
3. Replace base2.css with the updated version of the file
4. Migrate previous base-institution.css changes to the updated version of the file
5. Replace base-institution.css with the updated version of the file
6. Replace pf-if.css with the updated version of the file
7. Add lffl.png to the same directory as lffl.gif
8. Add inv.gif to the same directory as lffl.gif
9. Add pe-ap.js to your scripts directory
10. Add the following code to all English content pages after "<!-- TEMPLATE SCRIPTS/CSS END | FIN DES SCRIPTS/CSS DU GABARIT -->":
          <!-- PROGRESSIVE ENHANCEMENT BEGINS | DEBUT DE L'AMELIORATION PROGRESSIVE -->
      <script src="scripts/pe-ap.js" type="text/javascript"></script>
      <script type="text/javascript">
      /* <![CDATA[ */
            var params = {
                  lng:"eng",
                  pngfix:"images/inv.gif"
            };
            PE.progress(params);
      /* ]]> */
      </script>
      <!-- PROGRESSIVE ENHANCEMENT ENDS | FIN DE L'AMELIORATION PROGRESSIVE -->
11. Add the following code to all French content pages after "<!-- FIN DES SCRIPTS/CSS DU GABARIT | TEMPLATE SCRIPTS/CSS END -->":
          <!-- DEBUT DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT BEGINS -->
      <script src="scripts/pe-ap.js" type="text/javascript"></script>
      <script type="text/javascript">
      /* <![CDATA[ */
            var params = {
                  lng:"fra",
                  pngfix:"images/inv.gif"
            };
            PE.progress(params);
      /* ]]> */
      </script>
      <!-- FIN DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT ENDS -->
12. Perform the following global search and replace operations (excluding quotes) for all HTML files using the two column template:
    1. Replace "<a href="#cont">Skip to content</a>" with "<a href="#cont">Skip to content</a> |"
    2. Replace "<a href="#cont">Passer au contenu</a>" with "<a href="#cont">Passer au contenu</a> |"
13. Perform the following global search and replace operations (excluding quotes) for all HTML files using the template:
    1. Replace "dcterms.modifed" with "dcterms.modified"
    2. Replace "class="lf"" with "class="lf pngfix""
    3. Replace "VERSION 1.02" with "VERSION 1.03"

Changes in detail

• Changed the class ".fontSize100, .topPage" to ".fontSize100, .topPage, h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline" in base.css and base2.css
• Changed the class "div.wrapContainer" to "div.center div.wrapContainer" in base.css
• Changed the class "div.right li ul.nav" to "div.right li ul.nav, div.right li div.nav, div.right li p.nav" in base-institution.css and ctoam\css\base-institution.css
• Changed the class "div.left li.menucontent" to "div.left li.menucontent, div.left div.menucontent" in ctoam\css\base-institution.css
• Changed the class "div.left li.menucontent, div.left a.menulink" to "div.left li.menucontent, div.left div.menucontent, div.left a.menulink" in ctoam\css\base-institution.css
• Changed the class "div.right li.menucontent" to "div.right li.menucontent, div.right div.menucontent" in ctoam\css\base-institution.css
• Changed the property "position: relative;" to "position: static;" in the class "* html div.banner, * html div.banner-eng, * html div.banner-fra, * html div.banner-lfcoa-eng, * html div.banner-lfcoa-fra" of base.css
• Changed "dcterms.modifed" to "dcterms.modified" in *.html
• Changed "VERSION 1.02" to "VERSION 1.03" in *.*
• Removed the property "overflow: hidden;" from the class "div.fp, div.fpml" in base.css
• Removed the property "overflow: visible;" from the class "* html div.fp, * html div.fpml" from base.css
• Removed the property "float: left;" from the class "li.fiptext a, li.fiptexta a, li.fiptextb a, li.fiptextc a" in base.css
• Removed the property "float: left;" from the class "li.fiptext div, li.fiptexta div, li.fiptextb div, li.fiptextc div" in base.css
• Added the class "a:active, a:focus" with the property "cursor: auto;" to base.css
• Added the class "div.fip, div.cwm" with the properties "position: relative;", and "z-index: 1;" to base.css
• Added the class "* html div.fip, * html div.cwm" with the property "position: static;" to base.css
• Added the class "*:first-child+html div.fip, *:first-child+html div.cwm" with the property "position: static;" to base.css
• Added the class "*:first-child+html div.banner, *:first-child+html div.banner-eng, *:first-child+html div.banner-fra, *:first-child+html div.banner-lfcoa-eng, *:first-child+html div.banner-lfcoa-fra" with the property "position: static;" to base.css
• Added the class "div.page div.core div.navaid" with the properties "font-size: 100%;", "float: none;", "overflow: visible;", "max-width: 50%;", "height: auto;", "top: 0px;", "margin-left: 210px;", "margin-right: 200px;", and "color: #FFF;" to base.css
• Added the class "* html div.page div.core div.navaid" with the property "font-size: 90%;" to base.css
• Added the class "*:first-child+html div.page div.core div.navaid" with the property "font-size: 90%;" to base.css
• Added the class "div.page div.core div.navaid a" with the properties "color: #FFF;", "border-color: #FFF;", "padding: 5px;", "font-size: 100%;", "line-height: 140%;", "vertical-align: middle;", "border-width: 1px 1px 1px 1px;", "border-style: none;", "white-space: nowrap;", "position: relative;", and "z-index: 0;" to base.css
• Added the class "* html div.page div.core div.navaid a" with the property "line-height: 180%;" to base.css
• Added the class "*:first-child+html div.page div.core div.navaid a" with properties "float: left;", and "margin-left: 5px;" to base.css
• Added the class "div.page div.core div.navaid a:hover, div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus" with properties "border-style: solid;", "text-decoration: underline;", and "z-index: 2;" to base.css
• Added the class "*:first-child+html div.fp, *:first-child+html div.fpml" with the property "float: none;" to base.css
• Added the class "div.right li div.nav, div.right li p.nav" with properties "margin-bottom: 10px;", and "padding: 2px 5px 2px 12px;" to base.css
• Added the class "div.right li p.nav" with the property "margin-top: 0px;" to base.css
• Added the class "h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline, h1.compress, h2.compress, h3.compress, h4.compress, h5.compress, h6.compress, p.compress, ul.compress, ol.compress" with properties "margin-top: 0px;" and "margin-bottom: 0px;" to base.css
• Added the class "h1.headline a:link, h1.headline a:visited, h2.headline a:link, h2.headline a:visited, h3.headline a:link, h3.headline a:visited, h4.headline a:link, h4.headline a:visited, h5.headline a:link, h5.headline a:visited, h6.headline a:link, h6.headline a:visited" with the property "text-decoration: none;" to base.css
• Added the class "h1.headline a:hover, h2.headline a:hover, h3.headline a:hover, h4.headline a:hover, h5.headline a:hover, h6.headline a:hover" with the property "text-decoration: underline;" to base.css
• Added the class "div.left div.wrapContainer, div.right div.wrapContainer" with properties "float: left;" and "width: 100%;" to base.css
• Added the class "div.page div.core div.navaid" with properties "width: 450px;", and "padding-left: 50px;" to base-institution.css
• Added the class "* html div.page div.core div.navaid" with properties "width: 450px;", and "padding-left: 50px;" to base-institution.css
• Added the class "*:first-child+html div.page div.core div.navaid" with properties "width: 450px;", and "padding-left: 50px;" to base-institution.css
• Added the class "div.page div.core div.navaid a:hover, div.page div.core div.navaid a:active, div.page div.core div.navaid a:focus" with properties "color: #000;", "background-color: #CC9;", and "border-color: #000;" to base-institution.css
• Added the class "div.colLayout" with properties "background-color: #FFF;" and "height: auto;" to pf-if.css
• Added the properties "position: relative;", and "z-index: 1;" to the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra" in base.css
• Added the property "float: left;" to the class "div.fp, div.fpml" in base.css
• Added the property "float: none;" to the class "* html div.fp, * html div.fpml" in base.css
• Added the property "background-color: #FFF;" to the class "body" in pf-if.css
• Added the property "height: 100%;" to the class "div.colLayout" in ctoam\css\base-institution.css
• Added the following code to all English content pages after "<!-- TEMPLATE SCRIPTS/CSS END | FIN DES SCRIPTS/CSS DU GABARIT -->":
        <!-- PROGRESSIVE ENHANCEMENT BEGINS | DEBUT DE L'AMELIORATION PROGRESSIVE -->
      <script src="scripts/pe-ap.js" type="text/javascript"></script>
      <script type="text/javascript">
      /* <![CDATA[ */
            var params = {
                  lng:"eng",
                  pngfix:"images/inv.gif"
            };
            PE.progress(params);
      /* ]]> */
      </script>
      <!-- PROGRESSIVE ENHANCEMENT ENDS | FIN DE L'AMELIORATION PROGRESSIVE -->
• Added the following code to all French content pages after "<!-- FIN DES SCRIPTS/CSS DU GABARIT | TEMPLATE SCRIPTS/CSS END -->":
        <!-- DEBUT DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT BEGINS -->
      <script src="scripts/pe-ap.js" type="text/javascript"></script>
      <script type="text/javascript">
      /* <![CDATA[ */
            var params = {
                  lng:"fra",
                  pngfix:"images/inv.gif"
            };
            PE.progress(params);
      /* ]]> */
      </script>
      <!-- FIN DE L'AMELIORATION PROGRESSIVE | PROGRESSIVE ENHANCEMENT ENDS -->

Summary of changes

• Corrected several display issues in Internet Explorer 7 that were related to increasing the text size or increasing the zoom
• Corrected a display issue in Firefox where the common menu bar links were being clipped at large font sizes
• Corrected a display issue in Firefox where the banner text overlapped the common menu bar links at very large font sizes
• Corrected a display issue in Firefox where the breadcrumb overlapped the side menu and the content area at very large font sizes
• Corrected a display issue in Firefox where the footer elements overlapped one another at very large font sizes
• Corrected a display issue in Firefox where the side menu text overlapped the content area text at very large font sizes
• Corrected a display issue in Firefox where the Proactive Disclosure and footer colour strips were disproportionately small compared to the rest of the page at very large font sizes
• Corrected a display issue in Firefox where the width of the page was disproportionately small compared to the rest of the page at very large font sizes
• Corrected a minor printing issue in Internet Explorer that occasionally resulted in one or more words being excluded from the printout
• Corrected the Welcome Page templates to prevent the repeating of the background images in the message area
• Corrected a display issue in Firefox where the Welcome Page message area text overlapped other text on the page at very large font sizes
• Corrected a display issue in Firefox when the message area text exceeds the message dimensions at very large font sizes
• Corrected a display issue in Internet Explorer where a colour specified for the free space below the side menu and content areas did not cover the entire free space area
• Changed the font for form controls from Courier New to Verdana
• Added support for marketing campaign and government initiative-style banners and Welcome Pages
• Added support for eNewsletters
• Added the .wrapContainer utility class to make it easier to wrap text around tables and images
• Updated the client-side CSS solutions to support the latest template changes

Updated files

• base.css
• base2.css
• base-institution.css
• 3col.css
• 2col.css
• pf-if.css (formerly pf.css)
• wp-pa.css (formerly wp.css)
• wp-pa2.css (formerly wp2.css)
• wp-pa-institution.css (formerly wp-institution.css)
• wp-pa.gif (formerly wp.gif)
• wp-pa-alt.gif (formerly wp-alt.gif)
• lffl.gif (formerly lf.gif)
• wmms.gif (formerly wm.gif)
• wp-pa*.html (formerly wp*.html)
• 3col*.html
• 2col*.html
• 1col*.html
• srvmsg*.html

How to update Web pages based on version 1.01 of the template

1. Rename wp.gif to wp-pa.gif
2. Rename wp-alt.gif to wp-pa-alt.gif
3. Rename lf.gif to lffl.gif
4. Rename wm.gif to wmms.gif
5. Replace base.css with the updated version of the file
6. Replace base2.css with the updated version of the file
7. Migrate previous base-institution.css changes to the updated version of the file
8. Replace base-institution.css with the updated version of the file
9. Replace pf.css with pf-if.css
10. Replace wp.css with wp-pa.css
11. Replace wp2.css with wp-pa2.css
12. Migrate previous wp-institution.css changes to wp-pa-institution.css
13. Replace wp-institution.css with wp-pa-institution.css
14. Perform the following global search and replace operations (excluding quotes) for all HTML files using the template:
    1. Replace "wp.css" with "wp-pa.css"
    2. Replace "wp2.css" with "wp-pa2.css"
    3. Replace "wp-institution.css" with "wp-pa-institution.css"
    4. Replace "pf.css" with "pf-if.css"
    5. Replace "wp.gif" with "wp-pa.gif"
    6. Replace "wp-alt.gif" with "wp-pa-alt.gif"
    7. Replace "wm.gif" with "wmms.gif"
    8. Replace "lf.gif" with "lffl.gif"
    9. Replace "id="siteuri"" with "class="siteuri""
    10. Replace "id="center"" with "class="center""
    11. Replace "id="left"" with "class="left""
    12. Replace "id="right"" with "class="right""
    13. Replace "VERSION 1.0 " with "VERSION 1.02 "
15. Perform the following global search and replace operations (excluding quotes) for all custom CSS used with the template (normally found in institution.css):
    1. Replace "#siteuri" with ".siteuri"
    2. Replace "#center" with ".center"
    3. Replace "#left" with ".left"
    4. Replace "#right" with ".right"

Changes in detail

• Renamed wp.css to wp-pa.css
• Renamed wp2.css to wp-pa2.css
• Renamed wp-institution.css to wp-pa-institution.css
• Renamed wp.gif to wp-pa.gif
• Renamed wp-alt.gif to wp-pa-alt.gif
• Renamed wm.gif to wmms.gif
• Renamed lf.gif to lffl.gif
• Renamed wp*.html to wp-pa*.html
• Changed "css/wp.css" to "css/wp-pa.css" in wp-pa*.html
• Changed "css/wp2.css" to "css/wp-pa2.css" in wp-pa*.html
• Changed "css/wp-institution.css" to "css/wp-pa-institution.css" in wp-pa*.html
• Changed "pf.css" to "pf-if.css" in 3col*.html, 2col*.html, and 1col*.html
• Changed "id="siteuri"" to "class="siteuri"" in 3col*.html, 2col*.html, and 1col*.html
• Changed "id="center"" to "class="center"" in 3col*.html, 2col*.html, 1col*.html, and srvmsg*.html
• Changed "id="left"" to "class="left"" in 3col*.html, 2col*.html, 1col*.html, and srvmsg*.html
• Changed "id="right"" to "class="right"" in 3col*.html, 2col*.html, 1col*.html, and srvmsg*.html
• Changed "wm.gif" to "wmms.gif" in *.html
• Changed "lf.gif" to "lffl.gif" in *.html
• Changed "VERSION 1.0" to "VERSION 1.02" in *.*
• Changed the class ".navaid" to "div.navaid, p.navaid, h1.navaid, h2.navaid" in base.css
• Changed the class ".navaid a" to "div.navaid a, p.navaid a, h1.navaid a, h2.navaid a" in base.css
• Changed the class ".fp, .fpml" to "div.fp, div.fpml" in base.css
• Changed the class ".fpml" to "div.fpml" in base.css
• Changed the class ".commonbar" to "ul.commonbar" in base.css
• Changed the class ".fiptext, .fiptexta, .fiptextb, .fiptextc" to "li.fiptext, li.fiptexta, li.fiptextb, li.fiptextc" in base.css and base2.css
• Changed the class ".fiptext" to "li.fiptext" in base.css
• Changed the class ".fiptexta" to "li.fiptexta" in base.css
• Changed the class ".fiptextb" to "li.fiptextb" in base.css
• Changed the class ".fiptextc" to "li.fiptextc" in base.css
• Changed the class ".fiptext div, .fiptextb div, .fiptextc div" to "li.fiptext div, li.fiptextb div, li.fiptextc div" in base.css
• Changed the class ".fiptext a, .fiptexta a, .fiptextb a, .fiptextc a" to "li.fiptext a, li.fiptexta a, li.fiptextb a, li.fiptextc a" in base.css
• Changed the class "#left, #right" to "div.left, div.right" in base.css
• Changed the class ".menucontent, .menucontent li" to "li.menucontent, li.menucontent li, div.menucontent, div.menucontent li" in base.css
• Changed the class ".menucontent" to "li.menucontent, div.menucontent" in base.css and base2.css
• Changed the class ".menulink" to "a.menulink" in base.css
• Changed the class ".menulink:hover" to "a.menulink:hover" in base.css
• Changed the class ".prodis" to "div.prodis" in base.css and base-institution.css
• Changed the class "#center" to "div.center" in base.css, 3col.css, and 2col.css
• Changed the class "#center h1, h2, h3, h4, h5, h6" to "div.center h1, h2, h3, h4, h5, h6" in base.css
• Changed the class "* html #center h1" to "* html div.center h1" in base.css
• Changed the class ".blackborder" to "div.blackborder" in base.css, base-institution.css, and pf.css
• Changed the class ".footer" to "div.footer" in base.css and base2.css
• Changed the class ".footer div.footerline" to "div.footer div.footerline" in base.css
• Changed the class ".foot1, .foot2, .foot3" to "div.foot1, div.foot2, div.foot3" in base.css
• Changed the class ".foot1" to "div.foot1" in base.css
• Changed the class ".foot2" to "div.foot2" in base.css
• Changed the class ".foot3" to "div.foot3" in base.css
• Changed the class ".uparrow" to "img.uparrow" in base.css
• Changed the class ".date" to "span.date" in base.css
• Changed the class ".gcinits" to "div.gcinits" in base.css
• Changed the class ".gcinit div" to "div.gcinit div" in base.css
• Changed the class "#center .gcinit div" to "div.center div.gcinit div" in base.css
• Changed the class ".gcinit a, .gcinit a:visited" to "div.gcinit a, div.gcinit a:visited" in base.css
• Changed the class "body, p, blockquote, table, td, th, li, a, ul, ol, dd, dl, dt, form, button, fieldset, label" to "body, p, blockquote, table, td, th, li, a, ul, ol, dd, dl, dt, form, button, fieldset, label, select, option, input, textarea" in base.css
• Changed the class "select, option, input, textarea, code, code span" to "code, code span" in base.css
• Changed the class "div.banner" to "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra" in base.css
• Changed the class "p.main" to "div.banner p.main" in base.css, and base2.css
• Changed the class "p#siteuri" to "div.banner p.siteuri" in base.css, and base2.css
• Changed the class ".foot2 img, div.topPage img, p.topPage img" to "div.foot2 img, div.topPage img, p.topPage img" in base.css
• Changed the class ".menucontent li" to "li.menucontent li, div.menucontent li" in base2.css
• Changed the class "#left" to "div.left" in 3col.css and 2col.css
• Changed the class "#right" to "div.right" in 3col.css
• Changed the class "* html #center" to "* html div.center" in 3col.css and 2col.css
• Changed the class ".colLayout" to "div.colLayout" in base-institution.css
• Changed the class "#right li ul.nav" to "div.right li ul.nav" in base-institution.css
• Changed the class "#left .menucontent" to "div.left li.menucontent, div.left div.menucontent" in base-institution.css
• Changed the class "#left .menucontent, #left .menulink" to "div.left li.menucontent, div.left div.menucontent, div.left a.menulink" in base-institution.css
• Changed the class "#right .menucontent" to "div.right li.menucontent, div.right div.menucontent" in base-institution.css
• Changed the class "#right .menulink" to "div.right a.menulink" in base-institution.css
• Changed the class ".blackborder:after" to "div.blackborder:after" in base-institution.css
• Changed the class ".footer div.footerline" to "div.footer div.footerline" in base-institution.css
• Changed the class ".footer a:link, .footer a:visited, div.center .footer a:link, #center .footer a:visited, #center .topPage a:link, div.center .topPage a:visited" to "div.footer a:link, div.footer a:visited, div.center div.footer a:link, div.center div.footer a:visited, div.center div.topPage a:link, div.center div.topPage a:visited, div.center p.topPage a:link, div.center p.topPage a:visited" in base-institution.css
• Changed the class "div.banner, .fp, #left, #right, .footer div.foot2 a, .footer div.foot3 a, .footer div.footerline, .navaid, .topPage" to "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra, div.fp, div.left, div.right, div.footer div.foot2 a, div.footer div.foot3 a, div.footer div.footerline, div.navaid, div.topPage, p.topPage" in pf.css
• Changed the class "#center, * html #center" to "div.center, * html div.center" in pf-if.css
• Changed the class ".headcontainer" to "div.headcontainer" in wp-pa.css, wp-pa2.css and wp-pa-institution.css
• Changed the class ".mcontainter" to "div.mcontainter" in wp-pa.css
• Changed the class ".fip" to "div.fip" in wp-pa.css
• Changed the class ".wm" to "div.wm" in wp-pa.css
• Changed the class ".msgarea, .msgareaalt" to "div.msgarea, div.msgareaalt, div.headcontainer" in wp-pa.css
• Changed the class ".msgarea" to "div.msgarea" in wp-pa.css and wp-pa-institution.css
• Changed the class ".msgareaalt" to "div.msgareaalt" in wp-pa.css and wp-pa-institution.css
• Changed the class ".msgarea h1, .msgareaalt h1" to "div.msgarea h1, div.msgareaalt h1" in wp-pa.css and wp-pa-institution.css
• Changed the class ".headtitleLft" to "div.headtitleLft" in wp-pa.css
• Changed the class ".headtitleRgt" to "div.headtitleRgt" in wp-pa.css
• Changed the class ".buttons" to "div.buttons" in wp-pa.css
• Changed the class ".mlbuttons" to "div.mlbuttons" in wp-pa.css
• Changed the class ".langbtn, .mllangbtn" to "div.langbtn, div.mllangbtn" in wp-pa.css
• Changed the class ".mllangbtn" to "div.mllangbtn" in wp-pa.css
• Changed the class ".lb, mlb" to "div.lb, div.mlb" in wp-pa.css
• Changed the class ".lb a, mlb a" to "div.lb a, div.mlb a" in wp-pa.css
• Changed the class ".lb a" to "div.lb a" in wp-pa.css
• Changed the class ".mlb a" to "div.mlb a" in wp-pa.css
• Changed the class ".imptext" to "div.imptext" in wp-pa.css
• Changed the class ".imptext a, .imptext a:visited" to "div.imptext a, .imptext a:visited" in wp-pa.css
• Changed the class "#inlft, #inrgt" to "div#inlft, div#inrgt" in wp-pa.css
• Changed the class "#inlft a, #inlft a:visited, #inrgt a, #inrgt a:visited, .impnot" to "div#inlft a, div#inlft a:visited, div#inrgt a, div#inrgt a:visited, p.impnot" in wp-pa.css and wp-pa2.css
• Changed the class ".msgarea h1" to "div.msgarea h1" in wp-pa-institution.css
• Changed the property "height: 6.25em;" to "min-height: 5.58em;" in the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra" of base.css
• Changed the property "height: 1.56em;" to "min-height: 1.23em;" in the class "p.breadcrumb" of base.css
• Changed the property "padding: 1px 0px 0px 3px;" to "padding: 1px 0px 5px 3px;" in the class "p.breadcrumb" of base.css
• Changed the property "padding-right: 0px;" to "padding-right: 10px;" in the class "div.center, * html div.center" of pf-if.css
• Changed the property "background: url(../images/wp.gif) #696;" to "background: url(../images/wp-pa.gif) #69C no-repeat;" in the class "div.msgarea" of wp-pa-institution.css
• Changed the property "background: url(../images/wp-alt.gif) #696;" to "background: url(../images/wp-pa-alt.gif) #69C no-repeat;" in the class "div.msgareaalt" of wp-pa-institution.css
• Removed "<!--[if gte IE 7]>", and "<![endif]-->" from the classes "div.fp, div.fpml", "div.fpml" and "div.fiptext, div.fiptexta, div.fiptextb, div.fiptextc" in base.css
• Removed the property "position: relative;" from the class "div.banner" in base.css
• Removed the property "position: relative;" from the class "img.coa, img.lf" in base.css
• Removed the properties "background-color: transparent;", and "font-weight: lighter;" from the class "div.banner p.siteuri" in base2.css
• Removed the properties "height: 1.57em;", "height: 1.4em;", and "min-height: 1.57em;" from the class "div.fp, div.fpml" in base.css
• Removed the property "height: 2.7em;" from the class "div.fpml" in base.css
• Removed the properties "padding: 5px;", "min-height: 158px;", and "min-width: 135px;" from the class "div.blackborder" in base-institution.css
• Added the class "div.banner-eng, div.banner-fra" with properties "min-height: 80px", "padding-bottom: 0px;", and "height: 80px;" to base.css
• Added the class "div.banner-lfcoa-eng, div.banner-lfcoa-fra" with properties "min-height: 115px;", "padding-bottom: 0px;", "height: 115px;", and "margin-top: 5px;" to base.css
• Added the class "div.banner-lfcoa-eng img.coa, div.banner-lfcoa-eng img.lf, div.banner-lfcoa-fra img.coa, div.banner-lfcoa-fra img.lf" with the property "display: none;" to base.css
• Added the class "div.banner-eng p.main, div.banner-eng p.siteuri, div.banner-fra p.main, div.banner-fra p.siteuri, div.banner-lfcoa-eng p.main, div.banner-lfcoa-eng p.siteuri, div.banner-lfcoa-fra p.main, div.banner-lfcoa-fra p.siteuri" with the properties "height: 0;", "width: 0;", "overflow: hidden;", "float: right;", "font-size: 0;", "position: absolute;", and "top: -100px;" to base.css
• Added the class "div.wrapContainer" with the properties "width: 99.5%;" and "float: left;" to base.css
• Added the class "div.fp" with the property "min-height: 1.57em;" to base.css
• Added the class "* html div.fp" with the property "height: 1.4em;" to base.css
• Added the class "* html div.fpml" with the property "height: 2.7em;" to base.css
• Added the class "* html div.banner, * html div.banner-eng, * html div.banner-fra, * html div.banner-lfcoa-eng, * html div.banner-lfcoa-fra" with the property "position: relative;" to base.css
• Added the class "* html img.coa, * html img.lf" with the property "position: relative;" to base.css
• Added the class "* html div.fp, * html div.fpml" with the property "overflow: visible;" to base.css
• Added the classes "div.banner-eng, div.banner-lfcoa-eng", and "div.banner-fra, div.banner-lfcoa-fra" with the property "background: url() #FFF no-repeat center center;" to base-institution.css
• Added the class "div.msgarea h1.hidden, div.msgareaalt h1.hidden" with the properties "height: 0;", "width: 0;", "overflow: hidden;", "float: right;", "font-size: 0;", "position: absolute;", and "top: -100px;" to wp-pa.css
• Added the property "padding-bottom: 0.67em;" to the class "div.banner, div.banner-eng, div.banner-fra, div.banner-lfcoa-eng, div.banner-lfcoa-fra" in base.css
• Added the property "overflow: hidden;" to the class "div.fp, div.fpml" in base.css
• Added the property "min-width: 6.6em;" to the class "div.foot1, div.foot2, div.foot3" in base.css
• Added the property "min-width: 9.0em;" to the class "div.left, div.right" in base.css
• Added the property "min-height: 0.9375em;" to the classes "div.prodis" and "div.footer div.footerline" in base.css
• Added the class "div.blackborder" with the properties "padding: 5px;", "min-height: 158px;", and "min-width: 9.5em;" to base.css
• Added the property "min-width: 12.00em;" to the class "div.page" in base.css
• Added the property "height: 100%;" to the class "div.colLayout" in base-institution.css
• Added the property "min-width: 18.5em;" to the class "div.mcontainter" in wp-pa.css
• Added the property "min-height: 6.7em;" to the class "div.msgarea" in wp-pa.css
• Added the property "min-height: 7.5em;" to the class "div.msgareaalt" in wp-pa.css

Summary of changes

• Corrected a spelling error in the title of the bilingual and unilingual Welcome Pages templates
• Corrected a display issue in Internet Explorer 7 where the common menu bar overlapped the breadcrumb links at larger font sizes

Updated files

• base.css
• wp.html
• wp-alt.html
• wp-alt-quebec.html
• wp-alt-ul-fra.html
• wp-ctoam.html
• wp-quebec.html
• wp-quebec-ctoam.html
• wp-ul-fra.html
• wp-ul-ctoam-fra.html

How to update Web pages based on version 1.0 of the template

1. Replace base.css with the updated version of the file
2. Perform the following global search and replace operation (excluding quotes) for all Welcome Pages using the template:
   1. Replace "Page d'acceuil" with "Page d'accueil"

Changes in detail

• Changed "Page d'acceuil" to "Page d'accueil" in the title of bilingual and unilingual Welcome Pages
• Added "<!--[if gte IE 7]>height: 1.57em;<![endif]-->" to the class ".fp, .fpml" in base.css
• Added "<!--[if gte IE 7]>height: 2.82em;<![endif]-->" to the class ".fpml" in base.css
• Added "<!--[if gte IE 7]>min-height: 16%;<![endif]-->" to the class ".fiptext, .fiptexta, .fiptextb, .fiptextc" in base.css

Summary of changes

• Initial release.