@charset "utf-8";
/* CSS Document */

/* The default modifier sets the browser defaults for margins and padding to 0. */
/* Start default modifier */
* {
	margin: 0px;
	padding: 0px;
}
/* End default modifier */

/* The body attributes set up some of the default settings for the webpage. */
/* Start body */
body {
	background: #f5f5f5 url(../images/bg.png) top left repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #656565;
	text-align: center;
}
/* End body */

/* The wrapper is the large container holding the webpage together. */
/* Start wrapper (id) */
#wrapper {
	width: 1000px;
	margin: 0px auto;
	text-align: left;
}
/* End wrapper */

/* The header has the banner graphic as well as contains the class that the contact information is inside of. */
/* Start header (id) */
#header {
	width: 960px;
	height: 70px;
	background: url(../images/header-bg11.png) bottom left repeat-x;
	padding: 20px 20px;
	text-align: right;
	margin: 0px auto;
}

#header p {
	padding: 2px 6px;
}

#header a {
	text-decoration: underline;
}
/* End header */

/* Start headerContact (class) */
.headerContact {
	width: 210px;
	margin: 15px 17px 0px 0px;
	padding: 8px 6px;
	float: right;
	text-align: left;
}
/* End headerContact */

.priceText {
	font-size: 18px;
	font-weight: bold;
}

/* The nav div contains all of the navigation and the background images for the navigation. */
/* Start nav (id) */
#nav {
	width: 1000px;
	height: 27px;
	padding: 6px;
	background: url(../images/nav-bg3.png) top left no-repeat;
}

#nav ul {
	list-style-type: none;
	float: left;
	padding: 7px 0px 0px 20px;
}

#nav ul li {
	list-style-type: none;
	float: left;
	padding: 1px 6px;
}

.navSearch {
	float: right;
	padding: 0px 12px 0px 0px;
}
/* End nav */

/* The content div contains all of the main content found on the pages. */
/* Start content (id) */
#content {
	width: 958px;
	margin: 0px auto;
	border-left: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
	background: #f3f1f1 url(../images/shadow.png) top left repeat-x;
}

#content p {
	padding: 6px;
}

/* The contentLeft div contains all of the left content on each of the pages. */
/* Start contentLeft (id) */
#contentLeft {
	width: 662px;
	float: left;
	padding: 6px;
	background: #fafafa url(../images/shadow.png) top left repeat-x;
	border-right: 1px solid #d9d9d9;
}

#contentLeft a {
	text-decoration: underline;
}
/* End contentLeft */

/* The contentRight div contains all of the right content on each of the pages. */
/* Start contentRight (id) */
#contentRight {
	width: 283px;
	float: left;
}

#contentRight ul {
	list-style-type: none;
}

#contentRight li {
	list-style-type: none;
	margin: 0px 0px 6px 0px;
}

.contentRightListPadding {
	padding: 6px 0px 0px 6px;
}
/* End contentRight */
/* End content */

/* Start portfolioTabs (class) */
.portfolioTabs {
	height: 200px;
	overflow: auto;
	padding: 12px 0px 6px 0px;
	background: #e8e8e8 url(../images/shadow.png) top left repeat-x;
	border-bottom: 1px solid #d9d9d9;
	border-top: 1px solid #d9d9d9;
}
/* End portfolioTabs */

/* Start indexTabs (class) */
.indexTabs {
	width: 265px;
	padding: 12px 0px 6px 0px;
	background: #e8e8e8 url(../images/shadow.png) top left repeat-x;
	border-bottom: 1px solid #d9d9d9;
	border-top: 1px solid #d9d9d9;
	border-right: 1px solid #d9d9d9;
}
/* End indexTabs */

/* Start contentRightHeader (class) */
.contentRightHeader {
	padding: 6px 9px;
}

.contentRightHeader a {
	text-decoration: underline;
}
/* End contentRightHeader */

/* Start promoContainer (class) */
.promoContainer {
	width: 220px;
	float: left;
}
/* End promoContainer */

/* Start promoContent (class) */
.promoContent {
	width: 198px;
	margin: 9px auto;
	border: 1px solid #d9d9d9;
	font-size: 11px;
}
/* End promoContent */

/* Start promoShadow (class) */
.promoShadow {
	width: 192px;
	padding: 3px;
	margin: 0 auto;
	background: #f8f7f7 url(../images/profile-bg.png) top left repeat-x;
}
/* End promoShadow */

/* The bottomBg div has the graphics go across the whole browser at the bottom. */
/* Start bottomBg (id) */
#bottomBg {
	width: 100%;
	background: #dfdfdf url(../images/bottom-bg3.png) top left repeat-x;
	height: 150px;
	text-align: left;
}
/* End bottomBg */

/* Start featuredProjects (id) */
#featuredProjects {
	width: 946px;
	margin: 0px auto;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #e8e8e8;
	border-bottom: 1px solid #f8f8f8;
	background: #eeeeee url(../images/featured-bg.png) top left repeat-x;
	padding: 6px;
}

#featuredProjects p {
	padding: 6px;
}

.iconPadding {
	padding: 6px;
	float: left;
	border: none;
}
/* End featuredProjects */

/* Start footer (id) */
#footer {
	width: 958px;
	height: 26px;
	margin: 0px auto;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	background: url(../images/footer-bg.png) top left repeat-x;
}
/* End footer */

/* The footerLeft div holds the copyright information found in the bottom left of the webpage. */
/* Start footerLeft (id) */
#footerLeft {
	width: 388px;
	height: 20px;
	float: left;
	padding: 1px 6px;
}

#footerLeft p {
	padding: 3px 6px;
	font-size: 10px;
}
/* End footerLeft */

/* The footerRight contains all of the extra navigation found in the bottom right of the webpages. */
/* Start footerRight */
#footerRight {
	width: 548px;
	height: 20px;
	float: right;
}

#footerRight a {
	font-size: 10px;
}

#footerRight a:link {
	color: #666666;
}

#footerRight a:visited {
	color: #666666;
}

#footerRight a:hover {
	color: #9DCE5C;
}

#footerRight a:active {
	color: #666666;
}

#footerRight ul {
	float: right;
	padding: 3px 8px 0px 0px;
	list-style-type: none;
}

#footerRight li {
	float: left;
	list-style-type: none;
	padding: 0px 3px;
}

.spacerColor {
	color: #bcbcbc;
}
/* End footerRight */

/* The contact id is for the form on the contact page. It controls all of the attributes attached to the form. */
/* Start contact (id) */
#contact {
	width: 450px;
	margin: 6px;
}

#name {
	margin: 0px 0px 3px 24px;
	width: 200px;
}

#email {
	margin: 0px 0px 3px 26px;
	width: 200px;
}

#phone {
	margin: 0px 0px 3px 21px;
	width: 200px;
}

#inquiry {
	margin: 0px 0px 3px 19px;
	width: 350px;
	min-height: 100px;
}

label {
	float: left;
}

#submit {
	margin: 0px 0px 3px 59px;
}	
/* End contact */

/* These are all of the header tags. Each one has specific attributes attached to it so it fits in with the color scheme. */
/* Start h tags */
h1 {
	color: #CCCC00;
	padding: 6px;
	font-size: 22px;
	font-family: Georgia, "Times New Roman", Times, serif;
}

h2 {
	color: #CCCC00;
	padding: 6px;
	font-size: 18px;
	font-family: Georgia, "Times New Roman", Times, serif;
}


h3 {
	color: #CCCC00;
	padding: 6px;
	font-size: 16px;
	font-family: Georgia, "Times New Roman", Times, serif;
}

h4 {
	color: #91b72d;
	padding: 6px;
	font-size: 14px;
}
/* End h tags */

/* The packageFont class is designed to highlight the titles of the web design packages on the index page. */
/* Start packageFont (class) */
.packageFont {
	color: #9DCE5C;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
}
/* End packageFont */

/* The clear class is used to clear any latent floats. */
/* Start clear (class) */
.clear {
	clear: both;
}
/* End clear */

/* The spacerPadding class was a special class created to line up the lined spacers between the navigation. They were falling below the navigation. */
/* Start spacerPadding (class) */
.spacerPadding {
	margin: -5px 0px 0px 0px;
}
/* End spacerPadding */

/* The contactInfo class is used to change the color and boldness of certain contact information titles. */
/* Start contactInfo */
.contactInfo {
	color: #CCCC00;
	font-weight: bold;
}
/* End contactInfo */

/* Start imgFltRight (class) */
.imgFltRight {
	float: right;
	margin: 6px;
}
/* End imgFltRight */

/* Start imgFltLeft (class) */
.imgFltLeft {
	float: left;
	margin: 6px;
}
/* End imgFltLeft */

/* Start imgFltRightNoBorder (class) */
.imgFltRightNoBorder {
	float: right;
	margin: 6px;
	border: none;
}
/* End imgFltRightNoBorder */

/* Start imgFltLeft (class) */
.imgFltLeftNoBorder {
	float: left;
	margin: 6px;
	border: none;
}
/* End imgFltLeft */

/* Start imgFltLeft (class) */
.imgFltLeftHeader {
	float: left;
	margin: 6px 12px 6px 6px;
}
/* End imgFltLeft */

/* Start imgPortfolio (class) */
.imgPortfolio {
	border: none;
	float: left;
	padding: 3px 15px 12px 16px;
}
/* End imgPortfolio */

.imgPortfolioLarge {
	border: 1px solid #d9d9d9;
	margin: 6px;
}

.portfolioListItem {
	padding: 6px 0px 6px 17px;
	font-weight: bold;
}

.portfolioSpacerPadding {
	padding: 6px 0px;
}

.profile {
	width: 636px;
	padding: 6px;
	margin: 6px;
	background: #f8f7f7 url(../images/profile-bg.png) top left repeat-x;
	border: 1px solid #d9d9d9;
}

/* Start bold (class) */
.bold {
	font-weight: bold;
}
/* End bold */

/* Start italic (class) */
.italic {
	font-style: italic;
}
/* End italic */

.smallText {
	font-size: 10px;
}

.noBorderPadding {
	border: none;
	padding: 6px;
}	

/* The a tags modify how the hyperlinks look on the webpage. */
/* Start a tags */
a {
	text-decoration: none;
	font-weight: bold;
	outline: none;
}

a:link {
	color: #999999;
}

a:visited {
	color: #999999;
}

a:hover {
	color: #9DCE5C;
}

a:active {
	color: #999999;
}
/* End a tags */