This is H1 Title: 48pt = 64px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a. Suspendisse non purus id elit imperdiet tempus ut vel dui. Aliquam porta metus finibus nisl aliquam pellentesque Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pellentesque pulvinar sem, egetiaculis augue sodales a.

This is H2 Title: 36pt = 48px

This is H3 Title: 36px

This is H4 Title: 36px

This is H5 Title: 30px

Paragraph Text

Font: Open Sans, sans-serif;
Color: #555555
Font-Size: 28px; (21pt)
Line-height: 42px or 1.5em

Image size = 350 px x 197 px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Above is the space between paragraphs. Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue. Proin ornare malesuada odio sed pulvinar. Donec faucibus velit sed nulla sodales et suscipit lectus placerat. Quisque quis gravida augue.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue. Proin ornare malesuada odio sed pulvinar. Donec faucibus velit sed nulla sodales et suscipit lectus placerat. Quisque quis gravida augue.

Unordered List

Bullet point as part of an unordered list
Bullet point as part of an unordered list
Maecenas sagittis leo et leo tincidunt eu elementum lectus dictum. Pellentesque fermentum, magna in mattis interdum, ante tortor molestie justo, a volutpat magna dui id turpis. Pellentesque eros nibh, venenatis non malesuada sit amet, sodales vitae augue.

When an ordered list reverts to paragraph style the spacing is what we see in this situation.

Unordered List (as links)

When an unordered list reverts to paragraph style the spacing is what we see in this situation.

Ordered List

Numbered item as part of an ordered list
Numbered item as part of an ordered list
Numbered item as part of an ordered list

When an ordered list reverts to paragraph style the spacing is what we see in this situation.

Small Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac velit libero, eu gravida nibh. Ut augue lorem, venenatis quis condimentum sit amet, lacinia tristique nunc. Maecenas elementum lacus id nisi volutpat vel viverra nunc ultricies. Sed aliquet sollicitudin risus, eu imperdiet nulla commodo malesuada.

Links

Important Marketing Questions

Tables

For aligning text into columns:

Color Code	Color Name	Color Swatch
#555555	Dark Gray
#ebebeb	Light Gray
#777777	Medium Gray

Colors

#ffd76d	Yellow	AAA
#ffb800	Dark Yellow	AAA
#ffa63f	Light Orange	AAA
#f0652f	Orange	AA
#C45125	Burnt Orange	AAA
#94D5F3	Light Blue	AAA
#68bbe3	Medium Light Blue	AAA
#0e587a	Dark Blue	AAA
#9CA6F2	Lavendar	AAA

a:hover { color:#9da6f1; }
a:active { color:#0e587a; }
a:visited { color:#0e587a;}

Templates

Our Services Use “services” template
People We Serve Use “clients” template
Family Support Use “Support” template
Service Providers Use “providers” template
About Us Use “about” template

Images

The interior pages of the website have a default image size in the banner at the top of the page.

The size is 756 pixels wide and 425 pixels tall at 72 pixels per inch. Most original photos are bigger than the required size. If an existing photo or one provided is not large enough to be cropped to the correct size, find an alternate image. Smaller images are not allowed as a “featured image” on an interior page.
If you do not know how to use tools to crop images ask for help or for someone to do the task for you. Incorrect sizing of images is not acceptable and a violation of the design standards for this website.
Always include description “alt” text when uploading an image to the Media Library.
The media Library has lavendar and blue graphics with a watermark of the RCOC logo that can be used where a photo is not available or is not needed.

Setting correct height of the interior banner does not happen automatically

Each page has “Description” field that can hold up to four lines of text that is displayed below the title in the top banner.
If this field is left empty, it is necessary to add four “break” indicators: — this will make the height of the photo and the banner approximately 360 px high.
As an example, if the description was two lines of text, then three “ ” would need to be added to get the height of the photo and the banner approximately 360 px high.

Images added to the “body text” area of the interior pages should be displayed at the full width of the page or slightly less than half the width of the page. Full width = 756 px and partical width = 350 px. Other widths, either less than 350 px or between 350 px and 756 px may create an unprofessional appearance for the website.

The banner image on the home page at 1920 pixels wide and 826 pixels tall at 72 pixels per inch. The smaller images on the home page are sized automatically from the interior page or news item displayed

The image next to the “Welcome” message is uploaded to the Welcome page as a featured image at 756 pixels wide and 425 pixels tall at 72 pixels per inch

Example: Full width of body text area (756 x 425)

Example: Display size 640 x 360 for interior Banner from 756 x 425 original

Style Guide

This is H1 Title: 48pt = 64px

This is H2 Title: 36pt = 48px

This is H3 Title: 36px

This is H4 Title: 36px

This is H5 Title: 30px