AIA CSS Guide

When adding content to the body area there are a number of new styles that can be used to effect the page layout, fonts, rollover effects, background images and colors.  There is a site-wide CSS stylesheet in use, you can view the raw css here.

There are many benefits to using a stylesheet over adding styles (like fonts) directly to individual pages. One of the biggest is that you can change the look of content across the site in one quick CSS update. If styles are applied across hundreds of pages, they are not maintainable. It also provides much more consistency to the look & feel, and makes the pages smaller so they are easier to read (less markup) and load more quickly.

All of these are pre-defined and can be added to your pages, and an endless number of new styles can be created. Please just contact me if you need new ones added.

Body Area Layouts:
There are two basic layouts for the body area. Either content across the whole page, or content with a right sidebar. You should put all content in a div container, and can control whether it is a 1 channel or 2 channel layout by changing the class. It works like this:

<div class="contnet"> One Channel, 545px wide</div>
OR
<div class="content with-right"> Channel 1, 395px wide</div> <div class="right-side"> Channel 2, 150px wide</div>

The homepage has a slight variant on these, using the classes home-body-center & home-body-right.

Headings, Fonts, Basic Styles:
All of the basic fonts are setup across the site. You should never need to define the font size, weight or font choice in a page. However, you should still use Bold, Italic and Underline as you would normally. The tools to set font color & size are available in the toolbar, and can be used when no style is available - but generally its better to just define the style across the site and make it available. This is the defined list of styles at the moment, I will try to keep this up to date:

The site-wide defaul font (applied to the body tag) is below - if you type into the body area, this is what will appear:
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #393939;
line-height: 1.7em;

HTML Usage + Example
<p> </p>

Paragraph, it has padding & margins applied. Creates a double line break.

This is a paragraph

This is a second paragraph
<br/>

There is no style applied to this, but it will create a single line break instead of the p.

This is a paragraph
with a br line break in it
<h1></h1> This is the largest heading, its 19px

This Is A Large H1 Heading
<h1 class="title">
</h1>		 A blue version, 16 px, it is used for all page titles

H1 with the title class
<h2></h2> Second largest heading

H2 heading
On The Homepage
<h2></h2>		 If on the homepage, in the center body area - if you use a normal <h2> tag - it will show up as the blue background title bar.

Homepage H2 heading
<h3></h3> Third largest heading, I generally use this for page sub-headings above paragraphs.

H3 heading
<h3 class="sep">
</h3>		 This adds a bottom border seperator line

H3 Heading with seperator
<h3 class="home">
</h3>		 This is used only on the homepage for the bold copy at the top of the page.

H3 Heading, on the homepage
<h4></h4> 4th largest heading - not in use much, basically can use Bold to get the same effect.

H3 heading
<a href=#> </a> For links that occur inside paragaphs, this is the basic link style. It is underlined and has a rollover effect. This is a link in a paragraph

Specific Page Type Styles:
These are general styles that can be applied wherever. They can be added to any type of html tag, by adding a class. For instance <p class="author"></p> would apply the first one below. It would have both the paragraph styles and the specific author styles applied.

HTML Usage + Example
class="author" This is used at the top of news pages below the heading as a smaller grey style.

The author style applied
class="callout-box" This is a 300px wide box around any text.
This is a callout box
class="feat-firmcontact" This should surround the featured firm contact information.

Firm contact information in their feature profile
class="feat-date" Used on featured firms around the date fields. Is a grey 13px arial font, and floats to the right.

11/1/2007 Date Style
class="style1" This was a carryover from the old site, its a gray small font, used often in dates or under headings.

Style 1, a generic small grey style for subheadings