/* Table of Contents

	1) - Basic Structural Rules
	2) - Specific Structural Rules
	3) - Common Rules
	4) - Navigation Rules
	5) - Form Rules
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _*/


* {
	margin : 0;
	padding : 0;
	font-style: normal;
}

/* Basic Structural Rules
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _*/

body {
	padding : 10px 0 0 0;
	width : 100%;
	color : #666;
	font-size : 62.5%;
	font-family: Tahoma, Arial, Geneva, Helvetica, sans-serif;
	text-align : center;
	background : url(../images/template/pageBackground.jpg) top center no-repeat #fff;
}

#container {
	width : 100%;
	font-size : 1.1em;
	line-height : 1.1em;
	text-align : center;
	display : block;
}

#content {
	margin : 0 auto 0 auto;
	padding : 0 0 10px 0;
	width : 760px;
	text-align : left;
	display : block;
	position : relative;
}

#printheader { display : none; }

#header {
	margin : 0 auto 0 auto;
	padding : 48px 0 0 0;
	height : 90px;
	width : 760px;
	color : #fc6;
	line-height : 1.4em;
	text-align : right;
	background : url(../images/template/headerBackground.jpg) top center no-repeat;
	display : block;
	clear : both;
}

#footer {
	margin : 0 auto 0 auto;
	width : 760px;
	color : #663;
	text-align : left;
	border-top : 2px #066 solid;
	background : url(../images/template/footerBackground.jpg) bottom center no-repeat;
	display : block;
	clear : both;
}

/* Specific Structural Rules
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _*/

#footer ul { padding : 7px 0 0 0; width : 760px; }
#footer li { padding : 0 10px 0 10px; border-right : 1px #663 solid; display : inline; }
#footer li.last { border : none; }
#footer p {
	padding : 10px 10px 14px 10px;
	width : 740px;
	color: #663;
	font-size: 10px;
}
#footer a { color: #663; }
#footer a:hover { color: #930; }

/* These rules create the html structure for the image gallery */

#imageGallery {
	padding : 0 20px 0 20px;
	height : 515px;
	width : 720px;
	background : url(../images/template/galleryBack.jpg) top left no-repeat;
	display : block;
	clear : both;
}

#imageGallery.home { background : url(../images/template/galleryBackHome.jpg) top left no-repeat; }

/* Rules for creating text "Call Out" sections */

.callout {
	margin : 5px 10px 5px 10px;
	padding : 5px;
	width : 210px;
	border-top : 3px #930 solid;
	border-bottom : 3px #930 solid;
	background : url(../images/template/calloutBackground.gif) top center repeat #bababa;
	display : block;
}

.callout img {
	margin : 0 auto 0 auto;
	padding : 5px;
	height : auto;
	width : 200px;
	display : block;
}

.callout p { padding : 5px; }

.callout strong { padding : 0 0 2px 0; display : block; }

/* Rules for creating portfolio index buckets */

.portfolioBucket { margin : 0; width : 234px; float : left; }
.interior { padding : 15px 15px 15px 14px; }
.renderings { padding : 15px 0px 15px 0px; }
.exterior { padding : 15px 14px 15px 15px; }

.portfolioBucket h1 { padding : 0; height : 52px; width : 234px; line-height : 200px; overflow : hidden; clear : both; }
.interior h1 { background : url(../images/template/portfolioHeaderInterior.jpg) top left no-repeat; }
.exterior h1 { background : url(../images/template/portfolioHeaderExterior.jpg) top left no-repeat; }
.renderings h1 { background : url(../images/template/portfolioHeaderRenderings.jpg) top left no-repeat; }

.portfolioBucket p { padding : 0; width : 234px; }
.interior p { background : url(../images/template/portfolioBackgroundInterior.jpg) top left no-repeat; }
.exterior p { background : url(../images/template/portfolioBackgroundExterior.jpg) top left no-repeat; }
.renderings p { background : url(../images/template/portfolioBackgroundRenderings.jpg) top left no-repeat; }

.portfolioBucket a {
	margin : 0 0 10px 0;
	padding : 5px 0 10px 0;
	width : 234px;
	text-align : center;
	background : url(../images/template/portfolioFooterBackground.gif) bottom left no-repeat;
	display : block;
}

.portfolioBucket img { margin : 0 auto 0 auto; padding : 1px 0 1px 0; }

.portfolioBucket a { color: #663; }
.portfolioBucket a:hover { color: #930; }

/* Common Rules
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _*/

a { color : #930; text-decoration : none; }
a:hover { color : #663; }

#content div { display : block; }

/* COLUMNS
	You can use this class to make a div into a column
	The width here defaults to 50% but can be controlled through the class name in the html which is applied by the autowidth.js file
*/

.column { margin : 0; padding : 0 0 15px 0; width : 50%; float : left; }

h1 {
	padding : 5px 10px 5px 10px;
	width : auto;
	color : #930;
	font-size : 2em;
	line-height : 100%;
	letter-spacing : 1px;
	display : block;
}

h1.graphic { padding : 0 0 5px 0; height : 48px; width : 760px; text-indent : -5000px; overflow : hidden; clear : both; }

h1.home { padding : 0; height : 15px; background : url(../images/template/headerHomepage.jpg) top left no-repeat; }
h1.services { background : url(../images/template/headerServices.jpg) top left no-repeat; }
h1.portfolio { background : url(../images/template/headerPortfolio.jpg) top left no-repeat; }
h1.portfolioGallery { padding : 0; height : 15px; background : url(../images/template/headerPortfolioGallery.jpg) top left no-repeat; }
h1.testimonials { background : url(../images/template/headerTestimonials.jpg) top left no-repeat; }
h1.aboutUs { background : url(../images/template/headerAboutUs.jpg) top left no-repeat; }
h1.contactUs { background : url(../images/template/headerContactUs.jpg) top left no-repeat; }
h1.directions { background : url(../images/template/headerDirections.jpg) top left no-repeat; }

h2 {
	padding : 5px 10px 0 10px;
	width : auto;
	color : #663;
	font-size : 1.4em;
	font-family : "Copperplate Gothic Bold", Tahoma, Arial, Geneva, Helvetica, sans-serif;
	line-height : inherit;
	letter-spacing : 1px;
	display : block;
}

h3 {
	padding : 5px 10px 0 10px;
	width : auto;
	color : #333;
	font-size : .9em;
	line-height : 1.2em;
	font-weight : normal;
	display : block;
}

h3 strong { padding : 0 5px 0 0; color : #930; }

h4 {
	padding : 5px 10px 0 10px;
	width : auto;
	font-size : inherit;
	line-height : inherit;
	font-weight : bold;
	display : block;
}

p {
	padding : 5px 10px 5px 10px;
	width : auto;
	font-size : inherit;
	line-height : 1.4em;
	display : block;
}

ul {
	padding : 5px 10px 0 25px;
	width : auto;
	font-size : inherit;
	line-height : inherit;
	display : block;
}

ol {
	padding : 5px 10px 0 35px;
	width : auto;
	font-size : inherit;
	line-height : inherit;
	display : block;
}

ul li, ol li {
	padding : 0 0 5px 0;
	width : inherit;
}

table {
	width : auto;
	font-size : inherit;
	line-height : inherit;
	display : block;
}

tr.titles td { padding : 10px; font-weight : bold; color : #fff; background : #333; }
tr.info td { padding : 10px; color : #fff; background : #222; }
td { padding : 10px; color : #fff; }

hr {
	margin : 5px 10px 5px 10px;
	display : block;
}

object, embed, img { display : block; }

sup { font-size : 55%; }

/* apply this class to ad a divider between content sections */

.divider { border-bottom : 2px #cc9 solid; }
.divider strong {
	padding : .5em 0 0 0;
	color : #666;
	font-size : 0.9em;
	display : block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: 500;
}

/* apply this class to properly format images within content */

.photo {
	margin : 5px 10px 5px 10px;
	display : block;
}

/* Apply these classes to float stuff left or right */

.left { float : left; }

.right { float : right; }

/* These classes can be used to easily apply a color to text or a background color style to any element */

.red { color : Red; }
.whiteBack { background : White; }

/* Navigation Rules
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _*/

#navigationTop {
	margin : 0 auto 0 auto;
	padding : 0;
	width : 760px;
	list-style : none;
	display : block;
	clear : both;
}

#navigationTop li {
	margin : 0;
	padding : 0;
	width : auto;
	background : none;
	display : block;
	float : left;
	position : relative;
}

#navigationTop a {
	margin : 0;
	padding : 0;
	display : block;
	clear : both;
}

.graphicLink { height : 33px; text-indent  : -5000px; overflow : hidden; }
.link1 { width : 86px; background : url(../images/template/navigationLinks.gif) 0px 0px no-repeat; }
.link2 { width : 119px; background : url(../images/template/navigationLinks.gif) -86px 0px no-repeat; }
.link3 { width : 133px; background : url(../images/template/navigationLinks.gif) -205px 0px no-repeat; }
.link4 { width : 157px; background : url(../images/template/navigationLinks.gif) -338px 0px no-repeat; }
.link5 { width : 124px; background : url(../images/template/navigationLinks.gif) -495px 0px no-repeat; }
.link6 { width : 141px; background : url(../images/template/navigationLinks.gif) -619px 0px no-repeat; }

.link1:hover { background : url(../images/template/navigationLinks.gif) 0px -33px no-repeat; }
.link2:hover { background : url(../images/template/navigationLinks.gif) -86px -33px no-repeat; }
.link3:hover { background : url(../images/template/navigationLinks.gif) -205px -33px no-repeat; }
.link4:hover { background : url(../images/template/navigationLinks.gif) -338px -33px no-repeat; }
.link5:hover { background : url(../images/template/navigationLinks.gif) -495px -33px no-repeat; }
.link6:hover { background : url(../images/template/navigationLinks.gif) -619px -33px no-repeat; }

li ul.subNav {
	margin : 0;
	padding : 0;
	width : 160px;
	font-size : 1em;
	border-bottom : 2px #930 solid;
	background : #fff;
	display : none;
	position: absolute;
	top: 33px;
	left: 0;
	z-index : 5;
}

li li ul.subSubNav {
	margin : 0;
	padding : 0;
	width : 160px;
	font-size : 1em;
	border-bottom : 2px #c30 solid;
	background : #fff;
	display : none;
	position: absolute;
	top: 0;
	left: 160px;
	z-index : 5;
}

#navigationTop li li, #navigationTop li li li {
	margin : 0;
	padding : 5px 10px 5px 10px;
	width : 140px;
	border-bottom : 1px #663 solid;
	background : url(../images/template/calloutBackground.gif) top right repeat-y;
	display : block;
}

#navigationTop li li a, #navigationTop li li li a { width : 144px; color : #663; background : url(../images/template/nav_bottom_sub.gif) bottom right no-repeat; }
#navigationTop li li a:hover, #navigationTop li li li a:hover { color : #930; background : url(../images/template/nav_back_special.gif) left repeat; }

li:hover ul, li.over ul, li li:hover ul, li li.over ul { display : block; }

/* Side Navigation Rules */

.sideNavigation {
	margin : 0;
	padding : 30px 0 0 0;
	display : block;
}

.sideNavigation li {
	margin : 0;
	padding : 0 0 0 89px;
	height : 50px;
	width : 230px;
	display : block;
	position : relative;
	z-index : 1;
}

.sideNavigation a {
	margin : 0;
	padding : 0;
	display : block;
	clear : both;
}

.sideNavigation a.graphicLink {
	padding : 0;
	height : 50px;
	width : 141px;
	text-indent : -5000px;
	overflow : hidden;
}

.sideNavigation a.contactUs { background : url(../images/template/sideNavigationLinks.gif) 0px 0px no-repeat; }
.sideNavigation a.directions { background : url(../images/template/sideNavigationLinks.gif) 0px -50px no-repeat; }
.sideNavigation a.contactUs:hover { background : url(../images/template/sideNavigationLinks.gif) -141px 0px no-repeat; }
.sideNavigation a.directions:hover { background : url(../images/template/sideNavigationLinks.gif) -141px -50px no-repeat; }

/* Form Rules
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _*/

.form { margin : 5px 0 10px 0; padding : 5px 0 10px 0; }

fieldset {
	margin : 0;
	padding : 5px 10px 5px 10px;
	font-size : inherit;
	line-height : inherit;
	border : none;
	display : block;
}

label {
	margin : 0;
	padding : 0 5% 3px 0;
	text-align : left;
	display : block;
	float : left;
}

label.small { width : 30%; }
label.medium { width : 60%; }
label.large { width : 95%; }
label.half { width : 45%; }

input {
	margin : 3px 0 0 0;
	padding : 1px 0 0 0;
	height : 1.4em;
	width : 100%;
	border : 1px #333 solid;
	display : block;
}

textarea {
	margin : 3px 0 0 0;
	padding : 1px 0 0 0;
	height : 6em;
	width : 100%;
	border : 1px #333 solid;
	display : block;
}

input.checkbox {
	margin : 3px 5px 0 0;
	padding : 0;
	width : auto;
	height : 1.4em;
	border : none;
	display : block;
	float : left;
}

select {
	margin : 3px 0 0 0;
	padding : 0;
	width : 100%;
	border : 1px #333 solid;
	display : block;
}

label.small select { width : 100%; }
label.medium select { width : 100%; }
label.large select { width : 100%; }
label.half select { width : 100%; }

option {
	margin : 0;
	padding : 0;
	height : 1.3em;
	display : block;
}

input.button {
	margin : 0;
	padding : .2em 1.4em .3em 1.4em;
	height : auto;
	width : auto;
	border : 1px #333 solid;
	background : url(../images/template/footerBackground.jpg) top left no-repeat;
	display : block;
}
.iframe_map {
	border: medium ridge #006666;
	background-position: center center;
	vertical-align: middle;
	height: 320px;
	width: 700px;
}