/* 
CSS Document for Lombard Direct 

Author: 		Adam Collison [adam.collison@soup.co.uk]
Client: 		Lombard Direct
Date Created: 	10-03-2006

Contents:

1) Generic Styles
2) Main Header
	a) Main Nav styles
	b) Apply Button styles
3) Content Styles
	a) Sub Content styles
	b) Element Styles 
	c) Default List Styles
	d) Gold Bar Promo Styles
	e) Fixed Variation of Gold Promo Bar Styles
	f) FAQ's Styles
		I) Show Hide Styles 
		II) Inner FAQ's Styles
		III) Second level FAQ Styles
	g) Data Table Styles
		I) Table Heading Styles
		II) Table Cell Styles
		III) Table Extension Styles
4) Footer Styles
5) Misc Styles

*/

/* ********************************* Generic Styles ****************************** */
/* ******************************************************************************* */

body {
	font-size:			0.9em;
	font-family:		Arial, Helvetica, sans-serif;
	padding:			0;
	margin:				0;
	text-align:			center;
}

.sub_head_content_font1_5bigger{font-family: Arial, Helvetica, sans-serif; font-size: 1.53em; font-weight: bold;}

a img {
	border:				0;
}

a {
	color:				#f63;
}

a:hover {
	text-decoration:	none;
}

a.external {
	color:				#339;	
}

a.external:hover {
	color:				#f63;	
	text-decoration:	underline;
}


/* ------------------------------ Position Divs ---------------------------------- */
#header, #content, #footer {
	width:				724px;
	margin:				auto;
	text-align:			left;
}


#haven_header {
	width:				724px;
	margin-left:		20px;
	text-align:			left;
}

/* ******************************************************************************* */
/* ********************************* End Generic Styles ************************** */



/* ********************************* Main Header ********************************* */
/* ******************************************************************************* */

#header h1 {
	padding:			0 20px 0 0;
	margin:				0;
	text-align:			right;
}

#header h1.bg {
	background:			url(../images/bg_h1.gif) top right no-repeat;
	padding-right:		130px;
}

#header h1 a img {
	float:				left;
}

/* ------------------------------ Glossary styles ------------------------------- */
#glossary .nav {
	color:				#339;
	background:			#fff4d3 0 0 0;
	height:				18px;
	font-weight:		bold;
/*-----width added to stop background colour spilling over to the right after the last li--*/	
	width:				97%;
}

#glossary .nav li {
	padding:			0 5px;
	float:				left;
	background:			url(../images/bg_glossarynav_li.gif) top right repeat-y;
	list-style-type:	none;
}

#glossary .nav li a {
	color:				#339;
	text-decoration: 	none;
}

#glossary .nav li a:hover {
	color:				#339;
	text-decoration: 	underline;
}

#glossary .term {
	color:				#339;
	font-weight:		normal;
}

#glossary .term li {
	list-style-type:	none;
	padding:			0 0 0 35px;
	background:			#fff url(../images/bg_faqs_sub_list.gif) 20px 2px no-repeat;
	display:			block;
}

#glossary .term li a {
	font-weight:		normal;
	color:				#339;
	text-decoration: 	none;
} 

#glossary .term li a:hover {
	color:				#339;
	text-decoration: 	underline;
} 

#glossary .term li.selected {
	background:			#fff url(../images/bg_faqs_sub_list_selected.gif) 0 8px no-repeat;
	margin-top:			5px;
	margin-left:		20px;
	padding:			3 0 8 15px;
	border-top:			1px solid #F06714;
	/*border-bottom:		1px solid #F06714;*/
	color:				#339;
} 

#glossary .term li.selected p.title {
	padding-top:		0;
	margin-top:			0;
} 

#glossary .term li.selected p.desc {
	padding-top:		0;
	margin-top:			0;
	color:				#000000;
}

#glossary .term li.selected p a.close {
	font-weight:		bold;
	color:				#F06714;
	background:			#fff;
	text-decoration: 	none;
} 

#glossary .term li.selected p a.close:hover {
	font-weight:		bold;
	color:				#F06714;
	background:			#fff;
	text-decoration: 	underline;
}

#glossary .term li.selected p a.link {
	font-weight:		bold;
	color:				#339;	
	background:			#fff;
	text-decoration: 	underline;
} 

#glossary .term li.selected p a.link:hover {
	font-weight:		bold;
	color:				#f63;	
	background:			#fff;
	text-decoration: 	underline;
}


/* ------------------------------ Main Nav styles ------------------------------- */
#nav {
	padding:			0 0 0 5px;
	margin:				0;
	background:			url(../images/bg_topnav.gif) 0 0 repeat-x;
	height:				35px;
	list-style-type:	none;
}

#nav li {
	padding:			0 10px;
	float:				left;
	background:			url(../images/bg_topnav_li.gif) top right repeat-y;
}

#nav li a {
/*  Start IE Mac Hack [Only IE on Mac Ignores This Style] \*/
	display:			block;
/*  End IE Mac Hack */
}

#nav li a:hover {
	background:			#fc0;
}


/* ------------------------------ Apply Button styles ---------------------------- */
#nav li.apply {
	padding:			0;
	float:				none;
	background:			none;
}

#nav li.apply a {
	text-align:			right;
}

#nav li.apply a:hover {
	background:			none;
}

/* ******************************************************************************* */
/* ********************************* End Main Header ***************************** */



/* ********************************* Content Styles ****************************** */
/* ******************************************************************************* */

#content {
	margin:				0 20px;
	padding:			0 0 0 20px;
	width:				704px;
	margin:				auto;
	position:			relative;
}

h3 {
	padding:			0;
	margin:				1em 0 0;
	color:				#339;
	font-size:			120%;
	line-height:		0.3em;
}

h4 {
	padding:			0;
	margin:				0 0 15px;
	color:				#339;
	font-size:			120%;
}

h5 {
	padding:			0;
	margin:				0 0 15px;
	color:				#339;
	font-size:			160%;
	font-weight:        bold;
}

h6 {
	margin:				0.8em 0;
	padding:			0;
	font-size:			100%;
	font-weight:		bold;
	color:				#339;
}

hr {
	padding:			0;
	margin:				5px 0 15px;
	border:				0;
	height:				1px;
	color:				#fc3;
	background:			#fc3;
}

* html hr {
	margin:				0 0 4px;
}

/* ------------------------------ Sub Content styles ----------------------------- */
#content .subcontent {
	width:				127px;
	float:				right;
	padding:			0 9px;
}

#content .subcontent a img {
	margin:				8px 0 0;
}


/* ------------------------------ Element styles --------------------------------- */
#content div {
	width:				480px;
	position:			relative;
	font-size:			85%;
}

#content div.full {
	width:				550px;
}

#content div div {
	font-size:			100%;
	width:				550px;
/*  Start IE Mac Hack [Only IE on Mac Ignores This Style] \*/
	width:				100%;
/*  End ie mac hack */
}

#content div p {
	margin:				0.8em 0;
}

#content p a img {
	margin-right:		10px;
}

#content table {
/*	
	width:				550px;
  Start IE Mac Hack [Only IE on Mac Ignores This Style] 
	width:				100%;
*/
/*  End ie mac hack */
}

#content table td {
	vertical-align:		middle;
}

/* ------------------------------ Default List Styles ---------------------------- */
#content ul {
	padding:			0;
	margin:				0.8em 0;
	list-style:			none;
}

#content ul li {
	padding:			0.1em 13px;
	margin:				0;
	background:			url(../images/bg_list_item.gif) 0 50% no-repeat;
	position:			relative;
}

#content ul li.bullet_top {
	padding:			0.1em 13px;
	margin:				0;
	background:			url(../images/bg_list_item.gif) 0 20% no-repeat;
	position:			relative;
}

/* ---added for bullet points with several lines so that bullet still appears at top-- */

#content ul li.bullet_top_1 {
	padding:			0.1em 13px;
	margin:				0;
	background:			url(../images/bg_list_item.gif) 0 7% no-repeat;
	position:			relative;
}

#content ol {
	padding:			0;
	margin:				0.8em 0;
	list-style-type:	decimal;
	list-style-position:inside;
}

/* ------------------------------ Features List Styles ---------------------------- */

#content ul.features li {
	background:			url(../images/bg_features_tick.gif) 0 50% no-repeat;
	display:			inline;
	padding:			0 10px 0 20px;
	color:				#339;
	font-weight:		bold;
}


/* ------------------------------ Alternating List Styles ---------------------------- */

#content ul.alternating li {
	padding:			5px 15px;
	background:			#fff url(../images/bg_list_item.gif) 5px 0.8em no-repeat;
}

#content ul.alternating li.odd {
	background:			#fff4d3 url(../images/bg_list_item.gif) 5px 0.8em no-repeat;
}

/* ---added for bullet point in loanKF which has a 1.5 bigger apr in the middle -- */
#content ul.alternating li.odd_1 {
	background-image: url("../images/bg_list_item.gif");
	background-position: 5px 1.3em;
	background-repeat: no-repeat;
	background-color: #fff4d3;
}


/* ------------------------------ Gold Promo Bar Styles -------------------------- */
.promo_bar {
	padding:			0;
	margin:				0 0 5px;
	clear:				right;
	background:			#fc3 url(../images/bg_promo_bar_fill.gif) 0 0 repeat-x;
	width:				680px;
}

.promo_bar td {
	height:				109px;
	vertical-align:		top;
}

.promo_bar .first {
	background:			url(../images/bg_promo_bar_first.gif) 0 0 no-repeat;
	width:				40%;
}

.promo_bar .last {
	background:			url(../images/bg_promo_bar_last.gif) top right no-repeat;
	width:				55%;
}

.promo_bar form.forma {
	background:			url(../images/bg_promo_bar_form.gif) 0 0 no-repeat;
	margin:				0 0 0 33px;
}

.promo_bar form.formb {
	background:			url(../images/bg_promo_bar_form.gif) 0 0 no-repeat;
	margin:				0 0 0 66px;
}

.promo_bar form {
	padding:			15px 29px 15px 23px;
	margin:				0;
	position:			relative;
}

.promo_bar form h4 {
	padding:			0 0 5px 15px;
	margin:				0;
}

.promo_bar form img {
	vertical-align:		baseline;
}

.promo_bar form input {
	padding:			0;
	margin:				0;
}

.promo_bar form input.calculate {
	margin:				4px 0 0 64px;
}


/* ------------------------------ Fixed Variation of Gold Promo Bar Styles ------ */
/* 
This is used on the homepage when you have a stand alone fixed bar that is 
a set height. These styles overwrite the above declirations as they appear 
later in the CSS and the style attached is after the promobar 
e.g. class='promo_bar fixed'
*/
#content .fixed {
	margin:				0 0 5px;
	background:			#fc3 url(../images/bg_promo_bar_fixed.gif) 0 0 repeat-x;
	width:				680px;
}

* html .fixed {
	margin:				18px 0 5px;
}

.fixed .first {
	background:			url(../images/bg_promo_bar_fixed_first.gif) 0 0 no-repeat;
	width:				55%;
}

.fixed .last {
	background:			url(../images/bg_promo_bar_fixed_last.gif) top right no-repeat;
	width:				45%;
}

.fixed form {
	padding:			15px 25px;
}

.fixed form.forma {
	background:			 url(../images/bg_promo_bar_form_fixed.gif) 0 0 no-repeat;
	margin-left: 163px;
	margin-right: 0;
	margin-bottom: 0;
	margin-top: 0;
}

.fixed form.formb {
	background:			 url(../images/bg_promo_bar_form_fixed.gif) 0 0 no-repeat;
	margin:				0 0 0 60px;
}


/* ------------------------------ FAQ's Styles ----------------------------------- */
.faqs {
	padding:			0 0 20px;
	margin:				0;
}	

/* ------------------------------ Show Hide Styles ------------------------------- */
.faqs li ul {
	display:			none;
}
.faqs li.selected ul {
	display:			block;
}

/* ------------------------------ Inner FAQ's Styles ----------------------------- */
#content .faqs li {
	padding:			5px 0;
	margin:				0;
	background:			none;
}	

#content .faqs li a {
	padding:			5px 0 6px 35px;
	margin:				0;
	display:			block;
	background:			#FFF4D3 url(../images/bg_faqs_list.gif) 0 0 no-repeat;
	font-weight:		bold;
	text-decoration:	none;
	color:				#339;
}	

* html #content .faqs li a {
	padding:			7px 0 6px 35px;
/* Start IE Mac Hack [Only IE on Mac Ignores This Style] \*/
	padding:			5px 0 6px 35px;
	/* End Ie MAc Hack */
}

#content .faqs li a:hover {
	background:			#FFF9E4 url(../images/bg_faqs_list_hover.gif) 0 0 no-repeat;
	text-decoration:	underline;
}	

#content .faqs li.selected a, 
#content .faqs li.selected a:hover {
	background:			#FFF4D3 url(../images/bg_faqs_list.gif) 0 100% no-repeat;
	text-decoration:	none;
}	

/* ------------------------------ Second level FAQ's Styles ---------------------- */
#content .faqs li.selected ul {
	padding:			10px 0;
	margin:				0;
	font-size:			95%;
} 

#content .faqs li.selected ul li a {
	padding:			0 0 0 35px;
	margin:				0;
	background:			#fff url(../images/bg_faqs_sub_list.gif) 20px 2px no-repeat;
	display:			block;
	font-weight:		normal;
	text-decoration:	none;
	color:				#339;
} 

#content .faqs li.selected ul li a:hover {
	background:			#fff url(../images/bg_faqs_sub_list.gif) 20px 2px no-repeat;
	text-decoration:	underline;
} 

#content .faqs li.selected ul li p a:hover {
	background:			#fff;
	text-decoration:	underline;
} 

#content .faqs li.selected ul li.selected {
	background:			#fff url(../images/bg_faqs_sub_list_selected.gif) 0 8px no-repeat;
	margin-left:		20px;
	padding-left:		15px;
	border-top:			1px solid #F06714;
	border-bottom:		1px solid #F06714;
} 

#content .faqs li.selected ul li.selected p {
	padding-top:		0;
	margin-top:			0;
} 

#content .faqs li.selected ul li.selected p a {
	font-weight:		bold;
	color:				#F06714;
	padding:			0;
	margin:				0;
	background:			#fff;
	display:			inline;
}

#content .faqs li.selected ul li.selected strong {
	color:				#339;
} 


/* ------------------------------ Feature Table Styles ------------------------------ */
/*
These are the yellow curvy tables used to contain figures and data
*/
#content table.feature_table {
	padding:			0;
	margin:				10px 0 0;
	background:			#fc3;
	width:				691px;
}

/* ------------------------------ Table Heading Styles --------------------------- */
table.feature_table tr th {
	padding:			5px;
	line-height:		1em;
	font-size:			85%;
	vertical-align:		top;
	font-weight:		normal;
	color:				#339;
	text-align:			left;
	border-bottom:		1px solid #fff;
}

table.feature_table tr th.first {
	background:			#fc3 url(../images/bg_feature_table_top_left.gif) 0 0 no-repeat;
}

table.feature_table tr th.last {
	background:			#fc3 url(../images/bg_feature_table_top_right.gif) top right no-repeat;
}

/* ------------------------------ Table Cell Styles ------------------------------ */
table.feature_table tr td {
	padding:			5px 5px 0;
	border-right:		1px solid #fff;
	border-bottom:		1px solid #fff;
	background-color:	#fff;
	text-align:			center;
	vertical-align:		top;
}

table.feature_table tr td small {
	display:			block;
}

table.feature_table tr td.odd {
	background-color:	#FFE8E1;
}

table.feature_table td.first {
	background:			#f63;
	padding:			5px 5px 3px;
}

#content table.feature_table tr td.notes {
	text-align:			left;
	border:				0;
	background:			#fc3;
	font-size:			85%;
	padding:			7px 20px;
}

/* ------------------------------ Data Table Styles ------------------------------ */
/*
These are the yellow curvy tables used to contain figures and data
*/
table.data_table {
	padding:			0;
	margin:				0;
}

/* ------------------------------ Table Heading Styles --------------------------- */
table.data_table tr th {
	background:			#fc3;
	padding:			12px 10px 8px;
	vertical-align:		top;
	font-weight:		normal;
	color:				#339;
	text-align:			left;
}

table.data_table tr th a {
	color:				#339;
}

table.data_table tr th a:hover {
	text-decoration:	none;
}

table.data_table tr th strong {
	display:			block;
}

table.data_table tr th small {
	color:				#333;
}

table.data_table tr th.first {
	background:			#fc3 url(../images/bg_table_top_left.gif) 0 0 no-repeat;
	padding-left:		18px;
	padding-right:		0;
}

table.data_table tr th.last {
	background:			#fc3 url(../images/bg_table_top_right.gif) top right no-repeat;
}

/* ------------------------------ Table Cell Styles ------------------------------ */
table.data_table tr td {
	padding:			4px 10px;
	background-color:	#fff;
	border-left:		1px solid #fff;
	color:				#339;
}

table.data_table tr.even td {
	background-color:	#FFE8E1;
}

table.data_table td.last {
	background:			#fff url(../images/bg_table_body.gif) 100% repeat-y;
}

table.data_table td.last a img{
	vertical-align:		middle;
	margin-left:		10px;
}

* html table.data_table td.last a img{
	margin-left:		20px;
}

table.data_table td.first {
	border-left:		1px solid #fc3;
	padding-left:		18px;
	padding-right:		0;
	background-image:	url(../images/bg_table_body_td.gif);
	background-position:0 0;
	background-repeat:	repeat-y;
}



/* ------------------------------ Table Extension Styles ------------------------- */
/* 
this is added to the bottom of this table style ti incorporate the promobar 
at the base of the table.
*/
.data_table_extension {
	border-left:		1px solid #fc3;
	background:			#fff url(../images/bg_data_table_extension.gif) 100% repeat-y;
	padding:			10px 0 0;
}

* html .data_table_extension {
	padding:			5px 0 0;
}

.data_table_extension hr {
	padding:			0;
	margin:				0 3px 0 0;
	color:				#fc3;
	background:			#fc3;
	border:				0;
	height:				2px;
}

.data_table_extension form {
	padding:			0;
	margin:				0;
}

.data_table_extension form p {
	padding:			10px;
	margin:				0;
}

.data_table_extension form p.form {
	padding:			0 10px;
	margin:				0;
}

.data_table_extension form input {
	margin:				1px 0 -2px 20px;
}

.data_table_extension form image {
	margin:				1px 0 -3px;
}

.data_table_extension form a {
	color:				#339;
	padding-left:		3px;
}

.data_table_extension form a:hover{
	text-decoration:	none;
	color:				#f63;
}

.data_table_extension form input.btn {
	margin:				1px 0 -6px 35px;
}

.data_table_extension form a {
	vertical-align:		baseline;
}

#content .data_table_extension form p.actions {
	background:			#fc3;
	margin:				0 2px 0 0;
	padding-right:		14px;
	display:			block;
}

/* ******************************************************************************* */
/* ********************************* End Content Styles ************************** */



/* ********************************* Footer Styles ******************************* */
/* ******************************************************************************* */
#footer {
	padding:			20px 20px;
	width:				684px;
	clear:				both;
}

#footer ul {
	padding:			0;
	margin:				0;
	list-style-type:	none;
	border-top:			1px solid #fff;
}

#footer ul li {
	float:				left;
	padding:			0;
	margin:				0;
}

#footer ul.site li a {
	/*background:			#6cf;*/
	padding:			0;
	margin:				0;
}

#footer ul li a:hover {
	background:			#339;
}

#footer ul.site li {
	background:			#6cf;
}

#footer ul.site {
	float:				right;
	width:				270px;
	
}

#footer ul.site li.first {
	background-image:	url(../images/bg_footer_site_first.gif);
	background-position:0 0;
	background-repeat:	no-repeat;
	padding-left:		16px;
}

#footer ul.site li.last {
	background-image:	url(../images/bg_footer_site_last.gif);
	background-position:top right;
	background-repeat:	no-repeat;
	padding-right:		16px;
}


#footer ul.existing_customers li {
	background:			#fc0;
}


#footer p {
	clear:				left;
	border-top:			1px solid #339;
	margin:				0;
	padding-top:		10px;
	font-size:			80%;
	color:				#999;
}

/* ******************************************************************************* */
/* ********************************* End Footer Styles *************************** */



/* ******************************************************************************* */
/* ********************************* Misc Styles ********************************* */

#content div.landing_text p.apply_btn {
	padding:			3px 0 33px;
	margin:				0;
}

#content div.landing_text {
	padding-left:		170px;
	width:				390px;
	font-size:			100%;

	position:			relative;
	z-index:			100;
}

#content div.landing_text p {
	xmargin:				1.6em 0;
}

.homepage {
	padding-left:		170px;
	margin-bottom:		0;
	padding-bottom:		0;
	margin-top:			25px;

}

.monthly_amount
 {
	width:				70px;
}

.borrow_amount
 {
	width:				135px;
}

.lombard {
	position:			absolute;
	bottom:				-85px;
	left:				-10px;
	z-index:			auto;
	bottom:				-85px;
}

/*Removed 20/10/06 and added to the .lombard class above with change of promo image */
/*
* html .lombard {
	bottom:				-125px;
}
*/

#content .apr_promo {
	position:			absolute;
	right:				0;
	top:				58px;
}

.left {
	float:				left;
}

.right {
	float:				right;
}

.highlight_a {
	color:				#339;
}

.highlight_b {
	color:				#f60;
}

.w3c {
	visibility:			hidden;
	position:			absolute;
	top:				0;
	left:				-500px;
}

label.hiddenlabel{display:none;}

.loancalc {
	padding-top: 		60px;
	padding-left:		65px;

}

.loancalc_b {
	float:				left;
	

}

/* ********************************* End Misc Style******************************* */
/* ******************************************************************************* */