/*
Fonts CSS for site
by Simon Pollard - Deckchair UK Ltd
http://deckchair.co.uk
*/

/* Font Families */
/*----------------------------------------------------------------------------*/
body {
	font-family: Verdana, Myriad Web Pro, Geneva, Lucida Grande, Helvetica, sans-serif;
}

span.alpha{
	font-family: Arial, Myriad Web Pro, Geneva, Lucida Grande, Helvetica, sans-serif;
}


/*
{
	font-family: Georgia, Times New Roman, serif;
}
*/

/* Font Sizes */
/*----------------------------------------------------------------------------*/
/*font resizing calculation*/
body{
font-size: 62.5%;
}



h1
    {
     font-size: 2.8em;
    }

h2,
    {
     font-size: 2.4em;
    }

h3,div#content_title h2, #nav_sub h2
    {
     font-size: 2em;
    }

h4
    {
     font-size: 1.8em;
    }

h5,div#nav_sub h3
    {
     font-size: 1.6em;
    }

h6, div#content_sub h3#small_questions_title,
div#intro_text h4,
div#main_content div#nav_sub h2,
div#content a#start_tutorial
    {
     font-size: 1.4em;
    }

div#nav_sub dt
    {
     font-size: 1.25em;
    }

p, blockquote, strong, ul, ol, dl, a, div#content_sub h3,
table.equation td
    {
     font-size: 1.2em;
    }

div#content_sub p, #content_sub a, div#footer_logo_container, div#content_sub ul
    {
     font-size: 1.1em;
    }

div#nav_sub dl dd a, #content_area a, em
    {
     font-size: 1em;
    }

p.small_reaction,
div#content_area table.equation.sml {
	font-size: 0.9em;
}

div#nav_footer ul li
    {
     font-size: .8em;
    }

dt#word a{
     font-size: .7em;
}


div#footer_logo_container
    {
     font-size: .5em;
    }


/* FONT COLOURS */
/*----------------------------------------------------------------------------*/

div#nav_main ul li a,
div#nav_sub h2 a,
div#nav_sub dd#nav_sub_sel a,
div#content a#start_tutorial
{/* White */
color: #FFF;
}

div#nav_sub dl dd a,
#nav_sub dt#word a{/* Dark Grey */
color: #4a4a4a;
}

{/* Black */
color: #000;
}

div#intro_text ul,
div#intro_text h4{
color: #5b217c;
}




div#content_title h2, div#nav_sub dt
{/* Purple */
color: #67268c;
}

#content_area a, #content_sub a {
	color: blue;
}



/* product colours */


body.calgon div#content_sub h3#content_sub_title, body.calgon div.answer h3, body.calgon #nav_sub dt a
{/* Orange */
color: #2797e7;
}

body.cillit_bang div#content_sub h3#content_sub_title, body.cillit_bang div.answer h3, body.cillit_bang #nav_sub dt a
{/* Orange */
color: #BE18BC;
}

body.dettol div#content_sub h3#content_sub_title, body.dettol div.answer h3, body.dettol #nav_sub dt a
{/* Orange */
color: #dc5901;
}

body.finish div#content_sub h3#content_sub_title, body.finish div.answer h3, body.finish #nav_sub dt a
{/* Orange */
color: #0A2472;
}

body.gaviscon div#content_sub h3#content_sub_title, body.gaviscon div.answer h3, body.gaviscon #nav_sub dt a
{/* Orange */
color: #066589;
}

body.harpic div#content_sub h3#content_sub_title, body.harpic div.answer h3, body.harpic #nav_sub dt a
{/* Orange */
color: #A72C35;
}

body.nurofen div#content_sub h3#content_sub_title, body.nurofen div.answer h3, body.nurofen #nav_sub dt a
{/* Orange */
color: #FF1700;
}

body.vanish div#content_sub h3#content_sub_title, body.vanish div.answer h3, body.vanish #nav_sub dt a
{/* Orange */
color: #D5167E;
}

body.veet div#content_sub h3#content_sub_title, body.veet div.answer h3, body.veet #nav_sub dt a
{/* Orange */
color: #E16487;
}

{/* Grey */
color: #7f7f7f;
}

{/* Grey Blue*/
color: #3f667f;
}


/* FONT WEIGHTS */
/*----------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6, dt,
div.intro_video p.video_caption,
div#intro_text ul,
div#main_content div#nav_sub h2,
a#start_tutorial
{
font-weight: 700;
}
div#nav_sub h2,
#nav_sub dt#word a
{
font-weight: normal;
}



/* TEXT ALIGNMENT */
/*----------------------------------------------------------------------------*/

div.intro_video p.video_caption
{
  text-align: center;
}

p {
  text-align: justify;
}


/* TEXT DECORATION */
/*----------------------------------------------------------------------------*/
#content_area a, div#nav_sub h2 a, #nav_sub dt a, #content_sub a {
text-decoration: none;
}
a:focus, #content_area a:hover, div#nav_sub h2 a:hover, #nav_sub dt a:hover, #content_sub a:hover {
	text-decoration: underline;
}

/* LINE HEIGHT */
/*----------------------------------------------------------------------------*/
p, em, blockquote, strong, ul, ol, dl
    {
     line-height: 1.6em;
    }

div#nav_sub dl{
 line-height: 1.8em;
}


/* -9999px */
/*----------------------------------------------------------------------------*/
.button{
display:block;
font-size:0;
line-height:0;
text-indent:-9999px;
}