Style demo for main_content01.css

University at Albany, Media & Marketing
main_head_color01.css, ver. 1, updated 05.13.04
Principal Cascading Style Sheet - basic styles

Styles for main_content01.css

main_content01.css

"Hard code" location for this style sheet:
<link href="https://www.albany.edu/main/css/main_content01.css" rel="stylesheet" type="text/css">

Style	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	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
.pagebottomnav	Page bottom global navigation centered	Defines centered global navigation text

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

Color	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

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


Standard page title 3 col.	Created from pgtitle_level3_primary.psd


Departmental page title 2 col.	Created from pgtitle_department.psd


Departmental page title 3 col.	Created from pgtitle_department.psd

Graphic Image Left Navigation
Leftnav graphic examples created with an image editing program such as Photoshop
leftnav standard button	Created from leftnav_primary.psd

leftnav standard rollover button	Created from leftnav_primary.psd

leftnav rollover demonstration	Using leftnav01.gif & leftnav01over.gif


leftnav subnavigation button	Created from leftnav_secondary.psd

leftnav subnavigation rollover button	Created from leftnav_secondary.psd

leftnavsub rollover demonstration	Using leftnavsub01.gif & leftnavsub01over.gif


leftnav sectional divider button	Created from leftnav_tertiary.psd

leftnav sectional divider rollover	Created from leftnav_tertiary.psd

leftnav sectional rollover demo	Using leftnav_tertiary.gif & leftnav_teriary01over.gif