<br />
<div id="welcome">
  <span class="survey-name">Ergebnisse der Auswertung</span></div>
<br />

<table style="border:0px; width: 100%">
                  <tbody>
                    <tr style="background: #E0E0E0">
                      <td align="left" colspan="2" width="100%">
                        <b>Anteil im Büro (pro Monat):</b></td>
                    </tr>
                    <tr>
                      <td style="padding: 0px; width: 28px;">
                        <img src="/waytoimages/office" width="100%" /></td>
                      <td>
                        <div class="percent-own" id="pBuero">
                          Eigener Wert:
                          <div id="ppBuero" style="float:right;">
                             </div>
                          <br />
                          <img class="Dreieck" src="/waytoimages/triangledown" /></div> <!-- This is the div which width is given by the Expression Manager, in this case I use javascript, because I have to convert the value of an answer to fit in the scale-->
                        <div class="percent-pre2">
                          Sehr gering</div>
                        <div class="percent-bar2" id="barBuero">
                          <div class="percent-range2" id="Buero25" style="text-align:left;width:24.5%;border-radius: 1em 0em 0em 1em;">
                            0%</div>
                          <div class="percent-range2" id="Buero50" style="width:24.5%;">
                             </div>
                          <div class="percent-range2" id="Buero75" style="width:24.5%;">
                             </div>
                          <div class="percent-range2" id="Buero100" style="width:24.5%; border-radius: 0em 1em 1em 0em;">
                            100%</div>
                        </div>
                        <div class="percent-post2">
                          Sehr hoch</div>
                        <div class="percent-mean" id="mBuero" style="width:63.864%;">
                          <img class="Dreieck" src="/waytoimages/triangleup" /><br />
                          Benchmark:69.8%
                          <div id="mmBuero" style="float:right;">
                             </div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>

document.getElementById("pBuero").style.width = "{(ProzentBuero.NAOK*0.7)+15}%"; // ProzentBuero is a hidden equation question which calculates a percentage of beeing in the office

.percent-pre2 {
    color: #888;
    float: left;
    text-align: right;
    height: 2em;
    position: relative;
    width: 15%;
    right: 0.6em;
    line-height: 2em;
    vertical-align: middle;
    clear: left;
}
 
.percent-bar2 {
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-width: 1px 0px;
    height: 2em;
    position: relative;
    font-size: 0.9em;
    float: left;
    width: 70%;
}