body {margin: 0px; background-color: #FFFFFF; font-family: sans-serif;}

.ticker-wrapper {margin-top: 6px;}

.ticker {

    width: 100%;
    background: #FFFFFF;
    color: #888;
    font-size: 100%;

}

#ticker-indices .symbol {display: none;}

.ticker-medium {
    font-size: 150%;
}

.ticker-large {
    font-size: 200%;
}

.ticker-mini {
    font-size: 100%;
    width: 300px;
}

.instrument[data-change-state='up'] .percent-change { color: #4CAF50; }
.instrument[data-change-state='up'] .percent-change:before { content: "\25B2 (+"; }
.instrument[data-change-state='up'] .percent-change:after { content: ")"; }

.instrument[data-change-state='down'] .percent-change { color: #F44336; }
.instrument[data-change-state='down'] .percent-change:before { content: "\25BC ("; }
.instrument[data-change-state='down'] .percent-change:after { content: ")"; }

.instrument[data-change-state='unchanged'] .percent-change { color: #9E9E9E; }
.instrument[data-change-state='unchanged'] .percent-change:before { content: "\25BA ("; }
.instrument[data-change-state='unchanged'] .percent-change:after { content: ")"; }

.instrument span, .separator { margin: 0 5px;  }
.separator:before { content:''; position: absolute; top: 20%; height: 100%; border-left: 1px solid #FFFFFF;}

.instrument .symbol { font-size: small}
.instrument .long-name { font-size : larger}