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


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

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


/* 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 header flexible */
	-webkit-flex-direction:row;  	/* Safari */
	-ms-flex-direction:row;
	flex-direction: row;   		/* Los elementos de header 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 */
}


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


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


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

#modoviaje .tipo {
	background-color:#5E5E2F;
}


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

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


/* 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: 860px) {
	body { font-size: 12px; } /* tamaño base letra para anchos menores de 800px */
}

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

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

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