@font-face {
  font-family: "robo";
  src: url("../fonts/roboto.woff") format("woff"),
  url("../fonts/roboto.woff2") format("woff2");
}

body
{
margin:0;
padding:0;
margin:10px 10px 0 10px;
font-family: 'robo', sans-serif;
font-size:12px;
line-height:175%;
}

svg
{
overflow:hidden;
}

#first, .container
{
width:100%;
}

#first_text, #second_text, #third_text
{
width:95%;
margin: 0 auto 20px auto;
display:block;
}

#slope, #second
{
margin: 20px auto 20px auto;
display:block;
}

#slope
{
width:100%;
}

#control_first, #control_second, #legende, #control
{
width:95%;
text-align:center;
margin: 0 auto 0 auto;
}

#output
{
width:100%;
margin-top:10px;
}

#footer
{
font-size:8pt;
margin-top:40px;
line-height:145%;
}

.bls, .dates, .diff, .wbt
{
font-size:8pt;
text-anchor:middle;
cursor:default;
}

.dates, .bls, .vals, .distance, .wbt
{
visibility:hidden;
}

.senkungen
{
stroke-dasharray:2,2;
stroke:#737373;
visibility:hidden;
}

@media screen and (min-width: 480px)
{
#slope
{
width:70%;
}
}

@media screen and (min-width: 800px)
{
#slope
{
width:60%;
}
}

@media screen and (min-width: 1000px)
{
#first, #second_text, #third_text
{
width:80%;
margin: 0 auto 20px auto;
}

#first_text
{
width:66%;
margin:0 20px 0 0;
vertical-align:top;
display:inline-block;
}

#slope
{
margin:0;
display:inline-block;
width:30%;
}
}

#heading
{
font-size:18pt;
text-align:left;
padding:20px 0 20px 0;
}

@media screen and (min-width: 600px)
{
.senkungen, .dates, .bls, .vals, .distance, .wbt
{
visibility:visible;
}
}

.divs
{
margin:30px;
display:inline-block;
}

.heading
{
text-anchor:middle;
font-size:10pt;
}

.diff, .leg
{
font-size:8pt;
}

.numbers
{
font-size:8pt;
text-anchor:start;
stroke:none;
fill:#d3d3d3;
}

.names
{
font-size:9pt;
text-anchor:start;
stroke:none;
cursor:default;
}

#number
{
font-size:9pt;
color:#000000;
text-anchor:start;
}

.slopes
{
stroke-width:3px;
}

.single_slopes, .buttons
{
display:inline-block;
}

.slope_lines
{
stroke-width:5;
}

.bev
{
stroke-width:5;
stroke-dasharray:10,1;
}

.buttons
{
padding:2px;
cursor:pointer;
margin:10px 0 10px 0;
font-size:9pt;
}

.buttons:hover, .buttons_hovered
{
background-color:#d3d3d3;
}

#bp2010,#nrw2013
{
margin:1px;
}

.intext
{
text-decoration:underline;
font-weight:bold;
cursor:pointer;
}

.intext:hover
{
background-color:#8c8c8c;
color:#ffffff;
}

.gridv, #baseline
{
stroke-width:1px;
stroke:#d3d3d3;
}

.gridh, #ruler
{
stroke-width:1px;
pointer-events:none;
}

.vrect
{
fill:white;
fill-opacity:0;
}

a:link
{
color:#000000;
}

a:visited
{
color:#000000;
}

a:hover
{
color:#000000;
background-color:#8c8c8c;
color:#ffffff;
}

a:active
{
color:#000000;
}

.pp1, .pp2
{
stroke-width:7px;
stroke:#8c8c8c;
fill:none;
opacity:0;
}

.vals, .distance
{
pointer-events:none;
text-anchor:middle;
font-size:8pt;
}