html, body, #container, #map {
    width: 100%;
    height: 100%;
}

body {
    padding: 0;
    margin: 0;
}

.hidden {
    display: none; !important;
}

div.tooltip {
    position: absolute;
    text-align: left;
    width: 200px;
    padding: 9px;
    font: 12px sans-serif;
    color: #f3dbc7;
    background: #472a22;
    border: 0;
    border-radius: 8px;
    pointer-events: none;
    opacity: 0;
}

div.legend {
    text-align: left;
    padding: 9px;
    color: #472a22;
    position: fixed;
    top: -14px;
    left: 55px;
    background: white;
    z-index: 100;
    opacity: 0.8;
}

div.ad {
    width: 100px;
    height: 60px;
    padding: 9px;
    position: absolute;
    top: 550px;
    left: 10px;
    z-index: 101;
}

div.barchart-container {
    position: absolute;
    top: 10px;
    width: 100%;
}

div.barchart {
    height: 120px;
    padding: 10px 0 0;
    position: relative;
    width: 630px;
    z-index: 102;
    color: #ffffff;
    font-family: Arial, serif;
    font-size: 10px;
    background: black;
    opacity: 0.8;
    margin: 0 auto;
}

.barchart .span2 {
    margin-left: 25px;
    margin-top: 10px;
}

.barchart #sum #right_div {
    position: absolute;
    right: 27px;
}

.barchart a, .legend a {
    color: gray;
}

.legend p {
    margin: 0;
    padding: 0;
    font-family: Arial, serif;
    font-size: 10px;
    left: 15px;
    position: relative;
    top: -30px;
}

.legend svg {
    margin: 0;
    padding: 0;
}

/* svg styles*/
circle {
    stroke-width: 1.5px;
    stroke: white;
    cursor: crosshair;
}

circle.c1 { /* army attack*/
    fill: #F84F40;
    opacity: 0.9;
}

circle.c2 { /* separat. attack*/
    fill: #000000;
    opacity: 0.9;
}

circle.c3 { /* block-post */
    stroke: white;
    fill: #FFCC00;
    opacity: 0.8;
}

.dot {
    fill: #c7141a;
}

.ring {
    fill: none;
    stroke: #c7141a;
}

svg.barchart {
    width: 612px;
    height: 100px;
    overflow: visible;
}

.row {
    padding: 2px;
}

.axis path,
.axis line {
    fill: none;
    stroke: #666;
    shape-rendering: crispEdges;
}

.axis text {
    fill: #888;
}

.brush .extent {
    stroke: #666;
    fill-opacity: .3;
    fill: #5EB4E3;
    shape-rendering: crispEdges;
}

/*.bar {*/
    /*fill: #888;*/
    /*shape-rendering: crispEdges;*/
/*}*/

path.area {
    fill: #888;
    shape-rendering: crispEdges;
}

/*.selected {*/
    /*fill: #5EB4E3;*/
/*}*/

#logo {
    position: absolute;
    right: 10px;
    top: 10px;
}

.leaflet-control-attribution h4 {
    margin-top: 0;
    margin-bottom: 6px;
}

.nav {
    list-style: outside none none;
    margin-bottom: 0;
    padding-left: 0;
}

ol, ul {
    margin-bottom: 10px;
    margin-top: 0;
}

.nav-pills > li + li {
    margin-left: 2px;
}

.nav-pills > li {
    float: left;
}
.nav > li {
    display: block;
    position: relative;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
    background-color: #fff;
    color: #000;
}

.nav-pills > li > a:hover {
    background-color: #fff;
    color: #000;
}

.nav-pills > li > a {
    border-radius: 4px;
    color: #fff;
    background-color: #242424;
}
.nav > li > a {
    display: block;
    padding: 3px 6px;
    position: relative;
    text-decoration: none;
}

#right_div .nav{
    float: left;
    margin-top: -4px;
}

#right_div #period_wrapper {
    padding-left: 5px;
    float: right;
    min-width: 120px;
}