/* CSS Document */
/* Hoja estilos */
/* Fichero html asociado: geoOpcM9_arp.html */


/* Inicialización valores */
/*************************************************/

* {    
	margin: 0px;
	padding: 0px;
	border: 0px;
}

/************************************************/


/* css general */
/************************************************/

body{
  font-family: 'Droid Sans', 'Helvetica', Arial, sans-serif;
	font-size: 16px; /* tamaño base de letra para anchos entre 800 px y 1280px */
}

header{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background-color: rgba(255,128,60,0.3);
	height: 50px;
	width: 100%;
	/*display:block;*/
	display:-moz-box;
	display: -webkit-box;       /* Safari */
	display: -webkit-flex;      /* Safari */
	display: -ms-flexbox;
	display: flex;		    /* Hacemos nav contenedor flexible */
	-webkit-flex-direction:row; /* Safari */
	-ms-flex-direction:row;
	/*flex-direction: row;*/    /* Los elementos de nav se alinearán en fila */
	-webkit-flex-wrap: wrap;    /* Safari */
	-ms-flex-wrap:wrap;	    /* IExplorer */
	flex-wrap: wrap;	
	/* justify-content:space-between;*/
}

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

#botones{
	vertical-align: middle;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-size: 1em;
	margin:auto auto;
	text-decoration: none;
	/*text-align:center;*/
}

#reiniciar, #posicion { /* estilos inicial botones reiniciar/posicion */
	display: inline-block;
	border-top: 1px solid #96d1f8;  
	background-color: #65a9d7;
	background-color: #27F;
	padding: 0.4em 0.4em;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
	color: white;
	font-size: 1em;
	text-decoration: none;
	/*vertical-align: middle;*/
	margin-right: 1em;
	margin:0.1em 0.5em;
}

#reiniciar:hover, #posicion:hover { /* estilos al pasar ratón */
	border-top-color: #28597a;
	background-color: #28597a; 
	color: #FFFF00;
}

#reiniciar:active, #posicion:active {
	/*border-top-color: #1b435e;*/
	/*background-color: #1b435e;*/
	background-color: #595901; /*marron*/
}

h1{
	color: blue;
	font-size: 2em;
	text-decoration: none;
	/*padding-left: 15px;*/
	margin:auto auto;
	vertical-align:middle;
	/*text-align:center;*/
}


/* medias para distintos anchos pantallas */
/* *********************************************** */

@media (min-width: 1280px) {
  body { font-size: 18px; } /* tamaño base letra para anchos mayores de 1280px */
}

@media (max-width: 800px) {
  body { font-size: 12px; } /* tamaño base letra para anchos menores de 800px */
}

@media (max-width: 540px) {
  body { font-size: 10px; }  /* tamaño base letra para anchos menores de 540px */
}

/* El tamaño base de letra para anchos entre 800 px y 1280px es de 16 px */