/* 
Title:     S.O.S
Author:    © Clorox
Updated:   June 4th, 2009
*/


/* !defaults */

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

body {
	font: normal 62.5%/1.25em Arial, Helvetica, sans-serif;
  	color: #808080;	
	text-align: center; 
	background: #FEEF00 url(/images/bg_body_top.jpg) no-repeat left top;
	}	

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

hr { 
	background: #D7D7D7; 
	color: #D7D7D7; /* IE fix */
	clear: both;
	float: left; 
	width: 100%; 
	height: 1px; 
	margin: 0 0 10px 0; 
	padding: 0; 
	border: none; 
	}	

	
h1 {
	margin: 0 0 5px 0;
	padding: 0; 
	font: normal 2em Arial, Helvetica, sans-serif;
	color: #001894;
	}	
	
h2 {
	margin: 0 0 5px 0;
	padding: 0; 
	font: normal 1.6em Arial, Helvetica, sans-serif;
	color: #001894;
	}
	
h3 {
	margin: 0 0 5px 0;
	padding: 0; 
	font: bold 1.2em Arial, Helvetica, sans-serif;
	color: #0054A4;
	}	
	
h4 {
	margin: 0 0 5px 0;
	padding: 0; 
	font: normal 1.2em Arial, Helvetica, sans-serif;
	color: #0054A4;
	}		
	
p {	
	margin: 0 0 10px 0;
	font: normal 1.2em/1.5em Arial, Helvetica, sans-serif;	
	color: #808080;
	}

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


	
/* !structure */		
	
#headerInterior {
    height: 240px;
	background: url(/images/bg_content_interior_top.png) no-repeat left top; 
	}	
	
#header h2, #headerInterior h2 {
	float: left;
	margin: 15px 10px 0 35px;
	padding: 0;
	color: #00469A;
	}
	
.btmFade { 
	position: fixed;
	right: 0;
	bottom: 0;
	width: 522px;
	height: 768px;
	background: url(/images/bg_body_bottom.jpg) no-repeat right bottom; 
	z-index: 0;
	}	

#wrap {
	position: relative;
	width: 987px;
	height: 750px;
	margin: 0 auto;
	text-align: left;
	background: url(/images/bg_content_home.png) no-repeat left top;
	z-index: 100;
	}
	
#wrapInterior { 
	position: relative;
	width: 987px;
	margin: 0 auto;
	text-align: left;
	z-index: 101;
	}	

#wrapRepeat {
	margin: 0;	
	padding: 0 0 0 120px;
	background: url(/images/bg_content_interior_repeat.png) repeat-y left top; 
	}

#wrapFooter { 
	width: 987px;
	height: 180px;
	background: url(/images/bg_content_interior_btm.png) no-repeat left bottom; 
	z-index: 102;
	}
	
#home {
	width: 568px;
	height: 345px;
	margin: 0 0 0 83px;
	background: url(/images/hero_box.jpg) no-repeat left 60px;
	}	
	
#content {
	width: 760px;	
	}	
		
.horizon { background: url(/images/bg_content_fade.gif) no-repeat 90px 250px; }


/* !mainnav */

#nav {
	position: relative;
	float: left;		
	width: 727px;	
	height: 44px;
	margin: 91px 0 0 0;
	list-style: none;
	overflow: hidden;
	}

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

#nav li#navAbout a { 
	background-position: 0 0; 
	width: 150px; 
	left: 0; 
	}
#nav li#navAbout a:hover,
#nav li#navAbout a.active { background-position: 0 -44px; }

#nav li#navProducts a { 
	background-position: -150px 0; 
	width: 160px; 
	left: 150px; 
	}
#nav li#navProducts a:hover,
#nav li#navProducts a.active { background-position: -150px -44px; }

#nav li#navUsage a { 
	background-position: -310px 0; 
	width: 154px; 
	left: 310px; 
	}
#nav li#navUsage a:hover,
#nav li#navUsage a.active { background-position: -310px -44px; }

#nav li#navFaqs a { 
	background-position: -464px 0; 
	width: 114px; 
	left: 464px; 
	}
#nav li#navFaqs a:hover,
#nav li#navFaqs a.active { background-position: -464px -44px; }

#nav li#navContact a { 
	background-position: -578px 0; 
	width: 149px; 
	left: 578px; 
	}
#nav li#navContact a:hover,
#nav li#navContact a.active { background-position: -578px -44px; }


	
/* !headers */

h1.cleans {
	width: 351px;
	height: 90px;
	margin: 0 0 0 50px;
	text-indent: -9000px;
	background: url(/images/header_cleans.gif) no-repeat;
	}	
	
h1.family {
	position: relative;
	top: 195px;
	left: 120px;
	width: 76%;
	height: 41px;
	padding: 0 0 20px 0;
	text-indent: -9000px;
	background: url(/images/header_sos_family.gif) no-repeat;
	border-bottom: 1px solid #D7D7D7;
	}	
	
h1.scrubbing {
	position: relative;
	top: 195px;
	left: 120px;
	width: 385px;
	height: 41px;
	margin: 0 0 10px 0;
	text-indent: -9000px;
	background: url(/images/header_sos_sponges.gif) no-repeat;
	}		
	
h1.beginning {
	position: relative;
	top: 195px;
	left: 120px;
	width: 230px;
	height: 41px;
	margin: 0 0 10px 0;
	text-indent: -9000px;
	background: url(/images/header_beginning.gif) no-repeat;
	}	
			
h1.steel {
	position: relative;
	top: 195px;
	left: 120px;
	width: 342px;
	height: 34px;
	margin: 0 0 10px 0;
	text-indent: -9000px;
	background: url(/images/header_sos_pads.gif) no-repeat;
	}		
	
h1.faq {
	position: relative;
	top: 195px;
	left: 120px;
	width: 395px;
	height: 41px;
	margin: 0 0 10px 0;
	text-indent: -9000px;
	background: url(/images/header_faq.gif) no-repeat;
	}		
	
h1.tips {
	position: relative;
	top: 195px;
	left: 120px;
	width: 488px;
	height: 42px;
	margin: 0 0 10px 0;
	text-indent: -9000px;
	background: url(/images/header_tips.gif) no-repeat;
	}		
	
h1.tuffy {
	position: relative;
	top: 195px;
	left: 120px;
	width: 334px;
	height: 41px;
	margin: 0 0 10px 0;
	text-indent: -9000px;
	background: url(/images/header_tuffy.gif) no-repeat;
	}	
		
h1.contact {
	position: relative;
	top: 195px;
	left: 120px;
	width: 154px;
	height: 32px;
	margin: 0 0 10px 0;
	text-indent: -9000px;
	background: url(/images/header_contact.gif) no-repeat;
	}		
	
	
/* !home */

#home .copy {
	width: 270px;
	margin: 0 0 65px 270px;
	}	
	
.promos { 
	width: 828px;
	padding: 26px 0 0 20px;
	}	
	
.promos .column	{
	float: left;
	width: 340px;
	}
.promos .first { margin: 0 90px 0 0; }	
	
.promos img { 
	float: left; 
	margin: 0 20px 0 0;
	}	
	
.promos h4.trusted {
	float: left;
	width: 178px;
	height: 22px;
	margin: 15px 0 10px 0;
	text-indent: -9000px;
	background: url(/images/header_promo_trusted.gif) no-repeat;
	}	

.promos h4.new {
	float: left;
	width: 180px;
	height: 22px;
	margin: 15px 0 10px 0;
	text-indent: -9000px;
	background: url(/images/header_promo_new.gif) no-repeat;
	}
	
.promoBox { cursor: pointer; }	
	
/* !product landing */

#content .column {
	float: left;
	width: 250px;
	margin: 0;
	}	
	
#content .column p { margin: 0 50px 5px 0; }	

.landing { padding: 40px 0 0 0; }
	
.pads {
	padding: 250px 0 0 0;
	background: url(/images/thumb_product_sos.jpg) no-repeat 10px top;
	cursor: pointer;
	}	
	
.pads h4 {
	position: relative;
	width: 141px;
	height: 21px;
	margin: 0 0 10px 0;
	}	
.pads h4 span {
	position: absolute;
	width: 100%;
	height: 100%;	
	background: url(/images/header_product_sos.gif) no-repeat;
	}	
.pads h4 a { cursor: pointer; }		
	
	
.sponges {
	padding: 250px 0 0 0;
	background: url(/images/thumb_product_sponges.jpg) no-repeat center 40px;
	cursor: pointer;
	}		
	
.sponges h4 {
	position: relative;
	width: 72px;
	height: 26px;
	margin: 0 0 10px 0;
	}	
.sponges h4 span {
	position: absolute;
	width: 100%;
	height: 100%;	
	background: url(/images/header_product_sponges.gif) no-repeat;
	}	
.sponges h4 a { cursor: pointer; }	
	
.tuffy {
	padding: 250px 0 0 0;
	background: url(/images/thumb_product_tuffy.jpg) no-repeat 40px top;
	cursor: pointer;
	}		
	
.tuffy h4 {
	position: relative;
	width: 196px;
	height: 23px;
	margin: 0 0 10px 15px;
	}		
.tuffy h4 span {
	position: absolute;
	width: 100%;
	height: 100%;	
	background: url(/images/header_product_tuffy.gif) no-repeat;
	}	#content .column p
.tuffy h4 a { cursor: pointer; }			
	
.tuffy p { padding: 0 0 0 15px; }	

/* !product pages */

.intro {
	margin: 0 0 20px 0;
	font: normal 1.6em Arial, Helvetica, sans-serif;
	width: 440px;
	}	
	
.product { border-top: 1px solid #D7D7D7; }	
	
.allSurface { 
	padding: 25px 0 20px 200px;
	background: url(/images/thumb_all_surface_sponge.jpg) no-repeat left 20px;
	}	
	
.allSurface h4 {
	width: 250px;
	height: 25px;
	text-indent: -9000px;
	background: url(/images/header_all_surface_sponge.gif) no-repeat;
	}	
	
.hdSponge { 
	padding: 25px 0 40px 200px;
	background: url(/images/thumb_hd_sponge.jpg) no-repeat 20px 20px; 
	}	
	
.hdSponge h4 {
	width: 250px;
	height: 25px;
	text-indent: -9000px;
	background: url(/images/header_hd_scrubbing_sponge.gif) no-repeat;
	}	

.regularPads { 
	padding: 25px 0 60px 200px;
	background: url(/images/thumb_larger_pads.jpg) no-repeat left 20px;
	}	
	
.regularPads h4 {
	width: 110px;
	height: 25px;
	text-indent: -9000px;
	background: url(/images/header_regular_pads.gif) no-repeat;
	}	
	
.cleanTossPads { 
	padding: 25px 0 100px 200px;
	background: url(/images/thumb_clean_toss.jpg) no-repeat left 20px;
	}	
	
.cleanTossPads h4 {
	width: 271px;
	height: 21px;
	text-indent: -9000px;
	background: url(/images/header_clean_toss.gif) no-repeat;
	}		
	
.tuffyPad { 
	padding: 15px 0 100px 200px;
	background: url(/images/thumb_tuffy_pad.jpg) no-repeat left 10px;
	}		
	
.product p { width: 425px; }	

.center { 
	float: left;
	margin: 0 0 0 120px; 
	}

.btnBack {
	float: left;
	width: 106px;
	margin: 12px 0 0 0;
	}	


/* !lists */

ul.uses { margin: 0 0 10px 10px; }
	
ul.uses li {
	margin: 0 0 5px 0;
	padding: 0 0 0 10px;
	font: normal 1.2em Arial, Helvetica, sans-serif;
	background: url(/images/icon_bullet.gif) no-repeat left center;
	}			
	
ul.terms { margin: 0 0 15px 15px; }
	
ul.terms li {
	margin: 0 0 5px 0;
	padding: 0;
	font: normal 1.1em Arial, Helvetica, sans-serif;
	color: #888888;
	background: none;
	list-style: circle;
	}	
	
ul.terms ul { margin: 0 0 0 10px; }		
ul.terms ul li { font-size: 1em; }	

	
/* !gallery */

.gallery h2, .gallery h3 { 
	float: none; 
	margin: 0 0 5px 270px; 
	font: bold 1.8em Arial, Helvetica, sans-serif;
	color: #0054A4;
	}

.gallery h3 { 
	float: none; 
	margin: 0 0 10px 260px; 
	font: bold 1.2em Arial, Helvetica, sans-serif;
	}

.copyLeft {
	float: left;
	width: 370px;
	margin: 0 35px 5px 0;
	}

.copyRight { 
	float: left;
	width: 355px;
	margin: 0 0 5px 0; 
	}	
	
.gallery { clear: both; }	

.gallery img {
	float: left;
	width: 151px;
	margin: 0 20px 24px 0;
	}	
	
.gallery .larger { width: 222px; }	

/* fancybox */

div#fancy_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #666;
	display: none;
	z-index: 1030;
}

* html div#fancy_overlay {
	position: absolute;
	height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

div#fancy_wrap {
	text-align: left;
}

div#fancy_loading {
	position: absolute;
	height: 40px;
	width: 40px;
	cursor: pointer;
	display: none;
	overflow: hidden;
	background: transparent;
	z-index: 1100;
}

div#fancy_loading div {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 480px;
	background: transparent url('/images/fancybox/fancy_progress.png') no-repeat;
}

div#fancy_loading_overlay {
	position: absolute;
	background-color: #FFF;
	z-index: 1030;
}

div#fancy_loading_icon {
	position: absolute;
	background: url('/images/fancybox/fancy_loading.gif') no-repeat;
	z-index: 1035;
	width: 16px;
	height: 16px;
}

div#fancy_outer {
	position: absolute;
    top: 0;
    left: 0;
    z-index: 1090;
    padding: 18px 18px 33px 18px;
    margin: 0;
    overflow: hidden;
    background: transparent;
    display: none;
}

div#fancy_inner {
	position: relative;
	width:100%;
	height:100%;
	border: 1px solid #BBB;
	background: #FFF;
}

div#fancy_content {
	margin: 0;
	z-index: 1100;
	position: absolute;
}

div#fancy_div {
	background: #000;
	color: #FFF;
	height: 100%;
	width: 100%;
	z-index: 1100;
}

img#fancy_img {
	position: absolute;
	top: 0;
	left: 0;
	border:0; 
	padding: 0; 
	margin: 0;
	z-index: 1100;
	width: 100%;
	height: 100%;
}

div#fancy_close {
	position: absolute;
	top: -12px;
	right: -15px;
	height: 30px;
	width: 30px;
	background: url('/images/fancybox/fancy_closebox.png') top left no-repeat;
	cursor: pointer;
	z-index: 1181;
	display: none;
}

#fancy_frame {
	position: relative;
	width: 100%;
	height: 100%;
	display: none;
}

#fancy_ajax {
	width: 100%;
	height: 100%;
	overflow: auto;
}

a#fancy_left, a#fancy_right {
	position: absolute; 
	bottom: 0px; 
	height: 100%; 
	width: 35%; 
	cursor: pointer;
	z-index: 1111; 
	display: none;
	background-image: url(data:image/gif;base64,AAAA);
	outline: none;
}

a#fancy_left {
	left: 0px; 
}

a#fancy_right {
	right: 0px; 
}

span.fancy_ico {
	position: absolute; 
	top: 50%;
	margin-top: -15px;
	width: 30px;
	height: 30px;
	z-index: 1112; 
	cursor: pointer;
	display: block;
}

span#fancy_left_ico {
	left: -9999px;
	background: transparent url('/images/fancybox/fancy_left.png') no-repeat;
}

span#fancy_right_ico {
	right: -9999px;
	background: transparent url('/images/fancybox/fancy_right.png') no-repeat;
}

a#fancy_left:hover {
  visibility: visible;
}

a#fancy_right:hover {
  visibility: visible;
}

a#fancy_left:hover span {
	left: 20px; 
}

a#fancy_right:hover span {
	right: 20px; 
}

.fancy_bigIframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
}

div#fancy_bg {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	z-index: 1070;
	border: 0;
	padding: 0;
	margin: 0;
}
	
div.fancy_bg {
	position: absolute;
	display: block;
	z-index: 1070;
	border: 0;
	padding: 0;
	margin: 0;
}

div.fancy_bg_n {
	top: -18px;
	width: 100%;
	height: 18px;
	background: transparent url('/images/fancybox/fancy_shadow_n.png') repeat-x;
}

div.fancy_bg_ne {
	top: -18px;
	right: -13px;
	width: 13px;
	height: 18px;
	background: transparent url('/images/fancybox/fancy_shadow_ne.png') no-repeat;
}

div.fancy_bg_e {
	right: -13px;
	height: 100%;
	width: 13px;
	background: transparent url('/images/fancybox/fancy_shadow_e.png') repeat-y;
}

div.fancy_bg_se {
	bottom: -18px;
	right: -13px;
	width: 13px;
	height: 18px;
	background: transparent url('/images/fancybox/fancy_shadow_se.png') no-repeat;
}

div.fancy_bg_s {
	bottom: -18px;
	width: 100%;
	height: 18px;
	background: transparent url('/images/fancybox/fancy_shadow_s.png') repeat-x;
}

div.fancy_bg_sw {
	bottom: -18px;
	left: -13px;
	width: 13px;
	height: 18px;
	background: transparent url('/images/fancybox/fancy_shadow_sw.png') no-repeat;
}

div.fancy_bg_w {
	left: -13px;
	height: 100%;
	width: 13px;
	background: transparent url('/images/fancybox/fancy_shadow_w.png') repeat-y;
}

div.fancy_bg_nw {
	top: -18px;
	left: -13px;
	width: 13px;
	height: 18px;
	background: transparent url('/images/fancybox/fancy_shadow_nw.png') no-repeat;
}

div#fancy_title {
	position: absolute;
	bottom: -33px;
	left: 0;
	width: 100%;
	z-index: 1100;
	display: none;
}

div#fancy_title div {
	color: #FFF;
	font: bold 12px Arial;
	padding-bottom: 3px;
}

div#fancy_title table {
	margin: 0 auto;
}

div#fancy_title table td {
	padding: 0;
	vertical-align: middle;
}

td#fancy_title_left {
	height: 32px;
	width: 15px;
	background: transparent url(/images/fancybox/fancy_title_left.png) repeat-x;
}

td#fancy_title_main {
	height: 32px;
	background: transparent url(/images/fancybox/fancy_title_main.png) repeat-x;
}

td#fancy_title_right {
	height: 32px;
	width: 15px;
	background: transparent url(/images/fancybox/fancy_title_right.png) repeat-x;
}	
	

/* !tips */

.tip { border-top: 1px solid #D7D7D7; }	
	
.tipKitchen { 
	padding: 25px 0 40px 290px;
	background: url(/images/tip_kitchen.jpg) no-repeat left 20px;
	}	
	
.tipKitchen h4 {
	margin: 0 0 8px 0;
	width: 117px;
	height: 20px;
	text-indent: -9000px;
	background: url(/images/header_tip_kitchen.gif) no-repeat;
	}	
	
.tipBath { 
	padding: 25px 0 120px 290px;
	background: url(/images/tip_bath.jpg) no-repeat left 20px;
	}	
	
.tipBath h4 {
	margin: 0 0 8px 0;
	width: 38px;
	height: 20px;
	text-indent: -9000px;
	background: url(/images/header_tip_bath.gif) no-repeat;
	}
	
.tipOutdoors { 
	padding: 25px 0 100px 290px;
	background: url(/images/tip_outdoors.jpg) no-repeat left 20px;
	}	
	
.tipOutdoors h4 {
	margin: 0 0 8px 0;
	width: 75px;
	height: 20px;
	text-indent: -9000px;
	background: url(/images/header_tip_outdoors.gif) no-repeat;
	}					
	
.tipAuto { 
	padding: 25px 0 80px 290px;
	background: url(/images/tip_auto.jpg) no-repeat left 20px;
	}	
	
.tipAuto h4 {
	margin: 0 0 8px 0;
	width: 39px;
	height: 20px;
	text-indent: -9000px;
	background: url(/images/header_tip_auto.gif) no-repeat;
	}	
	

	
/* !footer */		

#footer {
	clear: both;
	width: 987px;
	margin: 0 auto;
	padding: 0 0 60px 0;
	text-align: left;
	}	

#footer p {	
	clear: left;
	margin: 0 0 0 65px;
	font-size: 1em;	
	color: #0054A4;
	}		

#footer a { color: #0054A4; }	

.navFooter { margin: 0 0 0 65px; }
.navFooter li { 
	float: left;
	margin: 0 5px 0 0;
	padding: 0 5px 0 0;
	border-right: 1px solid #0054A4;
	}	
	
.navFooter li:last-child { border: none; } 	

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

.clear { clear: both; }