* {
	margin: 0;
	padding: 0;
	font-family: arial;

}	

body {
    /* background-image: url("sunfire.gif"); */
    background-color: #cccccc;
    /* margin-left: auto;
    margin-right: auto; */
    display: box;
  flex-align: center;
  flex-pack: center;
}



.principal {
	width: 70%;  /* 70%; ok */
 	max-width: 1000px; /*  max-width: 1000px; */  /* con max-width: 800px; se centra a la imagen */
	margin-left: auto;
    margin-right: auto;
	/* margin: 0 auto;  */
	overflow: hidden;
}

.main {
	/* background: #E0FFFF; /* 70DBFF; /* 00CED1; /* #b3dced; #fff; */ 
	background-image: url("../images-temas2/temaslimpios-body.png");
	/* height: 164px;  /* auto; */
    width: 100%;  /* agregado despues de estilo 4,5 */
	max-width: 800px;  /* max-width: 800px; porque es 164x800 -- se puede usar 1000px; para todo el extension */
	/* width: 100%;   */
	/* margin: 20px 0; */    
	padding: 40px;  
	box-sizing:border-box; 
	margin-left: auto;   /* con este y el siguiente centra */
    margin-right: auto;  /* con este y el de arriba centra */
}

.center1 {
    margin-left: auto;
    margin-right: auto;
    /* width: 70%; */
    background-color: #b0e0e6;
}

.center2 {
    margin-left: auto;
    margin-right: auto;
    /* width: 70%; */
    background-color: #b0e0e6;
    text-align: center;
}

.center3 {
    margin-left: auto;
    margin-right: auto;
    /* width: 70%; */
    text-align: center;
}
.aligncenter {
      display: -webkit-box;
      display: -moz-box;
      display: box;
      -webkit-box-align: center;
      -moz-box-align: center;
      flex-align: center;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      flex-pack: center;
}

.centrado {
	text-align: center;
}

.arriba {
	background: #E0FFFF; /* 70DBFF; /* 00CED1; /* #b3dced; #fff; */ 
	background-image: url("../images-temas2/temaslimpios-header.png");
	height: 164px;  /* auto; */ /* original: height: 164px; */
	max-width: 800px;
}

h1 {
    letter-spacing: -1;
	font-family: Tahoma, Verdana, Arial, serif;
	font-size:30pt;
	font-weight:bold;
	text-align:center;
	color:#ce0000;
}

h2 {
    letter-spacing: -1;
	font-size: 24pt;
	font-weight: bold;
	color: #ce0000; /* #222222; */
    font-family: Tahoma, Verdana, Arial, serif;
}


h3 {
	letter-spacing: -1;
	font-size: 18pt;
	font-weight: bold;
	color: #222222;
    font-family: Tahoma, Verdana, Arial, serif;
}

h4 {
	letter-spacing: -1;
	font-size: 18pt;
	font-weight: bold;
	color: #ce0000;
    font-family: Tahoma, Verdana, Arial, serif;
}

h5 {
	font-size: 14px;
	color: #222222;
    font-family: Georgia, serif;
    font-style: italic;
}



/* <table width="800" border="0" cellspacing="0" cellpadding="0" background="images-temas/temaslimpios-header.png" height="164"> */
header {
	background: #E0FFFF; /* 70DBFF; /* 00CED1; /* #b3dced; #fff; */ 
	background-image: url("../images-temas2/temaslimpios-header.png");
	height: auto;  /* auto; */  /* original: height: 164px; */
	max-width: 800px;  /* max-width: 800px; porque es 164x800 -- se puede usar 1000px; para todo el extension */
	/* width: 100%;  
	max-width: 1000px;
	margin: 20px 0;    
	padding: 20px;    */
}

/* <img class="central" src="models/modelt2/images-temas2/temaslimpios-headerbelow.png" alt="" height="25" width="800" border="0" />	 */

img.central {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 0px;
}


header nav {
	background: #528fd5;
	overflow: hidden;

}

header nav ul {
	list-style: none;

}

header nav ul li {
	float: left;
}

header nav ul li a {
	padding: 10px 20px;
	display: block;
	color: #fff;
	text-decoration: none;

}

header nav ul li a:hover {
	background: #75acec;

}
  

header img {
	width: 100%;  
	height: auto;
} 

/* experimental nav - borrar - comienza */

nav {
	background: #528fd5;
	/* background-image: url("../images-temas2/temaslimpios-header.png"); */
	max-width: 800px;
	overflow: hidden;
	margin-left: auto;   /* con este y el siguiente centra */
    margin-right: auto;  /* con este y el de arriba centra */

}

nav ul {
	list-style: none;

}

nav ul li {
	float: left;
}

nav ul li a {
	padding: 10px 20px;
	display: block;
	color: #fff;
	text-decoration: none;

}

nav ul li a:hover {
	background: #ff0000;   /* #75acec; */

}
/* experimental nav - borrar - finaliza  */

article {
	/* background: #ccffff; */
	margin: 20px;
	
}


.blanco {
	color: white;
}


/* <table width="800" border="0" cellspacing="0" cellpadding="0" background="images-temas/temaslimpios-footer.png" height="52">
 */
footer {
	background: #000; /* fd5000;  /* #acbbcc; */
	/* background-image: url("../images-temas2/temaslimpios-footer.png"); */
	/* height: 52px;  */
	color: #fff;
	max-width: 800px;
	/* color: #fff;
	clear: both;
	padding: 10px 0px;
	text-align: center; */
}

footer a {
	color: #fff;
	text-decoration: none;
	/* word-spacing: 5px; */
	padding: 10px;
}


footer a:hover {
	/* background: #75acec; */
	color: #ff0000; /* #0000ff; */
}




@media  screen and (max-width: 800px) {
	.main {
		width: 100%;
	}

	.main img {
	width: 100%;
	height: auto;
}

	img {
	width: 100%;
	height: auto;
}
	
	.principal {
		width: 100%;

	}

	table {
		width: 90%;
	}

	

	
}

@media  screen and (max-width: 400px) {

	.principal {
		width: 100%;

	}

	article {
		width: 100%;

	}

	img {
	width: 100%;
	height: auto;
}
	table {
		width: 100%;
	}




}