/* Default */
body { margin: 0; padding: 0; font: normal 11px/15px Arial, Helvetica, sans-serif; background: #fff; color: #3d3d3d; }
p { margin: 1em 0; text-align: justify; }
a { outline: none; color: #005aa6; text-decoration: none; font-weight: bold; }
a:hover { color: #000; text-decoration: none; }
img { border: 0; vertical-align: middle; }
sup { color: #f00; font-weight: bold; }
strong { color: #121212; }
ul { margin: 10px 0; padding-left: 26px; }
address { font-style: normal; margin: 10px 0; padding-bottom: 10px; }

/* Overall Layout */
#container { width: 956px; padding: 110px 2px 0 2px; margin: 0 auto; overflow: hidden; background: url(bg_container.gif) left top no-repeat; position: relative; }
#content { width: 1000px; position: relative; z-index: 5; }
#about { background-color: #e7e5e6; width: 255px; margin-top: 127px; position: relative; z-index: 31; } /* position and z-index is to solve speakingNav layer issue in IE7 */
#services { background-color: #f5f5f5; width: 463px; margin-top: 0; position: relative; z-index: 30; }  /* z-index is set to the lowest layer in order for SpeakingNav for About Us and Our Portals to go on top */
#portals { background-color: #dcdcdc; width: 208px; margin-top: 212px; position: relative; z-index: 32; }
#footer { width: 928px; margin: 0 auto; background: url(bg_footer.png) repeat-x left top; height: 55px; padding: 14px; color: #727272; line-height: 16px; }

/* Footer - SPH */
.sph { color: #005aa6; background: url(border_footer.gif) no-repeat left 2px; margin-left: 10px; padding-left: 13px; display: inline-block; }
.sph a { font-weight: normal; }

/* Container Background */
#background { position: absolute; top: 2px; left: 2px; width: 956px; height: 514px; z-index: 1; overflow: hidden; }
#background img { position: absolute; top: 0; left: 0; display: none; }
#background img.active { display: block; z-index: 1; }

/* General Floating */
.left { float: left; }
.right { float: right; }

/* General Image Style */
.img { border: 1px solid #bfbfbf; padding: 2px; box-shadow: 1px 1px 3px #666; background: #e7e5e6; }

/* General Style for other font styles */
h3 { font-size: 14px; font-weight: bold; color: #ff7e00; margin: 0; }
h4 { color: #000; font-size: 12px; margin: 10px 0 0 0; }
.footnote { font-style: italic; }

/* Header */
#header { width: 960px; height: 87px; margin: 0 auto; clear:both; }
#header h1 { width: 188px; float: left; background: url(logo.gif) no-repeat left top; margin: 0; }
#header h1 a { text-indent:-1000em; width:188px; height:87px; display:block; }
.topNav { float: right; width: 160px; height: 25px; list-style: none; margin: 52px 0 0 0; padding: 0; }
.topNav li { float:left; }
.topNav li a { text-indent: -1000em; height: 25px; display: block; background: url(topNav.gif) no-repeat; }
.topNav a.home { width: 72px; background-position: left top; }
.topNav a:hover.home { background-position: left bottom; }
.topNav a.contact { width: 86px; background-position: right top; }
.topNav a:hover.contact { background-position: right bottom; }
.section { float: left; background: url(section_frame.jpg) repeat-x left top; padding: 13px 5px 5px 5px; }
.collapsed { }
.expanded { }

/* Speaking Nav */
.speakingNav { display: block; background: url(speakingNav_bg.png) no-repeat left top; position: absolute; z-index: 100; left: 130px; top: -65px; list-style: none; margin: 0; padding: 10px 7px 26px 13px; width: 175px; height: 46px; font-size: 11px; color: #fff; line-height: 14px; text-indent: 0; }
#portals .speakingNav { background-position: left bottom; left: -155px;  }
#portals.expanded .speakingNav { background-position: left top; left: 130px;  }
#about.collapsed .speakingNav { left: 30px; top: -70px; }
#services.collapsed .speakingNav { left: 30px; }
#services.collapsed.right .speakingNav { background-position: left bottom; left: -155px; right: 0; }

/* First Level Navigation / Section Header */
.sectionHeader { background: url(sectionHeader_bg.gif) no-repeat right top; padding-right: 1px; }
.sectionHeader:hover { background-position: right bottom; }
h2 { cursor: pointer; }
h2 { position: relative; height: 43px; line-height: 43px; margin: 0; background: no-repeat left top; text-indent: -1000em; }
h2:hover { background-position: left bottom; }
h2 .speakingNav { display: none; }
h2:hover .speakingNav { display: block; }
#about h2 { background-image: url(sectionHeader_aboutus.gif); }
#services h2 { background-image: url(sectionHeader_ourservices.gif); }
#portals h2 { background-image: url(sectionHeader_ourportals.gif); }
#contact .sectionHeader { background-position: right bottom; }
#contact h2 { width: 100%; cursor: default; background: url(sectionHeader_contactus.gif) no-repeat left bottom; margin-bottom: 15px; }

/* Home - General */
.sectionOverview { padding: 5px; }
.sectionOverview h3 { font-size: 13px; font-weight: bold; color: #005195; padding-top: 4px; font-weight: normal; }
.sectionOverview h3.marketdata { padding-top: 0; }
.sectionOverview p { text-align: left; }

/* Home - Our Services */
#services .sectionOverview ul { list-style: none; margin: 0; padding: 0; }
#services .sectionOverview li { clear: both; height: 58px; padding: 5px; position: relative; cursor: pointer; }
#services .sectionOverview li:hover { background: url(btnbg_home_ourservices.gif) no-repeat left top; }
#services .sectionOverview .img { float: left; margin: 0 10px 0 0; }
#services .sectionOverview li:hover .img { background: #fff; }

/* Sub - General */
.sectionContent { display: none; }

/* Sub - About Us (Scrolling Contents) */
#aboutContainerWindows { overflow: hidden; height: 438px; width: 800px; margin: 0 auto; }
#aboutContainer { width: 10000px; height: 438px; background: #fff; }

/* Sub - Our Services (Scrolling Contents) */
#servicesContainerWindows { overflow: hidden; height: 520px; width: 800px; margin: 0 auto; position: relative; }
#servicesContainer { width: 10000px; height: 520px; background: #fff; }

/* Sub - Event Management (Photo Gallery) */
#eventManagement .content { float: left; width: 459px; }
#eventManagement .photoGallery { width: 319px; float: right; }

/* Sub - Our Portals */
#portals .sectionContent { padding: 10px; }
#portalsContainer { padding: 10px; background: #fff; height: 480px; }
#portalsContainer h1 { text-indent: -1000em; background: url(title_shareinvestor.gif) no-repeat center top; height: 61px; margin: 0; cursor: default; }
#portalsContainer h2 { text-indent: -1000em; background: none; position: relative; cursor: default; }
#portalsContainer h2.singapore { background: url(title_singapore.gif) no-repeat; }
#portalsContainer h2.malaysia { background: url(title_malaysia.gif) no-repeat; }
#portalsContainer h2.thailand { background: url(title_thailand.gif) no-repeat; }
.portals_columns { float: left; margin-right: 21px; position: relative; width: 244px; }
.portals_columns.last { margin-right: 0; }
.directory { width: 244px; list-style: none; padding: 0; margin: 0; position: absolute; top: 29px; z-index: 10; }
.directory li { height: 42px; width: 224px; background: url(bg_directory.gif) repeat-x left top #fefeff; padding: 10px; line-height: 11px; position: relative; margin: 0; }
.directory li:hover, .directory li.first:hover, .directory li.last:hover { background-position: left bottom; }
.directory li.first { background: url(bg_directory_first.gif) repeat-x left top #fefeff; }
.directory li.last { background: url(bg_directory_last.gif) repeat-x left top #fefeff; }
.directory li a { display: block; font-weight: normal; color: #3d3d3d; }

/* Sub - General Style for Scrolling Contents */
.pane { float: left; width: 780px; padding: 10px; }
.pane .content { float: left; width: 575px; }
.pane .sectionHighlight { float: right; width: 190px; }
.pane .sectionHighlight .infoContainer { background: url(info_bgBottom.gif) no-repeat left bottom #565656; color: #fff; margin-top: 12px; width: 187px; height: 330px; }
.pane .sectionHighlight .infoContainer h4 { background: url(info_bgTop.gif) no-repeat left top; color: #fff; margin: 0; padding: 12px 12px 0 12px; font-size: 14px; }
.pane .sectionHighlight .infoContainer .info { position: relative; }
.pane .sectionHighlight .infoContainer .info strong { color: #ffaa56; display: block; }
.pane .sectionHighlight .infoContainer .info span { font-weight: bold; font-size: 18px; color: #ffaa56; position: relative; top: 3px; margin: 0 5px; }
.pane .sectionHighlight .infoContainer p { text-align: left; padding: 0 12px; margin: 0; position: absolute; top: 0; left: 0; height: 300px; background: #565656; }

/* Sub - BOD */
#directors .content { float: left; width: 395px; }
#directors .content div { float: left; margin: 12px 12px 0 0; cursor: pointer; }
#directors .sectionHighlight { float: right; width: 380px; }
#directors .sectionHighlight div { display: none; }

/* Sub - Second Level Navigation */
.subNav { list-style: none; margin: 0; padding: 10px 0; height: 14px; }
.subNav li { float: left; border-right: 1px solid #3d3d3d; padding: 0 10px; }
.subNav li.last { border: none; }
.subNav .selected a { color: #b7b7b7; }

/* Sub - Reset of first (p) tag (to solve spacing issue) */
/* Sub - Remove spacing between h4 and first paragraph */
p.first { margin: 0 0 10px 0; }

/* Style for the word of "ShareInvestor" */
.shareInvestor { color: #000; font-weight: bold; }
.shareInvestor span { color: #f00; }

/* Contact */
#contact { padding: 5px; }
#contact .item { float: left; margin-right: 25px;  }