
/*MAIN FRAME*/


		#siteTitleCanopies{
			background: url(../images/twinfix-logo-canopies.gif) 0px 50px no-repeat;
			width: 352px;
			height: 147px;	
			display: block;
			text-indent: -5000px;
		}



		#sub-menu-bar{background: #fff url(../images/bg-main-menu.jpg) center -43px repeat-x;height: 34px;}



/*SUB MENU*/

		.sub-menu {background: transparent; height: 34px;padding: 0px; list-style:none;}
		.sub-menu li{display: inline;}

		.sub-menu li a{
			display: inline;
			display: block;
			float: left;
			padding-left: 10px;
			padding-right: 10px;
			margin-right: -2px;
			padding-top: 8px;
			background: transparent url(../images/bg-submenu-div.gif) right center no-repeat;
			height: 26px;
			text-transform: uppercase;
			text-decoration: none;
			color: #444;
			font-size: 12px;
		}

		.sub-menu li a:hover{color:#007FF6;}

		.sub-menu li a.subTitle{background:#007FF6; color:#fff;}

		.sub-menu li a.current{background:#007FF6; color:#fff;}
		
		.sub-menu li a.mainsite{background:#999; color:#fff; float: right}
		.sub-menu li a.mainsite:hover{background:#666;}
		

/*MAIN FRAME*/

		.main-page{
			margin-top: 30px;
			margin-bottom: 20px;
		}

		.secondary-column{
			width: 250px;
			display: inline;
			float: left;
			clear: left;
		}

		.primary-column{
			width: 680px;
			display: inline;
			float: right;
		}

		
		.content{
			width: 640px;
			margin-left: 15px;
		}

/*OTHER BITS*/

		.cta-questions{
			background: transparent url(../images/cta-question.jpg) no-repeat;
			width: 231px;
			height: 146px;
			text-indent: -5000px;
			overflow: hidden;
			margin-top: 30px;
		}

		a.cta-email{
			background: transparent url(../images/cta-email.jpg) 4px top no-repeat;
			display: block;
			width: 231px;
			height: 49px;
			text-indent: -5000px;
			overflow: hidden;
			margin-top: 30px;
		}

		a.cta-email:hover{background-position: 4px -52px;}

/*TITLE REPLACEMENT*/

		.h1-title, .h3-title {
			overflow: hidden;
			text-indent: -5000px;
			margin-bottom: 5px;
			height: 25px;
		}

		.h1-twinfix-canopies{background: url(../images/text-replacement/h1-twinfix-canopies.gif) -3px 0 no-repeat;}
		.h1-architects{background: url(../images/text-replacement/h1-architects.gif) -3px 0 no-repeat;}
		.h1-page-not-found{background: url(../images/text-replacement/h1-page-not-found.gif) -3px 0 no-repeat;}
		

		.h3-canopies-for{background: url(../images/text-replacement/h3-canopies-for.gif) -3px 0 no-repeat;}
		.h3-why-twinfix{background: url(../images/text-replacement/h3-why-twinfix.gif) -3px 0 no-repeat;}
		.h3-photo-gallery{background: url(../images/text-replacement/h3-photo-gallery.gif) -3px 0 no-repeat; margin-top: 40px;}
		.h3-applications{background: url(../images/text-replacement/h3-applications.gif) -3px 0 no-repeat;}
		.h3-ordering{background: url(../images/text-replacement/h3-ordering.gif) -3px 0 no-repeat;}
		.h3-faqs{background: url(../images/text-replacement/h3-faqs.gif) -3px 0 no-repeat;}
		.h3-contact-us{background: url(../images/text-replacement/h3-contact-us.gif) -3px 0 no-repeat;}
		.h3-links{background: url(../images/text-replacement/h3-links.gif) -3px 0 no-repeat;}
		.h3-case-studies{background: url(../images/text-replacement/h3-case-studies.gif) -3px 0 no-repeat;}
		.h3-downloads{background: url(../images/text-replacement/h3-downloads.gif) -3px 0 no-repeat;}
		.h3-product-outline{background: url(../images/text-replacement/h3-product-outline.gif) -3px 0 no-repeat;}
		.h3-design-options{background: url(../images/text-replacement/h3-design-options.gif) -3px 0 no-repeat;}
		.h3-overview{background: url(../images/text-replacement/h3-overview.gif) -3px 0 no-repeat;}
		.h3-products{background: url(../images/text-replacement/h3-products.gif) -3px 0 no-repeat;}
		

/*HEADER PULL OUT*/

	.header-pullout{
		text-indent: -5000px;
		width: 400px;
		height: 120px;
		display: block;
		margin-top: -140px;
		margin-left: 560px;
		position: absolute;
	}


/*TYPOGRAPHY*/

		h1,h2,h3{
			color: #007ff6;
			font-size: 18px;
			padding-top: 2px;
		}



		p.intro,
		.intro-block p{
			margin-bottom: 10px;
			font-size: 14px;
		}
			
		.intro-block{
			border-bottom: 1px solid #ccc;
			padding-bottom: 10px;
			margin-bottom: 20px;
			}	
		
		.primary-column > p{width: 500px;}
		

				
		
		

/*SECTOR MENU*/

		ul#sector-list{list-style: none; padding: 0px; margin: 0px;}
		
		ul#sector-list li a{
			background: url(../images/bg-sector-menu.jpg) no-repeat;
			height: 34px;
			width: 220px;
			display: block;
			color: #fff;
			font-size: 14px;
			text-decoration: none;
			padding-top:6px;
			padding-left:30px;
		}

		ul#sector-list li a:hover{background-position: left bottom;}


/*SERVICES LIST*/


		.services-list-item{
			width: 210px;
			float: left;
			margin-right: 40px;
			margin-bottom: 30px;
			padding-left: 90px;
			clear: left;
		}

		.last{
			margin-right: 0;
			clear: none;			
		}


		.services-list dt,
		.homepage-list h3{
			text-transform: uppercase;
			font-weight: bolder;
			color: #444;
			font-size: 12px;
		}

		.services-list dd{
			line-height: 18px;
		}


		.services-quality{background: url(../../../images/uploads/services/light-bulb.jpg) 0px top no-repeat;}
		.services-experience{background: url(../../../images/uploads/services/rosette.jpg) 0 top no-repeat;}
		.services-healthsafety{background: url(../../../images/uploads/services/hard-hat.jpg) 0px top no-repeat;}
		.services-planning{background: url(../../../images/uploads/services/planning.jpg) 0px top no-repeat;}


		.services-list-item ul{
			margin: 0px;
			margin-left: -20px;
			padding: 0px;
			list-style: none;
			
		}

		.services-list-item ul li{
			padding-left: 30px;
			margin-top: 10px;
			padding-bottom: 5px;
			line-height: 15px;
			background: url(../images/green-tick.jpg) left 0px no-repeat;
		}
		
		.homepage-list h3{
			margin-top: 30px;

		}



/*PHOTO GALLERY*/

		.outer-photo-gallery{
			background: url(../images/bg-photo-gallery.jpg) 0px top no-repeat;
			width: 680px;
			height: 115px;
			float: left;
		}

		.inner-photo-gallery{
			width: 630px;
			height: 98px;
			overflow: scroll;
			position: relative; /*leave this value alone*/
			margin-top: 3px;
			float: left;
		}

		.panel{
			width: 80px;
			height: 80px;
			border: 2px solid #fff;
		}

			.panel:hover{
				border: 2px solid #007FF6;
			}


		.panel img{
			height: 90px;
			margin: 0 0	;
			}
				

		.stepcarousel .belt{
			position: absolute; /*leave this value alone*/
			left: 0;
			top: 0;
		}

		.stepcarousel .panel{
			float: left; /*leave this value alone*/
			overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
			margin: 10px; /*margin around each panel*/
			width: 90px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
		}


		.photo-gallery-back{
			width: 20px;
			height: 92px;
			margin-top: 5px;
			background: red;
			float: left;
			margin-left: 5px;
			text-indent: -5000px;
			background: url(../images/photo-gallery-btn.jpg) 6px 43px no-repeat;
		}

		.photo-gallery-back:hover{background-position: -25px 43px;}

		.photo-gallery-forward{
			width: 15px;
			height: 92px;
			margin-top: 5px;
			background: red;
			float: left;
			text-indent: -5000px;
			background: url(../images/photo-gallery-btn.jpg) -86px 43px no-repeat;
		}

		.photo-gallery-forward:hover{background-position: -55px 43px;}


/*MAIN SLIDESHOW*/

		.mainpanel img{height: 225px;}

		.mainpanel{
			float: left; /*leave this value alone*/
			overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
			width: 330px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
		}

		.mainbelt{
			position: absolute; /*leave this value alone*/
			float: left;
			left: 0;
			top: 0;
		}

		.inner-main-image{
			width: 660px;
			height: 215px;
			overflow: hidden;
			position: relative; /*leave this value alone*/
			margin-top: 0px;
			float: left;
			margin-top: 10px;
			margin-left: 7px;
			display: inline;

		}
		
		.outer-main-image{
			background: url(../images/bg-shadow-main-image.jpg) 0px top no-repeat;
			width: 680px;
			height: 250px;

		}
		

/*CONTACT BOX*/

			.contact-box-top{
				width: 100%;
				margin-top: 20px;
				height: 19px;
				float: left;
				background: url(../images/contact-box-top.jpg) no-repeat;	
			}

			.contact-box-mid{
								float: left;
				width: 100%;
				background: url(../images/contact-box-mid.jpg) repeat-y;	
			}

			.contact-box-bottom{
				width: 100%;
				float: left;
				height: 31px;
				background: url(../images/contact-box-bottom.jpg) no-repeat;	
			}

			.contact-box-left-col{
				width: 250px;
				float: left;
				display: inline;
				margin: 5px 0 0px 25px;
			}

			.contact-box-left-col p{
				color: #fff;
				margin-bottom: 0px;
				margin-top: 10px;
				line-height: 18px;
			}

			.contact-box-left-col a.ordering-btn{
				display: block;
				width: 127px;
				height: 43px;
				background: url(../images/btn-blue-ordering.jpg) no-repeat;	
				text-indent: -5000px;
				margin-top: 15px;
			}

			.contact-box-left-col a.ordering-btn:hover{background-position: left bottom;}		


			.contact-box-left-col ul{list-style: none;padding:0px;margin: 0px;}

			.contact-box-right-col{
				width: 350px;
				float: left;
				display: inline;
				margin: 5px 0 0px 40px;
			}

			.cta-contact-box{
				background: url(../images/cta-contact-box.gif) no-repeat;		
				overflow: hidden;
				width: 249px;
				height: 126px;
				display: block;
				text-indent: -5000px;
			}

			h2.find-out-more{
				background: url(../images/contact-box-title.gif) no-repeat;		
				width: 100%;
				height: 15px;
				text-indent: -5000px;
			}

			.contact-box-right-col form{margin-top: 20px;}

			.contact-box-right-col label{
				clear: left;
				float: left;
				width: 80px;
				text-indent: -5000px;
				margin-top: 5px;
				margin-bottom: 15px;
			}

			.contact-box-right-col label.contact-box-name{background: url(../images/contact-box-name.gif) 0 5px no-repeat;}
			.contact-box-right-col label.contact-box-email{background: url(../images/contact-box-email.gif) 0  5px no-repeat;}
			.contact-box-right-col label.contact-box-message{background: url(../images/contact-box-message.gif) 0 5px no-repeat;}



			.contact-box-right-col div.input-surround{
				display: block;
				width: 258px;
				height: 27px;
				float: left;
				margin-bottom: 20px;
				background: url(../images/contact-box-input.jpg) 0 -43px no-repeat;
		}



			.input-surround input,
			.contact-box-right-col textarea{
				float: left;
				width: 245px;
				font-family: arial, sans-serif;
				text-align: left;
				font-size: 12px;
				line-height: 15px;
				color: #555;
				overflow: scroll;
				border: 0;
				border-collapse: collapse;
				border-spacing: 0;
				margin: 5px 0 0 6px;
			}


			.input-surround input{ overflow: hidden;}


			.contact-box-right-col div.textarea-surround{
				display: block;
				width: 258px;
				height: 178px;
				float: left;
				background: url(../images/contact-box-textarea.jpg) 0 -178px no-repeat;
			}


			.contact-box-right-col div.textarea-surround textarea{
				height: 155px;
				overflow: scroll;
				border: 0;
			}


			.contact-box-right-col .btn-submit{
				background: url(../images/btn-blue-regular.jpg) 0 0 no-repeat;
				width: 77px;
				height: 25px;
				text-align: center;
				padding: 0px;
				float: right;
				margin-right: 10px;
				border-collapse: collapse;
				border: 0px;
			}

				.contact-box-right-col .btn-submit:hover{background-position: 0 -24px;}


/*SECTOR MAIN MENU*/

		ul#sector-main-list{
			background: url(../images/common-bg.jpg) -1px top repeat-y;
			margin: 0px;
			margin-top: 10px;
			padding: 0px;
			list-style: none;
			
		}

		ul#sector-main-list li a{
			height: 34px;
			display: block;
			width: 190px;
			text-indent: -5000px;
			background-position: -505px -1px;
		}

		.sector-overview{background: url(../images/text-replacement/sector-overview.jpg) no-repeat;}		
		.sector-downloads{background: url(../images/text-replacement/sector-downloads.jpg) no-repeat;}
		.sector-faqs{background: url(../images/text-replacement/sector-faqs.jpg) no-repeat;}
		.sector-links{background: url(../images/text-replacement/sector-links.jpg) no-repeat;}
		.sector-ordering{background: url(../images/text-replacement/sector-ordering.jpg) no-repeat;}
		.sector-case-studies{background: url(../images/text-replacement/sector-case-studies.jpg) no-repeat;}
		.sector-products{background: url(../images/text-replacement/sector-design-options.jpg) no-repeat;}
		.sector-contact{background: url(../images/text-replacement/sector-contact.jpg) no-repeat;}		

		.secondary-column ul#sector-main-list li a.current{
			background-position: -2px -1px;
			width: 100%;
		}

		ul#sector-main-list li a:hover{
			width: 190px;
			background-position: -256px -1px;
		}

/*COMMON USE MENU*/
		
		ul#common-use-list{
			padding: 0px;
			margin: 0px;
			list-style: none;
			background: url(../images/common-bg.jpg) -2px top repeat-y;
			padding-bottom: 10px;
		}
		
		ul#common-use-list li a{
			height: 38px;
			display: block;
			color: #777;
			font-size: 15px;
			line-height: 15px;
			text-decoration: none;
			padding: 12px 10px 0 10px;
			border-bottom: 1px solid #ccc;
			width: 180px;
		}
		
		ul#common-use-list li a:hover{
			color: #007FF6;
		}

		ul#common-use-list li a.current{
			background: url(../images/common-li.jpg) -2px top no-repeat;
			border-bottom: none;
			color: #007FF6;
			width: 200px;
			height: 39px;
			padding: 12px 40px 0 10px;
		}

/*Double Column Lists*/			

	.double-col-list{
		padding: 0px;
		margin: 0px;
		list-style: none;
		padding-bottom: 60px;
	}
	
	.double-col-list li{
		background: none;
		padding: 0;
		margin-left: 0px;
		float: left;
		width: 300px;
		margin-bottom: 30px;
		margin-top: 30px;
	}

	.double-col-list li.li-left		{margin-right: 40px; background: none;}
	.double-col-list li.li-right 	{margin-right:0px; background: none;}



	.double-col-list li h3{
		font-size: 13px;
		line-height: 18px;
	}

	.double-col-list li a.url-link{
		color: #999;
	}

	.double-col-list li a.url-link:hover{
		color: #333;
	}

	.double-col-list li p{
		line-height: 14px;
		font-size: 11px;
	}

	.double-col-list li a.downloads-btn{
		width: 49px;
		height: 50px;
		margin: 0 10px 20px 0;
		background: url(../images/download-btn.jpg) 0 0 no-repeat;
		text-indent: -5000px;
		float: left;
	}

	.double-col-list li a.downloads-btn:hover{
		background-position: 0 -50px;
	}


/*FAQs*/

dl.faqs-list{
	width: 600px;
}

.faqs-list dt{
	color: #444;
	font-weight: bolder;
	margin-top:0px;
}

.faqs-list dd{
	margin-bottom: 20px;
	color: #444;	
}

/*PRODUCT MENU*/

	.product-menu-image{
		width: 86px;
		height: 86px;
		display: block;
		float: left;
		overflow: hidden;
		border: 2px solid #fff;
		margin: 5px 20px 0 5px;
	}
	
	.product-menu-image:hover{
		border: 2px solid #007FF6;
	}


	.product-box{
		background: url(../images/bg-product-box.jpg) 0px 0 no-repeat;
		height: 120px;
		line-height: 15px;
		font-size: 11px;
	}

	.product-box:hover{
		background-position: 0px -322px;
	}

