/*

Main CSS for site

by Simon Pollard - Deckchair UK Ltd

http://deckchair.co.uk

*/



/*

Sticky Footer Solution by Steve Hatcher

http://www.cssstickyfooter.com

*/



/* RESET */

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

* {

	padding: 0;

	margin: 0;

	}



/* must declare 0 margins on everything, also for main layout components use padding, not

vertical margins (top and bottom) to add spacing, else those margins get added to total height

and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */





/* CLEAR FIX*/

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



html, body, #wrap {height: 100%;}



body > #wrap {height: auto; min-height: 100%;}



#main {padding-bottom: 100px;}  /* must be same height as the footer */





.clearfix:after

    {

    content: ".";

	display: block;

	height: 0;

	clear: both;

	visibility: hidden;}

    .clearfix {display: inline-block;}

    /* Hides from IE-mac \*/

    * html .clearfix { height: 1%;}

    .clearfix {display: block;

    }

    /* End hide from IE-mac */



#footer

    {

    position: relative;

	margin-top: -100px; /* negative value of footer height */

	height: 100px;

    }



ul {

	margin-left: 15px;

}



object {

	overflow: hidden;

	border: 0px;

	margin: 0px;

	padding: 0px;

}





/* CENTERING & GENERAL SETUP */

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



/*body

    {

    background: #FFF url('./../graphics/bg_body.png') top repeat-y;

    } */



div#main_content{

	width: 940px;

    padding: 10px;

	margin-left: auto;

	margin-right: auto;

    }



div#masthead_content {

	width: 940px;

	margin-left: auto;

	margin-right: auto;

    height: 175px;

    margin-bottom: 20px;

    }



a img {

	border: none;

}



.right {

	float: right;

	clear: both;

}



body.index{

background: url('./../graphics/bg_tile_masthead_index.png') top left repeat-x;

}



body.terms,

body.about{

background: url('./../graphics/bg_tile_masthead_general.png') top left repeat-x;

}



body.calgon{

    background: url('./../graphics/bg_tile_masthead_calgon.png') top left repeat-x;

}



body.cillit_bang{

    background: url('./../graphics/bg_tile_masthead_cillit.png') top left repeat-x;

}



body.dettol{

    background: url('./../graphics/bg_tile_masthead_dettol.png') top left repeat-x;

}



body.finish{

    background: url('./../graphics/bg_tile_masthead_finish.png') top left repeat-x;

}



body.gaviscon{

    background: url('./../graphics/bg_tile_masthead_gaviscon.png') top left repeat-x;

}



body.harpic{

    background: url('./../graphics/bg_tile_masthead_harpic.png') top left repeat-x;

}



body.nurofen{

    background: url('./../graphics/bg_tile_masthead_nurofen.png') top left repeat-x;

}



body.vanish{

    background: url('./../graphics/bg_tile_masthead_vanish.png') top left repeat-x;

}



body.veet{

    background: url('./../graphics/bg_tile_masthead_veet.png') top left repeat-x;

}







body.index div#masthead_content,

body.terms div#masthead_content,

body.about div#masthead_content{

  background: url('./../graphics/bg_masthead_index.jpg') top no-repeat;

}





body.calgon div#masthead_content{

  background: url('./../graphics/bg_masthead_calgon.jpg') top no-repeat;

}





body.cillit_bang div#masthead_content{

    background: url('./../graphics/bg_masthead_cillit.jpg') top no-repeat;

}



body.dettol div#masthead_content{

    background: url('./../graphics/bg_masthead_dettol.jpg') top no-repeat;

}





body.finish div#masthead_content{

    background: url('./../graphics/bg_masthead_finish.jpg') top no-repeat;

}



body.gaviscon div#masthead_content{

    background: url('./../graphics/bg_masthead_gaviscon.jpg') top no-repeat;

}



body.harpic div#masthead_content{

    background: url('./../graphics/bg_masthead_harpic.jpg') top no-repeat;

}



body.nurofen div#masthead_content{

    background: url('./../graphics/bg_masthead_nurofen.jpg') top no-repeat;

}



body.vanish div#masthead_content{

    background: url('./../graphics/bg_masthead_vanish.jpg') top no-repeat;

}



body.veet div#masthead_content{

    background: url('./../graphics/bg_masthead_veet.jpg') top no-repeat;

}







body.index div#masthead,

body.terms div#masthead,

body.about div#masthead{

  background: url('./../graphics/bg_masthead_mask_index.png') top no-repeat;

}



body.calgon div#masthead{

  background: url('./../graphics/bg_masthead_mask_calgon.png') top no-repeat;

}





body.cillit_bang div#masthead{

    background: url('./../graphics/bg_masthead_mask_cillit.png') top no-repeat;

}



body.dettol div#masthead{

    background: url('./../graphics/bg_masthead_mask_dettol.png') top no-repeat;

}





body.finish div#masthead{

    background: url('./../graphics/bg_masthead_mask_finish.png') top no-repeat;

}



body.gaviscon div#masthead{

    background: url('./../graphics/bg_masthead_mask_gaviscon.png') top no-repeat;

}



body.harpic div#masthead{

    background: url('./../graphics/bg_masthead_mask_harpic.png') top no-repeat;

}



body.nurofen div#masthead{

    background: url('./../graphics/bg_masthead_mask_nurofen.png') top no-repeat;

}



body.vanish div#masthead{

    background: url('./../graphics/bg_masthead_mask_vanish.png') top no-repeat;

}



body.veet div#masthead{

    background: url('./../graphics/bg_masthead_mask_veet.png') top no-repeat;

}





div#footer_content {

	width: 940px;

    padding: 5px 10px 5px 10px;

	margin-left: auto;

	margin-right: auto;

    }



#footer

    {

    position: relative;

	margin-top: -100px; /* negative value of footer height */

	height: 100px;

	clear:both;

    background: #FFF url('./../graphics/bg_footer.png') top left repeat-x;

    }







div#footer_content {

      height: 20px;

    }





/* COMMON ELEMENTS */

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



/* HEADERS */



h1, h2, h3, h4, h5, h6

{

margin-bottom: 10px;

}



/* BODY TEXT */



p, blockquote

    {

    margin-bottom: 10px;

    }



/* ANCHORS */

a

    {

      outline: none;

    }



a:hover

    {

    cursor: pointer;

    cursor: hand;

    }





a.no_line

    {

    text-decoration: none;

    }

a.no_line:hover

    {

    text-decoration: underline;

    }





/* LISTS */

.no_bullet

    {

    list-style-type: none;

    }



ul

    {

      list-style: inside;

    }



ol

    {

    margin-left: 30px;

    }



/*

ul, ol, dl

    {

    margin-bottom: 20px;

    }

*/



/* MASTHEAD */

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



h1#logo {

position:relative;

top:15px;

left:0;

}



h1#logo a {

display:block;

height:120px;

width:350px;

}



h1#logo a img{

border:medium none;

top:0;

left:0;

position:absolute;



}



/* NAVIGATION */

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

div#nav_main ul{

position: relative;

top: 15px;

width: 960px;

height: 30px;

background: #521e70 url('./../graphics/bg_nav_main.png') top left repeat-x;

margin-bottom: 0;

}



div#nav_main ul li{

  padding: 5px 10px 5px 10px;

  float: left;

  list-style: none;

  height: 20px;

}



div#nav_main ul li a,

div#nav_sub dl dd a{

text-decoration: none;

}



div#nav_main ul li a:hover, div#nav_sub dl dd a:hover{

text-decoration: underline;

}



body.calgon div#nav_main ul li.calgon_link, body.cillit_bang div#nav_main ul li.cillit_link, body.dettol div#nav_main ul li.dettol_link, body.finish div#nav_main ul li.finish_link, body.harpic div#nav_main ul li.harpic_link, body.gaviscon div#nav_main ul li.gaviscon_link, body.nurofen div#nav_main ul li.nurofen_link, body.vanish div#nav_main ul li.vanish_link, body.veet div#nav_main ul li.veet_link {

	background: url(../graphics/selected_link.gif) no-repeat bottom center;

}



div#nav_sub{

float:left;

width: 220px;

background: #FFF url('./../graphics/bg_nav_sub.png') 0px 0px repeat-y;

margin-bottom: 20px;

}



div#nav_sub h2{

  background: url('./../graphics/bg_nav_sub_top.png') top left no-repeat;

  width:210px;

  height:31px;

  padding: 7px 0 0 10px;

  margin-bottom: 0;

}



div#nav_sub dl{

  background: url('./../graphics/bg_nav_sub_product_dettol.jpg') top left no-repeat;

}



div#nav_sub dt{

    background: url('./../graphics/bg_nav_sub_title.png') left no-repeat;

    text-indent: 0px;

    padding: 5px 0px 8px 10px;

}



div#nav_sub dd{

 text-indent: 0px;

 margin-top: 10px;

 padding: 0 10px 0px 10px;



}



div#nav_sub dd#nav_sub_sel{

  background:  url('./../graphics/bg_nav_sub_sel.png') left no-repeat;

}



div#nav_sub_base{

  display: block;

  font-size: 0;

  width: 214px;

  height:6px;

  background:  url('./../graphics/bg_nav_sub_base.png') top left no-repeat;

}



div#nav_content_base{

  width: 700px;

  padding: 10px 0 20px 0;

  float: right;

  clear: both;

  border-top:1px solid #E1D4E8;

}





div.nav_content_section{

  float: right;

  width: 60px;

}



div.nav_content_section a.prev,div.nav_content_section a.next{

  width: 26px;

  height: 25px;



}



div.nav_content_section a.prev{

  background: url('./../graphics/bg_nav_content_section_prev.png') top left no-repeat;

  float: left;

}



div.nav_content_section a.next{

  background: url('./../graphics/bg_nav_content_section_next.png') top left no-repeat;

  float: right;

  margin: 0 0 0 5px;

  }



div#nav_footer{

  padding: 25px 0 0 0;

  float: right;

}



div#nav_footer ul{

list-style: none;

}



div#nav_footer ul li{

display: inline;

}



div#nav_footer ul li a{

text-decoration: none;

}



#nav_sub dt#word {

  padding-top: 10px;

}



#nav_sub dt#word a{

  padding: 5px 0 5px 30px;

  background: url('./../graphics/bg_word_doc.png') top left no-repeat;

}





/* CONTENT */

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

div#content{

  float: right;

  width: 700px;

}



div#content.home,

div#content.terms,

div#content.terms div#content_area{

  float: left;

  width: 960px;

}



div#content.home div#content_area{

  float: left;

  width: 770px;

  margin: 0 90px 0 90px;

}



div#content.home div#content_title,

div#content.terms div#content_title{

  border-bottom: solid 1px #e1d4e8;

  float: left;

  clear: left;

}



div#content.terms div#content_title{

  width: 960px;

  margin: 0px 0px 20px 0px;

}



div#content.home div#content_title{

  width: 770px;

  margin: 0px 90px 20px 90px;

}





div#content.home div#nav_flash{

  height: 407px;

  background: url('./../graphics/bg_nav_flash.png') top left repeat-y;

  margin-bottom: 20px;

}



div#content.home div#nav_flash object{

margin: 0 0 0 90px;

}





div#content_title{

  border-bottom: solid 1px #e1d4e8;

  float: left;

  clear: left;

  width: 700px;

  margin: 0 0 20px 0;

  padding: 0 0 10px 0;

}



div#content_title h2{

  float: left;

  margin: 0;

}



div#content_area{

  float: left;

  width: 455px;

  /*padding-right: 15px;*/

}



#content_area ul, #content_area ol {

	margin-bottom: 10px;

}



.narrow_questions #content_area {

  	width: 455px;

}

.wide_questions #content_area {

	width: 335px;

}

.no_activity #content_area {

	width: 705px;

}



#content_area table {

	width: 100%;

	font-size: 12px;

	text-align: center;

	border-collapse: collapse;

	background-color: #FFF;

}

#content_area table th {

	border-bottom: 1px solid #000;

	border-top: 1px solid #000;

	padding: 7px;

}

#content_area table td {

	padding: 5px;

}

#content_area table tr.alt {

	background-color: #F1F1F1;

}

#content_area table th.brd, #content_area table td.brd {

border-left:1px solid #000000;

}





div.reaction_quote_mid {

	width: 335px;

	height: 40px;

	overflow: auto;

	border: 1px solid #DFDFDF;

	margin-bottom: 10px;

}

div.reaction_quote_mid div {

	height: 17px;

	white-space: nowrap;

}



div.image_holder_small, div.image_holder_large, div.image_holder_xlarge {

	text-align: center;

	background-color: #F4F4F4;

	margin-bottom: 20px;

	margin-top: 20px;

}

div.image_holder_small {

	width: 335px;

}

div.image_holder_large {

	width: 455px;

}

div.image_holder_xlarge {

  width: 705px;

}

div.image_holder_small p,

div.image_holder_large p,

div.image_holder_xlarge p,

div.image_holder_wide p {

	padding: 5px;

  	background-color: #dfdfdf;

  	font-weight: 700;

}



div.image_holder_wide {

    margin-left: 2px;

}





.image_holder_large p.list {

	background-color: #FFF;

	font-weight: normal;

	margin-bottom: 0px;

}

.image_holder_xlarge p.list {

	background-color: #FFF;

	font-weight: normal;

	margin-bottom: 0px;

}

div.image_holder_small p {

  	width: 325px;

	background-color: #521E70;

	color: #FFF;

	text-align: center;

}

div.image_holder_large p {

  	width: 445px;

	background-color: #521E70;

	color: #FFF;

	text-align: center;

}

div.image_holder_xlarge p {

  	width: 695px;

	background-color: #521E70;

	color: #FFF;

	text-align: center;

}



div.image_holder_large_scroll {

	width: 455px;

	overflow: auto;

	padding-bottom: 20px;

}

div.image_holder_small_scroll {

	width: 325px;

	overflow: auto;

	padding-bottom: 20px;

}



/*

Side Bar

*/

div#content_sub{

float: right;

 margin-bottom: 20px;

}

#content_sub p {

	margin: 0px;

}



.narrow_questions #content_sub {

  width: 220px;

}

.wide_questions #content_sub {

	width: 340px;

}



#content_sub iframe {

	margin-left: 10px;

}



div#wide_questions{

  background: #f4f4f4 url('./../graphics/bg_content_sub_wide.png') top left repeat-y;

  margin-bottom: 20px;

}

div#wide_questions_base{

  background: #f4f4f4 url('./../graphics/bg_content_sub_wide_base.png') top left no-repeat;

  height: 33px;

  width: 340px;

}

div#wide_questions h3#wide_questions_title,

div#wide_questions div#wide_questions_title

{

  background: #f4f4f4 url('./../graphics/bg_content_sub_wide_top.png') top left no-repeat;

  padding: 12px 0 0 15px;

}



div#wide_questions h3.open{

  background: #f4f4f4 url('./../graphics/bg_content_sub_wide_title_open.png') top left no-repeat;

    padding: 12px 0 0 15px;

    margin-bottom: 0;

    height: 22px;

}

div#wide_questions h3.closed{

  background: #f4f4f4 url('./../graphics/bg_content_sub_wide_title_closed.png') top left no-repeat;

    padding: 12px 0 0 15px;

    margin-bottom: 0;

    height: 22px;

}

div#wide_questions p{

  padding: 5px 15px 5px 15px;

  margin: 0px;

}



#wide_questions div.reaction_quote_mid {

	width: 310px;

	overflow: auto;

	border: 1px solid #DFDFDF;

	margin-bottom: 10px;

	margin-left: 10px;

}

#wide_questions div.reaction_quote_mid div {

	white-space: nowrap;

}

#wide_questions div.reaction_quote_mid div p {

	margin: 0px;

	padding: 0px;

}

#wide_questions .reaction_img_mid {

	width: 310px;

	overflow: auto;

	border: 1px solid #DFDFDF;

	margin-bottom: 10px;

	margin-left: 10px;

	padding-bottom: 20px;

}



div#small_questions{

  background: #f4f4f4 url('./../graphics/bg_content_sub.png') top left repeat-y;

}

div#small_questions_base{

  background: #f4f4f4 url('./../graphics/bg_content_sub_base.png') top left no-repeat;

  height: 33px;

  width: 220px;

}

div#small_questions h3#small_questions_title{

  background: #f4f4f4 url('./../graphics/bg_content_sub_top.png') top left no-repeat;

  padding: 12px 0 0 15px;

}



div.question h3,div.answer h3{

  background: #f4f4f4 url('./../graphics/bg_content_sub_title.png') top left no-repeat;

    padding: 12px 0 0 15px;

    margin-bottom: 0;

    height: 22px;

}



div#small_questions h3.open{

  background: #f4f4f4 url('./../graphics/bg_content_sub_title_open.png') top left no-repeat;

    padding: 12px 0 0 15px;

    margin-bottom: 0;

    height: 22px;

}



div#small_questions h3.closed{

  background: #f4f4f4 url('./../graphics/bg_content_sub_title_closed.png') top left no-repeat;

    padding: 12px 0 0 15px;

    margin-bottom: 0;

    height: 22px;

}



div#small_questions p{

  padding: 5px 15px 5px 15px;

  margin: 0px;

}

div#small_questions ul {

  padding: 10px 15px 10px 0px;

}

#small_questions .reaction_img_small {

	width: 200px;

	overflow: auto;

	border: 1px solid #DFDFDF;

	margin-bottom: 10px;

	margin-left: 10px;

	padding-bottom: 20px;

}



div.answer img {

	margin-left: 10px;

	margin-top: 10px;

}



div.answer img.equation {

	margin: 0px;

}



object#testing3d {

	border: none;

	scroll: no;

	overflow: hidden;

}



/* MOL VIEWER */

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



div#mol_view_wide{

  background: #f4f4f4 url('./../graphics/bg_content_sub_wide.png') top left repeat-y;

  margin-bottom: 5px;

}



div#mol_view_wide object{

  margin-left: 12px;

}



div#mol_view_wide_base{

  background: #f4f4f4 url('./../graphics/bg_content_sub_wide_base.png') top left no-repeat;

  padding-top: 5px;

  height: 28px;

  padding-left: 10px;

  width: 330px;

}





div#mol_view_wide h3#mol_view_wide_title{

  background: #f4f4f4 url('./../graphics/bg_content_sub_wide_top.png') top left no-repeat;

  padding: 12px 0 0 15px;

}



/* FOOTER */

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







div#footer_logo_container{

  position: relative;

width: 265px;

float: left;

}





h2#logo_reckit_benckiser {

position:absolute;

top:10px;

right:0;

margin: 0;

}



h2#logo_reckit_benckiser a {

display:block;

width:83px;

height:37px;

}



h2#logo_reckit_benckiser a img{

border: none;

position:absolute;

top:0;

left:0;

}



h2#logo_rsc {

position:absolute;

top:20px;

left:0px;

}



h2#logo_rsc a {

display:block;

height:22px;

width:151px;

}



h2#logo_rsc a img{

border: none;

position:absolute;

top:0;

left:0;

}



div#wide_questions table.equation{

 margin-left: 15px;

}



table.equation{

  width: 220px;

}



table.equation.wide{

  width: 280px;

}



table.equation.xwide{

  width: 300px;

}



table.equation.xxwide{

  width: 500px;

}



table.equation{

  text-align:center;

}



table.equation td{

  padding: 3px;

}





table.equation td.line{

  border-bottom: 1px solid #000;

}



/* INTRO VIDEO */

div#intro_text{

width: 340px;

float: left;

}



div.intro_video{

  float: right;

}



div.intro_video p.video_caption{

  padding: 10px;

  background-color:#e8e7e8;

}



a#start_tutorial{

  width: 170px;

  height: 28px;

  display: block;

  background: #f4f4f4 url('./../graphics/bg_tutorial_button.png') top left no-repeat;

  padding: 10px 0 0 28px;

  margin-bottom: 20px;

}