/*
 * Project Name    : CTS
 * Project Number  : P117011
 * Unit Name       : master.css
 * Description     : Cascading stylesheet file for CTS. All general,
 *                   styles are defined in here.
 *
 */

/***************** Import button.css , results.css and layout.css  ***********************/ 
@import "layout.css" ;
@import "button.css" ;
@import "results.css" ;


/*-----------------Body ------------------------------------------------------------------*/

/* Setting up margin and padding's initial value  to 0 */
*{margin:0;padding:0}

/* Standard document body*/ 
/* @todo Put font properties into the body tag so they are not repeated in all classes */
body{
	font:62.5%/1 Arial,Helvatica,sans-serif;
}

/* horizontal Ruler line which seperate 2 sub sections or a subsection with a button*/
.hr{
  position:relative;
  height:1px;
  margin:.8em 0em .8em 0em;
  background:url(images/hr.png) repeat-x 0 95%;
}

/* Standard Heading Level 2 - used for 2nd level heading*/ 
h2 {
	font-size:18px;
	font-weight:bold;
	padding-top: 0em;
}

/* Style to produce a line gap with the specified height*/
.brSpace {
	line-height:1em;
}

/* Style to make a paragraph text as bold */
p.bold{
	font-weight:bold;
}


/*-------------------Misc(links)----------------------------------------------- */

/* style for a link*/
a{text-decoration:none}
/* style to change the apperance of the link if the mouse is moved over*/
a:hover{text-decoration:underline}


/* ------------------Header----------------------------------------------- */

/*standard header declaration used in all the pages*/
/*HeaderNew.gif*/
/*Changes for WR0797*/
#header{
	background:#5ba82b;
	height:173px;
	position:relative;
	background:#fff url(images/CFEB_Final_Banner.PNG) no-repeat 0px 0px; 
	/*Margin left of -5px included to make the header constant with Moneymadeclear site */
  margin-left:0px;
  margin-top:4px;
}


#header img{
 	position:absolute;
 	left:720px;
	
}

#headerlinks{
	margin-left:0px;
	margin-top:4px;
	margin-bottom:4px;
	padding:4px 4px 4px 4px;
	position:relative;
	height:8px;
	text-align:left;
	font-size:12px;
	}

#headerlinks li{
	display:inline;
	color:black;
}

#headerlinks a{
	color:black;
}

#headerlinksright{
	margin-top:4px;
	position:absolute;
	top:5px;
	right:40px;
	font-size:12px;
	text-align:right;
	color:black;
}

#headerlinksright a{
	color:black;
	}

/* styles given to Heading level 2 header section for WR0797*/
#header h2{
	position:absolute;
	left:27px;
	top:100px;
	font-size:29px;
	font-weight:Bold;
	color:#fff;
}

/* styles given to Heading level 3 header section for WR0797*/

#header h3{
	position:absolute;
	left:27px;
	top:135px;
	font-size:18px;
	font-weight:Bold;
	color:#fff;
}



/* styles to anchor of heading level1 */
#header h1 a{
	width:907px;
	height:73px;
	font-size:24px;
	font-weight:normal;
	overflow:hidden;
	display:block;
	position:relative;
	text-decoration:none;
	color:#fff;
}

/* styles to span the text across the columns */
#header h1 a span{
	position:absolute;
	width:707px;
	height:73px;
	top:0;
	left:0;
	cursor:pointer;
	margin-left:1px;
	}



/*-------------------------nav--------------------------------------------------------- */

/* setting styles to navigation area of all pages */
#nav{
	background:#d2e7c5;
	margin:0px 0px 5px 0px;
}
.nav1{
	background:url(images/nav-bot.png) repeat-x 0 100%;
}

/* setting up the styles of the list items on the navigation area */
#nav ul{
	list-style:none;
	overflow:auto;
	width:100%;
	font-size:11px;
	font-weight:bold;
	border-left:1px solid #5ba82b;
	margin-left:1px;
	position:relative;
	display:block;
}


#nav li{
	float:left;
	border-right:1px solid #5ba82b;	
}

/* setting up the styles of the links on the navigation area */
#nav a{
		float:left;
		color:#000;
		background:#d2e7c5;
}
		
#nav li a span{
	padding:12px 10px 13px 10px;
	background:transparent url(images/nav-bot.png) repeat-x 0 100%;
	display:block;
}
/*commented out for WR0797
 * #nav li.here a,#nav li a:hover{
	padding:0;
	background:#fff url(images/nav-here.png) repeat-x 0 0;
	color:#349CE2;
}
#nav li.here a span,#nav li a:hover span {
	padding:12px 10px 13px 10px;
	background:transparent url(images/nav-here.png) repeat-x 0 100%;
	display:block;
}*/

/* style to set the crumb trail */

#bc
{
   margin-left: 70px;
}
.bc a, .bc {
  color:#72787c;
  text-decoration:none;
  font-size:11px;
  font-weight:bold;
  font-family:arial,Helvatica,sans-serif;
  margin-left:2px;
}
.bc strong{color:#000000;margin-left:2px;}
.bc a:visited{color:#72787c;margin-left:2px;}
.bc a:hover{color:#349CE2;text-decoration:none}

/*-----------------------Content middle, c1 and c2----------------------------------------------- */

/* Style given to Heading Level 1 of c1,c2 and middle2 divisions */
#c1 h1, #c2 h1, #middle2 h1,#result_c1 h1{
	font-weight:normal;
	font-size:39px;
	color:#333333
	padding-right:0px;
	margin-left:10px;
}

/* Style given to Heading Level 2 of c1,c2 and middle2 divisions */
#c1 h2, #middle2 h2, #c2 h2{
	color:#2c3336;
	padding: 0px 10px 0px 10px;
}

/* Style given to Heading Level 2 of c1 divisions which is used in summary page */
#c1 h2.summaryText {
	font-weight:bold;
	font-size:18px;
}

/* sets the anchor style of c1,c2 and middle2 and its paragraphs */
#c1 a, #c2 a, #middle2 a{color:#000}
#c1 p a, #c2 p a, #middle2 p a, #c1 table tr td a{text-decoration:underline}
#c1 p a:hover, #c2 p a:hover, #middle2 p a:hover, #c1 table tr td a:hover{text-decoration:none}

/* Standard Heading Level 3 - used for 3rd level heading*/ 
h3{
font-size:1.5em;
color:#2c3336;
margin-top:10px
padding-left: 10px;
padding-right:10px;
}

/* styles given to the paragraphs of c1, c2 and result_c1 divisions*/
#c1 p, #c2 p, #result_c1 p{
	font-size:12px;
	line-height:1.5em;
	padding-top: 1em;
	padding-left:10px;
	padding-right:10px;
}

/* sets the padding level 0  to the paragraphs of c1 and c2 divisions*/
#c1 p.noPadding, #c2 p.noPadding{
	padding-top: 0em;
}

/*Used for results page - begin*/

/* styles for the un ordered list of c2 division */
#c2 ul{
	list-style:none;
	font-size:12px;
	text-align:right;
	float:left;
}
#c2 li{
	display:inline;
	font-size:12px;
	margin-left: 3px;
	margin-right: 3px;
}
#c2 a{
	color:#2c3336;
	font-size:12px;
	padding-left: 2px;
	padding-right:1px;
	text-decoration:underline;
}

#c2 a:hover{
	color:#2c3336;
	margin:0px;
	text-decoration:none;
}

/*Used for results page -end*/

/* styles to set the side padding to 0 */
#c2 p.noSidePadding{
	padding-top: 0em;
	padding-left: 0px;
	padding-right:0px;
}

/* styles to set the left padding of the table data row of c2 division */
#c2 td.leftPadding{
	padding-left: 5px;
}

/* setting up the style of the table of c2 division which are used in choices page */
#c1 table{
	BORDER: none;
	BACKGROUND-COLOR: #ffffff;
	TEXT-ALIGN: left;
	WIDTH: 430px;
	margin-left:10px;	
}

/* setting up the paragraphy style of the table of c1 and middle2 division */
#c1 table p, #middle2 table p{
	font-size:12px;
	line-height:1.5em;
	padding-top: 1em;
	padding-left : 0px;
	padding-right : 0px;
	margin-left: 0px;
}

#c1 table tr{
	line-height: 1.5em;
	/*height: 1.5 em;*/
}

/**Style to adjust the h2 heading in c1 table to left **/ 
#c1 table tr td h2{
  color:#2c3336;
  margin-left : -10px;
}

/* setting up the style of the table of c2 division which are used in result page */
#c2 table{
	BORDER: none;
	BACKGROUND-COLOR: #ffffff;
	TEXT-ALIGN: left;
	WIDTH: 520px;
}

#c2 table.paging {
	width:500px;
	margin-left:10px;
	margin-right:10px;
}

/* setting up the style of the paragraph for middle division which are used in the pages like what you won't 
see page */
#middle2 p{
	font-size:12px;
	line-height:1.5em;
	padding-top: 1em;
	padding-left:10px;
	padding-right:10px;
}

/* setting up the style of the table of middle2 division which are used in pages like what you won't see page 
*/
#middle2 table{
	border: 1px solid #bbb;
	border-collapse: collapse;
	TEXT-ALIGN: left;
	width:730px;
	margin-left:10px;

}

/* setting up the style of the rows of table for middle2 division */
#middle2 table tr{
	border: 1px solid #bbb;
	border-collapse: collapse;
	line-height:1.5em;
	font-weight: bold;
	font-size:12px;
	margin:0px;
}

/*styles given to the heading row of the table */
#middle2 table tr th, #c1 table tr th{
	border: 1px solid #bbb;
	border-collapse: collapse;
	background: #D5EBF9;	
	line-height:1.5em;
	font-weight: bold;
	font-size:12px;
	padding: 0px;
	margin:0px;
}
/* style to left align the heading in the important information tables*/
#middle2 table tr th.leftAlign,#middle2 table tr.leftAlign
{
  text-align:left;
  background:#D5EBF9;
  
}
/* style to bold the heading in the important information tables*/
#middle2 table tr td p.boldText
{
 	font-weight: bold; 
  
}

/*styles given to the column of the table */
#middle2 table tr td{
	border: 1px solid #bbb;	
	border-collapse: collapse;
	line-height:1.5em;
	font-weight: normal;
	font-size:12px;
	padding: 0 px;
	margin:0px;
}

/*styles given to the paragraphs written in the table in the heading row */
#middle2 table tr th p{
	font-size:12px;
	line-height:1.5em;
	padding: 5px 10px;
	margin:0px;
}

/*styles given to the paragraphs written in the table */
#middle2 table tr td p{
	font-size:12px;
	line-height:1.5em;
	padding: 5px 10px;
	margin:0px;
}

/* style to make the text alignment to center */
.alignCenter{
	text-align: center;
	font-weight: bold;
}

/* setting up the styles of the list items in the c1 division */
/*
#c1 ul{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #ccc;
}

#c1 ul li{
	position: relative;
}

#c1 li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
}
	
#c1 ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
}

#c1 li:hover ul, li.over ul { 
	display: block; 
}

#c1 html ul li { float: left; }
#c1 html ul li a { height: 1%; } */

	
/* specifying the style of the List items of the middle2 division */
#middle2 ul.List, #c1 ul.List{ 

font-size:12px; 

text-align:left; 

line-height:1.7em; 

padding-left:45px; 

list-style-type:disc;

border-bottom: 0;

width:400px;

} 


#centerText{
	margin-left:10px;
	height:80px;
}

/*Styles given to the textboxes which are used in the choices page */
.textbox{
	border:none;
	border:solid 1px #ADD8FF;
	border-left:solid 1px #ADD8FF;
	border-top:solid 1px #ADD8FF;
	padding:1px 2px;
	margin-top: 5px;
	margin-left: 0px;
	width:100px;
  height:18px;
	font-size:0.75em;
}

.pound {
  font-size:0.75em;
}

#c1 .textBlack{
	color:black;
}

/* style to set the field width in different lengths based on the content of the field  which are maily used 
in tables */
.columnWider{
	width: 360px;
}
.columnWider1{
	width: 350px;
}
.biggerWidth{
	width:300px;
}
.columnOne{
	width:220px;
  VERTICAL-ALIGN: top;
  font-weight:bold;
 
	}
.columnOneNotBold{
 width:220px;
 VERTICAL-ALIGN: top;
}
.columnTwo{
	/*width:430px;*/
  width:300px;
	}
.columnMedium {
	width: 145px;
}

.columnSmaller, .columnThree{
	width:100px;
}

/* style to make right alignment to place the help buttons */
.rightMostColumn{
	width: 70px;
	vertical-align:bottom;
}

/* setting up the column width of the radio buttons and Tabs used in the pages like choices and selection*/
.columnForRadio{
	width:20px;
}
.columnForTabs{
	width:170px;
}
.columnForFirstTab{
	width:180px;
}

/* style to produce a more lines with white spaces */
.rowSmaller{ 
    height:100px; 
} 

/* styles used in summary pages to set up the column widths */
.colSmallSize {
	width: 10%;
}

.colMidSize {
	width: 20%;
}

.colMediumSize {
	width: 25%;
}

.colEqualSize {
	width: 50%;
}
.colBiggerSize {
	width: 65%;
}

#c1 table.marginLeft{
	margin-left:30px;
}


/*-------------------Side section S1 and S2----------------------------------------------- */
#s1, #s2,#result_s2{
	list-style:none;
	font-weight:normal;
	line-height:1.5em;
}

/* setting up the styles of the list items on the right side area */
#s1 ul, #s2 ul,#result_s2 ul{
	list-style-type:none;
}
	
/* Styles for links in the list*/
#s1 li a, #s2 li a,#result_s2 li a{
	font-weight:bold;
	text-decoration:underline;
}

/* Styles for links in the list when mouse is hovered on them */
#s1 li a:hover, #s2 li a:hover,#result_s2 li a:hover{
	font-weight:bold;
	text-decoration:none;	
}
		
/* setting up the styles of the links  on the right side area which are used in the pages like email 
confirmation*/
.sideLink {
	font-size:12px;
	font-weight:bold;
	color:#333333;
	padding-right: 0px;
  margin-bottom: 10px;
  text-decoration:underline;
}
.sideLink:hover {
	 text-decoration:none;
}
.sideLink:visited {
	font-size:12px;
	font-weight:bold;
	color:#333333;
	padding-right: 0px;
  margin-bottom: 10px;
  text-decoration:underline;
}

#s1 ul.reportSideLink{
	text-align:left;
	list-style-type:none;
	line-height:2.5em;
  font-size:11px;
}

#s1 ul.List, #s2 ul.List{ 
		list-style-type:disc;
        font-size:12px; 
        text-align:left; 
        line-height:1.5em; 
        padding-left:15px;  
} 

/* styles given to the paragraphs of s1 and s2 divisions*/
#s1 p, #s2 p{
	font-size:12px;
	font-weight:normal;
	line-height:1.5em;
	margin-right:10px;
	padding-top:10px;
	margin-top: .5em;
	font: Arial,Helvatica,sans-serif;
}

/* style to set the side spacing for the button */
.sideSpacingforButton {
	width: 200px;
	line-height:1em;
}

/* setting up the styles of images without margin used in print result, save etc  */
.pAboutImageWithoutMargin{
	font-size:12px;
	font-weight:bold;
	font: Arial,Helvatica,sans-serif;
	line-height:0em;
}

/* setting up the styles of images with margin used in print result, save etc  */
.pAboutImageWithMargin{
	line-height:0em;
	font-size:12px;
	font-weight:bold;
	font: Arial,Helvatica,sans-serif;
}

/* setting up the space before the footer on all the pages */
#beforeFooter{
	height:40px;
}

#s1 #favourite{
	text-align:right;
	margin-top:-4px;
	font-size:11px; 
}
#s1 a.favourite{text-decoration:none}
#s1 a.favourite:hover{text-decoration:underline}

/* Styles for the table header in side section */
#s1 table tr th{
	border: 1px solid #bbb;
	border-collapse: collapse;
	background: #D5EBF9;	
	line-height:1.5em;
	font-weight: bold;
	font-size:12px;
	padding: 0 px;
	margin:0px;
}

/* Styles for the table column in side section */
#s1 table tr td{
	border: 1px solid #bbb;	
	border-collapse: collapse;
	line-height:1.5em;
	font-weight: normal;
	font-size:12px;
	padding: 0 px;
	margin:0px;
}

/* Styles for the paragraph's in the table header in side section */
#s1 table tr th p{
	font-size:12px;
	line-height:1.5em;
	padding: 2px 4px;
	margin:0px;
}

/* Styles for the paragraph's in the table column in side section */
#s1 table tr td p{
	font-size:12px;
	line-height:1.5em;
	padding: 2px 4px;
	margin:0px;
}

/*---------------------------------Footer----------------------------------------------- */
#footer,#result_footer{
	padding:4px 0 15px 0;
	margin:10px 0px;
	border-top:1px solid #ccc;
	position:relative;
	height:0px;
	margin-top:40px;
}

/* setting up the styles of the list items which are displayed at the footer in a single line */
#footer ul,#result_footer ul{
	list-style:none;
	font-size:11px;
	text-align:right;
	
}
#footer li,#result_footer li{
	display:inline
}
#footer a,#result_footer a{
	color:#2c3336;
	margin:5px;
}

/**************************************************************************/

.pAboutImage{
	font-size:12px;
	font-weight:bold;
	margin-left:10px;
	font: Arial,Helvatica,sans-serif;
	line-height:0em;
}

.leftColumn {
	padding-left:30px;
	font-weight:bold;
	font-size:12px;
	line-height:1.5em;
	padding-top: 1em;
	VERTICAL-ALIGN: top;
	width:180px;
}

.rightColumn{
	padding-right:10px;
	font-size:12px;
	line-height:1.5em;
	padding-top: 1em;
	width:230px;
}

rightColumnWithNoPaddingRight{
padding-right:10px;
	font-size:12px;
	line-height:1.5em;
	padding-top: 1em;
	width:230px;
}

.leftColumnWider{
	padding-left:30px;
	font-weight:normal;
	font-size:12px;
	line-height:1.5em;
	padding-top: 1em;
	VERTICAL-ALIGN: top;
	width:410px;
}

/* style used with save button */
.saveImage{
		background:url(images/icon_save_results.gif) no-repeat 0px 0px; 
}

/*********************Keyfacts division styles********************/

/*#middle2 ul.List{ 
        font-size:12px; 
        text-align:left; 
        line-height:2.5em; 
        padding-left:45px; 
        
} */

/* Division to include the keyfacts image and the text for it */
#middle2 #keyfacts{
      width:730px;
      margin-left:10px;
      margin-right:10px;
      padding-top: 1em;
}

/* Division which will hold the keyfacts image with in keyfacts division */
#middle2 #keyfacts #keyfactsImage{
      float:left;
      width:100px;
      margin-top:10px;
}

#middle2 #keyfacts #keyfactsImage image{
      width:100px;
}

/* Division which will hold the keyfacts paragraph with in keyfacts division */
#middle2 #keyfacts #keyfactsPara{
      float:right;
      width:620px;
}

/* Style given to the paragraphic text in keyfacts division */
#middle2 #keyfacts #keyfactsPara p{
      font-size:12px;
      line-height:1.5em;
      padding-left:10px;
      padding-right:10px;
      padding-top:0px;
      width:630px;
}


/******************************* Help styles ************************************/
/* Style which will hide a displayed division. Used to hide help texts */
.hide{
	display:none;
}
/* Style which will display a displayed division. Used to display hidden help texts */
.displayText{
	display:true;
}

/* All the divisions starting with emptySpace are used 
to place the help texts in a correct position by putting 
empty divisions on top of them */
#emptySpace1{
	height:45pt;
}
#emptySpace2{
	height:64pt;
}
#emptySpace3{
	height:112pt;
}
#emptySpace4{
	height:215pt;
}
#emptySpace5{
	height:128pt;
}
#emptySpace6{
	height:240pt;
}
#emptySpace7{
	height:348pt;
}

.hr1{
  position:relative;
  height:1px;
  margin:0em 0em .8em 0em;
  background:url(images/hr.png) repeat-x 0 50%;
}

.TextHighlight
{
  FONT-SIZE: 12px;
  FONT-FAMILY: arial, verdana, helvetica;
  FONT-WEIGHT: bold;
	COLOR: black;
}

.compareProductColumn
{
	width:210px;
}


/******************************* PPI styles ************************************/
/*Styles given to the textboxes used for Age in the choices page */
.textboxSmall{
	border:none;
	border:solid 1px #ADD8FF;
	border-left:solid 1px #ADD8FF;
	border-top:solid 1px #ADD8FF;
	padding:1px 2px;
	margin-top: 5px;
	margin-left: 0px;
	width:30px;
  height:18px;
	font-size:0.75em;
}

.textarea {
  width: 250px;
  height: 60px;
  padding: 0px;
  margin-left: 0px;
  margin-top: 0px;
  padding-left: 0px;
  padding-top: 0px;
  text-align: left;
}

.greyedBackground {
  background:#A9A9A9;
}

.whiteBackground {
  background:#FFFFFF;
}

/******************************* Newly added ************************************/

/*Change for WR0797*/
#addthis {
 /* border:1px solid #FF0000; */
  background:none;
  left:750px;
  top:25px;
  margin-bottom:-25px;
  margin-top:-5px;
  position:relative;
  text-align:left;
 width:300px;
 }

#addthis a, #addthis a:visited {
 color:#000000!important;
 text-decoration: none;
 font-size: 1.2em;
 margin-top: 0.2em;
 }
 
#addthis a:hover {
 text-decoration: underline;
 }
 
#addbutton {
 margin:20px;
 }