/* 
Mobile-first responsive design
http://mobiforge.com/starting/story/mobile-web-content-adaptation-techniques
http://www.quirksmode.org/mobile/tableViewport.html
http://www.quirksmode.org/m/css.html
http://getskeleton.com 
http://css3please.com

Version 0.1 from 2011-12-06

*/


* { margin: 0; padding: 0; font: 12px arial, helvetica, sans-serif; color: #666; list-style: none;}

body {
	background: #edf2f8 url(../img/background.gif) left top repeat-x;
	-webkit-font-smoothing: antialiased;
	/* Prevent mobile zooming while remain desktop zooming: github.com/shichuan/mobile-html5-boilerplate/issues/closed#issue/14 */
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: none;
}

strong { 
	font-weight: bold;
}

a { 
	color: #039; 
	text-decoration: none;
}

#headerContainer,
#contentContainer,
#footerContainer {
	width: 240px;
	position: relative;
}

#headerContainer {
	border-bottom: 1px solid #c0c0c1;
}

#index #headerContainer {
	border-bottom: none;
}

h1, 
#introduction,
.faq,
#branding,
#buttons {
	padding: 10px!important;
	/* http://www.quirksmode.org/css/clearing.html */
	overflow: hidden;
	width: auto;
}

#logo,
#identifier {
	text-indent: -9999px;
	background: #fff url(../img/logo.gif) right bottom no-repeat;	
}

#logo {
	width: 31px;
	height: 31px;
	float: right;
}

#identifier {
	width: 120px;
	height: 13px;
	float: left;
	background-position: left -173px;
}

#contentContainer h1 {
	font-size: 140%;
	color: #039;
	padding-bottom: 0 !important;
}
#contentContainer h3 {
	font-size: 120%;
	color: #FFFFFF;
	padding-bottom: 0 !important;
	line-height: 140%;
	padding-left: 10px;
}

#contentContainer h1,
#contentContainer h2,
#contentContainer p,
#contentContainer li,
#contentContainer th,
#contentContainer td {
	line-height: 140%;
}

#contentContainer ul {
	padding: 10px 0;
}

#contentContainer li {
	padding-bottom: 4px;
	list-style: square;
	margin-left: 15px;
}

#index #contentContainer ul,
ul#uebersicht {
	padding: 0;
}

#index #contentContainer ul,
ul#uebersicht {
	padding: 0;
}

#index #contentContainer li,
#contact #contentContainer li,
ul#uebersicht li {
	padding-bottom: 0;
	list-style: none;
	margin-left: 0;
	line-height: normal;
}

table { margin: 10px 0; width: 100%; border-collapse: collapse; }
table th, table td { padding: 2px 4px; vertical-align: top; text-align: left; }
th { color: #039; background: #bfd1e6; font-weight: bold; }
td { border-bottom: 1px solid #c0c0c1; }
tr.closingRow td { padding-bottom: 15px; border-bottom: none; }
table.layout th, table.layout td { padding: 0; border: none; background: transparent; }
table.layout th { padding-bottom: 4px; }

#banner {
	background: transparent url(../img/banner.jpg) left center no-repeat;
	height: 102px;
}
#banner_loan {
	background: transparent url(../img/loan.jpg) left center no-repeat;
	height: 102px;
}
#banner_card {
	background: transparent url(../img/card.jpg) left center no-repeat;
	height: 102px;
}

#banner_invest {
	background: transparent url(../img/investment.jpg) left center no-repeat;
	height: 102px;
}
#banner_pb {
	background: transparent url(../img/personal_banking.jpg) left center no-repeat;
	height: 102px;
}
#banner_bb {
	background: transparent url(../img/business_banking.jpg) left center no-repeat;
	height: 102px;
}
#banner_nb {
	background: transparent url(../img/nri.jpg) left center no-repeat;
	height: 102px;
}
#banner_services {
	background: transparent url(../img/services.jpg) left center no-repeat;
	height: 102px;
}
#banner a {
	display: block;
	padding: 10px;
	height: 82px;
}

#banner a span {
	display: block;
	color: #039;
}

#banner a span.identifier {
	font-weight: bold;
	color: #666;
	font-size: 12px;
}

#banner a span.moreInfo {
	margin-top: 10px;
	background: transparent url(../img/icons.png) 78px -585px no-repeat;
}

#note {
	border-top: 1px solid #c0c0c1;
	border-bottom: 1px solid #c0c0c1;
	padding: 7px 10px 8px 10px;
}
#back1 {
	background-image: url(../img/back1.jpg);
	padding: 5px;
		}
#contentContainer .arrow li
{
background-image:url(../img/sm_bullet.gif);
background-repeat:no-repeat;
background-position:0px 5px; 
padding-left:14px;
border:none;
list-style:none
}

#contentContainer .arrow li a:link,
#contentContainer .arrow li a:visited {
padding:0;
}

#contentContainer .arrow li a:hover
{color: #05379b;
background-color:#eff3f9;
	text-shadow: 0 -1px 0 #039;
	
}


#contentContainer .inner li
{
margin-left: 15px;
list-style:disc;
border:none;
}



#note * {
	font-size: 11px;
}

#buttons li {
	width: 102px;
	text-align: center;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* FF3.5 - 3.6 */
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

#buttons .li01 {
float: right;
	
	border: 1px solid #eaeaea;
}

#buttons .li02 {
	float: left;
	border: 1px solid #eaeaea;
}

#buttons li a {
	padding: 6px 0 7px 0;
	display: block;
}

#buttons .li01 a {
	color: #039;
	text-shadow: 0 -1px 0 #ff4e4f; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
	background-color: #FFFFFF;
	
}

#buttons .li02 a {
	text-indent: 7px;
	color: #039;
	text-shadow: 0 -1px 0 #fff; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */
	background-color: #fff;
	background-image: url(../img/icons.png), url(../img/buttons.gif);
	background-repeat: no-repeat, repeat-x;
	background-position: -1px -651px, 0 -51px;
}

#uebersicht {
	border-bottom: 1px solid #c0c0c1;
}

#contact #contentContainer h1 {
	padding: 0 10px 10px 35px !important; 
	margin-top: 10px;
	background: url(../img/icons.png) left -79px no-repeat;
}
	
#contact #contentContainer h2 {
	padding: 10px 10px 5px 10px;
}

#contact #contentContainer ul {
	padding-top: 0;
}

#contact #contentContainer li {
	background: #fff;
}

#contact #contentContainer sup {
	font-size: 9px;
}

#contact #contentContainer p {
	font-size: 11px;
	padding: 0 10px 10px 10px;
}

#contact #contentContainer li,
#uebersicht li {
	border-top: 1px solid #c0c0c1;
}

#contact #contentContainer li.li01 {
	border-top: none;
}

#contact #contentContainer li a:link,
#contact #contentContainer li a:visited,
#uebersicht a:link,
#uebersicht a:visited {
	display: block;
	background: transparent url(../img/lists.png) -235px center no-repeat;
	padding: 10px 40px 10px 10px;
}

#contact #contentContainer li a:link,
#contact #contentContainer li a:visited {
	background-position: -1195px center;
}

#contact #contentContainer li a:hover,
#uebersicht a:hover {
	color: #fff;
	text-shadow: 0 -1px 0 #039;
	background-color: #4170B7;
	background-image: url(../img/lists.png), -webkit-gradient(linear, left top, left bottom, from(#039), to(#4170b7)); /* Saf4+, Chrome */
	background-image: url(../img/lists.png), -webkit-linear-gradient(top, #039, #4170b7); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    url(../img/lists.png), -moz-linear-gradient(top, #039, #4170b7); /* FF3.6 */
	background-image:     url(../img/lists.png), -ms-linear-gradient(top, #039, #4170b7); /* IE10 */
	background-image:      url(../img/lists.png), -o-linear-gradient(top, #039, #4170b7); /* Opera 11.10+ */
	background-image:         url(../img/lists.png), linear-gradient(top, #039, #4170b7);
	background-position: -715px center, left top;
}

#contact #contentContainer li a:hover {
	background-position: -1675px center, left top;
}

#contact #contentContainer li a:hover * {
	color: #fff;
	
}

#links li {
	border-top: 1px solid #c0c0c1;
}

#links a:link,
#links a:visited {
	display: block;
	background-image: url(../img/icons.png), url(../img/icons.png), url(../img/icons.png);
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-position: 0 0, right -504px, 0 0;
	padding: 10px 10px 10px 36px;	
}

#links .li01 a {
	background-position: 0 -72px, right -504px, 0 0;
}

#links .li02 a {
	background-position: 0 -144px, right -504px, 0 0;
}

#links .li03 a {
	background-position: 0 -216px, right -504px, 0 0;
}

#links .li04 a {
	background-position: 0 -288px, right -504px, 0 0;
}

#links .li05 a {
	background-position: 0 -360px, right -504px, 0 0;
}

#links .li06 a {
	background-position: 0 -432px, right -504px, 0 0;
}

#links .li07 a {
	background-position: 0 -684px, right -504px, 0 0;
}

#links a:hover {
	color: #fff;
	text-shadow: 0 -1px 0 #039;
	background-color: #4170B7;
	background-position: 0 0, right -540px, 0 -36px;
}

#links .li01 a:hover {
	background-position: 0 -108px, right -540px, 0 -36px;
}

#links .li02 a:hover {
	background-position: 0 -180px, right -540px, 0 -36px;
}

#links .li03 a:hover {
	background-position: 0 -252px, right -540px, 0 -36px;
}

#links .li04 a:hover {
	background-position: 0 -324px, right -540px, 0 -36px;
}

#links .li05 a:hover {
	background-position: 0 -396px, right -540px, 0 -36px;
}

#links .li06 a:hover {
	background-position: 0 -468px, right -540px, 0 -36px;
}

#links .li07 a:hover {
	background-position: 0 -720px, right -540px, 0 -36px;
}

.navigation {
	margin: 0 0 10px 10px;
}

#footerContainer .navigation {
	margin: 10px 0 0 10px;
}

.navigation .back a {
	display: inline-block;
	text-shadow: 0 -1px 0 #fff; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */	
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* FF3.5 - 3.6 */
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
	border: 1px solid #eaeaea;
	color: #039;
	padding: 6px 12px 7px 25px;
	background-color: #fff;
	background-image: url(../img/icons.png), url(../img/buttons.gif);
	background-repeat: no-repeat, repeat-x;
	background-position: -6px -616px, 0 -51px;
}

#footerContainer {
	border-top: 1px solid #c0c0c1;
}

.metaNavigation,
#copyright {
	padding: 10px;	
}

.metaNavigation li {
	font-size: 11px;
}

.metaNavigation li a {
	font-size: 11px;
	line-height: 24px;
	text-decoration: underline;
}

#copyright {
	font-size: 11px;
	padding-top: 0 !important;
}


/* #Media Queries
================================================== */

/* Mobile Portrait Size */
  
@media only screen and (min-width: 320px) {
	* {
		font-size: 15px;
	}
	
	#headerContainer,
	#contentContainer,
	#footerContainer {
		width: 320px;
	}
	
	h1,
	#introduction,
	.faq,	
	#branding,
	.metaNavigation,
	#copyright,
	#buttons {
		padding: 15px !important;
	}
	
	#banner a {
		padding: 10px 15px 15px !important;
	}

	#note *,
	.metaNavigation *,
	.metaNavigation li a,
	#copyright {
		font-size: 12px;
	}
	
	#logo {
		width: 37px;
		height: 37px;
		background-position: right -136px;
	}

	#identifier {
		width: 138px;
		height: 15px;
		background-position: left -136px;
	}
	
	#banner_loan {
	background-position: left bottom;
		height: 98px;
}
#banner_card {
	background-position: left bottom;
		height: 98px;
}

#banner_invest {
	background-position: left bottom;
		height: 98px;
}
#banner_pb {
	background-position: left bottom;
		height: 98px;
}
#banner_bb {
	background-position: left bottom;
		height: 98px;
}
#banner_nb {
	background-position: left bottom;
		height: 98px;
}
#banner_services {
	background-position: left bottom;
		height: 98px;
}	
	#banner {
		background-position: left bottom;
		height: 98px;
	}
		
	#banner br {
		display: none;
	}
	
	#banner span {
		width: 170px;
	}
	
	#banner a span.moreInfo {
		margin-top: 10px;
		font-size: 12px;
		background-position: 76px -586px;
	}	
	
	#banner a span.slogan {
		margin-top: 2px;
	}		

	#note {
		border: none;
		padding: 18px 15px 0px 15px;
	}

	#buttons li {	
		width: 135px;
	}
	
	#buttons .li02 a {
		padding: 7px 0 6px 0;
		text-indent: 30px;
		background-position: 10px -650px, 0 -51px;
	}

	#links a:link,
	#links a:visited {
		background-position: 0 -928px, right -1528px, 0 -828px;
	}

	#links .li02 a {
		background-position: 0 -1028px, right -1528px, 0 -828px;
	}

	#links .li03 a {
		background-position: 0 -1128px, right -1528px, 0 -828px;
	}

	#links .li04 a {
		background-position: 0 -1228px, right -1528px, 0 -828px;
	}

	#links .li05 a {
		background-position: 0 -1328px, right -1528px, 0 -828px;
	}

	#links .li06 a {
		background-position: 0 -1428px, right -1528px, 0 -828px;
	}

	#links .li07 a {
		background-position: 0 -1628px, right -1528px, 0 -828px;
	}
		
	#links a:hover {
		background-position: 0 0, right -1578px, 0 -878px;
	}

	#links .li01 a:hover {
		background-position: 0 -978px, right -1578px, 0 -878px;
	}

	#links .li02 a:hover {
		background-position: 0 -1078px, right -1578px, 0 -878px;
	}

	#links .li03 a:hover {
		background-position: 0 -1178px, right -1578px, 0 -878px;
	}

	#links .li04 a:hover {
		background-position: 0 -1278px, right -1578px, 0 -878px;
	}

	#links .li05 a:hover {
		background-position: 0 -1378px, right -1578px, 0 -878px;
	}

	#links .li06 a:hover {
		background-position: 0 -1478px, right -1578px, 0 -878px;
	}
	
	#links .li07 a:hover {
		background-position: 0 -1678px, right -1578px, 0 -878px;
	}	
	
	#uebersicht a:link,
	#uebersicht a:visited {
		padding: 10px 40px 10px 15px;
		background-position: -160px center;
	}

	#uebersicht a:hover {
		background-position: -640px center, left top;
	}

	#contact #contentContainer h1 {
		padding: 0 15px 15px 45px !important; 
		margin-top: 15px;
		background: url(../img/icons.png) left -938px no-repeat;
	}
		
	#contact #contentContainer h2 {
		padding-left: 15px;
	}

	#contact #contentContainer p {
		font-size: 12px;
		padding: 0 15px 10px 15px;
	}
	
	#contact #contentContainer li a:link,
	#contact #contentContainer li a:visited {
		padding: 10px 40px 10px 15px;
		background-position: -1120px center;
	}

	#contact #contentContainer li a:hover {
		background-position: -1600px center, left top;
	}	
		
	.navigation {
		margin: 0 0 10px 15px;
	}

	#footerContainer .navigation {
		margin: 20px 0 10px 15px;
	}

	.navigation .back a {
		background-position: -6px -615px, 0 -51px;
	}	

	.metaNavigation {
		overflow: hidden;
	}
		
	.metaNavigation li {
		float: left;
		border-right: 1px solid #039;
		padding: 0 16px;
	}
	
	.metaNavigation li.li01 {
		padding-left: 0;
	}
	
	.metaNavigation li.li03 {
		border: none;
		padding-right: 0;
	}
	
	.metaNavigation li a {
		line-height: normal;
	}
	
	#copyright {
		padding-top: 0 !important;
	}

	table { margin: 15px 0; }
	
	#links a,
	#uebersicht a,
	#contact #contentContainer li a {
		padding: 16px 36px 16px 54px !important;	
	}
	
	#uebersicht a,
	#contact #contentContainer li a {
		padding-left: 15px !important;
	}	
	
}
/* Mobile Landscape Size */

@media only screen and (min-width: 480px) {
	
	#headerContainer,
	#contentContainer,
	#footerContainer {
		width: 480px;
	}
	
	#index #headerContainer {
		height: 108px;
	}	
	#banner_loan {
	background-position: left top;
		height: 98px;
}
#banner_card {
	background-position: left top;
		height: 98px;
}

#banner_invest {
	background-position: left top;
		height: 98px;
}
	
	#banner {
		background-position: left top;
		height: 98px;
	}
	#banner_pb {
	background-position: left top;
		height: 98px;
}
#banner_bb {
	background-position: left top;
		height: 98px;
}
#banner_nb {
	background-position: left top;
		height: 98px;
}
#banner_services {
	background-position: left top;
		height: 98px;
}
	#banner span {
		width: 170px;
	}
	
	#banner a span.moreInfo {
		margin-top: 10px;
	}	
	
	#banner a span.slogan {
		margin-top: 2px;
	}	
		
	#banner br {
		display: none;
	}
	
	#buttons {
		position: absolute;
		width: 450px;
		top: -60px;
	}
	
	#buttons li {
		width: 215px;
	}
	
	#buttons .li02 a {
		text-indent: 29px;
		background-position: 50px -650px, 0 -51px;
	}
	
	#uebersicht a:link,
	#uebersicht a:visited {
		background-position: 0 center;
	}

	#uebersicht a:hover {
		background-position: -480px center, left top;
	}
	
	#contact #contentContainer li a:link,
	#contact #contentContainer li a:visited {
		background-position: -960px center;
	}

	#contact #contentContainer li a:hover {
		background-position: -1440px center, left top;
	}		
	
	#copyright br {
		display: none;
	}	

}


/*	RETINA OVERRIDES: 240px
----------------------------------------------- */

/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

	#logo,
	#identifier {
		background-size: 175px 102px; /* http://www.w3.org/TR/2002/WD-css3-background-20020802/#background-size */
	}

	#logo {
		background-position: right -37px;
	}

	#identifier {
		background-position: left -37px;
	}

	#links a:link,
	#links a:visited {
		background-image: url(../img/icons-x2.png), url(../img/icons-x2.png), url(../img/icons-x2.png);
		background-size: 40px 2000px; /* Enter page dimensions of original artwork, that is, icons.png */
		padding-bottom: 15px !important;
	}
	
	#buttons .li02 a {
		background-image: url(../img/icons-x2.png), url(../img/buttons.gif);
		background-size: 40px 2000px, auto auto;
	}	
	
	#contact #contentContainer li a:link,
	#contact #contentContainer li a:visited,
	#uebersicht a:link,
	#uebersicht a:visited {
		background-image: url(../img/lists-x2.png);
		background-size: 1920px 120px; /* Enter page dimensions of original artwork, that is, lists.png */
	}
	
	#contact #contentContainer li a:hover,
	#uebersicht a:hover {
		background-image: url(../img/lists-x2.png), -webkit-gradient(linear, left top, left bottom, from(#039), to(#4170b7)); /* Saf4+, Chrome */
		background-image: url(../img/lists-x2.png), -webkit-linear-gradient(top, #039, #4170b7); /* Chrome 10+, Saf5.1+, iOS 5+ */
		background-image:    url(../img/lists-x2.png), -moz-linear-gradient(top, #039, #4170b7); /* FF3.6 */
		background-image:     url(../img/lists-x2.png), -ms-linear-gradient(top, #039, #4170b7); /* IE10 */
		background-image:      url(../img/lists-x2.png), -o-linear-gradient(top, #039, #4170b7); /* Opera 11.10+ */
		background-image:         url(../img/lists-x2.png), linear-gradient(top, #039, #4170b7);
		background-size: 1920px 120px, auto auto;
	}	
	
	#contact #contentContainer h1 {
		background-image: url(../img/icons-x2.png);
		background-size: 40px 2000px; /* Enter page dimensions of original artwork, that is, icons.png */
	}
	
	
} /* CLOSE RETINA MEDIA QUERY */

/*	RETINA OVERRIDES: 320px+
----------------------------------------------- */

/* iPhone 4, Opera Mobile 11 and other high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 320px),
only screen and (-o-min-device-pixel-ratio: 3/2) and (min-width: 320px),
only screen and (min--moz-device-pixel-ratio: 1.5) and (min-width: 320px),
only screen and (min-device-pixel-ratio: 1.5) and (min-width: 320px) {

	#logo {
		background-position: right top;
	}

	#identifier {
		background-position: left top;
	}
 
} /* CLOSE RETINA MEDIA QUERY */