Horizontal navigation (above 768 width)

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


Height: 37px
BG color: #DFD2AA
Arial Regular 18px #450084
hover/selected: BG #AD9C65
hover text decoration: underline

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)

Height: 38px
BG color: #451D69


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

Left Nav Expander (<)
BG color: #450084


Hamburger Drawer
BG color: #CBB677

Arial (caps) 14px #450084

Secondary Links:
Arial (caps) 12px #450084


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

bottom nav

Info is centered and stacks.

Left navigation

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

1px by 120px #D6D6D6

left nav

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

Style to indicate current selection:
Arial Bold 10px

Left navigation 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.


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.


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.

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

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


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


Back to Top