﻿body {
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: 16px;
}

#stockTable table {
    border-collapse: collapse;
}

    #stockTable table th, #stockTable table td {
        padding: 2px 6px;
    }

    #stockTable table td {
        text-align: right;
    }

#stockTable .loading td {
    text-align: left;
}

#stockTicker {
    overflow: hidden;
    width: 450px;
    height: 24px;
    border: 1px solid #999;
}

    #stockTicker .inner {
        width: 9999px;
    }

    #stockTicker ul {
        display: inline-block;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    #stockTicker li {
        display: inline-block;
        margin-right: 8px;
    }

    /*<li data-symbol="{Symbol}"><span class="symbol">{Symbol}</span><span class="price">{Price}</span><span class="change">{PercentChange}</span></li>*/
    #stockTicker .symbol {
        font-weight: bold;
    }

    #stockTicker .change {
        font-style: italic;
    }

.decrease {
    -webkit-animation: decrease_color_change .5s 2 alternate;
    -moz-animation: decrease_color_change .5s 2 alternate;
    -ms-animation: decrease_color_change .5s 2 alternate;
    -o-animation: decrease_color_change .5s 2 alternate;
    animation: decrease_color_change .5s 2 alternate;
}

@-webkit-keyframes decrease_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(255,148,148);
    }
}

@-moz-keyframes decrease_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(255,148,148);
    }
}

@-ms-keyframes decrease_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(255,148,148);
    }
}

@-o-keyframes decrease_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(255,148,148);
    }
}

@keyframes decrease_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(255,148,148);
    }
}


.increase {
    -webkit-animation: increase_color_change .5s 2 alternate;
    -moz-animation: increase_color_change .5s 2 alternate;
    -ms-animation: increase_color_change .5s 2 alternate;
    -o-animation: increase_color_change .5s 2 alternate;
    animation: increase_color_change .5s 2 alternate;
}

@-webkit-keyframes increase_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(154,240,117);
    }
}

@-moz-keyframes increase_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(154,240,117);
    }
}

@-ms-keyframes increase_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(154,240,117);
    }
}

@-o-keyframes increase_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(154,240,117);
    }
}

@keyframes increase_color_change {
    from {
        background-color: white;
    }

    to {
        background-color: rgb(154,240,117);
    }
}
.high {
    background: rgb(154,240,117);
    transition: background 1s;
}
