/*

welcome to the CSS for the VeTRAZZO site.

*/

/** ========== general ===========*/

body {
margin: 					0;
padding: 					0;
font-family: 				arial, helvetica, sans-serif;
text-decoration: 			none;
font-size: 					10px;
color:						#424242;
text-align: 				center;
background: 				#878787;
}

div, img, dl, dt, dd, ul, li, p, h1, h2, h3, h4, h5, h6, table tr, td, th, tbody, blockquote, br, form {
border: 					0;
margin: 					0;
padding: 					0;
}

select {
margin:						0;
padding:					0;
}

.clear {
clear: 						both;
}

br {
line-height:				1px;
}

/** ============= divs =========== */

div#bodyBgBottom {
position: 					relative;
width: 						880px;
margin: 					0px auto;
text-align: 				left;
padding-bottom: 			27px;
background: 				url(images/body_bg_bottom.gif) center bottom no-repeat;
}

div#wrap880 {
background: 				url(images/body_bg.jpg) top center repeat-y;
}

div#wrap850 {
width: 						850px;
margin-left: 				15px;
}
	
body#home div#wrap850 {
background: 				url(images/home_hero_ph.jpg) 0px 50px no-repeat;
padding-top: 				475px;
} 
		
div#logoAndNav div#wrapper {
margin: 					0 0 0 88px;
}
		
div#footer, div#persistentNav ul {
width: 						790px;
margin:						0 0 0 30px;
padding:					12px 0 0 0;
background: 				url(images/border_top_footer.gif) center top no-repeat;
color:						#424242;
font-size: 					10px;
}

div#persistentNav ul {
padding:					12px 0 2px 0;;
}
		
div#wrapFoot, div#persistentNav {
display: 					none;
}

div#colL, div#colR {
float: 						left;
display: 					inline;
}

div#colL {
display:					none;
}

div#colR {
width:						800px;
padding:					50px 0 5px 0; 
margin:						0 0 0 60px;
background:					url(images/main_content_bg_top.gif) center top no-repeat;
}

/* setting for printable products page -- different topBG image */
body#products_detail div#colR {
background:					none;
}

div#colL div#colLWrap {
margin-left: 				22px;
}

div#colR div#colRWrap {
background:					url(images/main_content_bg.gif) center top repeat-y;
}

div#colR div#colRWrapBgBottom {
padding-bottom:				36px;
background:					url(images/main_content_bg_bottom.gif) 10px bottom no-repeat;
}

div#colR div#colRWrapWrap {
margin-left:				40px;
}

div#colR div#mainContentWrap {
margin:						0 0 0 10px;
padding:					0 0 30px 0;
width:						530px;
}

div#colLPicWrap {
float: 						left;
display: 					inline;
width:						157px;
margin:						0 0 0 6px;
}

div.detailTop,
div.detailBottom {
float: left;
display: inline;
margin-bottom:				0;
}

div.detailBottom {
margin-bottom:				25px;
}

div#thumbWrapper {
float: 						left;
display: 					inline;
margin:						0 10px 0 6px;
}

div.spacerBorder {
background: 				url(images/border_top_footer.gif) center top no-repeat;
margin:						15px 0 20px 3px;
width:						538px;
}

div.answer {
font-size: 					12px;
float:						left;
display:					inline;
margin:						0 0 15px 4px;
padding-bottom:				6px;
background:					url(images/border_top_footer.gif) center bottom no-repeat;
}

body#products_testimonials div.blockQuoteWrap,
body#about div.blockQuoteWrap {
float: 						left;
display:					inline;
background:					url(images/border_top_footer.gif) center top no-repeat;
}

body#about div.blockQuoteWrap {
background:					none;
}

div#jumpLinks {
margin:						0 0 0 5px;
padding:					10px 0 0 0;
background:					url(images/border_top_footer.gif) center top no-repeat;
}

div#flashcontent {
margin-bottom: 				20px;
}

body#about div.inlinePicWrapLeft,
body#about div.inlinePicWrapRight {
margin-bottom:				20px;
}
                
div#printHeroHolder {     
display:					normal;
padding-top:				220px;  
}

/** =========== headers ============ */

h1 {
width:						566px;
height:						198px;
margin-bottom:				25px;
}

div.detailTop h1,
div.detailTop h2 {
color:						#c41130;
font-size:					25px;
width:						300px;
margin:						6px 0 3px 0;
float: 						left;
display:					inline;
font-weight:				normal;
height:						25px;
}

div.detailTop h1.needsBottomMarg {
margin-bottom:				20px;
}                               

div.detailTop h1.twiceHeight {
height:						52px;
}

h2 {
font-size:					18px;
margin-bottom:				15px;
text-transform:				uppercase;
}

div.detailTop h2 {
float: 						left;
display:					inline;
font-size: 					14px;
color:						#424242;
margin:						0 0 2px 0;
text-transform:				none;
}

body#products_care h2.noCaps,
body#where h2.noCaps,
body#about h2.noCaps,
body#press h2.noCaps {
text-transform:				none;
font-size:					16px;
margin-bottom:				8px;
}

div#colR div#mainContentWrap h2,
div#colR div#mainContentWrap p,
div#colR div#mainContentWrap h3 {
margin-left:				5px;
}

h3 {
font-size:					12px;
margin-bottom:				5px;
}

body#products_faq h3 {
margin-bottom:				0;
}

body#products_faq h3.answerBlockHeader {
background: 				url(images/border_top_footer.gif) center top no-repeat;
margin:						10px 0 20px 0;
padding-top:				10px;
} 

h3.hasTopMarg {
margin-top:					12px;
}

body#about div.inlinePicWrapRight h3 {
width:						220px;
}

h1 span {
color:						#fff;
font-weight: 				normal;
font-size:					25px;
}

h1 span.bigText,
h1 span.smallText {
float: 						left;
display:					inline;
}

h1 span.bigText {
margin:						18px 0 8px 382px;
}

h1 span.smallText {
font-size:					11px;
width:						145px;
margin:						0 0 0 383px;
}

/** hero images set here!!! */
h1.about_hero {
background:					url(images/hero_aboutus.jpg) top left no-repeat;
}

/* left aligned headers here */
h1.about_hero span.bigText,
h1.hero_story span.bigText  {
margin:						18px 0 8px 20px;
}

h1.about_hero span.smallText,
h1.hero_story span.smallText {
margin:						0 0 0 20px;
}

h1.products {
background:					url(images/hero_ph.jpg) top left no-repeat;
}

h1.hero_sustain {
background:					url(images/hero_sustainability.jpg) top left no-repeat;
}

h1.hero_story {
background:					url(images/hero_story.jpg) top left no-repeat;	
}

h1.hero_where {
background:					url(images/hero_wheretobuy.jpg) top left no-repeat;	
}
/* /hero images */

/** ========== links =============== */

a,
body#products_faq div#colR ul li span.link a {
color:						#424242;
text-decoration: 			underline;
} 

a.redLink {
color:						#c41130;
}

a:hover,
body#products_faq div#colR ul li span.link a:hover {
color: 						#888b87;
}

span#printButton a {
text-decoration: 			none;
display: 					block;
text-indent:				-9999px;
}	

a.backToList {
display:					none;
}		

body#products_detail div.detailTop p#infoTeaser a {
display:					none;
}

body#products_detail div.detailTop p#infoTeaser a:hover {
text-decoration:			underline;
}		

div#colR ul li a, 
div.answer span.backToTop a,
body#products_care p.backToTop span a,
body#press div#colR p.backToTop span a {
font-size:					11px;
color:						#c41130;
text-decoration:			none;
}

div#colR ul li a {
font-size:					12px;
text-decoration:			underline;   
}        

div.answer span.backToTop a,
body#products_care div#colR p.backToTop span a {
font-size:					10px;
}
 
body#products_faq div#colR ul li span.link a {
font-size: 12px;
}

div#jumpLinks ul li a {
text-decoration:			underline;
font-weight:				bold;
font-size:					11px;
}

/** ========= paragraphs, spans, and various textual elements ========== */

div#colR div#colRWrapWrap p {
line-height:				17px;
margin-bottom:				18px;
font-size:					12px;
}

div#productsIntroWrap h3,
div#productsIntroWrap p {
width: 						275px;
float: 						right;
display:					inline;
}

/** left col ad  */
span#sampleLinkOuter, span#sampleLinkInner {
display:					block;
width: 						157px;
}

span#sampleLinkOuter {
background:					url(images/sample_link_outer_bg.jpg) center bottom no-repeat;
padding-bottom:				9px;
}

span#sampleLinkInner {
background:					url(images/sample_link_inner_bg.jpg) center top repeat-y;
padding-top:				9px;
}

span#lightGrey, span#darkGrey {
line-height:				1.2em;
}

span#lightGrey {
color:						#6b7780;
}

span#darkGrey {
color:						#485056;
}

span#lightGrey, span#darkGrey {
text-transform: 			uppercase;
}

div#colLPicWrap a {
display: 					block;
text-decoration: 			none;
color:						#6b7780;
}

span#sampleLinkInner a {
padding-left:				10px;
}

div#colLPicWrap a:hover {
text-decoration: 			underline;
}
/* /left col ad */

div#wrapFoot p {
width: 						790px;
}

a#printButton {
display:					none;
}

body#products_detail div#colRWrapWrap div.detailTop p,
body#products_detail div#colRWrapWrap div.detailBottom p {
width:						350px;
float: 						left;
display:					inline;
margin-bottom:				25px;
}
  
body#products_detail div#colRWrapWrap div.detailBottom p {
display:					none;
}        

body#products_detail div#colRWrapWrap div.detailBottom p#printInfo {
display:					inline;
}

body#products_detail div#colRWrapWrap div.detailBottom p#top {
margin-top:					6px;
}

body#products_detail div#colR div.detailTop p#infoTeaser { 
display:					none;
}

body#products_detail div.detailTop p.printOff {
display:					none;
}

body#products_detail div#colRWrapWrap p.note {
display:					none;
}

p.testimonial,
div.blockQuoteWrap,
body#about div.blockQuoteWrap {
padding-top:				25px;
background: 				url(images/border_top_footer.gif) center top no-repeat;
margin-bottom:				25px;
}

p.noborder {
padding-top:				0;
background: 				none;
font-size:					3px;
}

body#about div.blockQuoteWrap {
background: 				none;
padding-top:				10px;
}

p.testimonial span {
display: 					block;
margin:						8px 0 0 30px;
}

div.blockQuoteWrap p.testimonial {
background: 				none;
padding:					0 35px 0 0;
}

body#about div.blockQuoteWrap p.testimonial {
padding:					0;
width:						280px;
}

div.blockQuoteWrap p.testimonial,
div.blockQuoteWrap blockquote {
float: 						left;
display: 					inline;
width:						245px;
margin-left:				15px;
}

body#products_testimonials blockquote p,
body#about blockquote p {
font-family:				verdana, arial, sans-serif;
font-weight:				bold;
color:						#d32d3d;
margin:						-10px 20px 0 0;
}

body#about blockquote p {
padding-top:				0;
}

body#products_testimonials blockquote p span,
body#about blockquote p span {
font-size:					9px;
color:						#c0c0c0;
line-height:				2em;
}

div#jumpLinks span {
font-size:					11px;
float:						left;
display:					inline;
}

body#products_care div#colR p.backToTop,
body#press div#colR p.backToTop {
padding-bottom:				6px;
background: 				url(images/border_top_footer.gif) center bottom no-repeat;
}

body#products_care div#colR p.backToTop span,
body#press div#colR p.backToTop span {
display: 					block;
text-align:					right;
margin-top:					15px;
}

body#about div.inlinePicWrapLeft p,
body#about div.inlinePicWrapRight p {
float: 						left;
display: 					inline;
width:						240px;
padding:					20px 0 0 0;
}

body#about div.inlinePicWrapRight p {
padding:					0;
margin-right:				5px;
}                 
       
p.needsLeftMarg {                        /* test these */
margin-left:				150px;
}

p.needsMoreLeftMarg {
margin-left:				290px;
}

p.needsEvenMoreLeftMarg {
margin-left:				300px;
}

/** =============== thumbnail gallery stuff =================== */
div.paletteThumb,
div.paletteThumbNoRight {
float: 						left;
display: 					inline;
margin:						0 40px 15px 0;
font-size:					12px;
text-align:					center;
}

div.paletteThumbNoRight {
margin-right:				0;
}

div.paletteThumb img,
div.paletteThumbNoRight img {
display: 					block;
}

div.paletteThumb a,
div.paletteThumbNoRight a {
display: 					block;  
width:						148px;
}
/* /thumbnail gallery stuff */


/** ============= footer stuff ============= */

div#wrapFoot p, 
div#wrapFoot p span,
div#persistentNav ul,
div#persistentNav ul li {
float: 						left;
display: 					inline;
}

div#wrapFoot p span, 
div#persistentNav ul li {
margin-left:				12px;
}
				
div#wrapFoot p span a, 
div#persistentNav ul li a {
text-decoration: 			none;
color: 						#757575;
}

div#wrapFoot p span.noLeft, 
div#persistentNav ul li.noLeft {
margin-left:				0;
padding-left:				0;
}

div#wrapFoot p span.sillyBullet, 
div#persistentNav ul li {
padding-left: 				12px;
background: 				url(images/sillyBullet.gif) 0 60% no-repeat;
}

div#wrapFoot p span#fine {
float: 						right;
display: 					inline;	
}

div#persistentNav ul li a {
font-weight: 				bold;
font-size:					9px;
}
	
div#wrapFoot p span#fine a, 
div#persistentNav ul li a,
span#printButton a {
color:						#424242;
}
/* /footer stuff */

body#products_faq div#colR ul li span.number {
display:					block;
float: 						left;
width:						20px;
}

div.answer span {
float:						left;
display:					inline;
width:						22px;
}

div.answer span.backToTop {
width: 						400px;
float: 						right;
display: 					inline;
text-align: 				right;
}

/** ============= lists ======================================================*/

div#colR ul {
margin:						0 0 15px 0;
}

div#mainContentWrap ul.leftMarg {
margin-left:				6px;
}

div#colR ul li {
list-style:					none;
line-height:				1.5em;
font-size:					12px;
}

div#colR ul li span{
margin-right:				10px;
}

body#products_faq div#colR ul {
float: 						left;
display:					inline;	
margin-left:				4px;
}

body#products_faq div#colR ul li span.link {
display:					inline;
}

div.answer dl {
margin-bottom: 				12px;
}

div.answer dl,
div.answer dl dd strong,
div.answer dl dd span {
float: 						left;
display:					inline;
}

div.answer dl dt {
margin-bottom:				5px;
}

div.answer dl dd span {
width:						465px;
}

div#jumpLinks ul,
div#jumpLinks ul li {
float: 						left;
display:					inline;
}

div#jumpLinks ul {
width:						545px;
padding:					0 0 10px 0;
background:					url(images/border_top_footer.gif) center bottom no-repeat;
}

div#jumpLinks ul li {
margin-right:				16px;
}

/** =========== images ====================================================== */

img#homeLogo {
float: 						left;
display: 					inline;	
}

img#logoSub {
margin: 					70px 0 32px 32px;
}

div.detailTop img,
div.detailBottom img {
float: 						left;
display: 					inline;
margin-right: 				15px;
}

div.detailBottom img {
margin:						0 5px 5px 0;
}

body#products_care div#mainContentWrap img {
margin-bottom:				15px;
}

body#about div.inlinePicWrapLeft img,
body#about div.inlinePicWrapRight img {
float: 						left;
display:					inline;
margin-right:				5px;
}

body#about div.inlinePicWrapRight img {
margin-top:					-22px;
}     

div.detailTop img.floatRight {
display:					none;
}                                   

img#printLogo {
float: 						left;
display:					inline;
padding:	   				0 0 30px 6px;
}           

div#printHeroHolder img {
float:						left;
display:					inline;
}

/** =========== home page nav =========== */

ul#homeNav {	
float: 						left;
display: 					inline;
margin: 					80px 0 0 48px;
width:						527px;
height: 					25px;
}

ul#homeNav li {
float: 						left;
display: 					inline;
list-style: 				none;
text-indent: 				-9999px;
height: 					25px;
}
	
/** ======= home page nav BG positioning ========== */
	
li#products 				{width: 83px;  background: url(images/nav_sprite_home.gif) 0px 1px no-repeat;}
li#sustain 					{width: 108px; background: url(images/nav_sprite_home.gif) -83px 1px no-repeat;}
li#story 					{width: 170px; background: url(images/nav_sprite_home.gif) -194px 1px no-repeat;}
li#where 					{width: 100px; background: url(images/nav_sprite_home.gif) -363px 1px no-repeat;}
li#about 					{width: 58px;  background: url(images/nav_sprite_home.gif) -470px 1px no-repeat;}
	
/** ======= home page nav hover BG positioning ========== */

li#products a:hover 		{width: 83px;  background: url(images/nav_sprite_home.gif) 0px -50px no-repeat;}
li#sustain a:hover			{width: 108px; background: url(images/nav_sprite_home.gif) -83px -50px no-repeat;}
li#story a:hover			{width: 170px; background: url(images/nav_sprite_home.gif) -194px -50px no-repeat;}
li#where a:hover			{width: 100px; background: url(images/nav_sprite_home.gif) -363px -50px no-repeat;}
li#about a:hover			{width: 58px;  background: url(images/nav_sprite_home.gif) -470px -50px no-repeat;}
	
ul#homeNav li a {
text-decoration: 			none;
display: 					block;
height: 					25px;
}

/** ========== nav tier 1 ================ */

ul#nav {
float: 						left;
display: 					inline;
width: 						175px;
padding-bottom:				1px;
margin-bottom:				25px;
background:				    url(images/subnav_li_border.gif) center bottom no-repeat;
}

ul#nav li {
float: 						left;
width: 						100%;
list-style: 				none;
list-style-position:		inside;
background:				    url(images/subnav_li_border.gif) center top no-repeat;
}

ul#nav li a {
text-decoration: 			none;
text-transform:				uppercase;
font-weight:				bold;
color:						#333;
display: 					block;
padding:					9px 0 7px 18px;
}

ul#nav li a:hover, 
div#persistentNav ul li a:hover 		{color: #888b87;}

/** ======= nav tier 1 U R here declarations ========== */

body#products li#pproducts a,
body#products_detail li#pproducts a,
body#products_faq li#pproducts a,
body#products_testimonials li#pproducts a,
body#products_care li#pproducts a,
body#products_warranty li#pproducts a			{background: url(images/subnav_active_bullet.gif) 8px 8px no-repeat; color: #333;}
body#sustain li#ssustain a  					{background: url(images/subnav_active_bullet.gif) 8px 8px no-repeat; color: #333;}
body#story li#sstory a      					{background: url(images/subnav_active_bullet.gif) 8px 8px no-repeat; color: #333;}
body#where li#wwhere a							{background: url(images/subnav_active_bullet.gif) 8px 8px no-repeat; color: #333;}
body#about li#aabout a,
body#about_contact li#aabout a							{background: url(images/subnav_active_bullet.gif) 8px 8px no-repeat; color: #333;}

/** ========== nav tier 2 ================ */

ul#navTier2 {
float: 						left;
display: 					inline;
margin: 					3px 0 3px 10px;
width: 						165px;
}

ul#navTier2 li, 
li#pproducts ul#navTier2 li a,
li#ssustain ul#navTier2 li a,
li#sstory ul#navTier2 li a,
li#wwhere ul#navTier2 li a,
li#aabout ul#navTier2 li a {
background: 				none;
}

ul#navTier2 li {
float: left;
width: 100%;
margin-bottom: 				8px;
}

ul#navTier2 li a {
display: 					block;
font-weight:				normal;
line-height:				12px;
padding: 					2px 0 0 12px;
}

ul#nav ul#navTier2 li a:hover			{color: #888b87;}

ul#nav ul#navTier2 li a#selected   		{background: url(images/subnav_active_bullet.gif) 2px 1px no-repeat; color: #333;}

/** ============= form stuff (this includes ALL elements, ignore previous organization within document.) =================== */

div#formWrap {
width: 						525px;
margin-left:				4px;
}

div#colR div#formWrap p.note {
margin: 					0;
font-size:					10px;
line-height:				10px;
}

div#formWrap table {
color:						#2c2c2c;
font-weight:				bold;
margin:						-6px 0 20px -8px;
}

div#formWrap table tr td.greyBg,
div#formWrap table tr td.regBg {
width:						155px;
background:					#e7e7e7;
}

div#formWrap table tr td.regBg {
background:					none;
}

div#formWrap table tr td div.formRtColWrapper {
margin-left:				6px;
}

div#formWrap table tr td span {
display:					block;
margin:						3px 0 3px 5px;
}

div#formWrap table tr td input.halfWidth,
div#formWrap table tr td input.halfWidthRight {
width:						165px;
}

div#formWrap table tr td input.halfWidthRight {
float: 						right;
}

div#formWrap table tr td input.fullWidth {
width:						343px;
}

div#formWrap table tr td input#city {
width:						236px;
}

div#formWrap table tr td input#state {
width:						40px;
}

div#formWrap table tr td input#zip {
width:						51px;
}

input#submit {
float:						right;
}

div#formWrap textarea {
width:						343px;
height:						70px;
}