/* ================================================== */
/* = USE: 		HSBC Private Banking Re-Launch site = */
/* = AUTHOR:	Syzygy UK Limited 					= */
/* = DATE:		04/2009							 	= */
/* ================================================== */


/* ================================== */
/* = 1. GLOBAL ELEMENT DECLARATIONS = */
/* ================================== */
html, body 			{ margin: 0; width: 100%; height: 100%; }
body 				{ font: 0.75em Arial, Helvetica, Verdana, Geneva, sans-serif; /* background: #f6f6f0 url(../image/bg_hsbc.gif) no-repeat 50% 0;*/ }		/* 16px * 0.75 = 12px */
*					{ margin:0; padding:0; }
p					{ margin-bottom: 1.4em; }
img, fieldset		{ border: 0;}
a					{ color: #ee3424; }
a:hover				{ color: #ee3424; }
hr 					{ display: block; clear: both; height: 1px; background: #ee3424; color: #ee3424; border: 0; padding: 0; margin: 1em 0; }
select				{ font-size: 1em; }
blockquote			{ margin: 0 3em 1.5em 3em; font-size: 1em;}

h1					{ font-size: 1.8em; padding: 0.4em 0; }
h2					{ color: #ee3424; font-size: 1.4em; font-weight: bold; padding: 0.2em 0; }
h3					{ font-size: 1.1em; font-weight: bold; padding-bottom: 1em; }	
h4					{ font-size: 1em; font-weight: bold; padding: 0.5em 0; }

ul				{ margin: 0 0 0.5em 2em; list-style-type: disc; }
ol				{ margin: 0 0 0.5em 2em; }
li				{ padding-left: 0.3em; padding-bottom: 0.5em; }
li li			{ font-size: 0.9em; }
ul li ul,
ol li ul		{ margin-top: 1em; padding-left: 1em; list-style-type: square; }

.clear				{ display: block; clear: both; height: 0; font-size: 0; margin:0; padding:0; }
#wrapper:after, 
.clearfix:after		{ content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size:0; }

div.top_left		{ position:absolute; top:-1px; left:-1px; border-right:1px solid #f7f7f7; border-bottom:1px solid #f7f7f7; width:1px; height:1px; background:#fff; }
div.top_right		{ position:absolute; top:-1px; right:-1px; border-left:1px solid #f7f7f7; border-bottom:1px solid #f7f7f7; width:1px; height:1px; background:#f6f6f0; }
* html div.top_left	{ display: none; }
* html div.top_right{ display: none; }
.button				{ background: transparent url(../image/elements/btn_go_left.gif) no-repeat 0 0; display: inline-block; display: -moz-inline-box; cursor: pointer; }
.button a			{ background: transparent url(../image/elements/btn_go_right.gif) no-repeat 100% 0; color: #fff; text-decoration: none; font-weight: bold; display: block; padding: 3px 10px 0 10px; height: 16px; }
.button input		{ background: transparent url(../image/elements/btn_go_right.gif) no-repeat 100% 0; color: #fff; font-size: 0.9em; font-weight: bold; border: none; padding: 0px 10px; height: 20px; }

/* =========================== */
/* = 2. CORE LAYOUT ELEMENTS = */
/* =========================== */
#wrapper			{ width: 955px; margin: 0 auto; padding: 40px 35px 40px 34px; }

#top_header			{ border: 1px solid #f0f0f0; background: #fff; margin-bottom: 10px; width: 100%; position: relative; }
#top_header hr		{ height: 2px; margin: 0 1px 1px 1px; }
#top_header form	{ float: right; margin: 15px 10px 10px 10px; }
#top_header select	{ margin: 0 1px 0 8px; }
#top_header option	{ padding-right: 0.5em; }
#logo_hsbc			{ width: 220px; float: left; margin: 3px 0px 5px 20px; }
#logo_hsbc a		{ display: block; text-decoration: none; }

#left_col			{ width: 208px; border: 1px solid #f0f0f0; background: #fff; float: left; padding-bottom: 20px; margin-right: 10px; position: relative; }
#left_col h2		{ color: #000; font-size: 1.2em; font-weight: normal; border-bottom: 1px solid #f0f0f0; padding: 30px 25px 20px 35px; }
#main_nav			{ margin: 0; }
#main_nav li		{ list-style: none; border-bottom: 1px solid #f0f0f0; padding: 10px 15px 8px 20px; }
#main_nav li a		{ text-decoration: none; background: transparent url(../image/elements/link_left_nav.gif) no-repeat 0 50%; display: block; position: relative; padding-left: 15px; }
#main_nav li.on a	{ color: #000; font-weight: bold; background-image: url(../image/elements/link_left_nav_on.gif); }

#main_container					{ width: 733px; border: 1px solid #f0f0f0; background: #fff; float: left; padding: 20px 0; position: relative; }
#main_container .hero			{ min-height: 180px; background: #f4f4ed url(../image/backgrounds/bg_home.jpg) no-repeat 100% 0; padding: 50px 300px 20px 20px; margin: 0 20px 20px 20px; }
#main_container .hero h1		{ font-size: 1.75em; padding: 0; margin-bottom: 0.1em; }		/* 12px * 1.8 = 21.6px */
#main_container .hero h2		{ font-size: 1.2em; padding: 0; margin-bottom: 1.5em; }
#main_container .content_box	{ width: 435px; font-size: 1.1em; font-weight: bold; border: 5px solid #e5e5d6; padding: 8px 15px 13px 15px; margin: 0 20px; }
#main_container .content_box li	{ list-style: none; background: transparent url(../image/elements/link_content.gif) no-repeat 0 50%; padding: 12px 20px; }
#main_container .content_box a	{ padding-left: 10px; text-decoration: none; font-size: 0.9em; font-weight: normal; }

#bottom_footer			{ font-size: 0.95em; margin: 75px 0 10px 0; }
#bottom_footer hr		{ background-color: #ececea; color: #ececea; }
#bottom_footer ul		{ float: right; margin-right: 70px; }
#bottom_footer li		{ display: inline; border-left: 1px solid #ccc; padding: 0 7px 0 10px; }
#bottom_footer li.first	{ border: none; }
#bottom_footer a		{ color: #000; text-decoration: none; }
#bottom_footer a.external,
#bottom_footer a:hover	{ color: #ee3424; }
#bottom_footer p		{ color: #666; margin: 0 20px; }

/* Flash terms & conditions page */
#close_button				{ float: right; margin: 10px 20px; }
#main_container.full_page 			{ width: 100%; }
#main_container.full_page  .content	{ padding-right: 0; }


/* =========================== */
/* = 3. CONTENT PAGES LAYOUT = */
/* =========================== */
#main_container .content	{ padding: 6px 300px 0 0; margin: 0 20px 0 40px; background-repeat: no-repeat; background-position: 100% 0; }
#main_container .title		{ margin-bottom: 40px; }
#main_container .cta		{ margin: 0; }
#main_container .cta li		{ list-style: none; margin: 0.85em 0; }
#main_container .cta a		{ text-decoration: none; display: inline-block; position: relative; font-size: 1.2em; font-weight: bold; padding-left: 15px; background: transparent url(../image/elements/link_content.gif) no-repeat 0 50%; }
#main_container .cs1		{ background-image: url(../image/backgrounds/bg_cs1.jpg); }
#main_container .cs2		{ background-image: url(../image/backgrounds/bg_cs2.jpg); }
#main_container .cs3		{ background-image: url(../image/backgrounds/bg_cs3.jpg); }
#main_container .cs4		{ background-image: url(../image/backgrounds/bg_cs4.jpg); }
#main_container .cs5		{ background-image: url(../image/backgrounds/bg_cs5.jpg); }
#main_container .cs6		{ background-image: url(../image/backgrounds/bg_cs6.jpg); }
#main_container .cs7		{ background-image: url(../image/backgrounds/bg_cs7.jpg); }
#main_container .cs8		{ background-image: url(../image/backgrounds/bg_cs8.jpg); }
#main_container .cs9		{ background-image: url(../image/backgrounds/bg_cs9.jpg); }
#main_container .cs10		{ background-image: url(../image/backgrounds/bg_cs10.jpg); }
#main_container .cs11		{ background-image: url(../image/backgrounds/bg_cs11.jpg); }
#main_container .cs12		{ background-image: url(../image/backgrounds/bg_cs12.jpg); }

/* =============================== */
/* = 4. ACCESSIBILITY NAVIGATION = */
/* =============================== */
#html_link, #flash_link, li#non_js, #non_flash	{ display: none; }
#non_flash			{ position: absolute; z-index: 100; bottom: 0; right: 0; margin: 0; padding: 6px 25px; }
#non_flash li		{ display: inline; }
#non_flash a		{ color: #666666; text-decoration: none; }

.hide				{ position: absolute; left: -999em; width: 30em; overflow: hidden; }
.skip 				{ display: block; text-align: left; margin: 0 0 0 5px; padding: 0; position: absolute; font-size:1em; } /*All incl Opera*/
.skip a 			{ padding: 0 0.5em; display: inline; z-index: 2; text-decoration:none; position: absolute; width: 20em; left: -200em; }
.skip a:focus, 
.skip a:active 		{ position: absolute; left: -5px; color: #fff; background: #ee3424; }
.skip a:hover 		{ cursor: default; }