body
{
margin:0;
padding:0;
font-family: Arial;
vector-effect: non-scaling-stroke;
}

svg
{
overflow: hidden;
}

#container
{
width: 98vw;
margin: 0 auto 0 auto;
position: relative;
}

#control
{
margin: 3px 0 0 10px;
display: block;
background-color: #f2f2f2;
padding: 5px;
}

#person, #ebenen, #plusminusvergleich
{
display: block;
font-size: 14px;
text-align: left;
margin-bottom: 15px;
}

#ddm
{
display: inline-block;
font-size: 14px;
text-align: center;
margin-left: 15px;
}

#hvh
{
font-size: 10px;
}

#search
{
position: relative;
display: inline-block;
margin-left: 10px;
}

#searchfield
{
text-align: left;
}

#hits
{
font-size: 14px;
position: absolute;
background-color: #ffffff;
opacity: 0.95;
z-index: 5;
text-align: left;
}

.treffer
{
padding: 5px;
cursor: pointer;
}

.ping
{
fill: none;
stroke: #000000;
}

.close
{
text-align: right;
font-size: 12px;
padding-top: 20px;
padding-bottom: 20px;
color: darkred;
cursor: pointer;
}

.note_circle  /* zur leichteren auswahl, style muss im js gesetzt werden*/
{
}

#chart_container
{
display: block;
margin-top: 20px;
position: relative;
}

.gemeinden:hover, .wien_gemeinden:hover
{
cursor: pointer;
}

.dis:hover
{
cursor: default;
}

.button
{
display: inline-block;
padding: 5px;
margin: 5px 5px 0 5px;
cursor: pointer;
text-align: center;
}

.button:hover, .button.pressed
{
background-color: #333333;
color: white;
}

.pic_button
{
opacity: 0.5;
cursor: pointer;
display: inline-block;
margin-left: 15px;
margin-right: 15px;
}

.pic_button:hover, .pic_button.pressed
{
opacity: 1;
}

.button.pressed, .pic_button.pressed
{
pointer-events: none;
}

.highlighted
{
stroke: red;
stroke-width: 3px;
pointer-events: all;
}

.single
{
fill: red;
}

.normal
{
stroke: white;
stroke-width: 1px;
pointer-events: all;
}

#middle
{
stroke: #8b0000;
stroke-dasharray: 5, 2;
fill: none;
}

.notes
{
position: absolute;
font-size: 12px;
border-style: solid;
border-width: 1px;
border-color: #bfbfbf;
background-color: #ffffff;
padding: 5px;
pointer-events: none;
}

.gridv, .gridh
{
stroke: #d3d3d3;
stroke-dasharray: 5, 5;
fill: none;
}

.labelx, .labely, .zero, .textlabels
{
font-size: 10px;
fill: #000000;
stroke: none;
}

#popup
{
position: absolute;
display: none;
width: 200px;
padding: 5px;
border-style: solid;
border-width: 1px;
border-color: #bfbfbf;
pointer-events: none;
background-color: #ffffff;
z-index: 12;
}

#popupname
{
font-size: 14px;
text-align: center;
}

#popupinfos
{
padding-top: 10px;
padding-bottom: 10px;
}

.popupinfos, .popupdates, .results
{
font-size: 10px;
stroke: none;
}

.popupdates
{
fill: #000000;
}

.results
{
fill: #ffffff;
text-anchor: middle;
}


table, th, td
{
width: 100%;
table-layout: auto;
border-collapse: collapse;
padding: 5px;
}

th
{
text-align: center;
}

td
{
border: 1px solid #efefef;
min-width: 30px;
}

td.val
{
text-align: right;
}

@media screen and (min-width: 600px)
{
#control
{
position: absolute;
top: 3px;
}

#ebenen, #plusminusvergleich
{
display: block;
text-align: right;
width: 100%;
margin-bottom: 30px;
}

#person, #search
{
display: block;
text-align: center;
margin-top: 10px;
margin-bottom: 30px;
}

#search, #ddm
{
text-align: right;
margin-left: 0;
}

#ddm
{
width: 100%;
}

#hits, #searchfield
{
text-align: right;
}

#chart_container
{
display: inline-block;
margin-right: 15px;
}

.button
{
text-align: right;
display: block;
margin: 5px 0 0 0;
}

.pic_button
{
margin-left: 10px;
margin-right: 10px;
}
}