/* 
BRAND CSS Document for CREATION Albion brand 
Dave Randall 03/07/2007

Contents:
	1.	Standard tags

	2.	Layout
		2.1	Top banner
		2.2	Primary column
		2.3	Product menu
		2.4	Progress "menu"
		2.5	Primary logo container
		2.6	Secondary column
		2.7	Secondary menu
		2.8	Secondary logo container
		2.9	Main content box
		2.10	Print page button
		2.11	Error text block
		2.12 	Scrolling box
		2.13 	Important information scrolling box
		2.14  T&C's scrolling box
		2.15  T&C Page important information box
		2.16 	FAQ answers box   		
		2.17 	Footer
	
	3.	Branding images
	
	4.	Main headers and text
	
	5.	Menus and Links
		5.1 Product menu
		5.2 Secondary menu
		5.3 Progress menu
		5.4 Anchors
		5.5 Print button
		
	6.	Lists
		6.1 Main content bulleted list
		6.2 Ordered list
		6.3 Error block list
		6.4 Important information page lists
		6.5 FAQ page questions
		6.6 Product details page card info
		
	7.	Tables
		7.1 Generic table
		7.2 Application summary table
		
	8.	Form inputs
		8.1 Fieldset
		8.2 Legend
		8.3 Labels
		8.4 Input fields
		8.5 Buttons
		8.6 Input errors
*/

body {
	background: #ffffff;
	color: #565659;
	font: 62.5%/130%  Arial, Geneva, Helvetica, sans-serif;
}

/* =1 Standard tags */
acronym, abbr {
	border: none;
	cursor: help;
}

address {
	font-size: 1.2em;
	line-height: 1.8em;
}

#summarypage address {
	font-size: 1em;
	font-style: normal;
	margin: 0;
}

hr  { 
  border-top: 1px solid #000000;
  height: 0;
  background: #000000;
}

/* =2 Layout */
/* =2.1 Top banner */
#topbanner {
	background:  #002e6e;
	border-bottom: 5px solid #aa383a;
	height: 120px;
	width: 100%;
}

/* =2.2 Primary column */
#primarycol {
	top: 140px;
}

/* =2.3 Product menu */
#primarycol #productmenu {
	background: #ffffff;
	border: none;
	margin: 0 0 20px 15px;
	padding: 0;	
	width: 172px;
}

#primarycol #productmenu #productmenubottom {
	display: none;
}

/* =2.4 Progress "menu" */
#primarycol #progress {
	background: none;
	border: none;
	margin: 0 0 20px 5px;
	padding: 0 0 20px 0;
	width: 172px;
}

#primarycol #progress #progressbottom {
	display: none;
}

#welcomepage #progress, #trylaterpage #progress {
	display: none;
}

/* =2.5 Primary logo container */
#primarycol #primarylogocontainer  { 	
	border: none;
	height: 214px;
	padding: 0;
	margin: 0 0 0 15px;
	width: 172px;
}

/* =2.6 Secondary column */
#secondarycol {
	padding: 0 0 10px 0;
	top: 140px;
}

/* =2.7 Secondary menu */
#secondarycol #secondarymenu {
	background: #ffffff url("../../graphics/backgrounds/secondaryMenu.gif") top no-repeat;
	border: none;
	color: #000000;	
	margin: 0 0 20px 0;
	width: 172px;
}

#secondarycol #secondarymenu #secondarymenubottom {
	background: #ffffff  url("../../graphics/backgrounds/secondaryMenuBottom.gif") bottom no-repeat;
	height: 15px;
	width: 172px;
}

/* =2.8 Secondary logo container */
#secondarycol #secondarylogocontainer {
	border: none;
	margin: 0 15px 0 0;
	width: 172px;
}

/* =2.9 Main content box */
#maincontent {
	background-color: #ffffff;
	padding: 140px 210px 50px 210px;
}

#protectpopuppage #maincontent,
#summarypopuppage #maincontent,
#termspopuppage #maincontent {
	padding: 140px 10px 10px 10px;
}

/* =2.10 Print page button */
#printbutton {
	background-color: #ffffff;
	border: none;
	display: block;
	top: 145px;	
	right: 210px;
}

/* =2.11 Error text block */
#maincontent div.errorblock {
	background:  #ffffcc url(../../graphics/icons/warning.gif) 10px 9px no-repeat; 
	border: 1px dotted #cccccc;
	font-weight: bold;
	margin: 0 0 10px 0;
	padding: 10px 10px 0 30px;
}

/* =2.12 Scrolling box */
#maincontent div.scrollbox {
	background-color: #f9f9f9;
	border-color: #999999;
	border-style: dotted;
	border-width: 1px 0 1px 1px;
	overflow: auto;
	margin: 15px 0 0 0;
	padding: 10px;	
}

/* =2.13 Important information scrolling box */
#maincontent  div.importantinformation  {
	height: 215px;
}

/* =2.14 T&C's scrolling box */
#maincontent  div.termsconditions  {
	height: 215px;
}

/* =2.15 T&C Page important information box*/
#maincontent div.important {
	background: #EFF4FC;
	border: 1px solid #C0D8F3;
	padding: 10px 0 0 10px;
	margin: 0 0 20px 0;
}

/* =2.16 FAQ answers box */
#maincontent #faqanswers {
	background-color: #f9f9f9;
	border: 1px dotted #999999;
	margin: 15px 0 0 0;
	padding: 0 10px 10px 10px;
}

/* =2.17 Footer */
#footer {
	background: #002e6e;
	border-top: 4px solid #aa383a;
	height: 30px;
	width: 100%;	
	text-align: left;
}

/* Used to clear all floated elements and places the element underneath */
.clearboth {
	clear: both;
}

/* =3 Branding images */
#topbanner img.logo { /* Main logo */
	float: left;
	height: 92px;
	margin: 14px 0 14px 20px;
	width: 348px;	
}

#topbanner img.topadvert { /* Top advertising image */
	float: right;
	height: 5px;
	margin: 0;
	width: 5px;	
}

#productdetailspage img.cardinfo {
	float: left;
	height: 64px;
	margin: 0 20px 10px 0px;
	position: relative;
	width: 100px;
}

/*  =4 Main headers and text */
#maincontent h1 {
	border: none;
	color: #002e6e;
	font-family: Arial, Helvetica, Sans-serif;	
	font-size: 2.4em;	
	padding: 3px 0 28px 0;
}

#maincontent h2 {
	color: #aa383a;
	font-size: 1.6em;
	padding: 10px 0 20px 0;
}

#maincontent h3 {
	color: #000000;
	font-size: 1.2em;
	padding: 5px 0 5px 0;
}

#maincontent p {
	font-size: 1.2em;
	line-height: 1.8em;
	margin: 0 10px 10px 0;
}

#maincontent em {
	font-style: normal;
	font-size: 1.4em;
	font-weight: bold;
}

#maincontent ul li strong  {
	font-size: 1.4em;
	font-weight: bold;
}

#maincontent div.errorblock  {
	font-size: 1.2em;
}

#footer p {
	color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: normal;
	margin: 8px 0 0 20px;
	text-align: left;
}

#primarycol #progress h2 {
	color: #002e6e;
	font-size: 1.2em;
	padding: 0 0 20px 15px;
}

#secondarycol #secondarymenu h2 {
	color: #aa383a;
	font-size: 1.2em;
	padding: 20px 12px 10px 12px;
}

#maincontent #faqanswers h2{
	color: #aa383a;
	font-size: 1.4em;	
	padding: 10px 0 5px 0;
}

#maincontent #faqanswers h3 {
	color: #000000;
	font-size: 1.2em;
}

/* =5 Menus and Links*/
/* =5.1 Product menu  */
#productmenu ul {
   list-style: none;
	margin: 5px 0 5px 0;   
}
	 
#productmenu ul li {
  	background: url(../../graphics/backgrounds/menuBkgBottom.gif) bottom no-repeat;
  	font-size: 1.2em;
	margin: 0 0 5px 0;  	
  	width: 155px;
}

#productmenu a {
  	background: url(../../graphics/backgrounds/menuBkgTop.gif) top no-repeat;
  	color: #ffffff;
	display: block;
  	font-weight: bold;
  	padding: 5px 15px;
  	text-decoration: none;
}

#productmenu a:hover, 
#productmenu a:active, 
#productmenu a:focus {
	color: #ffffff;
	text-decoration: none;
}

/* styles required to show selected tab when on that tab's page */
#WelcomePage li.productdetails, 
#PaymentProtectionPage li.paymentprotection, 
#CardProtectionPage li.cardprotection, 
#ApplyNowPage li.apply {
  background-image: url(../../graphics/backgrounds/menuBkgBottom_ov.gif);	
  color: #ffffff;
}

#WelcomePage li.productdetails a, 
#PaymentProtectionPage li.paymentprotection a, 
#CardProtectionPage li.cardprotection a, 
#ApplyNowPage li.apply a {
	background-image: url(../../graphics/backgrounds/menuBkgTop_ov.gif);
	color: #ffffff;
}

/* =5.2 Secondary menu */
#secondarymenu ul {
   list-style: none;
	margin: 0 0 0 5px;   
}

#secondarymenu ul li {
  	background: none;
  	font-size: 1.2em;
	margin: 2px 0 0 0;
  	padding: 0 0 2px 0;
  	width: 155px;
}

#secondarymenu ul li a {
  	background: none;
  	color: #ffffff;
	display: block;
  	font-weight: bold;
  	padding:  4px 10px 4px 10px;
  	text-decoration: none;
}

#secondarymenu ul li a:hover, 
#secondarymenu ul li a:active, 
#secondarymenu ul li a:focus {
	color: #aa383a;
	text-decoration: none;
}

/* styles required to show selected tab when on that tab's page */
#SimpleToApplyPage li.simpletoapply, 
#ImportantInformationPage li.importantinformation,
#FaqPage li.faq{
  background-image: none;	
  color: #aa383a;
}

#SimpleToApplyPage li.simpletoapply a, 
#ImportantInformationPage li.importantinformation a,
#FaqPage li.faq a{
	background-image: none;
	color: #aa383a;
}

/* =5.3 Progress "menu" */
#primarycol #progress ol {		
	padding: 0 0 0 5px;
}

#primarycol #progress ol li {
	color: #aa383a;
	font-size: 1.2em;
	font-weight: bold;	
	list-style-type: none;
	padding: 0 0 10px 15px;
}

#primarycol #progress ol li.completed {
	color: #002e6e;
	padding: 0 0 10px 0;
}

#primarycol #progress ol li.current {
	color: #002e6e;
	padding: 0 0 10px 0;
}

/* =5.4 Anchors*/
#maincontent  a {
  	color: #002e6e;
  	font-weight: normal;
  	text-decoration: underline;
}

#maincontent  a:hover, 
#maincontent  a:active, 
#maincontent  a:focus {
	color: #dc241f;
	font-weight: normal;
  text-decoration: underline;
}

#maincontent  a:visited {
	color: #000000;
}

#maincontent a.popup {
	background:  url("../../graphics/icons/popup.gif") right no-repeat;
	padding: 0 20px 0 0;
}

#maincontent #faqanswers a{
	font-size: 1em;
	padding: 0 0 20px 0;
}

#maincontent #faqanswers a:hover, 
#maincontent #faqanswers a:active, 
#maincontent #faqanswers a:focus {
	font-size: 1em;
}

#maincontent #faqanswers h2 a {
	font-weight: bold;
	text-decoration: none;
}

#maincontent #faqanswers h2 a:hover, 
#maincontent #faqanswers h2 a:active, 
#maincontent #faqanswers h2 a:focus {
	color: #dc241f;
}

/* =5.5 Print button link*/
#printbutton a {
	background: url("../../graphics/icons/print.gif") top left no-repeat;
	font-size: 1.2em;
	font-weight: normal;
	padding: 0 0 0 18px;
	text-decoration: underline;
}

#printbutton a:hover, #printbutton a:active, #printbutton a:focus {
	color: #dc241f;
	text-decoration: underline;
}

/* =6 Lists */
/* =6.1 Unordered list */
#maincontent ul {
	list-style: none;
	margin: 0 0 20px 15px;	
}

#maincontent ul li {	
	color: #565659;
	font-size: 1.2em;
	list-style-image: url("../../graphics/bullets/discBullet.gif");
	list-style-type: none;
	margin-left: 3px;	
}

#maincontent ul li li {	
	font-size: 1em;	
}

/* =6.2 Ordered list */
#maincontent ol {
	margin: 0 0 20px 15px;	
}

#maincontent ol li {
	background: none;
	color: #565659;
	font-size: 1.2em;
	line-height: 1.8em;	
	margin-left: 3px;
}

/* =6.3 Error block list */
#maincontent div.errorblock ul {
	margin: 10px 10px 5px 20px;
}

#maincontent div.errorblock li {
	font-size: 1em;
	list-style-image: none;
	list-style-type: disc;
}

/* =6.4 Important Information page lists */
#maincontent div.scrollbox ul, #maincontent div.scrollbox ol {
	margin: 0 0 20px 15px;
}

/* =6.5  FAQ Page Questions */
#FaqPage #maincontent ul {
	margin: 0 0 20px 20px;	
}

/* =6.6 Product details page card info*/
#maincontent ul.cardinfo {
	margin: 0;
	width: 60%;
}

#maincontent ul.cardinfo li {
	list-style-image: none;
	padding: 0 0 10px 0;
}

/* =7 Tables */
/* =7.1 Generic table */
table.simpletable {
	border: 0;
	border-bottom: 3px solid #00539f;
	margin: 0 0 20px 0;
	width: 100%;
}

table.simpletable thead th {
	background: #00539f;
	color: #ffffff;
	font-size: 1.2em;
	font-weight: bold;
	padding: 4px 0 4px 10px;
	text-align: left;	
}

table.simpletable td, table.simpletable th{
	background: #eeeeee;
	border-top: 1px solid #ffffff;
	font-size: 1.1em;
	text-align: left;
	font-weight: normal;
	padding: 4px 0 4px 10px;
} 

table.simpletable tr.alternate th, table.simpletable tr.alternate td {
	background: #f9f9f9;
}

/* =7.2 Application summary table */
table.applicationsummary {
	border: none;
	font-size: 1.2em;
	margin: 0 0 20px 0;
	width: 100%;
}

table.applicationsummary thead th {	
	background: #ffffff;
	color: #aa383a;
	font-size: 1.4em;
	font-weight: bold;
	padding: 4px 0 4px 0;
	text-align: left;	
}

table.applicationsummary th.col1 {
	width: 75%;
}

table.applicationsummary th.col2 {
	width: 25%;
}

table.applicationsummary  td, table.applicationsummary  th{
	background: #ffffff;
	border-top: 1px solid #ffffff;
	font-size: 1em;
	font-weight: normal;
	padding: 4px 0 4px 10px;
	text-align: left;
} 

table.applicationsummary  tr.alternate th, table.applicationsummary  tr.alternate td {
	background: #f9f9f9;
}

/* =7.3 Summary Popup tables */
#summarypopuppage table.summarybox {
	border: 1px solid #cccccc;	
	font-size: 1.2em;
	margin: 0 0 20px 0;
}

#summarypopuppage table.summarybox th, 
#summarypopuppage table.summarybox td {
	border: 1px solid #cccccc;
	line-height: 1.5em;
	padding: 4px;
}

#summarypopuppage table.summarybox tbody th {
	font-weight: normal;
}

#summarypopuppage table.summarybox td ul {
	font-size: 0.9em;
	margin: 10px 0 10px 20px;
}

#summarypopuppage table.summarybox .col1 {
	font-weight: bold;
	width: 20%;
}

#summarypopuppage table.summarybox td.aprtable,
#summarypopuppage table.summarybox th.aprtable {
	text-align: center;
}

/* Three col table */
#summarypopuppage table.summarybox .threecol2 {
	width: 55%;
}

#summarypopuppage table.summarybox .threecol3 {
	width: 25%;
}

/* Four col table */
#summarypopuppage table.summarybox .fourcol2 {
	width: 26%;
}

#summarypopuppage table.summarybox .fourcol3 {
	width: auto;
}

#summarypopuppage table.summarybox .fourcol4 {
	width: 26%;
}

/* =8 Form Inputs */
/* =8.1 Fieldset */
#maincontent fieldset {
	border: 0;
	font-size: 1.2em;
	padding: 0 0 20px 0;
	vertical-align: text-top;	
}

/* =8.2 Legend */
#maincontent legend {
	color: #aa383a;
	font-size: 1.4em;
	font-weight: bold;
	_margin: -7px;
	padding: 15px 0 10px 0;	
}

/* =8.3 Labels */
#maincontent label {
	color: #565659;
	display: inline;
	float: left;
	margin: 10px 10px 0 0;
	padding: 2px 0;
	width: 14.5em;
}

#maincontent label em {
	color: #565659;
	font-size: 1em;
	font-style: italic;
	font-weight: normal;
	margin: 10px 0 0 20px;
}

#maincontent label.radiolabel {
	float: left;
	margin: 10px 0 0 0;
	padding: 2px 0;
	width: 4em;	
}

/* =8.4 Input fields */
#maincontent input.txt{
	border: 1px solid #000000;
	font-size: 1em;
	margin: 10px 0 0 0;
	padding: 2px;
	width: 11em;
}

#maincontent input.radio {
	border: none;	
	float: left;
	margin: 10px 0 0 0;
	width: 1.5em;	
}

#maincontent input.checkbox {
	border: none;	
	float: left;
	margin: 11px 0 0 0;
	width: 1.5em;	
}

#maincontent input.dobday {
	margin: 10px 0 0 0;
	text-align: center;
	width: 2em;
}

#maincontent input.dobmonth {
	margin: 10px 0 0 0;
	text-align: center;
	width: 2em;
}

#maincontent input.dobyear{
	margin: 10px 0 0 0;
	text-align: center;
	width: 4.4em;
}

#maincontent input.years {	
	margin: 10px 0 0 0;
	text-align: center;
	width: 1.5em;
}

#maincontent input.months{
	margin: 10px 0 0 0;
	text-align: center;
	width: 1.5em;
}

#maincontent select {
	font-size: 1em; 
	width: 11.5em;
	padding: 2px;
	margin: 10px 0 0 0;
}

#maincontent span.formanswer {
 color: #000000;
 margin: 10px 0 0 2px;
 padding: 2px 0;
}

/* =8.5 Buttons */
#buttons {
	height: 30px;
	margin: 30px 0 0 0;
	text-align: center;
	width: 100%;	
}

#maincontent input.formbutton,
#maincontent input.formbuttonfind,
#maincontent input.formbuttongoback,
#maincontent input.formbuttonproceed {
	background: #cccccc;
	border: 0;
	cursor: pointer;
	font-weight: normal;
	padding-left: 5px;
	padding-right: 7px;
}

#maincontent input.formbuttongoback {
	float: left;
}

#maincontent input.formbuttonproceed {
	float: right;
}

/* =8.6 Input errors */
#maincontent input.error,
#maincontent select.error,
#maincontent input.radioerror,
#maincontent span.radioerror input, 
#maincontent input.checkboxerror{
	border: 1px solid #0469b9;
	background: #fffccc;
}