Horizontal navigation (above 768 width)

Header 
Height: 50px
BG-color: #450084
Wordmark height: 30px

Header

Audience Links
Arial Regular 12px #D6D6D6
Hover: #ffffff
hover text decoration: underline

audience links

Menu 
Height: 37px
BG-Color: #dfd2aa
Arial Regular 18px #450084
hover/selected: BG #ad9c65
hover text decoration: underline

menu
Global Footer

Bottom Nav
Padding-top: 10, padding-bottom: 10
BG-color: #450084
Arial 20px #ffffff
Hover: #d6d6d6
hover text decoration: underline
Padding: 10px, centered

bottom navigation

Address Section:
Height: 87px
BG-Color: #F4EFE1
Logo: 145px x 67px
Line: 1px x 67px, padding left/right: 5px 

Address: Arial 10px #595959

address section
Horizontal navigation (below 768 width)

Header 
Height: 38px
BG-color: #451d69

header

Page Title (h1) 
Height: 60px BG color: #f4efe1 

Left Nav Expander (+)
Arvo 22px #450084

left-nav

Audience Links (Top)
BG-color: #450084
Arial 12px #D6D6D6
Padding: 5px
Arial (caps) 14px #450084

Hamburger Drawer
BG color: #cbb677

Links:
Arial (caps) 14px #450084

Secondary Links:
Arial (caps) 12px #450084

drawer

Bottom Navigation
(same specifications as bottom navigation above 768 width)

bottom nav

Footer
Info is centered and stacks.

footer
left nav

Page Title 
H1 #450084

Section Title
Arial 16px #333333
Bold, uppercase
Line-height: 20px

page title

Left Navigation, Primary:
Arial (caps) 14px #333333
Current page: Bold (caps)

Left Navigation, Secondary:
Arial 12px (lh: 22)
Current Page: Bold 14px; bg-color: #efefef

Dividers:
1px by 120px #d6d6d6

left nav

Left Navigation, Tertiary:
Arial Bold 10px 
Line-height: 22px
Border-bottom

Style to indicate current selection:
Arial Bold 10px

tertiary
left nav behavior

Unexpanded vertical navigation. Items with secondary level are indicated with a triangle.

NOTE: all "container" items (items with a triangle) are only containers and will never open pages.  This is to maintain consistency in behavior, and to not require there to be a default page for every container.  In mobile this is especially needed, since having the page refresh at every level of navigation would require the user to continue to open up the navigation again to see where they are.

unexpanded

The chosen item is now bold if the page associated with that item is loaded. The triangle rotates and the secondary level is now visible. 

If a secondary level option is clicked, that is indicated by bold text, and a grey background. Items with tertiary level navigation again have a triangle indicator.

expanded

When an item with third level is clicked, this frame opens to reveal the tertiary level.  The parent node of the tertiary level has a background color and if an item is selected within tertiary level it is indicated by bold text.

tertiary
In-page footer

The in-page footer displays below the page content and above the global footer. It is optional, displays the contact info for the appropriate office/etc per the page it is on. 

Office Title
Arvo: 16px
Color: #595959

BG-color: #D6D6D6

Information:
(Email, Phone, Fax Hours, Address)
Arial 12px, #595959

footer

At screen width of 480 and below:
10px between information blocks.

footer

Back to Top