* {
	margin:0;
	padding:0;
}
body {
	background:#ffffff;
	font-family:Arial;
}
aside {
	width:20%;
	background:#ccc;
	padding:1px;
	float: left;
	box-sizing:border-box;
}
asideright {
	width:17%;
	background:#f2f2f2;
	padding:5px;
	float: left;
	box-sizing:border-box;
}
.textGrafica {
  display: inline-block;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 13px;
  padding: 1px 1px;
  background: #003F8E;
}
.textGraficaCenter {
  display: inline-block;
  font-size: 18px;
  color: #000;
  line-height: 22px;
  padding: 1px 1px;
  background: #CCCCCC;
}
.textTableCenter {
  display: inline-block;
  font-size: 16px;
  color: #000;
  line-height: 22px;
  padding: 1px 1px;
  background: #F7F7F7;
}
.textTableCentered {
  display: inline-block;
  font-size: 14px;
  color: #000;
  line-height: 18px;
  padding: 1px 1px;
  background: #FFF;
}
.textGraphCenter {
  display: inline-block;
  font-size: 18px;
  color: #fff;
  line-height: 22px;
  padding: 1px 1px;
  background: #FFF;
}
footer {
	clear:both;
	float: left;
	margin-top:20px;
	box-sizing:border-box;
	width:100%;
	padding:20px;
	background:#fff;
}



/* al llegar al tamaño de 800px se baja el sidebar y los dos ocupan un tamaño del 100% */
@media screen and (max-width: 1920px){
	.main {
		width:100%;
	}
	aside {
		width:100%;	
	}
	asideright {
		width:100%;	
	}
}

/* al llegar al tamaño de los 400px el contenedor obtiene el tamaño del 100% */
@media screen and (max-width: 400px){
	.contenedor {
		width:100%;
	}
  /* al llegar al tamaño de 800px oculta bloque
	aside {
		display:none;	
	}
 */
}

/* cuando el tamaño de la ventana sea screen y un mázimo de 800px se cambia de color del fondo se puede aplicar a cualquier cosa
@media screen and (max-width: 800px){
	body {
		background:#ff8000;
		width:100%;
	}
}
 */