body
{
margin:0;
padding:0;
font-family: Verdana, sans-serif;
line-height: 1.6;
}

@media screen and (max-width: 480px)
{
#outer
{
width:95%;
}

#intro
{
font-size:14pt;
}
}

@media screen and (min-width: 481px) and (max-width: 799px)
{
#outer
{
width:95%;
}

#intro
{
font-size:18pt;
}
}

@media screen and (min-width: 800px) and (max-width: 1299px)
{
#outer
{
width:85%;
}

#intro
{
font-size:24pt;
}
}

@media screen and (min-width: 1300px)
{
#outer
{
width:75%;
}

#intro
{
font-size:24pt;
}
}

@media screen and (max-width: 1300px)
{
#ergebnis
{
font-size:2.5vmax;
}
}

@media screen and (min-width: 1301px)
{
#ergebnis
{
font-size:28pt;
}
}

.calculate
{
font-size:9pt;
}

#intro
{
margin-top:15px;
margin-top:1vmax;
text-align:left;
}

#quellen
{
font-size:8pt;
margin-top:50px;
margin-top:4vmax;
}

#desc
{
margin-top:15px;
margin-top:1vmax;
font-size:9pt;
width:90%;
}

#outer
{
margin-left:auto;
margin-right:auto;
}

#output
{
margin-top:15px;
margin-top:1.5vmax;
position:relative;
}

#tool
{
font-size:9pt;
line-height:1.8em;
display:none;
position:absolute;
background-color:rgba(255, 255, 255, 0.9);
padding:1em;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events:none;
z-index:5;
}

#anteil
{
font-weight:bold;
}

.dd, .sv, .svt
{
display:inline-block;
font-size:9pt;
text-align:center;
}

.slider
{
display:inline-block;
text-align:center;
}

#control
{
width:100%;
position:relative;
}

#selector
{
text-align:center;
}

.titel
{
display:inline-block;
text-align:right;
font-size:9pt;
}

.groups
{
margin-top:10px;
}

#ergebnis
{
dominant-baseline: middle;
text-anchor:start;
}

.result:hover
{
fill-opacity:0.5;
}

#output
{
margin-bottom:1.5%;
overflow:hidden;
}

.axis path, line
{
fill:none;
stroke:#95a5a6;
shape-rendering:crispEdges;
opacity:0.7;
}

.axis text 
{
font-size:8pt;
fill:#95a5a6;
}

div.ui-slider 
{
background:#f2f2f2;
}