body {
   font-family: 'Droid Sans', sans-serif;
   min-width: 319px;
   /* para IE6 */
   width: expression(document.body.clientWidth < 301? "300px": "auto" ); 
}

span.titulomenu {
   display: inline-block;
   font-size: 30px;
   font-weight: bold;
   margin: 10px auto 0;
}

#map{
  display: block;
  margin: 0;
  padding: 0;
  position: absolute; /* posición absoluta a navegador */
  top: 48px;       /* debajo de borde de navegador */
  left: 0;        /* ajusta a borde de navegador */
  right: 0;
  bottom: 0;
  background: rgba(0,255,0,0.5); /* verde si no hay mapa */
}

.piefijo {
  width: auto;
  height: auto;
  color: blue;
  position: fixed; /* Fija el contenedor a una posición */
  bottom: 0;      /* El div se sitúa abajo */
  z-index: -50;  /* Lo muestra por encima de otros div */
  padding: 3px;
  margin: 5px;
}

.clearfix {
clear: both;
}

nav {
background: gradient(linear, center top, center bottom, from(#fff), to(#ccc));
background: -moz-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
background-image: linear-gradient(#fff, #ccc);
box-shadow: 0 0 4px 2px rgba(0,0,0,0.4);
padding: 0 10px;
position: relative;
}
.menu li {
float: right;
position: relative;
z-index: 20;
}
.menu li a {
color: rgb(68, 68, 68);
display: block;
font-size: 18px;
line-height: 10px;
margin-right: 50px;
padding: 14px;
text-decoration: none;
}
.menu li a:hover {
background: -moz-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
background: gradient(linear, center top, center bottom, from(#ededed), to(#fff));
background-image: linear-gradient(#ededed, #fff);
box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.1);
color: #222;
}
[class^="icon-"] {
    padding-right: 10px;
}


/* Dropdown styles */
.menu ul {
display: none;
position: absolute;
left: -9999px;
list-style: none;
opacity: 0;
transition: opacity 1s ease;
}

.menu ul li {
float: none;
}
.menu ul a {
white-space: nowrap;
}
/* Displays the dropdown on hover and moves back into position */
.menu li:hover ul {
display: block;
background: rgba(255,255,255,0.7);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
left: -2px;
opacity: 1;
}


@media screen and (max-width: 500px) {
    span.titulomenu {
     font-size: 16px;
     margin: 14px auto 0;
     }
	.menu li a {
	font-size: 20px;
	margin-right: 35px;
	}
}