PVII CSS Page Builder Magic

CSS Page Builder Magic User Guide

Page Builder Magic is a Dreamweaver extension that allows you to select a

page from among 16 unique CSS layouts and then creates that page instantly.
We hope you enjoy using this product as much as we did making it.

Al Sparber & Gerry Jacobsen, PVII

2 Install the extension

Contents
Install the extension .............................................................................................................................. 4

Work in a defined Dreamweaver site ......................................................................................................... 4

Specify local site location ..................................................................................................................... 4

Site Name ..................................................................................................................................... 4

Local Site Folder ............................................................................................................................. 4

Creating a Page Builder Magic page ........................................................................................................... 5

Page Builder Head Content...................................................................................................................... 6

Meta Tag and Title ........................................................................................................................ 6

CSS and Script Links ...................................................................................................................... 6

IE Conditional Comments .............................................................................................................. 7

Site Wide Management .......................................................................................................................... 7

Assets folders ...................................................................................................................................... 7

Uploading to your server ..................................................................................................................... 7

Page Builder Magic on mobile devices ............................................................................................... 8

Feature-rich, accessible, and usable........................................................................................................... 8

Advanced CSS Effects ....................................................................................................................... 9

CSS rounded corners .......................................................................................................................... 9

border-radius syntax ....................................................................................................................... 9

CSS shadows .................................................................................................................................. 10

box-shadow syntax ....................................................................................................................... 10

Editing and determining RGBA colors .................................................................................................... 11

Dynamic Image Sizing ....................................................................................................................... 12

2
3 Install the extension

CSS Layout Columns ............................................................................................................................ 13

Default CSS Classes Assigned to Columns ............................................................................................... 13

Changing the Column Background........................................................................................................ 13

Changing Column Width .................................................................................................................... 14

Editing Text Attributes ......................................................................................................................... 14

Page Builder Magic CSS fundamentals ...................................................................................................... 15

Rule-by-Rule Analysis ................................................................................................................. 15

Special styles for mobile devices .............................................................................................. 24

Support and Contact info ...................................................................................................................... 25

PVII Knowledge Base ........................................................................................................................ 25

PVII Communities ......................................................................................................................... 25

RSS News Feeds ........................................................................................................................... 26

Before you Contact us ................................................................................................................... 26

Snail mail.................................................................................................................................... 26

3
4 Install the extension

Install the extension

Look for the extension installer file p7_CSSPBM_109 (or higher) in the root of the zip archive you downloaded.
Double-click the file to install the extension. Dreamweaver's Extension Manager will open and you will be
prompted to complete the installation. Once you complete the installation restart Dreamweaver.

OS X users: If, upon double-clicking the installer, Extension Manager does not properly launch, you have a file
association issue. To remedy the problem locate the installer file from inside a Finder window and double-click it.

Work in a defined Dreamweaver site

Before you begin, make sure you are working inside a defined Dreamweaver web site. This is necessary so that
Dreamweaver knows how to link required assets. If you are new to Dreamweaver or need to learn how to define a
web site, follow these simple steps:
Choose Site > New Site

Specify local site location

The Site category of the Site Setup dialog box is the only one you need to fill out to begin working on your
Dreamweaver site. This category lets you specify the local folder where you’ll store all of your site files. When
you’re ready, you can fill out the other categories in the Site Setup dialog box, including the Servers category,
where you can specify a remote folder on your remote server.

Site Name
The name that appears in the Files panel and in the Manage Sites dialog box; it does not appear in the browser.

Local Site Folder

This is the name of the folder on your local disk where you store site files, templates, and library items. Create a
folder on your hard disk or click the folder icon to browse to the folder. When Dreamweaver resolves site root-
relative links, it does so relative to this folder.

4
5 Creating a Page Builder Magic page

Creating a Page Builder Magic page

Let's see how easy it is to create a page. To create a page, choose: File > New PVII PagePack > CSS Page Builder
Magic
The interface will open.

Select a layout from the Page Design column and the Preview image will change to reflect your choice. Click the
Create button. The Save As dialog will open. Browse to a folder within your current Dreamweaver-defined site so
that it appears in the Save in box. Enter a File name and click Save.

5
6 Page Builder Head Content

Page Builder Head Content

Your Page Builder Magic page will contain the following code in the document head:

Meta Tag and Title

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
This meta tag locks IE8, IE9, IE10 (and up) in standards-rendering mode to ensure optimum display of your page.

<title>CSS Page Builder Magic: Layout 1</title>

This is your page title. Edit it to make it your own.

CSS and Script Links

<script type="text/javascript" src="p7ehc/p7EHCscripts.js"></script>
This is a link to the Equal Height Columns JavaScript.

<link href="p7csspbm/p7csspbm_01.css" rel="stylesheet" type="text/css" />

The main Page Builder Magic CSS file. Page Builder CSS files use a naming convention: p7csspbm followed by an
underscore and the number of the layout (from 1-16).

<link href="p7csspbm/p7csspbm_print.css" rel="stylesheet" type="text/css" media="print" />

A special print media style sheet that optimizes your page for printers.

6
7 Site Wide Management

IE Conditional Comments
<!--[if lte IE 7]>
<style>
.menutop li, .thumbs p {display: inline;}
div, .menuside a {zoom: 1;}
.masthead .banner {width: 100%;}
</style>
<![endif]-->
Special style rules carried inside Microsoft conditional comments to fix CSS issues for versions less than or equal to
IE 7.

Site Wide Management

Once you create, save, and customize your first page you should make a decision on how to manage repeating
content, such as headers, menus, and footers. The two most popular methods would be Dreamweaver's Template
utilities (DWT) or Server-Side Includes.

Assets folders
When your page is created, the Page Pack system generates the following folders
 p7csspbm
This folder contains your Page Builder Magic CSS files and script
o img
This sub-folder contains a single file, the sample banner image used in all Page Builder Magic
pages.
 p7ehc
This folder contains the PVII Equal Height Columns script
The Page Pack system will create these folders in the same folder where you save your Page Pack page. This is a
workflow feature that enables you to create multiple testing folders in which to play—but you must be mindful of
where your relevant assets folders are when you ultimately publish your page or when you edit assets.

Uploading to your server

When you publish your page, you need to upload the entire p7csspbm and p7ehc folders.

7
8 Page Builder Magic on mobile devices

Page Builder Magic on mobile devices

By default, CSS Page Builder Magic pages display the same on all devices. Your site will work on desktop, laptop,
smartphone, and tablet browsers—without having to make duplicate pages.

Feature-rich, accessible, and usable

Page Builder Magic uses modern CSS such as rounded corners, shadows, and equal height columns. This makes it
extremely easy for you to maintain and customize your site. The advanced CSS we use is deployed in ways that
enhance modern browsers while assuring an attractive and accessible presentation in older ones. The idea is to
start with a solid foundation that is accessible to all browsers and devices and then enhance it for those that
support advanced CSS. The result is that your page is accessible to all, attractively designed for all, with additional
special effects available for modern devices. Here are the key features:
 Automatic Page-Creation interface
 16 layouts (choose from an assortment of fixed and flexible-width pages)
 Equal height columns (script-based so no background images are needed)
 Mobile-ready means you create one Web site that looks the same on desktop, laptop, and mobile devices
 Search engine friendly
 Standards-based and accessible
 Stable cross-browser compatibility
 Compatible with PVII widgets and menu systems
 PDF user guide
 Free technical support

8
9 Advanced CSS Effects

Advanced CSS Effects

CSS rounded corners

We use CSS border-radius to round corners on elements such as menu links and the main layout container.

Note: CSS3 border-radius is supported by modern browsers including Firefox 4, Opera 11, Safari 5, Chrome 2, and IE9.
Older browsers default to rectangular corners

border-radius syntax
Consider the declaration:
border-radius: 6px;
It creates a 6px radius curve at all 4 corners, which is expressed with a single value.

Tip: To increase the amount of curve, increase the radius value. To decrease the curve, reduce it.

You can also set a unique radius for each corner of an element. The border-radius property allows for 4 separate
values, one for each corner. The values are expressed starting with the top-left and moving clockwise to the top-
right, the bottom-right, and the bottom-left. While we don't use this technique in Page Builder Magic, it can come
in handy.

border-radius: 10px 20px 0px 40px;

border-radius: 10px 10px 0px 0px;

border-radius: 30px 0 0 30px;

9
10 Advanced CSS Effects

CSS shadows
The CSS box-shadow property is expressed using 3 properties. The first 2 are proprietary browser-specific names
and the third one is the actual W3C specified CSS3 name:
1. -webkit-box-shadow — Safari (Safari 6 will offer support for the default box-shadow syntax)
2. box-shadow — Firefox, Chrome, Opera and IE9

Note: CSS3 box-shadow is supported by modern browsers including Firefox, Opera, Safari, Chrome, and IE9.

box-shadow syntax
The box-shadow property is extremely powerful and far more nuanced than border-radius. We'll cover some basics
and how it's used in Page Builder Magic. For additional insight, we recommend reading the W3C specification.
Consider this simple rule:
.theDIV {
box-shadow: 10px 10px 20px #000;
}

The values represent:

box-shadow: horizontal offset | vertical offset | blur | color
Don't forget the browser-specific property name for Safari browsers.
You can also declare multiple shadows for an element. For instance, use a regular shadow, followed by an inset
shadow to create a bevel effect.
The 2 shadows are separated by a comma:
-webkit-box-shadow: 0px 0px 50px #999, inset -3px 20px 40px #C05A5A;
box-shadow: 0px 0px 50px #999, inset -3px 20px 40px #C05A5A;

10
11 Advanced CSS Effects

Editing and determining RGBA colors

While we do not use RGBA colors in Page Builder Magic, you can certainly use them to create easy transparency
effects. The following procedures will enable you to convert HEX colors to RGBA in Dreamweaver CS5 and under.
Dreamweaver CS5.5 and up have native support for RGBA built in.
RGBA stands for Red-Green-Blue-Alpha. Each value is separated by a comma. The alpha value allows you to set a
transparency level for the element being colored—whether it is a background color, a text color, or a border color.
White (255, 255, 255) and black (0, 0, 0) are easy. Dreamweaver can help you to determine the RGB values using
its standard color picker tool.
In your CSS Styles panel, select the rule you want to edit. Start by assigning a Hex color. Let's say #6C6. Open the
color picker. Then click the System Color Picker icon:

The System Color Picker will open:

Your RGB numbers are listed as the Red, Green, Blue values: 102, 204, 102. So change your color value to:
rgba(102,204,102,1);

11
12 Advanced CSS Effects

Remember, the "1" at the end is the alpha value and means your color is fully opaque (no transparency). To set
transparency, choose a decimal value between 1 and 0. For example, to set 50% transparency, your values would
be:
rgba(102,204,102,.5);

Dynamic Image Sizing

Setting images to dynamically resize allows you to use images in your pages without worrying about a perfect fit.
The images will shrink to fit as you reduce the size of your browser window, and will expand as you increase the
window size—while always maintaining its proper aspect ratio. The maximum size for your image will always be its
natural size.
To maintain this functionality, always remove the tag attributes that Dreamweaver adds when you insert an image.
To remove the tag attributes, select your image in Design View and clear the W and H boxes on the property
inspector:

You can deploy this method using a single contextual style rule to, for example, affect all images inside your main
content DIV:
div.main-content img {
max-width: 100%;
}
You can also deploy this method using a class that can be assigned to individual images:
img.dynasize {
max-width: 100%;
}
Simply apply the dynasize class to one or more images.

12
13 CSS Layout Columns

CSS Layout Columns

Page Builder Magic creates one, two, and three-column designs. The columns are always the full height of your
layout container. This is accomplished without using background images and enables you to change column widths
and/or background with simple CSS edits—as opposed to having to edit background images.

Default CSS Classes Assigned to Columns

Page columns have one of three classes assigned:
1. .sidebar
2. .main-content
3. .sidebar2
In a 2-column layout, sidebar is either left or right of main-content. In a 3-column layout, sidebar is left and
sidebar2 is right of main-content.

Changing the Column Background

To change the background for any of these elements, locate the relevant .sidebar or .sidebar2 rule in your CSS
Page Builder Magic style sheet and change the background color value to suit. You can also assign a background
image if you wish. Do not assign a background to main-content. Its background is picked up from what's assigned
to the columns-wrapper element.

13
14 Editing Text Attributes

Changing Column Width

Let's say you are using Layout 3, which is a 2-column design with a flexible main area and a fixed sidebar on the
left—and you want to change the sidebar from its default width (20%) to 24%. Open the p7csspbm_03.css file and
locate the following 2 rules:
.main-content {
float: left;
width: 80%;
}
.sidebar {
width: 20%;
float: left;
background-color: #EFEFEF;
}
Change the sidebar width value to 24% and main-content's width to 76%:
.main-content {
float: left;
width: 76%;
}
.sidebar {
width: 24%;
float: left;
background-color: #EFEFEF;
border-right: 1px dotted #000;
}

Editing Text Attributes

Text attributes are carried in the following rules:
 .sidebar .content, .sidebar2 .content { }
 .main-content .content { }

Sidebar and sidebar2 are grouped together in a single rule. Should you want separate attributes, create a separate
rule for each:
 .sidebar .content { }
 .sidebar2 .content { }

14
15 Page Builder Magic CSS fundamentals

Page Builder Magic CSS fundamentals

We heartily recommend that you print out this section for use as a desktop reference.

Web designers with intermediate or advanced CSS skills will find it very easy to customize your Page Builder Magic
pages. If you are a beginner, you should be able to undertake many customizations after reading this user guide. In
fact, you should print this guide and keep it handy as a desktop reference. All 16 CSS files are very similar.
Understand one and you will easily understand them all.
Let's look at the CSS file for Layout 5, p7csspbm_05.css:

Rule-by-Rule Analysis
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
background-color: #FFFFFF;
margin: 20px 0;
padding: 0px;
min-width: 800px;
}
Use the body rule to change font attributes, background, and whitespace (margin and padding) globally for your
page. Min-width determines the point at which your layout width will cease to shrink horizontally and your
browser will spawn a horizontal scroll bar.

.content-wrapper {border-radius: 8px; }

.masthead {border-radius: 6px 6px 0px 0px;}
.footer { border-radius: 0px 0px 6px 6px; }
These 3 rules manage your page’s rounded corners. The content-wrapper is assigned an 8px radius on all 4
corners. The masthead is assigned a 6px radius for its top corners only. The footer is assigned a 6px radius
for its bottom corners only. The footer and masthead radii must always be 2px less than the radii set on
the content-wrapper so that the content-wrapper’s border displays properly.

15
16 Page Builder Magic CSS fundamentals

.masthead {
background-color: #222
text-align: left;
position: relative;
z-index: 9999999;
}
You can change the background-color of the masthead to suit. Use the text-align property to align text or image
elements inside the masthead left, center, or right. Do not edit the position or z-index properties.

.masthead .logo { border-bottom: 1px solid #000;}

.masthead h1 {
margin: 0;
color: #FFF;
padding: 10px 30px;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.3em;
font-weight: normal;
}
The .masthead .logo DIV rule carries a bottom border that appears below the logo. The default logo we provide is
simply a level 1 heading, which may be replaced with an image of your logo. If you use a level 1 heading, you can
edit the .masthead h1 rule to suit.

.masthead .banner {
height: 120px;
overflow: hidden;
}
We set height and overflow hidden to allow you place an image in the banner that would normally be too large.
You can edit or remove this rule if you are using a fixed-width layout and design your banner image to fit.

.masthead .banner img {}

This rule is empty but can be used to set attributes for the image inside your banner. If you don't know what kind
of attributes to use on an image you probably should leave this rule blank.

16
17 Page Builder Magic CSS fundamentals

.content-wrapper {
border: 1px solid #222;
margin: 0 20px;
-webkit-box-shadow: 0 0 20px #999;
box-shadow: 0 0 20px #999;
}
The .content-wrapper is the main layout container. The entire page is inside this element. We assign a 1 pixel
border to surround the entire layout. We also assign a box-shadow effect.

.columns-wrapper {
overflow: hidden;
background-color: #FFF;
}
The .columns-wrapper is the containing element for the the main content columns. We set this area to have a
white background. This means that any individual column that is not assigned a specific background-color, will be
white. Overflow must remain hidden in order for your columns to remain equal height. Use this rule when you
want to change the background of your main-content column.

.main-content { width: 80%;

float: right;
}
The main content column is given a width of 80% and floated right. The main-content width added to the sidebar
width must always equal 100%.

17
18 Page Builder Magic CSS fundamentals

.sidebar {
width: 20%;
float: left;
background-color: #EFEFEF;
}
If you change width, remember to make a like adjustment to the main-content element's width so that they
total 100%.

.sidebar .content {
padding: 30px;
font-size: 12px;
line-height: 1.5em;
}
This container is inside the sidebar and serves as a container for the content inside, allowing you to adjust
whitespace (padding) without altering the CSS box model. Edit padding and font attributes to suit. If you add
properties to this rule, they will affect only the sidebar content.

.main-content .content {
padding: 30px;
font-size: 14px;
line-height: 1.5em;
border-left: 1px dotted #000;
}
This container is inside the main-content wrapper and serves as a container for the content inside, allowing you to
adjust whitespace (padding) without altering the CSS box model. This is the rule to use to set text attributes for
your main content.

18
19 Page Builder Magic CSS fundamentals

.page-topper { margin: 0px; }

A utility rule assigned to the first heading to remove all margins. This class can be used on any element for which
you would like to remove margin.

h1, h2, h3, h4 {

margin: 30px 0 0 0;
line-height: normal;
}
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
We first use a multiple CSS rule for heading levels h1-h4, setting margin and line height. Then we add separate
rules for each heading level to set specific font sizes.

.content em {
font-style: normal;
text-transform: uppercase;
font-size: 110%;
}
.content em.big {
font-size: 125%;
}
These are miscellaneous rules of a purely typographic nature. The em tag is short for emphatic and is typically
rendered by browsers as italicized text. This rule capitalizes em text, turns off italics, and makes the text 10%
larger than normal. You can remove these or edit these as you please. The .big class will make em text even larger
if you assign the big class to an em tag.

19
20 Page Builder Magic CSS fundamentals

.sidebar ul, .sidebar ol, .sidebar2 ul, .sidebar2 ol {

margin: 0 0 0 .5em;
padding: 0 0 0 .5em;
line-height: normal;
}
.sidebar li, .sidebar2 li {
margin-bottom: 4px;
}
We reduce normal indentation and remove bullets for ordered and unordered lists in your sidebars. Then we set a
small bottom margin on all sidebar list items.

.footer {
border-top: 1px solid #222;
background-color: #222;
padding: 10px 30px;
font-size: 11px;
color: #FFF;
}
.footer p.copyright {
text-transform: uppercase;
margin: 0px;
}
The footer is assigned a top border, a background-color, padding, font-size, and color. Then we make a special class
called copyright assigned to a paragraph inside the footer.

.content a { color: #0066CC; }

.content a:hover, .content a:focus { color: #C30; }
.footer a { color: #689BF0; }
.footer a:hover, .footer a:focus { color: #FFF; }
These are ordinary Link Styles. We set text link styles for the various content areas of your page. These link styles
are separate from the navigation menu styles.

20
21 Page Builder Magic CSS fundamentals

.menutop-wrapper {
padding: 10px 20px;
background-color: #877876;
border-top: 1px solid #000;
border-bottom: 1px solid #FFF;
-webkit-box-shadow: 0px 0px 30px #999;
box-shadow: 0px 0px 30px #999;
position: relative;
z-index: 999999;
}
The DIV that contains the horizontal menu bar at the top of your page. The white bottom border along with the
gray shadow serve to create a neat bevel effect. Position and z-index should not be edited.

.menutop {
margin: 0;
padding: 0;
font-size: 0px;
text-align: left;
}
The Top Menu Bar ul. Font-Size 0px eliminates horizontal whitespace between menu items. DO NOT EDIT any
property EXCEPT for text-align, which can be changed to center or right to easily re-position the menu horizontally.

.menutop li {
list-style-type: none;
display: inline-block;
margin-right: 6px;
}
The menu list items. DO NOT EDIT the first 2 properties. Margin-right provides some separation between each item
and may be edited.

21
22 Page Builder Magic CSS fundamentals

.menutop a {
display: block;
color: #000000;
text-decoration: none;
padding: 6px 10px;
font-size: 14px;
border: 1px solid #000;
border-radius: 4px;
background-color: #998C8A;
}
The menu links. Display block is required. Padding provides white space within the link box. The first padding value
controls the height of the box. The second value controls width.

.menutop a:hover, .menutop a:focus {

color: #FFF;
border-color: #FFFFFF;
outline: 0;
}
The menu links hover and focus states. The outline value of 0 turns off browser-default focus outlines.

Optional vertical sidebar menu

In the event you want to display a secondary vertical menu bar in one of your sidebars, simply create an unordered
list of links and assign the menuside class to the ul tag, like this:
<ul class="menuside">
<li><a href="page.htm">Menu Item</a></li>
<li><a href="page2.htm">Menu Item 2</a></li>
</ul>

22
23 Page Builder Magic CSS fundamentals

ul.menuside { margin: 0; padding: 0;}

Optional Sidebar Menu ul.

ul.menuside li { list-style-type: none; margin-bottom: 5px; }

The menu list items. Margin-bottom provides some separation between each item and may be edited.

.menuside a {
display: block;
color: #000;
text-decoration: none;
padding: 8px 10px;
font-size: 14px;
border: 1px solid #FFF;
border-radius: 4px;
background-color: #D2D2D2;
-webkit-box-shadow: 0px 0px 15px #DDD;
box-shadow: 0px 0px 15px #DDD;
}
The vertical menu links. Display block is required. Padding provides white space within the link box. The first
padding value controls the height of the box. The second value controls width. A box shadow is set. The menu links
are also assigned a border radius to round their corners and a nice box shadow for effect.

.menuside a:hover, .menuside a:focus {

color: #FFF;
border-color: #222;
background-color: #222;
box-shadow: 5px 5px 30px #999;
outline: 0;
}
The menu links hover and focus states. The box shadow effect changes for this state.

23
24 Page Builder Magic CSS fundamentals

Special styles for mobile devices

The following styles are inside CSS Media Queries and are read only by mobile devices. They are ignored by
conventional desktop or laptop browsers:

For Smartphones

@media only screen and (max-device-width: 480px) {

body {min-width: 0px !important;}
}

For Tablets

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

body {min-width: 0px !important;}
}

Depending on the layout you choose, the above rules might be slightly different. You can
add as many rules as you want inside each of the media queries if you need to customize
your page in any way for mobile devices.

24
25 Support and Contact info

Support and Contact info

PVII quality does not end with your purchase - it continues with the best customer support in the business.

PVII Knowledge Base

The PVII Knowledge Base is an online PVII application allowing you to access dozens of Tech Notes, tips, and
techniques relating to our products, as well as to general web development issues..
Open the Knowledge Base | View the 10 Most Recent Additions

PVII Communities
PVII maintains separate and distinct Web Forum and Newsgroup communities. We do this to ensure you always
have access via your preferred medium and device.

1. The PVII Web Forums

The PVII Web Forum is a modern browser-based community, accessible to both desktop and mobile devices and
requires no additional software or plugins.
Visit The PVII Web Forum community now...

2. PVII Newsgroup forums

The Project VII Newsgroup is available via private and secure NNTP servers. In order to subscribe to a newsgroup
you must have a newsgroup-capable client installed such as:
1. Mozilla Thunderbird
2. Windows Live Mail
3. Windows Mail/Outlook Express
4. Opera Mail
5. Entourage
Server: forums.projectseven.com

Need help setting up a newsgroup?

Setting up a new newsgroup account in Windows Mail (Vista)
Setting up a new newsgroup account in Outlook Express
Setting up a new newsgroup account in Mozilla Thunderbird
Setting up a new newsgroup account in Entourage

25
26 Support and Contact info

If you have another newsgroup-capable program that you are using, please see its documentation to learn how to
add a new newsgroup account.

Note: PVII newsgroups are private and have nothing to do with UseNet feeds that may be provided by your ISP. That is,
you will not find our newsgroups in a list of newsgroups distributed by your internet service provider. You must set up our
news server as a new account.

RSS News Feeds

Keep up with the latest news the minute it's released by subscribing to our RSS news feed. If you are not sure how
to subscribe, please check this page:
PVII RSS Info

Before you Contact us

Before making a support inquiry, please be certain to have read the documentation that came with your product.
Please include your Dreamweaver version, as well as your computer operating system type in all support
correspondence.
E-Mail:
[email protected]
Phones:
330-650-3675
336-374-4611
Phone hours are 9:00am - 5:00pm Eastern Time U.S.

Snail mail
Project Seven Development
339 Cristi Lane
Dobson, NC 27017

26