/* CSS Document for Unity Microsite Sainsbury's brand */

body {
	background-color: #ffffff;
	color: #666666;
	font: 70% Verdana, Arial, Geneva, Helvetica, sans-serif;
}

* html body { /* Applies rule to Internet Explorer only */
	background-color: #ffffff;
}

/* Layout Rules */
#topbanner {
	height: 81px;
	background-color: #ffffff;
}

#productmenu {
	padding: 106px 0 30px 0;
	width: 140px;
}

#secondarymenu {
	background-color: #eeeeee;
	color: #ff9900;
	top: 96px;
	width: 170px;
}	

/*
#maincontent {
	width: 760px;
}
*/

#middle {
	padding: 91px 20px 20px 10px;
}

#contentborder { /* Draws the vertical border to the right of the Menu for Mozilla */
	border-left: none;
	padding: 0;
}

#footer {
	background: url("../../graphics/backgrounds/footer.gif") repeat-x bottom left transparent;
	color: #ffffff;
	padding: 20px 0 0 0;
}



#leftlogocontainer {
	top: 225px;
	width: 165px;
}

/* New product menu with Sliding Doors */
#productmenu li {
 width: 155px;
}

#productmenu a {
  color: #666666;
  font-size: 90%;
  font-weight: bold;
}

#productmenu a:hover {
	color: #ff9900;
}

/* styles required to show selected tab when on that tab's page */
#productdetailspage li.productdetails a, 
#loanIllustrationPage li.loanillustration a,
#paymentprotectionpage li.paymentprotection a, 
#applyPage li.apply a {
	color: #ffffff;
}

/* Secondary menu */

#secondarymenu ul li a {
	color: #ff9900;
}

/* Branding rules */
#leftlogocontainer img {
	height: 200px;
	width: 150px;
}

#topbanner img {
	height: 70px;
	padding: 0;
	margin: 0;
	width: 100%;
}

#topbanner img.banneradvert {
	display: none;
}

/* Main content */

#maincontent h1 {
	color: black;
}

#maincontent h2 {
	color: #ff9900;
}

#maincontent h3 {
	color: #ff9900;
}

#maincontent p a {
  color: #004694;
}

#maincontent table.creditcaretable {
	border-color: #CCCCCC;
}

#maincontent table.creditcaretable thead th {
	background-color: #ff9900;
	border: none;
	color: #ffffff;
}

#maincontent table.creditcaretable tr th {
	border-color: #CCCCCC;
}

#maincontent table.creditcaretable tr td {
	border-color: #CCCCCC;
}

#maincontent table.creditcareoptionstable {
	border: none;
	border-collapse: collapse;
	width: 0%;
	margin-left: 0px;
	margin-bottom: 20px;
}

#maincontent table.creditcareoptionstable td {
	border-left-color: #cccccc;
	border-right-color: #cccccc;
	/* ERIC border-left: 1px solid #143E7A;
	border-right: 1px solid #143E7A;*/
}

#maincontent table.creditcareoptionstable tr.invisiblerow td {
	background-color: #ff9900;
	color: #ff9900;
}

#maincontent table.creditcareoptionstable thead th,
#maincontent table.creditcareoptionstable thead td {
	background-color: #ff9900;
	color: #FFFFFF;
	border: none;
}
#maincontent table.creditcareoptionstable thead td 

/* Form Submission Buttons */

#maincontent input,
#maincontent select {
	border: 1px solid #cccccc;
	padding: 1px 0 1px 3px;
	color: #666666;
}


#maincontent input.formbutton 
{
	background-color: #ee490f;
	color: #ffffff;
	padding: 0 1px 0 1px;
	filter: none;
	border: 1px solid #ee490f;
}

#maincontent input.proceed {
	padding-right: 17px;
	padding-left: 17px;
	text-align: center; 
}

#maincontent input.goback {
	padding-left: 17px;
	padding-right: 17px;
	text-align: center;
}


#maincontent div.errorblock {
	background-color: #ffffcc; 
	border-color: #cccccc;
	color: #666666;
}

#maincontent table.faqquestions a:link
{
	color: #004694;
}
#maincontent table.faqquestions a:active,
#maincontent table.faqquestions a:hover
{
	color: #ff6600;
}
#maincontent table.faqquestions a:visited {
	color: #004694;
}

#maincontent #faqanswers {
	border-color:#ff9900;
}

#maincontent #faqanswers h2,
#maincontent #faqanswers h3 {
	color: #ff9900;
}

/* Important information screen */
#maincontent #importantinformation {
	border-color: #ff9900;
}

#maincontent #importantinformation h2,
#maincontent #importantinformation h3 {
	color: #ff9900;
}

/* Terms and Conditions screen */
#maincontent #legalinformation {
	border-color: #ff9900;
}

/* Budget Planner screens */
#maincontent table.budgetplannertable {
	background-color: #FFFFFF;
	border-color: #ffffff;
	color: #ff9900;
	width: 400px;
    margin-bottom: 0;
    margin-left: 180px;
} 

#maincontent table.budgetplannertable input.formbutton {
	color: #ffffff;
	font-size: 100%;
}

#maincontent table.budgetplannertable col.threecol2,
#maincontent table.budgetplannertable col.threecol3 {
	text-align: left;
}

#maincontent table.budgetplannertable td.valignbottom {
	vertical-align: bottom;
}

#maincontent table.budgetplannertable tr.budgetplanneraltrow {
	background-color: #EEEEEE;
}

#maincontent table.budgetplannertable thead tr th {
	background-color: #ffffff;	
	color: #666666;
	font-weight: bold;
	border-bottom: none;
}

#maincontent table.budgetplannertable td,
#maincontent table.budgetplannertable th {
	background-color: #ffffff;
	border-right-color: #ffffff;
	border-bottom: none;
	color: #666666;
}
#maincontent table.budgetplannertable th
{
	font-weight: bold;
}

#maincontent table.budgetplannertable td div.totals {
	border-bottom: 1px solid #666666;
	padding-bottom: 3px;
	width: 87px;
}

/* Commission Illustration table */
#maincontent table.commissionillustrationtable {
	background-color: #FFFFFF;
	border-color: #ff9900;
	color: #ff9900;
} 

#maincontent table.commissionillustrationtable thead th {
	background-color: #ff9900;
	color: #FFFFFF;
}

#maincontent table.commissionillustrationtable th {
	border-right-color: #ff9900;
	color: #666666;
}
#maincontent table.commissionillustrationtable td {
	border-right-color: #ff9900;
	color: #666666;
}

/******************************************************/
/* Box with rounded border without using tables styles */
/******************************************************/

div.roundedboxtop {
	background: url(../../graphics/borders/top.gif) top repeat-x;
	height: 16px;
}

div.roundedboxtop img.left {
	float: left;	
	margin-left: -3px;
	voice-family: "\"}\""; 
	voice-family:inherit; 
	margin-left: 0;
}

div.roundedboxtop img.right {
	float: right;
	margin-right: -3px;
	voice-family: "\"}\""; 
	voice-family:inherit; 
	margin-right: 0;
}

div.roundedboxmiddle {
	background: url("../../graphics/borders/right.gif") right repeat-y;
	border-left: 1px solid #999999;
	margin: 0;
	padding: 0 16px 0 16px;
}

div.roundedboxmiddle h3
{
	margin-top: 0;
}

div.roundedboxbottom {
	background: url("../../graphics/borders/bottom.gif") bottom repeat-x;
	height: 17px;
	margin-bottom: 10px;
}

div.roundedboxbottom img.left {
	float:left;
	margin-left: -3px;
	voice-family: "\"}\""; 
	voice-family:inherit; 
	margin-left: 0;
}

div.roundedboxbottom img.right {
	float: right;
	margin-right: -3px;	
	voice-family: "\"}\""; 
	voice-family:inherit; 
	margin-right: 0;
}

#maincontent div.legalinformation {
	background-color: #eeeeee;
}

#maincontent table.creditcareoptionstable {
	border: none;
	border-collapse: collapse;
}

#maincontent table.creditcareoptionstable thead th.topleft {
	background: url("../../graphics/borders/topleftcorner.gif") top left no-repeat #ff9900;
	border: none;
	width:auto;
}

#maincontent table.creditcareoptionstable thead th.topright {
	background: url("../../graphics/borders/toprightcorner.gif") top right no-repeat #ff9900;
}

#maincontent table.creditcareoptionstable thead th.bottomleft {
	background: url("../../graphics/borders/bottomleftcorner.gif") bottom left no-repeat #ff9900;
	border: none;
}

#maincontent table.creditcareoptionstable thead td.bottomright {
	background: url("../../graphics/borders/bottomrightcorner.gif") bottom right no-repeat #ff9900;
}

#maincontent table.creditcareoptionstable thead th {
	padding-left: 5px;
}

#maincontent table.creditcareoptionstable thead td {
	border: none;
}

#maincontent table.creditcareoptionstable tr.invisiblerow {
	border: none;
}

#maincontent table.creditcareoptionstable tr.invisiblerow td{
	background: none;
	border: none;
	color: #ffffff;
}

#maincontent table.creditcareoptionstable ul {
	padding-left: 3px;
}

#maincontent table.creditcareoptionstable td.col1 {
	border-left: 1px solid #CCCCCC;
	border-right: 0px;
	font-size: 90%;
	padding: 0 5px 0 5px; 
	vertical-align: top;
	width: 250px;
}

#maincontent table.creditcareoptionstable td.col2 {
	border-left: 0px;
	border-right: 1px solid #CCCCCC;
	font-size: 90%;
	padding: 0 5px 0 5px; 
	vertical-align: top;
}

#maincontent table.datagrid {
	border: none;
	margin-bottom: 25px;
	width: 400px;
}

#maincontent table.datagrid tr.datagridheader td {
	background-color: #ff9900;
	border-top: transparent;
	border-left: transparent;
	border-right: 1px solid transparent;
	border-bottom: 1px solid #ff9900;
	color: #FFFFFF;
}

#maincontent table.datagrid tr.datagriditem {
	background-color: #fffffff;
	border-color: #ffffff;
	padding: 2px 0 2px 0;
}

#maincontent table.datagrid tr.alternatingdatagriditem {
	background-color: #ffffff;
	border-color: #ffffff;
	padding: 2px 0 2px 0;
}

#maincontent table.datagrid tr.datagridfooter {
	background-color: #ff9900;
	font-weight: bold;
	height: 17px;
}

#maincontent table.datagrid tr.datagridfooter td {
	border-right: 1px solid #ff9900;
}

#maincontent table.datagrid tr.datagriditem td.leftcol,
#maincontent table.datagrid tr.alternatingdatagriditem td.leftcol,
#maincontent table.datagrid tr.datagridheader td.topleft {
	padding-left: 10px;
}

#maincontent table.datagrid tr.datagriditem td,
#maincontent table.datagrid tr.alternatingdatagriditem td {
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
}

#maincontent table.datagrid td.topleft {
	background: url("../../graphics/borders/topleftcorner.gif") top left no-repeat #ff9900;
	border-left: none;
}

#maincontent table.datagrid td.topright {
	background: url("../../graphics/borders/toprightcorner.gif") top right no-repeat #ff9900;
	border-right: none;
	text-align: center;
}

#maincontent table.datagrid td.bottomleft {
	background: url("../../graphics/borders/bottomleftcorner.gif") bottom left no-repeat #ff9900;
	border-left: none;
}

#maincontent table.datagrid td.bottomright {
	background: url("../../graphics/borders/bottomrightcorner.gif") bottom right no-repeat #ff9900;
	border-right: none !important;
}
/* MICROSITE ONLY STYLES -  do not change these!  */

#printbutton {
	top: 90px;
	right: 10px;
}
#printbutton a {
	background: url("../../graphics/icons/print.gif") left no-repeat;
    color: #004694;
	font-size: 80%;
	font-weight: normal;
	line-height: 20px;
	padding: 5px 5px 5px 20px;
}