University at Albany, Media & Marketing
Updated 03.06.06

Web TemplatesV2 Styles

W3C/CSS validation main_content01a.css

"Hard code" location for this style sheet:
<link href="http://www.albany.edu/webtemplates/version02/css/main_content01a.css"
rel="stylesheet" type="text/css">

CSS styles & navigation As rendered in browser Function
a Link as dark red Highlights a hyperlink in red - #9A211E
a:hover Hover link with underline Applies underscore to a link upon rollover
a:visited Visited link as dark blue Defines a visited link as blue - #000080
body, td Verdana, Arial, Helvetica, Sans Serif, black text Sets body and table data font, color, size
p

Verdana, Arial, Helvetica, Sans Serif

 Sets paragraph font, size, and sets alignment left
ol
  1. ordered list indented 10 pixels
 Creates alpha list, indented 10 pixels
ol.outside
  1. ordered list w/outdented number
 Creates alpha list, indented 10 pixels w/outdented number
ul
  • unordered list indented 10 pixels
 Creates bulleted list, indented 10 pixels
ul.outside
  • unordered list w/outdented bullet
 Creates bulleted list, indented 10 pixels w/outdented bullet
.indent10px

10px indented text

 Indents text 10 pixels
.index25px

25px indented text

 Indents text 25 pixels
.center Centered text Centers text
.flushright

Flush right text

 Sets text flush right
.h2red

heading 2 red

 Defines h2 as #9A211E. Most UAlbany pages will begin with this red heading
.h2tan

heading 2 tan

 Defines h2 as #CBAF42, an optional medium yellow ochre for more subtle titling needs
.h3

heading 3

 Defines h3 (subordinate to h2)
.h4

heading 4

 Defines h4 (subordinate to h3)
.h5

heading 5

 Defines h5 (subordinate to h4)
.h6

heading 6

 Defines h6 (subordinate to h5)
.smalltext

Alternate small text

 Defines a small text option as .8em
.smalltext9em

Alternate small text

 Defines a small text option as .9em
.sidehead

third column main heading

 Defines heading for tertiary right hand column
.sidecontent

Third column text

 Defines text for right hand column
.caption

Defines a caption as small italics

 Creates caption text
.bold

Bold text

 Applies bold text
.italic

Italic text

 Applies italic text
.underscore

Underscore text

 Underscores text
.whitetext

White text

 Creates white text
.wborderfull2px

White full border 2 pixel

 Applies white border, 2 pixels - primarily for images
hr
Redefines horizontal rule - 1 pixel, medium yellow ochre, #CBAF42
.topbordercbaf42
 
Applies a 1 pixel top border rule - #CBAF42
.botbordercbaf42
 
Applies a 1 pixel bottom border rule - #CBAF42
.textdarktan

text as dark tan

 Defines text as dark tan
.wborderbottom1px
 
Defines 2px white bottom border rule
.wborderright1px
 
Defines 1px white right border rule
.wborderleft1px
 
Defines 1px white left border rule
.td_litetan
 
Defines light tan background
.td_bordleft_botlitetan
 
Defines medium tan background w/1px light tan left & bottom rule
.td_medtan
 
Defines medium tan background
.td_darktan
 
Defines dark tan background
.td_bordrtdarktan
 
Defines 1px dark tan right border rule
.td_bordbotlitetan
 
Defines 1px light tan bottom border rule
.td_bordleftlitetan
 
Defines 1px light tan left border rule
.pagebottomnav

Page bottom global nav centered

 Defines page bottom global navigation
.td_leftnav
 
Vertically repeats a 1px X 161px image with a #F8F2DC pixel and #DAC880 background, creating a left rule
.leftnav_spacer
 
Creates a dark ochre background w/med ochre 1px top rule
.leftnav_button
Left Navigation button
Defines left navigation button, text & colors
.leftnav_button a:link
Left Navigation button
Defines left nav link text color
.leftnav_button a:visited
Left Navigation button
Defines left nav visited link text color
.leftnav_button a:hover
Left Navigation button
Defines left nav link rollover text
.leftnav_breadcrumb
Left Navigation button
Defines nav text as red to note current page
.leftsubnav_button
Left Subnavigation button
Defines left subnavigation button, text & colors
.leftsubnav_button a:link
Left Subnavigation button
Defines left subnav link text color
.leftsubnav_button a:visited
Left Subnavigation button
Defines left subnav visited link text color
.leftsubnav_button a:hover
Left Subnavigation button
Defines left subnav link rollover text
.leftsubnav_breadcrumb
Left Subnavigation button
Defines nav text as red to note current page
.leftnavblue_button
Left Sectional Nav button
Defines left sectional navigation button, text & colors
.leftnavblue_button a:link
Left Sectional Nav button
Defines left sectional nav button, text & colors
.leftnavblue_button a:visited
Left Sectional Nav button
Defines left sectional nav visited link text color
.leftnavblue_button a:hover
Left Sectional Nav button
Defines left sectional nav link rollover text
.leftnavblue_breadcrumb
Left Sectional Nav button
Defines nav text as white to note current page
.pagebottomnav

Page bottom global navigation

 Defines centered global navigation text

 

CSS styles As rendered in browser Function
.h1

heading 1

 Defines h1 (no specified application at this time)
.h1tan

heading 1

 Defines h1 as #CBAF42, an optional medium yellow ochre for more subtle titling needs (no specified application)
.h1red

heading 1

 Defines h1 as #9A211E (no specified application at this time)
.h1blue

heading 1

 Defines h1 as #204875 (no specified application)
.h2

heading 2

 Defines h2
.h2tan

heading 2

 Defines h2 as #CBAF42
.h2red

heading 2

 Defines h2 as #9A211E
.h2blue

heading 2

 Defines h2 - #204875
.h3

heading 3

 Defines h3
.h3tan

heading 3

 Defines h3 as #CBAF42
.h3red

heading 3

 Defines h3 as #9A211E
.h3blue

heading 3

 Defines h3 - #204875
.h4

heading 4

 Defines h4
.h4tan

heading 4

 Defines h4 as #CBAF42
.h4red

heading 4

 Defines h4 as #9A211E
.h4blue

heading 4

 Defines h4 - #204875
.h5

heading 5

 Defines h5
.h5tan

heading 5

 Defines h5 as #CBAF42
.h5red

heading 5

 Defines h5 as #9A211E
.h5blue

heading 5

 Defines h5 - #204875
.h6

heading 6

 Defines h6
.h6tan

heading 6

 Defines h6 as #CBAF42
.h6red

heading 6

 Defines h6 as #9A211E
.h6blue

heading 6

 Defines h6 - #204875

Note: Most styles require application using a paragraph tag within a table for accurate rendering.

 

Basic color palette Hex number/RGB values Use description Page type
Light Yellow Ochre #F8F2DC / R248,G242,B220 Field color, banner 2nd level+ below
Medium Yellow Ochre #DAC880 / R218,G200,B128 Field color All
Dark Yellow Ochre #CBAF42 / R203,G175,B66 Left nav color All
Banner Purple #614E6C / R97,G78,B108 Top banner Home page
Rules Medium Ochre #E3D39B / R227,G211,B155 Content divider All
Top Nav Rollover Red #9A211E / R154,G33,B30 Mouseover link state Home page
Feature Box Red #B12616 / R177,G38,B22 Feature head area Home page
Link Red #9A211E / R154,G33,B30 Indicates hyperlink Home page+
Link Visited Blue #000080 / R0,G0,B128 Visited link state Home page+
4Block1 Red #B12616 / R177,G38,B22 4Block1 graphic Landing page
4Block1 Ochre #CBAF42 / R203,G175,B66 4Block1 graphic Landing page
4Block1 Teal #3D7083 / R61,G112,B131 4Block1 graphic Landing page
4Block1 Purple #433364 / R67,G51,B100 4Block1 graphic Landing page
4Block2 Orange #F69D00 / R246,G157,B0 4Block2 graphic Landing page
4Block2 Sienna #AD4D35 / R173,G77,B53 4Block2 graphic Landing page
4Block2 Moss #5D9A91 / R93,G154,B145 4Block2 graphic Landing page
4Block2 Purple #8D558D / R67,G51,B100 4Block2 graphic Landing page
4Block3 Purple #9B6A83 / R155,G106,B131 4Block3 graphic Landing page
4Block3 Tan #C2934B / R194,G147,B75 4Block3 graphic Landing page
4Block3 Green #70B598 / R112,G181,B152 4Block3 graphic Landing page
4Block3 Blue #6B99FC / R107,G153,B252 4Block3 graphic Landing page

 

CSS Page Titles
CSS standard page title for use with Affiliated Centers pages and Level3 pages
Page title element example: page title shell styled table with nested page title styled table.
Page Title

 
.pagetitleshell

Defines a table to hold a nested pagetitle table cell.

 

 
.pagetitle

Defines a pagetitle table cell
Page Title

 
CSS departmental page title styles for use with Colleges & Schools pages
Departmental page title element example: pagetitle_dept shell styled table with nested page title_dept styled table.
Department Page Title

 
.pagetitle_deptshell

Defines a table to hold a nested departmental page title table cell
 

 
.pagetitle_dept

Defines a departmental page title table cell
Department Page Title

 

Design Element Examples Components
CSS Examples

1Block
CSS
Example

(Text can be directly edited.
Colors can be altered using styles)

Text message here
Insert photo description here


•.td_1block_shell

•.td_1block_left

• image: 261px wide x 126px high

4Block
CSS
Example

(Text can be directly edited.
Colors can be altered using styles)

Insert photo description here Enter text here Enter text here Insert photo description here
Insert photo description here Enter text here Enter text here Insert photo description here


•.td_4block3_shell

•.td_4block3_topleft

•.td_4block3_topright

•.td_4block3_botleft

•.td_4block3_botright

• 4 images: 114px wide x 63px high
Graphic Image Examples

1Block
Graphic
Image
Example

(Requires Photoshop or other software to edit text & colors & images)
Welcome to the Advisement Services Center
Advisor and student


• table: 388px wide x 126px high, 1 row x 2 col.

• image: 127px wide x 126px high

• image: 261px wide x 126px high

4Block1
Graphic
Image
Example

(Requires Photoshop or other software to edit text & colors & images)
UAlbany School of Public Health Mutant Mouse Regional Resource Center
Gen*NY*sis Center for Excellence in Cancer Genomics Center for Functional Genomics


• table: 370px wide x 120px high, 2 rows x 2 col.

• 4 images: 185px wide x 60px high

• .wborderfull2px

 

4Block2
Graphic
Image
Example

(Requires Photoshop or other software to edit text & colors & images)
UAlbany School of Public Health Mutant Mouse Regional Resource Center
Gen*NY*sis Center for Excellence in Cancer Genomics Center for Functional Genomics


• table: 388px wide x 126px high, 2 rows x 2 col.

• 4 images: 194px wide x 63px high

• .wborderfull2px

 

4Block3
Graphic
Image
Example

(Requires Photoshop or other software to edit text & colors & images)
UAlbany School of Public Health Mutant Mouse Regional Resource Center
Gen*NY*sis Center for Excellence in Cancer Genomics Center for Functional Genomics


• table: 388px wide x 126px high, 2 rows x 2 col.

• 4 images: 194px wide x 63px high

• .wborderfull2px