/* CSS Style for Cillit Bang Website */

/* Remove default padding from commonly used elements so that we may define our own. */
* { font-family:arial,verdana,sans-serif; }
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, li, p, form, input, select {
    margin:0;
    padding:0;
}

body{ background-color:#EFEFEF; }

a { outline:0; }
img { border:0; }


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

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

a { color:#3A0184; text-decoration:underline; }
    a:hover { color:#FF7A4D; }

h1{ font-size:2em; }
h2{ font-size:1.8em; }
h3{ font-size:1.5em; }

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

/* Clearing div style */
div.clear{ clear:both; }
/* ------------------------------------------------------------------------------------------------------------------ */
/*--- main container div stlyes ---*/
table.outer-table{
	margin:0;
	padding:0;
	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 0 10px 15px;
	}

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

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

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

#topnav-menu li{
	float:left;
	padding-right:5px;
	color:#FFF;
}
#topnav-menu li span { position:relative; top:2px; }

/*--- 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{
	color:#edeaf1;
	font-weight:bold;
	text-decoration:none;
	font-size:0.66em;
	}	

div.header-nav a:hover{
	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:466px; /*--- doesn't work in explorer fix below ---*/
	background-color:#3b0084;
	background:#3b0084 url(/images/fr/home_bg.jpg) no-repeat 0 0;
	text-align:left;
	}
/*--- for ie as ie doesn't regonise min-height a height must be set ---*/
div.content-container{ height:505px; }

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

/*--- 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{
	position:absolute;
	z-index:18;
	top:18px;
	left:100px;
	width:86px;
	height:83px;
}


div.home-penny-animation02{ float:left; }	


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

div.home-competition{
	position:absolute;
	z-index:2;
	top:3px;
	left:9px;
	width:257px;
	height:274px;
	background:url(/images/fr/home-comp.jpg) no-repeat 0 0;
}

div.subTitle{
	position: absolute;
	z-index: 20;
	left: 510px;
	top: 30px;
	width: 207px;
	height: 49px;
}

div.home-inaction-btn{
	position:absolute;
	z-index:20;
	top:100px;
	left:45px;
	width:205px;
	height:34px;

}


div.packshot1{
	position:absolute;
	z-index:60;
	top:160px;
	left:678px;
	width:62px;
	height:216px;
	}

div.packshot2{
	position:absolute;
	z-index:12;
	top:118px;
	left:463px;
	width:62px;
	height:218px;
}

div.packshot3{
	position:absolute;
	z-index:9;
	top:106px;
	left:516px;
	width:65px;
	height:224px;
}



div.packshot4{
	position:absolute;
	z-index:10;
	top:117px;
	left:540px;
	width:65px;
	height:231px;
}

div.packshot5{
	position:absolute;
	z-index:10;
	top:135px;
	left:597px;
	width:65px;
	height:231px;
}

div.packshot6{
	position:absolute;
	z-index:11;
	top:150px;
	left:625px;
	width:69px;
	height:172px;
}

div.homeLegalStuff{
	position:absolute;
	z-index:90;
	top:98px;
	left:747px;
	width:22px;
	height:99px;
}

div.homeNew{
	position:absolute;
	z-index:1000;
	top:115px;
	left:625px;
	width:22px;
	height:99px;
}

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

div.home-callout-holder{
	position:relative;
	z-index:50;
	margin:285px 0 0 105px;
	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:#FFF;
	}	

div.home-callout-txt a, div.home-callout-txt a:hover{
	color:#FFF;
	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-left:50px;
	width:110px;
	background-color:#3b0084;	
}

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

div.home-callout4{
	position:relative;
	float:left;
	margin:25px 0 0 50px;
	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:url(/images/fr/leftnav-grad-bg.gif) repeat-y top right;
}

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:0;
	padding:0;
}

#leftnav-menu a {
	color: #FFF;
	text-decoration: underline;
}

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

#leftnav-menu li{
	float:left;
	color:#FFF;
	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 0 10px 0;
	}

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

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

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

div.products-packs{
	float:left;
	width:493px;
	padding-left:10px;
	padding-top:20px;
	padding-bottom:20px;
}



div.products-intro ul { font-size:0.75em; color: #3A0184; margin-left:15px; }

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

.product-range-hdr{
	clear:both;
	width:520px;
    list-style:none;
}
    .product-range-hdr li {
        float:left;
        margin:0 2px;
    }
        .product-range-hdr li a {
            text-indent:-3000px;
            display:block;
            width:250px;
            min-height:71px; _height:71px;
        }
        #old-sol a { background:url(/images/fr/prod-old-call-on.gif) no-repeat 0 0; }
        #new-sol a { background:url(/images/fr/prod-new-call.gif) no-repeat 0 0; }

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:120px;
	text-align:center;
}		
	
div.product-txt{
	float:right;
	width:380px;
	padding-bottom:10px;
	border-bottom:1px solid #666;
}

	

/*--- list style for product details tick ands crosses ---*/
	ul.product-tick li{
	float:left;
	clear:both;
	margin-left:0;
	background:url(/images/fr/check.gif) no-repeat top left;
	list-style: none inside;
	width:380px;
	}
	
	div.product-txt ul{
	float:left;
	clear:both;
	font-size:0.75em;
	color:#3B0084;
	margin-bottom:10px;
	}
	
	div.product-txt li{
	float:left;
	clear:both;
	padding-left:0;
	margin-left:0;
	}
	
	ul.product-cross li{
	float:left;
	clear:both;
	margin-left:0;
	background:url(/images/fr/x_mark.gif) no-repeat 0 0;
	list-style: none inside;
	width:380px;
}	

div.product-bullets{ clear:both; }

span.product-title{ font: italic bold 1.5em Arial, Verdana, 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-copy p.legal{
	font-size: 10px;
}

div.solution-finder-packshots{
	float:center;
	padding-left:80px;
	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:#FF39FF url(/images/fr/sol_finder_btm.gif) no-repeat bottom;
	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:#FFF;
}

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:#3B0084 url(/images/fr/commercial_btm.gif) no-repeat bottom;
	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, Verdana, sans-serif;
	color:#FFF;
	}

span.commercial-copy{
	font: italic bold 0.98em/1.2em Arial, Verdana, sans-serif;
	color:#F3F;
	letter-spacing:0.06em;
	}
	
span.commercial-copy-sub{
	font: italic bold 0.9em Arial, Verdana, sans-serif;
	color:#FFF;
	}	


/*--- Style for inaction non-flash video alternative popups ---*/

.popup {
	position: absolute;
	top: 130px;
	left: 360px;
	border: 3px solid #fff;
	background-color: #5a7bb5;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	min-height: 200px;
	width: 300px;
	z-index: 20px;
}

.popup a {
	color: #fff;
	font-size: 10px;
	text-decoration: none;
}

.popup .close {
	float: right;
	padding: 5px 5px 0 0;
}

.popup img {
	padding: 5px 10px;
}

.popup .copy {
	height: 30px;
	margin: 0 auto 10px;
	text-align: center;
	width: 260px;
}

.popup .purple {
	color: #f3f;
}

.popup .prevNext {
	font-size: 10px;
	padding: 0 10px 5px;
	text-align: center;
}

.popup .prev {
	float: left;
}

.popup .start {
	margin: 0 auto;
	padding-left: 10px;
	width: 100px;
}

.popup .next {
	float: right;
	margin-top: -12px;
}




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

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

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

}

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 #666;
	padding-bottom:10px;

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

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

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

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

span.faq-questionheader{
	font-weight:bold;
    font-size:1em/2em;
	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 #666;
	}
	
div.contact-us-txt{
	clear:both;
	float:left;
	width:530px;
}	

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

#contact-us-list li{
	font-size:0.75em;
	color:#3B0084;
	margin-bottom:10px;
	}
	
/*--------------------------------------------------------------------------------*/

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

div.contact-us-form{
	float:left;
	width:530px;
	padding:10px 0 0 10px;
	font-size:0.75em;
	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 0 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 #666;
	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: 0 0 10px 0;
	font-size:0.65em;
	color:#FFF;
	}

div.hsn-form-row{
	clear:both;
	font-size:0.75em;
	color:#FFF;
}

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 0 20px 20px;
}

div.hsn-intro li{
	list-style:square;
	font-size:0.75em;
	color: #3A0184;
}

div.hsn-intro ul{
	list-style-position: inside;
}

div.hsn-logos{
	clear:both;
	padding-top:10px;
	text-align:center;
}