@charset "UTF-8";

/* CSS Document */

/*
   background: #4d4d4f rgb(77,77,79)
   page inner background: #ffffff rgb(255,255,255)
   
   nav
   nav text: #4d4d4f rgb(77,77,79)
   nav text hover: #ffffff rgb(255,255,255)
   nav bkgd: #ffffff rgb(255,255,255)
   nav bkgd hover: #77787b rgb(119,120,123)
   dropdown text: #4d4d4f rgb(35,31,32)
   dropdown bkgd: #ffffff rgb(255,255,255)
   dropdown bkgd hover: #ededed rgb(237,237,237)
   keyword bkgd: #ededed rgb(237,237,237)
   
   header
   green bkgd: #00a61f rgb(0,166,31)
   white border: #f3f7f3 rgb(243,247,243)
   
   page title
   gray: #4d4d4f rgb(77,77,79)
   
   crum nav
   current page: #4d4d4f rgb(77,77,79)
   previos pages: #9d9fa2 rgb(157,159,162)
   
   page boxs
   bkgd: #f7f7f8 rgb(247,247,248)
   border: #f2f2f3 rgb(242,242,243)
   
   xtra light gray bkgd: #f4f5f5 rgb(244,245,245)
   light gray bkgd: #e7e9e8 rgb(231,233,232)
   gray line: #909092 rgb(144,144,146)

   text
   white text: #ffffff rgb(255,255,255)
   light gray text: #9d9fa2 rgb(157,159,162)
   medium gray text: #8a8c8e rgb(138,140,142)
   dark gray text: #4d4d4f rgb(77,77,79)
   green text: #00a61f rgb(0,166,31)   
   
   
   #tester blue: #9ab7d3 rgb(154,183,211)
*/


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



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

/* Header Tags */
h1.pg-header { font-size: 28px; letter-spacing: 0px; padding: 0; margin: 0 0 3px 0; }

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

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

h2.siteTitle { font-size: 20px; letter-spacing: 0px; padding: 0; margin: 0 0 0 0; }

h2.subTitle-Gry { font-size: 20px; letter-spacing: 0px; padding: 0; margin: 0 0 0 0; }

h2.lightGrySm { font-size: 18px; letter-spacing: 0px; padding: 0; margin: 9px 0 0 0; float: left; }

h3.subTitle-Gry { font-size: 16px; letter-spacing: 0px; padding: 0; margin: 0 0 0 0; }

h3.subTitle-Wht { font-size: 16px; letter-spacing: 0px; padding: 0; margin: 0 0 0 0; }

h3.SeriesSubTitle-Wht { font-size: 18px; letter-spacing: 0px; padding: 0; margin: 0 0 0 0; }

/* Page Structure */
#pg-size { width: 1006px; height: auto; margin: auto; background: #4d4d4f; }

#pg-header { width: 1006px; background: url(../images/bkgd/shadowTop.gif) no-repeat bottom #4d4d4f; }
		
#pg-contentContainer { width: 1006px; background: url(../images/bkgd/innnerMid.gif) repeat-y; }

	#pg-contentTop { width: 960px; background: url(../images/bkgd/innerTop.gif) no-repeat top; height: 12px; padding: 0 23px 0 23px; }
	
	#pg-content { width: 961px; height: auto; margin: auto; padding: 0 23px 0 23px; }
	
	#pg-contentBottom { width: 960px; background: url(../images/bkgd/innerBottom.gif) no-repeat bottom; height: 12px; padding: 0 23px 0 23px; }

#pg-footer { width: 1006px; background: url(../images/bkgd/shadowBottom.gif) no-repeat top #4d4d4f; }

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

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

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

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

	p a:active { color: #00a61f; text-decoration: underline; }
	
.smallItalic { font-family: Helvetica, Arial, sans-serif; font-size: 9px; color: #5e4f4a; line-height: 12px; font-style:italic; }

	.smallItalic a:link { color: #00a61f; text-decoration:none; }

	.smallItalic a:visited { color: #00a61f; text-decoration: none; }

	.smallItalic a:hover { color: #00a61f; text-decoration: underline; }

	.smallItalic a:active { color: #00a61f; text-decoration: underline; }
	
.whiteTextW { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #ffffff; line-height: 16px; }

	.whiteTextW a:link { color: #ffffff; text-decoration:none; }

	.whiteTextW a:visited { color: #ffffff; text-decoration: none; }

	.whiteTextW a:hover { color: #ffffff; text-decoration: underline; }

	.whiteTextW a:active { color: #ffffff; text-decoration: underline; }
	
.whiteTextG { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #ffffff; line-height: 16px; }

	.whiteTextG a:link { color: #00a61f; text-decoration:none; }

	.whiteTextG a:visited { color: #00a61f; text-decoration: none; }

	.whiteTextG a:hover { color: #00a61f; text-decoration: underline; }

	.whiteTextG a:active { color: #00a61f; text-decoration: underline; }
	
.greenTextG { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #00a61f; line-height: 16px; }

	.greenTextG a:link { color: #00a61f; text-decoration:none; }

	.greenTextG a:visited { color: #00a61f; text-decoration: none; }

	.greenTextG a:hover { color: #00a61f; text-decoration: underline; }

	.greenTextG a:active { color: #00a61f; text-decoration: underline; }

.crumNav { font-size: 9px; color: #4d4d4f; font-family: Helvetica, Arial, sans-serif; font-weight: bold; }

	.crumNav a:link { color: #9d9fa2; font-weight: normal; text-decoration: none; }
	
	.crumNav a:visited { color: #9d9fa2; font-weight: normal; text-decoration: none; }
	
	.crumNav a:hover { color: #4d4d4f; font-weight: normal; text-decoration: none; }
	
	.crumNav a:active { color: #9d9fa2; font-weight: normal; text-decoration: none; }

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

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

	.captionText a:link { color: #ffffff; text-decoration: underline; }
	
	.captionText a:visited { color: #ffffff; text-decoration: underline; }
	
	.captionText a:hover { color: #00a61f; text-decoration: underline; }
	
	.captionText a:active { color: #ffffff; text-decoration: underline; }
	
.captionLgText { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #ffffff; line-height: 18px; }

	.captionLgText a:link { color: #ffffff; text-decoration: underline; }
	
	.captionLgText a:visited { color: #ffffff; text-decoration: underline; }
	
	.captionLgText a:hover { color: #00a61f; text-decoration: underline; }
	
	.captionLgText a:active { color: #ffffff; text-decoration: underline; }
	
/* Internal Page BKGD Deffinations */
.mainContentBox { width: 866px; padding: 15px 15px 15px 15px; margin: 10px 0 0 0; border: solid 1px #f2f2f3; background: #f7f7f8; }





/* Header */
#headerContainer { width: 960px; height: auto; margin: auto; padding: 8px 23px 4px 23px; }

	/* Title / Logo */
	#headerContent { padding: 0 0 0 0; margin: 5px 0 0 0; background: url(../images/bkgd/headerGreenCurly.gif) no-repeat top left; height: 100px; width: 960px; }
	
	.headerMainLogo { float: left; padding: 15px 0 0 30px; width: 770px; }
	
		.headerMainLogoImg { padding: 0 50px 10px 0; border-right: solid 1px #f3f7f3; margin: 0 0 0 0; float: left; width: 268px; }
		
		.headerTagLine { padding: 22px 0 0 50px; width: 390px; margin: 0 0 0 0; float: left; }
	
	.headerDalLogo { float: right; padding: 0 0 0 0; width: 125px; margin: 15px 0 0 0; border-right: solid 1px #f3f7f3; }

	/* Navigation */	
	#navContainer { padding: 0 0 0 0; margin: 0 0 0 0; background: #ffffff; height: 34px; }
	
	.navItem { padding: 11px 25px 11px 25px; margin: 0 0 0 0; float: left; border-right: solid 1px #969292; }
	
	.navMainText { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #4d4d4f; font-weight: bold; line-height: 12px; text-align: left; }

		.navMainText a:link { color: #4d4d4f; font-weight: bold; text-decoration: none; }
		
		.navMainText a:visited { color: #4d4d4f; 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; }
	
	.dropdownItem { padding: 3px 10px 3px 10px; width: 170px; }
	
	.dropdownText { font-family: Helvetica, Arial, sans-serif; font-size: 11px; color: #4d4d4f; line-height: 18px; text-align: left; width: 150px }
		
		.dropdownText a:link { color: #4d4d4f; text-decoration: none; }
		
		.dropdownText a:visited { color: #4d4d4f; text-decoration: none; }
		
		.dropdownText a:hover { color: #4d4d4f; text-decoration: none; }
		
		.dropdownText a:active { color: #4d4d4f; text-decoration: none; }
		
	.searchItem { padding: 6px 15px 7px 25px; margin: 0 0 0 0; float: right; background: #ededed; }
		

/* Index */
#indexFlashContainer { width: 960px; padding: 7px 0 7px 19px; }


/* Products */
#productContainer { width: 892px; padding: 20px 34px 20px 34px; }

.productBox { width: 892px; height: 181px; padding: 20px 0 20px 0; border-bottom: solid 1px #363637; }


/* Gallery */
#galleryContainer { width: 929px; padding: 20px 0 20px 32px; }

#galleryImgContainer { float: left; width: 363px; height: 363px; padding: 3px 3px 3px 3px; background: #cfd0d2; border: solid 1px #9e9fa0; margin: 5px 0 0 0; position: relative; }

.galleryZoomIcon { position: absolute; right:5px; bottom: -20px; }

#galeryInfoSelector { float: right; width:545px; }

#galleryInfoContainer { width: 505px; padding: 35px 0 0 40px; background: url(../images/gallery/detailsBKGD.gif) no-repeat right top; }

	#galleryInfoTextContainer { width: 350px; padding: 0 130px 5px 25px; margin: 25px 0 0 0; background: url(../images/gallery/detailArrowBKGD.gif) no-repeat left center; position: relative; }
	
	.galleryViewDetails { position: absolute; top: 20px; right: 40px; }
	
	#galleryInfoProdImg { width:505px; height: 118px; padding: 15px 0 0 0px; }
	
#gallerySelectorContainer { width: 505px; padding: 15px 0px 0 20px;}

	.galleryPhotoChangerOuterBox { margin:0 0 0 0; padding:3px 0 0 0; width:425px; position:relative; height:104px; border:#cfd0d2 thin solid; float:left; }
		
	#scrollData { margin:0; padding:0; width:430px; height:100px; overflow:hidden; }
	
	.galleryUpArrow { padding: 50px 10px 0 10px; float:left; width: 20px }

	.galleryDownArrow { padding: 50px 0px 0 0px; float: right; width: 20px; }

	.galleryPhotoChangeImg { float:left;margin:0 0 3px 0; padding: 0 3px 0 3px; }
	
	.galleryPhotoChangeImg img { border: none; }

/* How To */
#howToHeader { width:961px; height:211px; background: url(../images/howto/howToMain.jpg) no-repeat; }

	.howToHeaderTextContainer { padding: 170px 0 0 30px; width: 300px; }

#howToContentContainer { width: 896px; padding: 5px 32px 20px 32px; }

#howToMPContainer { width: 706px; padding: 20px 10px 0 170px; } /*Incressed Padding because last item not used yet, apon additon of last time return padding to 20px 10px 0 10px and width to 876px */

#howToMPBox { width: 264px; padding: 0 0 0 0; margin: 0 40px 0 0;  float: left; }

#howToMPBox3 { width: 264px; padding: 0 0 0 0; margin: 0 0 0 0; float: right; }

	.howToMPTextContainer { width: 264px; padding: 20px 0 0 0; border-top: solid 1px #cdcdce; }
	
	.hotToMPText { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #5e4f4a; line-height: 16px; height: 90px; }
	
#howToLeftContainer { width: 400px; padding: 5px 0 0 0; float: left; }

	.howToLeftText { padding: 20px 30px 0 20px; }
	
	.howToLeftText img { float: right; }

#howToRightContainer { width: 485px; padding: 0 0 0 0; float: right; }

	.howToRightImg { position: relative; height: 335px; width: 485px; }
	
	.howToRightImgCaption { position: absolute; bottom: 8px; left: 65px; width: 400px; z-index: 10; }
	
	.howToPhotoButton { float: right; }


/* Technical Information */
#techInfoContainer { width: 896px; padding: 20px 32px 20px 32px; }

.techInforoomImg { margin: 0 0 10px 0; width: 896px; position: relative; }

.techInforoomImgCaption { padding: 0 30px 3px 10px; width: 836px; position: absolute; height:20px; bottom:0; left: 0; }

	/* Main Page */
	#techInfoMainContainer { width: 848px; padding: 20px 4px 0 24px; }
	
	#techInfoMainBorderBoxs { border-bottom: solid 1px #4d4d4f; border-right: solid 1px #4d4d4f; width: 423px; float: left; }
	
		.techInfoMainPureBond { width: 370px; height:236px; padding: 10px 7px 0 30px; background: #00a61f url(../images/techInfo/BKGD/mainPureBond.jpg) bottom left no-repeat; margin: 0 0 15px 0; position: relative; } /* Removed the margin from the bottom because the bottom boxes are not used yet, apone additon of boxes at 15px margin bottom*/
		
		.techInfoMainGrayBox { width: 370px; height:236px; padding: 10px 7px 0 30px; background: #363637; margin: 0 0 15px 17px; position: relative; }  /* Removed the margin from the bottom because the bottom boxes are not used yet, apone additon of boxes at 15px margin bottom*/
		
		.techInfoMainLEED { width: 370px; height:236px; padding: 10px 7px 0 30px; background: #0a8821 url(../images/techInfo/BKGD/mainLEED.jpg) bottom left no-repeat; margin: 15px 0 0 0; position: relative; }
		
		.techInfoMainGrayBox2 { width: 370px; height:236px; padding: 10px 7px 0 30px; background: #363637; margin: 15px 0 0 17px; position: relative; }
		
	.techInfoMainSubTitlesContainer { border-bottom: solid 1px #ffffff; padding: 0 0 0 0; width: 370px; margin: 0 0 30px 0; height: 35px }
	
		.techInfoMainSubTitle { float: left; margin: 7px 0 0 0; }
		
		.techInfoMainSubTitlesContainer img { float: left; }
	
	.techInfoMainTextContainer { width: 330px; padding: 0 40px 0 0; }
	
		/* ScotchGard Logo */
		.techInfoMainScotchGardLogo { padding: 20px 0 0 100px; }
		
		/* LEED Green Building */
		.techInfoMainButterFly { position: absolute; top: 47px; left: 2px; }
		
		.techInfoMainLEEDTextContainer { width: 180px; padding: 0 10px 0 180px; }
		
	/* ScotchGard Page */
	#scotchGardTextContainer { float: left; width: 550px; padding: 30px 0 0 20px; }
	
	.scotchGardLogo { float: right; width: 169px; height: 61px; padding: 80px 60px 0 0; }
	
	/* About PureBond */
	#pureBondContainer { height: 584px; background: url(../images/techInfo/BKGD/pureBondbody.gif) no-repeat; }
	
	#pureBondContent {  width: 400px; padding: 20px 111px 0 0; float: left; }
	
		.pureBondTitle { width: 270px; float: left; margin: 2px 0 0 0; }
	
	#pureBondLogo { width:325px; padding: 250px 0 0 120px; float: left }
	
	/* Warranty */
	#warranty { width:800px; }

	.indentWarranty { padding: 20px 0 0 20px; }
		

/* Contact */
#contactContainer { width: 896px; padding: 20px 32px 20px 32px; }

.requiredField { width: 866px; padding: 3px 0 3px 0; }

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

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

.form-field { font-family: Helvetica, Arial, sans-serif; color: #5e4f4a; padding: 7px 0 7px 0; font-size:11px; position: relative; }

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

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

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

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

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


/* Where to Buy */
#whereContainer { width: 896px; padding: 20px 32px 20px 32px; }

#searchContainer { width: 480px; padding: 15px 0 0 20px; float: left; }

#searchFieldContainer { width: 380px; padding: 0 0 0 60px; }

.searchDeviderOR { font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #00a61f; font-weight:bold; padding: 20px 0 20px 0; }

#searchResultsContainer { border-bottom: solid 1px #4d4d4f; padding: 10px 0 10px 0; width: 836px; margin: 0 30px 0 30px; }

.serachResultsBox { width: 190px; float: left; padding: 0 0 0 0; margin: 0 25px 0 0; }

.serachResultsBox4 { width: 190px; float: right; padding: 0 0 0 0; margin: 0 0 0 0; }

.searchResultsCoveredArea { margin: 5px 0 5px 0; padding: 5px 5px 5px 5px; width: 180px; background: #ebebec; }


/* Related Links */
.relatedLinkBoxGen { width: 866px; padding: 15px 15px 15px 15px; margin: 0 0 0 0; border: solid 1px #f2f2f3; background: #f7f7f8; }

.related2LinkBoxGen { width: 866px; padding: 15px 15px 15px 15px; margin: 0 0 0 0; border: solid 1px #d7d7d7; background: #ebebec; }

#relatedSmBoxContainer { width: 382px; margin: 0 0 0 0; padding: 0 0 0 0; float: right; }

.relatedLinkSmBox { width: 352px; padding: 15px 15px 15px 15px; margin: 0 0 0 0; border: solid 1px #f2f2f3; background: #f7f7f8; }

.related2LinkSmBox { width: 352px; padding: 15px 15px 15px 15px; margin: 8px 0 0 0; border: solid 1px #d7d7d7; background: #ebebec; }

.relatedLinkSmBoxIndent { width: 322px; padding: 10px 15px 5px 15px; }

.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: #00a61f; text-decoration: none; }
	
	.relatedLink a:active { color: #5e4f4a; text-decoration: none; }


/* Footer */
#footerLinkContainer { width: 960px; padding: 20px 23px 0 23px; margin:auto; }

.footerLegal { float: left; width: 300px; }

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

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

.footerLink { float: right; width: 500px; }

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

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

#footerLogoContainer { width: 960px; padding: 20px 23px 20px 23px; margin:auto; }

.footerGreenworks { float: left; width:500px; }

.footerGreenworks img { float: left; width:80px; }

.footerGreenworksTextContainer { width: 350px; float: left; padding: 4px 0 0 7px; }

.footerGreenworksText { text-align: left; font-size: 10px; font-family: Helvetica, Arial, sans-serif; font-style:italic; color: #ffffff; }

	.footerGreenworksText a:link { color: #ffffff; text-decoration: underline; }
	
	.footerGreenworksText a:visited { color: #ffffff; text-decoration: underline; }
	
	.footerGreenworksText a:hover { color: #00a61f; text-decoration: underline; }
	
	.footerGreenworksText a:active { color: #ffffff; text-decoration: underline; }
	
.footerLEED { float: right; width: 37px; }


/* 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%; }