/* 
Title:     Pine-Sol
Author:    © Clorox
Updated:   July 6th, 2009
*/




/* defaults */

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

/* Graphic Fix for Floodlight Tags */
SCRIPT, NOSCRIPT, IFRAME {
	display:none;
}

html, body
{
	height: 100%;
	width: 100%;
	background-color: #00542D;
}

body 
{
	font: normal 62.5%/1.25em Arial, Helvetica, sans-serif;
  	color: #808080;	
	text-align: center; 
			
	min-width: 960px;
}	


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: #000000;
	}	
	
h2 {
	margin: 0 0 5px 0;
	padding: 0; 
	font: normal 1.6em Arial, Helvetica, sans-serif;
	color: #000000;
	}
	
h3 {
	margin: 0 0 5px 0;
	padding: 0; 
	font: bold 1.2em Arial, Helvetica, sans-serif;
	color: #000000;
	}	
	
h4 {
	margin: 0 0 5px 0;
	padding: 0; 
	font: normal 1.2em Arial, Helvetica, sans-serif;
	color: #000000;
	}		
	
p {	
	margin: 0 0 10px 0;
	font: normal 1.4em/1.3em Arial, Helvetica, sans-serif;	
	color: #808080;
	}

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

/* structure */

#wrapper
{
	background-color: #00542D;
}

#container
{
	background-color: #fff;
	background-image: url(/images/bg_header.jpg);
	background-repeat: repeat-x; 
	text-align: left;
}

#header, #content, #footer, #footerHome
{
	width: 960px;
	margin: 0 auto;
}		
	
#header h2 {
	float: left;
	position: relative;
	width: 256px;
	height: 73px;
	margin: 19px 17px 0 0;
	padding: 0;
	font: bold 1.8em/1em Ariel, Helvetica, sans-serif;
	color: #FFE200;
	}
#header h2 span {
	position: absolute;
	width: 100%;
	height: 100%;
	background: url(/images/logo_pinesol.jpg) no-repeat;	
	}	
#header h2 a { 
	color: #FFE200;
	background: none;
	cursor: pointer; 
	}		
	
#content
{
	padding-top:  82px;
	
}

/* twocol */


#twocol {
	width: 990px;
	padding: 30px 0 10px 0;
	
	margin-left: -30px;

	}
	
#twocol .leftcol {
	float: left;
	width: 500px;
	margin: 0 0 0 0;

		}	
	
#twocol .rightcol {
	display: inline;
	float: left;
	width: 438px;

	}	
	
	
#twocol .leftcol h1, #twocol .leftcol h3, #twocol .leftcol p {
	padding-left: 38px;
	padding-right: 30px;
	}



	
/* !mainnav */

#navHome, #nav {
	position: relative;
	float: left;		
	width: 533px;	
	height: 39px;
	margin: 43px 0 0 0;
	list-style: none;
	overflow: hidden; 
	}

#navHome li a, #nav li a {
	position: absolute;
	top: 0;
	text-indent: -9000px;
	text-decoration: none;
	padding: 39px 0 0 0;
	overflow: hidden; 
		background: transparent url(/images/btn_nav_home.png) no-repeat; 
	}
	
#nav li a { background: transparent url(/images/btn_nav.png) no-repeat; }	

#navHome li#navProducts a,
#nav li#navProducts a { 
	background-position: 0 0; 
	width: 86px; 
	left: 0; 
	}
	
#navHome li#navProducts a:hover,
#navHome li#navProducts a.active,	
#nav li#navProducts a:hover,
#nav li#navProducts a.active { background-position: 0 -39px; }

#navHome li#navHouse a,
#nav li#navHouse a { 
	background-position: -86px 0; 
	width: 101px; 
	left: 86px; 
	}
	
#navHome li#navHouse a:hover,
#navHome li#navHouse a.active,	
#nav li#navHouse a:hover,
#nav li#navHouse a.active { background-position: -86px -39px; }

#navHome li#navHeritage a,
#nav li#navHeritage a { 
	background-position: -187px 0; 
	width: 91px; 
	left: 187px; 
	}
	
#navHome li#navHeritage a:hover,
#navHome li#navHeritage a.active,	
#nav li#navHeritage a:hover,
#nav li#navHeritage a.active { background-position: -187px -39px; }

#navHome li#navDiane a,
#nav li#navDiane a { 
	background-position: -278px 0; 
	width: 80px; 
	left: 278px; 
	}
	
#navHome li#navDiane a:hover,
#navHome li#navDiane a.active,	
#nav li#navDiane a:hover,
#nav li#navDiane a.active { background-position: -278px -39px; }


#navHome li#navLove a,
#nav li#navLove a { 
	background-position: -358px 0; 
	width: 175px; 
	left: 358px; 
	}
	
#navHome li#navLove a:hover,
#navHome li#navLove a.active,	
#nav li#navLove a:hover,
#nav li#navLove a.active { background-position: -358px -39px; }




/* !tools */

.tools {
	float: right;
	width: 205px;
	margin: -62px 0 0 0;
	}
	
.tools li {
	float: left;
	margin: 0 5px 0 0;
	padding: 0 5px 0 0;
	font: normal 1.2em "Lucida Grande", Ariel, Helvetia, san-serif;
	border-right: 1px solid #DDECE5;
	}	
	
.tools li:last-child { border: none; }	

.tools li a:link, .tools li a:visited { 
	color: #CBE464;
	text-decoration: none;
	}
	
.tools li a:hover, .tools li a:active { color: #ffe501; }	

	
/* !headers */

h1.scent {
	width: 375px;
	height: 58px;
	margin: 0 0 20px 75px;
	text-indent: -9000px;
	background: url(/images/header_scent.gif) no-repeat;
}	
	
h1.love {
	width: 409px;
	height: 23px;
	margin: 5px 0 10px 38px;
	text-indent: -9000px;
	background: url(/images/header_i_love_pinesol.gif) no-repeat;
}	
	
h2.readlove {
	text-indent: -9000px;
	/*overflow: hidden;*/
	background: transparent url(/images/header_read_the_love.gif) no-repeat;
	background-position: 16px 0px;
	padding-bottom: 32px;
	margin-top: 35px;
}

h1.tradition {
	width: 408px;
	height: 23px;
	margin: 5px 0 10px 38px;
	text-indent: -9000px;
	background: url(/images/header_a_tradition_of_clean.gif) no-repeat;
}	
		
h1.contact {
	width: 408px;
	height: 23px;
	margin: 5px 0 10px 38px;
	text-indent: -9000px;
	background: url(/images/header_contact_us.gif) no-repeat;
}
		
h1.meet {
	width: 408px;
	height: 23px;
	margin: 5px 0 10px 38px;
	text-indent: -9000px;
	background: url(/images/header_meet_diane.gif) no-repeat;
	}	
	
h1.faqOrig
{
	width: 408px;
	height: 50px;
	margin: 5px 0 10px 38px;
	text-indent: -9000px;
	background: url(/images/header_faqs_original.gif) no-repeat;
}
	
	
h1.faqScented
{
	width: 408px;
	height: 50px;
	margin: 5px 0 10px 38px;
	text-indent: -9000px;
	background: url(/images/header_faqs_scented.gif) no-repeat;
}
		
h1.ourProducts
{
	width: 408px;
	height: 60px;
	margin: 5px 0 10px 38px;
	text-indent: -9000px;
	background: url(/images/header_products_original.gif) no-repeat;
}
		
h2.tipH2
{
	text-indent: -9000px;
	overflow: hidden;
	
}

h1.ourProductsScented
{
	width: 408px;
	height: 60px;
	margin: 5px 0 10px 38px;
	text-indent: -9000px;
	background: url(/images/header_products_scented.gif) no-repeat;
}	
	

	
	
/* !home */

#home {
	top: -10px;
	height: 450px;
	padding: 50px 0 0 0;
	background: url(/images/bg_hero_diane.png) no-repeat 3px top;
	
	margin-left: -30px;
/*	background-color: #fa0;  */

	margin-bottom:-15px;
	}
	
#home p { margin: 0 400px 10px 70px; }	
#home img { margin: 10px 0 0 70px; }
#home b { color: #000000; }

/* !Our products scented */


#locator
{
	clear: both;
	position: relative;
	top:-30px;	
}


.locator
{
	padding-bottom: 10px;
}

/* !I love pinesol */

.mom {	
	padding: 320px 0 0 0;
	background: url(/images/photo_mom_daughter.jpg) no-repeat;
	margin-top: -15px;
	margin-left: -10px;
	}
	
.burst { 
	margin: 0 0 20px 40px;
	
	}	


.burst p, .burst h3 
{ 	
	text-indent: -9000px;
	overflow: hidden;
}	

	
.burst a
{ 	
	display: block;
	padding: 10px 10px 90px 10px;
	text-indent: -9000px;
	overflow: hidden;
	
	
}	

.hear {
	width: 314px;
	height: 151px;
	background: url(/images/burst_hear_the_love.jpg) no-repeat;
	}
	
.share {
	width: 277px;
	height: 135px;
	background: url(/images/burst_share_the_love.jpg) no-repeat;
	}	
	
.cites {
/*	background-color: #fa0; */

	background: url(/images/bg_close_quote.gif) no-repeat;
	background-position: bottom right;
	
	margin-top: -25px;
	}
	
.cite, .citer {
	font-size: 1.2em;
}	

.citer {

	color: #54b948;
	text-align: right;
	margin-bottom: 30px;
	}	


.intro {
	color:#000;
	
	}
	
.introLarge
{
	font-size: 1.9em;
	color:#000;
}	

p.question {
	color:#000;
	margin-bottom: 2px;
	font-weight: bold;
	
	}

.pinecone
{
	margin-left: 46px;
}

#scentedBottles
{	
	clear: both;
	width: 938px;
	height: 351px;
	float: left;
	padding-left: 2px;
	margin-left: 10px;
	padding-bottom: 65px;
}


#scentedBottles p
{
	margin-left: 10px;
	
	margin-right: 5px;
}

.scentedBottlesImg
{
	width:156px;
	height: 351px;
	
	float: left;
}

.usageTipLinks
{
	width:546px;
	height: 190px;
	background-image: url(/images/bg_usage_tips.jpg);
	background-repeat: no-repeat;	
	margin-left: 20px;
	padding-left: 23px;
	padding-right:  23px;
	padding-top: 49px;
}


.usageTipLinks li
{
	width: 116px;
	height: 94px;
	float: left;
	margin-left: -2px;
}


div#scoochLeft
{
	width: 480px;
	margin-left:0;
	padding-right: 0;
}

#twocol .shrinkLeft
{
	width: 450px;
}


/*
	around-the-house
*/

#carousel
{
	width: 960px;
}


.aroundH1
{
	margin-top:30px;
	margin-bottom:20px;
	margin-left:80px;
}

.aroundCell
{
	position: relative;
	width:896px;
	height: 184px;
	
	padding-bottom: 45px;
	margin-left: 10px;
	padding-left: 10px;
	padding-top: 400px;	
}


.aroundCell h2
{
	text-indent: -9000px;
	overflow: hidden;
	height: 0;
}

.aroundCell ul, .aroundCell p
{
	margin: 0;
	padding: 0;	
	color: #050505;
	width: 500px;
	margin-left: 315px;
}


.aroundCell p
{
	margin-top: 35px;
	font-size: 1.4em;
}

.aroundCell ul
{
	margin-top:0;
	font-size: 1.17em;
	padding-left: 20px;
}


.aroundCell li
{
	margin-top: 4px;
	line-height:1.2;
	list-style: disc;
}


#bathroomCell
{
	background-image: url(/images/bg_bathroom.jpg);
	background-repeat: no-repeat;
}

#kitchenCell
{
	background-image: url(/images/bg_kitchen.jpg);
	background-repeat: no-repeat;
}

#garageCell
{
	background-image: url(/images/bg_garage.jpg);
	background-repeat: no-repeat;	
	padding-top: 365px;
	padding-bottom: 50px;
}

#livingCell
{
	background-image: url(/images/bg_living_room.jpg);
	background-repeat: no-repeat;
}


.houseAnchor
{
	position: absolute;
	top:-20px;
/*	background-color: aqua;
	display:block;
	width: 10px;
	height: 10px; */
}


#controls
{
	position: absolute;
	width:896px;
	height: 184px;
	top:168px;
	margin-left: 9px;
	padding-top: 380px;
	
	z-index: 9;
	
}

.arrowClickLeft, .arrowClickRight, .arrowClickLeft2, .arrowClickRight2
{
	width: 111px;
	height: 150px;
/*	border: green solid 1px; */
	text-indent: -9000px; 
	overflow:hidden;	
	position: absolute;

}

.arrowClickLeft
{
	background : transparent url(/images/bg_arrow_click_left.png) no-repeat;
	background-position: 30px 50px;
	left:36px;
}


.arrowClickRight
{
	background : transparent url(/images/bg_arrow_click_right.png) no-repeat;
	background-position: 30px 50px;
	left:766px;
}

.arrowClickLeft a, .arrowClickRight a
{
  	voice-family: "\"}\""; 
  	voice-family: inherit;
	display: block;
	padding: 10px 10px 90px 10px;
}
	

#garageCell p
{
	margin-left:295px;
}

.narrowList1 
{
	float:left;
	margin-left:305px;
	margin-right:13px;
}

.narrowList2 
{
	float:left;
	
	width: 230px;
}

.narrowList1 h3, .narrowList2 h3
{
	margin-top:7px;
	margin-left: -10px;
}

.narrowList1 ul, .narrowList2 ul
{
	margin: 0;
	padding: 0;	
	color: #050505;
	width: 200px;
}


	
/* !promos */

#promosWrap {	
	position: relative;
	width: 100%;
	height: 175px;
	background: #26A000 url(/images/bg_promos.jpg) repeat-x;
}

#promos {
	width: 900px;
	margin: 0 auto;
	text-align: left;
}
	
#promos .promo {
	float: left;
	width: 295px;
	height: 162px;	
	margin: 0;
	cursor: pointer;	
}	
	
#promos .lavender { background: url(/images/promo_lavender.jpg) no-repeat; }
#promos .lavender h4 {
	width: 129px;
	height: 13px;
	margin: 40px 0 10px 20px;
	text-indent: -9000px;
	background: url(/images/header_promo_lavender.gif) no-repeat;
}
#promos .lavender p {
	margin: 0 180px 0 20px;
	font: normal 1.2em Ariel, Helvetica, sans-serif;
	color: #FFFFFF;
}		

#promos .powerful { background: url(/images/promo_pd.jpg) no-repeat; }	
#promos .powerful h4 {
	width: 142px;
	height: 15px;
	margin: 40px 0 5px 20px;
	text-indent: -9000px;
	background: url(/images/header_promo_pd.gif) no-repeat;
}
#promos .powerful p {
	margin: 0 100px 0 20px;
	font: normal 1.2em Ariel, Helvetica, sans-serif;
	color: #FFFFFF;
}	
	
#promos .house { background: url(/images/promo_around_house.jpg) no-repeat; }	
#promos .house h4 {
	width: 150px;
	height: 13px;
	margin: 40px 0 5px 20px;
	text-indent: -9000px;
	background: url(/images/header_promo_house.gif) no-repeat;
}
#promos .house p {
	margin: 0 140px 0 20px;
	font: normal 1.2em Ariel, Helvetica, sans-serif;
	color: #034EA2;
}


/* !poll */

#pinesolPollDiv, #pinesolResultsDiv
{
	width:377px;
	height: 277px;
}

#pinesolPollDiv
{
	background: transparent url(/images/bg_pinesolResultsDiv.png) no-repeat;
}

#pinesolPollDiv h3
{
	text-indent: -9000px;
	overflow: hidden;
}

#pinesolPollDiv #pollTitleWrapper {
	height: 98px;
}

#pinesolResultsDiv h3
{
	padding-top: 15px;
}

#poll-container, #poll-results
{ 
	margin:0 0 0 10px;
}
	
#poll-container p {	margin-bottom: 10px; }

#poll li {
	margin: 0 0 3px 0;
	font: bold 1.2em Arial, Helvetica, sans-serif;
	color: #292322;
}
	
#bar1-title { color:#ff7901; }
#bar2-title { color:#ffa500; }
#bar3-title { color:#ffcd1c; }
#bar4-title { color:#00ae00; }
#bar5-title { color:#008bc7; }
#bar6-title { color:#9242b5; }
#bar7-title { color:#d82991; }	

#bar1 { background-color:#ff7901; }
#bar2 { background-color:#ffa500; }
#bar3 { background-color:#ffcd1c; }
#bar4 { background-color:#00ae00; }
#bar5 { background-color:#008bc7; }
#bar6 { background-color:#9242b5; }
#bar7 { background-color:#d82991; }	

#poll li span {
	font-weight: bold;
	color: #2F7D45;
}

#voteBtn {

	margin-top: 5px;
	width:65px;
	height: 32px;
	
	background: white url(/images/voteBtn.jpg) no-repeat;
	}
	
#poll .btn:hover { cursor: pointer; }	

#poll-container ul {
	margin: 0 0 15px 0;
	list-style: none;
	}
	
#poll-container ul li {	margin: 0 0 8px 20px; }


/* !poll - bar graphs */

.graph {
	width: 360px;
	position: relative;
	}
	
.bar-title {
	position: relative;
	float: left;
	width: 154px;
	line-height: 20px;
	margin-right: 17px;
	text-align: left;
	font: bold 1.2em Arial, Helvetica, sans-serif;
	}
	
.bar-container {
	position: relative;
	float: left;
	width: 100px;
	height: 10px;
	margin-bottom:  10px;
	font: normal 1.1em Arial, Helvetica, sans-serif;
	}

.bar-container div { height: 20px; }

.bar-container strong {
	position: absolute;
	right: -44px;
	top: 0px;
	overflow: hidden;
	}
	
#poll-results p { text-align: center; }


/* !footer */		

.homePg #footerWrap
{	
	background: #00542D url(/images/bg_footer_home.jpg) repeat-x;
	height: 100px;
}

#footerWrap
{	
	clear: both;
	background: #00542D url(/images/bg_footer.jpg) repeat-x;
	height: 100px;
}

.homePg #footer {
	height: 25px;
}
	
#footer
{
	height: 44px;
	padding-top: 20px;
	margin-top: -20px;
}
		
#footerHome p, #footer p 
{	
	width: 880px;
	margin: 0 auto;
	padding: 7px 0 0 0;
	font: normal 1em Arial, Helvetica, sans-serif;	
	color: #CBE464;
	text-align: left;
}		 
	
#footer a, #footerHome a { color: #CBE464; }

/* !misc */	

.clear { clear: both; }

.paddBottom
{
	padding-bottom: 15px;
	margin-right: -15px;
}	
	
#contactIFrame
{
/*	background-color: #fa0; */
	margin-left: 35px;
	margin-bottom: 30px;
}	
	
#contactIFrame iframe
{
	display: block;
}	
	
	
/*		
.fix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
  
.fix { display: inline-block; } 
* html .fix { height: 1%; }
.fix { display: block; }

*/



/*
	products-subnav
*/

#subnavProducts
{
	position: absolute;
	width:138px;
	height: 71px;
	
	top:82px;
	margin-left:250px; 
	
	background-image: url(/images/bg_products_subnav.png);
	background-repeat: no-repeat;

}

#subnavProducts li
{
	width: 107px;
	height: 30px;
	
	margin-left: 15px;
	
/*	background-color: #f0a; */
}

#subnavProducts li a
{
	width:107px;
	position: absolute;
	text-indent: -9000px;
	text-decoration: none;
	overflow: hidden;

}

#subnavOriginal a
{
	top: 0;
	padding-top: 29px;
	width:107px;
	background: transparent url(/images/bg_original_pinesol.jpg) no-repeat; 
	z-index: 8000;
}

#subnavScented a
{
	top: 30px;
	padding-top: 29px;
	background: transparent url(/images/bg_pinesol_scented.jpg) no-repeat; 
	z-index: 8001;
}

#subnavOriginal a:hover, #subnavOriginal a.subactive, #subnavScented a:hover, #subnavScented a.subactive
{ 
	background-position: -107px 0; 
}

/* !popups 
MODIFIED BY CLM/EH TO ADD YOUTUBE OVERLAY 11/11/09
*/

#popupVideo, #popupPoll, #popupYoutube {
	cursor: pointer;
}

div.overlay,
div.overlayPoll,
div.overlayYoutube
{
    background-image:url(/images/bg_overlay.png); 
    display:none; 
}

div.overlayPoll {      
    width:377px; 
    height:277px;             
    padding:14px;
} 

div.overlay {      
    width:600px; 
    height:470px;             
    padding:35px; 
} 
div.overlayYoutube {      
    width:640px; 
    height:505px;             
    padding:35px; 
}
div.overlay div.close,
div.overlayPoll div.close,
div.overlayYoutube div.close
{ 
    background-image:url(/images/btn_close.png); 
    position:absolute; 
    right:5px; 
    top:5px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
    z-index: 10002;
}

/* 
ADDED STYLES FOR INTENSITY CALLOUT 
MODIFIED BY CLM/EH TO ADD NEW CALLOUT 11/11/09
*/
.diane-intensity{
	background: url('../images/diane_intensity_video_callout.png') no-repeat scroll top left;
	width: 295px;
	height: 162px;
	margin-top:4px;
}
.interior-intensity{
	margin:0 0 0 30px;
}