/* 
Title:     Tilex
Author:    © Clorox
Updated:   07-23-09
*/


/* !defaults */

* {
	margin: 0;
	padding: 0;
	border: none;
	list-style: none;
	}	

body {
	font: normal 62.5%/1.25em Arial, Helvetica, sans-serif;
  	color: #9A9999;	
	text-align: center; 
	background: #FFFFFF;
	}	

strong, b { font-weight: bold; }
em { font-style: italic; }
small { font-size: 0.9em; line-height: 1.25em; }	
sup { vertical-align: top; }

h1 {
	margin: 0 0 3px 0;
	padding: 0; 
	font: normal 2em Arial, Helvetica, sans-serif;
	color: #001894;
	}
	
h2 {
	margin: 0 0 3px 0;
	padding: 0; 
	font: normal 1.8em Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	color: #00A9EB;
	}
	
h3 {
	margin: 0 0 5px 0;
	padding: 10px 0 0 0; 
	font: normal 1.6em Arial, Helvetica, sans-serif;
	color: #333333;
	}		
	
h4 {
	margin: 0 0 5px 0;
	padding: 10px 0 0 0; 
	font: bold 1.4em Arial, Helvetica, sans-serif;
	color: #333333;
	}
	
h5 {
	margin: 0 0 5px 0;
	padding: 10px 0 0 0; 
	font: bold 1.2em/1.5em Arial, Helvetica, sans-serif;
	color: #333333;
	text-transform: uppercase;
	}		
	
p {	
	margin: 0 0 10px 0;
	font: normal 1.2em/1.5em Arial, Helvetica, sans-serif;	
	color: #9A9999;
	}

a:focus { outline: none; }
a:link, a:visited { 
	color: #F98E2F; 
	text-decoration: none; 
	}	
a:hover, a:active { 
	color: #F98E2F; 
	text-decoration: underline;
	}


	
/* !structure */	

	
#header h2 {
	float: left;
	margin: 41px 0 0 0;
	width: 165px;
	height: 91px;
	}
		
#wrap {
	width: 864px;
	min-height: 900px;
	margin: 0 auto;
	text-align: left;
	background: url(/images/bg_wrap.gif) repeat-y left top;
	}
	
#home {
	width: 854px;
	margin: 0 0 0 5px;
	padding: 0;
	background: url(/images/bg_home.jpg) no-repeat left top;
	}	
	
#onecol {
	width: 854px;
	margin: 0 0 0 5px;
	padding: 0;
	background: url(/images/bg_home.jpg) no-repeat left top;
	}			
	
#twocol {
	width: 854px;
	margin: 0 0 0 5px;
	padding: 0;
	}		
	
#twocol .leftcol {
	float: left;
	width: 156px;
	}
	
#twocol .rightcol {
	float: left;
	width: 570px;
	margin: 0 0 0 30px;
	}		
	
#landing {
	width: 854px;
	margin: 0 0 0 5px;
	padding: 0;
	background: url(/images/bg_products.jpg) no-repeat left top;
	}	
		
#surface {
	position: relative;
	width: 854px;
	min-height: 900px;
	margin: 0 0 0 5px;
	padding: 0;
	background: url(/images/bg_surface.jpg) no-repeat left top;
	}		
			
#product {
	width: 854px;
	margin: 0 0 0 5px;
	padding: 0;
	}	

#product .hero {
	float: left;
	margin: 0 20px 0 22px;
	}	
	
#product .copy {
	float: left;
	width: 360px;
	margin: 0 40px 0 0;
	}	
	
#product .rightcol {
	float: left;
	width: 225px;
	}	
		
.root { background: url(/images/bg_root.jpg) no-repeat left top; }				
.remover { background: url(/images/bg_remover.jpg) no-repeat left top; }	
.shower { background: url(/images/bg_shower.jpg) no-repeat left top; }	
.bathroom { background: url(/images/bg_bathroom.jpg) no-repeat left top; }	
.mold { background: url(/images/bg_mold.jpg) no-repeat left top; }		
	
.content { 
	min-height: 400px;
	margin: 60px 15px 0 15px; 
	padding: 0 0 40px 0;
	}

#onecol .content {
	margin: 60px 100px  0 15px;
	}

/* !mainnav */


ul#nav {
	position: relative;
	float: left;		
	width: 689px;	
	height: 47px;
	margin: 66px 0 0 0;
	list-style: none;
	overflow: hidden;
	}

ul#nav li a {
	position: absolute;
	top: 0;
	width: 118px;
	text-indent: -9000px;
	text-decoration: none;
	padding: 47px 0 0 0;
	overflow: hidden;
	height: 0px !important;
	height /**/:47px; /* IE5/Win */
	background: transparent url(/images/btn_nav.png) no-repeat;
	}

#nav li#nav_products a { 
	background-position: 0 0; 
	width: 118px; 
	left: 0; 
	}
#nav li#nav_products a:hover,
#nav li#nav_products a.active { background-position: 0 -47px; }

#nav li#nav_bathroom a { 
	background-position: -118px 0; 
	width: 187px; 
	left: 118px; 
	}
ul#nav li#nav_bathroom a:hover,
ul#nav li#nav_bathroom a.active { background-position: -118px -47px; }

#nav li#nav_mold a { 
	background-position: -305px 0; 
	width: 183px; 
	left: 305px; 
	}
ul#nav li#nav_mold a:hover,
ul#nav li#nav_mold a.active { background-position: -305px -47px; }

#nav li#nav_faq a { 
	background-position: -488px 0; 
	width: 60px; 
	left: 488px; 
	}
ul#nav li#nav_faq a:hover,
ul#nav li#nav_faq a.active { background-position: -488px -47px; }

ul#nav li#nav_contact a { 
	background-position: -548px 0; 
	width: 141px; 
	left: 548px; 
	}
ul#nav li#nav_contact a:hover,
ul#nav li#nav_contact a.active { background-position: -548px -47px; }


	
/* !headers */

h1.hardcore {
	width: 420px;
	height: 45px;
	margin: 0 0 20px 0;
	text-indent: -9000px;
	background: url(/images/header_hardcore_bold.gif) no-repeat;
	}	
	
h1.mm {
	width: 554px;
	height: 30px;
	margin: 40px 0 20px 22px;
	text-indent: -9000px;
	background: url(/images/header_mmremover_bold.gif) no-repeat;
	}		
	
h1.root {
	width: 463px;
	height: 66px;
	margin: 40px 0 20px 22px;
	text-indent: -9000px;
	background: url(/images/header_root_bold.gif) no-repeat;
	}	
		
h1.shower {
	width: 391px;
	height: 74px;
	margin: 40px 0 20px 22px;
	text-indent: -9000px;
	background: url(/images/header_shower_bold.gif) no-repeat;
	}		
	
.new {
	float: left;
	width: 65px;
	height: 65px;
	margin: 0 10px 0 10px;
	}	
	
h1.bathroom {
	float: left;
	width: 443px;
	height: 31px;
	margin: 40px 0 20px 22px;
	text-indent: -9000px;
	background: url(/images/header_bathroom_bold.gif) no-repeat;
	}	
	
h1.surface {
	width: 179px;
	height: 66px;
	margin: 40px 0 20px 22px;
	text-indent: -9000px;
	background: url(/images/header_surface_bold.gif) no-repeat;
	}	
	
h1.mold {
	width: 346px;
	height: 30px;
	margin: 0 0 5px 0;
	text-indent: -9000px;
	background: url(/images/header_mold_bold.gif) no-repeat;
	}		
	
h1.watch {
	width: 392px;
	height: 31px;
	margin: 0 0 5px 0;
	text-indent: -9000px;
	background: url(/images/header_watch_bold.gif) no-repeat;
	}	
	
h1.faqMMremover {
	width: 500px;
	height: 67px;
	margin: 0 0 5px 0;
	text-indent: -9000px;
	background: url(/images/header_faq_mmremover.gif) no-repeat;
	}	
	
h1.faqCleaner {
	width: 500px;
	height: 66px;
	margin: 0 0 5px 0;
	text-indent: -9000px;
	background: url(/images/header_faq_cleaner.gif) no-repeat;
	}	

h1.faqShower {
	width: 501px;
	height: 66px;
	margin: 0 0 5px 0;
	text-indent: -9000px;
	background: url(/images/header_faq_shower.gif) no-repeat;
	}
	
h1.faqRoot {
	width: 638px;
	height: 66px;
	margin: 0 0 5px 0;
	text-indent: -9000px;
	background: url(/images/header_faq_root.gif) no-repeat;
	}
	
h1.contact {
	width: 203px;
	height: 31px;
	margin: 0 0 10px 0;
	text-indent: -9000px;
	background: url(/images/header_contact.gif) no-repeat;
	}
		
	

h2.surfaceSub {
	width: 134px;
	height: 19px;
	margin: 0 0 20px 22px;
	text-indent: -9000px;
	background: url(/images/subheader_surface.gif) no-repeat;
	}	
		
h1.products {
	width: 163px;
	height: 30px;
	margin: 40px 0 20px 22px;
	text-indent: -9000px;
	background: url(/images/header_products_bold.gif) no-repeat;
	}	
	
h2.productsSub {
	width: 475px;
	height: 19px;
	margin: 0 0 20px 22px;
	text-indent: -9000px;
	background: url(/images/subheader_products.gif) no-repeat;
	}			
			
h3.reappearing {
	width: 276px;
	height: 41px;
	margin: 0;
	text-indent: -9000px;
	background: url(/images/header_reappearing.gif) no-repeat;
	}	
	
h3.bathroomSub {
	width: 386px;
	height: 43px;
	margin: 0;
	text-indent: -9000px;
	background: url(/images/subheader_bathroom.gif) no-repeat;
	}		
	
	
/* !home */

.homeHero {
	margin: 0 22px;
	padding: 100px 0 30px 0;
	background: url(/images/hero_home.png) no-repeat right 80px;
	}	
	
.homeHero .copy {
	width: 314px;
	margin: 0 20px 0 0;
	}	
	
.homeHero .copy h3 {
	width: 188px;
	height: 41px;
	text-indent: -9000px;
	background: url(/images/header_visible.gif) no-repeat;
	}	
	
	
	
/* !body styles */

a.more, .usage a {
	padding: 5px 25px 3px 0;
	background: url(/images/btn_arrow.gif) no-repeat right 3px;
	}
	
.return { margin-top: 10px; }

.return a {
	padding:5px 0 3px 25px;
	background: url(/images/btn_return.gif) no-repeat left 3px;
	}

.content ul { margin: 0 0 15px 20px; }
.content li {
	margin: 0 0 5px 0;
	font: normal 1.2em Arial, Helvetica, sans-serif;
	list-style: circle;
	}
	
.terms ul { margin: 0 0 15px 20px; }
.terms li {
	margin: 0 0 5px 0;
	font: normal 1.2em/1.25em Arial, Helvetica, sans-serif;
	list-style: circle;
	}	
	
.terms li li { font-size: 1em; }	

.footnote { 
	margin: 0 0 3px 0;
	font-size: 0.9em; 
	line-height: 1.25em;
	}
	

/* !benefits dl */

.benefits { 
	margin: 0 0 15px 0;
	padding: 5px 0 5px 0;
	background: #EBF8FD; 
	}
	
.benefits dt {
	margin: 10px 0 10px 15px;
	font: bold 1.3em Arial, Helvetica, sans-serif;
	color: #00A9EB;
	}	
	
.benefits dd {
	margin: 0 15px 10px 15px;
	padding: 0 0 0 20px;
	font: normal 1.3em Arial, Helvetica, sans-serif;
	color: #00A9EB;
	background: url(/images/icon_check.gif) no-repeat left 0.1em;
	}
	
.benefits a:link, .benefits a:visited { color: #00A9EB; }	


/* !landing */

.summary { 
	margin: 0 0 20px 0;
	background: url(/images/bg_products.gif) no-repeat 25px bottom; 
	}

.summary dl {
	float: left;
	width: 197px;
	margin: 0 5px 20px 0;
	padding: 230px 0 0 0;
	cursor: pointer;
	}
	
.summary dt {
	margin: 0 15px 10px 15px;
	font: normal 1.3em Arial, Helvetica, sans-serif;
	color: #333333;
	}	
	
.summary dd {
	margin: 0 15px 10px 15px;
	font: normal 1.2em Arial, Helvetica, sans-serif;
	color: #9A9999;
	}	
	
.summary dd .learn {
	padding: 5px 25px 0 0;
	background: url(/images/btn_arrow.gif) no-repeat right 3px;
	}	
	
dl.rootTmb {  margin: 0 5px 0 25px; background: url(/images/summary_root.png) no-repeat center top; }	
dl.bathroomTmb { background: url(/images/summary_bathroom.png) no-repeat center top; }
dl.moldTmb { background: url(/images/summary_mm.png) no-repeat center top; }
dl.showerTmb { background: url(/images/summary_shower.png) no-repeat center top; }


/* !subnav */

.subnav { 
	margin: 0 0 15px 0;
	padding: 0;
	}
	
.subnav dt {
	margin: 0 0 10px 0;
	font: bold 1.3em Arial, Helvetica, sans-serif;
	color: #9A9999;
	}	
	
.subnav dd {
	margin: 0 15px 10px 0;
	padding: 0;
	font: bold 1.3em Arial, Helvetica, sans-serif;
	color: #001894;
	}

.subnav dd a:link, .subnav dd a:visited { font-weight: normal; }

/* !media */

.video {
	float: left;
	width: 412px;
	margin: 0;
	}
	
/* !promos */

.promos {
	clear: both;
	padding: 20px 0 0 15px;
	border-top: 1px solid #CCCCCC;
	}	
	
.promos .column {
	float: left;
	width: 355px;
	margin: 0 60px 0 0;
	cursor: pointer;
	}	
	
.promos .column img {
	float: left;
	width: 117px;
	margin: 0 10px 0 0;
	}	
	
.promos .column img.video {
	float: left;
	width: 200px;
	margin: 0 10px 0 0;
	}		
	
.promos .column h4 {
	font: normal 1.3em Arial, Helvetica, sans-serif;
	color: #001894;
	text-transform: uppercase;
	}	
	
.promos a.arrow {
	padding: 5px 25px 3px 0;
	background: url(/images/btn_arrow.gif) no-repeat right 3px;
	}	
	
/* !surface guide */

p.instruct {
	width: 190px;
	margin: 0 0 0 22px;
	font: normal 1.3em/1.5em Arial, Helvetica, sans-serif;
	color: #9A9999;
	}

.trigger { position: relative; }

.tooltip {
    position: absolute;
    display: none;
    z-index: 50;
	width: 305px;
	margin: 0;
	padding: 0 0 37px 0;
	background: transparent url(/images/tooltip_btm.png) no-repeat left bottom;
	}
	
.tooltipInner { 
	padding: 20px 0 0 0;
	background: url(/images/tooltip_top.png) no-repeat; 
	}	
	
.tooltip .left {
	float: left;
	width: 70px;
	margin: 0 15px 0 35px;
	padding: 10px 0 0 0;
	}	
	
.tooltip .right {
	float: left;
	width: 170px;
	}	
	
.tooltip h4 {
	margin: 0 15px 5px 0;
	font: normal 1.3em Arial, Helvetica, sans-serif;
	color: #333333;
	}
	
.tooltip p {
	margin: 0 25px 5px 0;
	font: normal 1.1em Arial, Helvetica, sans-serif;
	color: #9A9999;
	}			


#groutTrigger {
	position: absolute;	
	top: 330px;
	left: 300px;
	}	
	
#showerTrigger {
	position: absolute;
	top: 190px;
	left: 320px;
	}	
	
#tileTrigger {
	position: absolute;
	top: 410px;
	left: 140px;
	}		
	
#toiletTrigger {
	position: absolute;
	top: 570px;
	left: 90px;
	}	
	
#sinksTrigger {
	position: absolute;
	top: 690px;
	left: 20px;
	}	
	
#curtainTrigger {
	position: absolute;
	top: 820px;
	left: 200px;
	}	
	
#bathtubTrigger {
	position: absolute;
	top: 700px;
	left: 680px;
	}	
	
/* !footer */		

#footer {
	clear: both;
	margin: 0 5px;
	padding: 20px 0 40px 0;
	}	
		
#footer p {	font-size: 1em;	}	
	
#footer p.copyright {
	float: left;
	width: 40%;
	margin: 0 0 0 15px;
	}	
	
#footer .footerNav {
	float: right;
	width: 50%;
	margin: 0 15px 0 0;
	text-align: right;
	}	
	
#footer a { color: #9A9999;	}	
	

/* !popups */

div.overlay {      
    background-image:url(/images/bg_overlay.png); 
    width:600px; 
    height:470px;             
    display:none; 
    padding:55px; 
	} 
 

div.overlay div.close { 
    background-image:url(/images/btn_close.png); 
    position:absolute; 
    right:5px; 
    top:5px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
	}

#usageGuide ol {
	margin: 0 20px;
	}
	
#usageGuide ol ol {	margin: 0 0 0 20px;	}
	
#usageGuide li {
	margin: 0 0 5px 0;
	list-style: decimal;
	font: normal 1.3em/1.25em Arial, Helvetica, sans-serif;
	}
	
#usageGuide ol ol li {	
	font-size: 1em;
	list-style: lower-alpha; 
	}	



/* external links */

.warning { position: relative; }

.warning span.externalTooltip { display: none; }

span.externalTooltip {	
	position: absolute;
	padding: 5px;
	font: normal 10px/12px Arial, Helvetica, sans-serif;
	text-decoration: none;
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	width: 150px;
	color: #999999;
	}
	
.warning:hover span.externalTooltip,
.warning.whover span.externalTooltip { display: block; }
		
a.warning span.externalTooltip {
	top: -75px;
	left: 0;
	}	

a.warningLink:hover {
	text-decoration: none;
	background: none; 
	}

a.warningLink span {
	display: none;	
	padding: 5px
	}

a.warningLink:hover span {
 	display: inline; 
	position: absolute; 
	font: normal 10px/12px Arial, Helvetica, sans-serif;
	text-decoration: none;
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	width: 150px;
	color: #999999;
	}

/* !misc */	

.bathroomCleanerLink,
.moldAndMildewRemoverLink,
.mildewRootRemoverLink,
.dailyShowerCleanerLink {
	cursor: pointer;
}

.fix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
  
.fix { display: inline-block; } 
* html .fix { height: 1%; }
.fix { display: block; }

.hide { text-indent: -9000px; }

.left { float: left; }
.right { float: right; }
.clear { clear: left; }

iframe { margin: 0 0 80px 0; padding: 40px 0 0 0; }