<!DOCTYPE html>
<meta charset=utf-8>
<title>Vervometer</title>

<style type=text/css>
body {
    font-family: "Arial", "Helvetica", sans-serif;
    line-height: 1.5em;
    font-size: 8pt;
    margin: 0;
    padding: 0;

    overflow: hidden;
    height: 17px;

    color: rgba(0,0,0,0.5);
    text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}


#ytre {
    float: right;
    background-color: #e9e9e9;
    font-family: monospace;
    font-weight: bold;
    text-align: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#ytre div {
    float: left;
    margin: 0;
    height: 100%;
    box-sizing: border-box;
}

.betalt, .ubetalt, .gjenverande { }
.betalt { background-color: #8fe23a; }
.ubetalt { background-color: #e0d461; }
.gjenstaande { background-color: #e9e9e9; }

.info { text-align: right; margin: 0; padding-top: 3px; float: right; }
.info span { display: inline-block; padding: 2px; border-radius: 2px; }
</style>

<div id="ytre">
  <div id="teljande" class="betalt" style="width:{% widthratio teljande maal 100 %}%">
    {{ teljande }}
  </div>

  <div id=potensielt_teljande class="ubetalt" style="width:{% widthratio potensielt_teljande maal 100 %}%">
    {{ potensielt_teljande }}
  </div>

  <div class="gjenstaande" style="width:{% widthratio gjenstaande maal 100 %}%">
    {{ gjenstaande }}
  </div>
</div>

<p class="info">
  <small>
    <span class="betalt">{{ teljande }} betalte</span> og
    <span class="ubetalt">{{ potensielt_teljande }} ubetalte</span>.
    <span class="gjenstaande">{{ gjenstaande }} att</span> til
    målet på {{ totalt }}!
  </small>
</p>
