/* ---------------------------------------------------------------------------------------------- HSBC International CONTROL StyleSheet Author: Rew Islam Created: 22 Feb 2005 Updated: 04 Mar 2005 History: 22 Feb 2005 Created stylesheet, will develop using multiple style-sheets, and also regularly test using single style-sheet. 04 Mar 2005 Added homepage.css - this will contain styles exclusive to the homepage ---------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------- HSBC International BASE StyleSheet Author: Rew Islam Created: 22 Feb 2005 Updated: 15 Mar 2005 History: 22 Feb 2005 This file should contain everything that isn't a divlet or a container. *** This file should NOT contain any mention of containers, or divlets! *** 28 Feb 2005 Need to implement background image for child div's, need to map every variation and create image for each. 08 Mar 2005 Seriuos tidy-up job. 15 Mar 2005 Minor tweaks P2GLF000101 Align left side of portlets 22 Jul 2005 Jack Jia ---------------------------------------------------------------------------------------------- */ /* Default * Text styles ---------------------------------------------------------------------------------------------- */ html body, body, .wpsPortletBody, .wpsPortletText, .wpsEditText, .wpsPortletSmText, .wpsEditSmText, .wpsPortletTinyText, .portlet-font { margin: 0px; font-family: Arial, Helvetica, sans-serif; color: #000; } /* Form, Input, Select * Layout styles ---------------------------------------------------------------------------------------------- */ form { display:inline; } input, select, label, .portlet-form-input-field, .wpsLabelText, .portlet-form-field, .portlet-form-field-label, .wpsRequiredLabelText, .portlet-form-label { vertical-align:middle !important; } /* A, A Img * Text stlyes ---------------------------------------------------------------------------------------------- */ a img { border:0px; } a { color:#f00; } a:hover { text-decoration:underline; } /* Spacing control below content div's * Layout styles ---------------------------------------------------------------------------------------------- */ div.hsbcSpacing01 { padding-bottom:16px !important; width: auto; float:left; background-color:#fff; } div.hsbcSpacing02 { margin-bottom:16px; width: auto; } /* Spacing style 03 ---------------------------------------------------------------------------------------------- */ div.hsbcSpacing03 div.hsbcColumn { /* mac-ie */ border-bottom:8px solid #fff; /*non-mac-ie \*/ border-bottom:16px solid #fff; /* */ background-color:#fff; } /* div.hsbcSpacing03 { padding-bottom:16px solid #fff; background-color:#fff; } */ /*for safari and ff*/ /* div.hsbcSpacing03 > div.hsbcColumn { lborder-bottom:16px solid #fff !important; } */ /*for ff*/ /* div.hsbcSpacing03:lang(en) { lborder-bottom:0px solid #fff; } */ /* Style required to remove whitespace around images used for banner * Layout styles ---------------------------------------------------------------------------------------------- */ div.hsbcPageBanner { line-height:0px; } /* prevent space between banner images placed adjacent * Layout styles ---------------------------------------------------------------------------------------------- */ div.hsbcBannerImg { float:left; } /* Content Style 01 * Grey box with 16px internal padding * * Used in: * banking.html * cheque-deposit-account.html * offshore-bank-acocunt.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent01, div.hsbcStyleContent03 { background-color:#F4EFDE; padding:16px; } div.hsbcStyleContent01 p, div.hsbcStyleContent03 p { margin:10px 0px 12px !important; } div.hsbcStyleContent01 h2, div.hsbcStyleContent02 h2, div.hsbcStyleContent03 h2 { text-transform:uppercase; /* mac-ie */ font-size:80%; /*non-mac-ie \*/ font-size:74%; /* */ margin:0px; line-height:100%; margin-bottom:21px; /*color:#000; not required as this is now default */ } div.hsbcStyleContent01 a, div.hsbcStyleContent03 a { color: #000; /*required as default is red*/ text-decoration:none; } div.hsbcStyleContent01 a:hover { text-decoration:underline; /*required for safari*/ } /* Content Style 02 * Plain box * * Used in: * banking.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent02 { padding:16px 0px; } div.hsbcStyleContent02 p { margin:6px 0px; } div.hsbcStyleContent02 p.extHrType01 { margin:12px 0px; } /*for safari and ff*/ div > div.hsbcStyleContent02 p.extHrType01 { margin:12px 0px 10px; } /*for ff*/ div.hsbcStyleContent02 p.extHrType01:lang(en) { margin:12px 0px; } /* Content Style 03 * This is style 01 with adjustments used in grey boxes with button line links * * Used in: * cheque-deposit-acocunt.html * offshore-bank-account.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent03 { padding-bottom:9px; } div.hsbcStyleContent03 h2 { margin-bottom:5px !important; } /* Content Style 04 * * Used in: * contact.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent14, div.hsbcStyleContent04 { padding-left:40px; padding-right:49px !important; margin-bottom:23px; } div.hsbcStyleContent14 p, div.hsbcStyleContent04 p { margin-top:7px; margin-bottom:7px; /*color:#000; not required as this is now default */ } /* Content Style 05 * * Used in: * contact.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent16 h2, div.hsbcStyleContent15 h2, div.hsbcStyleContent05 h2 { /* mac-ie */ font-size:93%; /*non-mac-ie \*/ font-size:86%; /* */ margin:0px !important; margin-left:16px !important; margin-right:16px !important; } div.hsbcStyleContent16 h2 a, div.hsbcStyleContent15 h2 a, div.hsbcStyleContent05 h2 a { color:#000; text-decoration:none; } div.hsbcStyleContent16 h2 a:hover, div.hsbcStyleContent15 h2 a:hover, div.hsbcStyleContent05 h2 a:hover { text-decoration:underline; } div.hsbcStyleContent16 p, div.hsbcStyleContent15 p, div.hsbcStyleContent05 p { margin:0px; margin-left:32px; margin-right:32px; margin-bottom:18px; } div.hsbcStyleContent16 p.extHrType01, div.hsbcStyleContent15 p.extHrType01, div.hsbcStyleContent05 p.extHrType01 { margin-left:16px; margin-right:16px; margin-bottom:14px; } /* Content Style 06 * * Used in: * case-study.html * contact.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent13 p, div.hsbcStyleContent06 p { margin: 0px 16px; padding-top:10px; padding-bottom:10px; } /* Content Style 07 * * Used in: * cheque-deposit-account.html * offshore-bank-account.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent07 { border: 1px solid #ccc; padding-top:12px; } div.hsbcStyleContent07 h1, div.hsbcStyleContent07 h2, div.hsbcStyleContent07 h3, div.hsbcStyleContent07 p, div.hsbcStyleContent07 ul { margin-left:16px !important; margin-right:16px !important; } div.hsbcStyleContent07 p { margin-top:6px !important; } div.hsbcStyleContent07 p.extHrType01 { margin-bottom:12px; } /* Content Style 08 * * Used in: * faqs.html * your-guide-to-moving-abroad.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent08 { margin-left:24px; margin-right:32px !important; margin-bottom:23px; } div.hsbcStyleContent08 p { margin-top:7px !important; margin-bottom:7px; /*color:#000; not required as this is now default */ } div.hsbcStyleContent08 p.extHrType01 { margin-right:0px !important; } /* Content Style 09 * * Used in: * faqs.html * your-guide-to-moving-abroad.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent09 h3 { margin-bottom:15px !important; margin-top:-2px !important; } div.hsbcStyleContent09 h3 a { color:#000; text-decoration:none; } div.hsbcStyleContent09 h3 a:hover { text-decoration:underline; } div.hsbcStyleContent09 p.extHrType01 { margin-top:0px; } /* Content Style 10 * * Used in: * legal-info.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent17, div.hsbcStyleContent10 { margin-left:16px; margin-right:32px !important; } /* Content Style 11 * * Used in: * search-results.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent11 { margin-top:18px; margin-bottom:22px; } div.hsbcStyleContent11 p, div.hsbcStyleContent11 h2 { margin: auto 16px; } div.hsbcStyleContent11 h2 { /* mac-ie */ font-size:93%; /*non-mac-ie \*/ font-size:86%; /* */ margin-bottom:3px; margin-top:15px; } div.hsbcStyleContent11 p { margin-top:3px; margin-bottom:3px; } div.hsbcStyleContent11 p.extHrType01 { margin-top:15px; margin-bottom:15px; } /* Content Style 12 * * Used in: * country-guides.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent12 { background-color:#eee; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; padding:14px 16px; /* mac-ie */ font-size:80%; /*non-mac-ie \*/ font-size:74%; /* */ font-weight:bold; } div.hsbcStyleContent12 select { font-size:100%; color:#333; } /* Content Style 13 - inherits Style 06 * * Used in: * country-guides.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent13 { border-left:1px solid #ccc; border-right:1px solid #ccc; } /* Content Style 14 - inherits Style 04 * * Used in: * country-guides.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent14 { border-left:1px solid #ccc; border-right:1px solid #ccc; margin:0px; padding-bottom: 20px; } div.hsbcStyleContent14 p { margin:0px !important; padding:3px 0px; } /* Content Style 15 - inherits Style 05 * * Uses H2 to provide space for dotted lines * * Used in: * country-guides.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent15 { padding-bottom:15px; } /* Content Style 16 - inherits Style 05 * * Used in: * site-map.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent16 p.extHrType01 { margin-top:15px; margin-bottom:14px; } /* Content Style 17 - inherits Style 10 * * Used in: * country-guides.html ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent17 { margin-bottom:16px; } div.hsbcStyleContent17 h2 { /* mac-ie */ font-size:93%; /*non-mac-ie \*/ font-size:86%; /* */ } /* Content Style 18 * * Used in: * current accounts * multiple borders required to avoid width change in box model bugs ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent18 { border-right:1px solid #ccc; border-left:1px solid #ccc; border-top:1px solid #ccc; border-bottom:1px solid #ccc; background-color:#fff; } /* Content Style 19 * * Used in: * current accounts ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent19 { width:291px; float:left; } /* Content Style 20 * * Used in: * current accounts ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent20 { width:275px; float:left; } /* Content Style 21 * * Used in: * current accounts ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent21 { margin-left:16px; margin-right:32px; margin-top:12px; margin-bottom:12px; } div.hsbcStyleContent21 p { margin-bottom:6px; margin-top:6px; } /* Content Style 22 * * Used in: * current accounts ---------------------------------------------------------------------------------------------- */ div.hsbcStyleContent22 { margin-left:16px; margin-right:16px; margin-top:12px; margin-bottom:12px; } div.hsbcStyleContent22 p { margin-bottom:6px; margin-top:6px; } /* Content Style Base - includes base html text elements (p,h1,h2,h3 etc). * * Used in: * case-study.html * cheque-deposit.account.html * contact.html * country-guides.html * faqs.html * homepage.html * legal-info.html * offshore-bank-account.html * rates.html * search-results.html * site-map.html * your-guide-to-moving-abroad.html ---------------------------------------------------------------------------------------------- */ h1, div.hsbcStyleContentBase h1 { /* mac-ie */ font-size:118%; /*non-mac-ie \*/ font-size:111%; /* */ margin-bottom:14px; margin-top:0px; } h2, div.hsbcStyleContentBase h2 { /*mac-ie*/ font-size:105%; /*non-mac-ie \*/ font-size:99%; /* */ margin:14px 0px; } h3, div.hsbcStyleContentBase h3 { /* mac-ie */ font-size:80%; /*non-mac-ie \*/ font-size:74%; /* */ margin:14px 0px; } div.hsbcStyleContentBase p { /* mac-ie */ font-size:80%; /*non-mac-ie \*/ font-size:74%; /* */ margin:14px 0px 17px; } div.hsbcStyleContentBase a { color:red; } ul.hsbcBaseList li, div.hsbcStyleContentBase ul li { /* mac-ie */ font-size:80%; /*non-mac-ie \*/ font-size:74%; /* */ list-style-type:none; background:url("../images/listDot.gif") no-repeat top left; padding-left:12px; margin:7px 0px 7px 16px; line-height: 151%; } ul.hsbcBaseList, div.hsbcStyleContentBase ul { margin:0px; padding:0px; padding-bottom:5px; } div.hsbcStyleContentBase p.extHrType02 { background-image:none !important; border-top: 2px solid #ccc !important; } div.hsbcStyleContentBase label { /* mac-ie */ font-size:80%; /*non-mac-ie \*/ font-size:74%; /* */ } div.hsbcStyleContentBase select { font-size:100%; /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ color:#333; } /* Content text ---------------------------------------------------------------------------------------------- */ .wpsPortletText, .wpsEditText, .wpsPortletSmText, .wpsEditSmText, .wpsPortletTinyText, .portlet-font, div.hsbcContent p { /* mac-ie */ font-size:80%; /*non-mac-ie \*/ font-size:74%; /* */ } /* Horizontal Line ---------------------------------------------------------------------------------------------- */ p.extHrType01 { background:url("../images/dotRepeater.gif") repeat-x; line-height:1px; display:block; font-size:1%; margin:0px; padding:0px !important; } /* Inline buttons ---------------------------------------------------------------------------------------------- */ .extInlineButtons img { float:right; } .extInlineButtons img { margin-left:6px; } .extOverrideInlineButtons { float:none !important; margin-left:0px !important; } /* Link Type 01 Red and Bold ---------------------------------------------------------------------------------------------- */ a.hsbcLinkStyle01 { color:#f00; text-decoration:none; font-weight:bold; } a.hsbcLinkStyle01:hover { text-decoration:underline; } /* Link Type 02 Blue ---------------------------------------------------------------------------------------------- */ a.hsbcLinkStyle02 { color:#06c !important; text-decoration:none; } a.hsbcLinkStyle02:hover { text-decoration:underline; } /* Link Type 03 Blue ---------------------------------------------------------------------------------------------- */ a.hsbcLinkStyle03 { color:#36c !important; } /* Link Type 04 Grey ---------------------------------------------------------------------------------------------- */ a.hsbcLinkStyle04 { color:#999 !important; text-decoration:none; font-family:Arial; } a.hsbcLinkStyle04:hover { text-decoration:underline; } /* RightTools box ---------------------------------------------------------------------------------------------- */ div.hsbcToolBox { background-color: #E3DBBD; padding:0px 0px 11px; padding-bottom:14px; background-repeat: no-repeat; background-position: top; border-bottom: 1px solid #fff; } div.hsbcToolBox a { color:#000; text-decoration:none; } div.hsbcToolBox a:hover { text-decoration:underline; } div.hsbcToolBox p { /*color:#000; not required as this is now default */ /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ margin:5px 8px; } div.hsbcToolBox select { /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ margin-left:8px; } div.hsbcToolBox form { display:block; margin:0px; /*margin-bottom:9px;*/ } div.hsbcToolBox label { display:block; } div.hsbcTitleToolBox p { display:none; } div.hsbcTitleToolBox { height:21px; display:block; background-repeat:no-repeat; background-position: top left; margin-left:8px; } /* Types of RightTools box ---------------------------------------------------------------------------------------------- */ div.hsbcToolBoxStyle01 div.hsbcTitleToolBox { background-image:url("../images/toolbox/hInternetBankingUnlocked.gif"); } div.hsbcToolBoxStyle01 div.extUnlocked { background-image:url("../images/toolbox/hInternetBankingLocked.gif"); } div.hsbcToolBoxStyle02 div.hsbcTitleToolBox { background-image:url("../images/toolbox/hRelatedLinks02.gif"); } div.hsbcToolBoxStyle03 div.hsbcTitleToolBox { background-image:url("../images/toolbox/hPageOptions02.gif"); } div.hsbcToolBoxStyle04 div.hsbcTitleToolBox { background-image:url("../images/toolbox/hAdviceAndTools02.gif"); padding-bottom:6px; } div.hsbcToolBoxStyle05 { background-image:url("../images/toolbox/hImgTalkToUs02.gif"); } div.hsbcToolBoxStyle05 div.hsbcTitleToolBox { background-image:url("../images/toolbox/hTalkToUsTrn02.gif"); padding-bottom:0px; } div.hsbcToolBoxStyle06 div.hsbcTitleToolBox { background-image:url("../images/toolbox/hQuickApplyAndInfo02.gif"); padding-bottom:7px; } div.hsbcToolBoxStyle07 div.hsbcTitleToolBox { background-image:url("../images/toolbox/hMarketWatch02.gif"); padding-bottom:5px; } div.hsbcToolBoxStyle08 div.hsbcTitleToolBox { background-image:url("../images/toolbox/hImportantInformation02.gif"); } /* 'Internet banking' toolbox * ---------------------------------------------------------------------------------------------- */ div.hsbcToolBoxStyle01 input.extTextInput { width:100px; vertical-align:middle; font-size:100%; padding-bottom:0px !important; } div.hsbcToolBoxStyle01 label { /*color:#000; not required as this is now default */ } div.hsbcToolBoxStyle01 table { /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ border-collapse:collapse; /*color:#000; not required as this is now default */ margin:0px 8px 9px; padding:0px; } div.hsbcToolBoxStyle01 table td { margin:0px; padding:0px; height:22px; } div.hsbcToolBoxStyle01 .extLogStatus { color:red; font-weight:bold; } /* 'Advice and tools' toolbox * ---------------------------------------------------------------------------------------------- */ div.hsbcToolBoxStyle04 select { width:115px; } div.hsbcToolBoxStyle04 label { /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ margin-bottom:4px; margin-left:8px; } /* 'Quick apply' toolbox * ---------------------------------------------------------------------------------------------- */ div.hsbcToolBoxStyle06 select { width:118px; } div.hsbcToolBoxStyle06 label { /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ margin-bottom:4px; } /* 'Market watch' toolbox * ---------------------------------------------------------------------------------------------- */ div.hsbcToolBoxStyle07 { padding-left:1px; padding-right:1px; } div.hsbcToolBoxStyle07 p { margin-left:10px; margin-right:10px; /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ } div.hsbcToolBoxStyle07 p.pStyle01 { color:#666; /* mac-ie */ font-size:68%; /*non-mac-ie \*/ font-size:61%; /* */ } /* Toolbox Content Style01 * ---------------------------------------------------------------------------------------------- */ div.hsbcSubToolBoxContentStyle01 { background-color:#fff; border-left:1px solid #D4D4D4; border-right:1px solid #D4D4D4; padding:3px 0px; border-bottom:1px solid #D4D4D4; } div.hsbcSubToolBoxContentStyle01 p { margin-top:2px; margin-bottom:2px; } /* Table Styles * ---------------------------------------------------------------------------------------------- */ tr.hsbcTableRow01 { background-color:#fff; } tr.hsbcTableRow02 { background-color:#fcc; } td.hsbcTableColumn01 { text-align:right; } /* Table style 01 * ---------------------------------------------------------------------------------------------- */ table.hsbcTableStyle01 { border-collapse:collapse; width:100%; } table.hsbcTableStyle01 td { vertical-align:top; } table.hsbcTableStyle01 td.extTableColumn01 { width:50%; padding-right:24px; } table.hsbcTableStyle01 td.extTableColumn02 { width:50%; padding-left:24px; } /* Table style 02 * ---------------------------------------------------------------------------------------------- */ table.hsbcTableStyle02 { width:100%; border-collapse:collapse; border-bottom:1px solid #ccc; border-right:1px solid #ccc; } table.hsbcTableStyle02 td { /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ text-align:center; padding:5px; border-top:1px solid #ccc; border-left:1px solid #ccc; } /* Table style 03 * ---------------------------------------------------------------------------------------------- */ table.hsbcTableStyle03 { border-collapse:collapse; width:auto; } table.hsbcTableStyle03 td { /* mac-ie */ font-size:68%; /*non-mac-ie \*/ font-size:61%; /* */ } table.hsbcTableStyle03 td.extTableColumn01 { padding-left:9px; } table.hsbcTableStyle03 td.extTableColumn02 { padding-right:9px; } table.hsbcTableStyle03 td.extTableColumn03 { padding:0px 4px; } /* Table style 04 * * Used for glossary page ---------------------------------------------------------------------------------------------- */ table.hsbcTableStyle04 { border-collapse:collapse; width:100%; border-left:1px solid #ccc; border-top:1px solid #ccc; } table.hsbcTableStyle04 td { border-right:1px solid #ccc; border-bottom:1px solid #ccc; text-align:center; /* mac-ie */ font-size:80%; /*non-mac-ie \*/ font-size:74%; /* */ padding: 6px 7px; background-color:#eee; font-weight:bold; } table.hsbcTableStyle04 td.extSelected { background-color:#fff; } table.hsbcTableStyle04 td a { font-weight:bold; } /* Table style 05 * * Used for glossary page ---------------------------------------------------------------------------------------------- */ table.hsbcTableStyle05 { /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ width:100%; border-collapse:collapse; border-left:1px solid #ccc; border-top:1px solid #ccc; margin-bottom:17px; } table.hsbcTableStyle05 th { text-align:left; font-weight:normal; } table.hsbcTableStyle05 th, table.hsbcTableStyle05 td { vertical-align:top; border-right:1px solid #ccc; border-bottom:1px solid #ccc; padding:5px 6px; } table.hsbcTableStyle05 td img { padding-right:5px; } table.hsbcTableStyle05 tr.hsbcTableRow03 td { border-bottom:none; padding-bottom:0px; } table.hsbcTableStyle05 tr.hsbcTableRow04 td { border-bottom:1px solid #ccc; padding-bottom:10px; } table.hsbcTableStyle05 tr.hsbcTableRow05 td { background-color:#eee; white-space:nowrap; padding-bottom:15px; } table.hsbcTableStyle05 td.extTableColumn04 { padding-left:15px; white-space:nowrap; } /* Other Styles ---------------------------------------------------------------------------------------------- */ /* hsbcHideBlock * * Used to hide block items from non javascript browsers ---------------------------------------------------------------------------------------------- */ .hsbcHideBlock { display:none; } /* Align Type 01 * * Used in: * your-guide-to-moving-abroad.html ---------------------------------------------------------------------------------------------- */ .hsbcAlignType01 { float:right; } .hsbcAlignType02 { text-align:right; white-space: nowrap; } .hsbcAlignType03 { float: left; } .hsbcAlignType04 { float: right; margin-left:16px; } /* Page Background Style 01 * * Used in: * banking.html ---------------------------------------------------------------------------------------------- */ .hsbcPageBgStyle01 { background: url(../images/bgColumnType02RightToolsOnly.gif) repeat-y; } /* Page Background Style 02 * * Used in: * case-study.html * cheque-deposit-account.html * contact.html * country-guides.html * faqs.html * homepage.html * legal-info.html * offshore-bank-account.html * rates.html * search-results.html * site-map.html * your-guide-to-moving-abroad.html ---------------------------------------------------------------------------------------------- */ .hsbcPageBgStyle02 { background: url(../images/bgRightToolsOnlyType02.gif) repeat-y; } /* Page Background Style 03 * * Used in: * country-guide.html ---------------------------------------------------------------------------------------------- */ .hsbcPageBgStyle03 { background:url("../images/country-guides/bg.gif") repeat-y top left; } /* Page Background Style 04 * * Used in: * country-guide.html ---------------------------------------------------------------------------------------------- */ .hsbcPageBgStyle04 { background:url("../images/country-guides/subBg.gif") repeat-y top left; } /* Page Background Style 05 * * Used in: * country-guide.html ---------------------------------------------------------------------------------------------- */ .hsbcPageBgStyle05 { border-bottom:1px solid #ccc; padding-bottom:16px; } /* TextType01 * Used for utility links such as 'back to top' and 'close' links ---------------------------------------------------------------------------------------------- */ .hsbcTextStyle01 { /* mac-ie */ font-size:74% !important; /*non-mac-ie \*/ font-size:68% !important; /* */ } .hsbcTextStyle01 a { color:#000 !important; } /* Text Type 02 * Used for search result file type text ---------------------------------------------------------------------------------------------- */ .hsbcTextStyle02 { margin-top:3px; margin-bottom:15px !important; color:#666 !important; } /* Text Type 03 * Used for search result ---------------------------------------------------------------------------------------------- */ .hsbcTextStyle03 { text-transform:uppercase; font-weight:bold; } /* Text Type 04 * Used for search result ---------------------------------------------------------------------------------------------- */ .hsbcTextStyle04 { color:#f00; font-weight:bold; } /* Text Type 05 * Used for rates.html ---------------------------------------------------------------------------------------------- */ .hsbcTextStyle05 { /* mac-ie */ font-size:74% !important; /*non-mac-ie \*/ font-size:68% !important; /* */ margin:0px 0px 7px !important; } /* Text Type 06 * Used for increasing size of interest rates ---------------------------------------------------------------------------------------------- */ .hsbcTextStyle06 { /* mac-ie */ font-size:155% !important; /*non-mac-ie \*/ font-size:149% !important; /* */ font-weight:bold; } /* Text Type 07 * * Replacement for Legal text ---------------------------------------------------------------------------------------------- */ .wpsCopyrightText, p.hsbcTextStyle07 { /* mac-ie */ font-size:74% !important; /*non-mac-ie \*/ font-size:68% !important; /* */ color:#666; } /* Text Type 08 * * Positive text * Used in market review table ---------------------------------------------------------------------------------------------- */ .hsbcTextStyle08, .hsbcTextStyle08 a { color:#090 !important; } /* Text Type 09 * * Negative text * Used in market review table ---------------------------------------------------------------------------------------------- */ .hsbcTextStyle09, .hsbcTextStyle09 a { color:#f00 !important; } /* Text Type 10 * * Highlight Style ---------------------------------------------------------------------------------------------- */ .hsbcTextStyle10 { font-weight:bold; } /* Text Type 11 * * Highlight Style ---------------------------------------------------------------------------------------------- */ .hsbcTextStyle11 { color:#f00; } /* Text Type 12 * * Log on greeting text Style ---------------------------------------------------------------------------------------------- */ .hsbcTextStyle12 { color:#333; /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ } /* Block Style 01 * ---------------------------------------------------------------------------------------------- */ .hsbcBlockStyle01 { padding: 13px 17px; background: #eee; border-left:1px solid #ccc; border-top:1px solid #ccc; border-right:1px solid #ccc; } .hsbcBlockStyle01 p { margin:0px; } /* Block Style 02 * ---------------------------------------------------------------------------------------------- */ .hsbcBlockStyle02 { border-top:0px !important; border-bottom:1px solid #ccc; } /* Image style 01 * Used in market review table ---------------------------------------------------------------------------------------------- */ img.hsbcImageStyle01 { margin-right:8px !important; } /* Image style 02 * Used in sitemap ---------------------------------------------------------------------------------------------- */ img.hsbcImageStyle02 { margin-right:6px !important; } .extFloatBugFix { clear:both; } .extHideBlock { display:none; } /* Bespoke message style * Used in proof of concept work for messages bar ---------------------------------------------------------------------------------------------- */ div.extMessageLangToggle { background-color: #EFEFEF; padding:3px 5px 5px 5px; margin-bottom: 14px; /* P2GLF000101 start */ margin-left: 8px; margin-right: 3px; /* P2GLF000101 end */ font-size: 96%; } div.extMessageLangToggle span { float: right; font-size: 86%; color: #999; } div.extMessageLangToggle p { padding:0px 0px 0px 20px; margin:0; border:0; background:url("../images/icons/iconMessageNew.gif") no-repeat left; } /* ---------------------------------------------------------------------------------------------- HSBC International CONTAINERS StyleSheet Author: Rew Islam Created: 22 Feb 2005 Updated: 23 Feb 2005 History: 22 Feb 2005 Copied top level container styles from co.uk build, will need to re-think layout control in terms of column control and the various types of templates. Templates must be controlled by containers only. 23 Feb 2005 New control structure for column control. 04 Mar 2005 Right column only with 4 column control added. All column control divs floated left. This fixed a problem on the mac where javascript jsfShowHide function was causing render issues. ---------------------------------------------------------------------------------------------- */ /* Top Level Containers ---------------------------------------------------------------------------------------------- */ div.containerGlobal { width: 974px; } div.containerLogoArea { width: 350px; float: left; clear:left; } div.containerLeft { width: 146px; float: left; } div.containerTabMenu { width:100%; float:left; } div.containerBreadCrumb { width:100%; float:left; } div.containerFooter { width: 100%; float: left; } div.containerEntity { width: 100%; } div.containerMain { width: 100%; padding-left:10px; float:left; } div.containerPopupMain { width: 100%; padding-left:10px; float:left; } div.containerControlOne, div.containerControlTwo, div.containerControlThree, div.containerControlFour, div.containerContent, div.containerOuterContent { float:left; } /* The following styles can handle more complicated layouts than the existing three layouts: i.e. Left, Right, LeftRight. e.g. These styles can handle nested LeftRight layout. ---------------------------------------------------------------------------------------------- */ /* P2G CA styles start */ div.containerControlLeft div.containerContentOne { width: 818px; float: left; } div.containerControlLeft div.containerControlOne { width: 818px; float: left; } div.containerControlLeft div.containerControlOne div.containerContentOne { width: 818px; float: left; } div.containerControlLeft div.containerContentTwo { width: 652px; float: left; } div.containerControlLeft div.containerControlTwo { width: 652px; float: left; } div.containerControlLeft div.containerControlTwo div.containerContentTwo { width: 652px; float: left; } div.containerControlLeft div.containerRightTools { width: 166px; float: left; } div.containerControlLeft div.containerControlRightTools { width: 166px; float: left; } div.containerControlLeft div.containerControlRightTools div.containerRightTools { width: 166px; float: left; } /* P2G CA styles end */ /* Left and Right columns | | | | ---------------------------------------------------------------------------------------------- */ div.containerControlLeftRight div.containerContent { width:652px; float:left; } div.containerControlLeftRight div.containerControlOne div.hsbcColumn { width: 652px; } div.containerControlLeftRight div.containerControlTwo div.hsbcColumn { width: 219px; } div.containerControlLeftRight div.containerControlThree div.hsbcColumn { width: 146px; } div.containerControlLeftRight div.containerControlThree div.hsbcColumnDouble { width: 292px !important; } div.containerControlLeftRight div.containerOuterContent { width:604px; } /* Right column only | | | ---------------------------------------------------------------------------------------------- */ div.containerControlRight div.containerLeftNav { display:none; } div.containerControlRight div.containerContent { width:584px; float:left; } div.containerControlRight div.containerControlOne div.hsbcColumn { width: 584px; } div.containerControlRight div.containerControlTwo div.hsbcColumn { width: 292px; } div.containerControlRight div.containerControlFour div.hsbcColumn { width:146px; } div.containerControlRight div.containerControlTwo div.hsbcColumnDouble { width: 292px !important; } div.containerControlRight div.containerOuterContent { width:750px !important; } /* Left column only | | | ---------------------------------------------------------------------------------------------- */ /* div.containerControlLeft div.containerLeftNav { margin-right:0px !important; } div.containerControlLeft div.hsbcContent { margin-left:16px; margin-right:0px !important; } div.containerControlLeft div.containerRightTools { display:none; } */ div.containerControlLeft div.containerContent { width:620px; float:left; } div.containerControlLeft div.containerControlOne div.hsbcColumn { width: 620px; } div.containerControlLeft div.containerControlTwo div.hsbcColumn { width: 310px; } div.containerControlLeft div.containerControlFour div.hsbcColumn { width: 155px; } div.containerControlLeft div.containerControlFour div.hsbcColumnDouble { width: 310px; } div.containerControlLeft div.containerControlFour div.hsbcTripleColumn { width: 465px; } /* Column, Content, Right and Left div's ---------------------------------------------------------------------------------------------- */ div.hsbcColumn { float:left; } div.hsbcContent { margin-right:16px; width:auto; float:none; } div.containerLeftNav { width:130px; margin-right:16px; float:left; } div.containerRightTools { width:166px; float:left; } /* MYM2000#133 */ div.containerControlLeft div.containerControlWide div.containerContentThree { width:966px; float:left; } div.containerControlLeft div.containerContentThree { width:966px; float:left; } /* ---------------------------------------------------------------------------------------------- HSBC International DIVLETS StyleSheet Author: Rew Islam Created: 22 Feb 2005 Updated: 22 Feb 2005 History: 22 Feb 2005 Copies divlets from co.uk build. Tab Menu is new, taken from the header test build. 15 Mar 2005 Left hand navigation, second level, moved across 4 pixels and text moved across from arrow 2 pixels. P2GLF000101 Align left side of portlets 22 Jul 2005 Jack Jia MYM2023 #01 menu item wraps to the next line, 22 Sep 2005 Leo Cheng the spacing between lines is close 22 Jul 2005 Jack Jia ---------------------------------------------------------------------------------------------- */ /* LOGO DIVLET ---------------------------------------------------------------------------------------------- */ div.hsbcDivletLogo { height:52px; width:auto; } div.hsbcDivletLogo .hsbcDivletLogoImage { padding:13px 0px 2px 10px; float:left; width:141px; } div.hsbcDivletLogo .hsbcDivletLogoTagLine { float:left; vertical-align:middle; padding:18px 0px 0px 12px; font:bold 14px Arial, Helvetica, sans-serif; color:#f00; } /* SEARCH DIVLET ---------------------------------------------------------------------------------------------- */ div.hsbcDivletSearch { float:right; text-align:right; /* mac-ie */ font-size:86%; /*non-mac-ie \*/ font-size:80%; /* */ margin-top:13px; padding-right:6px; } div.hsbcDivletSearch input { vertical-align:middle; } /* TABMENU DIVLET ---------------------------------------------------------------------------------------------- */ div.hsbcDivletTabMenu, .wpsPortletTabSet { background:url("../images/tab_bg.gif") repeat-x left bottom; height:44px; width:100%; clear:left; } div.hsbcDivletTabMenu ul { margin:0px; padding:0px; } div.hsbcDivletTabMenu ul li { margin:0px; padding:0px 0px 0px 6px; list-style:none; float:left; height:44px; background:url("../images/tab_off_left.gif") no-repeat top left; text-align:center; } div.hsbcDivletTabMenu ul li a, .wpsPortletTabLink { padding:0px 9px 0px 2px; margin:0px; height:44px; line-height:36px; float:left; display:block; background:url("../images/tab_off_right.gif") no-repeat top right; text-decoration:none; color:#000; /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ font-weight:normal; vertical-align:50%; } div.hsbcDivletTabMenu ul li a:hover, .wpsPortletTabLink:hover { color:#f00 !important; text-decoration:none; } div.hsbcDivletTabMenu ul li.hsbcDivletTabMenuSelected, .wpsPortletSelectedTab { background:url("../images/tab_on_left.gif") no-repeat top left; } div.hsbcDivletTabMenu ul li.hsbcDivletTabMenuSelected a, .wpsPortletSelectedTab a, .wpsPortletSelectedTabLink { background:url("../images/tab_on_right.gif") no-repeat top right; } div.hsbcDivletTabMenu ul li.extFirstTab { background:url("../images/first_tab_off_left.gif") no-repeat top left; padding-left:15px; } div.hsbcDivletTabMenu ul li.extFirstTabSelected { background:url("../images/first_tab_on_left.gif") no-repeat top left; padding-left:15px; } div.hsbcDivletTabMenu ul li.extFirstTabSelected a { background:url("../images/tab_on_right.gif") no-repeat top right; } div.hsbcDivletTabMenu ul li.extSelectedTabRight { background:url("../images/tab_off_left_selected_right.gif") no-repeat top left; } div.hsbcDivletTabMenu ul li.extSelectedTabRight a { background:url("../images/tab_off_right_selected_right.gif") no-repeat top right; } div.hsbcDivletTabMenu ul li.extSelectedTabLeft {} div.hsbcDivletTabMenu ul li.extSelectedTabLeft a { //MNL406 background:url("../images/tab_off_right_selected_left.gif") no-repeat top right; /*MNL406*/ background:url("../images/tab_off_right.gif") no-repeat top right; } div.hsbcDivletTabMenu ul li.extLastTabSelected { background: url("../images/tab_on_left.gif") no-repeat top left; } div.hsbcDivletTabMenu ul li.extLastTabSelected a { background: url("../images/last_tab_on_right.gif") no-repeat top right; padding-right:34px; } div.hsbcDivletTabMenu ul li.extRightAlignTab { float:right; padding-right:10px; } div.hsbcDivletTabMenu ul li.extRightAlignTabSelected { background: url("../images/first_tab_on_left.gif") no-repeat top left; float:right; padding-left:15px; padding-right:0px; } div.hsbcDivletTabMenu ul li.extRightAlignTabSelected a { background:url("../images/right_align_tab_on_right.gif") no-repeat top right; padding-right:20px; padding-left:3px; } div.hsbcDivletTabMenu ul li.extSelectedTabRightEndBlock { background:url("../images/tab_off_left_selected_right_end_block.gif") no-repeat top left; } div.hsbcDivletTabMenu ul li a.extDoubleLine { line-height:13px; padding-top:4px; /* FIX FOR:PC IE5.5 and PC IE5.01 */ height:44px; hei\ght:40px; } div.hsbcDivletTabMenu ul li a .extMacIE { float:left; clear:left; padding-top:2px; /*FIX FOR:MAC IE \*/ float:none; clear:none; padding-top:0px; /* */ } /* BREADCRUMB DIVLET ---------------------------------------------------------------------------------------------- */ div.hsbcDivletBreadCrumb, .wpsBreadcrumbTrail { float:left; margin:6px 0px 0px 0px; padding:0px 0px 10px 10px; //width:620px; width:100%; } div.hsbcDivletBreadCrumb span.hsbcDivletBreadCrumbStart { float: left; /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ color:#666; border-right:5px solid #fff; } div.hsbcDivletBreadCrumb ul { margin:0px; padding:0px; } div.hsbcDivletBreadCrumb ul li, .wpsBreadcrumbTrail { margin:0px; padding:0px 4px 0px 10px; list-style:none; float:left; background:url("../images/breadcrumb_arrow.gif") no-repeat left; white-space:nowrap; /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ color:#666; } div.hsbcDivletBreadCrumb ul li a, .wpsBreadcrumbTrail a { text-decoration:underline; color:#666; } div.hsbcDivletBreadCrumb ul li.hsbcDivletBreadCrumbFirst, div.hsbcDivletBreadCrumb ul li.hsbcDivletBreadCrumbStart { background:none; padding-left:0px; } div.hsbcDivletBreadCrumb ul li.hsbcDivletBreadCrumbLast { } /* NAVIGATION DIVLET ---------------------------------------------------------------------------------------------- */ div.hsbcDivletNavigation, .portlet-menu { } div.hsbcDivletNavigation ul { margin:0px 0px 8px 0px; padding:0px; } div.hsbcDivletNavigation ul li, .portlet-menu-item { list-style:none; line-height:100%; padding:1px 10px 3px 0px; } div.hsbcDivletNavigation ul li a { text-decoration:none; color:#000; /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ } div.hsbcDivletNavigation ul li a:hover, .portlet-menu-item-hover { color:#f00 !important; text-decoration:none; } div.hsbcDivletNavigation ul li.hsbcDivletNavigationSelected, .portlet-menu-item-selected { /*background:url("../images/nav_arrow_right_selected.gif") no-repeat top left;*/ } div.hsbcDivletNavigation ul li.hsbcDivletNavigationSelectedWithChildren { /*background:url("../images/nav_arrow_down_selected.gif") no-repeat top left;*/ } div.hsbcDivletNavigation ul li.hsbcDivletNavigationSelected a, div.hsbcDivletNavigation ul li.hsbcDivletNavigationSelectedWithChildren a { color:#f00; } div.hsbcDivletNavigation ul li ul { margin:3px 0px 3px 5px; } div.hsbcDivletNavigation ul li ul li, .portlet-menu-cascade-item { background:url("../images/hsbcDivletNavigation.gif") no-repeat top left; margin:0px; padding:3px 0px 3px 7px; line-height:80%; /* \*/ line-height:70%; /* */ } /* MYM2023 #01 ---------------------------------------------------------------------------------------------- */ div.hsbcDivletNavigation ul li ul li a { color:#000 !important; /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; line-height:130%; /* */ } div.hsbcDivletNavigation ul li ul li.hsbcDivletNavigationSelected, .portlet-menu-cascade-item-selected { background:none; } div.hsbcDivletNavigation ul li ul li.hsbcDivletNavigationSelected a { color:#f00 !important; } div.hsbcDivletNavigation .extNavigationHeading { color:#666; /* mac-ie */ font-size:86%; /*non-mac-ie \*/ font-size:80%; /* */ margin:0px 0px 3px 10px; font-weight:bold; font-style:italic; } div.hsbcDivletNavigation .extBackLink { } /* FOOTER DIVLET ---------------------------------------------------------------------------------------------- */ div.hsbcDivletFooterLinks, .wpsCopyrightText { width:100%; float:left; margin:16px 0px 16px; background-color:#eee; color:#333; line-height:180%; padding:0px; } div.hsbcDivletFooterLinks p, .wpsCopyrightText p { /* mac-ie */ font-size:68%; /*non-mac-ie \*/ font-size:61%; /* */ color:#333; line-height:180%; padding:0px; margin:0px; } div.hsbcDivletFooterLinks p a, .wpsCopyrightText p a { color:#333; text-decoration:none; } div.hsbcDivletFooterLinks p a:hover, .wpsCopyrightText p a:hover { text-decoration:underline; } div.hsbcDivletFooterLinks p span.hsbcDivletFooterLinksLeft, .wpsCopyrightText p span.hsbcDivletFooterLinksLeft { float:left; margin-left:10px; } div.hsbcDivletFooterLinks p span.hsbcDivletFooterLinksRight, .wpsCopyrightText p span.hsbcDivletFooterLinksLeft { float:right; margin-right:10px; } /* ENTITY DIVLET ---------------------------------------------------------------------------------------------- */ div.hsbcEntity { float:left; background:url("../images/bgEntityTabBack.gif") repeat-x top left; /* mac-ie */ font-size:68%; /*non-mac-ie \*/ font-size:61%; /* */ padding: 0px 7px 0px 11px; clear:both; /*width:742px*/ width: 970px; } div.hsbcEntity div.hsbcEntityTextArea01 { float:left; padding: 3px 0px 0px; } div.hsbcEntity div.hsbcEntityTextArea02 { float:right; } div.hsbcEntity ul { display: inline; padding: 0px; margin: 0px; } div.hsbcEntity ul li { float: left; list-style: none; padding: 3px 16px 0px 0px; margin: 0px; background: url("../images/bgEntityTabDivider.gif") no-repeat top right; height: 18px; } div.hsbcEntity ul li a { } div.hsbcEntity ul li.hsbcEntityTabSelectedLeft { padding: 3px 0px 0px; background: none; } div.hsbcEntity ul li.hsbcEntityTabLastTab { background: none; padding: 3px 13px 0px 0px; } div.hsbcEntity a { color:#333; text-decoration:none; } div.hsbcEntity a:hover { color:#333; text-decoration:underline; } div.hsbcEntity ul li.hsbcEntityTabSelected { background: url("../images/bgEntityTabLeft.gif") no-repeat top left; padding: 3px 0px 0px 14px; } div.hsbcEntity ul li.hsbcEntityTabSelected a { background: url("../images/bgEntityTabSlider.gif") no-repeat top right; height: 18px; padding: 3px 14px 6px 0px; color: #F00; } div.hsbcEntity ul li.hsbcEntityTabSelected a:hover { color:#F00; } /* Page list ---------------------------------------------------------------------------------------------- */ .hsbcDivletPageList { padding: 0px 9px 0px 0px !important; background-color: #eee !important; font-size: 80%; /* \*/ font-size: 74% !important; /* */ font-weight:bold; line-height: 210% !important; border: 1px solid #D4D4D4; } .hsbcDivletPageList div { line-height:230% !important; /* \*/ line-height:240% !important; /* */ } /* Fix for PC IE5.01 */ div>.hsbcDivletPageList { height: 20px; } div > .hsbcDivletPageList { height: auto; } /* */ .hsbcDivletPageList ul { margin: 0px !important; padding: 0px !important; float: left !important; clear: none; } .hsbcDivletPageList li { float: left; margin: 0px !important; padding: 0px 11px !important; background: none !important; border-right: 1px solid #D4D4D4 !important; line-height: 240% !important; font-weight: bold; list-style:none; } .hsbcDivletPageList li.hsbcDivletPageListSelected { background-color: #fff !important; border-right: 1px solid #D4D4D4 !important; } .hsbcDivletPageList li.hsbcDivletPageListSelected a { color: #333 !important; text-decoration: none !important; cursor: auto !important; } .hsbcDivletPageList li a { display:block; float: left !important; /* \*/ float: none; /* */ } .hsbcDivletPageList div.hsbcAlignType03 { float: left; } .hsbcDivletPageList div.hsbcAlignType02 { text-align: right; white-space: nowrap; } /* Sitemap ---------------------------------------------------------------------------------------------- */ .hsbcDivletSiteMap a.extIconLink { padding-left: 0px; } .hsbcDivletSiteMap a.extNonIconLink { padding-left: 14px; } .hsbcDivletSiteMap ul { padding-left: 0px; margin:0px 0px 15px 16px; } div.hsbcDivletSiteMap ul li { background:none; padding-left: 0px; list-style-type:none; /* mac-ie */ font-size:93%; /*non-mac-ie \*/ font-size:86%; /* */ margin:0px !important; } div.hsbcDivletSiteMap ul li a { font-weight:bold; color:#000; text-decoration:none; } .hsbcDivletSiteMap ul li ul { background: none; } .hsbcDivletSiteMap ul li ul { padding-left: 0px; padding-top:5px; } .hsbcDivletSiteMap ul li ul li { font-size: 93%; /* \*/ font-size: 86%; /* */ } .hsbcDivletSiteMap ul li ul li a { color:#f00 !important; font-weight:normal; } .hsbcDivletSiteMap ul li ul li ul { padding-bottom:5px; } .hsbcDivletSiteMap ul li ul li ul li { font-size: 100%; } /* Logon divlet ---------------------------------------------------------------------------------------------- */ div.hsbcDivletLogon { height:36px; background-color:#fff; /* P2GLF000101 start */ margin-left: 8px; margin-right: 3px; /* P2GLF000101 end */ } div.hsbcDivletLogon p { margin:0px; padding-top: 5px; padding-bottom:8px; padding-right:9px; text-align:right; background:#fff url("../images/dotRepeater.gif") repeat-x bottom; vertical-align:middle; } div.hsbcDivletLogon p img { vertical-align:bottom !important; } /* MYM2023 #27 add NAVIGATION TEXT DIVLET ---------------------------------------------------------------------------------------------- */ div.hsbcDivletNavigation ul li.hsbcDivletNavigationText { text-decoration:none; color:#000; /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ } /* MYM2023 #31 add NAVIGATION TEXT DIVLET SELECTED ---------------------------------------------------------------------------------------------- */ div.hsbcDivletNavigation ul li.hsbcDivletNavigationTextSelected { text-decoration:none; color:#F00; /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ } /* ---------------------------------------------------------------------------------------------- HSBC International HOMEPAGE StyleSheet Author: Rew Islam Created: 04 Mar 2005 Updated: 04 Mar 2005 History: 04 Mar 2005 These styles will only exist on the homepage therefore they should not be stored in a shared stylesheet. ---------------------------------------------------------------------------------------------- */ div.extMainBanner { width:553px; height:270px; float:left; } div.extBannerButtons { width:15px; height:270px; float:left; } div.extBannerButton { height:90px; } div.extHomePageLinks .hsbcColumn { padding-left: 26px; background: url("../images/homepage/hpSeparator.gif") repeat-y top left !important; } div.extHomePageLinks .extHomePageFirst { padding-left: 4px; } div.extHomePageTalkStrip { /*background: url("../images/homepage/talkStripBg01.gif") no-repeat top left !important; height:70px;*/ background: url("../images/homepage/bgPixel.gif") repeat-y top left !important; } div.extHomePageTalkStrip div.hsbcContent { padding-top:10px; } div.extHomePageTalkStrip p { /* mac-ie */ font-size:80%; /*non-mac-ie \*/ font-size:74%; /* */ margin-top:4px; } div.extHomePageTalkStrip p.extHeading { text-transform:uppercase; /* mac-ie */ font-size:74%; /*non-mac-ie \*/ font-size:68%; /* */ font-weight:bold; margin:5px 0px 10px; line-height:100%; color:#000; } div.extHomePageTalkStrip select { font-size: 68%; } /*********************************************************/ /* New base version of new_styles.css /* /* Version 0.1 /* Date: 01-Jun-05 /* Change: Added .hsbcTextStyle14 for GLT Issue 57 /* Who: TN /* /* Version 0.2 /* Date: 02-Jun-05 /* Change: expanded hex colors to use 6 hex numbers /* instead of 3 for GLT Issue 61 /* Who: TN /* /* Version 0.3 /* Date: 06-Jun-05 /* Change: asdded hsbctableColumn19 for GLT Issue 27 /* Who: TN /* /* Version: P2GLF000123 /* Date: 11-Aug-05 /* Change: Modify hsbcListStyle01 for Firefox work arounds /* Who: LCG /* /* Version: P2GKKYP008 /* Date: 02-Dec-05 /* Change: A new link style with black font color for read messages /* Who: Michael Koo /* /* Version: SEL5029 /* Date: 19-Apr-2006 /* Change: Add a new table column style hsbctableReadMsgColumn for read message /* Who: Angie Lo /* /**********************************************************/ /******************************/ /* table styles /******************************/ table.hsbcTableStyle06, table.hsbcTableStyle07 { font-family: arial,helvetica; width: 100%; text-align: left; border: 0; border-collapse: collapse; } table.hsbcTableStyle06 td, table.hsbcTableStyle07 td, table.hsbcTableStyle06 th, table.hsbcTableStyle07 th { font-size:74%; color:#333333; vertical-align:top; padding:5px 6px 5px 6px; line-height: 1.9em; } table.hsbcTableStyle07 td, table.hsbcTableStyle07 th, { border-bottom: 1px solid #ffffff; border-right: 1px solid #ffffff; } table.hsbcTableStyle06 td.hsbcTableColumn12, table.hsbcTableStyle07 td.hsbcTableColumn12 { width: 20%; } table.hsbcTableStyle06 td.hsbcTableColumn13, table.hsbcTableStyle07 td.hsbcTableColumn13 { width: 15%; } /******************************/ /* table row styles /******************************/ tr.hsbcTableRow03 { background-color: #EEEEEE; } tr.hsbcTableRow04 { background-color: #DBDBDB; } tr.hsbcTableRow05 td { border-top: 1px solid #ffffff; } tr.hsbcTableRow06 td, tr.hsbcTableRow06 th { border-bottom: 15px solid #ffffff !important; } /* Added by Vancover team Use to create space above a row.*/ tr.hsbcTableRow07 td, tr.hsbcTableRow07 th { border-top: 15px solid #ffffff !important; } /*end*/ /******************************/ /* table column styles /******************************/ table.hsbcTableStyle06 th, table.hsbcTableStyle07 th, table.hsbcTableStyle06 td.hsbcTableColumn02, table.hsbcTableStyle07 td.hsbcTableColumn02 { background-color: #999999; color:#ffffff; font-size:80%; font-weight:bold; line-height:1em !important; } table.hsbcTableStyle06 td.hsbcTableColumn03, table.hsbcTableStyle07 td.hsbcTableColumn03 { /*padding: 10px 5px;*/ text-align: right; } table.hsbcTableStyle06 td.hsbcTableColumn04, table.hsbcTableStyle07 td.hsbcTableColumn04 { white-space: nowrap; } table.hsbcTableStyle06 td.hsbcTableColumn05, table.hsbcTableStyle07 td.hsbcTableColumn05 { font-size:86%; color:#000000; font-weight: bold; padding-bottom: 5px; text-align: left; } table.hsbcTableStyle06 td.hsbcTableColumn06, table.hsbcTableStyle07 td.hsbcTableColumn06 { width: 25px; } table.hsbcTableStyle06 td.hsbcTableColumn07, table.hsbcTableStyle07 td.hsbcTableColumn07 { text-align: left; } table.hsbcTableStyle06 td.hsbcTableColumn08, table.hsbcTableStyle07 td.hsbcTableColumn08, table.hsbcTableStyle06 th.hsbcTableColumn08, table.hsbcTableStyle07 th.hsbcTableColumn08 { background-color: #ffffff; } table.hsbcTableStyle06 td.hsbcTableColumn09, table.hsbcTableStyle07 td.hsbcTableColumn09 { padding: 0; margin: 0; } table.hsbcTableStyle06 td.hsbcTableColumn09 select, table.hsbcTableStyle07 td.hsbcTableColumn09 select { width: 48%; } table.hsbcTableStyle06 td.hsbcTableColumn09 input, table.hsbcTableStyle07 td.hsbcTableColumn09 input { width: 19.9%; } table.hsbcTableStyle06 td.hsbcTableColumn10, table.hsbcTableStyle07 td.hsbcTableColumn10 { padding: 10px 0px; } table.hsbcTableStyle06 td.hsbcTableColumn11, table.hsbcTableStyle07 td.hsbcTableColumn11 { width: 25%; } table.hsbcTableStyle06 td.hsbcTableColumn18, table.hsbcTableStyle07 td.hsbcTableColumn18 { white-space:nowrap; } table.hsbcTableStyle06 td.hsbcTableColumn19, table.hsbcTableStyle07 td.hsbcTableColumn19 { text-align: center; } /*SEL5029 add */ table.hsbcTableStyle06 td.hsbctableReadMsgColumn, table.hsbcTableStyle07 td.hsbctableReadMsgColumn { font-family: monospace; } /******************************/ /* link styles /******************************/ a.hsbcLinkStyle05 {/* color:#333333 !important; text-decoration:underline;*/ } a.hsbcLinkStyle05:hover { /*text-decoration:none;*/ } a.hsbcLinkStyle06, a.hsbcLinkStyle07 { border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; border-right: 2px solid #404040; border-bottom: 2px solid #404040; background-color: #D4D0C8; color: #000000; padding: 3px 8px; font-weight: bold; margin-top: 5px; text-decoration: none; white-space:nowrap; } div > .hsbcLinkStyle06{ float: left; } a.hsbcLinkStyle07 { margin-right: 0px; } a.hsbcLinkStyle08 { color: #ffffff; } a.hsbcLinkStyle08 img { margin-left: 10px; } a.hsbcLinkStyle09 { text-decoration: none; } a.hsbcLinkStyle10, a.hsbcLinkStyle11 { font-weight: bold; text-decoration: none; } a.hsbcLinkStyle09:hover { text-decoration: none; } a.hsbcLinkStyle10:hover, a.hsbcLinkStyle11:hover { font-weight: bold; text-decoration: none; } a.hsbcLinkStyle09 { color: #ff0000; } a.hsbcLinkStyle09:hover { color: #8B0000; } a.hsbcLinkStyle10 { color: #0000ff; } a.hsbcLinkStyle10:hover { color: #00008B; } a.hsbcLinkStyle11 { color: #00BB00; } a.hsbcLinkStyle11:hover { color: #008B00; } /* P2GKKYP008 start */ /* A new link style with black font color */ a.hsbcLinkStyle12 { color: #000000; } /* P2GKKYP008 end */ /******************************/ /* text styles /******************************/ span.hsbcTextStyle13 { font-weight:bold; } .hsbcTextStyle14 { font-size:86%; margin-left:6px; margin-bottom:6px; font-weight:bold; } .hsbcTextStyle15 { font-size:86%; margin-left:3px; margin-bottom:3px; } .hsbcTextStyle16 { background: url("../images/bullet.gif") no-repeat left; padding-left:12px; } .hsbcTextStyle17 { font-size:86%; margin-left:3px; margin-bottom:3px; font-style: italic; } .hsbcListStyle01 { list-style-type: square; margin-left:15px; padding-left:0; } .hsbcTextStyleError { color:#ff0000; font-weight:bold; } .hsbcTextStyleWarning { color:#ff0000; font-weight:bold; } .hsbcInputStyle01 { /* width: 96%; */ font-size:100%; height:200px; } /* MYM2021 modified */ select.hsbcInputStyle08 { width:320px; /* font-family:Verdana;font-size:12px; */ behavior:expression(window.dropdown_menu_hack!=null?window.dropdown_menu_hack(this):0); } /* MYM2021 modified */ select.hsbcInputStyle09 { width:230px; /* font-family:Verdana;font-size:12px; */ behavior:expression(window.dropdown_menu_hack!=null?window.dropdown_menu_hack(this):0); } /******************************/ /* other styles /******************************/ ---------------------------------------------------------------------------------------------- */ /* hsbcHideBlock * * Used to hide block items from non javascript browsers ---------------------------------------------------------------------------------------------- */ .hsbcHideBlock { display:none; } /* MYM2000#134 */ table.hsbcTableStyle06 td.hsbcTableColumn20, table.hsbcTableStyle07 td.hsbcTableColumn20 { white-space: normal; } .hsbcContentHeader1 { font-family:Arial,Helvetica,Verdana,Sans-Serif; font-size:12pt; color:#666666; text-decoration:none; padding-left:10; font-weight:bold; margin-left:10; padding: 0px 0px 4px 8px; } .hsbcContentBody1 { font-family: arial,helvetica; font-size:74%; color:#000; vertical-align:middle; background-color: #fff; border-bottom: 1px solid #fff; padding: 4px 0px 4px 8px; } /* -- Virtual Keyboard -- */ #keyboardUpper {position:absolute;z-index:1;left:0;top:0;width:290;height:129;visibility:hidden;} #keyboardLower {position:absolute;z-index:1;left:0;top:0;width:290;height:129;visibility:hidden;} #colorDiv {position:absolute;z-index:0;left:0;top:0;width:20;height:20;visibility:hidden;background-color:#C2C2C2} #underlineDiv {position:absolute;z-index:0;left:0;top:0;width:20;height:20;visibility:hidden;background-color:#EEEEEE} #colorDiv_NS4 {position:absolute;z-index:0;left:0;top:0;visibility:hidden;} #underlineDiv_NS4 {position:absolute;z-index:0;left:0;top:0;visibility:hidden;background-color:#EEEEEE} #delColorDiv_NS4 {position:absolute;z-index:0;left:0;top:0;visibility:hidden;} #delunderlineDiv_NS4 {position:absolute;z-index:0;left:0;top:0;visibility:hidden;background-color:#EEEEEE} #capsColorDiv_NS4 {position:absolute;z-index:0;left:0;top:0;visibility:hidden;} #capsunderlineDiv_NS4 {position:absolute;z-index:0;left:0;top:0;visibility:hidden;background-color:#EEEEEE} #shadedKeyPad_NS4 {background-color:#C2C2C2;} #shadedVKBgColor_NS4 {background-color:#E5E5E5;} /* -- Static Highlighting -- */ form.withinTable {display:inline;} #parentDiv {position:relative;z-index:0;left:100;top:0;width:600px;height:175px;visibility:show;background-color:#EEEEEE} #selfReg_parentDiv {position:relative;z-index:0;left:0;top:0;height:175px;visibility:show;background-color:#EEEEEE} #reAuth_parentDiv {position:relative;z-index:0;left:0;top:0;height:175px;visibility:show;background-color:#EEEEEE} #chgPwd_parentDiv {position:relative;z-index:0;left:0;top:0;height:185px;visibility:show;background-color:#EEEEEE} #manChgPwd_parentDiv {position:relative;z-index:0;left:0;top:0;height:185px;visibility:show;background-color:#EEEEEE;} #rewardsRedemption_parentDiv {position:relative;z-index:0;left:0;top:0;visibility:show;background-color:#EEEEEE;display:inline;} #rewardsRedemption_buttonDiv {position:relative;z-index:0;left:0;top:0;display:inline;} #unmigratedLogon_parentDiv {position:relative;z-index:0;left:0;top:0;visibility:show;background-color:#EEEEEE;display:inline;} #unmigratedLogon_buttonDiv {position:relative;z-index:0;left:0;top:0;display:inline;} #migratedLogon_parentDiv {position:relative;z-index:0;left:0;top:0;visibility:show;background-color:#EEEEEE;display:inline;} #migratedLogon_buttonDiv {position:relative;z-index:0;left:0;top:0;visibility:show;background-color:#EEEEEE;display:inline;} #migratingLogon_parentDiv {position:relative;z-index:0;left:0;top:0;visibility:show;display:inline;} #migratingLogon_buttonDiv {position:relative;z-index:0;left:0;top:0;visibility:show;display:inline;} #camPwdLogon_parentDiv {position:relative;z-index:0;left:0;top:0;visibility:show;background-color:#EEEEEE;display:inline;} #camPwdLogon_buttonDiv {position:relative;z-index:0;left:0;top:0;display:inline;} /* -- Dynamic Highlighting -- */ #selfReg_pwdDiv0 {position:relative;z-index:0;left:0;top:0;} #selfReg_pwdDiv1 {position:relative;z-index:0;left:0;top:0;} #selfReg_pwdDiv2 {position:relative;z-index:0;left:0;top:0;} /* Block Background Color in Gray*/ .highLightBackground { background-color: #dddddd; font-family: arial,helvetica; font-size:10pt; color:BLACK;} .highLightDarkBackground { background-color: #666666; font-family: arial,helvetica; font-size:10pt; color:#FFFFFF; font-weight:Bold;} .smallRedText { font-family: arial,helvetica; font-size:8pt; color:RED; } #reAuth_pwdDiv0 {position:relative;z-index:0;left:0;top:0;} #chgPwd_pwdDiv1 {position:relative;z-index:0;left:0;top:0;} #chgPwd_pwdDiv2 {position:relative;z-index:0;left:0;top:0;} #chgPwd_pwdDiv3 {position:relative;z-index:0;left:0;top:0;} #chgPwd_spacerDiv {position:relative;z-index:0;left:0;top:0;display:inline;} #chgPwd_dummyDiv {position:relative;z-index:0;left:0;top:0;display:inline;} #manChgPwd_pwdDiv1 {position:relative;z-index:0;left:0;top:0;} #manChgPwd_pwdDiv2 {position:relative;z-index:0;left:0;top:0;} #manChgPwd_pwdDiv3 {position:relative;z-index:0;left:0;top:0;} /*------- Teamsite related -------*/ #teamsite_adjusted {position:relative;} /*------- VK Look&Feel ----------*/ #vk_pwdDiv {position:relative;z-index:0;left:0;top:0;} #vk_keyDiv {position:relative;z-index:0;left:0;top:0;height:175px;visibility:show;background-color:#E5E5E5} .shadedVKBgColor {background-color:#E5E5E5;} .id_on { position:absolute;cursor:pointer;visibility:hidden } .id_off { position:absolute;cursor:pointer;visibility:hidden } .id_key { position:absolute;cursor:pointer;visibility:hidden; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none; font-size:10pt;font-family:Arial } .id_key_red { position:absolute; cursor:pointer; visibility:hidden; BACKGROUND-COLOR: transparent; TEXT-DECORATION: none; font-size:10pt; font-family:Arial; color:red} FONT.caption { FONT-SIZE: 10pt; FONT-FAMILY: Arial, Helvetica, sans-serif } .inputField { cursor:default; font-weight:bold; font-size:12px; letter-spacing:1; color: black; background-color: #B3D1D8 } .slothead { padding-left:12; height:22; background: #666666 url(../images/leftend_arrow.gif) no-repeat;} .tab_off_top {font: 7pt arial,helvetica; color: white; width:78; height:12; padding-left:2; background:url(../images/tab_off_top.gif);} .tab_off_bottom {font: 7pt arial,helvetica; vertical-align:top; line-height:11px; padding-top:2; width:75; height:38; padding-left:5; background:url(../images/tab_off_bottom.gif);} .tab_on_top {font: 7pt arial,helvetica; color: white; width:78; height:12; padding-left:2; background:url(../images/tab_on_top.gif);} .tab_on_bottom {font: 7pt arial,helvetica; vertical-align:top; line-height:11px; padding-top:2; color: #CC0000; width:75; height:38; padding-left:5; background:url(../images/tab_on_bottom.gif)} .tab_title {font: 7pt arial,helvetica; color: #FFFFFF; line-height:8px;} .nextlink {font-family: arial,helvetica; font-size:10pt; color:black; font-weight:Bold; text-decoration:none;} .nextlink:hover {font-family: arial,helvetica; font-size:10pt; color:red; font-weight:Bold; text-decoration:none;} .securitybox {font-size:10pt; background:LightSlateGray} /* Ben Allen 04/05/05 */ /* ---enforce page background color--- */ BODY {background-color: white;} /* ---Headings Styles--- */ .mainhead {font-family:Arial,Helvetica,Verdana,Sans-Serif; font-size:16pt; color:#666666; text-decoration:none; padding-left:0;} /* ---Section Heading--- OLD STYLE: {font-family: arial,helvetica; font-size:10pt; color:WHITE; background-color:#666666; font-weight:Bold; text-decoration:none;} .sechead{font-family: arial,helvetica; font-size:10pt; color:BLACK; background-color: #cccccc; font-weight:Bold;} */ /* ---Section Heading--- Ben Allen 04/05/05 14:05 */ .sechead{font-family: arial,helvetica; font-size:86%; color:#fff; background-color: #999; font-weight:bold; padding: 4px 0px 4px 11px; border-bottom: 1px solid #fff;} /* ---Temporary Button Styles--- */ .button {font-family: arial,helvetica; font-size:10pt; color:WHITE; font-weight:Bold; text-decoration:none;} /* Main Body text Ben Allen */ /* Look and Feel remove */ /*.body1 {font-family: arial,helvetica; font-size:74%; color:#000; vertical-align:middle; background-color: #EEE; border-bottom: 1px solid #fff; font-weight: bold; padding: 4px 0px 4px 8px;} */ /* Look and Feel remove end */ /* Input and select elements in main body Ben Allen */ .body1 select, input, img {font-weight: normal; margin-left: 0px; padding-left: 0px; vertical-align:middle;} /* Main Body text in BOLD */ .body1-b {font-family: arial,helvetica; font-size:10pt; color:BLACK; font-weight:Bold; vertical-align:top;} /* Main Body text in ITALIC */ .body1-i {font-family: arial,helvetica; font-size:10pt; color:BLACK; font-style:Italic; vertical-align:top;} /* Main Body text with hyperlink */ .body-h {font-family: arial,helvetica; font-size:10pt; color:BLACK; vertical-align:top;} /* 2nd Body text */ .body2 {font-family: arial,helvetica; font-size:11pt; color:BLACK; vertical-align:top;} /* Bullet point */ .bullet {list-style-type: square;} /* ---Table style--- */ /* Table head .t-head{font-family: arial,helvetica; font-size:12pt; color:BLACK;}*/ /* New Table head - Ben Allen 04/05/05 10:19 */ .t-head{font-family: arial,helvetica; font-size:86%; color:#000; font-weight: bold; padding-bottom: 5px;} /* Column head */ .p-head{font-family: arial,helvetica; font-size:10pt; color:BLACK; background-color: #ffffff; font-weight:Bold;} /* Column head .c-head{font-family: arial,helvetica; font-size:10pt; color:BLACK; background-color: #cccccc; font-weight:Bold;}*/ /* Column head Ben Allen 04/05/05 10:38 */ .c-head{font-family: arial,helvetica; font-size:80%; color:#fff; background-color: #999; font-weight:bold; padding: 4px 0px 6px 7px;} /* Column head with hyperlink */ .c-head-h{font-family: arial,helvetica; font-size:10pt; color:BLACK; background-color: #cccccc; font-weight:Bold; text-decoration:underline;} /* Table body .t-body{font-family: arial,helvetica; font-size:10pt; color:BLACK; background-color:#EEEEEE; vertical-align:top;}*/ /* Table body Ben Allen 04/05/05 10:46 */ .t-body{font-family: arial,helvetica; font-size:74%; color:#333; background-color:#EEE; vertical-align:top; padding:5px 0px 5px 8px;} /* Table body (RED text) */ .t-body-red{font-family: arial,helvetica; font-size:10pt; color:#FF0000; background-color:#EEEEEE; vertical-align:top;} /* Table body in alt bgcolor .t-body-alt{font-family: arial,helvetica; font-size:10pt; color:BLACK; vertical-align:top;}*/ /* Table body in alt bgcolor Ben Allen 04/05/05 10:52 */ .t-body-alt{font-family: arial,helvetica; font-size:74%; color:#333; vertical-align:top; padding:5px 0px 5px 8px; background-color: #DBDBDB;} /* Table body in alt bgcolor (RED text) */ .t-body-alt-red{font-family: arial,helvetica; font-size:10pt; color:#FF0000; vertical-align:top;} /* Table body with hyperlink .t-body-h{font-family: arial,helvetica; font-size:10pt; color:BLACK; text-decoration:underline; background-color:#EEEEEE; vertical-align:top;}*/ /* Table body with hyperlink Ben Allen 04/05/05 11:35 */ .t-body-h{font-family: arial,helvetica; font-size:86%; color:#333; text-decoration:underline; background-color:#EEE; vertical-align:top; padding:5px 0px 5px 4px;} /* Table body with hyperlink in alr bgcolor .t-body-alt-h{font-family: arial,helvetica; font-size:10pt; color:BLACK; text-decoration:underline; vertical-align:top;}*/ /* Table body with hyperlink in alr bgcolor Ben Allen 04/05/05 11:38 */ .t-body-alt-h{font-family: arial,helvetica; font-size:86%; color:#333; text-decoration:underline; vertical-align:top; padding:5px 0px 5px 4px; background-color: #DBDBDB;} /* Table body in ITALIC */ .t-body-i{font-family: arial,helvetica; font-size:10pt; color:BLACK; font-style:Italic; background-color:#EEEEEE; vertical-align:top;} /* Table body in alt ITALIC */ .t-body-alt-i{font-family: arial,helvetica; font-size:10pt; color:BLACK; font-style:Italic; vertical-align:top;} /* Table body in BOLD */ .t-body-b{font-family: arial,helvetica; font-size:10pt; color:BLACK; font-weight:Bold; background-color:#EEEEEE; vertical-align:top;} /* Table body in alt BOLD */ .t-body-alt-b{font-family: arial,helvetica; font-size:10pt; color:BLACK; font-weight:Bold; vertical-align:top;} .inputbox{font-family: arial,helvetica; font-size:10pt; color:BLACK; vertical-align:top;} .dropdown{font-family: arial,helvetica; font-size:10pt; color:BLACK; vertical-align:top;} /* .textarea{font-family: arial,helvetica; font-size:10pt; color:BLACK;} */ .textarea {font-family: arial,helvetica; font-size:9pt; color:#000000;} .textarea-nls {font-family: MingLiu,Courier New,arial,helvetica; font-size:9pt; color:#000000;} .disclaimer{font-family: arial,helvetica; font-size:8pt; color:RED;} /* ---Left Navigation style--- */ /* 1st level */ .navl1{font-family:Arial,Helvetica,Verdana,Sans-Serif; font-size:9pt; color:BLACK; text-decoration:none;} /* 1st level selected */ .navl1-sel{font-family:Arial,Helvetica,Verdana,Sans-Serif; font-size:9pt; color:#FF0000; text-decoration:none;} /* 2nd level */ .navl2{font-family:Arial,Helvetica,Verdana,Sans-Serif; font-size:9pt; color:#000000; text-decoration:none;} /* 2nd level selected */ .navl2-sel{font-family:Arial,Helvetica,Verdana,Sans-Serif; font-size:9pt; color:#FF0000; text-decoration:none;} .errmsg{font-family: arial,helvetica; font-size:10pt; color:#ff0000;} .wrnmsg{font-family: arial,helvetica; font-size:10pt; color:#ff0000;} .copyright{font-family: arial,helvetica; font-size:8pt; color:BLACK;} .header{white-space: nowrap; font-family:Arial; font-size:10pt; font-weight:Bold; color: White;text-decoration:none;} .logoff{font-family:Arial; font-size:10pt; font-weight:Bold; color: #ffffff;} /* ---Calendar style--- */ /* Calendar text */ .cal{font-family: arial,helvetica; font-size:10pt; color:BLACK; text-decoration:none;} /* Top frame background */ .cal-top-bg{background-color:WHITE;} /* Middle frame background */ .cal-middle-bg{background-color:WHITE;} /* Bottom frame background */ .cal-bottom-bg{background-color:WHITE;} /* Table background */ .cal-t-bg{background-color:BLACK;} /* Table heading background */ .cal-t-head-bg{background-color:WHITE;} /* Table heading text */ .cal-t-head{font-family: arial,helvetica; font-size:12pt; font-weight:Bold; color:BLACK; text-decoration:none;} /* Table body background */ .cal-t-body-bg{background-color:LIGHTGREY;} /* Selected date (or current date) */ .cal-d-focus:link {font-family: arial,helvetica; font-size:10pt; color: GREEN; text-decoration: none;} .cal-d-focus:visited {font-family: arial,helvetica; font-size:10pt; color: GREEN; text-decoration: none;} .cal-d-focus:hover {font-family: arial,helvetica; font-size:10pt; color: DARKGREEN; text-decoration: none;} /* Listed dates */ .cal-d:link {font-family: arial,helvetica; font-size:10pt; color: BLUE; text-decoration: none;} .cal-d:visited {font-family: arial,helvetica; font-size:10pt; color: BLUE; text-decoration: none;} .cal-d:hover {font-family: arial,helvetica; font-size:10pt; color: DARKBLUE; text-decoration: none;} /* Weekend dates */ .cal-d-weekend:link {font-family: arial,helvetica; font-size:10pt; color: RED; text-decoration: none;} .cal-d-weekend:visited {font-family: arial,helvetica; font-size:10pt; color: RED; text-decoration: none;} .cal-d-weekend:hover {font-family: arial,helvetica; font-size:10pt; color: DARKRED; text-decoration: none;} /* Month drop down */ .cal-dropdown{font-family: arial,helvetica; font-size:10pt; color:BLACK; text-decoration:none;} /* Please Wait Page style */ .please-wait {font-family: arial,helvetica; font-size:10pt; color: WHITE; background: BLACK; font-weight:Bold;} /* Block Background Color in Gray*/ .highLightBackground { background-color: #EEEEEE;} /* Main Body Text in BOLD RED */ .body1-rb {font-family: arial,helvetica; font-size:10pt; color:#BD0126; font-weight:Bold; vertical-align:top;} /* Created by Ben Allen 04/05/05 12:24 */ .extHubPibRowSpacer{height: 20px; padding: 0px; margin: 0px; border: 0px;} /* Created by Ben Allen 04/05/05 14:50 */ .extHubPibNoBorder td{ border-bottom: 0px !important; } /* Created by Ben Allen 04/05/05 15:00 */ .extHubPibLinkButton {border-right: 2px solid #999; border-bottom: 2px solid #999; background-color: #fff; color: #36C; padding: 4px; font-weight: bold; margin-top: 5px; text-decoration: none; } /* Created by Ben Allen - fix for IE 5.01 */ div > .extHubPibLinkButton{ float: left; } /* Created by Ben Allen 04/05/05 15:00 */ .extHubPibButtonRow{font-family: arial,helvetica; background-color: #EEE; text-align: right;} /* Created by Ben Allen 04/05/05 15:00 */ .extHubPibButtonRow td{ padding: 9px 5px 9px 5px; } /* Created by Ben Allen 04/05/05 15:00 */ .extHubPibButtonRow td .extHubPibLinkButton{ margin-right: 8px;} /* Created by Ben Allen 04/05/05 15:00 */ .extHubPibButtonRow td .extHubPibFinalButton{ margin-right: 0px; } /* Look and Feel changes - start. PPCR P2GLF000110 */ div.mainhead { font-family:Arial,Helvetica,Verdana,Sans-Serif; font-size:12pt; color:#666666; text-decoration:none; padding-left:10; font-weight:bold; margin-left:10; padding: 4px 0px 4px 8px; } .body1 { font-family: arial,helvetica; font-size:60%; color:#000; vertical-align:middle; background-color: #fff; border-bottom: 1px solid #fff; padding: 4px 0px 4px 8px; } /* MYM2033#4 */ div.body1 li { vertical-align:baseline; } /* Look and Feel changes - end */ body { margin: 0px; font-family: Arial, Helvetica, sans-serif; color: #000; } /*GAV theme*/ .contentWrapper .curvyBox01 { width:572px; background:#f7f7f7 url("../images/curvy-box/top-01.gif") top left no-repeat; padding-top:10px; margin-bottom:3px; } /*This will contain the sub links*/ .contentWrapper .curvyBox02 { background:#fff url("../images/curvy-box/mid-01.gif") top left no-repeat; text-align:left; margin-top:2px; padding-top:16px; clear:both; } /*This is used where ther eis no header in the curvy box*/ .contentWrapper .curvyBox08 { background:#fff url("../images/curvy-box/top-02.gif") top left no-repeat; text-align:left; margin-top:2px; padding-top:16px; clear:both; width:573px; } /*This is needed when sub links don't exist*/ .contentWrapper .curvyBox07 { background:url("../images/curvy-box/mid-03.gif") top left no-repeat; } /*This will contain the content*/ .contentWrapper .curvyBox03 { background:url("../images/curvy-box/mid-02.gif") top left repeat-y; text-align:left; clear:both; height:1%; } .contentWrapper .curvyBox .curvyBox03b { margin:0px 16px 0px; } .contentWrapper .curvyBox .curvyBox03a { margin:0px 16px 0px; border-top:1px solid #dcdcdc; } /*This is just the bottom curve*/ .contentWrapper .curvyBox04 { background:url("../images/curvy-box/bot-01.gif") bottom left no-repeat; text-align:left; height:18px; } /*This is the bottom curve with cancel text area*/ .contentWrapper .curvyBox05 { background:url("../images/curvy-box/bot-02.gif") bottom left no-repeat; text-align:left; padding-bottom:11px; padding-top:11px; padding-left:16px; } /*This is the bottom curve with space for two links*/ .contentWrapper .curvyBox09 { background:url("../images/curvy-box/bot-04.gif") bottom left no-repeat; text-align:left; padding-bottom:9px; padding-top:17px;/* added 05/12/2006. Solves the problem where background images are cut off in Safari and Opera. Previous value padding-bottom:15px; */ padding-left:16px; } /*This is just the bottom curve when the box is closed*/ .contentWrapper .curvyBox06 { background:url("../images/curvy-box/bot-03.gif") bottom left no-repeat; text-align:left; height:10px; clear:both; font-size:1px; } /*help align background images*/ .curvyBox p { font-size:68%; margin:0px; } /*get around the right aligned issue*/ .curvyBox01 { text-align:right; } /*Any header type should work the same here*/ .curvyBox h1,.curvyBox01 h2,.curvyBox01 h3,.curvyBox01 p.curvyBoxHeading { font-size:87%; color:#666; margin:0px; padding-left:15px; vertical-align:middle; font-weight:normal; float:left; } /*right aligned text*/ .curvyBox01 p { padding-right:15px; color:#8e8e8e; } .curvyBox01 a.txt04, .curvyBox01 a.txt05 { float:left; display:block; height:14px; width:37px; background:url("../images/hide-01.gif") no-repeat left top; margin-left:17px; } .curvyBox01 a.txt05 { background-image:url("../images/show-01.gif"); width:45px; } .curvyBox01 a.txt04 span, .curvyBox01 a.txt05 span { display:none; } /*hide show button*/ .curvyBox01 h1 img,.curvyBox01 h2 img,.curvyBox01 h3 img { margin-left:17px; vertical-align:middle; } /*list of links in the header*/ .curvyBox02 ul, .curvyBox03b ul { margin:0px 0px 0px 17px; padding:0px; list-style:none; } .curvyBox03b { padding-left:8px; padding-right:6px; padding-bottom:11px; } .curvyBox03b ul { margin:17px 0px 16px 0px; width:100%; } .curvyBox02 ul li, .curvyBox03b ul li { font-size:68%; font-weight:bold; float:left; background:url("../images/arrow-right-01.gif") left top no-repeat; padding-left:18px; margin-right:23px; height:1%; padding-bottom:2px; margin-bottom:7px; } .curvyBox02 ul li a, .curvyBox03b ul li a { /*color:#2f89d4; 25/04/2007*/ color:#2e1362; } /*the table*/ .curvyBox table { width:540px; border-collapse:collapse; margin-top:1px; } .curvyBox table td,.curvyBox table th { font-size:68%; } .curvyBox table th { /*background-color:#ebf3f9; 25/04/2007*/ background-color:#ddd9e6; border-right:1px solid #fff; text-align:center; padding-top:3px; padding-bottom:3px; /*color:#2f89d4; 25/04/2007*/ color:#2e1362; } .curvyBox table td { border-top:1px solid #ebf3f9; border-left:1px solid #ebf3f9; padding-top:6px;/* padding-top:10px; */ padding-bottom:5px;/* padding-top:9px; */ background:bottom right no-repeat; } .curvyBox table td.col01 { padding-left:24px; font-weight:bold; color:#333; border-left:none; } .curvyBox table td.col01 span { margin-left:18px; padding-left:14px; background:url("../images/table-arrow.gif") top left no-repeat; } .curvyBox table td.col02 { text-align:center; color:#666; } .curvyBox table td.col03 { text-align:right; padding-left:34px; color:#666; } .curvyBox table tr.row01 td { /*background-color:#f9fbfd; 25/04/2007*/ background-color:#f7f6f9; } /*cancel line*/ .curvyBox05 p { margin:0px; background:url("../images/cross-01.gif") left top no-repeat; padding-left:19px; min-height:13px; } .curvyBox05 p a { height:1%; color:#e50000; font-weight:bold; } .curvyBox05a { font-size:68%; } .curvyBox09 ul { margin:0px 0px 0px 0px; padding:0px; list-style:none; } .curvyBox09 ul li { font-size:68%; font-weight:bold; background:url("../images/arrow-right-01.gif") left top no-repeat; padding-left:18px; margin-right:23px; height:1%; padding-bottom:7px; margin-bottom:0px; } .curvyBox09 ul li a { /*color:#2f89d4; 25/04/2007*/ color:#2e1362; } .curvyBoxLink01 a { height:1%; background:url("../images/arrow-right-01.gif") left top no-repeat; padding-left:18px; padding-bottom:3px;/* added 05/12/2006. Solves the problem where background images are cut off in Safari and Opera */ /*color:#2f89d4; 25/04/2007*/ color:#2e1362; font-weight:bold; } .formOptionList { clear:both; border-bottom:1px solid #dfdfdf; margin-right:26px; } .curvyBox03b .formOptionList { margin-bottom:24px; margin-right:18px; } .curvyBox03b p { color:#666; margin-right:20px; margin-bottom:10px; } .curvyBox03c { padding-top:7px; padding-left:7px; margin-right:15px; margin-bottom:7px; padding-bottom:17px; border-bottom:1px solid #dfdfdf; } .curvyBox03c label { color:#333; font-size:74%; } .curvyBox03c select { color:#333; font-size:74%; vertical-align:middle; } .curvyBox03d { border-top:1px solid #ebf3f9; border-bottom:1px solid #ebf3f9; margin-right:26px; padding-left:14px; padding-top:12px; padding-bottom:0px; margin-top:17px; margin-bottom:24px; } .curvyBox03d ul { margin-top:0px; margin-bottom:0px; padding-bottom:6px; } * html .curvyBox03d ul { height:1%; } .curvyBox03d ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .curvyBox03d ul li { background:url("../images/list-bullet-01.gif") left top no-repeat; padding-left:11px; margin-bottom:0px; padding-bottom:9px; font-weight:normal; } .curvyBox03e { margin:0px 16px 0px; } .formOptionSelected01 { background:url("../images/selected-bg-01.gif"); } .formOptionSelected02 { background:url("../images/selected-bg-02.gif"); } .formOption { padding:13px 14px 15px; border-top:1px solid #ebf3f9; } .formOption01 { border-top:1px solid #dfdfdf; } .formOption input { width:1em; height:1em; } .formOption label { font-size:74%; color:#333; } .termsAndConditions { border:1px solid #e7e4e4; height:198px; width:519px; overflow:auto; } .termsAndConditionsContents { padding:13px 12px; color:#666; } .termsAndConditionsContents h4,.termsAndConditionsContents h5,.termsAndConditionsContents p { margin:0px 0px 5px 0px; font-size:68%; } .termsAndConditionsContents h5 { font-weight:normal; } .curvyButton { margin-bottom:8px; margin-top:11px; clear:both; height:1%; } * html .curvyButton { height:1%; } .curvyButton:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .curvyButton h2 { margin-top:6px; margin-bottom:0px; } .curvyButton h1 { margin-bottom:0px; margin-left:15px; } .curvyButton div { background:top left no-repeat; float:left; margin-right:9px; } .curvyButton div div { background:url("../images/curvy-button/right-cap-01.gif") top right no-repeat; margin-left:31px; float:left; display:inline; margin-right:0px; padding-bottom:1px;/* added 05/12/2006. Solves the problem where background images are cut off in Safari and Opera */ min-height:31px; } .curvyButton div div a { display:block; font-size:74%; margin-top:8px; margin-bottom:9px; margin-right:14px; } div.curvyButton01 div a { /*color:#2f89d4; 25/04/2007*/ color:#2e1362; } div.curvyButton01 { background-image:url("../images/curvy-button/left-cap-01.gif"); } div.curvyButton02 div a { color:#666; } div.curvyButton02 { background-image:url("../images/curvy-button/left-cap-02.gif"); } div.curvyButton03 div a { /*color:#2f89d4; 25/04/2007*/ color:#2e1362; margin-bottom:13px;/* margin-bottom:13px; */ } div.curvyButton03 div { background-image:url("../images/curvy-button/right-cap-02.gif"); } div.curvyButton03 { background-image:url("../images/curvy-button/left-cap-03.gif"); } div.curvyButton04 div a { color:#00a650; margin-bottom:13px; } div.curvyButton04 div { background-image:url("../images/curvy-button/right-cap-02.gif"); } div.curvyButton04 { background-image:url("../images/curvy-button/left-cap-04.gif"); } div.curvyButton05 div a { color:#00a650; } div.curvyButton05 div { background-image:url("../images/curvy-button/right-cap-01.gif"); } div.curvyButton05 { background-image:url("../images/curvy-button/left-cap-05.gif"); } div.curvyButton06 div a { color:#666; } div.curvyButton06 { background-image:url("../images/curvy-button/left-cap-06.gif"); } div.curvyButtonRight { padding-right:18px; float:right; margin-right:0px; margin-left:9px; } .txt01 { color:#33c00b; } .txt02 { color:#f7941d; } .txt01,.txt02 { display:block; float:left; width:1.5em; padding-left:4px; text-align:left; } .txt03 { display:block; float:left; width:5em; } html body div.curvyBox08 p.txt07 { font-size:74%; margin-bottom:17px; padding-top:7px; } html body div.curvyBox08 p.txt07 a { /*color:#2F89D4; 25/04/2007*/ color:#2e1362; text-decoration:underline; } html body div.curvyBox08 p.extSpacing01 { margin-bottom:5px; } .txt08 { color:#00a650; } .txt09 a { height:1%; background:url("../images/arrow-right-02.gif") left top no-repeat; color:#8e8e8e; padding-left:18px; padding-bottom:3px;/* added 05/12/2006. Solves the problem where background images are cut off in Safari and Opera */ } .leftNav01 { width:178px; margin-bottom:10px; } * html .leftNav01 { height:1%; } .leftNav01:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .leftNav01 ul { list-style:none; margin:0px; padding:0px; } .leftNav01 ul li { list-style:none; width:178px; margin:0px; float:left; clear:both; margin-bottom:2px; } .leftNav01 ul li a { background-color:#d6d6d6; color:#000; font-size:74%; display:block; width:auto; padding-left:18px; padding-right:10px; padding-top:4px; padding-bottom:4px; line-height:120%; margin:0px; } .leftNav01 ul li ul li a { background-color:#f6f4f1; } .leftNav01 ul li ul { margin-top:2px; border-bottom:1px solid #fff; } .leftNav01 ul li.leftNav01a { margin-bottom:0px; } .leftNav01 ul li ul li ul li a.leftNav01Selected { background:#f6f4f1 url("../images/left-nav-arrow-01.gif") left top no-repeat; font-weight:bold; } .leftNav01 ul li ul li a.leftNav01Selected { background:#f6f4f1 url("../images/left-nav-arrow-02.gif") left top no-repeat; font-weight:bold; } .leftNav01 ul li ul li ul li a { padding-left:28px; } .leftNav02 { width:180px; float:left; } .leftNav02a { background:url("../images/left-nav/mid-01.gif") repeat-y left; border-bottom:11px solid #fff; } .leftNav02b { background:url("../images/left-nav/top-01.gif") no-repeat top left; } .leftNav02c { background:url("../images/left-nav/bot-01.gif") no-repeat bottom left; padding:16px 21px 16px 9px; } .leftNav02 p { margin:0px; padding:0px 9px 12px; font-size:81%; color:#666; } .leftNav02 ul { margin:0px; padding:0px; list-style:none; border-top:1px solid #e1e1e1; } .leftNav02 ul li { border-bottom:1px solid #e1e1e1; padding:7px 9px 8px; } .leftNav02 ul li.selected { font-weight:bold; } .leftNav02 ul li a { color:#666; font-size:68%; } .gavToIb span { display:none; } .gavToIb a { width:180px; height:100px; background:url("../images/gav-to-ib.gif") no-repeat top left; display:block; margin-bottom:7px; } .launchDemo span { display:none; } .launchDemo a { padding-top:11px; width:180px; height:70px; background:url("../images/launch-demo.gif") no-repeat top left; display:block; } .rmBox01 { border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; padding:12px 5px 9px 10px; } * html .rmBox01 { height:1%; } .rmBox01:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .rmBox01 p { font-size:68%; margin:0px; padding:0px 0px 2px; } .rmBox01 p a { color:#39c; } .rmBox01 img { float:right; } .rmBox02 { padding:12px 5px 9px 10px; } .rmBox02 p { font-size:68%; margin:0px; padding:0px 0px 2px; } .rmBox02 p.txt06 { font-size:87%; font-weight:bold; padding-top:4px; } h1 { font-family:Arial, Helvetica, sans-serif; font-size:131%; font-weight:normal; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; } h1.heading01 { margin:0px 0px 0px 15px; } h1.heading02 { margin:0px 0px 15px 0px; } h2 { font-family:Arial, Helvetica, sans-serif; font-size:119%; font-weight:normal; margin:0px 0px 11px 15px; padding:13px 0px 0px 0px; clear:both; height:1%; } form { margin:0px; padding:0px; display:inline; } .formContainer { border-bottom:1px solid #ebf3f9; margin-right:18px; margin-bottom:7px; padding-top:10px; height:1%; } .formRowHighlight { border-top:1px solid #ebf3f9; padding-top:13px; font-weight:bold; } .formRow { height:1%; clear:both; padding-bottom:13px; } .formLabel { float:left; width:185px; padding-left:5px; padding-right:10px; } .formLabelRCC { width:178px; } .formInput select, .formInput input, .formLabel label, .tdRCC label, .tdRCC input { color:#666; font-size:74%; } .formLabel p a { /*color:#2F89D4; 25/04/2007*/ color:#2e1362; text-decoration:underline; } .formInput { float:left; width:320px; } .formInput p { font-weight:bold; } .tdRCC { width:60px; } * html .formRow { height:1%; } .formRow:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .wideFormat .contentWrapper .curvyBox01 { width:764px; background-image:url("../images/curvy-box/top-wide-01.gif"); } .wideFormat .contentWrapper .curvyBox02 { background-image:url("../images/curvy-box/mid-wide-01.gif"); } .wideFormat .contentWrapper .curvyBox08 { background-image:url("../images/curvy-box/top-wide-02.gif"); width:764px; } .wideFormat .contentWrapper .curvyBox07 { background-image:url("../images/curvy-box/mid-wide-03.gif"); } .wideFormat .contentWrapper .curvyBox03 { background-image:url("../images/curvy-box/mid-wide-02.gif"); } .wideFormat .contentWrapper .curvyBox04 { background-image:url("../images/curvy-box/bot-wide-01.gif"); } .wideFormat .contentWrapper .curvyBox05 { background-image:url("../images/curvy-box/bot-wide-02.gif"); } .wideFormat .contentWrapper .curvyBox09 { background-image:url("../images/curvy-box/bot-wide-04.gif"); } .wideFormat .contentWrapper .curvyBox06 { background-image:url("../images/curvy-box/bot-wide-03.gif"); } .wideFormat .contentWrapper { /* width:585px; + 192*/ width:777px; } .wideFormat .termsAndConditions { /* width:519px; + 192 */ width:701px; } .footer { border-top:1px solid #d3d3d3; margin-top:13px; padding-top:11px; font-size:68%; color:#666; margin-bottom:30px; } .countryStrip { background-color:#eaeaea; font-size:61%; padding-left:10px; padding-top:1px; } .popupHeader { width:780px; border-bottom:8px solid #f00; float:left; margin-bottom:27px; } .popupHeader01 { height:75px; float:left; } div.hsbcDivletLogo { margin-top:13px; margin-left:5px; width:auto; } div.hsbcDivletLogo .hsbcDivletLogoImage { padding:13px 0px 5px 10px; float:left; width:127px; } div.hsbcDivletLogo .hsbcDivletLogoImage img { border:0px; } div.hsbcDivletLogo .hsbcDivletLogoTagLine { float:left; vertical-align:middle; padding:18px 0px 0px 12px; font:bold 12px Arial, Helvetica, sans-serif; color:#f00; } body { font-family:Arial, Helvetica, sans-serif; /*font-size:1.01em; should be applied to opera and safari*/ margin:0px; } a { text-decoration:none; } a:hover { text-decoration:underline; } .leftNav02 a img { margin-bottom:7px; margin-top:35px; } .pageWrapper { width:780px; clear:both; } .dummyHeader { padding-bottom:16px; } .banner01 { padding-top:1px; } .banner02 { float:right; margin-left:25px; } .leftNavWrapper { padding-left:1px; float:left; } .contentWrapper { float:left; width:585px; } .contentWrapper01 { padding-left:12px; float:left; } * html .headerBannerBox { height:1%; } .headerBannerBox:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .headerBannerBox { border-bottom:1px solid #d3d3d3; padding-left:15px; /* float:left;*/ } .extButtonInBoxFix { height:1%; /* added 05/12/2006. This is a fix for IE7. If a .curvyButton is in .headerBannerBox you should add this extension class */ } .headerBox { padding-left:15px; } .headerBannerBox p { font-size:74%; margin-bottom:15px; margin-right:15px; } .headerBannerBox p a { /*color:#2f89d4; 25/04/2007*/ color:#2e1362; text-decoration:underline; } p.loader { background:url("../images/ajax-loader.gif") left no-repeat; font-size:100%; margin:10px 0px 5px 0px; padding:5px 0px 0px 35px; } .gavErrorMsg { margin:0px 36px 0px; } .gavErrorMsg02 { margin:0px 39px 0px; } /* eSales Begins */ div.hsbcBannerImg { float:left; position:relative; } div.hsbcBannerImg .hsbcBannerTxt { font-size:16px; padding:0px; position:absolute; width:620px; height:20px; overflow:hidden; line-height:110%; top:6px; font-weight:bold; left:10px; z-index:2; cursor:pointer; } div.extSmallBanner .hsbcBannerTxt { font-size:14px; top:8px; font-weight:bold; width:195px; height:18px; } div.hsbcBannerImg a { text-decoration:none!important; color:#0067DA; } /* eSales Ends */