/* CSS Style for Cillit Bang Website */

/* Remove default padding from commonly used elements so that we may define our own. */

html, body, div, h1, h2, h3, h4, h5, h6, p, ul, li, p, form, input, select {
		margin: 0px;
		padding: 0px;
	}

body{
	background-color:#EFEFEF;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* Global site font styles */

p{
	font: 0.75em Arial, Verdana, Helvetica, sans-serif;
	color: #3A0184;
}
	
/* All standard links are underlined with same style as normal text, text is orange on rollover */

a {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #3A0184;
	text-decoration: underline;
}

a:hover {
	color: #FF7A4D;
}

h1{
	font: 2em Arial, Helvetica, sans-serif;
}
h2{
	font: 1.8em Arial, Helvetica, sans-serif;
}
h3{
	font: 1.5em Arial, Helvetica, sans-serif;
}

img.png {
   behavior: url("includes/pngbehavior.htc");
}

span.sub-hdr{
	color:#FFFFFF;
	font-style:italic;
	font-weight:bolder;
}

/* Clearing div style */
div.clear{
	clear:both;
}
/* ------------------------------------------------------------------------------------------------------------------ */
/*--- main container div stlyes ---*/
table.outer-table{
	margin:0px;
	padding:0px;
	width:100%;
}

table.outerframe-tbl{
	width:760px;
	text-align:center;
	}
	

div.main-container{	
	float:left;
	width:760px;
	}

/*--- styles for header - top nav ---*/
div.header{
	float:left;
	width:760px; 
	background-color:#3b0084; 
	clear:both;
	}

div.header-flag{
	float:left; 
	padding:15px 0px 10px 15px;
	}

div.header-nav{
	float:right; 
	padding:15px 10px 10px 0px; 
	}

/*--- styles to make nav items list elements by stripping all list properties ---*/

#topnav-menu ul{
	list-style:none;
	margin:0px;
	padding:0px;
}

#topnav-menu li{
	float:left;
	padding-right:5px;
	color:#FFFFFF;
	line-height:0.8em;
	text-transform: uppercase;
}

/*--- set style for skip navigation to display none, so with styles active it's not visible ---*/
#skip{
	display:none;
}

/*--- styles to make nav items list elements by stripping all list properties ---*/
div.header-nav a{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color:#edeaf1;
	font-weight:bold;
	text-decoration:none;
	font-size:0.66em;
	}	

div.header-nav a:hover{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color:#ff7a4d;
	font-size:0.66em;
	}	

div.orange-line{
	float:left;
	clear:both;
	width:760px;
	padding-bottom:6px;
	background-color:#ff7a4d;
	}

div.horizonal-gradiant{
	width:760px;
	height:5px;
	clear:both;
	}	
/*------------------------------------------------------------------------------------------------------------------*/

/*--- styles for footer ---*/	
div.footer{
	text-align:center;
	width:760px;
	clear:both;
	color:#4c4c4c;
	font: 0.6em Arial, Helvetica, sans-serif;
}

div.footer a, div.footer a:hover {
		color:#4a5d89;
}
/* ------------------------------------------------------------------------------------------------------------------ */

/*--- page container styles ---*/
div.content-container{
	position:relative;
	float:left;
	width:760px;
	min-height:540px; 
	_height:540px;
	background-color:#3b0084;
	background-image:url(../images/nl/home_bg.jpg);
	background-position:top;
	background-repeat:no-repeat;
	text-align:left;
	}


div.content-container2{
	position:relative;
	float:left;
	width:760px;
	text-align:left;
	background-image:url(../images/nl/page_bg.gif);
	background-repeat:repeat-y;
	}	

/*--- styles for homepage ---*/
div.logo-slogan{
	position:absolute;
	z-index:1;
	top:22px;
	left:280px;
	width:315px;
	height:199px;
}	

div.home-logo-top{
	float:left;
	clear:both;
	width:315px;
	}

div.home-logo-btm{
	float:left;
	clear:both;
	width:315px;
}

div.home-logo-btm-left{
	float:left;
	}
	
div.home-penny-animation{
	float:left;
	}


div.barry {
	position:absolute;
	z-index:2;
	top:22px;
	left:75px;
	width:204px;
	height:254px;
	background-image:url(../images/nl/home_barry.jpg);
	background-repeat:no-repeat;
}

div.home-inaction-btn{
	position:absolute;
	z-index:20;
	top:222px;
	left:300px;
	width:204px;
	height:254px;

}



div.sticker1{
	position:absolute;
	z-index:5;
	top:120px;
	left:9px;
	width:116px;
	height:110px;

}

div.sticker2{
	position:absolute;
	z-index:9;
	top:245px;
	left:617px;
	width:133px;
	height:94px;

}

/*
div#home_packshot_1 {
	position:absolute;
	z-index:6;
	top: 80px;
	left: 486px;
}
div#home_packshot_2 {
	position:absolute;
	z-index:6;
	top: 95px;
	left: 575px;
}
div#home_packshot_3 {
	position:absolute;
	z-index:6;
	top: 140px;
	left: 538px;
}
div#home_packshot_4 {
	position: absolute;
	z-index:6;
	top: 160px;
	left: 617px;
}

div#game_promo {
	position: absolute;
	z-index:6;
	top: 0px;
	left: 0px;
	width: 272px;
}
#promo_text {
	padding: 2px 15px;
	text-align: center;
	font: 0.75em Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
#promo_text a, #promo_text a:hover {
	text-decoration: none;
	color: #FFFFFF;
}
*/

/* TIJDELIJK */
div#home_packshot_1 {
	position:absolute;
	z-index:6;
	top: 90px;
	left: 500px;
}
div#home_packshot_2 {
	position:absolute;
	z-index:6;
	top: 130px;
	left: 650px;
}
div#home_packshot_3 {
	position:absolute;
	z-index:6;
	top: 160px;
	left: 580px;
}
div#home_packshot_4 {
	position:absolute;
	z-index:6;
	top: 110px;
	left: 75px;
}
div#game_promo {
	display: none;
}

div#actiebanner {
	position: absolute;
	text-align: center;
	z-index:6;
	top: 325px;
	left: 0px;
	width: 220px;
	color: #ffffff;
	font: 0.75em Arial, Verdana, Helvetica, sans-serif;
}


div.packshot1{
	position:absolute;
	z-index:6;
	top:40px;
	left:186px;
	width:105px;
	height:187px;

}

div.packshot2{
	position:absolute;
	z-index:5;
	top:188px;
	left:212px;
	width:105px;
	height:187px;
}

div.packshot3{
	position:absolute;
	z-index:3;
	top:88px;
	left:486px;
	width:69px;
	height:215px;
}

div.packshot4{
	position:absolute;
	z-index:4;
	top:81px;
	left:554px;
	width:109px;
	height:241px;
	}

div.packshot5{
	position:absolute;
	z-index:7;
	top:214px;
	left:673px;
	width:78px;
	height:148px;
	background-color:#006600;
}

div.packshot6{
	position:absolute;
	z-index:1;
	top:103px;
	left:33px;
	width:125px;
	height:187px;
}

div.packshot7{
	position:absolute;
	z-index:6;
	top:310px;
	left:610px;
	width:125px;
	height:187px;
}

div.packshot8{
	position:absolute;
	z-index:6;
	top:110px;
	left:645px;
	width:105px;
	height:187px;

}

/*
div.packshot8{
	position:absolute;
	z-index:6;
	top:120px;
	left:650px;
	width:105px;
	height:187px;

}
*/

div.commmercial-callout{
	position:absolute;
	z-index:80;
	top:150px;
	left:50px;
	width:101px;
	height:78px;
}

div.home-callout-holder{
	position:relative;
	z-index:2;
	margin:275px 0px 0px 145px;
	background-color:#3b0084;
}

div.home-callout-pic{
	clear:both;
	text-align:center;
	}
	
div.home-callout-txt{
	clear:both;
	text-align:center;
	font: 0.75em Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	}	

div.home-callout-txt a, div.home-callout-txt a:hover{
	color:#FFFFFF;
	text-decoration:none;
	}	

div.home-callout1{
	position:relative;
	float:left;
	margin-top:10px;
	width:110px;
	background-color:#3b0084;
}

div.home-callout2{
	position:relative;
	float:left;
	margin:80px 0px 0px -90px;
	width:110px;
	background-color:#3b0084;
}

/*
div.home-callout3{
	position:relative;
	float:left;
	margin:0px 0px 0px 20px;
	padding: 0px 0px 10px 0px;
	width:110px;
	background-color:#3b0084;	
}

div.home-callout4{
	position:relative;
	float:left;
	margin:40px 0px 0px 20px;
	padding: 0px 0px 10px 0px;
	width:110px;
	background-color:#3b0084;	
	}

div.home-callout5{
	position:relative;
	float:left;
	margin:92px 0px 0px 26px;
	padding: 0px 0px 10px 0px;
	width:110px;
	background-color:#3b0084;	
	}
*/

div.home-callout3{
	position:absolute;
	top: 0px;
	left: 160px;
	padding: 0px 0px 10px 0px;
	width:110px;
	background-color:#3b0084;	
}

div.home-callout4{
	position:absolute;
	top: 40px;
	left: 290px;
	padding: 0px 0px 10px 0px;
	width:110px;
	background-color:#3b0084;	
	}

div.home-callout5{
	position:absolute;
	top: 80px;
	left: 48px;
	padding: 0px 0px 10px 0px;
	width:110px;
	background-color:#3b0084;	
	}
	
/*----------------------------------------------------------------------------------------------------*/

/*--- styles for left nav including logo and vertical gradiant ---*/
div.leftnav-container{
	float:left;
	width:181px;
	background-color:#ff7a4d;
}

div.leftnav{
	float:left;
	width:175px;
}

div.leftnav-grad-bg{
	float:left;
	width:181px;
	padding-right:6px;
	background-image:url(../images/nl/leftnav-grad-bg.gif);
	background-position:top right;
	background-repeat:repeat-y;
}

div.leftnav-vert-orange{
	float:left;
	width:175px;
	padding-right:6px;
	background-color:#ff7a4d;
}

div.leftnav-nav{
	float:left;
	width:172px;
	background-color:#3b0084;
}

#leftnav-menu ul{
	list-style:none;
	margin:0px;
	padding:0px;
}

#leftnav-menu a {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: underline;
}

#leftnav-menu a:hover {
	color: #FF7A4D;
}

#leftnav-menu li{
	float:left;
	color:#FFFFFF;
	padding-top:15px;
}


#skip2{/*--- Set display style of skip item on left navigation ---*/
	display:none;
}

/*------------------------------------------------------------------------------------------------------*/

/*--- Page content styles ---*/

div.page-content-container{
	float:right;
	width:553px;
	padding:40px 0px 10px 0px;
	}

/*------- Styles for Products Page -------*/

div.products-hdr{
	width:553px;
	padding-bottom:20px;
}

div.products-intro{
	float:left;
	width:553px;
	padding-bottom:20px;
}

div.your-solutions-hdr{
	clear:both;
	width:520px;
	}

div.your-solutions-top{
	width:520px;
	height:20px;
	}

div.your-solutions-btm{
	width:520px;
	background-color:#3B0084;
	padding-bottom:20px;
	text-align:center;	
	}
	
div.product-details{
	float:left;
	width:520px;
	padding-top:20px;
	clear:both;
	}

div.product-packshot{
	float:left;
	width:100px;
	text-align:center;
}		
	
div.product-txt{
	float:right;
	width:380px;
	padding-bottom:10px;
	border-bottom:1px solid #666666;
}

/*--- list style for product details tick ands crosses ---*/
div.product-txt li{
	clear:both;
	padding-left:0px;
	margin-left:0px;
}

.product-tick{
	clear:both;
	padding-left:0px;
	margin-left:0px;
	li st-style:url(../images/nl/check.gif) inside square;
}
	
.product-tick li {
	list-style-type: none;
	padding-left: 14px !important;
	background-image: url(../images/nl/check.gif);
	background-repeat: no-repeat;		
}
	
div.product-txt ul{
	clear:both;
	font: 0.75em Arial, Helvetica, sans-serif;
	color:#3B0084;
	margin-bottom:10px;
}	
	
.product-cross{
	clear:both;
	padding-left:0px;
	margin-left:0px;
	li st-style:url(../images/nl/x_mark.gif) inside square;
}
.product-cross li {
	list-style-type: none;
	background-image: url(../images/nl/x_mark.gif);
	background-repeat: no-repeat;
	padding-left: 14px !important;
}






div.product-bullets{
	clear:both;
	}

span.product-title{
	font: italic bold 1.5em Arial, Helvetica, sans-serif;
}
/*-------------------------------------------------------------*/

/*--- Styles for solution finder page - NOTE: We reused some of the styles from the product section for this page - see above ---*/

div.solution-finder-copy{
	width:360px;
	float:left;
}

div.solution-finder-packshots{
	float:right;
	padding-right:20px;
}

div.your-solutions-hdr2{
	clear:both;
	width:535px;/*--- more width than solutions ---*/
	}

div.your-solutions-top2{
	width:535px;/*--- more width than solutions ---*/
	height:20px;
	}
	
div.your-solutions-btm2{
	width:535px; /*--- more width than solutions ---*/
	background-color:#3B0084;
	padding-bottom:16px; /*--- less padding than on Solutions page ---*/
	text-align:center;	
	}

div.stain-type-selector{
	float:left;
	clear:both;
	width:535px;
	background-color:#FF39FF;
	background-image:url(../images/nl/sol_finder_btm.gif);
	background-position:bottom;
	background-repeat:no-repeat;
	padding-bottom:17px;
}	

div.stain-selector-row{
	width:535px;
	clear:both;
	padding-top:5px;
	text-align:center;
}

div.stain-selector-item{
	float:left;
	width:124px;
	text-align:center;
}

div.stain-spacer{/*--- creaed to make perfect spacing between stain-selector-items across all browsers ---*/
	float:left;
	width:9px;

}

div.stain-spacer2{
	float:left;
	width:6px;/*--- replicated style as this width has to be specified for div to float in IE5 on mac ---*/

}

#stain {
	font:  bold 0.75em/1.2em Arial, Helvetica, sans-serif;
	color:#FFFFFF;
}

div.stain-selector-btns{
	clear:both;
	text-align:center;
	padding-top:5px;
}

/*---------------------------------------------------------------------------------------------------------*/

/*--- Styles for In action page ---*/

div.inaction-hdr-container{
	width:553px;
	float:left;
}

div.inaction-hdr-pic{
	float:left;
	width:158px;
}

div.inaction-hdr{
	float:left;
	width:380px;
	}

div.your-solutions-btm3{
	clear:both;
	width:535px; /*--- more width than solutions ---*/
	background-color:#3B0084;
	padding-bottom:16px; /*--- padding different to other pages  ----*/
	text-align:left;	/*--- text aligned to left opposed to center on other pages ---*/
	}

#commercial-hdr{/*--- margin applied to hdr image ---*/
	margin-left:24px;
	}	
	
div.commercials-container{
	float:left;
	width:535px;
	background-color:#3B0084;
	background-image:url(../images/nl/commercial_btm.gif);
	background-position:bottom;
	background-repeat:no-repeat;
	padding-bottom:20px;
}

div.commercial{
	float:left;
	padding-left:20px;
	width:510px;
}	

div.commercial-pic{
	float:left;
	width:86px;
}

div.commercial-details{
	float:left;
	padding-left:15px;
	width:400px;
}

div.commercial-details a, div.commercial-details a:hover{
	font:bold 0.75em Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	}

span.commercial-copy{
	font: italic bold 0.98em/1.2em Arial, Helvetica, sans-serif;
	color:#FF33FF;
	letter-spacing:0.06em;
	}
	
span.commercial-copy-sub{
	font: italic bold 0.9em Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	}	
	
/*---------------------------------------------------------------------------------*/

/*--- Style for testimonials page ---*/

div.testimonial{
	float:left;
	width:535px;
	border-top: 1px solid #4A5D89;
	padding:20px 0px 20px 0px;

}

span.testimonial-txt{
	font: bold 0.75em Arial, Helvetica, sans-serif;
	color:#3B0084;
}

/*-----------------------------------------------------------------------------------*/

/*--- Styles for FAQ page ---*/

dvi.faq-header, div.faq-intro{
	float:left;
	clear:both;
	width:500px;
	}

div.faq-list{
	float:left;
	clear:both;
	width:500px;
	border-bottom:1px solid #666666;
	padding-bottom:10px;

	}	
#faq-list ul{
	list-style:none;
	margin:0px;
	padding:0px;
	}

#faq-list li{
	padding-right:10px;
	color:#FFFFFF;
	}

div.faq-list a, div.faq-list a:hover, div.faq-back-to-top a, div.faq-back-to-top a:hover{
	font: 0.75em Arial, Helvetica, sans-serif;
	color:#4a5d89;
	}	

div.faq-answers{
	clear:both;
	width:500px;
	}
	
div.faq-answers ol{
	font: 0.75em Arial, Helvetica, sans-serif;
	color:#3B0084;
}
	
div.faq-back-to-top{
	float:left;
	padding-top:10px;
	}	

span.faq-questionheader{
	font: bold 1em/2em Arial, Helvetica, sans-serif;
	color:#3B0084;

}

/*-----------------------------------------------------------------------------------------*/

/*--- Styles for Contact Us Page ---*/

div.contact-us-hdr{
	clear:both;
	float:left;
	width:530px;
}

div.contact-us-intro{
	clear:both;
	float:left;
	width:530px;
	padding-bottom:30px;
	border-bottom:1px solid #666666;
	}
	
div.contact-us-txt{
	clear:both;
	float:left;
	width:530px;
	margin-top: 20px;
	
}	

#contact-us-list ul{
	list-style: disc outside;
	margin:10px;
	padding-left:5px;
	}

#contact-us-list li{
	font: 0.75em Arial, Helvetica, sans-serif;
	color:#3B0084;
	margin-bottom:10px;
	}
	
/*--------------------------------------------------------------------------------*/

/*--- Styles for the contact form ---*/

div.contact-us-form{
	float:left;
	width:530px;
	padding:10px 0px 0px 10px;
	font: 0.75em Arial, Helvetica, sans-serif;
	color:#3B0084;
}

div.contact-form-left{
	float:left;
	}
	
div.contact-form-right{
	float:left;
	padding-left:10px;
	}	

div.form-element-row{
	float:left;
	width:250px;
	clear:both;
	padding-bottom:10px;
}
	
div.contact-us-form-label{
	float:left;
}

div.contact-us-form-input{
	float:right;
	text-align:left;
	width:150px;
}

#message{
	height:100px;
}


div.contact-optin-tick{
	float:left;
	padding: 5px 5px 0px 5px;
}

div.contact-optin-label{
	float:left;
	width:500px;
	}

div.contact-alt{
	float:left;
	width:500px;
	clear:both;
}

div.contact-alt-hdr{
	color:#5a7bb5;
	margin-top:15px;
}	

div.contact-alt-tel{
	width:250px;
	float:left;
	margin-top:10px;
	padding-top:10px;
	verticle-align:middle;
}

div.contact-alt-post{
	width:250px;
	float:left;
	margin-top:10px;
	padding-top:10px;
	verticle-align:middle;
}

.icon{
	float:left;
	margin-top:-10px;
}
/*--------------------------------------------------------------------------------*/

/*--- Styles for privacy and T&C's ---*/

div.terms-header{
	clear:both;
	float:left;
	width:553px;
	border-bottom:1px solid #666666;
	padding-bottom:20px;
	}

div.terms-copy{
	clear:both;
	float:left;
	width:553px;
	padding-top:20px;
}

div.terms-b-t-t{
	clear:both;
	float:left;
	width:553px;
}
/*--------------------------------------------------------------------------------*/

/*--- styles for hsn registration, other styles used are from commercials see above ---*/

div.hsn-form{
	float:left;
	clear:both;
	padding-left:95px;
	width:350px;
}	

div.hsn-form-txt{
	float:left;
	clear:both;
	padding: 0px 0px 10px 0px;
	font: 0.65em Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	}

div.hsn-form-row{
	clear:both;
	font: 0.75em Arial, Helvetica, sans-serif;
	color:#FFFFFF;
}

div.hsn-form-label{
	float:left;
	}

div.hsn-form-label2{
	float:left;
	clear:both;
	padding-bottom:5px;
	}	
	
div.hsn-form-input{
	float:right;
	}

div.hsn-form-input input, div.hsn-form-input select{
	width:210px;
	margin-bottom:10px;
	}	
	
div.hsn-optin-input{
	float:left;
	}
	
div.hsn-optin-label{
	float:left;
	margin-left:10px;
	font-size:0.9em;
	width:320px;
	}	
	
div.hsn-submit{
	float:right;
	clear:both;
	margin-top:20px;
	}	
	
div.hsn-hdr-pic{
	float:left;
	width:535px;
	clear:both;
	text-align:center;
}

div.hsn-intro{
	float:left;
	width:535px;
	clear:both;
	padding: 10px 0px 20px 20px;
}

div.hsn-intro li{
	list-style:square;
	font: 0.75em Arial, Verdana, Helvetica, sans-serif;
	color: #3A0184;
}

div.hsn-intro ul{
	list-style-position: inside;
}
div.hsn-logos{
	clear:both;
	padding-top:10px;
	text-align:center;
}

div.clearAll {
	clear:both;
	height: 2px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;	
}

/* TV-commerical lightbox */
div#TVCTop {
 	width: 278px;
	height: 54px;
	background-image: url(../images/nl/tvc_top.gif);
	background-repeat: no-repeat;
	margin-left: 58px;
	margin-bottom: 9px;
}

div#TVCFlash {
	margin-left: 40px;
}