University at Albany, Media & Marketing
Updated 10.21.04

Web TemplatesV2 Styles

main_content01a.css

"Hard code" location for this style sheet:
<link href="https://www.albany.edu/main/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.
Creates alpha list, indented 10 pixels
ul
  • unordered list.
Creates bulleted list, indented 10 pixels
.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
.h2

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
.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
.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_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
.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

 

Graphic Image Page Titles
Page Title graphic examples created with an image editing program such as Photoshop
Standard page title 2 col. Created from pgtitle_level3_primary.psd
Level Three Page Title
 
Standard page title 3 col. Created from pgtitle_level3_primary.psd
Level Three Page Title
 
Departmental page title 2 col. Created from pgtitle_department.psd
Level Three Page Title
 
Departmental page title 3 col. Created from pgtitle_department.psd
Level Three Page Title

 

Graphic Image Left Navigation
Leftnav graphic examples created with an image editing program such as Photoshop
leftnav standard button Created from leftnav_primary.psd
Level Three Page Title
leftnav standard rollover button Created from leftnav_primary.psd
Level Three Page Title
leftnav rollover demonstration Using leftnav01.gif & leftnav01over.gif
Level Three Page Title
 
leftnav subnavigation button Created from leftnav_secondary.psd
Level Three Page Title
leftnav subnavigation rollover button Created from leftnav_secondary.psd
Level Three Page Title
leftnavsub rollover demonstration Using leftnavsub01.gif & leftnavsub01over.gif
Level Three Page Title
 
leftnav sectional divider button Created from leftnav_tertiary.psd
Level Three Page Title
leftnav sectional divider rollover Created from leftnav_tertiary.psd
Level Three Page Title
leftnav sectional rollover demo Using leftnav_tertiary.gif & leftnav_teriary01over.gif
Level Three 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