#mapDiv {
 position: relative;
}

#mapDiv #legend {
 display: inline-block;
 position: absolute;
 bottom: 10px;
 left: 20px;
 padding: 10px;
 background: rgba(0, 0, 0, 0.8);
 white-space: nowrap;
 color: #FFFFFF;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 z-index: 4;
 font-size: 0.8em;
 text-align: left;
}

#mapDiv #legend .countryFlag {
 display: inline-block;
 background-repeat: no-repeat;
 background-size: 100% 100%;
 width: 25px;
 height: 12px;
 margin-right: 10px;
}

#mapDiv #legend .details {
 font-size: 0.7em;
}

#mapDiv #legend a {
 display: block;
 margin: 5px 0;
 border-bottom: 2px solid;
 padding: 5px 0 5px 5px;
}

#mapDiv #legend a:hover, #mapDiv #legend a.hover {
 background: #000000;
}

#mapDiv #legend div span {
 display: table-cell;
 vertical-align: center;
}

#mapDiv #legend div span:first-child {
 width: 40px;
 height: 20px;
 background-repeat: no-repeat;
 background-size: 100% 100%;
}

#mapDiv #legend div span:last-child {
 padding: 0 5px;
}

#mapDiv .info {
 display: none;
 position: absolute;
 bottom: 10px;
 left: 180px;
 padding: 10px;
 width: 200px;
 background: rgba(0, 0, 0, 0.8);
 color: #FFFFFF;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 z-index: 4;
 font-size: 0.8em;
 text-align: center;
}

#mapDiv .info .percentage {
 font-size: 2em;
}

#mapDiv .info .countryFlag {
 background-repeat: no-repeat;
 background-size: 100% 100%;
 width: 50px;
 height: 25px;
}

#mapCanvas {
 display: inline-block;
 overflow: hidden;
 text-align: center;
}

#mapCanvas #map {
 position: relative;
 background: url(images/map/worldmap.png) no-repeat;
 background-size: 100% 100%;
 z-index: 1;
}

#mapCanvas .layer, #mapCanvas #mapClickable {
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-repeat: no-repeat;
 background-size: 100% 100%;
 z-index: 2;
}

#mapCanvas #mapClickable {
 display: inline-block;
 z-index: 3;
 opacity: 0;
}

#mapCanvas #mapClickable img {
 width: 100%;
 height: 100%;
}