Fonts

• header & footer: Tahoma, Verdana, Arial, sans-serif
• headings (h1, etc) & left hand navigation links: Tahoma, Verdana, Arial, sans-serif
• body text: Georgia, Times, serif

General colors:

• green (header border match)- color: #90A860 
• yellow background (callout-box & sidebar match) - color:#FDFEE9
• dark grey background (header match fade to darker color) - color: #2B2B2B
• dark grey background (header match fade to lighter color) - color: #5A5A5A
• light off-grey background (callout-box header match) - color: #B3B4A5
• light grey background (footer match) - color: #F1F1F1

Element colors:

• body text: color: #333333
• header text: color: #ffffff
• inactive search box choices text & "ask a librarian" text: color: #999999
• search box tip text & footer text: #666666
• a:link, a:visited - color: #6C8044, border-bottom: 1px solid #DDDDDD example (live link)
  
• a:hover - color: #333333, border-bottom: 1px solid text - color: #333333 example (psuedo hover state)
• images -border 1px solid #B3B3B3
• tables
  • border color: #CCCCCC, 1px solid
  • table header -color:#FDFEE9

  • header
    example td

Classes

Images

Standard inline images may be tagged with one of two classes: "image_left" and "image_right".  These two classes float the image either left or right of the text.  These are equivalent to the now deprecated align=right or align=left.  Note that the new classes actually do the opposite of the old align attribute.  image_left will flow the text to the right of the image, while image_right will flow text to the left of the image.

example: <img class="image_left" src=""/>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sapien. Mauris gravida tortor ut odio. Aliquam urna. Morbi consequat, justo ut tincidunt sollicitudin, magna lacus semper mauris, et tempor metus ipsum sed orci. Donec vitae mauris vel nulla fermentum fermentum. Donec diam ligula, feugiat et, aliquam id, lacinia a, purus. Maecenas dapibus tellus vel ligula tristique elementum. Quisque quam dui, ultrices at, mattis eu, dignissim sagittis, pede. Suspendisse porta massa sed metus. Maecenas orci justo, tincidunt ac, ullamcorper eu, adipiscing vitae, dui. Cras adipiscing risus et purus. Cras mattis tortor.

example:<img class="image_right" src=""/>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sapien. Mauris gravida tortor ut odio. Aliquam urna. Morbi consequat, justo ut tincidunt sollicitudin, magna lacus semper mauris, et tempor metus ipsum sed orci. Donec vitae mauris vel nulla fermentum fermentum. Donec diam ligula, feugiat et, aliquam id, lacinia a, purus. Maecenas dapibus tellus vel ligula tristique elementum. Quisque quam dui, ultrices at, mattis eu, dignissim sagittis, pede. Suspendisse porta massa sed metus. Maecenas orci justo, tincidunt ac, ullamcorper eu, adipiscing vitae, dui. Cras adipiscing risus et purus. Cras mattis tortor. 

For extremely wide images (widths greater than 400px), you will need to wrap the image in an additional classed paragraph tag: <p class="imagewrapper", as well as adding a class to the image tag itself: <img class="wideimage" >.  These help internet explorer deal with some rendering issues. See example.

Tables

Tables can be classed with either "left-align" or "centered_table".  You may still enter the colspan attribute manually if you need to have the header  or other row element span more than one column.  You can also click on the "merge table cells" icon in the toolbar in Omni Update. Note that the <th> element is always centered in these classes.

example: left-align

example: centered-table

example: no styling