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

* { margin: 0; padding: 0; }

html {
	background-color: #f7f5f5;
	color: #000;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1em;
}

body { padding: 0 0 40px 0; font-size: 80%; }

#layoutHolder {
	width: 880px;
	margin: 0 auto;
	background-color: #fff;
	color: #666666;
}

#headerHolder {
	width: 100%;
	height: 40px;
	margin: 0 auto 20px auto;
	background-color: #34353a;
	border-bottom:#FF0000 3px solid;
}
#header {
	width: 880px;
	background-color: #333;
	color: #fff;
	text-align:right;
	margin: 0 auto;
	line-height: 40px;
	font-size:120%;
}

#banner {
	height: 330px;
	overflow: hidden;
	border-top: solid 1px #fff;
	margin-bottom: -0.5em;
}

/* --------------------------------------- MENU --------------------------------------- */

#nav {
	border-top: 1px solid #fff;
	height: 80px;
	overflow: hidden;
	background: transparent url(assets/menu.gif) no-repeat left top;
	padding-left: 24px;
	margin-bottom: -0.5em;
}

#nav #menu {
	display: block;
	list-style-type: none;
	float: left;
}

#nav #menu li {
	display: block;
	height: 80px;
	float: left;
}

#nav #menu li a {
	display: block;
	float: left;
	height: 80px;
	text-decoration: none;
	text-indent: -2000px;
	overflow: hidden;
}

/* tab widths */

#nav #menu li.home a				{ width: 68px; }
#nav #menu li.aboutUs a				{ width: 90px; }
#nav #menu li.canopyAccessories a 	{ width: 114px; }
#nav #menu li.customGraphics a		{ width: 88px; }
#nav #menu li.gallery a				{ width: 76px; }
#nav #menu li.instructions a		{ width: 116px; }
#nav #menu li.clients a				{ width: 74px; }
#nav #menu li.rentals a				{ width: 74px; }
#nav #menu li.faq a					{ width: 46px; }
#nav #menu li.contact a				{ width: 86px; }

#nav #menu li a.active,
#nav #menu li a:hover { background: transparent url(assets/menu.gif) no-repeat left top; }

/* tab start points */

#nav #menu li.home a.active,
#nav #menu li.home a:hover					{ background-position: -24px bottom; }
#nav #menu li.aboutUs a.active,
#nav #menu li.aboutUs a:hover				{ background-position: -92px bottom; }
#nav #menu li.canopyAccessories a.active,
#nav #menu li.canopyAccessories a:hover		{ background-position: -182px bottom; }
#nav #menu li.customGraphics a.active,
#nav #menu li.customGraphics a:hover		{ background-position: -296px bottom; }
#nav #menu li.gallery a.active,
#nav #menu li.gallery a:hover				{ background-position: -384px bottom; }
#nav #menu li.instructions a.active,
#nav #menu li.instructions a:hover			{ background-position: -460px bottom; }
#nav #menu li.clients a.active,
#nav #menu li.clients a:hover				{ background-position: -576px bottom; }
#nav #menu li.rentals a.active,
#nav #menu li.rentals a:hover				{ background-position: -650px bottom; }
#nav #menu li.faq a.active,
#nav #menu li.faq a:hover					{ background-position: -724px bottom; }
#nav #menu li.contact a.active,
#nav #menu li.contact a:hover				{ background-position: -770px bottom; }


/* --------------------------------------- CONTENT --------------------------------------- */

#contentHolder { padding: 40px 40px 0 40px}

.columnHolderOne,
.columnHolderTwo,
.columnHolderThree,
.columnHolderFour { width: 800px; margin-bottom: 40px; overflow: hidden; }

/* --------------------------------------- TWO COLUMN --------------------------------------- */

.columnHolderTwo .twoColumn1,
.columnHolderTwo .twoColumn2 { float: left; overflow: hidden; }

.columnHolderTwo .twoColumn1 { width: 520px; margin-right: 40px; }
.columnHolderTwo .twoColumn2 { width: 240px; }

/* --------------------------------------- THREE COLUMN --------------------------------------- */

.columnHolderThree .threeColumn1,
.columnHolderThree .threeColumn2,
.columnHolderThree .threeColumn3 { float: left; overflow: hidden; }

.columnHolderThree .threeColumn1, .threeColumn2 { width: 240px; margin-right: 40px; }
.columnHolderThree .threeColumn3 { width: 240px; }

/* --------------------------------------- FOUR COLUMN --------------------------------------- */

.columnHolderFour .fourColumn1,
.columnHolderFour .fourColumn2,
.columnHolderFour .fourColumn3,
.columnHolderFour .fourColumn4 { float: left; overflow: hidden; }

.columnHolderFour .fourColumn1, .fourColumn2, .fourColumn3 { width: 170px; margin-right: 40px; }
.columnHolderFour .fourColumn4 { width: 170px; }



.listHolder .listItem { margin-bottom: 30px; }

h1 {
	width: 800px;
	height: 40px;
	text-indent: -2000px;
	margin-bottom: 40px;
}

h1.home { background-image: url(assets/pageTitleHome.gif); }
h1.aboutUs { background-image: url(assets/pageTitleAboutUs.gif); }
h1.canopyAccessories { background-image: url(assets/pageTitleCanopyAccessories.gif); }
h1.customGraphics { background-image: url(assets/pageTitleCustomGraphics.gif); }
h1.gallery { background-image: url(assets/pageTitleGallery.gif); }
h1.instructions { background-image: url(assets/pageTitleInstructions.gif); }
h1.clients { background-image: url(assets/pageTitleClients.gif); }
h1.rentals { background-image: url(assets/pageTitleRentals.gif); }
h1.faq { background-image: url(assets/pageTitleFaq.gif); }
h1.contact { background-image: url(assets/pageTitleContactUs.gif); }

h2, p, ul, ol {
	margin-bottom: 0.5em;
	line-height: 140%;
}

h2 {
	color: #CC0000;
	font-size: 150%;
	font-weight: bold;
}

h3, p, ul, ol {
	margin-bottom: 0.2em;
	line-height: 140%;
}

h3 {
	color: #333333;
	font-size: 120%;
	font-weight: bold;
}

hr {
	color: #999;
	background: #888;
	border: 0;
	height: 1px;
	margin: 15px 0;
}

a:link,
a:active,
a:visited	{
	color: #39c;
	text-decoration: none;
}
a:hover		{ text-decoration: underline; }

p.image		{ margin-bottom: 15px; }
p.image img { border: none; }
p strong, strong	{ font-weight: normal; color: #000; }
.tableStrong {
	color: #000000;
}

p em, em 	{ font-style:oblique; }


div.clear 	{ clear: both; }

#footer {
	text-align: center;
	padding: 10px 0 0 0;
	font-size: 90%;
	background-color: #f7f5f5;
	line-height: 30px;
}