From 9880b6b570680e6cd9702a40b0b6d4f9df4d53a1 Mon Sep 17 00:00:00 2001
From: Edmar Moretti <edmar.moretti@gmail.com>
Date: Sun, 19 Nov 2017 16:55:03 -0200
Subject: [PATCH] Atualização da interface do editor de mapfiles

---
 admin/black_editor.php         | 571 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 admin/black_editorCriaMapa.php | 606 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 2 files changed, 623 insertions(+), 554 deletions(-)
diff --git a/admin/black_editor.php b/admin/black_editor.php
index 0e66423..468ba9b 100755
--- a/admin/black_editor.php
+++ b/admin/black_editor.php
@@ -51,12 +51,12 @@ session_write_close();
 	-->
 <body id="i3geo" style='background: white;'>
     <!-- inclui o nome do usuario logado
-	<div id="i3GEONomeLogin"
-		style="position: absolute; left: 10px; top: 2px; font-size: 11px; z-index: 50000"></div>
-	-->
+    <div id="i3GEONomeLogin"
+        style="position: absolute; left: 10px; top: 2px; font-size: 11px; z-index: 50000"></div>
+    -->
     <!-- Aqui vai o mapa. O div a ser inserido e padronizado e depende da interface usar openlayers ou googlemaps
-	Se os estilos width e height nao estiverem definidos, o tamanho do mapa abrangera a tela toda
-	-->
+    Se os estilos width e height nao estiverem definidos, o tamanho do mapa abrangera a tela toda
+    -->
     <div id="mapai3Geo"></div>
     <!-- aqui sera incluida a escala numerica. E necessario ter o id=i3GEOescalanum para que o valor seja atualizado-->
     <form class="escalanumerica hidden-xs" onsubmit="javascript:i3GEO.navega.aplicaEscala($i('i3GEOescalanum').value);return false;">
@@ -78,10 +78,10 @@ session_write_close();
             </select>
         </div>
         <div class="i3GeoMascaraCoord" id="localizarxygeoProj" style="display: block; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjxg" type="text"> <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjxm" type="text"> <input
-                name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjxs" type="text"> Y: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjyg" type="text"> <input
-                name="" value="00" size="2" title="minuto" id="localizarxygeoProjym" type="text"> <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjys" type="text"> <img
-                class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.zoomPontoGeo()" src="../imagens/branco.gif">
+            X: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjxg" type="text"> <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjxm" type="text">
+            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjxs" type="text"> Y: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjyg"
+                type="text"> <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjym" type="text"> <input name="" value="00.00" size="5" title="segundo"
+                id="localizarxygeoProjys" type="text"> <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.zoomPontoGeo()" src="../imagens/branco.gif">
         </div>
         <div id="localizarxydd" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
             X: <input name="" value="00" size="12" title="X" id="localizarxyddX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyddY" type="text">
@@ -91,11 +91,12 @@ session_write_close();
                 onclick="i3GEO.coordenadas.geohash.zoomCodigo('localizarxygeohashCodigo')" src="../imagens/branco.gif">
         </div>
         <div id="localizarxypoliconicaSad69" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxypoliconicaSad69X" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxypoliconicaSad69Y" type="text">
+            X: <input name="" value="00" size="12" title="X" id="localizarxypoliconicaSad69X" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxypoliconicaSad69Y"
+                type="text">
         </div>
         <div id="localizarxyutmSad69Proj" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSad69ProjX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSad69ProjY" type="text"> Zn:
-            <input name="" value="--" size="2" title="Zona" id="localizarxyutmSad69ProjZN" type="text">
+            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSad69ProjX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSad69ProjY"
+                type="text"> Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSad69ProjZN" type="text">
         </div>
         <div id="localizarxyutmSirgas2000Proj" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
             X: <input name="" value="00" size="12" title="X" id="localizarxyutmSirgas2000ProjX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSirgas2000ProjY"
@@ -149,26 +150,26 @@ session_write_close();
     <!-- botoes laterais que abrem guias moveis -->
     <div id="i3GEOguiaMovel">
         <!-- configuracao para todos os botoes
-			data-idconteudo - id do DIV que contem o conteudo da guia e que sera mostrado ao ser clicado
-		-->
-        <div class="iconesGuiaMovel  ol-control" data-traduzir="true">
+            data-idconteudo - id do DIV que contem o conteudo da guia e que sera mostrado ao ser clicado
+        -->
+        <div class="iconesGuiaMovel ol-control" data-traduzir="true">
             <!-- ferramentas
-				data-idLista - id do DIV dentro de idconteudo que sera utilizado para mostrar as "pastas" que abrem o proximo nivel
-				data-idLinks - id do DIV dentro de idconteudo que sera utilizado para mostrar a lista de links que abre cada ferramenta
-				data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
-			-->
+                data-idLista - id do DIV dentro de idconteudo que sera utilizado para mostrar as "pastas" que abrem o proximo nivel
+                data-idLinks - id do DIV dentro de idconteudo que sera utilizado para mostrar a lista de links que abre cada ferramenta
+                data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
+            -->
             <div data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
                 <button title="{{{iconeFerramentas}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons">business_center</i>
                 </button>
             </div>
             <!-- temas existentes no mapa
-				data-idListaDeCamadas - id onde sera incluida a lista de camadas
-				data-idListaFundo - id onde sera incluida a lista de camadas de fundo (mapa base)
-				data-verificaAbrangencia - se for uma string, faz a verificacao se a camada esta fora da abrangencia atual do mapa,
-					inserindo ou nao a string como uma classe CSS. Pode degradar a performance e depende
-					do metadata existente na camada. Deixe vazio para nao ativar a operacao.
-			-->
+                data-idListaDeCamadas - id onde sera incluida a lista de camadas
+                data-idListaFundo - id onde sera incluida a lista de camadas de fundo (mapa base)
+                data-verificaAbrangencia - se for uma string, faz a verificacao se a camada esta fora da abrangencia atual do mapa,
+                    inserindo ou nao a string como uma classe CSS. Pode degradar a performance e depende
+                    do metadata existente na camada. Deixe vazio para nao ativar a operacao.
+            -->
             <div onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas"
                 style="margin-top: 3px;">
                 <button title="{{{iconeMapa}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
@@ -176,14 +177,14 @@ session_write_close();
                 </button>
             </div>
             <!-- catalogo de adicao de temas ao mapa
-				data-idCatalogo - id do DIV que contem a primeira pagina do catalogo. Esse DIV sera escondido e mostrado conforme o usuario navega pelo catalogo
-				data-idMenus - id do DIV que recebera a lista de menus cadastrados no sistema de administracao
-				data-idNavegacao - id do DIV que recebera a lista de opcoes apos o usuario clicar em um item do catalogo principal
-				data-idMigalha - id do DIV que recebera o link para retorno ao nivel anterior do catalogo
+                data-idCatalogo - id do DIV que contem a primeira pagina do catalogo. Esse DIV sera escondido e mostrado conforme o usuario navega pelo catalogo
+                data-idMenus - id do DIV que recebera a lista de menus cadastrados no sistema de administracao
+                data-idNavegacao - id do DIV que recebera a lista de opcoes apos o usuario clicar em um item do catalogo principal
+                data-idMigalha - id do DIV que recebera o link para retorno ao nivel anterior do catalogo
 
-				Variaveis javascript:
-				i3GEO.catalogoMenus.IDSMENUS - (array) apenas os menus com idmenu que constem nessa lista serao mostrados. Por default e vazio.
-			-->
+                Variaveis javascript:
+                i3GEO.catalogoMenus.IDSMENUS - (array) apenas os menus com idmenu que constem nessa lista serao mostrados. Por default e vazio.
+            -->
             <div onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal"
                 data-idMenus="catalogoMenus" style="margin-top: 3px;">
                 <button title="{{{iconeCatalogo}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
@@ -213,12 +214,12 @@ session_write_close();
                 </button>
             </div>
             <!-- A opcao de identificacao esta integrada ao balao de informacoes, mas pode aparecer aqui tambem
-			<div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('identifica',this)" style="margin-top: 3px;">
-				<button title="{{{iconeIdentifica}}}" class="iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/pointer-info.png" style="cursor: pointer; padding: 3px;">
-				</button>
-			</div>
-			-->
+            <div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('identifica',this)" style="margin-top: 3px;">
+                <button title="{{{iconeIdentifica}}}" class="iconeGuiaMovel" style="box-shadow: none;">
+                    <img src="../imagens/gisicons/pointer-info.png" style="cursor: pointer; padding: 3px;">
+                </button>
+            </div>
+            -->
         </div>
         <!-- veja i3GEO.guias.CONFIGURA -->
         <!-- Os IDs sao definidos no botao que ativa a guia veja: "i3GEOguiaMovel" -->
@@ -229,17 +230,15 @@ session_write_close();
                 <div id='guia1obj' data-traduzir="true" style='display: none;'>
                     <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');">
                         <button>
-                            <span class="pull-left">{{{iconeMapa}}}</span>
-                            <span class="pull-right material-icons">cancel</span>
+                            <span class="pull-left">{{{iconeMapa}}}</span> <span class="pull-right material-icons">cancel</span>
                         </button>
                     </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
-                    <div class="list-group condensed noprint">
-                        <label>{{{opcoes}}}</label>
-                        <a data-target="#opcoesGuia1" class="btn btn-sm btn-primary pull-right" style="margin-top: 0px; padding-top: 0px; padding-bottom: 0px;" type="button" data-toggle="collapse">
-                            <span class="caret"></span>
-                        </a>
-                        <div class="text-left collapse" id="opcoesGuia1" style="margin-left: 30px;">
+                    <div class="guiaOverflow">
+                        <div class="list-group condensed noprint collapsed" data-toggle="collapse" data-target="#opcoesGuia1">
+                            <label>{{{opcoes}}}</label>
+                        </div>
+                        <div class="text-left collapse noprint" id="opcoesGuia1" style="margin-left: 30px;">
                             <p>
                                 <a onclick="i3GEO.arvoreDeCamadas.atualiza(i3GEO.arvoreDeCamadas.CAMADAS,true)" href="javascript:void(0)">Refresh</a>
                             </p>
@@ -268,46 +267,42 @@ session_write_close();
                                 <a onclick="i3GEO.mapa.limpasel()" href="javascript:void(0)">{{{t4}}}</a>
                             </p>
                         </div>
-                    </div>
-                    <hr>
-                    <!-- Esta div acrescenta a lista de de camadas dispon&iacute;veis no mapa atual -->
-                    <div id="listaTemas" style="overflow: none;" data-template="../interface/templates/camada.html"></div>
-                    <!-- Esta div acrescenta a lista de de camadas de fundo
-					A lista de camadas de fundo e obtida da variavel i3GEO.Interface.openlayers.LAYERSADICIONAIS
-					Essa variavel e definida via javascript, e no caso das interfaces padrao do i3Geo, e definida
-					no programa interface/config.php
-					-->
-                    <div class="list-group condensed">
-                        <label>{{{camadasDeFundo}}}</label>
-                        <a data-target="#collapseFundo" class="btn btn-sm btn-primary pull-right" style="margin-top: 0px; padding-top: 0px; padding-bottom: 0px;" type="button" data-toggle="collapse">
-                            <span class="caret"></span>
-                        </a>
+                        <hr>
+                        <!-- Esta div acrescenta a lista de de camadas dispon&iacute;veis no mapa atual -->
+                        <div id="listaTemas" style="overflow: none;" data-template="../interface/templates/camada.html"></div>
+                        <!-- Esta div acrescenta a lista de de camadas de fundo
+                    A lista de camadas de fundo e obtida da variavel i3GEO.Interface.openlayers.LAYERSADICIONAIS
+                    Essa variavel e definida via javascript, e no caso das interfaces padrao do i3Geo, e definida
+                    no programa interface/config.php
+                    -->
+                        <div data-toggle="collapse" data-target="#collapseFundo" class="list-group condensed collapsed">
+                            <label>{{{camadasDeFundo}}}</label>
+                        </div>
                         <div style="margin-left: 0px;" class="collapse text-left" id="collapseFundo">
                             <form>
-                                <div id="listaFundo" class="form-group" data-template="../interface/templates/camadaFundo.html"></div>
+                                <div id="listaFundo" class="form-group condensed" data-template="../interface/templates/camadaFundo.html"></div>
                             </form>
                         </div>
+
                     </div>
                 </div>
                 <!-- Catalogo de temas -->
                 <div id='guia2obj' data-traduzir="true" style='display: none; text-align: left;'>
                     <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');i3GEO.catalogoMenus.mostraCatalogoPrincipal();">
                         <button>
-                            <span class="pull-left">{{{iconeCatalogo}}}</span>
-                            <span class="pull-right material-icons">cancel</span>
+                            <span class="pull-left">{{{iconeCatalogo}}}</span> <span class="pull-right material-icons">cancel</span>
                         </button>
                     </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
-                    <!-- aqui entra a lista de elementos quando uma das opcoes e clicada -->
-                    <div id="catalogoMigalha" data-template="../interface/templates/catalogoMigalha.html"></div>
-                    <div id="catalogoNavegacao"></div>
-                    <!-- Opcoes -->
-                    <div id="catalogoPrincipal">
-                        <div class="list-group condensed noprint">
-                            <label>{{{opcoes}}}</label>
-                            <a data-target="#opcoesGuia2" class="btn btn-sm btn-primary pull-right" style="margin-top: 0px; padding-top: 0px; padding-bottom: 0px;" type="button" data-toggle="collapse">
-                                <span class="caret"></span>
-                            </a>
+                    <div class="guiaOverflow">
+                        <!-- aqui entra a lista de elementos quando uma das opcoes e clicada -->
+                        <div id="catalogoMigalha" data-template="../interface/templates/catalogoMigalha.html"></div>
+                        <div id="catalogoNavegacao"></div>
+                        <!-- Opcoes -->
+                        <div id="catalogoPrincipal">
+                            <div data-toggle="collapse" data-target="#opcoesGuia2" class="list-group condensed collapsed noprint">
+                                <label>{{{opcoes}}}</label>
+                            </div>
                             <div class="text-left collapse" id="opcoesGuia2" style="margin-left: 30px;">
                                 <p>
                                     <a href="javascript:void(0)" onclick="i3GEO.login.dialogo.abreLogin()">Login/Logout</a>
@@ -343,273 +338,283 @@ session_write_close();
                                     <p>
                                         <a href="http://localhost/i3geo/kml.php?tipoxml=kml" target="_blank">{{{a13}}}</a>
                                     </p>
+                            </div>
 
+                            <hr>
+                            <!-- busca tema no catalogo
+                        <div class="form-group label-floating">
+                            <label class="control-label" for="i3GEObuscatema">{{{a1}}}</label>
+                            <div class="input-group">
+                                <input id="i3GEObuscatema" class="form-control" type="text" value="">
+                                <span class="input-group-btn">
+                                    <a onclick="i3GEO.arvoreDeTemas.buscaTema2($i('i3GEObuscatema').value);return false;" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
+                                        <span class="material-icons ">send</span>
+                                    </a>
+                                </span>
                             </div>
                         </div>
-                        <hr>
-                        <!-- busca tema no catalogo
-						<div class="form-group label-floating">
-							<label class="control-label" for="i3GEObuscatema">{{{a1}}}</label>
-							<div class="input-group">
-								<input id="i3GEObuscatema" class="form-control" type="text" value="">
-								<span class="input-group-btn">
-									<a onclick="i3GEO.arvoreDeTemas.buscaTema2($i('i3GEObuscatema').value);return false;" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
-										<span class="material-icons ">send</span>
-									</a>
-								</span>
-							</div>
-						</div>
-						 -->
-                        <!-- A lista de menus e uma funcao de i3GEO.guias.CONFIGURA.adiciona
-							Nessa funcao ficam tambem os parametros:
-							"idOndeMenus": "catalogoMenus",
-							"idCatalogoPrincipal": "catalogoPrincipal",
-							"idCatalogoNavegacao": "catalogoNavegacao",
-							"idOndeMigalha": "catalogoMigalha"
-						-->
-                        <div id="catalogoMenus" data-templateDir="../interface/templates/dir.html" data-templateTema="../interface/templates/tema.html"></div>
+                         -->
+                            <!-- A lista de menus e uma funcao de i3GEO.guias.CONFIGURA.adiciona
+                            Nessa funcao ficam tambem os parametros:
+                            "idOndeMenus": "catalogoMenus",
+                            "idCatalogoPrincipal": "catalogoPrincipal",
+                            "idCatalogoNavegacao": "catalogoNavegacao",
+                            "idOndeMigalha": "catalogoMigalha"
+                        -->
+                            <div id="catalogoMenus" data-templateDir="../interface/templates/dir.html" data-templateTema="../interface/templates/tema.html"></div>
 
-                        <div id="arvoreAdicionaTema"></div>
+                            <div id="arvoreAdicionaTema"></div>
 
-                        <!--
-						As funcoes de inicializacao recebem um objeto com parametros. Que por padrao sao:
-						config: {
-							'templateDir': '../interface/templates/dir.html',
-							'templateTema': '../interface/templates/tema.html',
-							'idCatalogoPrincipal': 'catalogoPrincipal',
-							'idCatalogoNavegacao': 'catalogoNavegacao',
-							'idOndeMigalha': 'catalogoMigalha'
-						}
+                            <!--
+                        As funcoes de inicializacao recebem um objeto com parametros. Que por padrao sao:
+                        config: {
+                            'templateDir': '../interface/templates/dir.html',
+                            'templateTema': '../interface/templates/tema.html',
+                            'idCatalogoPrincipal': 'catalogoPrincipal',
+                            'idCatalogoNavegacao': 'catalogoNavegacao',
+                            'idOndeMigalha': 'catalogoMigalha'
+                        }
 
-						exemplo:
+                        exemplo:
 
-						onclick="i3GEO.catalogoInde.inicia({'templateDir': '../interface/templates/dir.html','templateTema': '../interface/templates/tema.html','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})"
-						-->
+                        onclick="i3GEO.catalogoInde.inicia({'templateDir': '../interface/templates/dir.html','templateTema': '../interface/templates/tema.html','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})"
+                        -->
 
-                        <!-- servicos da INDE brasileira -->
-                        <div class="list-group condensed">
-                            <div class="row-content text-left">
-                                <a onclick="i3GEO.catalogoInde.inicia()" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
-                                    <span class="material-icons ">folder_open</span>
-                                </a>
-                                <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoInde.inicia()" role="button" href="javascript:void(0)">
-                                        <h4>INDE-Br</h4>
+                            <!-- servicos da INDE brasileira -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoInde.inicia()" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
+                                        <span class="material-icons ">folder_open</span>
                                     </a>
-                                    <h6>Infraestrutura Nacional de Dados Espaciais do Brasil</h6>
-                                </label>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoInde.inicia()" role="button" href="javascript:void(0)">
+                                            <h4>INDE-Br</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>Infraestrutura Nacional de Dados Espaciais do Brasil</h6>
+                                    </label>
+                                </div>
                             </div>
-                        </div>
-                        <hr>
-                        <!-- lista de wms cadastrados no sistema de administracao -->
-                        <div class="list-group condensed">
-                            <div class="row-content text-left">
-                                <a onclick="i3GEO.catalogoOgc.inicia();return false;" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
-                                    <span class="material-icons ">folder_open</span>
-                                </a>
-                                <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoOgc.inicia()" role="button" href="javascript:void(0)">
-                                        <h4>OGC-WMS</h4>
+                            <hr>
+                            <!-- lista de wms cadastrados no sistema de administracao -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoOgc.inicia();return false;" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
+                                        <span class="material-icons ">folder_open</span>
                                     </a>
-                                    <h6>{{{descOgcWms}}}</h6>
-                                </label>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoOgc.inicia()" role="button" href="javascript:void(0)">
+                                            <h4>OGC-WMS</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>{{{descOgcWms}}}</h6>
+                                    </label>
+                                </div>
                             </div>
-                        </div>
-                        <hr>
-                        <!--  regioes cadastradas no sistema de metadados -->
-                        <div class="list-group condensed">
-                            <div class="row-content text-left">
-                                <a onclick="i3GEO.catalogoRegioes.inicia()" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
-                                    <span class="material-icons ">folder_open</span>
-                                </a>
-                                <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoRegioes.inicia()" role="button" href="javascript:void(0)">
-                                        <h4>{{{x87}}}</h4>
+                            <hr>
+                            <!--  regioes cadastradas no sistema de metadados -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoRegioes.inicia()" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
+                                        <span class="material-icons ">folder_open</span>
                                     </a>
-                                    <h6>{{{descLimLoc}}}</h6>
-                                </label>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoRegioes.inicia()" role="button" href="javascript:void(0)">
+                                            <h4>{{{x87}}}</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>{{{descLimLoc}}}</h6>
+                                    </label>
+                                </div>
                             </div>
-                        </div>
-                        <hr>
-                        <!--  camadas que vem do sistema de metadados estatisticos -->
-                        <div class="list-group condensed">
-                            <div class="row-content text-left">
-                                <a onclick="i3GEO.catalogoMetaestat.inicia()" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
-                                    <span class="material-icons ">folder_open</span>
-                                </a>
-                                <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoMetaestat.inicia()" role="button" href="javascript:void(0)">
-                                        <h4>{{{x57}}}</h4>
+                            <hr>
+                            <!--  camadas que vem do sistema de metadados estatisticos -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoMetaestat.inicia()" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
+                                        <span class="material-icons ">folder_open</span>
                                     </a>
-                                    <h6>{{{descMeta}}}</h6>
-                                </label>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoMetaestat.inicia()" role="button" href="javascript:void(0)">
+                                            <h4>{{{x57}}}</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>{{{descMeta}}}</h6>
+                                    </label>
+                                </div>
                             </div>
-                        </div>
-                        <hr>
-                        <!--  mapas cadastrados no sistema de administracao (nao funcional)
-						<div class="list-group condensed"><div class="row-content text-left">
-							<a onclick="i3GEO.catalogoMapas.inicia({'seletorTemplateDir': '#guia2objTemplateDir','seletorTemplateTema': '#guia2objTemplateTema','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)"><span class="material-icons ">folder_open</span></a>
-							<label style="width: 255px;vertical-align: middle;">
-								<a onclick="i3GEO.catalogoMapas.inicia({'seletorTemplateDir': '#guia2objTemplateDir','seletorTemplateTema': '#guia2objTemplateTema','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})" role="button" href="javascript:void(0)">
-								<h4>{{{x90}}}</h4></a>
-								<h6>{{{descMapas}}}</h6>
-							</label>
-						</div></div><hr>
-						-->
-                        <!--  camadas por estrelas -->
-                        <div class="list-group condensed">
-                            <div class="row-content text-left">
-                                <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
-                                    <span class="material-icons ">folder_open</span>
-                                </a>
-                                <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button"
+                            <hr>
+                            <!--  mapas cadastrados no sistema de administracao (nao funcional)
+                        <div class="list-group condensed"><div class="row-content text-left">
+                            <a onclick="i3GEO.catalogoMapas.inicia({'seletorTemplateDir': '#guia2objTemplateDir','seletorTemplateTema': '#guia2objTemplateTema','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)"><span class="material-icons ">folder_open</span></a>
+                            <label style="width: 255px;vertical-align: middle;">
+                                <a onclick="i3GEO.catalogoMapas.inicia({'seletorTemplateDir': '#guia2objTemplateDir','seletorTemplateTema': '#guia2objTemplateTema','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})" role="button" href="javascript:void(0)">
+                                <h4>{{{x90}}}</h4></a>
+                                <h6>{{{descMapas}}}</h6>
+                            </label>
+                        </div></div><hr>
+                        -->
+                            <!--  camadas por estrelas -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max"
                                         href="javascript:void(0)">
-                                        <h4>{{{t46}}}</h4>
+                                        <span class="material-icons ">folder_open</span>
                                     </a>
-                                    <h6>{{{descEstrelas}}}</h6>
-                                </label>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button"
+                                            href="javascript:void(0)">
+                                            <h4>{{{t46}}}</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>{{{descEstrelas}}}</h6>
+                                    </label>
+                                </div>
                             </div>
-                        </div>
-                        <hr>
-                        <!--  sistemas que adicionam camadas -->
-                        <div class="list-group condensed">
-                            <div class="row-content text-left">
-                                <a onclick="i3GEO.catalogoSistemas.inicia()" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
-                                    <span class="material-icons ">folder_open</span>
-                                </a>
-                                <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoSistemas.inicia()" role="button" href="javascript:void(0)">
-                                        <h4>{{{a11}}}</h4>
+                            <hr>
+                            <!--  sistemas que adicionam camadas -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoSistemas.inicia()" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
+                                        <span class="material-icons ">folder_open</span>
                                     </a>
-                                    <h6>{{{descSistemas}}}</h6>
-                                </label>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoSistemas.inicia()" role="button" href="javascript:void(0)">
+                                            <h4>{{{a11}}}</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>{{{descSistemas}}}</h6>
+                                    </label>
+                                </div>
                             </div>
-                        </div>
-                        <hr>
-                        <!--  navegacao em diretorios -->
-                        <div class="list-group condensed">
-                            <div class="row-content text-left">
-                                <a onclick="i3GEO.catalogoDir.inicia()" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
-                                    <span class="material-icons ">folder_open</span>
-                                </a>
-                                <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoDir.inicia()" role="button" href="javascript:void(0)">
-                                        <h4>{{{a6}}}</h4>
+                            <hr>
+                            <!--  navegacao em diretorios -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoDir.inicia()" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
+                                        <span class="material-icons ">folder_open</span>
                                     </a>
-                                    <h6>{{{descDir}}}</h6>
-                                </label>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoDir.inicia()" role="button" href="javascript:void(0)">
+                                            <h4>{{{a6}}}</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>{{{descDir}}}</h6>
+                                    </label>
+                                </div>
                             </div>
+                            <hr>
                         </div>
-                        <hr>
                     </div>
                 </div>
                 <!-- Legenda -->
                 <div data-traduzir="true" id='guia4obj' style='display: none; text-align: left'>
                     <div class="i3GEOfechaGuia" onclick="i3GEO.legenda.off('legendaHtml');i3GEO.guias.abreFecha('fecha');">
                         <button>
-                            <span class="pull-left">{{{iconeLegenda}}}</span>
-                            <span class="pull-right material-icons">cancel</span>
+                            <span class="pull-left">{{{iconeLegenda}}}</span> <span class="pull-right material-icons">cancel</span>
                         </button>
                     </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
-                    <a href='javascript:void(0)' onclick="i3GEO.legenda.inicia({'janela':true})">{{{x11}}}</a>
-                    <div id="legendaHtml" data-template="../interface/templates/legenda.html" data-size="35,25" style='display: none; text-align: left'></div>
+                    <div class="guiaOverflow">
+                        <a href='javascript:void(0)' onclick="i3GEO.legenda.inicia({'janela':true})">{{{x11}}}</a>
+                        <div id="legendaHtml" data-template="../interface/templates/legenda.html" data-size="35,25" style='display: none; text-align: left'></div>
+                    </div>
                 </div>
                 <!-- busca
-				Funcoes de busca por registros. Pode ser feita nos temas existentes no mapa, em um servico de busca e no google
-				No botao que dispara a busca, ficam os parametros de configuracao
-				Esses parametros indicam qual o checkbox que define o tipo de busca, o local onde os dados serao mostrados e o template para formatar o resultado
-				-->
+                Funcoes de busca por registros. Pode ser feita nos temas existentes no mapa, em um servico de busca e no google
+                No botao que dispara a busca, ficam os parametros de configuracao
+                Esses parametros indicam qual o checkbox que define o tipo de busca, o local onde os dados serao mostrados e o template para formatar o resultado
+                -->
                 <div data-traduzir="true" id='guia7obj' style='display: none; text-align: left'>
                     <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');">
                         <button>
-                            <span class="pull-left">{{{t23}}}</span>
-                            <span class="pull-right material-icons">cancel</span>
+                            <span class="pull-left">{{{t23}}}</span> <span class="pull-right material-icons">cancel</span>
                         </button>
                     </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
-                    <form onSubmit="return false;">
-                        <div class="form-group label-floating">
-                            <label class="control-label" for="valorBuscaRapida">{{{x36}}}</label>
-                            <div class="input-group">
-                                <input class="form-control" type="text" value="" name="valorBuscaRapida"> <span class="input-group-btn"> <a onclick="i3GEO.busca.inicia(this);return false;"
-                                        data-templateGoogle="../interface/templates/buscaEmTemas.html" data-inputGoogle="[name=google]" data-ondeGoogle=".i3GEOresultadoBuscaGoogle"
-                                        data-templateTemasMapa="../interface/templates/buscaEmTemas.html" data-inputTemasMapa="[name=temasMapa]" data-ondeTemasMapa=".i3GEOresultadoBuscaTemasMapa"
-                                        data-templateServico="../interface/templates/buscaEmServico.html" data-ondeConteiner="#guia7obj" data-inputOndePalavra="[name=valorBuscaRapida]"
-                                        data-inputServicosExternos="[name=servicosExternos]" data-ondeServicosExternos=".i3GEOresultadoBuscaServicos" role="button" type="button"
-                                        class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
-                                        <span class="material-icons ">send</span>
-                                    </a>
-                                </span>
-                            </div>
-                        </div>
-                        <h4>{{{x37}}}:</h4>
-                        <div class="form-inline" style="width: 100%;">
-                            <div class="list-group condensed">
-                                <div class="checkbox text-left">
-                                    <label> <input checked class="noprint" value="on" type="checkbox" value="" name="servicosExternos"> <span class="checkbox-material noprint"><span class="check"></span></span>
-                                        {{{x38}}}
-                                    </label>
+                    <div class="guiaOverflow">
+                        <form onSubmit="return false;">
+                            <div class="form-group label-floating">
+                                <label class="control-label" for="valorBuscaRapida">{{{x36}}}</label>
+                                <div class="input-group">
+                                    <input class="form-control" type="text" value="" name="valorBuscaRapida"> <span class="input-group-btn"> <a
+                                            onclick="i3GEO.busca.inicia(this);return false;" data-templateGoogle="../interface/templates/buscaEmTemas.html" data-inputGoogle="[name=google]"
+                                            data-ondeGoogle=".i3GEOresultadoBuscaGoogle" data-templateTemasMapa="../interface/templates/buscaEmTemas.html" data-inputTemasMapa="[name=temasMapa]"
+                                            data-ondeTemasMapa=".i3GEOresultadoBuscaTemasMapa" data-templateServico="../interface/templates/buscaEmServico.html" data-ondeConteiner="#guia7obj"
+                                            data-inputOndePalavra="[name=valorBuscaRapida]" data-inputServicosExternos="[name=servicosExternos]"
+                                            data-ondeServicosExternos=".i3GEOresultadoBuscaServicos" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
+                                            <span class="material-icons ">send</span>
+                                        </a>
+                                    </span>
                                 </div>
                             </div>
+                            <h4>{{{x37}}}:</h4>
+                            <div class="form-inline" style="width: 100%;">
+                                <div class="list-group condensed">
+                                    <div class="checkbox text-left">
+                                        <label> <input checked class="noprint" value="on" type="checkbox" value="" name="servicosExternos"> {{{x38}}}
+                                        </label>
+                                    </div>
+                                </div>
+                                <div class="list-group condensed">
+                                    <div class="checkbox text-left">
+                                        <label> <input class="noprint" value="on" type="checkbox" name="temasMapa"> {{{x39}}}
+                                        </label>
+                                    </div>
+                                </div>
+                                <!-- Apenas para a interface google maps
                             <div class="list-group condensed">
                                 <div class="checkbox text-left">
-                                    <label> <input class="noprint" value="on" type="checkbox" name="temasMapa"> <span class="checkbox-material noprint"><span class="check"></span></span> {{{x39}}}
-                                    </label>
+                                <label>
+                                    <input class="noprint" value="on" type="checkbox" name="google">
+                                    <span class="checkbox-material noprint"><span class="check"></span></span> Google
+                                </label>
                                 </div>
                             </div>
-                            <!-- Apenas para a interface google maps
-							<div class="list-group condensed">
-								<div class="checkbox text-left">
-								<label>
-									<input class="noprint" value="on" type="checkbox" name="google">
-									<span class="checkbox-material noprint"><span class="check"></span></span> Google
-								</label>
-								</div>
-							</div>
-							 -->
-                        </div>
-                    </form>
-                    <hr>
-                    <div class="i3GEOresultadoBuscaServicos"></div>
-                    <div class="i3GEOresultadoBuscaTemasMapa"></div>
-                    <div class="i3GEOresultadoBuscaGoogle"></div>
-                    <div class="alert alert-info" role="alert">{{{x40}}}</div>
+                             -->
+                            </div>
+                        </form>
+                        <hr>
+                        <div class="i3GEOresultadoBuscaServicos"></div>
+                        <div class="i3GEOresultadoBuscaTemasMapa"></div>
+                        <div class="i3GEOresultadoBuscaGoogle"></div>
+                        <div class="alert alert-info" role="alert">{{{x40}}}</div>
+                    </div>
                 </div>
                 <!-- Ferramentas -->
                 <div data-traduzir="true" id='guia8obj' style='display: none; text-align: left'>
                     <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');">
                         <button>
-                            <span class="pull-left">{{{iconeFerramentas}}}</span>
-                            <span class="pull-right material-icons">cancel</span>
+                            <span class="pull-left">{{{iconeFerramentas}}}</span> <span class="pull-right material-icons">cancel</span>
                         </button>
                     </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
-                    <div class="form-inline" style="width: 100%;">
-                        <div class="text-center form-group" style="margin: 4px;">
-                            <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.area();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
-                                <img style="margin-top: 4px;" src="../imagens/gisicons/area-measure.png">
-                            </a>
-                            <h6>{{{d21at}}}</h6>
-                        </div>
-                        <div class="text-center form-group" style="margin: 4px;">
-                            <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.distancia();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
-                                <img style="margin-top: 4px;" src="../imagens/gisicons/length-measure.png">
-                            </a>
-                            <h6>{{{d21t}}}</h6>
-                        </div>
-                        <div class="text-center form-group" style="margin: 4px;">
-                            <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.selecao();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
-                                <img style="margin-top: 4px;" src="../imagens/gisicons/select.png">
-                            </a>
-                            <h6>{{{d24t}}}</h6>
-                        </div>
-                        <div class="text-center form-group" style="margin: 4px;">
-                            <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.geolocal();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
-                                <img style="margin-top: 4px;" src="../imagens/gisicons/layer-gps.png">
-                            </a>
-                            <h6>{{{localiza}}}</h6>
+                    <div class="guiaOverflow">
+                        <div class="form-inline" style="width: 100%;">
+                            <div class="text-center form-group" style="margin: 4px;">
+                                <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.area();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
+                                    <img style="margin-top: 4px;" src="../imagens/gisicons/area-measure.png">
+                                </a>
+                                <h6>{{{d21at}}}</h6>
+                            </div>
+                            <div class="text-center form-group" style="margin: 4px;">
+                                <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.distancia();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
+                                    <img style="margin-top: 4px;" src="../imagens/gisicons/length-measure.png">
+                                </a>
+                                <h6>{{{d21t}}}</h6>
+                            </div>
+                            <div class="text-center form-group" style="margin: 4px;">
+                                <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.selecao();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
+                                    <img style="margin-top: 4px;" src="../imagens/gisicons/select.png">
+                                </a>
+                                <h6>{{{d24t}}}</h6>
+                            </div>
+                            <div class="text-center form-group" style="margin: 4px;">
+                                <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.geolocal();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
+                                    <img style="margin-top: 4px;" src="../imagens/gisicons/layer-gps.png">
+                                </a>
+                                <h6>{{{localiza}}}</h6>
+                            </div>
                         </div>
+                        <div class="clearfix"></div>
+                        <hr>
+                        <div id="migalhaFerramentas" data-template="../interface/templates/ferramentasMigalha.html" style='display: block; text-align: left;'></div>
+                        <div id="listaFerramentasLinks" data-template="../interface/templates/ferramentasLink.html" style='display: block; text-align: left'></div>
+                        <div id="listaFerramentas" data-template="../interface/templates/ferramentasFolder.html" style='display: block; text-align: left'></div>
                     </div>
-                    <div class="clearfix"></div>
-                    <hr>
-                    <div id="migalhaFerramentas" data-template="../interface/templates/ferramentasMigalha.html" style='display: block; text-align: left;'></div>
-                    <div id="listaFerramentasLinks" data-template="../interface/templates/ferramentasLink.html" style='display: block; text-align: left'></div>
-                    <div id="listaFerramentas" data-template="../interface/templates/ferramentasFolder.html" style='display: block; text-align: left'></div>
                 </div>
             </div>
         </div>
diff --git a/admin/black_editorCriaMapa.php b/admin/black_editorCriaMapa.php
index 1bbecd6..47a7063 100755
--- a/admin/black_editorCriaMapa.php
+++ b/admin/black_editorCriaMapa.php
@@ -61,15 +61,14 @@ $id_mapa = $_GET["id_mapa"] * 1;
     <!-- Aqui vai o mapa. O div a ser inserido e padronizado e depende da interface usar openlayers ou googlemaps
     Se os estilos width e height nao estiverem definidos, o tamanho do mapa abrangera a tela toda
     -->
-    <div id="mapai3Geo" >
-    </div>
+    <div id="mapai3Geo"></div>
     <!-- aqui sera incluida a escala numerica. E necessario ter o id=i3GEOescalanum para que o valor seja atualizado-->
     <form class="escalanumerica hidden-xs" onsubmit="javascript:i3GEO.navega.aplicaEscala($i('i3GEOescalanum').value);return false;">
-        <input id='i3GEOescalanum' type='text' name='' value='' size='10' title=''  >
+        <input id='i3GEOescalanum' type='text' name='' value='' size='10' title=''>
     </form>
 
     <!-- aqui sera incluido o gadget que mostra a coordenada geografica da posicao do mouse -->
-    <div class="localizarxy fundoRodape hidden-xs hidden-sm" >
+    <div class="localizarxy fundoRodape hidden-xs hidden-sm">
         <div class="i3GeoMascaraCoord" style="display: block;">
             <select onchange="javascript:i3GEO.coordenadas.mudaTipo(this,'localizarxy');" class="i3geoCoordenadasComboTipo">
                 <option>DMS:</option>
@@ -82,43 +81,35 @@ $id_mapa = $_GET["id_mapa"] * 1;
                 <option value="utmSirgas2000Proj">UTM Sirgas</option>
             </select>
         </div>
-        <div class="i3GeoMascaraCoord" id="localizarxygeoProj" style="display: block;position: absolute;top: 0px;left: 60px;">
-            X:
-            <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjxg" type="text">
-            <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjxm" type="text">
-            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjxs" type="text">
-            Y:
-            <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjyg" type="text">
-            <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjym" type="text">
-            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjys" type="text">
-            <img class="ticfind" style="margin-left:8px;" title="zoom" onclick="i3GEO.coordenadas.zoomPontoGeo()" src="../imagens/branco.gif">
+        <div class="i3GeoMascaraCoord" id="localizarxygeoProj" style="display: block; position: absolute; top: 0px; left: 60px;">
+            X: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjxg" type="text"> <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjxm" type="text">
+            <input name="" value="00.00" size="5" title="segundo" id="localizarxygeoProjxs" type="text"> Y: <input name="" value="-00" size="3" title="grau" id="localizarxygeoProjyg"
+                type="text"> <input name="" value="00" size="2" title="minuto" id="localizarxygeoProjym" type="text"> <input name="" value="00.00" size="5" title="segundo"
+                id="localizarxygeoProjys" type="text"> <img class="ticfind" style="margin-left: 8px;" title="zoom" onclick="i3GEO.coordenadas.zoomPontoGeo()" src="../imagens/branco.gif">
         </div>
-        <div id="localizarxydd" class="i3GeoMascaraCoord" style="display: none;position: absolute;top: 0px;left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyddX" type="text">
-            Y: <input name="" value="00" size="12" title="Y" id="localizarxyddY" type="text">
+        <div id="localizarxydd" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
+            X: <input name="" value="00" size="12" title="X" id="localizarxyddX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyddY" type="text">
         </div>
-        <div id="localizarxygeohash" class="i3GeoMascaraCoord" style="display: none;position: absolute;top: 0px;left: 60px;">
-            GeoHash <input name="" value="00" size="12" title="Cod" id="localizarxygeohashCodigo" type="text">
-            <img class="ticfind" style="margin-left:8px;" title="zoom" onclick="i3GEO.coordenadas.geohash.zoomCodigo('localizarxygeohashCodigo')" src="../imagens/branco.gif">
+        <div id="localizarxygeohash" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
+            GeoHash <input name="" value="00" size="12" title="Cod" id="localizarxygeohashCodigo" type="text"> <img class="ticfind" style="margin-left: 8px;" title="zoom"
+                onclick="i3GEO.coordenadas.geohash.zoomCodigo('localizarxygeohashCodigo')" src="../imagens/branco.gif">
         </div>
-        <div id="localizarxypoliconicaSad69" class="i3GeoMascaraCoord" style="display: none;position: absolute;top: 0px;left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxypoliconicaSad69X" type="text">
-            Y: <input name="" value="00" size="12" title="Y" id="localizarxypoliconicaSad69Y" type="text">
+        <div id="localizarxypoliconicaSad69" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
+            X: <input name="" value="00" size="12" title="X" id="localizarxypoliconicaSad69X" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxypoliconicaSad69Y"
+                type="text">
         </div>
-        <div id="localizarxyutmSad69Proj" class="i3GeoMascaraCoord" style="display: none;position: absolute;top: 0px;left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSad69ProjX" type="text">
-            Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSad69ProjY" type="text">
-            Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSad69ProjZN" type="text">
+        <div id="localizarxyutmSad69Proj" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
+            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSad69ProjX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSad69ProjY"
+                type="text"> Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSad69ProjZN" type="text">
         </div>
-        <div id="localizarxyutmSirgas2000Proj" class="i3GeoMascaraCoord" style="display: none;position: absolute;top: 0px;left: 60px;">
-            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSirgas2000ProjX" type="text">
-            Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSirgas2000ProjY" type="text">
-            Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSirgas2000ProjZN" type="text">
+        <div id="localizarxyutmSirgas2000Proj" class="i3GeoMascaraCoord" style="display: none; position: absolute; top: 0px; left: 60px;">
+            X: <input name="" value="00" size="12" title="X" id="localizarxyutmSirgas2000ProjX" type="text"> Y: <input name="" value="00" size="12" title="Y" id="localizarxyutmSirgas2000ProjY"
+                type="text"> Zn: <input name="" value="--" size="2" title="Zona" id="localizarxyutmSirgas2000ProjZN" type="text">
         </div>
     </div>
     <!-- barra de icones de navegacao -->
     <div class="ol-i3GEOcontrols ol-control" data-traduzir="true">
-        <button  title="{{{d2t}}}" onclick="i3GEO.Interface.zoom2ext(i3GEO.parametros.extentTotal)" style="float: left;">
+        <button title="{{{d2t}}}" onclick="i3GEO.Interface.zoom2ext(i3GEO.parametros.extentTotal)" style="float: left;">
             <!--<img style="width:20px;" src="../imagens/gisicons/projection.png">-->
             <i class="material-icons">public</i>
         </button>
@@ -151,30 +142,28 @@ $id_mapa = $_GET["id_mapa"] * 1;
         </button>
     </div>
     <!--barra de progresso que e mostrada conforme as camadas sao desenhadas no mapa. Esse elemento deve ter o id="i3GEOprogressoCamadas" -->
-    <div id="i3GEOprogressoCamadas" class="progress" style="display:block;position:absolute;top:0px; height:5px;width:0%;margin:auto;">
-        <div class="progress-bar progress-bar-striped active"  role="progressbar" style="width:100%">
-        </div>
+    <div id="i3GEOprogressoCamadas" class="progress" style="display: block; position: absolute; top: 0px; height: 5px; width: 0%; margin: auto;">
+        <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%"></div>
     </div>
     <!--barra de aguarde id="i3GEObarraAguarde" -->
-    <div id="i3GEObarraAguarde" class="progress" style="display:block;position:absolute;top:0px; height:5px;width:0%;margin:auto;">
-        <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="width:100%">
-        </div>
+    <div id="i3GEObarraAguarde" class="progress" style="display: block; position: absolute; top: 0px; height: 5px; width: 0%; margin: auto;">
+        <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="width: 100%"></div>
     </div>
     <!-- mensagem de copyright -->
     <div id="i3GEOcopyright">i3Geo</div>
     <!-- botoes laterais que abrem guias moveis -->
-    <div id="i3GEOguiaMovel" >
+    <div id="i3GEOguiaMovel">
         <!-- configuracao para todos os botoes
             data-idconteudo - id do DIV que contem o conteudo da guia e que sera mostrado ao ser clicado
         -->
-        <div class="iconesGuiaMovel  ol-control" data-traduzir="true">
+        <div class="iconesGuiaMovel ol-control" data-traduzir="true">
             <!-- ferramentas
                 data-idLista - id do DIV dentro de idconteudo que sera utilizado para mostrar as "pastas" que abrem o proximo nivel
                 data-idLinks - id do DIV dentro de idconteudo que sera utilizado para mostrar a lista de links que abre cada ferramenta
                 data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
             -->
             <div data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
-                <button title="{{{iconeFerramentas}}}" class="iconeGuiaMovel" style="color:white;box-shadow: none;">
+                <button title="{{{iconeFerramentas}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons">business_center</i>
                 </button>
             </div>
@@ -185,8 +174,9 @@ $id_mapa = $_GET["id_mapa"] * 1;
                     inserindo ou nao a string como uma classe CSS. Pode degradar a performance e depende
                     do metadata existente na camada. Deixe vazio para nao ativar a operacao.
             -->
-            <div onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" style="margin-top: 3px;">
-                <button title="{{{iconeMapa}}}" class="iconeGuiaMovel" style="color:white;box-shadow: none;">
+            <div onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas"
+                style="margin-top: 3px;">
+                <button title="{{{iconeMapa}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons"><i class="material-icons">visibility</i></i>
                 </button>
             </div>
@@ -199,30 +189,31 @@ $id_mapa = $_GET["id_mapa"] * 1;
                 Variaveis javascript:
                 i3GEO.catalogoMenus.IDSMENUS - (array) apenas os menus com idmenu que constem nessa lista serao mostrados. Por default e vazio.
             -->
-            <div onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus" style="margin-top: 3px;">
-                <button title="{{{iconeCatalogo}}}" class="iconeGuiaMovel" style="color:white;box-shadow: none;">
+            <div onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal"
+                data-idMenus="catalogoMenus" style="margin-top: 3px;">
+                <button title="{{{iconeCatalogo}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons">layers</i>
                 </button>
             </div>
             <!-- legenda -->
             <div onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj" data-idLegenda="legendaHtml" style="margin-top: 3px;">
-                <button title="{{{iconeLegenda}}}" class="iconeGuiaMovel" style="color:white;box-shadow: none;">
+                <button title="{{{iconeLegenda}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons">view_list</i>
                 </button>
             </div>
             <div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('dobraPagina',this)" style="margin-top: 3px;">
-                <button title="{{{trocaInterface}}}" class="iconeGuiaMovel" style="color:white;box-shadow: none;">
+                <button title="{{{trocaInterface}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons">compare_arrows</i>
                 </button>
             </div>
             <!-- Busca -->
             <div onclick="i3GEO.guias.ativa('buscaRapida',this)" data-idconteudo="guia7obj" style="margin-top: 3px;">
-                <button class="iconeGuiaMovel" style="color:white;box-shadow: none;">
+                <button class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons">search</i>
                 </button>
             </div>
-            <div onclick="i3GEO.guias.ativa('identificaBalao',this)" style="margin-top: 3px;" >
-                <button title="{{{iconeBalao}}}" class="iconeGuiaMovel" style="color:white;box-shadow: none;">
+            <div onclick="i3GEO.guias.ativa('identificaBalao',this)" style="margin-top: 3px;">
+                <button title="{{{iconeBalao}}}" class="iconeGuiaMovel" style="color: white; box-shadow: none;">
                     <i class="material-icons">location_on</i>
                 </button>
             </div>
@@ -237,102 +228,124 @@ $id_mapa = $_GET["id_mapa"] * 1;
         <!-- veja i3GEO.guias.CONFIGURA -->
         <!-- Os IDs sao definidos no botao que ativa a guia veja: "i3GEOguiaMovel" -->
         <!-- se height nao estiver definido sera utilizada a altura do mapa -->
-        <div id="i3GEOguiaMovelMolde" >
-            <div id="i3GEOguiaMovelConteudo" >
+        <div id="i3GEOguiaMovelMolde">
+            <div id="i3GEOguiaMovelConteudo">
                 <!-- camadas existentes no mapa -->
                 <div id='guia1obj' data-traduzir="true" style='display: none;'>
                     <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');">
-                    <span class="pull-left">{{{iconeMapa}}}</span>X</div>
+                        <button>
+                            <span class="pull-left">{{{iconeMapa}}}</span> <span class="pull-right material-icons">cancel</span>
+                        </button>
+                    </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
-                    <div class="list-group condensed noprint" >
-                        <label>{{{opcoes}}}</label>
-                        <a data-target="#opcoesGuia1" class="btn btn-sm btn-primary pull-right" style="margin-top: 0px;padding-top: 0px;padding-bottom: 0px;" type="button" data-toggle="collapse" >
-                            <span class="caret"></span>
-                        </a>
-                        <div class="text-left collapse" id="opcoesGuia1" style="margin-left: 30px;">
-                            <p><a onclick="i3GEO.arvoreDeCamadas.atualiza(i3GEO.arvoreDeCamadas.CAMADAS,true)" href="javascript:void(0)" >Refresh</a></p>
-                            <p><a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('ligartodos')" href="javascript:void(0)" >{{{t3a}}}</a></p>
-                            <p><a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('desligartodos')" href="javascript:void(0)" >{{{t3b}}}</a></p>
-                            <p><a onclick="i3GEO.arvoreDeCamadas.dialogo.excluir()" href="javascript:void(0)" >{{{t12}}}</a></p>
-                            <p><a onclick="i3GEO.arvoreDeCamadas.dialogo.filtro()" href="javascript:void(0)" >{{{t2a}}}</a></p>
-                            <p><a onclick="i3GEO.mapa.dialogo.opacidade()" href="javascript:void(0)" >{{{t20}}}</a></p>
-                            <p><a onclick="i3GEO.mapa.dialogo.animacao()" href="javascript:void(0)" >{{{p21}}}</a></p>
-                            <p><a onclick="i3GEO.mapa.dialogo.imprimir()" href="javascript:void(0)" >{{{d12}}}</a></p>
-                            <p><a onclick="i3GEO.mapa.limpasel()" href="javascript:void(0)" >{{{t4}}}</a></p>
+                    <div class="guiaOverflow">
+                        <div class="list-group condensed noprint collapsed" data-toggle="collapse" data-target="#opcoesGuia1">
+                            <label>{{{opcoes}}}</label>
                         </div>
-                    </div>
-                    <hr>
-                    <!-- Esta div acrescenta a lista de de camadas dispon&iacute;veis no mapa atual -->
-                    <div id="listaTemas" style="overflow:none;" data-template="../interface/templates/camada.html"></div>
-                    <!-- Esta div acrescenta a lista de de camadas de fundo
+                        <div class="text-left collapse noprint" id="opcoesGuia1" style="margin-left: 30px;">
+                            <p>
+                                <a onclick="i3GEO.arvoreDeCamadas.atualiza(i3GEO.arvoreDeCamadas.CAMADAS,true)" href="javascript:void(0)">Refresh</a>
+                            </p>
+                            <p>
+                                <a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('ligartodos')" href="javascript:void(0)">{{{t3a}}}</a>
+                            </p>
+                            <p>
+                                <a onclick="i3GEO.arvoreDeCamadas.aplicaTemas('desligartodos')" href="javascript:void(0)">{{{t3b}}}</a>
+                            </p>
+                            <p>
+                                <a onclick="i3GEO.arvoreDeCamadas.dialogo.excluir()" href="javascript:void(0)">{{{t12}}}</a>
+                            </p>
+                            <p>
+                                <a onclick="i3GEO.arvoreDeCamadas.dialogo.filtro()" href="javascript:void(0)">{{{t2a}}}</a>
+                            </p>
+                            <p>
+                                <a onclick="i3GEO.mapa.dialogo.opacidade()" href="javascript:void(0)">{{{t20}}}</a>
+                            </p>
+                            <p>
+                                <a onclick="i3GEO.mapa.dialogo.animacao()" href="javascript:void(0)">{{{p21}}}</a>
+                            </p>
+                            <p>
+                                <a onclick="i3GEO.mapa.dialogo.imprimir()" href="javascript:void(0)">{{{d12}}}</a>
+                            </p>
+                            <p>
+                                <a onclick="i3GEO.mapa.limpasel()" href="javascript:void(0)">{{{t4}}}</a>
+                            </p>
+                        </div>
+                        <hr>
+                        <!-- Esta div acrescenta a lista de de camadas dispon&iacute;veis no mapa atual -->
+                        <div id="listaTemas" style="overflow: none;" data-template="../interface/templates/camada.html"></div>
+                        <!-- Esta div acrescenta a lista de de camadas de fundo
                     A lista de camadas de fundo e obtida da variavel i3GEO.Interface.openlayers.LAYERSADICIONAIS
                     Essa variavel e definida via javascript, e no caso das interfaces padrao do i3Geo, e definida
                     no programa interface/config.php
                     -->
-                    <div class="list-group condensed">
-                        <label>{{{camadasDeFundo}}}</label>
-                        <a data-target="#collapseFundo" class="btn btn-sm btn-primary pull-right" style="margin-top: 0px;padding-top: 0px;padding-bottom: 0px;" type="button" data-toggle="collapse" >
-                            <span class="caret"></span>
-                        </a>
-                        <div style="margin-left:0px;" class="collapse text-left" id="collapseFundo">
+                        <div data-toggle="collapse" data-target="#collapseFundo" class="list-group condensed collapsed">
+                            <label>{{{camadasDeFundo}}}</label>
+                        </div>
+                        <div style="margin-left: 0px;" class="collapse text-left" id="collapseFundo">
                             <form>
-                                <div id="listaFundo" class="form-group" data-template="../interface/templates/camadaFundo.html"></div>
+                                <div id="listaFundo" class="form-group condensed" data-template="../interface/templates/camadaFundo.html"></div>
                             </form>
                         </div>
+
                     </div>
                 </div>
                 <!-- Catalogo de temas -->
-                <div id='guia2obj' data-traduzir="true" style='display: none; text-align:left;'>
-                    <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');i3GEO.catalogoMenus.mostraCatalogoPrincipal();"><span class="pull-left">{{{iconeCatalogo}}}</span> X</div>
+                <div id='guia2obj' data-traduzir="true" style='display: none; text-align: left;'>
+                    <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');i3GEO.catalogoMenus.mostraCatalogoPrincipal();">
+                        <button>
+                            <span class="pull-left">{{{iconeCatalogo}}}</span> <span class="pull-right material-icons">cancel</span>
+                        </button>
+                    </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
-                    <!-- aqui entra a lista de elementos quando uma das opcoes e clicada -->
-                    <div id="catalogoMigalha" data-template="../interface/templates/catalogoMigalha.html"></div>
-                    <div id="catalogoNavegacao"></div>
-                    <!-- Opcoes -->
-                    <div id="catalogoPrincipal">
-                        <div class="list-group condensed noprint" >
-                            <label>{{{opcoes}}}</label>
-                            <a data-target="#opcoesGuia2" class="btn btn-sm btn-primary pull-right" style="margin-top: 0px;padding-top: 0px;padding-bottom: 0px;" type="button" data-toggle="collapse" >
-                                <span class="caret"></span>
-                            </a>
+                    <div class="guiaOverflow">
+                        <!-- aqui entra a lista de elementos quando uma das opcoes e clicada -->
+                        <div id="catalogoMigalha" data-template="../interface/templates/catalogoMigalha.html"></div>
+                        <div id="catalogoNavegacao"></div>
+                        <!-- Opcoes -->
+                        <div id="catalogoPrincipal">
+                            <div data-toggle="collapse" data-target="#opcoesGuia2" class="list-group condensed collapsed noprint">
+                                <label>{{{opcoes}}}</label>
+                            </div>
                             <div class="text-left collapse" id="opcoesGuia2" style="margin-left: 30px;">
                                 <p>
-                                <a href="javascript:void(0)" onclick="i3GEO.login.dialogo.abreLogin()">Login/Logout</a>
+                                    <a href="javascript:void(0)" onclick="i3GEO.login.dialogo.abreLogin()">Login/Logout</a>
                                 </p>
                                 <p>
-                                <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.atualiza()">Refresh</a> -->
+                                    <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.atualiza()">Refresh</a> -->
                                 </p>
                                 <li class="divider"></p>
-                                <p>
-                                <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.conectaservico()" >{{{a15}}}</a>
-                                </p>
-                                <p>
-                                <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.uploadarquivo()">{{{a14}}}</a>
-                                </p>
-                                <p>
-                                <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.downloadbase()">{{{a3}}}</a>
-                                </p>
-                                <p>
-                                <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.importarwmc()">{{{a3a}}}</a>
-                                </p>
-                                <p>
-                                <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.nuvemTags()">{{{a5a}}}</a> -->
-                                </p>
-                                <p>
-                                <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.carouselTemas()">Miniaturas</a> -->
-                                </p>
-                                <p>
-                                <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.buscaInde()">Busca na INDE</a>
-                                </p>
-                                <p>
-                                <a href="javascript:void(0)" onclick="i3GEO.mapa.dialogo.metaestat()">Cartogramas estatisticos</a>
-                                </p>
-                                <p><a href="http://localhost/i3geo/kml.php?tipoxml=kml" target="_blank">{{{a13}}}</a>
-                                </p>
+                                    <p>
+                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.conectaservico()">{{{a15}}}</a>
+                                    </p>
+                                    <p>
+                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.uploadarquivo()">{{{a14}}}</a>
+                                    </p>
+                                    <p>
+                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.downloadbase()">{{{a3}}}</a>
+                                    </p>
+                                    <p>
+                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.importarwmc()">{{{a3a}}}</a>
+                                    </p>
+                                    <p>
+                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.nuvemTags()">{{{a5a}}}</a> -->
+                                    </p>
+                                    <p>
+                                        <!-- <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.carouselTemas()">Miniaturas</a> -->
+                                    </p>
+                                    <p>
+                                        <a href="javascript:void(0)" onclick="i3GEO.arvoreDeTemas.dialogo.buscaInde()">Busca na INDE</a>
+                                    </p>
+                                    <p>
+                                        <a href="javascript:void(0)" onclick="i3GEO.mapa.dialogo.metaestat()">Cartogramas estatisticos</a>
+                                    </p>
+                                    <p>
+                                        <a href="http://localhost/i3geo/kml.php?tipoxml=kml" target="_blank">{{{a13}}}</a>
+                                    </p>
                             </div>
-                        </div>
-                        <hr>
-                        <!-- busca tema no catalogo
+
+                            <hr>
+                            <!-- busca tema no catalogo
                         <div class="form-group label-floating">
                             <label class="control-label" for="i3GEObuscatema">{{{a1}}}</label>
                             <div class="input-group">
@@ -345,18 +358,18 @@ $id_mapa = $_GET["id_mapa"] * 1;
                             </div>
                         </div>
                          -->
-                        <!-- A lista de menus e uma funcao de i3GEO.guias.CONFIGURA.adiciona
+                            <!-- A lista de menus e uma funcao de i3GEO.guias.CONFIGURA.adiciona
                             Nessa funcao ficam tambem os parametros:
                             "idOndeMenus": "catalogoMenus",
                             "idCatalogoPrincipal": "catalogoPrincipal",
                             "idCatalogoNavegacao": "catalogoNavegacao",
                             "idOndeMigalha": "catalogoMigalha"
                         -->
-                        <div id="catalogoMenus" data-templateDir="../interface/templates/dir.html" data-templateTema="../interface/templates/tema.html"></div>
+                            <div id="catalogoMenus" data-templateDir="../interface/templates/dir.html" data-templateTema="../interface/templates/tema.html"></div>
 
-                        <div id="arvoreAdicionaTema"></div>
+                            <div id="arvoreAdicionaTema"></div>
 
-                        <!--
+                            <!--
                         As funcoes de inicializacao recebem um objeto com parametros. Que por padrao sao:
                         config: {
                             'templateDir': '../interface/templates/dir.html',
@@ -371,43 +384,67 @@ $id_mapa = $_GET["id_mapa"] * 1;
                         onclick="i3GEO.catalogoInde.inicia({'templateDir': '../interface/templates/dir.html','templateTema': '../interface/templates/tema.html','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})"
                         -->
 
-                        <!-- servicos da INDE brasileira -->
-                        <div class="list-group condensed"><div class="row-content text-left">
-                            <a onclick="i3GEO.catalogoInde.inicia()" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)"><span class="material-icons ">folder_open</span></a>
-                            <label style="width: 255px;vertical-align: middle;">
-                                <a onclick="i3GEO.catalogoInde.inicia()" role="button" href="javascript:void(0)">
-                                <h4>INDE-Br</h4></a>
-                                <h6>Infraestrutura Nacional de Dados Espaciais do Brasil</h6>
-                            </label>
-                        </div></div><hr>
-                        <!-- lista de wms cadastrados no sistema de administracao -->
-                        <div class="list-group condensed"><div class="row-content text-left">
-                            <a onclick="i3GEO.catalogoOgc.inicia();return false;" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)"><span class="material-icons ">folder_open</span></a>
-                            <label style="width: 255px;vertical-align: middle;">
-                                <a onclick="i3GEO.catalogoOgc.inicia()" role="button" href="javascript:void(0)">
-                                <h4>OGC-WMS</h4></a>
-                                <h6>{{{descOgcWms}}}</h6>
-                            </label>
-                        </div></div><hr>
-                        <!--  regioes cadastradas no sistema de metadados -->
-                        <div class="list-group condensed"><div class="row-content text-left">
-                            <a onclick="i3GEO.catalogoRegioes.inicia()" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)"><span class="material-icons ">folder_open</span></a>
-                            <label style="width: 255px;vertical-align: middle;">
-                                <a onclick="i3GEO.catalogoRegioes.inicia()" role="button" href="javascript:void(0)">
-                                <h4>{{{x87}}}</h4></a>
-                                <h6>{{{descLimLoc}}}</h6>
-                            </label>
-                        </div></div><hr>
-                        <!--  camadas que vem do sistema de metadados estatisticos -->
-                        <div class="list-group condensed"><div class="row-content text-left">
-                            <a onclick="i3GEO.catalogoMetaestat.inicia()" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)"><span class="material-icons ">folder_open</span></a>
-                            <label style="width: 255px;vertical-align: middle;">
-                                <a onclick="i3GEO.catalogoMetaestat.inicia()" role="button" href="javascript:void(0)">
-                                <h4>{{{x57}}}</h4></a>
-                                <h6>{{{descMeta}}}</h6>
-                            </label>
-                        </div></div><hr>
-                        <!--  mapas cadastrados no sistema de administracao (nao funcional)
+                            <!-- servicos da INDE brasileira -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoInde.inicia()" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
+                                        <span class="material-icons ">folder_open</span>
+                                    </a>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoInde.inicia()" role="button" href="javascript:void(0)">
+                                            <h4>INDE-Br</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>Infraestrutura Nacional de Dados Espaciais do Brasil</h6>
+                                    </label>
+                                </div>
+                            </div>
+                            <hr>
+                            <!-- lista de wms cadastrados no sistema de administracao -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoOgc.inicia();return false;" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
+                                        <span class="material-icons ">folder_open</span>
+                                    </a>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoOgc.inicia()" role="button" href="javascript:void(0)">
+                                            <h4>OGC-WMS</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>{{{descOgcWms}}}</h6>
+                                    </label>
+                                </div>
+                            </div>
+                            <hr>
+                            <!--  regioes cadastradas no sistema de metadados -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoRegioes.inicia()" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
+                                        <span class="material-icons ">folder_open</span>
+                                    </a>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoRegioes.inicia()" role="button" href="javascript:void(0)">
+                                            <h4>{{{x87}}}</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>{{{descLimLoc}}}</h6>
+                                    </label>
+                                </div>
+                            </div>
+                            <hr>
+                            <!--  camadas que vem do sistema de metadados estatisticos -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoMetaestat.inicia()" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
+                                        <span class="material-icons ">folder_open</span>
+                                    </a>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoMetaestat.inicia()" role="button" href="javascript:void(0)">
+                                            <h4>{{{x57}}}</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>{{{descMeta}}}</h6>
+                                    </label>
+                                </div>
+                            </div>
+                            <hr>
+                            <!--  mapas cadastrados no sistema de administracao (nao funcional)
                         <div class="list-group condensed"><div class="row-content text-left">
                             <a onclick="i3GEO.catalogoMapas.inicia({'seletorTemplateDir': '#guia2objTemplateDir','seletorTemplateTema': '#guia2objTemplateTema','idCatalogoPrincipal':'catalogoPrincipal','idCatalogoNavegacao':'catalogoNavegacao','idOndeMigalha':'catalogoMigalha'})" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)"><span class="material-icons ">folder_open</span></a>
                             <label style="width: 255px;vertical-align: middle;">
@@ -417,41 +454,68 @@ $id_mapa = $_GET["id_mapa"] * 1;
                             </label>
                         </div></div><hr>
                         -->
-                        <!--  camadas por estrelas -->
-                        <div class="list-group condensed"><div class="row-content text-left">
-                            <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)"><span class="material-icons ">folder_open</span></a>
-                            <label style="width: 255px;vertical-align: middle;">
-                                <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button" href="javascript:void(0)">
-                                <h4>{{{t46}}}</h4></a>
-                                <h6>{{{descEstrelas}}}</h6>
-                            </label>
-                        </div></div><hr>
-                        <!--  sistemas que adicionam camadas -->
-                        <div class="list-group condensed"><div class="row-content text-left">
-                            <a onclick="i3GEO.catalogoSistemas.inicia()" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)"><span class="material-icons ">folder_open</span></a>
-                            <label style="width: 255px;vertical-align: middle;">
-                                <a onclick="i3GEO.catalogoSistemas.inicia()" role="button" href="javascript:void(0)">
-                                <h4>{{{a11}}}</h4></a>
-                                <h6>{{{descSistemas}}}</h6>
-                            </label>
-                        </div></div><hr>
-                        <!--  navegacao em diretorios -->
-                        <div class="list-group condensed"><div class="row-content text-left">
-                                <a onclick="i3GEO.catalogoDir.inicia()" role="button" class="btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)"><span class="material-icons ">folder_open</span></a>
-                                <label style="width: 255px;vertical-align: middle;">
-                                    <a onclick="i3GEO.catalogoDir.inicia()" role="button" href="javascript:void(0)">
-                                    <h4>{{{a6}}}</h4></a>
-                                    <h6>{{{descDir}}}</h6>
-                                </label>
-                        </div></div><hr>
+                            <!--  camadas por estrelas -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max"
+                                        href="javascript:void(0)">
+                                        <span class="material-icons ">folder_open</span>
+                                    </a>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoEstrelas.inicia({'valorEstrela':5,'numEstrelas':1})" role="button"
+                                            href="javascript:void(0)">
+                                            <h4>{{{t46}}}</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>{{{descEstrelas}}}</h6>
+                                    </label>
+                                </div>
+                            </div>
+                            <hr>
+                            <!--  sistemas que adicionam camadas -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoSistemas.inicia()" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
+                                        <span class="material-icons ">folder_open</span>
+                                    </a>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoSistemas.inicia()" role="button" href="javascript:void(0)">
+                                            <h4>{{{a11}}}</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>{{{descSistemas}}}</h6>
+                                    </label>
+                                </div>
+                            </div>
+                            <hr>
+                            <!--  navegacao em diretorios -->
+                            <div class="list-group condensed">
+                                <div class="row-content text-left">
+                                    <a onclick="i3GEO.catalogoDir.inicia()" role="button" class="hidden-xs hidden-sm btn btn-primary btn-fab btn-fab-max" href="javascript:void(0)">
+                                        <span class="material-icons ">folder_open</span>
+                                    </a>
+                                    <label style="width: 255px; vertical-align: middle;"> <a onclick="i3GEO.catalogoDir.inicia()" role="button" href="javascript:void(0)">
+                                            <h4>{{{a6}}}</h4>
+                                            <i class="pull-right material-icons">navigate_next</i>
+                                        </a>
+                                        <h6>{{{descDir}}}</h6>
+                                    </label>
+                                </div>
+                            </div>
+                            <hr>
+                        </div>
                     </div>
                 </div>
                 <!-- Legenda -->
                 <div data-traduzir="true" id='guia4obj' style='display: none; text-align: left'>
-                    <div class="i3GEOfechaGuia" onclick="i3GEO.legenda.off('legendaHtml');i3GEO.guias.abreFecha('fecha');"><span class="pull-left">{{{iconeLegenda}}}</span>X</div>
+                    <div class="i3GEOfechaGuia" onclick="i3GEO.legenda.off('legendaHtml');i3GEO.guias.abreFecha('fecha');">
+                        <button>
+                            <span class="pull-left">{{{iconeLegenda}}}</span> <span class="pull-right material-icons">cancel</span>
+                        </button>
+                    </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
-                    <a href='javascript:void(0)' onclick="i3GEO.legenda.inicia({'janela':true})" >{{{x11}}}</a>
-                    <div id="legendaHtml" data-template="../interface/templates/legenda.html" data-size="35,25" style='display: none; text-align: left'></div>
+                    <div class="guiaOverflow">
+                        <a href='javascript:void(0)' onclick="i3GEO.legenda.inicia({'janela':true})">{{{x11}}}</a>
+                        <div id="legendaHtml" data-template="../interface/templates/legenda.html" data-size="35,25" style='display: none; text-align: left'></div>
+                    </div>
                 </div>
                 <!-- busca
                 Funcoes de busca por registros. Pode ser feita nos temas existentes no mapa, em um servico de busca e no google
@@ -459,50 +523,43 @@ $id_mapa = $_GET["id_mapa"] * 1;
                 Esses parametros indicam qual o checkbox que define o tipo de busca, o local onde os dados serao mostrados e o template para formatar o resultado
                 -->
                 <div data-traduzir="true" id='guia7obj' style='display: none; text-align: left'>
-                    <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');"><span class="pull-left">{{{t23}}}</span> X</div>
+                    <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');">
+                        <button>
+                            <span class="pull-left">{{{t23}}}</span> <span class="pull-right material-icons">cancel</span>
+                        </button>
+                    </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
-                    <form onSubmit="return false;" >
-                        <div class="form-group label-floating">
-                            <label class="control-label" for="valorBuscaRapida">{{{x36}}}</label>
-                            <div class="input-group">
-                                <input class="form-control" type="text" value="" name="valorBuscaRapida">
-                                <span class="input-group-btn">
-                                    <a onclick="i3GEO.busca.inicia(this);return false;"
-                                    data-templateGoogle="../interface/templates/buscaEmTemas.html"
-                                    data-inputGoogle="[name=google]"
-                                    data-ondeGoogle=".i3GEOresultadoBuscaGoogle"
-                                    data-templateTemasMapa="../interface/templates/buscaEmTemas.html"
-                                    data-inputTemasMapa="[name=temasMapa]"
-                                    data-ondeTemasMapa=".i3GEOresultadoBuscaTemasMapa"
-                                    data-templateServico="../interface/templates/buscaEmServico.html"
-                                    data-ondeConteiner="#guia7obj"
-                                    data-inputOndePalavra="[name=valorBuscaRapida]"
-                                    data-inputServicosExternos="[name=servicosExternos]"
-                                    data-ondeServicosExternos=".i3GEOresultadoBuscaServicos" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
-                                        <span class="material-icons ">send</span>
-                                    </a>
-                                </span>
-                            </div>
-                        </div>
-                        <h4>{{{x37}}}:</h4>
-                        <div class="form-inline" style="width:100%;">
-                            <div class="list-group condensed">
-                                <div class="checkbox text-left">
-                                <label>
-                                    <input checked class="noprint" value="on" type="checkbox" value="" name="servicosExternos" >
-                                    <span class="checkbox-material noprint"><span class="check"></span></span> {{{x38}}}
-                                </label>
+                    <div class="guiaOverflow">
+                        <form onSubmit="return false;">
+                            <div class="form-group label-floating">
+                                <label class="control-label" for="valorBuscaRapida">{{{x36}}}</label>
+                                <div class="input-group">
+                                    <input class="form-control" type="text" value="" name="valorBuscaRapida"> <span class="input-group-btn"> <a
+                                            onclick="i3GEO.busca.inicia(this);return false;" data-templateGoogle="../interface/templates/buscaEmTemas.html" data-inputGoogle="[name=google]"
+                                            data-ondeGoogle=".i3GEOresultadoBuscaGoogle" data-templateTemasMapa="../interface/templates/buscaEmTemas.html" data-inputTemasMapa="[name=temasMapa]"
+                                            data-ondeTemasMapa=".i3GEOresultadoBuscaTemasMapa" data-templateServico="../interface/templates/buscaEmServico.html" data-ondeConteiner="#guia7obj"
+                                            data-inputOndePalavra="[name=valorBuscaRapida]" data-inputServicosExternos="[name=servicosExternos]"
+                                            data-ondeServicosExternos=".i3GEOresultadoBuscaServicos" role="button" type="button" class="btn btn-warning btn-fab btn-fab-max" href="javascript:void(0)">
+                                            <span class="material-icons ">send</span>
+                                        </a>
+                                    </span>
                                 </div>
                             </div>
-                            <div class="list-group condensed">
-                                <div class="checkbox text-left">
-                                <label>
-                                    <input class="noprint" value="on" type="checkbox" name="temasMapa">
-                                    <span class="checkbox-material noprint"><span class="check"></span></span> {{{x39}}}
-                                </label>
+                            <h4>{{{x37}}}:</h4>
+                            <div class="form-inline" style="width: 100%;">
+                                <div class="list-group condensed">
+                                    <div class="checkbox text-left">
+                                        <label> <input checked class="noprint" value="on" type="checkbox" value="" name="servicosExternos"> {{{x38}}}
+                                        </label>
+                                    </div>
                                 </div>
-                            </div>
-                            <!-- Apenas para a interface google maps
+                                <div class="list-group condensed">
+                                    <div class="checkbox text-left">
+                                        <label> <input class="noprint" value="on" type="checkbox" name="temasMapa"> {{{x39}}}
+                                        </label>
+                                    </div>
+                                </div>
+                                <!-- Apenas para a interface google maps
                             <div class="list-group condensed">
                                 <div class="checkbox text-left">
                                 <label>
@@ -512,49 +569,56 @@ $id_mapa = $_GET["id_mapa"] * 1;
                                 </div>
                             </div>
                              -->
-                        </div>
-                    </form>
-                    <hr>
-                    <div class="i3GEOresultadoBuscaServicos" ></div>
-                    <div class="i3GEOresultadoBuscaTemasMapa" ></div>
-                    <div class="i3GEOresultadoBuscaGoogle" ></div>
-                    <div class="alert alert-info" role="alert">{{{x40}}}</div>
+                            </div>
+                        </form>
+                        <hr>
+                        <div class="i3GEOresultadoBuscaServicos"></div>
+                        <div class="i3GEOresultadoBuscaTemasMapa"></div>
+                        <div class="i3GEOresultadoBuscaGoogle"></div>
+                        <div class="alert alert-info" role="alert">{{{x40}}}</div>
+                    </div>
                 </div>
                 <!-- Ferramentas -->
                 <div data-traduzir="true" id='guia8obj' style='display: none; text-align: left'>
-                    <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');"><span class="pull-left">{{{iconeFerramentas}}}</span> X</div>
+                    <div class="i3GEOfechaGuia" onclick="i3GEO.guias.abreFecha('fecha');">
+                        <button>
+                            <span class="pull-left">{{{iconeFerramentas}}}</span> <span class="pull-right material-icons">cancel</span>
+                        </button>
+                    </div>
                     <div class="separadorCabecalhoGuias">&nbsp;</div>
-                    <div class="form-inline" style="width:100%;">
-                        <div class="text-center form-group" style="margin:4px;">
-                            <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.area();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
-                            <img style="margin-top:4px;" src="../imagens/gisicons/area-measure.png">
-                            </a>
-                            <h6>{{{d21at}}}</h6>
-                        </div>
-                        <div class="text-center form-group" style="margin:4px;">
-                            <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.distancia();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
-                            <img style="margin-top:4px;" src="../imagens/gisicons/length-measure.png">
-                            </a>
-                            <h6>{{{d21t}}}</h6>
-                        </div>
-                        <div class="text-center form-group" style="margin:4px;">
-                            <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.selecao();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
-                            <img style="margin-top:4px;" src="../imagens/gisicons/select.png">
-                            </a>
-                            <h6>{{{d24t}}}</h6>
-                        </div>
-                        <div class="text-center form-group" style="margin:4px;">
-                            <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.geolocal();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
-                            <img style="margin-top:4px;" src="../imagens/gisicons/layer-gps.png">
-                            </a>
-                            <h6>{{{localiza}}}</h6>
+                    <div class="guiaOverflow">
+                        <div class="form-inline" style="width: 100%;">
+                            <div class="text-center form-group" style="margin: 4px;">
+                                <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.area();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
+                                    <img style="margin-top: 4px;" src="../imagens/gisicons/area-measure.png">
+                                </a>
+                                <h6>{{{d21at}}}</h6>
+                            </div>
+                            <div class="text-center form-group" style="margin: 4px;">
+                                <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.analise.dialogo.distancia();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
+                                    <img style="margin-top: 4px;" src="../imagens/gisicons/length-measure.png">
+                                </a>
+                                <h6>{{{d21t}}}</h6>
+                            </div>
+                            <div class="text-center form-group" style="margin: 4px;">
+                                <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.selecao();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
+                                    <img style="margin-top: 4px;" src="../imagens/gisicons/select.png">
+                                </a>
+                                <h6>{{{d24t}}}</h6>
+                            </div>
+                            <div class="text-center form-group" style="margin: 4px;">
+                                <a onclick="i3GEO.guias.abreFecha('fecha');i3GEO.mapa.dialogo.geolocal();" role="button" class="btn btn-success btn-fab btn-fab-max" href="javascript:void(0)">
+                                    <img style="margin-top: 4px;" src="../imagens/gisicons/layer-gps.png">
+                                </a>
+                                <h6>{{{localiza}}}</h6>
+                            </div>
                         </div>
+                        <div class="clearfix"></div>
+                        <hr>
+                        <div id="migalhaFerramentas" data-template="../interface/templates/ferramentasMigalha.html" style='display: block; text-align: left;'></div>
+                        <div id="listaFerramentasLinks" data-template="../interface/templates/ferramentasLink.html" style='display: block; text-align: left'></div>
+                        <div id="listaFerramentas" data-template="../interface/templates/ferramentasFolder.html" style='display: block; text-align: left'></div>
                     </div>
-                    <div class="clearfix"></div>
-                    <hr>
-                    <div id="migalhaFerramentas" data-template="../interface/templates/ferramentasMigalha.html" style='display: block; text-align: left;'></div>
-                    <div id="listaFerramentasLinks" data-template="../interface/templates/ferramentasLink.html" style='display: block; text-align: left'></div>
-                    <div id="listaFerramentas" data-template="../interface/templates/ferramentasFolder.html" style='display: block; text-align: left'></div>
                 </div>
             </div>
         </div>
--
libgit2 0.21.2

