@charset "utf-8";

/*---------- ---------- ---------- Investment Common Styles ---------- ---------- ----------*/
.investment-overlay.selected {position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: block; opacity: 0.7; filter: alpha(opacity = 70); background-color: #fff; z-index:1000;}

.investment-disclaimer-popup-wrap {position: absolute; top: 100px; left: 0; width: 100%; display:none;}
body.en p.disable-flash:before {margin: 30px 0px; display: block; content: "We are sorry. The display of the investment choice performance chart requires Adobe Flash Player, which is not supported by your device."; font-weight: normal; width: 95%; text-align:left;}
body.zh_HK p.disable-flash:before {margin: 30px 0px; display: block; content: "對不起，投資選項價格走勢圖需要Adobe Flash Player軟件支援，而此裝置未能支援該軟件。"; font-weight: normal; width: 95%; text-align:left;}
.investment-disclaimer-popup {position: relative; width: 70%; margin: 0 auto; padding: 0 0 10px 0; border: 1px solid #cfcfcf; z-index: 1020 !important; background-color: #fff; opacity: 1; -moz-border-radius: 5px;  -webkit-border-radius: 5px; border-radius: 5px;}
.investment-disclaimer-popup .close-btn {position: absolute; top: 8px; right: 15px; cursor: pointer;}
.investment-disclaimer-popup .title p {font-size: 1.3em; color: #ed1b2e; font-weight: bold; padding: 10px 15px;}
.investment-disclaimer-popup .top-section {position: relative; -webkit-box-shadow: 0 8px 6px -6px #d5d5d5; -moz-box-shadow: 0 8px 6px -6px #d5d5d5; box-shadow: 0 8px 6px -6px #d5d5d5; margin: 6px 0 0 0;}
.investment-disclaimer-popup .lower-section {position: relative; padding: 25px 20px; width: 93%; height: 400px; overflow: auto; box-sizing: content-box; }
.investment-disclaimer-popup .lower-section ul {list-style: disc;}
.investment-disclaimer-popup .lower-section li {margin: 5px 0px 5px 25px;}
.investment-disclaimer-popup .btn-confirm-wrap {text-align: center; padding: 15px 0px;}
.investment-disclaimer-popup .btn-confirm {background-color: #ed1b2e; position: relative; cursor: pointer; display: inline-block;
-moz-border-radius: 5px;  -webkit-border-radius: 5px; border-radius: 5px;}
.investment-disclaimer-popup .btn-confirm p {color: #fff; font-size: 14px; padding: 4px 15px;}
.investment-chart.style1 td {font-size: 11px !important;}
.investment-chart .foot-note td, .investment-chart .foot-note p{font-size: 12px !important;}
.medium .investment-chart .foot-note td,.medium .investment-chart .foot-note p{font-size: 13px !important;}
.large .investment-chart .foot-note td,.large .investment-chart .foot-note p{font-size: 14px !important;}
.section p.title, .sec{margin-bottom:10px;}
.investment-chart.left.style2 .content2 td{width:50%;}
.investment-title.style2 .tool-button{margin-bottom:10px;}

.investment-chart-controls.tablet-hide{width: 100%; padding-right:0px;}

.investment-chart-controls .drop-down-selector {width:70%; float: left;}
.investment-chart-controls .drop-down-selector .left{width:32%; float: left;}
.investment-chart-controls .drop-down-selector .right{width:66%; float: left;}
.investment-chart-controls .drop-down-selector select{margin:0px; max-width:100%;}

.investment-chart *{
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.table-outer-border {
	border: 2px solid black;
	content: "";
	clear: both;
}

td.one-line {white-space: nowrap;}
@media handheld, only screen and (max-width: 1040px) {
	.investment-disclaimer-popup {width: 85%; padding: 0 0 25px 0;}
	.investment-disclaimer-popup .lower-section {height: 300px; overflow: auto;}
}
@media handheld, only screen and (max-width: 767px) {
    .investment-disclaimer-popup-wrap {/*position: fixed;*/ top: 0; z-index: 1050; display:none;}
}

.section {clear: both; padding: 10px 0px;}
.section:after {display: block; content: ''; clear: both;}

/*---------- ---------- ---------- Investment Chart ---------- ---------- ----------*/
.investment-chart-wrap {padding: 10px 0px; clear: both; width: 100%;}
.investment-chart-wrap img {max-width: 100%;}

@media handheld, only screen and (max-width: 1040px) {
    .investment-chart-wrap {padding: 10px 0px 10px 0px;}
}
@media handheld, only screen and (max-width: 767px) {
	.section {/*margin: 0;*/}
}
/*---------- ---------- ---------- Investment Exchange Rates ---------- ---------- ----------*/
.exchange-rates {margin: 14px 0px;}
.medium .exchange-rates {font-size: 1.1em;}
.large .exchange-rates {font-size: 1.2em;}
.exchange-rates .section:after {content:''; clear: both; display: block;}
.exchange-rates .left {width: 30%; float: left;}
.exchange-rates .right {width: 69%; float: left; }

.exchange-rates .currency-title {display: inline;}
.exchange-rates .currency-name {display: inline;}


@media handheld, only screen and (max-width: 1040px) {
	.exchange-rates {margin: 10px 0px;}
}
@media handheld, only screen and (max-width: 767px) {
	.exchange-rates {margin: 0px 0px 10px 0px;}
	.exchange-rates .section {padding: 10px 0px;}
	.exchange-rates .left {width: 95%; float: none;}
	.exchange-rates .right {width: 95%; float: none; }
	.exchange-rates .currency-name {display: inline-block;}
}

/*---------- ---------- ---------- Investment Performance ---------- ---------- ----------*/

.investment-title{margin: 25px 0 0 0; width: 280px; float: right;}
.zh_HK .investment-title { width: 180px;}
.investment-title.tablet-hide { margin:0px 0 0 0; width: 280px;}
.investment-title.length1 {width: auto;}
.investment-title.length2 {width: 95px;}
h1.investment-title {width: 60%; float: left;}

.tools {width: 100%; float: right;}
.tools:after {display: block; content: ''; clear: both;}

.tools p {display: block;}

.tools .tool-button {position: relative; width: 100%;  float: right; background-color: #fff; margin: 0px 0px 0px 0px;}
.tools .tool-button .icon {position: relative; top: 0px; left: 0px; width: 25px; float: left; text-align: center; cursor: pointer;}
.tools .tool-button p {color: #ed1b2e; text-decoration: underline; float: left; position: relative; width: initial; top: 0px; margin: 0 0 0 5px; cursor: pointer;}
.tools .align-icon {position: relative; top: -4px; left:-2px; margin: 0 0px 0 30px;}
.zh_HK .tools .align-icon {margin: 0 0px 0 65px;}
.tools .tool-button:after {clear: both; content: ''; display: block;}
.investment-chart-controls {position: relative; /*background-color: #f3f3f3; -webkit-box-shadow: 0 8px 6px -6px #d5d5d5; -moz-box-shadow: 0 8px 6px -6px #d5d5d5; box-shadow: 0 8px 6px -6px #d5d5d5; */  padding: 10px 10px 10px 0; margin: 10px 0px 0px 0px; text-align: left; float: left; z-index:1;}
.investment-chart-controls.date {max-width: 600px;}
.investment-chart-controls .title {display: block; font-size: 14px; padding: 0; margin-bottom: 10px; color: #25383c;}
.investment-chart-controls .title.style2 {display: inline;}
.investment-chart-controls .upper-controls {margin: 5px 0px;}
.investment-chart-controls .controls {position: relative; display: block; margin: 2px 0px 5px 0px; min-height: 24px;}
.investment-chart-controls .controls p{ display: inline-block; top: -1px !important; }
.investment-chart-controls .controls.inline-content {display: inline-block; margin: 5px 35px 5px 0px;}
.investment-chart-controls .controls.inline-content.last {margin: 5px 0px 5px 0px;}
.investment-chart-controls.date .controls.inline-content p {width: 50px;}
.note.inline-content {width: 100%; float: left;}
.investment-chart-controls.date .controls p {width: 120px; float: left;}
.investment-chart-controls .left {width: 218px; float: left; padding: 0 10px 0 0;}
.investment-chart-controls .right {width: 420px; float: left;}
.investment-chart-controls .right .controls {margin: 0 0 8px 0;}
.investment-chart-controls .right .controls .left-half {width: 49%; float: left;}
.investment-chart-controls .right .controls .right-half {width: 49%; float: left;}
.investment-chart-controls .right .controls .right-half select {width: 100%;}
.investment-chart-controls .show-all {position: relative; display: inline-block; background-color: #ed1b2e; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; display: none;}

.investment-chart-controls .show-all a {color: #FFF; font-size: 0.9em; padding: 2px 10px; display: block;}

.investment-summary-header-control {position: relative; margin: 30px 0 0 0; width: 100%;}
.investment-summary-header-control p {width: 22%; padding: 5px 0 0 0; float: left;}
.investment-summary-header-control select {width: 78%;}
.investment-summary-header-control:after { display:block; content:''; clear:both;}
.investment-summary-header-control  .responsive-checkbox { display:block; position:relative; float:left; width:77%; padding: 5px 0 0 0;}
.investment-summary-header-control  .responsive-checkbox .controls { float:left;}
.investment-summary-header-control  .responsive-checkbox .controls .chkbox { width:100%;}

.investment-chart-roller {display: none;}

.investment-chart table {width: 100%; font-size: 13px;}
.investment-chart .sticky-header-table.fixed {z-index:20;}
.medium .investment-chart table {width: 100%; font-size: 15px;}
.large .investment-chart table {width: 100%; font-size: 16px;}
.investment-chart td {/*max-width: 55px;*/ padding: 1px; text-align: center; border: 1px solid #ccc; vertical-align:top;}
.medium .investment-chart td {max-width: 77px;}
.large .investment-chart td {max-width: 77px;}
.investment-chart.style2 {padding: 10px 0 0 0;}
.investment-chart.style2 td {border: none; padding: 10px;}
.investment-chart.style2 table {display: table;}
.investment-chart.style2.border table {border: 1px solid #cfcfcf;}
.investment-chart.style2.border table td {border-left: 1px solid #cfcfcf; border-right: 1px solid #cfcfcf;}
.investment-chart .main-title td {color: #ed1b2e; background-image: url("../../images/bg-investment-001.jpg"); background-repeat: repeat-x; background-position: top;}
.investment-chart.style2 .main-title td {background-image: none; background-color: #EDEEF0;}
.investment-chart.style2.border .main-title td {background-color: #fff; background-image: url("../../images/bg-investment-001.jpg"); background-repeat: repeat-x; background-position: top;}
.investment-chart.left .main-title td {font-weight: bold;}
.investment-chart.left td {text-align: left;}
.investment-chart .main-title2 td{background-color: #fcfcfc; color: #ed1b2e;}
.investment-chart .green-section td {background-color: #a9cbcd; color: #fff; font-weight: bold; text-align: left;}
.investment-chart .content2 {background-color: #edeef0;}
.investment-chart .content2 .name { cursor: pointer;}
.investment-chart .content2.light {background-color: #ffffff;}
.investment-chart .content2 .name {text-decoration: underline; max-width: 96px; text-align: left; padding: 5px 5px 5px 5px;}
.investment-chart .content2 .ref-fund-name {max-width: 79px; text-align: left; padding: 5px 5px 5px 5px;}
.investment-chart .content2 .asset-class {max-width: 72px;}
.investment-chart .content2 .bid-price {max-width: 57px;}
.investment-chart .content2 .offer-price {max-width: 57px;}
.investment-chart .calendar-fund-ytd, .investment-chart .calendar-fund-year1, .investment-chart .calendar-fund-year2, .investment-chart .calendar-fund-year3, .investment-chart .calendar-fund-year4, .investment-chart .calendar-fund-year5 { cursor: pointer; white-space: nowrap;}
.investment-chart .calendar-fund-name { cursor: pointer; white-space: normal;}
.investment-chart .calendar-fund-name div {width: 70px; margin-left: auto; margin-right: auto;}
.investment-summary .back {z-index:2;}
.chart-default .chart-arw-inone { display:inline-block;}
.chart-default .chart-arw-up, .chart-default .chart-arw-down { display:none;}
.chart-descend .chart-arw-down { display:inline-block}
.chart-descend .chart-arw-inone, .chart-descend .chart-arw-up { display:none} 
.chart-ascend .chart-arw-up { display:inline-block;}
.chart-ascend .chart-arw-down, .chart-ascend .chart-arw-inone { display:none;}

.foot-note {margin: 15px 0px; font-size: 11px;}
.foot-note p {font-size: 11px; margin: 10px 0px;}
.foot-note table td {border: none; text-align: left; font-size: 11px;}
.foot-note table td.symbol {width: 30px; vertical-align: top;}


@media handheld, only screen and (max-width: 1040px) {
	h1.investment-title {width: 100%;}
	.section.tablet-hide {display: none;}
	.tools {width: 100%; float: none; margin: 10px 0px 10px 0px;}
	.foot-note {margin: 15px auto;}
	.table-outer-border {border-width: 0px;}
	.investment-chart table {display: none;}
	.investment-chart  p {display: none;}
	.investment-chart .foot-note table {display: table;}
	.investment-chart.style2 {display: block;}
	.investment-summary-header-control {position: relative; width: 90%; float: left; margin: 5px 0 20px 15px;}
	.investment-summary-header-control p {width: 27%;}
	.investment-summary-header-control select {width: 72%;}
        .investment-summary-header-control  .responsive-checkbox { width:72%; padding: 0 0 0 0;}
        .investment-summary-header-control  .responsive-checkbox .controls { padding: 5px 3px; }
	
	.investment-chart-controls { width: 535px;}
	.investment-chart-controls.tablet-hide {display: none;}
	.investment-chart-controls.style2 {margin: 0;}
	.investment-chart-controls.style2:after {content: ''; display: block; clear: both;}
	.investment-chart-controls .left {width: 30%; margin-right: 5%;}
	.investment-title {margin: 7px 0 0 0; width: 240px;}
	.investment-title.tablet-hide {display: none;}
	.investment-title p {width: 83% !important;}
    .zh_HK .investment-title p {width: auto !important;}
	.investment-title.length1 p, .investment-title.length2 p {width: initial !important;}
	.investment-chart-controls .show-all {display: inline-block;}
	.investment-chart-controls .controls.inline-content {display: inline-block; margin: 5px 35px 5px 0px;}
	.investment-chart-controls .controls.inline-content.last {margin: 5px 0px 5px 0px;}
	.investment-chart-controls.date .controls.inline-content p {width: 50px;}
	.note.inline-content {width: 100%; float: left;}
	
	.investment-chart-controls .controls p {display: block; width: 100%;}
	.investment-chart-roller {position: relative; display: block;}
	.investment-chart-roller .left-control {display: none;}
	.investment-chart-roller p.title {display: block; margin: 0 0 0 0px;}
	.investment-chart-roller .tools {position: absolute; width: 162px; top: -26px; right: 0px; z-index:1;}
        .zh_HK .investment-chart-roller .tools { width: 96px;}
	.investment-chart-roller .right-control {display: none;}
	.investment-chart-roller {display: block;}
	.investment-chart-roller .controls { padding: 5px 3px; margin: 10px 0px 10px 0px; display: block; width: 71%;}
	.investment-chart-roller table {position: relative; width: 100%; margin: 0 0 0 0px; display: table; border: 1px solid #cfcfcf;}
	.investment-chart-roller table td {padding: 7px 10px; vertical-align: top;}
	.medium .investment-chart-roller table td {font-size: 1.1em;}
	.large .investment-chart-roller table td {font-size: 1.2em;}
	.investment-chart-roller table td.main-title {width: 60%;}
	.investment-chart-roller table td.system-content {width: 38%; background-color: #edeef0;}
	.investment-chart-roller table td.system-content a {text-decoration: underline;}
	
	.investment-chart-roller .investment-chart-extension {width: 100%; margin: 20px 0 20px 0; table-layout: fixed;}
	.investment-chart-roller .investment-chart-extension table {width: 100%; border: 1px solid #cfcfcf; padding: 5px 0px;}
	.investment-chart-roller .investment-chart-extension table td {text-align: center; width: 100px; border: 1px solid #cfcfcf;}
	.investment-chart-roller .investment-chart-extension table td.title {border-bottom: 1px solid #cfcfcf; background-color: #edeef0;}
	.investment-chart-roller .investment-chart-extension table td.light {background-color: #fff;}
	.investment-chart-roller .investment-chart-extension table td.dark {background-color: #fff;}
	
	#btnDownloadPrice{display:none;}
	.zh_HK .investment-title.style2.search-button{width:auto !important; position:absolute; right: 15px; top: 10px;}
	.en .investment-title.style2.search-button{width:auto !important; position:absolute; right: 15px; top: 10px;}
	
	.zh_HK .referenceFund.investment-title.style2.search-button{width:auto !important; position:absolute; right: 15px; top: 55px;}
	.en .referenceFund.investment-title.style2.search-button{width:auto !important; position:absolute; right: 15px; top: 55px;}
	
	.investment-title.style2.search-button p{width:auto !important;}
	.investment-summary .back{margin: 6px 10px 0px 0px;}
	
}
@media handheld, only screen and (max-width: 767px) {
    .tools {width: 100%; float: none; margin: 10px 0px; padding-left: 5px;}
	.investment-chart-controls {display: none;}
	.investment-chart-controls.style2 {display: block;}
	.investment-title {display: none;}
	.investment-title.style2 {display: block; width: 300px;}
	.investment-title.length1 {width: auto;}
	.investment-chart-roller .left-control {display: none;}
	.investment-chart-roller .right-control {display: none;}
	.investment-chart-roller table {width: 100%;}
	.investment-chart-roller .tools {position: relative; float: right; top:0px; z-index:1;}
    .zh_HK .investment-chart-roller .tools { width: 96px;}
	.investment-chart-controls .controls p {width: 40px;}
	.investment-chart-controls.date {width: 285px;}
	.investment-chart-controls.date .controls p {width: 80px; float: left;}
	.investment-summary-header-control {width: 88%; margin: 3px 0px 20px 15px;}
	.investment-summary-header-control p {width: 35%; padding: 0 0 0 0;}
	.investment-summary-header-control select {width: 80%;}
    .investment-summary-header-control  .responsive-checkbox { width:64%;}
    
	
	.investment-disclaimer-popup .lower-section {width: 89%;}
	.tools .tool-button p {margin: 0 0 0 7px;}
	h1.investment-title {display: none;}
	.investment-chart-roller .controls {width: 100%; margin: 5px 10px 10px 0px;}
	.investment-chart-roller table {font-size: 12px;}
	.investment-chart-roller .remark {clear:both;}
	.investment-chart-roller .investment-chart-extension {width: 100%; margin: 20px auto;}
	.investment-chart-roller .investment-chart-extension table {width: 100%; border: 1px solid #cfcfcf; padding: 5px 0px;}
	.investment-chart-roller table {margin: 0;}
	.investment-chart-roller table td.main-title {padding: 7px 10px 7px 15px;}
	.investment-chart-roller .investment-chart-extension table td {text-align: center; width: 100px; font-size: 12px;}
	.middle .investment-chart-roller .investment-chart-extension table td {font-size: 13px;}
	.large .investment-chart-roller .investment-chart-extension table td {font-size: 14px;}
	.investment-chart-roller .investment-chart-extension table td.light {padding: 7px 0px;}
	.investment-chart-roller .investment-chart-extension table td.dark {padding: 7px 0px;}
	.zh_HK .investment-title.style2.search-button{top: 40px;}
	.en .investment-title.style2.search-button{top: 40px;}
	.zh_HK .referenceFund.investment-title.style2.search-button{top: 80px;}
	.en .referenceFund.investment-title.style2.search-button{top: 95px;}
	.investment-summary .back{margin: 20px 15px 10px 0px;}
	 
	.investment-chart-controls.date.style2 .controls.inline-content input{width:165px;}
	#btnSearch{z-index:2;}
}

@media handheld, only screen and (max-width: 640px) {
	.investment-summary-header-control {width: 77%;}
	.investment-summary-header-control p {width: 100%; float: none;}
	.investment-summary-header-control select {width: 97%; float: none;}
    .investment-summary-header-control  .responsive-checkbox { width:97%;}
    .investment-summary-header-control  .responsive-checkbox .controls { margin: 10px 0px 0px 0px;}
	.investment-chart-controls.date {width: 285px;}
}
@media handheld, only screen and (max-width: 550px) {
	.investment-disclaimer-popup .lower-section {width: 86%;}
}
@media handheld, only screen and (max-width: 400px) {
	.investment-disclaimer-popup .lower-section {width: 80%;}
	.zh_HK .investment-title.style2.search-button{right:4px;top: 40px;}
	.en .investment-title.style2.search-button{right:4px;top: 40px;}
	.zh_HK .referenceFund.investment-title.style2.search-button{right:4px;top: 95px;}
	.en .referenceFund.investment-title.style2.search-button{right:4px;top: 140px;}
	
}