body { font-size: 11px; margin: 0; padding: 0; color: #000; font-family: Arial, Helvetica, sans-serif; }
body * { max-width: 100%; }
td img { max-width: 600px; }
table { border-spacing: 0; width: 100%; border-collapse: collapse; font-size: 10px; }
fieldset { border: 1px solid #ddd; max-width: 95%; display: block; padding-left: 0; padding-right: 0; width: 600px; border-radius: .5em; }
fieldset table { width: auto; }
fieldset td { padding: .25em .5em; }
fieldset legend { font-weight: bold; padding: 0 .5em; cursor: default; margin-left: 1em; }
.fieldset_contents { padding: 1em; }
a img { border: none; }
a { color: #03a; text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus { text-decoration: underline !important; }
table a:focus { background-color: yellow; }
input { border: 1px solid #ccc; }
input:focus { border: 1px solid #000; }

#idms_container { width: auto; padding: 1em; }
#idms_container:after { content: ''; display: block; clear: both; height: 0; }

.symbol_lookup { float: right; text-align: right; white-space: nowrap; width: 480px; max-width: 100%; margin-bottom:1em; }
.form188, .form220 { width: 275px; color: #666; font-size: 11px; max-width: 58%; }
.form100 { width: 100px; max-width: 50%; color: #666; font-size: 11px; }

.section { margin: 2em 0; clear: both; }
.sub_section { margin: 1em 0; clear: both; }
.nav_list { color:#888; }
.rule { line-height: 1px; border-top: 1px solid #ddd; }

h1 { font-size: 20px; color: #000; font-weight: bold; margin: 0; padding: 0; }
h2 { margin-top: 2em; }

button { margin: 0 .5em; font-size:10px; }
.buttons { margin:2em 0; }
.fw_label { width:120px; display:inline-block; margin-right:1em; overflow:hidden; margin-top:.5em; }

.col1 h2, .col2 h2 { height: 15px; font-size: 11px; font-weight: bold; margin: 0 0 .5em 0; padding: 5px; text-transform: uppercase; border: 1px solid #c3c3c3; background-color: #dcdcdc; display: block; text-align: left; white-space: nowrap; overflow: hidden; }
.col1 h3, .col2 h3 { height: 20px; font-size: 11px; font-weight: bold; margin: 0; padding: 0; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.header, .header2 { height: 20px; border: 1px solid #c3c3c3; background-color: #dcdcdc; padding: 5px; margin-bottom: .5em; height: 16px; white-space: nowrap; overflow: hidden; }

.width683, .width628 { width: 100%; }
.width323, .width298 { width: 50%; }

.negative { color: #c00; }
.positive { color: #060; }

.col1 { width: 49.5%; float: left; }
.col2 { width: 49.5%; float: right; }

.left { width: 45%; float: left; }
.right { width: 45%; float: right; text-align: right; }

.alignLeft { text-align: left; }
.alignRight { text-align: right; }
.alignCenter { text-align: center; }
.clear { clear: both; }
.evenrow { background-color: #eee; }
.big {font-size:140%;}

.exchange { border: 1px solid #7f9db9; height: 17px; font-size: 10px; }
.extra_padding { padding: .5em; }
.note { font-size: 11px; padding: .5em; }
.form80 { width: 80px; border: 1px solid #cfcfcf; }

.nav { height: 40px; position: relative; margin: 1em 0; background: #aaa; background: -moz-linear-gradient(top,  #ffffff 0%, #BBBBBB 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#BBBBBB)); background: -webkit-linear-gradient(top,  #ffffff 0%,#BBBBBB 100%); background: -o-linear-gradient(top,  #ffffff 0%,#BBBBBB 100%); background: -ms-linear-gradient(top,  #ffffff 0%,#BBBBBB 100%); background: linear-gradient(to bottom,  #ffffff 0%,#BBBBBB 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BBBBBB',GradientType=0 ); }
.nav ul { width: 100%; margin: 0; padding: 0; position: absolute; bottom: 0; }
.nav li { text-align: center; list-style: none; width: 24%; float: left; margin: 0; padding: 0; white-space: nowrap; overflow: hidden; }
.nav li a { color: #fff; display: block; padding: .5em 0; margin: 0 0 0 .5em; background-color: #666; border-radius: .5em .5em 0 0; }
.nav li a:hover { text-decoration: none; }
.nav .active a { color: #000; background-color: #fff; }

.login_logout { float: right; margin: 0 1em .5em 0; }

#frmSymbolInput label { display: block; margin-bottom: .5em; }

.tabs { height: 18px; width: 100%; }
.tabs ul { margin: 0; padding: 0; width: 100%; list-style-type: none; }
.tabs li { margin: 0 1% 0 0; float: left; max-width: 25%; height: 18px; background: url(../../images/tab_right.png) top right no-repeat; overflow: hidden; white-space: nowrap; }
.tabs li a { color: #585858; display: block; background: url(../../images/tab_left.png) top left no-repeat; font-size: 11px; padding: 4px 10px 2px 10px; text-align: center; }
.tabs .active a { color: #333; font-weight: bold; }

.market_movers { border: 0px solid #dedede; clear: both; }
.market_movers th { color: #5e5e5e; font-size: 10px; font-weight: normal; border: 1px solid #d0d0d0; padding: 3px 2px; }
.market_movers td { border: 1px solid #d0d0d0; padding: 3px 2px; }

.market_snapshot { border: 1px solid #dedede; clear: both; }
.market_snapshot th { color: #606060; font-size: 11px; font-weight: normal; border-bottom: 1px solid #d0d0d0; padding: 3px; }
.market_snapshot td { border-bottom: 1px solid #d0d0d0; padding: 3px; }

.gainers { color: #005b13; border-bottom: #005b13 2px solid; display: block; padding: 3px 0; margin-top: 6px; padding-left: 4px; }
.losers { color: #91181b; border-bottom: solid 2px #91181b; display: block; padding: 3px 0; margin-top: 6px; padding-left: 4px; }
.most_actives { color: #4f4f4f; border-bottom: solid 2px #4f4f4f; display: block; padding: 3px 0; margin-top: 6px; }

.market_movers_page table { clear: both; margin-bottom: 1em; }
.market_movers_page th { color: #606060; font-size: 11px; font-weight: normal; border-bottom: 1px solid #bababa; padding: 3px; }
.market_movers_page td { font-size: 12px; font-weight: normal; border-bottom: 1px solid #bababa; padding: 3px; }
.market_movers_page .tabs { width: 100%; position:relative;}
.market_movers_page .tabs:after { content:''; display:block; height:0; clear:both; }
.market_movers_page .tabs ul { border-bottom: 1px solid #bababa; width: 100%; position:absolute; bottom:0;}
.market_movers_page .tabs li { margin: 0 .25em; }

.quote_summary { margin-top: 10px; clear: both; width: 100%; }
.quote_summary th { text-align: left; }

.Data { width: 58%; float: left; margin-right: 2%; }
.Data table { width: 48%; float: left; margin-right: 2%; }
.Data td { text-align: right; font-weight: bold; border-bottom: 1px solid #c6c6c6; padding: 3px 4px 4px; }
.Data th { text-align: left; font-weight: normal; border-bottom: 1px solid #c6c6c6; padding: 3px 4px 4px; }

.Chart { width: 40%; float: left; margin-right: 0; }
#chartOptions th, #chartOptions td { text-align: left; border-bottom: 1px solid #cbcbcb; padding: .5em; }
#chartOptions ul { margin: 0; padding: 0; width: 100%; }
#chartOptions li { float: left; padding: 0; padding-right: 4px; list-style: none; }
#chartOptions li a { display: block; padding: 2px 4px 2px 6px; text-decoration: underline; font-size: 11px; color: #295f94; text-decoration: underline; }
#chartOptions .selected { background: url(../../images/options_right.png) top right no-repeat; }
#chartOptions .selected a { background: url(../../images/options_left.png) top left no-repeat; color: #FFF; font-weight: bold; text-decoration: none; }
#chartOptions { clear: both;}
#chartOptions #table2 { width: 47%; padding: .5em 1%; float: right; border-left: 1px solid #cbcbcb; }
#chartOptions #table2 th, #chartOptions #table2 td { border-bottom: none; }
#chartOptions:after { content:''; display:block; height:0; margin:0 0 1em 0; clear:both; }

.option { width: 175px; max-width: 80%; border: 1px solid #7f9db9; }
.benchmark { border: 1px solid #7f9db9; width: 100px; max-width: 80%; color: #767676; font-size: 11px; }
.indicator { border: 1px solid #7f9db9; width: 220px; max-width: 80%; color: #333; font-size: 11px; }
.volume_chart { clear: both; float: left; margin-bottom: .5em; }

#advanced_chart { clear: both; width: 100%; }
#advanced_chart img { margin:0; padding-top:10px; padding-left:3px; }
#advanced_chart table { margin:1em 0 2em 0; }


.portfolio_summary { background-color: #eee; border: 1px solid #ccc; padding: .5em; clear:both; }
.portfolio_summary .border_right { border-right: 1px solid #c1c6c8; }
.portfolio_summary td { padding: .5em 1em; color: #393939; }
.portfolio_summary b { font-size:140%; }

td button { margin:0; }

.portfolio_holdings { clear: both; margin-top: 15px; }
.portfolio_holdings thead { background-color: #ededed; border-top: 1px solid #999; border-bottom: 1px solid #999; }
.portfolio_holdings thead th { color: #000; font-size: 11px; padding: .5em; text-align: left; }
.portfolio_holdings thead td { font-weight: normal; font-size: 12px; padding: 4px; color: #393939; text-align: right; }
.portfolio_holdings tbody th { color: #555; font-size: 11px; font-weight: bold; border-bottom: 1px solid #082c62; padding: .5em; vertical-align: top; }
.portfolio_holdings tbody td { font-size: 12px; border-bottom: 1px solid #ddd; padding: .5em; vertical-align: top; }
.portfolio_holdings .totals td { border: solid #082c62; border-width: 1px 0; }
.portfolio_holdings td.edit { padding: 0; border-bottom: none; }
.portfolio_holdings td.cash { padding: 0; border-bottom: none; }
.portfolio_holdings .cash td { border-bottom: none; }
.portfolio_holdings .cash table { border-bottom: solid #082c62 1px; }
.portfolio_holdings tbody td table th { text-align: left; background-color: #eee; border-top: 1px solid #082c62; border-bottom: none; }
.portfolio_holdings tbody td table td { text-align: left; background-color: #eee; border-bottom: 1px solid #082c62; }

.add_instrument { clear: both; width: 100%; }
.add_instrument button { font-size:10px; white-space:nowrap; overflow:hidden; max-width:100%; }
.add_instrument td { padding: .5em; border-bottom: none; }
.add_instrument td table td { border-bottom: none; }
.add_instrument td table th { border-top: none; }
.add_instrument td.edit { border-bottom: none; border-top: none; padding: 0; }
.add_instrument .form260 { width: 260px; max-width: 80%; }
.add_instrument .form100 { width: 100px; max-width: 80%; }

#portfolio_popup { border: solid #cbcbcb 1px; background: #fff; width: 300px; padding: 10px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 11px; color: #333; -moz-box-shadow: 3px 3px 3px #666; -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666; }
#portfolio_popup strong { color: #333; font-size: 17px; font-weight: bold; }
#portfolio_popup a img { border: none; }
#portfolio_popup td { padding: .5em 0; }
#portfolio_popup .input { width: 140px; border: 1px solid #7f9db9; }

.idmsSHOW { visibility: visible; }
.idmsHIDE { display: none; visibility: hidden; }
.idc-searchBoxPopup { width: 492px; background-color: #ECEBEB; border: 1px solid #BBB; font-size: 12px; margin: 0 auto; padding: 4px; position: absolute; font-family: arial; font-color: #000; font-weight: normal; }
.strong { font-size: 12px; font-weight: bold; }

/* for chart.htm */
.width589 { width: auto; }
body.chart .content603 { width: auto; }
body.chart .col1 { width: 58%; float: left; margin-right: 2%; }
body.chart .indicator { width: 40%; }

/* aria */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; top: 0; left: 0; z-index: -1; background-color: transparent; }
.visually-hidden * { background-color: transparent !important; color: #fff !important; }

@media screen and (max-width: 600px) {
  .nav .market_overview { width: 28%; }
  .nav .detailed_quote { width: 28%; }
  .nav .charting { width: 22%; }
  .nav .portfolio { width: 21%; }
  .Data { width: auto; float: none; margin-right: 0; clear: both; }
  .Chart { width: auto; float: none; clear: both; }
  .col1 { width: auto !important; float: none; clear: both; }
  .col2 { width: auto !important; float: none; clear: both; }
  table { margin: 1em 0; }
}