/* 
ISSUER CSS Document for CREATION ADAMS brand 
Dave Randall 01/12/2005

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
*/

html * {
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
	min-height: 99%;
}

body {
	background: url("../../graphics/backgrounds/mainBkg.gif")top left repeat-y;
	color: #000000;
	font: 62.5%/130%  Arial, Geneva, Helvetica, sans-serif;
}

#contentcontainer { /* DO NOT change order of attributes - 'Box Model Hack' */
	min-height: 100%;
	height: 100%;
	position: relative;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: auto;	
}

html>body #container { /* Be nice to Opera */
	height: auto;
}

/* =1 Standard tags */
abbr, acronym {
	border-bottom: 1px dotted #000000;
	cursor: help;
}

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

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

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

/* =2 Layout */
/* =2.1 Top banner */
#topbanner {
	background:  #bb9c41 url("../../graphics/backgrounds/bannerBg.gif") top left repeat-x;
	height: 100px;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 5;
}

/* =2.2 Primary column */
#primarycol {
	position: absolute;
	top: 110px;	
}

/* =2.3 Product menu */
#primarycol #productmenu {
	background: url("../../graphics/backgrounds/productMenu.gif") top no-repeat;
	margin: 0 0 10px 15px;
	padding: 10px 0 0 0;	
	top: 0;
	width: 172px;
	z-index: 4;
}

#primarycol #productmenu #productmenubottom {
	background: url("../../graphics/backgrounds/productMenuBottom.gif") bottom no-repeat;
	height: 15px;
	width: 172px;
}

/* =2.4 Progress "menu" */
#primarycol #progress {
	background: url("../../graphics/backgrounds/progressMenu.gif") top no-repeat;
	top: 0;
	width: 172px;
	z-index: 4;
}

#primarycol #progress #progressbottom {
	background: url("../../graphics/backgrounds/progressMenuBottom.gif") bottom no-repeat;
	height: 15px;
	width: 172px;
}

/* =2.5 Primary logo container */
#primarycol #primarylogocontainer  { 
	height: 214px;
	padding: 0;
	margin: 0 0 0 15px;
	width: 172px;
	z-index: 2;
}

/* =2.6 Secondary column */
#secondarycol {
	position: absolute;
	right: 0;
	top: 110px;
}

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

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

/* =2.8 Secondary logo container */
#secondarycol #secondarylogocontainer {
	padding: 0;
	width: 172px;
	z-index: 3;
}

/* =2.9 Main content box */
#maincontent {
	padding: 110px 195px 50px 195px;
}

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

/* =2.10 Print page button */
#printbutton {
	display: block;	
	position: absolute;
	top: 115px;	
	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;
	color: #333333 !important; /* The !important rule needs to be removed when inline style bug is removed from the error control */
	font-weight: bold;
	margin: 0 0 10px 0;
	padding: 10px 10px 15px 30px;
}

/* =2.12 Scrolling box */
#maincontent div.scrollbox {
	background-color: #f9f9f9;
	border-color: #999999;
	border-style: solid;
	border-width: 1px;
	margin: 15px 0 0 0;	
	overflow: auto;
	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: #f0f0f9;
	border: 1px solid #999999;
	padding: 5px;
	margin: 0 0 20px 0;
}

/* =2.16 FAQ answers box */
#maincontent #faqanswers {
	background-color: #f9f9f9;
	border: 1px dotted #999999;
	/* height: 130px;
	overflow: hidden; */ 
	margin: 15px 0 0 0;
	padding: 0 10px 10px 10px;
	height: 0;
	/* box model hack used to ensure background and border is shown in IE 5.5 SP2 - Do not change order of attributes */
	voice-family: "\"}\"";
	voice-family: inherit;
	height: auto;
	overflow: visible;
}

/* =2.17 Footer */
#footer {
	background: #016fc8 url("../../graphics/backgrounds/footer.gif") top left repeat-x;
	bottom: 0;
	color: #143e7a;
	height: 30px;
	position: absolute;
	width: 100%;	
	text-align: center;
	z-index: 10;	
}

/* 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: 70px;
	margin: 15px 0 0 20px;
	width: 250px;	
}

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

#productdetailspage img.cardinfo {
	float: left;
	margin: 0 0 10px 0;	
	position: relative;
}

#printheader {
	display: none;
	width: 772px;
}

/*  =4 Main headers and text */
#maincontent h1 {
	line-height: 1em;
	font-size: 1.6em;
}

#maincontent h2 {
	line-height: 1em;
	font-size: 1.4em;
}

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

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

#maincontent em {
	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: #000000;
	font-size: 1.1em;
	margin: 8px 0 0 20px;
}

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

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

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

#maincontent #faqanswers h3 {
	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: url("../../graphics/backgrounds/MenuBkgBottom.gif") bottom no-repeat;
  	font-size: 1.2em;
	margin: 2px 0 0 0;
  	padding: 0 0 2px 0;
  	width: 155px;
}

#secondarymenu ul li a {
  	background: url("../../graphics/backgrounds/MenuBkgTop.gif") top no-repeat;
  	color: #03568C;
	display: block;
  	font-weight: bold;
  	padding:  4px 10px 4px 10px;
  	text-decoration: none;
}

#secondarymenu ul li a:hover, #secondarycol #secondarymenu ul li a:active, #secondarycol #secondarymenu ul li a:focus {
	color: #e70033;
	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: url("../../graphics/backgrounds/MenuBkgBottom_ov.gif");	
  color: #ffffff;
}

#SimpleToApplyPage li.simpletoapply a, 
#ImportantInformationPage li.importantinformation a,
#FaqPage li.faq a{
	background-image: url("../../graphics/backgrounds/MenuBkgTop_ov.gif");
	color: #ffffff;
}

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

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

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

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

/* =5.4 Anchors*/
#maincontent  a {
  	color: red;
}

#maincontent a:hover, #maincontent a:active, #maincontent a:focus {
	color: red;
}

#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;
}

/* =5.5 Print button link*/
#printbutton a {
	background: url("../../graphics/icons/print.gif") top left no-repeat;
	color: #0066ca;
	font-size: 1.2em;
	line-height: 1.8em;
	padding: 0 0 0 18px;
}

#printbutton a:hover, #printbutton a:active, #printbutton a:focus {
	color: #ff0000;
}

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

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

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

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

/* =6.3 Error block list */
#maincontent div.errorblock ul {
	line-height: 1.5em;
	padding: 10px 10px 5px 20px;
}

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

/* =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 {
	list-style: none;
	margin: 0 0 20px 20px;	
}

/* =6.6 Product details page card info*/
#productdetailspage ul.cardinfo {
	float: left;
	font-size: 1em;
	list-style-type: none;
	position: relative;
	text-align: left;	
	width: auto;
}

#productdetailspage ul.cardinfo li {
	padding: 0 0 10px 0;
}

/* =7 Tables */
#tablewrapper {
	width: 99%;
}

/* =7.1 Generic table */
table.simpletable {
	border: 1px solid #016fc8;
	font-size: 1.2em;
	margin: 0 0 20px 0;
	width: 100%;
}

table.simpletable thead th {
	background: #016fc8;
	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 {	
	font-size: 1.2em;
	margin: 0 0 20px 0;
	width: 100%;
}

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

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

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

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;
	vertical-align: top;
}

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

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

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

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

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

#maincontent label.screenreader {
	color: #ffffff; 
	font-size: 1px;
	height: 1px;
	left: -999em;
	position: absolute;
	width: 1px;		
}

#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 #0469b9;
	font-size: 1em;
	margin: 10px 0 0 0;
	padding: 2px;
	width: 11em;
}

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

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

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

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

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

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

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

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

#maincontent span.formanswer {
 color: #000000;
 display: inline;
 float: left;
 margin: 10px 0 0 2px;
 padding: 2px 0;
 width: auto;
}

/* =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 {
	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;
}