Corporate

Web Style
Guide
Introduction

The purpose of this visual style guide is to establish a concise and easy-to-use set of guidelines for using The Weather
Network / MétéoMédia brand online.

The function of this visual style guide is to ensure consistency and integrity of The Weather Network / MétéoMédia look
and feel across the site.

Logos ..... 3

Colours ..... 4

Wireframe ..... 5

Page Example ..... 6

Typography ..... 7

Page Titles and Headers ..... 8

Links ..... 9

Bullets ..... 10

Tabular Data ..... 11

Horizontal Navigation ..... 12

Tabs ..... 12

Observations ..... 13

Alphabetical Indexes ..... 14

Buttons ..... 15

Icons ..... 16

2
The Weather Network and MétéoMédia Logo

The logo is featured in the top left hand corner of the masthead on all pages; it’s therefore
unnecessary to repeat the logo in the content section of internal pages.

Currently there are two versions of The Weather Network and MétéoMédia logos: our 20th
Anniversary* and our standard logo.

* 20th Anniversary logo should only be used for The Weather Network and MétéoMédia’s fiscal year 2009
(Sept. 2008-Sept. 2009)

Corporate Colours: #003876

#FFDD00

134px 134px

72px 72px

134px 134px

72px 72px

3
Colours

Corporate Colours #003876 #FFDD00

Primary Colours #2981DA #666666

Warnings #C70000

4
 Wireframe

2px border 990px 2px border

Masthead with Leaderboard Ad 100px

Top Navigation 65px

300px

660px Content
(15px padding on either side of the main content)

Ads
15px
padding

Site Toolbox 60px

Platform Distribution Box 221px

415px

Footer Links 132px

Page Example

6
Typography

The two main typefaces used across the sites are Century Gothic and Arial.

Century Gothic is used as the Page Title (H1) and should only be used in this situation. The H1 defines
the page, used only once per page as a top level heading, to describe the content of entire page. The
font family group can be seen in the style sheet: font-family:"Century Gothic", Arial, Helvetica, sans-serif;

Arial is used for all other headings, subheadings and content text. The font family group can be seen in
the style sheet: font-family:Arial, Helvetica, sans-serif;

The content text size is displayed in “em” and calculated as 12px = 1em**

** Calculating “em” values: Base font = 12px

The default browser font size is 16px
16 / 12 = 1.333em
16px = 1.333em

The content text line-height is 1.25em - relative to the parent font-size (12px*1.5 = 18px)

Century Gothic Arial

ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz
1234567890 1234567890

7
Page Title and Headers

Page Title - H1 tag

The H1 defines the page, used only once per page as a top level heading to describe the content of entire
page.

H1 Properties
1.833em Century Gothic;
text-transform: capitalize;

1 Product / Section
color: #003876
1 2
2 Location / Content Title
color: #2981DA

Heading - H2 tag
The H2 is the next heading in the hierarchy, used to describe the next important content.

H2 Properties
1.333em Arial;
text-transform: capitalize;
padding-bottom: 5px;

1 Non-Table Heading 2 Table Heading - used only to introduce a table

border-bottom: 1px solid #acc8e4; border-bottom: 2px solid #acc8e4;

1
2

8
Links

Bulleted Links
Coded as an unordered list, the yellow bullet is a property of the unordered list (UL). It can
be seen as background:url(/common/images/global/yellowbullet.gif) top left no-repeat;
in the master_styles.css

Properties 1
color: #003876;
font-size:1em; 2

Hover Properties
color: #2981DA;
1 text-decoration:underline;

2 text-decoration:none;

Related Links
Used in the obs area only and coded as an unordered list. The yellow bullet is a property of
the unordered list (UL). Seen as background:url(/common/images/global/yellowbullet.gif)
top left no-repeat; in master_styles.css

Properties
color: #003876;
font-size:0.917em;
text-decoration:none;

Hover Properties
color: #2981DA;
text-decoration:underline;

Links in Content

Properties
color: #003876;
text-decoration:underline; 1

Hover Properties
color: #2981DA;
text-decoration:none;
1 font-weight:normal;
2
2 font-weight:bold;
text-decoration:none;

9
Bullets

There are three types of bullets currently being used throughout the site: List bullet,
Warnings bullet and Numbered bullets.

1 The List bullet is used in unordered lists.

2 Warnings bullets are only used in the Watches & Warnings section of the site.

3 Numbered bullets are primarily used for FAQs but are also used where there is
a need for an ordered list.

OL Properties LI Properties
list-style-type: none; list-style:none;
margin:0 0 0 10px; margin:0;
padding:0; padding:1px 0 10px 20px;
width:600px;

10
Tabular Data

Tables

Tables are used to display tabular information only and should not be used for layout.
1 Table titles should use the H2 tag with double bottom border (see page 8).

2 Borders can be used in-between the columns or rows, but the outer most edges of the table should
have no borders.

3 The table’s headers’ font size can be adjusted depending on the number of columns in the table
(designer’s discretion).

1
3

1
3
2

The default table properties can be found in master_styles.css

Table Properties
background:#fff url(/common/images/global/blue_grad_bg.gif) repeat-x;
border-collapse:collapse;
font-size:1em;
padding:10px 0;
text-align:center;
width:660px;

TH Properties
font-size:1.167em;
padding-top:10px;
border-left:1px solid #acc8e4;

TD Properties
padding:5px 0;
border-left:1px solid #acc8e4;

11
Horizontal Navigation

Main Navigation
1 2

3
1 Properties 3 Dropdown Menu Item
border-right: 1px solid #FFFFFF; Properties
border-top: 1px solid #FFFFFF; font-size:0.846em;
padding: 8px 12px; font-weight:bold;
font: 1.083em bold Arial; min-width:170px;
color: #FFFFFF; padding:0;
text-transform: capitalize;

2 Hover Properties
border-right: 1px solid #FFFFFF; 4
border-top: 1px solid #FFFFFF;
padding: 8px 12px;
font: 1.083em bold Arial; 4
color: #FFDD00; Dropdown Menu Item
text-transform: capitalize; Hover Properties
background-color: #003876; background:url(/common/images/global/masthead/pointer.gif) no-repeat 6px 8px;

Tabs

There is one style that is used for all tabs across the site.

2
1

1 Unselected Tab 2 Selected Tab 3 Unselected Tab

Variation
Properties Properties
font: 1em Arial; font: 1em Arial; Properties
color: #2882dc; color: #003876; font: 1em Arial;
padding: 0 0 0 9px; padding: 0 0 0 9px; color: #003876;
height: 34px; height: 34px; padding: 0 0 0 9px;
text-decoration: none; text-decoration: none; height: 34px;
text-decoration: none;
Properties
font: 1em Arial;
color: #2882dc;
padding: 0 0 0 9px;
height: 34px;
text-decoration: underline;

12
Observations

City Pages

All observations use the same CSS properties and can be found in obs.css

1 Weather Icon Properties

float:left;
width:100px; 1 2 3
height:80px; 5

2 Temperature Properties
color:#003876;
float:left; 4
width:auto;
letter-spacing:-1px;
font:normal 4em "Century Gothic", Arial, Helvetica, sans-serif;

3 Temperature Unit Properties

font:normal 2em "Century Gothic", Arial, Helvetica, sans-serif;
margin:7px 0 0 3px;
letter-spacing:normal;
float:left;

4 Weather Condition Properties

clear:left;
letter-spacing:normal;
font:1.167em Arial, Helvetica, sans-serif;
width:254px;

5 Unit Toggle Properties

Displayed as an unordered list. Celsius and Fahhrenheit have on and off
state in the LI.

UL Properties
margin:12px 0 0 20px;
width:15px;
float:left;

LI Properties LI Celsius Properties LI Fahrenheit Properties

margin-bottom:2px; background:transparent background:transparent
display: block; url(/common/images/ url(/common/images/
height:15px; global/btn_celc_off.gif) global/btn_fahr_off.gif)
margin-left:-17px; no-repeat; no-repeat;
width:15px; text-indent:-1000000px; text-indent:-1000000px;

13
Alphabetical Indexes

This menu style is used when an alphabetical list is needed. Currently it is used in our
Glossary section and Index pages.

There are two different types: Functional and Non-Functional.

Functional

Properties
font: 0.833em Arial;
color: #FFFFFF;
padding: 2px 4px;
background-color: #003876;
border: 1px solid #003876;

Hover Properties
font: 0.833em Arial;
color: #FFFFFF;
padding: 2px 4px;
background-color: #2981DA;
border: 1px solid #003876;

Non-Functional

Properties
font: 0.833em Arial;
color: #FFFFFF;
padding: 2px 4px;
background-color: #C7C7C7;
border: 1px solid #C7C7C7;

14
Buttons

There are two colours to choose from: grey and blue. The grey primary button is used as
a main button and the blue button is used for emphasis. The code used to generate the
button is always the same.

Properties
font: bold 0.917em Arial;
color: # FFFFFF;
text-decoration: none; <a class="bluebtn" href="#"><span>Submit</span></a>

Properties Hover
font: bold 0.917em Arial;
color: # FFFFFF; <a class="greybtn" href="#"><span>Submit</span></a>
text-decoration: underline;

Properties Hover
font: bold 0.917em Arial;
color: # FFFFFF; <a class="orangebtn" href="#"><span>Submit</span></a>
text-decoration: underline;

*Note: Orange button can

be used when a button
needs to stand out from the
other buttons i.e. Download,
Upload. Only one button in
the set can be orange.

Multimedia Buttons

1 Properties 1
width: 25px;
height: 25px;

Video Player Controls

2 Play, Pause and Sound 2

3 There are two buttons that appear within the video player: Play and Replay

15
Icons

The icons are available in one size only - 16 x 16. The Precipitation, Feedback and Help
icons are the exceptions. Only the icons from our icon library may be used. Below are
the icons currently being used throughout the site.

The Weather Network / Meteo Media Logo

Search TV Modify

Photo Mobile Attractions

Video Email Parks

5 Make this my homepage RSS & Data Ski

Send to a friend Delete Golf

Bookmark this page Desktop Stats

Print this page Webcams

Precipitation icons: Other icons on the site:

Snow Feedback
18 x 20 px 37 x 37 px

Help
14 x 14 px
Rain
13 x 20 px
Refresh
14 x 14 px

Rain and Snow Information

36 x 21 px 16 x 16 px

Notice / Reminder
16 x 16 px

New Dropdown Menu Item

13 x 11 px

16