jquery-kpiwidgets/css/generalKPI.css

Inneractive jQuery widgets for presenting data in a KPI box

@font-face {
    font-family: KPIWidget;
    src: url('fonts/Gotham-Medium.otf');
}

@font-face {
    font-family: KPIWidgetNumber;
    src: url('fonts/PT_DIN_Condensed_Cyrillic.ttf');
}

.kpi-container-div{
    display: table;
}

.kpi-item{
    display: table-cell;
    padding-left: 13px;
}

.kpi-title {
    background-color: #f4f4f4;
    box-shadow: inset 0 -5px 20px rgba(0,0,0,.05);
    color: #3e3e3e;
    display: table;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    vertical-align: middle;
}

.kpi-title-text {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.kpi-footer-text  {
    display: table-cell;
    font-size: 12px;
    color: #939393;
    text-align: center;
    vertical-align: middle;
}

.kpi-footer-text a{
    color: #939393;
}

.kpi-trend-up {
    background: url("images/trend_up.png") no-repeat scroll right center rgba(0, 0, 0, 0);
    width: 30px;
}

.kpi-trend-down {
    background: url("images/trend_down.png") no-repeat scroll right center rgba(0, 0, 0, 0);
    width: 30px;
}

.kpi-trend-flat {
    width: 30px;
}

.kpi-trend-up-small {
    background: url("images/trend_up_small.png") no-repeat scroll center right rgba(0, 0, 0, 0);
    background-position: 5px;
    display: table-cell;
    height: 100%;
    width: 20px;
}

.kpi-trend-down-small {
    background: url("images/trend_down_small.png") no-repeat scroll center right rgba(0, 0, 0, 0);
    background-position: 5px;
    display: table-cell;
    height: 100%;
    width: 20px;
}

.kpi-trend-flat-small {
    display: table-cell;
    height: 100%;
    width: 20px;
}

.kpi-delta-up {
    display: table-cell;
    font-family: KPIWidgetNumber;
    font-size: 0.35em;
    height: 100%;
    vertical-align: middle;
    width: 34px;
    color: #9dd07c;
    text-align: center;
    /*border: 1px solid;*/
}

.kpi-delta-down {
    display: table-cell;
    font-family: KPIWidgetNumber;
    font-size: 0.35em;
    height: 100%;
    vertical-align: middle;
    width: 34px;
    color: #e05d63;
    text-align: center;
}

.kpi-delta-flat {
    font-family: KPIWidgetNumber;
    font-size: 0.35em;
    height: 100%;
    vertical-align: middle;
    width: 34px;
    color: #fff;
    text-align: center;
}