html { height: 100%; }
body { height: 100%; margin: 0; padding: 0; background-image: none; }

#titulo{ position: absolute; top: 0; left: 220px; text-align: center; font-size: 20px; z-index: 5; padding: 10px;  background: rgba(255, 255, 255, 0.5); border-radius: 0 0 20px 20px; }
#titulo small{ font-size: 0.6em; }

#mapa { 
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin: 0;
  margin-left: 100px;
  margin-right: 300px;
}

#menu_botones{ display: block; position: absolute; top: 0; left: 0; height: 35px; width: 100px; border-bottom: 2px solid #CCC; }

#contenedor_menu_grupos{ display: block; position: absolute; height:auto; bottom: 0; top: 35px; left: 0; width: 100px; overflow-y: auto; overflow-x: hidden; }
#contenedor_menu_grupos ul.grupos{ list-style: none; margin: 10px 0; padding: 0; text-align: center; }
#contenedor_menu_grupos ul.grupos li { border-bottom: 5px solid #DDD; padding: 3px 0 2px 0; cursor: pointer; margin: 2px; text-decoration: none; color: #666; text-align: center; }
#contenedor_menu_grupos ul.grupos li:hover { border-bottom-color: #999; }
#contenedor_menu_grupos ul.grupos li.activo{ border-bottom-color: #0080FF !important; color: #000; }
#contenedor_menu_grupos ul.grupos li.activo span.badge { background-color: #0080FF; }

#contenedor_grupos{ display: block; position:absolute; height:auto; bottom:0; top:0; right:0; margin: 0; width: 300px; overflow-x: auto; padding-left: 5px; }
#contenedor_grupos ul{ padding-left: 15px; }
#contenedor_grupos ul li:nth-child(2n+1){ background-color: #d9edf7; }

#boton_flotante{ background-color: #FFF; position: absolute; right: 300px; top: 30px; z-index: 100; padding: 0 8px; border-radius: 10px 0 0 10px; text-align: center; transition: width 200ms; }