Styles example

NOTE: The H1 should never be used within the page content. It is reserved for the primary page title, and is automatically created by the system. This is good for SEO.

 

H2 Title Example

font-family: 'Open Sans', sans-serif; text-transform:uppercase; color:#196a73; margin:1em 0 .3em 0; font-size:16px; font-weight:600; line-height:1.1em;

Useful for major shifts in text content within the body of the page.

 

H2 Title with borderTop class applied

Useful for adding even more emphasis to a page division

 

H3 Title Example

font-family: 'Open Sans', sans-serif; text-transform:uppercase; color:#196a73; margin:1em 0 .3em 0; font-size:14px; line-height:1.1em;

Used for lesser content shifts, typically within a section previously defined via an H2 tag

 

H4 Title Example

font-family: 'Open Sans', sans-serif; text-transform:uppercase; color:#196a73; margin:1em 0 .3em 0; font-size:12px; line-height:1.1em;

Useful for longer lists that feature many headers

 

NOTE: H5 and greater are not used by this site.

 

 

Example Two Column Layout Using Floats:

My right column content...

Praesent sit amet lobortis orci, a lacinia ipsum. Mauris sed sapien ac justo facilisis laoreet. Pellentesque a viverra quam, quis ornare libero. Etiam pretium mauris urna, a vehicula nunc interdum ut. Nulla rhoncus interdum egestas.

My left column content...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac lacinia ante. Proin in urna sodales sapien fringilla accumsan. Donec porta quam a elementum dapibus.

 

EXAMPLE Blockquote with fancyquote class applied:

In luctus mauris ac metus iaculis, at cursus tellus blandit. Ut sit amet pulvinar lectus, ut adipiscing ligula.

- Roger Smith

 

Specific Link Styles:

Members Only Link

Download PDF File 

Watch video

Download a file

.memberLink

.pdfLink

.videoLink

.emailLink

.fileLink

 

 

Use button classes to turn regular links into buttons:

This is a regular button

This is a large button

This is a regular orange button

This is a regular green button

Green Button with arrow

This is a large red button

 

Use the HR (horizontal Line) element to seperate the page content into sections

 


 

Photos can be floated to the left or right of text content using the floatleft or floatright classes. This logo has floatleft applied to it.

 


 

 This photo has floatright applied to it, and it also has the photo class applied which adds a nice looking border treatment. The photo class should only be applied to photographs.

 

 

Members Only Content: 
Not Member Only