body
{
margin: 0;
padding: 0;
font-size: 12px;
font-family: 'Roboto', sans-serif;
line-height: 1.5em;
width: 95vw;
margin: 0 auto 0 auto;
background-color: #fdf6e3;
}

.intext
{
border-bottom: 1px dotted black;
cursor: pointer;
}

#header
{
font-family: 'Roboto Slab', serif;
display: block;
font-size: 16px;
line-height: 2em;
}

svg
{
overflow: hidden;
text-rendering: geometricPrecision;
shape-rendering: geometricPrecision;
}

svg text
{
font-family: 'Roboto', sans-serif;
font-size: 10px;
fill: #002B36;
stroke: none;
}

svg path
{
stroke: #002B36;
}

.axis
{
display: none;
}

.axis path, .axis line, .bracket
{
stroke: #eee8d5;
}

.axis text
{
stroke: none;
fill: #93a1a1;
}

a:link, a:visited, a:hover, a:active
{
color: #6d80b0;
text-decoration: underline;
}

#teaser
{
margin: 4vw 0;
max-width: 550px;
text-align: left;
}

#headline
{
font-family: 'Roboto Slab', serif;
font-size: 24px;
line-height: 1.5em;
margin-bottom: 2vw;
}

#container
{
position: relative;
}

#sections
{
width: auto;
position: relative;
margin: 0px auto;
padding-top: 400px;
}

#sections div
{
background: #ffffff;
padding: 10px;
border-top: 1px solid #002B36;
border-bottom: 1px solid #002B36;
margin-bottom: 90vh;
opacity: 0.1;
line-height: 1.5em;
}

#sections > div:first-child
{
margin-top: 0;
}

#sections > div:last-child
{
opacity: 1;
margin-bottom: 30px;
}

#sections > div.graph-scroll-active
{
opacity: 1;
}

#graph
{
position: fixed;
width: 100vw;
margin: 0px auto;
top: 30px;
}

#controls
{
position: fixed;
top: 0;
right: 0;
text-align: right;
display: none;
}

#buttons
{
position: fixed;
top: 15px;
right: 15px;
}

#ddgemeinden
{
position: fixed;
top: 45px;
right: 15px;
}

#ddgemeinden2
{
position: fixed;
bottom: 15px;
right: 15px;
display: none;
}

.button
{
display: inline-block;
padding: 5px 0px;
width: 60px;
text-align: center;
cursor: pointer;
line-height: 0.7em;
border-bottom-style: solid;
border-bottom-width: 1px;
}

.button:hover, .button.pressed
{
border-bottom-width: 5px;
}

.units
{
fill: none;
stroke-width: 0px;
display: none;
}

.total
{
fill: none;
stroke-width: 3px;
}

.ltwnrw
{
fill: none;
stroke-width: 2px;
}

.orte
{
stroke: #f0f0f0;
stroke-width: 1px;
fill: none;
}

.orte.overlayed
{
stroke-width: 3px;
display: none;
}

.orte.overlayed.oevp
{
stroke: #002B36;
}

.orte.overlayed.spoe
{
stroke: #DC322F;
}

.orte.overlayed.fpoe
{
stroke: #268BD2;
}

.orte.overlayed.gruene
{
stroke: #859900;
}

.orte.overlayed.bg
{
/*stroke-dasharray: 6, 6;*/
}

.gemeinde
{
font-family: 'Roboto Slab', serif;
text-anchor: start;
font-size: 16px;
display: none;
fill: #191919;
stroke: none;
pointer-events: none;
}

.gemeinde.bg
{
fill: none;
stroke: #fdf6e3;
stroke-width: 5px;
display: none;
pointer-events: none;
}

.gemeinde.single
{
fill: #fff;
pointer-events: none;
}

#slider
{
display: none;
position: fixed;
right: 0;
bottom: 0;
}

.slider-overlay 
{
pointer-events: stroke;
stroke-width: 40px;
stroke: transparent;
cursor: pointer;
}

.slider 
{
stroke: #93a1a1;
stroke-opacity: 0.5;
stroke-width: 10px;
}

.sliderticks text
{
font-size: 12px;
text-anchor: middle;
cursor: pointer;
}

.legend text
{
font-size: 12px;
}

.handle
{
stroke-width: 1px;
stroke: #93a1a1;
fill: #cb4b16;
}

.tickparty
{
font-family: 'Roboto Slab', serif;
fonts-size: 12px;
stroke: none;
text-anchor: end;
}

.tickparty.bg
{
stroke: #fdf6e3;
stroke-width: 5px;
fill: none;
}
		
		
.matrix
{
font-size: 12px;
stroke: none;
display: none;
}

.shape.in
{
fill-opacity: 1;
stroke-opacity: 1;
}

.shape.out
{
fill-opacity: 0.1;
stroke-opacity: 0;
}

.above
{
fill: #cb4b16;
stroke: none;
pointer-events: none;
}

.below 
{
fill: #2aa198; 
stroke: none;
pointer-events: none;
}

.ticktext
{
fill: #93a1a1;
fill-opacity: 0.5;
}

.ticktick
{
stroke: #eee8d5;
}

.hg
{
display: none;
}

.bracket
{
display: none;
stroke: #93a1a1;
}

.bracket.text
{
text-anchor: middle;
stroke: none;
fill: none;
}

.bracketrect
{
fill: #eee8d5;
fill-opacity: 0;
visibility: hidden;
}

.bracketticktext
{
visibility: hidden;
}

.bracketticktext.koal
{
fill: #93a1a1;
text-anchor: middle;
fill-opacity: 0.5;
}

.bracketticktext.datum
{
fill: #002B36;
fill-opacity: 0;
text-anchor: middle;
}

@media screen and (min-height: 450px)
{
.bracket.text
{
fill: #93a1a1;
}
}


@media screen and (min-width: 900px)
{
#graph
{
width: auto;
margin: 0 0 0 40px;
position: fixed;
top: 30px;
right: 0;
}

#sections
{
margin: 0;
width: 260px;
padding-top: 150px;
}

#sections > div
{
border: none;
margin-bottom: 50vh; /*mehr*/
}

#sections > div:first-child
{
margin-top: 0;
}

#sections > div:last-child
{
margin-bottom: 5px; /*mehr*/
}

.bracketrect, .bracketticktext
{
visibility: visible;
}
}


@media screen and (min-width: 1024px)
{
body
{
font-size: 16px;
}

#header
{
font-size: 20px;
}

#sections
{
width: 340px;
}

.matrix, .bracket.text, .tickparty
{
font-size: 14px;
}
}