/*reset to common baseline*/
/*@import url("reset.css");*/

body { margin: 0; padding: 0; background-color: #fff; font-size: .7em; font-family: Verdana, Arial, Helvetica, sans-serif; }

/* Fix Trusteer Raport popup list rendering */
#awa-body ul {
  padding-left: 40px;
}

/****************************** page area styling ********************************/
/***************** use this for look/feel configuration only *********************/
#header h1 { float: left; margin: 0; padding-left: 10px; height: 80px; line-height: 80px; }

#content ul { clear: both; margin: 1em; margin-left: 3em; list-style-type: disc; }
#content ol { clear: both; margin: 1em; margin-left: 3em; padding-left: 5px;}
#content li { padding: 3px; }

table.table-layout { width: 100%; border-collapse: collapse; }

#footer {}
#footer p {margin:0; padding:5px 10px}

/*************************** page layout **************************************/
/************* use this for positional configuration only *********************/ 
#content-header { background-color: #e8e7e7; height: 21px; }

#content { padding: 5px; vertical-align: top; }

#nav-A { padding-left: 2px; width: 190px; vertical-align: top; }
#nav-A-header { background-color: #e8e7e7; height: 21px; }
#nav-B { width: 200px; vertical-align: top; }
#nav-B-header { background-color: #b8b7b7; height: 21px; }

/********************************* general text **********************************/
/******************* use header, para and span for styling **********************/
#content h1, h2, h3, h4, h5, h6, p { clear: both; margin-left: 1%; margin-bottom: 0.5em; font-family:arial,helvetica,geneva,sans-serif; }
#content h1 { color:#333; font-size: 1.3em; }
#content h2 { margin: 13px 4px; padding: 3px; color: #fff; background-color: #b8b7b7; font-size: 1.2em; font-family: Verdana,Arial,Helvetica,sans-serif; }
#content h3, #content h4 { }
#content h5 { border-bottom: deepskyblue 2px solid; } /* used for light weight separator */

#content p { font-family: verdana,arial helvetica,arial,sans-serif; }
#content .mnd { color: red; font-weight: bold; } /* used to highlight mandatory message */
#content .note { color: red; font-size: 1.2em; font-weight: bold; } /* used for alert e.g. */
#content .strong { color:#333; font-family:verdana,arial,helvetica,arial,sans-serif; font-size: 100%; font-weight: bold; line-height:120%; } /* lower weight then alert level */
#content .largebold { font-weight: bold; font-size: 1.2em; }

#content div.declaration { border: 1px solid black; height: 300px; overflow-x: hidden; overflow-y: scroll; } /* scrolling declarations */

/********************************* question/answer *********************************/

/* use 55% width for the prompt and float it left of the input field */

#content div.question { float: left; margin-right: 1em; width: 45%; } 
#content div.answer, div.v-answer { }

/* v-answer can be used for headers above entry fields - but this can trigger IE6 bugs - best not to use until IE 7/8 is common */
#content div.v-answer { float: left; margin-right: 1em;  margin-left: 1em; }

/* defines a question/answer slot - slot can also be used for conditional display if required */
#content div.slot {
	margin: 6px;
	margin-top: 1em;
	width: 98%;
	clear: both;
  margin-left: 0.3em;
} 

#content br.clear {clear: both; } /* forces subsequent div to appear below */

#content b.help_icon { 
	cursor: pointer; 
	color: #000000; 
	font-weight: bold; 
	background-color: #B8B7B7; 
	background-image: url(../images/components/icons/form_btn_greyshine.gif); 
	padding: 2px 2px 2px 1px; 
	border-color: #6D6B75 #87888D #87888D #6D6B75; 
	border-style: solid; 
	border-width: 1px 2px 2px 2px;
	text-decoration: none;
}



/****************************** entry fields *****************************************/

#content .entryField, .entryField02, .entryField04, .entryField06, .entryField08, .entryField10, 
.entryField12, .entryField14, .entryField16, .entryField18, .entryField20, .entryField30, .entryField40 { 
	background-color: #FFFFFF;
	color: #333333;
	font-family: verdana,arial,helvetica,arial,sans-serif;
	font-size: 100%;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

/* define scalable widths for entry fields */
#content .entryField02 {width: 2em}
#content .entryField04 {width: 3em}
#content .entryField06 {width: 4em}
#content .entryField08 {width: 6em}
#content .entryField10 {width: 7em}
#content .entryField12 {width: 8em}
#content .entryField14 {width: 9em}
#content .entryField16 {width: 10em}
#content .entryField18 {width: 12em}
#content .entryField20 {width: 13em}
#content .entryField30 {width: 19em}
#content .entryField40 {width: 25em}

#content .error-back { background-color: pink; }

/********************************** submit buttons ***********************************/

.button-note { 
	width: 18em;
	font-weight: bold;
	text-align: center;
	color: #333333;
	padding-bottom: 1em;
}

div.submit_left { float: left; }
div.submit_right { }

#nav-A div.button-bar { margin-top: 5px; margin-left: 1px;} /* savings menu/operation menu */

/* example of use of image buttons - probably best not used - would need to be reworked for every site */
/* also in present incarnation a width is required - problematical for a white label site */ 
/*
input.button_s_on  {color: #cc0000; background: url(/images/whiteLabel/button_s_on.gif)  no-repeat; font-weight: bold; display: block; text-decoration: none; width: 78px;  height: 23px; max-height: 22px; border: 0px; cursor: pointer; }
input.button_s_off {color: #196DB5; background: url(/images/whiteLabel/button_s_off.gif) no-repeat; font-weight: bold; display: block; text-decoration: none; width: 78px;  height: 23px; max-height: 22px; border: 0px; cursor: pointer; }
input.button_m_on  {color: #cc0000; background: url(/images/whiteLabel/button_m_on.gif)  no-repeat; font-weight: bold; display: block; text-decoration: none; width: 108px;  height: 23px; max-height: 22px; border: 0px; cursor: pointer; }
input.button_m_off {color: #196DB5; background: url(/images/whiteLabel/button_m_off.gif) no-repeat; font-weight: bold; display: block; text-decoration: none; width: 108px;  height: 23px; max-height: 22px; border: 0px; cursor: pointer; }
input.button_l_on  {color: #cc0000; background: url(/images/whiteLabel/button_l_on.gif)  no-repeat; font-weight: bold; display: block; text-decoration: none; width: 131px; height: 23px; max-height: 22px; border: 0px; cursor: pointer; }
input.button_l_off {color: #196DB5; background: url(/images/whiteLabel/button_l_off.gif) no-repeat; font-weight: bold; display: block; text-decoration: none; width: 131px; height: 23px; max-height: 22px; border: 0px; cursor: pointer; }
input.button_xl_on  {color: #cc0000; background: url(/images/whiteLabel/button_xl_on.gif)  no-repeat; font-weight: bold; display: block; text-decoration: none; width: 165px; height: 23px; max-height: 22px; border: 0px; cursor: pointer; }
input.button_xl_off {color: #196DB5; background: url(/images/whiteLabel/button_xl_off.gif) no-repeat; font-weight: bold; display: block; text-decoration: none; width: 165px; height: 23px; max-height: 22px; border: 0px; cursor: pointer; }
*/
/******************************** css submit button ********************************/
button.invisibleSubmit { 
	border: none; 
	color: #333333; 
	background-color: transparent; 
	cursor: pointer; 
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 9pt;
}

/*input.submit { */
input.button_p { 
	width: auto; 
	overflow: visible; 
	border: 1px solid black; 
	padding: 2px; 
	color: black; 
	background-color: #E8E7E7; 
	font-weight: bold; 
	cursor: pointer; 
	font-size: 85%;
	font-family: Verdana,Arial,Helvetica,sans-serif;
}

/*#content input.button_p { background: #7cb721 url(/images/button_primary.jpg) right bottom repeat-x; border: 0; color: white; cursor: pointer; font-size: 1em; font-weight: bold; line-height: 1.1em; margin: 0 0 10px 0; overflow: visible; padding: 0.25em 1em 0.5em 0.8em; }*/

input.submit:hover {} 

/********************************** error display ********************************/

#content div.message-area {
	clear: both;
	float: none;
	background-color: #E8E7E7;
	margin-bottom: 1em;
}

#content div.message-area div.error-count { 
	/*display: none;*/
  color: #CC3300; 
	padding: 6px;
	font-weight: bold;
	display: block;
}

#content ul.error-line {
	list-style-type: none;
	padding: 0;
}

#content div.message-area div.error-text { 
	color: #CC3300; 
	padding: 6px;
	font-weight: bold;
	display: block;
}

#content div.message-area div.message-text { 
	color: green; 

	padding: 6px;
	font-weight: bold;
	display: block;
}

#content div.field-error {
  color: #CC3300; 
	font-weight: bold;
}

/************************ account application navigation ***************************/
div.header {
	font-size: 120%;
	color: white;
	background-color: #B8B7B7;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	padding: 3px;
	font-weight: bold;
}

#nav-A div.lending li, #nav-A div.savings li {
	margin-top: 1em;
	margin-bottom: 1em;
}

#nav-A li a {
	color:#333333;
	font-weight:bold;
}

#nav-A div.left-nav-logo1 {
	width: 190px;
}


#nav-A div.left-nav-logo2 {
	background-color: #B8B7B7;
	width: 190px;
	margin-bottom: 1em;
}

#nav-A ul.nav {list-style-type: none; padding-left: 0; margin-left: 0; font-weight: bold; text-align: right; }
#nav-A ul.nav li {display: block; border-bottom: 1px dotted #999999; padding:5px 6px; }
#nav-A ul.nav a {display: block; text-decoration: underline; color: black}

#nav-A ul.nav li.last { }
#nav-A ul.nav li.current {  }
#nav-A ul.nav li.next { color: #666666; }
#nav-A ul.nav li.last:hover { }


/*********************** content tab bar  ************************/
#content ul.nav { list-style-type: none;  padding-left: 0; margin-left: 0; padding-top: 6px; padding-bottom: 5px; border-bottom: 1px solid; }
#content ul.nav li { display: inline; }
#content ul.nav a { border: 1px solid; border-bottom: none; padding:5px 10px 5px 10px; margin-left: 5px; background: yellow; text-decoration: none; }

/************************* header tab bar - client specific **************************/
#header .logo-area {
	text-align: right;
	padding: 14px;
}

#header .coloured-bar {
	background-color: #B8B7B7;
	height: 44px;
	padding: 0;
	margin: 0;
}

#header table.tab-bar { 
}

#header td.tab-remainder { 
	border-bottom: 1px solid #333333;
}


#header table.tab-bar td.tab {
	background-color:#E8E7E7; 
	border: 1px solid #333333;
	font-weight:bold;
	text-align: center;
	width: 1px;
	white-space: nowrap;
	padding: 3px 6px;
}

#header table.tab-bar td.selected {
	background-color: red;
	border-bottom: 1px solid red;
}

#header table.tab-bar td.tab a { 
	text-decoration: none; 
	font-weight: bold; 
	color: #333333;
}

#header table.tab-bar td.tab a:hover {
	text-decoration: underline; 
	border-color: #333333;
}

#header table.tab-bar td.tab-spacer {
	width: 0;
	padding-right: 1px;
	border-bottom: 1px solid #333333;
}
/******************  account operations ***********************/

#nav-B h2 {
	background-color:#B8B7B7;
	color:white;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:120%;
	padding:3px;
}

#nav-B li {
	margin-bottom: 1.5em;
}

#nav-B li a {
	color: #333333;
	font-weight: bold;
}

/******************  savings account operations menu ********************************/

#nav-B ul.menu {
	margin-left: 1em;
}

#nav-B ul.menu-root li div {
	margin-bottom: 1.5em;
	border: 1px solid #91D7A6;
	background-color: #E6F6EA;
	margin-right: 5px;
	margin-left: 5px;
}

#nav-B ul.menu-root li div :hover {
	background-color: #2FB457;
	color: white;
}

#nav-B ul.menu-root div.menu-item {
	background-color: #91D7A6;
}

#nav-B ul.menu-root div.level-0 {
	background-color: #E6F6EA;
}

#nav-B ul.menu-root li div a {
	font-weight: bold;
	color: #333333;
	text-decoration: none;
	display: block;
	padding: 5px;
	font-size: 90%;
}

/***************** Display Only Table Styles *****************/
#content table.tbl_display { 
	margin-left: 1%;
	/*float: left;*/ 
	width: 98%; 
	border-collapse: collapse; 
	margin-bottom: 3em;
}

#content table.tbl_display th { 
	vertical-align: top;
	padding: 3px;
}

/* applies to all lines */
#content table.tbl_display tr { 
	line-height: 120%; 
} 
#content table.tbl_display th, td { }

#content table.tbl_display td { 
	padding: 5px;
}

/* odd lines - note that IE6 has issues with borders styling TR's so TD's styled instead */
#content table.tbl_display tr.odd td { 
	background-color: #E5F8E9;
	border-top: 1px solid #2FB457;
	border-bottom: 1px solid #2FB457;
}

/* even lines */
#content table.tbl_display tr.even td {}

/* used for numeric data */
#content table.tbl_display th.num, td.num { 
	text-align: center;
}

/* used for text data */
#content table.tbl_display th.txt, td.txt { 
	text-align: center; 
} 

/* used for control ie buttons/checkboxes */
#content table.tbl_display th.control, td.control { 
	text-align: center; 
}

.cardLogosArea { text-align:right; margin-bottom: 1.0em; }

/* hide new help icon */
.helpImage { display: none; }

.text-small {font-size: .85em; line-height: 1.4em; }
td .text-small {font-size: .85em; line-height: 1.8em; }

#content .emphasise { color: #1B883C; font-weight: bold; }

#content .removeButtonPadding button { padding: 0; }
button.invisibleSubmit { overflow:visible; width: 0; margin-left: .5em; text-decoration: underline;}
button.invisibleSubmit[class] { width: auto; margin-left: 0; }