@charset "UTF-8";

/* CSS Document */

/*
   background: #231f20 rgb(35,31,32)
   page border: #333132 rgb(51,49,50)
   page inner background: #ffffff rgb(255,255,255)
   
   nav
   nav-text: #ffffff rgb(255,255,255)
   nav-text hover bkgd: #7c7878 rgb(124,120,120)
   dropdown text: #231f20 rgb(35,31,32)
   dropdown hover text: #ffffff rgb(255,255,255)
   dropdown hover bkgd: #867676 rgb(134,118,118)
   
   footer [in order top - bottom]
   gray line: #636466 rgb(99,100,102)         [above and below green bar 1px]
   green bar: #a7bd00 rgb(167,189,0)
   white: #ffffff rgb(255,255,255)
   green gray: #474742 rgb(71,71,66)
   lighter gray: #4d4d4f rgb(77,77,79)
   
   text
   light gray text: #77787b rgb(119,120,123)
   medium gray text: #8a8c8e rgb(138,140,142)
   dark gray text: #4d4d4f rgb(77,77,79)
   FAQ type gray text: #595959
   light blue text: #dde4ec rgb(221,228,236)     [tables on product detail page]
   green: #a7bd00 rgb(167,189,0)
   white: #ffffff rgb(255,255,255)
   
   
   light green: #f6f8e5 rgb(246,248,229)
   border: #f0f0f1 rgb(240,240,241)           [around product Info and Divder]
   
   #tester blue: #9ab7d3 rgb(154,183,211)
*/

/* Fix this thing!*/

/* Resets Styles in all browsers */
* { padding: 0; margin: 0; border:0; }



html, body {
	margin: 0; padding: 0; background-color: #231f20; font-size: 1px;
	
	scrollbar-3dlight-color:#a7bd00;
	scrollbar-arrow-color:#a7bd00;
	scrollbar-base-color:#a7bd00;
	scrollbar-darkshadow-color:#a7bd00;
	scrollbar-face-color:#FFFFFF;
	scrollbar-highlight-color:#a7bd00;
	scrollbar-shadow-color:#a7bd00;
	scrollbar-track-color:#FFFFFF;
	font-family: Helvetica, Arial, sans-serif;
}

h1.pg-headerG { font-size: 22px; letter-spacing: 0px; padding: 0; margin: 0 0 3px 0; }

h1.pg-headerLgGry { font-size: 20px; letter-spacing: 0px; padding: 0; margin: 0 0 3px 0; }

h1.series-header { font-size: 24px; letter-spacing: 0px; padding: 0; }

h2.productSeries-header { font-size: 20px; letter-spacing: 0px; padding: 0; }

h2.subTitle-G { font-size: 18px; letter-spacing: 0px; padding: 0; margin: 0 0 3px 0; }

h2.subTitle2-G { font-size: 16px; letter-spacing: 0px; padding: 0; margin: 0 0 3px 0; }

h2.subTitle2-Gry { font-size: 16px; letter-spacing: 0px; padding: 0; margin: 0 0 3px 0; }

h2.subTitle3-G { font-size: 14px; letter-spacing: 0px; padding: 0; margin: 6px 0 6px 0; }

h2.subTitle-DGry { font-size: 22px; letter-spacing: 0px; padding: 0; margin: 0 0 3px 0; }

h2.subTitle-LGry { font-size: 18px; letter-spacing: 0px; padding: 0; margin: 0 0 3px 0; }

h2.subTitle-DGrySm { font-size: 18px; letter-spacing: 0px; padding: 0; margin: 0 0 3px 0; }

p { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #5e4f4a; line-height: 16px; }

	p a:link { color: #a7bd00; text-decoration:none; }

	p a:visited { color: #a7bd00; text-decoration: none; }

	p a:hover { color: #a7bd00; text-decoration: underline; }

	p a:active { color: #a7bd00; text-decoration: underline; }
	
.greenTitle { color: #a7bd00; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; }

	.greenTitle a:link { color: #a7bd00; text-decoration: none; }
	.greenTitle a:visited { color: #a7bd00; text-decoration: none; }
	.greenTitle a:hover { color: #a7bd00; text-decoration: underline; }
	.greenTitle a:active { color: #a7bd00; text-decoration: none; }

.whiteText { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #ffffff; line-height: 16px; }

.boldGreen { color: #a7bd00; font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 18px; font-weight:bold; }
	
#pg-size {width: 976px; height: auto; margin: auto; background: #231f20; }
		
#pg-contianer { width: 960px; height: auto; margin:auto; background:#333132; padding: 8px 8px 8px 8px; }

#pg-contentContainer { width: 960px; height: auto; background: #ffffff; clear:both; }

#pg-LongFlashContaienr { width: 956px; padding: 4px 0 4px 4px; height: auto; border-bottom: solid 1px #000000; }

#greenBoxWgrayBorderL { width: 866px; padding: 15px 15px 15px 15px; margin: 0 0 20px 0; border: solid 1px #f0f0f1; background: #f6f8e5; }

#warningMessage { padding: 0 0 15px 0; }

#pg-titleGunderline { padding: 0 0 0 0; border-bottom: solid 1px #a7bd00; width: 100%; }

#generalPgContainer { width: 896px; padding: 20px 32px 0 32px; margin: 0; }


/* Header */
#headerContainer { width: 976px; height: auto; margin: auto; padding: 15px 0 0 0; background: url(../images/bkgd/headerFlowerBKGD2.jpg) no-repeat bottom right; }

#headerLogo { width: 246px; height: 82px; padding: 0 0 0 0; margin: 0 0 0 0; float: left; background: none; }

#headerSearchContainer { width: 376px; height: 50px; float: right; }

.headerSearchText { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #ffffff; font-weight: bold; line-height: 18px; text-align: right; }

	.headerSearchText a:link { color: #ffffff; font-weight: bold; text-decoration: none; }
	
	.headerSearchText a:visited { color: #ffffff; font-weight: bold; text-decoration: none; }
	
	.headerSearchText a:hover { color: #ffffff; font-weight: bold; text-decoration: underline; }
	
	.headerSearchText a:active { color: #ffffff; font-weight: bold; text-decoration: none; }
	
	/* Crum Nav */
	#crumNavContainer { height: 12px; width: 971px; clear: both; padding: 0 0 8px 2px; }
	
	.crumNavText { font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #a7bd00; line-height: 16px; }

		.crumNavText a:link { color: #a7bd00; text-decoration:none; }
	
		.crumNavText a:visited { color: #a7bd00; text-decoration: none; }
	
		.crumNavText a:hover { color: #a7bd00; text-decoration: underline; }
	
		.crumNavText a:active { color: #a7bd00; text-decoration: underline; }

	/* Navigation */	
	#navContainer { padding: 0 0 2px 0px; margin: 0 0 0 0; background: none; }
	
	.navItem { padding: 11px 20px 11px 20px; margin: 0 20px 0 0; float: left; }
	
	.navMainText { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #ffffff; font-weight: bold; line-height: 12px; text-align: left; }

		.navMainText a:link { color: #ffffff; font-weight: bold; text-decoration: none; }
		
		.navMainText a:visited { color: #ffffff; font-weight: bold; text-decoration: none; }
		
		.navMainText a:hover { color: #ffffff; font-weight: bold; text-decoration: none; }
		
		.navMainText a:active { color: #ffffff; font-weight: bold; text-decoration: none; }
		
	.dropdown { position: relative; background: #ffffff; border: 1px solid #aeaeb0; padding: 0 0 0 0; margin: 0 0 0 0; visibility: hidden; height: auto; width: auto; z-index: 100; }
	
	.dropdownItem { padding: 3px 10px 3px 10px; width: 185px; }
	
	.dropdownText { font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #231f20; line-height: 18px; text-align: left; width: 165px }
		
		.dropdownText a:link { color: #231f20; text-decoration: none; }
		
		.dropdownText a:visited { color: #231f20; text-decoration: none; }
		
		.dropdownText a:hover { color: #ffffff; text-decoration: none; }
		
		.dropdownText a:active { color: #ffffff; text-decoration: none; }
		
		
/* Products */
#productsPgContainer { width: 896px; padding: 20px 32px  32px; margin: 0; }

#productsSeriesContainer { border-bottom: solid 1px #a7bd00; width: 100%; padding: 5px 0 5px 0; }

.productSeriesTitleContainer { width:175px; height: 164px; padding: 55px 5px 0 5px; margin: 0 0 0 0; float: left; background: url(../images/product/leaf_images/defualt.jpg) center no-repeat; }
	
	.productSeriesNameContainer { width:155px; height: 60px; padding: 0 10px 0 10px; }
	
	.productSeriesRomancCopyContaier { width: 165px; padding: 5px 5px 0 5px; height: 70px; }
	
		.productSeriesRomancCopyText { font-family: Helvetica, Arial, sans-serif; font-size: 11px; line-height: 16px; color: #77787b; text-align: center; }
		
	.productSeriesButton { width: 175px; padding: 0 0 0 0; height: 24px; }
	
.productSeriesImgContainer { width: 709px; height: 219px; margin: 0 0 0 0; padding: 0 0 0 0; float: right; }

	.productSeriesRmImg { float: left; height: 219px; width: 573px; position: relative; padding: 0 12px 0 5px; border-right: solid 1px #a7bd00; }
	
		.productSeriesCaption { position: absolute; height: 19px; background: url(../images/bkgd/transparentGray.png); width: 570px; bottom: 0; left: 5px; padding: 2px 0 0 3px; }
	
	.productSeriesProdImg { float: right; height: 219px; width: 105px; }
	
		.productSeriesProdImgTop { padding: 0 0 9px 0; }
		

/* Technical Information */
#techInfoPgContainer { width: 896px; padding: 20px 32px 0 32px; margin: 0; }

#techInfoPgHeaderContainer { width: 896px; padding: 10px 0 12px 0; margin: 0 0 0 0; height: auto; background: url(../images/techInfo/headerBKGD.gif) no-repeat left top; }

.techInfoTitle { width: 300px; float: left; height: 80px; }

.techInfoPgTopCopyContainer { float: right; width: 459px; height: 43px; border-bottom: solid 1px #77787b; padding: 20px 60px 0 70px; margin: 0 0 0 0; }

	.techInfoPgTopCopy { font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 16px; color: #77787b; text-align: left; }
	
.techInfoContainer { width: 896px; padding: 0 0 20px 0; margin: 0 0 0 0; }

	.techInfoBoxL { width: 427px; height: 218px; padding: 0 0 0 0; margin: 0 0 0 0; background: url(../images/techInfo/TECHrend.jpg) no-repeat bottom left; border-bottom: solid 1px #77787b; float: left; }
	
	.techInfoBoxR { width: 427px; height: 218px; padding: 0 0 0 0; margin: 0 0 0 0; background: url(../images/techInfo/TECHrend.jpg) no-repeat bottom left; border-bottom: solid 1px #77787b; float: right; }
	
		.techInfoInfo { width: 145px; padding: 50px 0 0 0; float: right; }
		
		.techInfoButton { width: 145px; padding: 30px 0 0 0; margin: 0 0 0 0; float: right; }


/* Gallery */
#galleryPgContainer { width: 896px; padding: 20px 32px  32px; margin: 0; }

#gallerySectionTitleContainer { border-bottom: 1px solid #a7bd00; width: 100%; margin: 0 0 5px 0; }

#gallerySubTitleCintainer { border-bottom: 1px solid #a7bd00; width: 100%; margin: 0 0 5px 0; }
	
	/* Gallery - Main Page */
	#galleryMainPgBox { width:896px; padding: 0 0 10px 0; }
	
	#galleryMainPgImgBoxL { padding: 0 7px 0 0; border-right: 1px solid #a7bd00; float: left }
	
	#galleryMainPgImgBoxR { padding: 0 0 0 7px; float: left }
	
	/* Gallery - Photo Page */
	#galleryPhotoPgContainer { width:896px; padding: 0 0 0 0; margin: 0 0 0 0; }
	
	#galleryPhotoPgLgImg { border-right: 1px solid #a7bd00; float: left; width: 528px; height:528px; padding: 0 9px 0 0; }
	
	#galleryPhotoSelectorContainer { float: right; width: 346px; height: auto; }
	
	.galleryPhotoInfoBox { width: 316px; padding: 15px 15px 15px 15px; background: #f6f8e5; height: 274px; }
	
	.galleryProdUsedBox { border-bottom: 1px solid #a7bd00; padding: 10px 0 10px 0; margin: 0 0 40px 0; }
	
		.galleryProdUsedBox img { float: left; padding: 0 15px 0 0; }
	
	.galleryPhotoFeatList { padding: 0 0 0 17px; }
	
	.galleryPhotoTypeSelectorBox { width: 316px; padding: 15px 15px 15px 15px; margin: 9px 0 0 0; border: 1px solid #a7bd00; }
	
		/* Photo Changer */	
		.galleryPhotoChangerBox { background: #d8d9da; width:334px; padding: 6px 6px 6px 6px; margin: 9px 0 0 0; }
		
		.galleryPhotoChangerOuterBox { margin:0 0 0 0; padding:0; width:334px; position:relative; height:104px; }
		
		#scrollData { margin:0; padding:0; width:334px; height:104px; overflow:hidden; }
		
		.galleryPhotoArrows { padding: 5px 0 0 155px; clear: both; }
		
		.galleryPhotoChangeImg { float:left;margin:0 0 3px 0; border-right: 1px solid #646465; padding: 0 3px 0 3px; }
		
		.galleryPhotoChangeImg img { border: 2px solid #ffffff; }


/* Trim / Accessories */
#trimSubTitleCintainer { border-bottom: 1px solid #a7bd00; width: 100%; margin: 0 0 5px 0; padding: 20px 0 0 0; }

#trimContentContainer { padding: 0 0 20px 0; margin: 0 0 0 0; }

#trimAccessoriesContent { background: #4d4d4f; padding: 30px 0 40px 0; }

	#trimAccessoriesContent img { }

#trimColors { padding: 20px 0 0 150px; }

	#trimBox { padding: 0 20px 0 0; width: 136px; float: left; }
	
	.trimBoxText { font-size: 12px; color: #4d4d4f; font-weight:bold; }

	/* Color Table */
	.trimTableTitle { padding: 15px 3px 15px 3px; color: #dde4ec; font-size: 12px; text-align: center; border-left: solid 1px #b8bec9; }
	
	.trimTableProdName { padding: 4px 3px 4px 3px; color: #8a8c8e; font-size: 12px; text-align: left; }
	
	.trimTableColor { padding: 4px 3px 4px 3px; color: #8a8c8e; font-size: 12px; text-align: center; border-left: solid 1px #dfe4ed; }
	
	.trimTableLspacer { border-left: solid 1px #dfe4ed; background: #ffffff; }
	
	.trimTableRspacer { border-right: solid 1px #dfe4ed; background: #ffffff; }


/* Mortar Styles */
#mortarContainer { width: 866px; border-top: 2px solid #a7bd00; padding: 25px 0 25px 0; }

.mortarImg { float: left; margin: 0 5px 0 0; }


/* Contact */
#contactPgContainer { width: 896px; padding: 20px 32px 0 32px; margin: 0; }

.requiredField { width: 866px; border-bottom: 2px solid #a7bd00; padding: 3px 0 3px 0; }

	.requiredField p { text-align: right; font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #a7bd00; line-height: 14px; }
	
		.requiredField p a:link { color: #a7bd00; text-decoration:underline; }
		
		.requiredField p a:visited { color: #4c4c4e; text-decoration:underline; }
		
		.requiredField p a:hover { color: #5e4f4a; text-decoration: none; }
		
		.requiredField p a:active { color: #a7bd00; text-decoration:underline; }
	
#contactFormContainer { width: 821px; padding: 20px 15px 0 30px; }

.contact-form-left { font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #4c4c4e; line-height: 16px; width: 320px; float: left; }

.form-field { font-family: Helvetica, Arial, sans-serif; color: #4c4c4e; padding: 7px 0 7px 0; font-size:11px; border-bottom: 1px solid #a7bd00; }

.buttons-field { font-family: Helvetica, Arial, sans-serif; color: #4c4c4e; padding: 10px 0 10px 0; position: relative;  }

.fieldlable { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color:#4c4c4e; width: 125px; margin-right: 1em; float: left; }

.regformfield { font-family: Helvetica, Arial, sans-serif; font-size: 10px; border: 1px solid #a7bd00; }

.textformfield { font-family: Helvetica, Arial, sans-serif; font-size: 12px; border: 1px solid #a7bd00; }

.contact-form-right { font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #4c4c4e;width: 320px; float: left; margin: 0 0 0 50px }


/* Request a Brochure */
#brochureFormContainer { width: 821px; padding: 20px 15px 10px 30px; background: url(../images/logos/brochureImg.jpg) no-repeat bottom right; }

.brochure-form-left { font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #4c4c4e; line-height: 16px; width: 320px; float: left; }

.brochure-form-right { font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #4c4c4e;width: 320px; float: left; margin: 0 0 0 50px; }

/* Brochure Img positining because the there is no request a form. */
.brochure-ImgPostion { position: absolute; top: -60px; right: 20px; }


/* SSC Search */
#SSCsearchContainer { width: 500px; float: left; }

.SSCsearchFormContainer { width: 400px; }

.SSCsearchForm { width: 280px; float: left; }

.SSCsearchButton { width: 80px; float: right; padding: 15px 20px 0 0; }

.SSCcanadaButton { float: right; width: 150px }


/* FAQ */
.faqRecordQ { width: 770px; padding: 3px 50px 3px 20px; background: #efefef; margin: 1px 10px 1px 10px; }

.faqRecordA { width: 700px; padding: 3px 0 3px 20px; }

.faqA { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #5e4f4a; line-height: 16px; }

.faqA table tr td { border: solid 1px #ffffff; padding: 0 0 0 5px; }



/* Related Links */
.relatedLinkBox { width: 866px; padding: 15px 15px 15px 15px; margin: 0 0 0 0; border: solid 1px #f0f0f1; background: #f6f8e5; }

.relatedLinkContainer { width: 250px; float: left; padding: 10px 0 0 20px; }

.relatedLink { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #5e4f4a; line-height: 16px; }

	.relatedLink a:link { color: #5e4f4a; text-decoration: none; }
	
	.relatedLink a:visited { color: #5e4f4a; text-decoration: none; }
	
	.relatedLink a:hover { color: #a7bd00; text-decoration: none; }
	
	.relatedLink a:active { color: #5e4f4a; text-decoration: none; }


/* Footer */
#footerContainer { width: 100%; background: #4d4d4f; margin: 6px 0 50px 0; }

.footerGreenLine { width: 100%; background: #a7bd00; border-top: solid 1px #636466; border-bottom: solid 1px #636466; height:2px; }

#footerFlashContainer { background: url(../images/bkgd/footerFlashBKGD.gif) repeat-x top left; height: 128px; width: 100% }

.footerFlash { width: 961px; height: 128px; border-left: solid 1px #4d4d4f ; border-right: solid 1px #4d4d4f; margin:auto; }

.footerFlash2 { width: 761px; height: 128px; border-left: solid 1px #4d4d4f ; border-right: solid 1px #4d4d4f; margin:auto; padding: 0 0 0 180px; }
	
	/* -- Remove After Footer Flash is put in place -- */
	.footerFlashPHContainer { width: 300px; padding: 0 0 0 20px; margin: 0 0 0 0; height: 128px; float: left; }
	
	.foooterFlashPHTextContaienr { padding: 20px 0 0 10px; float: left; }
	
	.footerFlashPHTitle { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #4d4d4f; line-height: 16px; font-weight: bold; }
	
		.footerFlashPHTitle a:link { color: #4d4d4f; text-decoration: none; }
		
		.footerFlashPHTitle a:visited { color: #4d4d4f; text-decoration: none; }
		
		.footerFlashPHTitle a:hover { color: #4d4d4f; text-decoration: none; }
		
		.footerFlashPHTitle a:active { color: #4d4d4f; text-decoration: none; }
	
	.footerFlashPHText { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #8a8c8e; line-height: 16px; font-weight: bold; }
	
		.footerFlashPHText a:link { color: #8a8c8e; text-decoration: none; }
		
		.footerFlashPHText a:visited { color: #8a8c8e; text-decoration: none; }
		
		.footerFlashPHText a:hover { color: #8a8c8e; text-decoration: none; }
		
		.footerFlashPHText a:active { color: #8a8c8e; text-decoration: none; }
	
	/* -- END Remove After Footer Flash is put in place -- */

#footerLinkCotiner { width: 976px; padding: 10px 0 40px 0; margin:auto; }

.footerLinks { text-align: right; font-size: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; line-height: 14px; }

	.footerLinks a:link { color: #ffffff; text-decoration: none; }
	
	.footerLinks a:visited { color: #ffffff; text-decoration: none; }
	
	.footerLinks a:hover { color: #ffffff; text-decoration: underline; }
	
	.footerLinks a:active { color: #ffffff; text-decoration: underline; }


/* clearIt */
.clearIt { height: 1px; clear:both; width: 100%; }
.clearIt5 { height: 5px; clear:both; width: 100%; }
.clearIt10 { height: 10px; clear:both; width: 100%; }
.clearIt15 { height: 15px; clear:both; width: 100%; }
.clearIt20 { height: 20px; clear:both; width: 100%; }