UNB Style Guide

The following document is a style guide to assist in the production, implementation and continuing development of the University of New Brunswick website and online applications. This document outlines the overall file structure, naming conventions, design and coding guidelines, styles and resources used in the construction of this site. To ensure design continuity and maintain the life span of this site, it is important that everybody involved in the development, maintenance and updating of this site read, understand and adhere to these guidelines.

1.0 Coding Standards

This sections details the minimum coding standards required by the University of New Brunswick site.

1.1 Validation and Tools

This site is designed to the XHTML 1.0 Transitional and CSS2.1 specifications as laid down by the WC3 (World Wide Web Consortium). All new and existing pages must aim to validate against these specifications.

1.2 DOCTYPE Declaration

In order to conform to XHTML 1.0 Transitional, every (X)HTML page on the site should start with the following DOCTYPE declaration.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

1.3 Accessibility

This site aims to meet Double-A accessibility conformance as outlined in WCAG 1.0 (Web Content Accessibility Guidelines 1.0) as well as Section 508 compliance.

Tips:

Tables

Table summary attribute should be added for an overview of the body data for screen readers. Adding in the summary tag also assists with users receiving better search results. This is not seen by sighted users.
If it is deemed that only a small explanation of the table is needed, you can use the table caption to provide a short adequate summary. This will give sighted and non-sighted users a quick description of the table contents (also provides for better search results).
Table header tags (th) make it easier for screen readers to easily decipher header cells from body structure and navigate through complex tables.
Large complex tables should try to incorporate the thead,tbody,tfoot, th, scope,col,colgroup tags to ensure that screen readers can easily decipher the structure of the table (not available within the CMS, would need to hand code in the HTML) .
See Section 1.11 for more table information

ALT Tags
- When using the CMS, the image captions will be generated through its ALT tag.
  - Tip, when creating the ALT information: Be brief, Be clear, Be contextual.
- Search Engines will use the ALT image tags as long as you are not trying to spam the keywords (e.g. Using UNB multiple times on an image).
- Try to determine your keywords based on the overall content of the page, as well as, what the image represents. (e.g. If a picture has students in front of a building, instead of putting "UNB Photo", try "Students gathering in front of Hazen Hall.")

1.4 Browser Support

The following table outlines browser support requirements for this site.

Browser Family	Support Level
IE 6.x,7.x,8.x	Target
Firefox 2.x,3.x	Target
Opera 8.x,9.x	Supported
IE 5.5	Supported
Netscape 6	Supported
IE5.x/Mac	Partially Supported
IE 5.0	Partially Supported
Opera 5.0-7.x	Partially Supported
IE 4.0	Partially Supported
NN 4.0	Partially Supported
IE4.0/Mac	Unsupported

Target – Most popular browsers at present. Everything must work as intended
Supported – Old but popular browser. All content and functionality must work with minimal degradation.
Partially supported – Old and buggy browsers. Not supported but not officially unsupported. Content and functionality must work. Degradation must be graceful and should not obscure content.
Unsupported – Buggy and unsupported browsers. Advice current users to upgrade.

1.5 Character Set

All pages should use the Unicode UTF-8 character set and CSS should use UTF-8 as well.

<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>

@charset "UTF-8";

All special characters should be marked up using the correct named entity or Unicode equivalent in order for the page to display correctly across browsers and to validate. In particular, use the following codes for common special characters:

Name	Symbol	Code
Ampersand	&	&
Left Double Quote	“	“
Right Double Quote	”	”
Less Than	<	<
Greater Than	>	>
en-dash	-	&endash;
em-dash	–	&emdash;
Ellipsis	…	&helip;
Copyright	©	©
Registered	®	®

Take special care when inputting content created in a word processor.

1.6 Title, Keywords and Descriptions

To encourage ease of navigation and good search engine ranking, all pages should contain a title, description and keywords. These content elements should be created by the content editor and not left to the developer.

Page title should be simple, descriptive and distinct, avoiding marketing hyperbole. For consistency, all titles should be in the format (UNB is added by the CMS, there is no need to add it in):

<title>UNB | Co-op & Work Experience</title>

Page descriptions should describe the content and purpose of the page in 1-3 short sentences.

<meta name="Description" content="Page summary goes here." />

Page keywords are used to add synonyms and additional meaning to a page. Keywords should not be used to add irrelevant or unrelated words to a page.

1.7 Alternative Text for Images

Alternative text is required for every image element on the site. Alt text must provide an adequate description of the content or function of the image. Alternative text is content and must be created by the content editor. It must not be left for the web developer to decide.

<img src="/img/xxxx.gif" alt="Image description." width="xx" height="xx" />

If the image is purely decorative, the alt text can be left blank.

<img src="/img/pretty.gif" alt="" width="xx" height="xx" />

1.8 Links

The text within links should be unique and describe the destination of the link. Links saying “Click Here” or “More” should be avoided.

<a href="news.php">More News Stories</a>

Links that open in a new window should be avoided. However if there is a good usability reason for doing so (i.e. providing contextual help), the link text must inform the user.

<a href="help.php">Help (open new window)</a>

Links to downloadable documents – such as PDF’s – should contain the document size, format and the fact that they are downloads rather than links to another page.

<a href="minutes.pdf">Download the Minutes in PDF format (25KB)</a>

You can provide additional, non-critical link information in the form of a tool-tip by adding a title attribute. Use the title tags for a description of the link, not for search engine keyword results. Do not duplicate the link anchor with the link title, as this does not provide extra information to the end user.

<a href="http://www.apple.com" title="External Website">Visit Apple</a>

1.9 Meaningful HTML

All pages should be coded using meaningful rather than presentational XHTML. Meaningful elements include, but are not limited to, the following:

h1, h2 etc
ul, ol and dl
strong and em
blockquote and cite
abbr, acronym, code
fieldset, legend and label
caption, thead, tbody and tfoot

Deprecated elements and attributes should be avoided.

1.10 Abbreviations and Acronyms

Abbreviations and acronyms should be marked up and defined the first time they appear on each page. This not only brings a tool tip on the users screen to provide the information, but it is also read by screen readers and provides extra keywords for search engines to crawl. This would need to be added via the HTML option (advanced user), also a style can be placed on both the abbr and acronym to provide a global look and feel.


<abbr title="UNB">University of New Brunswick</abr>

<acronym title="University of New Brunswick Saint John">UNBSJ</ acronym >

1.11 Tables

Tables are reserved for data and should not be used for page layout. Data tables should be marked up using appropriate meaningful elements such as; <th>, <td>, <thead>, <tbody> and <tfoot> and appropriate meaningful attributes such as; summary, id and headers.

2.0 Styles

This document contains details of all the styles used on this site, how they are applied and how they are rendered.

2.1 General Typography

body
{ font: 62.5% Arial, Helvetica, sans-serif;
color: #222;}
see size text using em's if explanation is needed on font size.
#main-content,#bare-content
{ font-size: 1.2em;
line-height: 1.6em;}

2.2 Colors

base font color: #222

Headings + link color : #d22b43

2.3 Headline Styles

h2.storyhead
{font-weight: 300;
font-size: 1.7em;}

#main-content h1, #main-content h2, #main-content h3, #bare-content h1, #bare-content h2, #bare-content h3 { color:#d22b43;
letter-spacing: 1px;
font-weight: 400;
clear:left;
padding: 2px 0 8px 0;}
#main-content h1, #bare-content h1
{ font-size:2.3em;
line-height: 1.2em;}
#main-content h1
{ padding: 16px 0 12px 0;}
#bare-content h1
{ padding: 10px 0 12px 0;}
#main-content h2, #bare-content h2
{ font-size:1.6em;
padding-top: 8px;}
#main-content h3, #bare-content h3
{font-size:1.4em;
padding: 6px 0;}

#breadcrumbs a:link, #breadcrumbs a:visited
{ color: #000;
border-bottom: none;
text-decoration: none;}
#breadcrumbs a:hover, #breadcrumbs a:active
{color:#ee3a43;
border-bottom:1px solid #ee3a43;
text-decoration: none;}

.pagination a:link,.pagination a:visited
{color:#000;
font-weight:bold;
text-decoration:none;}
.pagination a:hover,.pagination a:active
{background:#fff;
text-decoration: none;
border: none;}

.rightcolumn a:link,.rightcolumn a:visited
{color:#000;
text-decoration:none;
border-bottom:none; }
.rightcolumn a:hover,.rightcolumn a:active
{color:#ee3a43;
border-bottom:1px solid #ee3a43;
text-decoration: none;}
.rightcolumn p a:link,.rightcolumn p a:visited, .rightcolumn p a:hover,p.rightcolumn p a:active
{font-weight: bold;} *COMBINED*

#main-content p.storydesc a:link,#main-content p.storydesc a:visited
{color: #000;
border-bottom:none;
text-decoration: none;}
#main-content p.storydesc a:hover,#main-content p.storydesc a:active
{color:#ee3a43;
border-bottom:1px solid #ee3a43;
text-decoration: none;}

#main-content ul li a:link,#main-content ol li a:link, #bare-content ul li a:link,#bare-content ol li a:link,#main-content ul li a:visited,#main-content ol li visited, #bare-content ul li a:visited,#bare-content ol li a:visited {color:#ee3a43;
border-bottom:1px solid #ee3a43;
text-decoration: none;}
#main-content ul li a:hover,#main-content ol li hover, #bare-content ul li hover,#bare-content ol li hover,#main-content ul li a:active,#main-content ol li active, #bare-content ul li a:active,#bare-content ol li a:active {color:#000;
border-bottom:1px solid #000;
text-decoration: none;}

ul#azlist li a:link, ul#azlist li a:visited
{color:#000;
text-decoration:none;
padding-bottom:0px;
border-bottom:none;}
ul#azlist li a:hover, ul#azlist li a:active
{color:#ee3a43;
border-bottom:1px solid #ee3a43;
text-decoration: none;}
ul#alphalist li a:link, ul#alphalist li a:visited,ul#myazlist li a:link, ul#myazlist li a:visited
{color:#ee3a43;
border-bottom:1px solid #ee3a43;
text-decoration: none;}
ul#alphalist li a:hover, ul#alphalist li a:active,ul#myazlist li a:hover, ul#myazlist li a:active
{color:#000;
text-decoration:none;
padding-bottom:0px;
border-bottom:none;}

2.5 Pull Quote/Testimonial Styles

#testimonial
{ position:relative;
padding:26px 23px 0 154px;
height:118px;
width:487px;
margin:0 0 4px 4px;
color:#404040;
font: 1.1em/1.6em Arial, Helvetica, sans-serif;
font-style:italic;}
#testimonial_left_quote_mark
{ height:15px;
width:13px;
position:absolute;
background:#fff url(../img/testimonials/left_quote_mark.gif) no-repeat;}
#testimonial p
{margin:0;
padding:0;}
.testimonial_name
{color:#000;
font-style:normal;
font-weight:700;
padding-left:6px;}
.testimonial_quote
{padding-left:15px;
color:#ca0f18;
font-size:1.4em;}

2.6 Table Classes

.contenttable - Black headers, alternating white/gray rows
{color: #000;
width: 100%;}
.contenttable caption
{caption-side: bottom;
font-size: 0.9em;
font-style: italic;
text-align: right;
padding: 0.5em 0;}
.contenttable td
{padding: 4px;
border: 1px solid #a1a1a1;
font-size:1em;}
.contenttable th
{border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
text-align: left;
color: #fff;
background-color: #000;
padding: 6px 0 4px 6px;
font-size:1.2em;}
.contenttable a:link,.contenttable a:visited
{color:#ee3a43;
border-bottom:1px solid #ee3a43;
text-decoration: none;}
.contenttable a:hover,.contenttable a:active
{color:#000;
text-decoration:none;
border-bottom:1px solid #000;}
.contenttable td ul
{font-size:80%;}
.contAlt
{background: #ebebeb;} - this is the Alternating color for rows (controlled in unb.js)
.plaintable
{color: #000;
width: 100%;}
.plaintable caption
{caption-side: bottom;
font-size: 0.9em;
font-style: italic;
text-align: right;
padding: 0.5em 0;}
.plaintable td
{padding: 8px;
font-size:1em;}
.plaintable th
{ border:none;
text-align: left;
color: #000;
background-color: #e1eae9;
padding: 6px 0 4px 6px;
font-size:1.2em;}
.plaintable a:link,.plaintable a:visited
{color:#ee3a43;
border-bottom:1px solid #ee3a43;
text-decoration: none;}
.plaintable a:hover,.plaintable a:active
{color:#000;
text-decoration:none;
border-bottom:1px solid #000;}
.plaintable td ul
{font-size:80%;}
.plain
{color: #000;
width: 100%;}
.plain caption
{caption-side: bottom;
font-size: 0.9em;
font-style: italic;
text-align: right;
padding: 0.5em 0;}
.plain td
{padding: 8px;
font-size:1.2em;}
.plain th
{ border:none;
text-align: right;
color: #000;
padding: 6px 4px 0px 6px;
font-size:1.4em;
vertical-align:top;}
.plain a:link,.plaintable a:visited
{color:#ee3a43;
border-bottom:1px solid #ee3a43;
text-decoration: none;}
.plain a:hover,.plaintable a:active
{color:#000;
text-decoration:none
;border-bottom:1px solid #000;}
.plain td ul
{font-size:80%;}
.datatable - colors based on My.UNB
{width: 100%;
background: #f2ecd3;}
.datatable caption
{caption-side: bottom;
font-size: 0.9em;
font-style: italic;
text-align: right;
padding: 0.5em 0;}
.datatable td
{padding: 8px;
border-bottom: 1px solid #fff;
font-size: 1em;}
.datatable th
{color: #000;
font-size:1.2em;
text-align:left;
padding: 6px 0 4px 6px;
background-color:#e1eae9;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;}
.datatable tr
{vertical-align:top; }
.datatable a:link,.datatable a:visited
{color:#ee3a43;
border-bottom:1px solid #ee3a43;
text-decoration: none;}
.datatable a:hover,.datatable a:active
{color:#000;
text-decoration:none;
border-bottom:1px solid #000;}
.datatable img
{vertical-align:bottom;
padding:0 0 0 3px;}
.dataAlt
{background: #e5ddbf;} - this is the Alternating color for rows (controlled in unb.js)

2.7 A-Z Listings

ul#alphalist - AZ listing (Alphabet listing)
{ margin-bottom:10px;
padding-bottom:5px;
text-align:left;
font-weight: 700;}
ul#alphalist li a:link, ul#alphalist li a:visited
{color:#ee3a43;
border-bottom:1px solid #ee3a43;
text-decoration: none;}
ul#alphalist li a:hover, ul#alphalist li a:active
{color:#000;
text-decoration:none;
padding-bottom:0px;
border-bottom:none;}
ul#alphalist li
{border-right:1px solid #aaa;
padding:0px 10px;
display:inline; }
ul#alphalist li.last
{border:none;}

ul#azlist - (Link A-Z listing)
{padding-top:10px;}
ul#azlist li a:link, ul#azlist li a:visited
{color:#000;
text-decoration:none;
padding-bottom:0px;
border-bottom:none;}
ul#azlist li a:hover, ul#azlist li a:active
{color:#ee3a43;
border-bottom:1px solid #ee3a43;
text-decoration: none;}
ul#azlist li
{padding-bottom:2px;
padding-left:20px;}
ul#azleft
{float:left;
width:430px;}
ul#azlist
{list-style:none !important;}

ul#myazlist - (AZ Listing on My.UNB)
{padding:6px 0 18px 0;
font-size: 13px;
font-weight: 700;
margin-left: 14px;
display:block;
list-style:none !important;}
ul#myazlist li a:link, ul#myazlist li a:visited
{color:#ee3a43;
border-bottom:1px solid #ee3a43;
text-decoration: none;}
ul#myazlist li a:hover, ul#myazlist li a:active
{color:#000;
text-decoration:none;
padding-bottom:0px;
border-bottom:none;}
ul#myazlist li
{line-height: 1.1em;
display:inline;
border-right:1px solid #aaa;
padding:0 8px;}
ul#myazlist li.last
{border:none;}

2.8 News/Events

#tablist
{width:246px;
margin:0;
padding:0;
font-size:1.8em;
font-weight:normal;}
#tablist a img
{ text-decoration: none;
border-bottom: none;}
#tablist li
{list-style:none;
float:left;}
#tablist li.news a,#tablist li.events a
{display:block;
height:27px;
padding-top:9px;}
#tablist li.news a
{width:103px;
padding-left:20px;
background-image:url(../img/news_events/off_tab.gif);
text-decoration: none; }
#tablist li.events a
{width:108px;
padding-left:12px;
background-image:url(../img/news_events/off_tab.gif);
text-decoration: none;
color: #fff;}
#tablist li a.current
{background-image:url(../img/news_events/on_tab.gif);}
#tabcontentcontainer
{width:201px;
overflow:hidden;
padding:10px 20px;
border:1px solid #c4c2cd;
background-color:#FFF;
border-top:1px solid #FFF; }
#tabcontentcontainer a
{color:#000;
text-decoration:none;
font-size: 1.2em;}
#tabcontentcontainer a:hover
{color:#ee3a43;
border-bottom: 1px solid #ee3a43;
padding-bottom: 1px;
text-decoration: none;}
.tabcontent
{display:none;}
.tabcontent ul
{margin:20px 0;
padding:0;}
.tabcontent ul li.news_events_items, .tabcontent ul li.news_events_readmore, .tabcontent ul li.news_events_underline
{list-style:none;}
.tabcontent ul li.news_events_items
{width:192px;
margin: 0 0 20px;
display:block;
padding-bottom:2px;
line-height:1.6em;}
.tabcontent ul li.news_events_readmore
{width:192px;
margin:0 0 2px 0;
font-weight:bolder;}
.tabcontent ul li.news_events_underline
{width:206px;
margin:0 0 13px 0;
padding-left:0;
height:1px;}
.rssnews
{padding-left: 12px;
padding-right: 12px;
border: medium none;}
.rssnews img a
{border-bottom: none;
text-decoration: none;}
.rssnews img
{position:relative;top:3px;}

2.8 “Sitemap” THIS NEEDS TO BE RE-CODED - PHASE 3

ul#sitemap
{font-size: 85%;}
ul#sitemap a:link,ul#sitemap a:visited,ul#sitemap li a:link,ul#sitemap li a:visited,ul#sitemap ul li a:link,ul#sitemap ul li a:visited,ul#sitemap ul li li a:link,ul#sitemap ul li li a:visited
{text-decoration: none;
color: #000;
border-bottom: 1px solid #fff;
position: relative;}
ul#sitemap a:hover,ul#sitemap a:active,ul#sitemap li a:hover,ul#sitemap li a:active,ul#sitemap ul li a:hover,ul#sitemap ul li a:active,ul#sitemap ul li li a:hover,ul#sitemap ul li li a:active
{color: #CA0F18;
border-color: #CA0F18;}
ul#sitemap ul
{padding: 0 0 40px 0;
font-size:100%;}
ul#sitemap ul li
{font-weight: 700;
margin: 0;
font-size: 14px;}
ul#sitemap ul li li
{font-weight: normal;
font-size:11px;}
ul#sitemap li li {
line-height: 1.4em;
font-size:12px;}
ul#sitemap span.toplevel
{border-bottom: 1px solid #999;}
ul#sitemap span.toplevel a
{font-size: 1.5em;
font-weight: 700;}
ul#sitemap,ul#sitemap ul
{list-style: none;
margin: 0 0 0 15px;}
ul#sitemap,ul#sitemap ul ul
{padding: 0;}
ul#sitemap span.toplevel,ul#sitemap span.has_children
{display: block;}
ul#sitemap span.toplevel
{padding-bottom: 7px;
margin-bottom: 15px;}
ul#sitemap li.col2
{margin-left: 400px;}
ul#sitemap span.has_children
{padding-left: 10px;
margin-left: -10px;}
ul#sitemap li.row1 li.reset,ul#sitemap li.row2 li.reset
{margin-top: -8em;}
ul#sitemap li.row3 li.reset
{margin-top: -49.5em;}
ul#sitemap li.row4 li.reset
{margin-top: -13em;}
ul#sitemap li.row5 li.reset
{margin-top: -10em;}
ul#sitemap li.row6 li.reset
{margin-top: -18em;}
ul#sitemap li.row8 li.reset
{margin-top: -12em;}
ul#sitemap li.row2,ul#sitemap li.row6
{margin-top: 12px;}
ul#sitemap li.row7,ul#sitemap li.row8
{margin-top: 27px;}
ul#sitemap span.has_children
{background: url(../img/has_children.png) 0 6px no-repeat;}

2.9 Navigation

#gblnav
{background:#ee3a43;
width:922px;
height:35px;
margin:1px 0;
font-size:1.1em;}
ul#mainmenu li,ul.mainmenu_sub,ul.mainmenu_sub li
{margin:0;padding:0;}
ul#mainmenu li
{float:left;
position:relative;
z-index:2000;}
ul#mainmenu li a.active
{background:url(../img/nav/nav-rollover-hover-bkg.png) repeat-x;}
ul.mainmenu_sub
{list-style:none;
border:3px solid #2e2e2e;
background:#414141;
width:210px;}
ul.mainmenu_sub li
{position:relative;}
ul#mainmenu li ul.mainmenu_sub
{position:absolute;
z-index:2000;
top:35px;
display:none;
background:#414141 url(../img/nav/nav-top.png) 0 0 no-repeat;
padding:8px 0 5px 0;}
ul#mainmenu li:hover ul.mainmenu_sub,ul#mainmenu li.over ul.mainmenu_sub
{display:block;}
ul#mainmenu li a, ul#mainmenu li ul.mainmenu_sub li a
{display:block;
font-weight:700;
color:#fff
;text-decoration:none;
border: none;}
ul#mainmenu li a
{width:115px;
height:35px;
background:#ee3a43;
font-size:12px;
line-height:35px;
text-align:center;}
ul#mainmenu li ul.mainmenu_sub li a
{width:182px;
height:29px;
font-size:11px;
background:#414141 url(../img/nav/nav-separator.png) 0 bottom no-repeat;
line-height:29px;
text-align:left;
padding:0 14px;
border: none;}
ul#mainmenu li ul.mainmenu_sub li
{display:inline ;
float:none;}
ul#mainmenu li ul.mainmenu_sub li a:hover
{background:#2e2e2e;
border: none;}
ul#mainmenu li ul.mainmenu_sub li.nav_spacer,ul#mainmenu li ul.mainmenu_sub li.nav_top_cap,ul#mainmenu li ul.mainmenu_sub li.nav_bottom_cap
{display:block;}
ul#mainmenu li ul.mainmenu_sub li.nav_spacer
{height:1px;
line-height:1px;
font-size:1px;
width:182px;
margin:0 14px;
background:url(../img/nav/nav-spacer.png) repeat-x;}
ul#mainmenu li ul.mainmenu_sub li.nav_top_cap
{height:6px;
width:210px;
border-top:1px solid #000;}
ul#mainmenu li ul.mainmenu_sub li.nav_bottom_cap
{height:5px;
width:210px;}
ul#mainmenu li ul.mainmenu_sub li a.more,ul#mainmenu li ul.mainmenu_sub li a:hover.more {background:url(../img/nav/nav-arrow.png) 188px 11px no-repeat;
border: none;}
ul#mainmenu a:hover,ul#mainmenu ul a:hover,ul#mainmenu :hover > a,ul#mainmenu ul :hover > a {background:url(../img/nav/nav-rollover-hover-bkg.png) repeat-x;
border: none;}
ul#mainmenu li.over a
{background:url(../img/nav/nav-rollover-hover-bkg.png) repeat-x;
border: none;}

#side-nav
{width:246px;
width: 245px !important;
display:inline;
overflow:hidden;
float:right;
clear:both;
margin:4px 0 10px 0;}
#sidemenu_block
{width:246px;
width: 245px !important;}
ul#sidemenu li a
{padding-left:23px;
display:block;
font-weight:700;
width:220px;
height:32px;
background:#ee3a43;
color:#fff;
text-decoration:none;
font-size:12px
;line-height:32px;
border-bottom:1px solid #FFF;}
ul#sidemenu li a:hover,ul#sidemenu li ul li a:hover,ul#sidemenu li a.active,ul#sidemenu li a.current,ul#sidemenu li ul li a.active
{color:#fff;}
ul#sidemenu li a:hover
{background:#000;}
ul#sidemenu li ul li a:hover
{background:#7f7f7f;
color:#fff;}
ul#sidemenu li a.activearrow
{background:#000 url(../img/nav/nav-sidemenu-arrow-down.png) 9px 11px no-repeat;}
ul#sidemenu li a.active,ul#sidemenu li a.current
{background:#000;}
ul#sidemenu li ul li a.active
{background:#7f7f7f url(../img/nav/nav-sidemenu-arrow-down.png) 21px 11px no-repeat;}
ul#sidemenu li ul li a, ul#sidemenu li ul li ul li a
{display:block;
font-weight:400;
color:#000;
text-decoration:none;
font-size:12px;
line-height:32px;
border-bottom:1px solid #d8d8d8;}
ul#sidemenu li ul li a
{width:205px;
min-height: 25px;
height:auto;
background:#fff;
line-height: 18px ;
padding: 6px 0 2px 38px}
ul#sidemenu li ul li ul li a
{padding-left:51px;
width:192px;
height:auto;
background:#efefef;}
ul#sidemenu li a.more
{background:url(../img/nav/nav-sidemenu-arrow-right.png) 9px 11px no-repeat;}
ul.hidemenu
{display:none;}
ul#sidemenu li.sidemenu_header
{background:#000 url(../img/nav/nav-sidemenu-cap.png) no-repeat;
width:233px;
height:auto;
padding:20px 0 10px 10px;}
ul#sidemenu li.sidemenu_header
{color: #fff;
text-decoration:none;
border-bottom:1px solid #fff;
color:#FFF;
font-size:1.8em;
font-weight:bold;}
ul#sidemenu li.sidemenu_header a
{background: #000;
width:233px;
height:auto;
padding:0;
margin-top: -7px;
color: #fff;
text-decoration:none;
border:none;
color:#FFF;
font-size:1em;
font-weight:bold;
line-height:normal;}
ul#sidemenu li.sidemenu_header a:hover
{color:#FFCC00;
text-decoration:none;}
ul#sidemenu,ul#sidemenu li ul,ul#mainmenu
{list-style:none;
margin:0;
padding:0;}
ul#sidemenu li ul li ul li a.active,ul#sidemenu li ul li ul li a:hover
{color:#fff;
background:#a9a9a9;
font-weight:700;}

3.0 Resources

This document contains useful resources for the site such as links and descriptions of all the XHTML and CSS files used, links to Mark-up Guide templates and further coding resources.

3.1 Mark-up Guides

Images showing the general page layouts and the CSS naming conventions. * Please note : colors have been reduced to 256 to increase speed. *

Homepage & Header
Level 2
My.UNB
Sitemap - I'll produce screen cap when re-write occurs

3.2 XHTML Templates

All the pages on the site can be made up from these core XHTML/CSS templates.

homepage - page consists of: Emergency, Billboard, Recruitment, Stories, Navigation, Content Region and News/Events
homepage-faculty - page consists of: Emergency, Billboard, Ad Area, Navigation, Content Region and Stories
homepage-faculy-news - page consists of: Emergency, Billboard, Ad Area, Stories, Navigation on the right, and News/Events
genericpage - page consists of: Emergency, Page Banner, Breadcrumbs, PDF output, Social Networking share, Content Area and Testimonial (no right Nav)
subpage - page consists of: Emergency,Page Banner and Content Region
extrenalpage - page consists of: Page Banner, Emergency and Content Region
myunb - Emergency, PostIt, and Navigation

3.3 CSS Files

unbstyle - UNB website stylesheet
Print - Print stylesheet *needs to be updated to reflect recent overhaul of stylesheet*
PDA - PDA stylesheet
Global - Internal CMS editor stylesheet

3.4 Useful Links

3.5 Useful Books

More Eric Meyer on CSS- Eric Meyer
CSS Mastery: Advanced Web Standards Solutions – Andy Budd
Elements of User Experience - Jesse James Garrett
Don't Make Me Think: A Common Sense Approach to Web Usability - Steve Krug
Information Architecture for the World Wide Web – Peter Morville & Louis Rosenfeld