 

 

/********************** Lists **********************/
ul{
	margin:0;
	padding:0 0 10px 0;}
	
ul li {
	padding:0 0 0 1px;
	margin: 0 0 8px 0;
	line-height:20px;
	background:url(../images/bullet.gif) no-repeat 2px 7px;}
	 
li ul { 
	padding:0;
	margin: 5px 0 0 0;}
	
li ul li {
	background:url(../images/sub_bullet.gif) no-repeat 3px 6px;
	margin: 0 0 5px 0;
	padding:0 0 0 16px;
	list-style-type: none;}

li ul li ul { 
	padding:0;
	margin: 5px 0 0 0;}
	
li ul li ul li {
	background:url(../images/sub_sub_bullet.gif) no-repeat 3px 4px;
	margin: 0 0 5px 0;
	padding:0 0 0 16px;}

ol{
	margin:0 0 0 5px;
	padding:0;}
	
li ol { 
	padding:0;
	margin: 10px 0 0 0;}
	

/********************** Form **********************/	
/* Textboxes */
 .textbox {
	clear: both;
	width: 160px;
	height: 31px;
	display: block;
	
	border:0;
	padding:0;
	margin: 0 0 5px 0;
	background: url(../images/grp_textbox.gif) left top no-repeat;}

.textbox input {
	background-color: transparent;
	border: 0;
	color: #727272;
	font-size:14px;
	margin: 0 0 0 5px;
	outline: none;
	padding: 6px 5px 4px 0;
	width: 145px;}

/* Drop down styles*/
div.selectbox-wrapper {
	position:absolute;
	width:174px;
	background-color:white;
	border:1px solid #ccc;
	margin-top:-5px;
	padding:0px;
	text-align:left;
	max-height:200px;
	overflow:auto;
	
	z-index:10;
	}
	
/*Drop down list styles*/
div.selectbox-wrapper ul {
	list-style-type:none;
	margin:0;
	padding:0;}
	
/* Drop down list items style*/
div.selectbox-wrapper ul li {
	clear: both;
	background: none;
	cursor:pointer;
	display:block;
	list-style-type:none;
	margin:2px;
	padding:5px 8px;
	width: auto;}
	
/* Selected item in dropdown list*/
div.selectbox-wrapper ul li.selected { 
	background-color: #ffffff;
	display: block;}
		
/* Hover state for dropdown list */
div.selectbox-wrapper ul li.current { 
	background-color: #939393;
	color:#ffffff;
	display: block;}
	
/* Look and feel of select box */
.selectbox{
	padding:10px 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	width : 152px;
	*width : 152px;
	display : block;
	margin-bottom: 3px;
	text-align:left; 
	background: url(../images/grp_dropdown.gif) 0 2px no-repeat;
	cursor: pointer;
	border:none;
	color:#333;}

.input_textfield {
	margin:6px 0 0 0 ;
	width:auto; 
	height:auto;
	background:url(../images/textbox_bgR.gif) right top  no-repeat; 
	*background: url(../images/textbox_bgR.gif) right 1px no-repeat;}
	
.input_textfield input {		
	padding:5px 8px 5px 8px;
	border:none; 
	background:url(../images/textbox_bgL.gif) left top no-repeat;}
			
.txtbox{
	font-size:14px;
	color:#727272;}
		
/* acc page */
.find_branch .input_textfield input{
	width:288px;}
 

/********************** Button Styling **********************/
a.button-red, 
a.button-red.disabled,
a.button-red.anchor,
a.button-red.medium, 
a.button-red.large, 
a.button-gray, 
a.button-gray.disabled, 
a.button-gray.medium {
	border-bottom: none;
	clear: both;
	color: #fff;
	display: block;
	float: left;
	font-family: 'TheSansSemiBoldPlain', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
	text-align: center;
	text-decoration: none;
	width: auto;
	box-shadow:0 0 2px rgba(0,0,0,0.5);
	border-radius:3px; 
	-webkit-border-radius:3px; 
	-moz-border-radius:3px;}

a.button-red,
a.button-red.disabled,
a.button-red.anchor,
a.button-gray,
a.button-gray.disabled  {
	font-size: 14px;
	height: 17px;
	line-height: 14px; 
	margin: 0 0 10px 0;
	padding: 8px;}

a.button-red.medium,
a.button-gray.medium {
	font-size: 18px;
	height: 25px;
	line-height: 20px; 
	margin: 0 0 10px 0;
	padding: 10px;}

a.button-red {
	background: #e02b2a url(../images/button_redbg.jpg) repeat-x bottom left;}

a.button-red.disabled {
	background: #ebb1b1 url(../images/button_redbg_disable.jpg) repeat-x bottom left;}

a.button-red.anchor span {
	background: url(../images/anchor_arrow.png) no-repeat right center;
	padding-right: 20px;}

a.button-red.medium {
	background: #e02b2a url(../images/button_redbg_medium.jpg) repeat-x bottom left;}

a.button-red.large {
	background: #e02b2a url(../images/button_redbg_large.jpg) repeat-x bottom left;
	font-size: 30px;
	height: 40px;
	line-height: 35px; 
	margin: 0 0 10px 0;
	padding: 20px;}

.box-online-banking a.button-red {
	float: none;}

a.button-gray {
	background: #696969 url(../images/button_graybg.jpg) repeat-x bottom left;}

a.button-gray.disabled {
	background: #bfbfbf url(../images/button_graybg_disable.jpg) repeat-x bottom left;}

a.button-gray.medium {
	background: #696969 url(../images/button_graybg_medium.jpg) repeat-x bottom left;}

.box-content-container a.button-gray {
	float: none;}

.ie .a.button-red.anchor {
	padding-top:4px;
	padding-bottom:12px;}

/********************** Product Title **********************/

a.product-title:visited {
	border-bottom:#663399 1px dotted;
	color:#663399;
	text-decoration:none;}

a.product-title:hover {
	border-bottom:#0055cc 1px solid;
	color:#0055cc;
	text-decoration:none;}

/********************** Cards Big Link **********************/	

.card-viewall  {
	clear: left;
	background: url(../images/inside_pg/promo-viewalltopline.png) no-repeat top left;
	width: 917px;
	height: 45px;	
	margin: 20px 0 0 0;
	text-align: center;
	font-size:18px;}

/********************** Need Help Style **********************/
.bottomblock h4{
	margin: 0;
	padding: 0 10px 0 0;
	display: block;
	float: left;}

.bottomblock h4.last {
	margin: 7px 0 0 0;
	padding: 0;
	display: block;
	float: left;}

.bottomblock2 h4{
	margin: 0 0 5px 0;
	padding: 0 10px 0 0;
	clear: both;}

.bottomblock .number, .bottomblock2 .number{
	color: #B53059;
    font-family: 'TheSansCdRegular', Helvetica, Arial, sans-serif;
    font-size: 30px;
	font-weight: 200;
    margin: 0 10px 0 0;
	padding:0;
	line-height:30px;
	display:block;
	float:left;}

.bottomblock .number.last, .bottomblock2 .number.last {
	margin: 0;}
	
.bottomblock p, .bottomblock2 p{	
	display:block;
	float:left;
	margin: 6px 0 0 0;}

/********************** Floating Tab Link **********************/
.float-tab {
	background: url(../images/float_tab_arrow.png) no-repeat right 5px;
	display: block;
	margin: 0;
	padding: 0 15px 5px 0;
	width: auto;}

/********************** Tooltip Link **********************/
.tooltip-link {
	background: url(../images/inside_pg/tooltip_icon.png) no-repeat 0 2px;
	display: block;
	margin: 0;
	padding: 0 0 5px 20px;
	width: auto;}

/********************** Group Navigation **********************/
.group_navi{
	margin-top:0px;}

.group_navi ul {
	list-style-type:none;
	margin:0;
	padding:0;}

.group_navi ul li {
	list-style-type:none;
	margin:0 0 5px 0;
	padding:0;
	background: none;}
	
.group_navi ul li a{ border:none; }

.group_navi ul li a.personal,.group_navi ul li a.personal:visited {
	width: 310px;
	height: 85px;
	background: url(../images/btn_grppb.png) top left no-repeat;
	display: block;}
		
.group_navi ul li a.personal:hover,.group_navi ul li a.personal:visited:hover {
	background: url(../images/btn_grppb.png) bottom left no-repeat;
	display: block;}
	
.group_navi ul li a.business,.group_navi ul li a.business:visited {
	width: 310px;
	height: 85px;
	background: url(../images/btn_grpbiz.png) top left no-repeat;
	display: block;}
	
.group_navi ul li a.business:hover,.group_navi ul li a.business:visited:hover {
	background: url(../images/btn_grpbiz.png) bottom left no-repeat;
	display: block;}
	
.group_navi ul li a.aboutocbc,.group_navi ul li a.aboutocbc:visited {
	width: 310px;
	height: 85px;
	background: url(../images/btn_grpabtoc.png) top left no-repeat;
	display: block;}
	
.group_navi ul li a.aboutocbc:hover,.group_navi ul li a.aboutocbc:visited:hover {
	background: url(../images/btn_grpabtoc.png) bottom left no-repeat;
	display: block;}

/********************** Navigation **********************/
.navigation ul {
 
	float: right;
	font-family:"TheSansCdRegular",Helvetica,Arial;
 
	font-size:18px;
	line-height:20px;
	padding: 0}

.navigation li {
	background: none;
	display: inline;
	float: left;
	margin: 0;
	padding: 0;}

.navigation li a{
	border:none; 
	 
	display:block;
	height:40px;
 
	line-height: 20px;
	text-shadow:#ffffff 0 1px 0;
	text-decoration:none;}
	
.navigation ul li a:hover{
	text-decoration:none;
	background: url(../images/navi_hover.gif) repeat-x top left;}
	
/* main navi selected */
.navigation li a.selected.home{ 
	background:url(../images/navi_home_on.jpg) no-repeat top left;}
	
.navigation li a.selected.accounts{ 
	background:url(../images/navi_deposits_on.jpg) no-repeat top left;}
	
.navigation li a.selected.cards{ 
	background:url(../images/navi_cards_on.jpg) no-repeat top left;}
		
.navigation li a.selected.loans{ 
	background:url(../images/navi_loans_on.jpg) no-repeat top left;}
		
.navigation li a.selected.insurance{ 
	background:url(../images/navi_insurance_on.jpg) no-repeat top left;}
		
.navigation li a.selected.investments{ 
	background:url(../images/navi_investments_on.jpg) no-repeat top left;}
	
.navigation li a.selected.iqwork {
	background: url("../images/navi_deposits_on.jpg") no-repeat scroll left top transparent;
}
	
/* HR Navigation */
.navigation li a.selected.who_we_are{ 
	background:url(../images/navi_whoweare_on.jpg) no-repeat top left;}

.navigation li a.selected.media{ 
	background:url(../images/navi_media_on.jpg) no-repeat top left;}
	
.navigation li a.selected.investors{ 
	background:url(../images/navi_investors_on.jpg) no-repeat top left;}

.navigation li a.selected.careers{ 
	background:url(../images/navi_careers_on.jpg) no-repeat top left;}

/* OSPL */
.navigation li a.selected.productnserv{ 
	background:url(../images/navi_prodnsev_on.jpg) no-repeat top left;}

.navigation li a.selected.eventnsem{ 
	background:url(../images/navi_eventnsem_on.jpg) no-repeat top left;}	

.navigation li a.selected.research{ 
	background:url(../images/navi_research_on.jpg) no-repeat top left;}	

.navigation li a.selected.accountnservices{ 
	background:url(../images/navi_accountnserv_on.jpg) no-repeat top left;}	
	
.navigation li a.selected.intlntrade{ 
	background:url(../images/navi_intlntrade_on.jpg) no-repeat top left;}	

/**** Wealth Management navigation*****/

.navigation li a.selected.features{ 
	background:url(../images/navi_features_on.jpg) no-repeat top left;}

.navigation li a.selected.marketinsights{ 
	background:url(../images/navi_marketinsights_on.jpg) no-repeat top left;}	

.navigation li a.selected.personalfinance{ 
	background:url(../images/navi_personalfinance_on.jpg) no-repeat top left;}		
	
a.secondary_navi_way {
	border: none;
	color:#725D27;
	display: block;
	font-family:'TheSansSemiBoldPlain', Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-size:18px;
	float: right;
	height: 40px;
	padding: 23px 15px 0 15px;
	line-height: 20px;
	margin: 0 8px;
	text-shadow:#ffffff 0 1px 0;
	text-decoration:none;}

a.secondary_navi_way:hover{
	background: url(../images/navi_hover.gif) repeat-x top left;}

a.secondary_navi_way.selected {
	background:url(../images/navi_waytrade_on.jpg) no-repeat top left;}	

a.secondary_navi {
	border: none;
	color:#725d27;
	display: block;
	font-family:'TheSansSemiBoldPlain', Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-size:18px;
	float: right;
	height: 40px;
	line-height: 20px;
	padding: 23px 15px 0 15px;
	/* margin: 0 8px; 19July */
	margin: 0 8px 0 0;
	text-shadow:#ffffff 0 1px 0;
	text-decoration:none;}
	
a.secondary_navi:hover{
	background:url(../images/navi_premier_hover.gif) repeat-x top left;}

a.secondary_navi.selected {
	background: url(../images/navi_premier_on.jpg) no-repeat top left;}
	

/********************** Breadcrumbs **********************/ 
.breadcrumbs { 
	width:940px; /*change*/
	font-size:12px; 
	padding:20px 0 0;
	margin:0 auto; 
	clear:both;}
	
.breadcrumbs ul{
	padding:0;
	margin:0;
	line-height:14px;
	overflow:hidden;}
	 
.breadcrumbs li { 
	float: left;
	display: inline;
	color: #333333; 
	padding:0;
	margin:0;
	background: none;
	line-height: 20px;}
	 
.breadcrumbs li span{ 
	display:block; 
	width:5px;
	height:14px;
	margin: 2px 7px;
	background: url(../images/arrow_grey.png) center 6px no-repeat;}
	

/* PERSONAL BANKING PAGE STYLES
===========================================================================================*/
.pb-ob-box {
	clear: both;
	margin: 0;
	padding: 0;
	width: 100%;}

.pb-ob-box ul {
	background: none;
	list-style-type: none;
	margin: 0;
	padding: 0;}

.pb-ob-box ul li {
	background: none;
	display: inline;
	float: left;
	margin: 0;
	padding: 0 10px 0 0;}*/


/* INSIDE PAGE STYLES
===========================================================================================*/
/* Account Pg Styles */
.html_with_title .heading h2{
	text-align:left;}


/* FOOTER STYLES
===========================================================================================*/
#footer{ 
	font-size:10px;
	line-height:12px;
	color:#4a4a4a;}

.misc_container{
	font-size:10px;
	line-height:10px;
	color:#0055cc;
	
	float:left;
	padding:15px 0;}
	
ul.misc_links {
	width: 250px;
	float:left;
	margin: 0;
	padding: 0;}
	
ul.misc_links  li {
	float: left;
	padding:0 15px 0 0;
	margin:0;
	display: inline;
	line-height:15px;
	background: none;}
	
ul.misc_links  li a { display: block; } 
	
ul.misc_icons {
	width: 100px;
	float:left;
	margin: 0;
	padding: 0;}
	
ul.misc_icons li {
	float: left;
	padding:0 5px 0 0;
	margin:0;
	display: inline;
	background: none;}
	
ul.misc_icons li a{ border:none; }
	
.copyright{
	font-size:10px;
	color:#4a4a4a;
	float:right;
	padding:18px 0;}

	

/********************** Accounts Intro Box Styling **********************/
.sg_accounts_product_intro .content .product_feature_box h4 {
	margin: 0;}
	
.intro_currency1 {
	color: #009999;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 40px;
	font-weight: 200;
	line-height: 45px;
	padding: 0;}

.intro_amount_months1 {
	color: #009999;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 65px;
	font-weight: 200;
	line-height: 65px;
	padding: 0;}	

.intro_months1 {
	color: #009999;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 40px;
	font-weight: 200;
	line-height: 40px;
	padding: 0;}

.intro_details1 p {
	color: #009999;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 200;
	line-height: 20px;}
	
.intro_currency2 {
	color: #006699;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 40px;
	font-weight: 200;
	line-height: 45px;
	padding: 0;}

.intro_amount_months2 {
	color: #006699;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 65px;
	font-weight: 200;
	line-height: 65px;
	padding: 0;}	

.intro_months2 {
	color: #006699;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 40px;
	font-weight: 200;
	line-height: 40px;
	padding: 0;}

.intro_details2 p {
	color: #006699;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 200;
	line-height: 20px;}

.intro_currency3 {
	color: #B53059;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 40px;
	font-weight: 200;
	line-height: 45px;
	padding: 0;}

.intro_amount_months3 {
	color: #B53059;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 65px;
	font-weight: 200;
	line-height: 65px;
	padding: 0;}	

.intro_months3 {
	color: #B53059;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 40px;
	font-weight: 200;
	line-height: 40px;
	padding: 0;}

.intro_details3 p {
	color: #B53059;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 200;
	line-height: 20px;}

.intro_currency4 {
	color: #C85600;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 40px;
	font-weight: 200;
	line-height: 45px;
	padding: 0;}

.intro_amount_months4 {
	color: #C85600;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 65px;
	font-weight: 200;
	line-height: 65px;
	padding: 0;}	

.intro_months4 {
	color: #C85600;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 40px;
	font-weight: 200;
	line-height: 40px;
	padding: 0;}

.intro_details4 p {
	color: #C85600;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 200;
	line-height: 20px;}

ul.intro_details_list {
	margin:0;
	padding:0;}

.cta-points ul {
	margin: 0;
	padding: 0;}
	
.intro_currency5 {
	color: #b53059;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 40px;
	font-weight: 200;
	line-height: 45px;
	padding: 0;}
	
.intro_amount_months5 {
	color: #b53059;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 65px;
	font-weight: 200;
	line-height: 65px;
	padding: 0;}
	
.intro_amount_months2 {
	color: #006699;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 65px;
	font-weight: 200;
	line-height: 65px;
	padding: 0;}
	
.intro_percent4 {
	color: #C85600;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 30px;
	font-weight: 200;
	padding: 30px 0 0 10px;}

.intro_details2 {
	color: #006699;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 200;
	line-height: 20px;
	margin:0 0 0 15px;
	padding: 0;
	max-width: 200px;}

.intro_details2 p {
	color: #006699;
	font-family: 'TheSansCdLight', Helvetica, Arial, sans-serif;
	font-size: 18px;
	font-weight: 200;
	line-height: 20px;
	margin:0;
	padding: 0;}

.intro_details2 ul {
	list-style-type: none; 
	padding:0;
	margin: 2px 0 10px 0;}
	
.intro_details2 ul li {
	background:url(../images/sub_bullet.gif) no-repeat 3px 4px;
	margin: 0 0 6px 0;
	padding:0 0 0 16px;}

/* Floating Content Tab List
======================================================================*/
.account-container ul {
	list-style-type: none; 
	padding:0;
	margin: 2px 0 10px 0;}

.account-container li {
	background:url(../images/sub_bullet.gif) no-repeat 3px 4px;
	margin: 0 0 6px 0;
	padding:0 0 0 16px;}
	
a.product-title {
	border-bottom:#0055cc 1px dotted;
	color:#0055cc;
	font-family: 'TheSansCdRegular', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 18px;
	line-height: 22px;
	letter-spacing:-0.5pt;
	text-decoration:none;
	margin:0 0 10px 0;}
	
ol li {
	list-style-type: decimal;
	line-height:18px;
	margin: 0 0 8px 30px;}

/* GCC Landing Page Links */
a.anchor-pdf {
	border-bottom: none
}

a.anchor-pdf span {
	color: #05C;
	text-decoration: none;
	border-bottom: #05C 1px dotted;
	line-height: 20px

a.anchor-pdf:hover span {
	border-bottom: #05C 1px solid
}	
	
}
a.anchor-pdf p {
	background: url(/assets/images/icon_pdf.gif) no-repeat 0 3px;
	padding-left: 20px;
}

.intro-text h2 {
	font-family:'TheSansCdRegular', Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-size:54px;
	line-height:52px;
	color:#333333;
	letter-spacing:-1pt;
	margin:0 0 10px 0;}
	
/* 22June2012 - BB > Navigation - Investment Banking (selected) */
.navigation li a.selected.investment-banking {
    background: url("../images/navi_intlntrade_on.jpg") no-repeat scroll left top transparent;
}

/* 13July2012 - BB > Large Corporates Navigation fix */
a.secondary_navi2 {
    border: medium none;
    color: #212121;
    display: block;
    float: right;
    font-family: 'TheSansSemiBoldPlain',Helvetica,Arial,sans-serif;
    font-size: 18px;
    font-weight: normal;
    height: 40px;
    line-height: 20px;
    margin: 0 8px;
    padding: 23px 15px 0;
    text-decoration: none;
    text-shadow: 0 1px 0 #FFFFFF;
}
a.secondary_navi2:hover {
    background: url("../images/navi_hover.gif") repeat-x scroll left top transparent;
}
a.secondary_navi2.selected {
    background: url("../images/navi_largecorp_on.jpg") no-repeat scroll left top transparent;
}