DeepSilence/ResponsiveGauge

/* LAYOUT */
/* hack for IE (http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/) */
.gauge-container {
    display: inline-block;
    position: relative;
}

/* hack for IE */
.gauge-container .gauge {
    position: absolute;
    top: 0;
    left: 0;
}

.gauge-ie-fix {
    display: block;
    height: 100%;
    width: 100%;
    visibility: hidden;
}

.gauge {
    display: inline-block;
    overflow: visible; /*avoid cutting texts */
    /* to react to the parent height*/
    height: 100%;
    /* to react to the parent width. max-width because of chrome (http://stackoverflow.com/questions/22015867/scale-embedded-svg-without-white-space-in-chrome)*/
    max-width: 100%;
}

/* POINTERS */
.gauge-needle {
    stroke: #cf4814;
    fill: transparent;
}

.gauge-filament {
    stroke: black;
}

.gauge-filler {
    fill: #d50000;
}

/* GAUGE */
.gauge-arc {
    /* setting 'fill' on the path elements would override the
     gradients if any; setting 'fill' on parent allows a correct override */
    fill: #ddd;
}

.gauge-arc-border {
    stroke: #ccc;
    stroke-width: 0.3px;
}

/* LABELS */
.gauge text {
    fill: #333;
}

.gauge-label text {
    text-anchor: middle;
    font-weight: bold;
    font-size: 4px;
}

.wide-gauge .gauge-label text {
    font-size: 8px;
}

/* shifts the first and last labels so that they are not out of the container*/
.gauge-label g:first-child text {
    text-anchor: start;
}

.gauge-label g:last-child text {
    text-anchor: end;
}

/* VALUE */
.gauge-value text {
    font-size: 12px;
    text-anchor: middle;
}

.wide-gauge .gauge-value text {
    font-size: 24px;
}

.unit {
    font-size: 0.7em;
}