html, body { height: 100%; margin:0; background-color: #FFFFFF; }
* { font-family: Helvetica, Arial, sans-serif !important; }

.penci-page-header { margin: 0!important }
.penci-page-header h1 { text-indent: -9999px; float: left; height: 0; }
#chartdiv { width: 100%; }
.ammapdescriptionTitle { color: #C00; font-size: 22px }

#mapdiv { width: 100%; height: 100%; background-color:#eeeeee; }

#topo_mapa { text-align: center; padding: 5px; position: relative; }
#topo_mapa img { max-width: 230px; padding: 2px; float: left; margin-right: 10px; }
#topo_mapa.caravana_0 img { border-bottom: 4px solid #a74337; }
#topo_mapa.caravana_1 img { border-bottom: 4px solid #265631; }
#topo_mapa.caravana_2 img { border-bottom: 4px solid #888; }

#menu_caravanas { position: absolute; top: 50px; left: 134px; z-index: 99; }
#menu_caravanas .btn_caravana { display: inline-block; cursor: pointer; }
#menu_caravanas .btn_caravana:hover { opacity: 0.8; }

#content_mapa { font-size: 12px; }
#content_mapa p { margin: 4px 0; text-align: left !important; }
#content_mapa a { text-decoration: none; color: #C00; }

#container_embed { margin: 0 auto; position: absolute; top: 0; right: 0; z-index: 9999; }
#container_embed.aberto { width: 100%; background-color:#CCC; display: block; }
#container_embed h3 {background-color: #CCC; font-size: 11px; padding: 3px 10px; cursor: pointer; border-radius: 4px; margin: 0 auto; text-align: center; display: block; text-align: right; }
#container_embed pre {margin: 10px; padding: 3px; background-color: #FFF; display: none; }
#container_embed.aberto pre {display: block; text-align: center }

.ammapDescriptionWindow { padding: 5px; z-index: 100; }
.ammapDescriptionText a { text-decoration: none; color:#333333;  }
.ammapDescriptionText ul { padding: 0; margin: 0; list-style: none }
.ammapDescriptionText ul li {  }
.ammapDescriptionText ul li a::before { content:'\25B8'; color:#CC0000; font-size: 12px; padding-right: 3px; }
.ammapDescriptionText ul li a { display: block; padding: 4px; }
.ammapDescriptionText ul li a:hover { color:#CC0000; }
.ammapDescriptionText ul li:last-child { border-bottom: none; }
.ammapDescriptionText ul li:nth-child(odd) { background-color: #f1f1f1; }
.ammapDescriptionText .leiamais { color: #CC0000; margin-left: 5px; border-left: 1px solid #333; padding-left: 5px; }

#logo_pt { position: absolute; left: 0; bottom: -4px; }

#legenda { width: 250px; position: absolute; left: 50%; top: 0; margin-left: -125px; padding: 3px; font-size:10px; background-color: #FFFFFF; text-transform: uppercase; border-top: 1px solid #CCC; }
#legenda.foot { top: auto; left: auto; top: auto; bottom: 0; right: 0; margin: 0; }
#legenda div { float: left; margin: 0 3px }
#legenda div span { border-radius: 50%; width: 10px; height: 10px; margin: 0 3px; display: inline-block; }
#legenda div#passou span { background-color: #006600 }
#legenda div#passara span { background-color: #CC0000 }

#btn_legenda { font-size: 22px; color: #C00; position: absolute; right: 10px; bottom: 5px; cursor: pointer; }


.amcharts-legend-div { visibility: hidden; }
.amcharts-legend-div.aberto { visibility: visible; }
.amcharts-legend-div.scroller { height: 100% !important; overflow-y: scroll !important; }

.clearfix { clear: both }

@media only screen and (max-width: 768px) {
	#btn_legenda { display: none; }
}

@media only screen and (max-width: 480px) {
	#container_embed, #content_mapa { display: none; }
}

/* versão html + css das bandeirinhas */
.bandeirinha {
	width:52px;
	height:44px;
	overflow:hidden;
	position:relative;
}
.bandeirinha .bg {
	position:absolute;
	width: 200px;
	height: 200px;
}
.bandeirinha .bg-1 {
	transform: rotate(20deg);
	-ms-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);

	transform-origin: 100% 100%;
	-ms-transform-origin: 100% 100%;
	-webkit-transform-origin: 100% 100%;

	right: -5px;
	bottom:0;
}
.bandeirinha .bg-2 {
	transform: rotate(-20deg);
	-ms-transform: rotate(-20deg);
	-webkit-transform: rotate(-20deg);

	transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;

	left: -70px;
	bottom: -11px;
}

.bandeirinha .sigla {
	position:relative;
	color:white;
	font-weight:bold;
	font-size:20px;
	text-align: center;
	margin-top:7px;
}

.bandeirinha.caravana-mg .bg { background: #265631; }
.bandeirinha.caravana-ne .bg { background: #a74337; }
.bandeirinha.caravana-se .bg { background: #888; }
.bandeirinha.caravana-s .bg { background: #7a3128; }