body, html {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background: #CFC;
}
/* ESTRUCTURA DE LA PAGINA */
body {
display: -webkit-flex;
display: flex;
flex-flow: column;
}
body>header {
flex: 1 1 10%;
order: 1;
background: #FC6;
}
body>div#main {
flex: 1 1 85%;
order: 2;
}
body>footer{
flex: 1 1 5%;
order: 3;
background: #FC6;
}
/* Herramiento para el manejo de los div */
.clear {
clear: both;
}
/* CABECERA Y PIE */
body>header {
border-bottom: 2px solid;
border-bottom-left-radius: 50% 20%;
border-bottom-right-radius: 50% 20%;
}
body>footer {
border-top: 2px solid;
}
#header {
margin: 0px;
padding: 10px;
text-align: center;
}
/* CUERPO / MAIN */
/* Defino de esta forma main y main section por si fuera necesario agregar un nav y/o un aside */
#main {
width: 100%;
height: 90%;
display: -webkit-flex;
display: flex;
flex-flow: row;
}
#main section {
flex: 1 1 100%;
order: 0;
}
article {
margin: 5px;
border: 1px solid #000;
padding: 5px;
background: #CC4444;
}
h1.nombre {
margin-left: 30px;
}
article {
float: left;
}
#caja1 img {
float: left;
margin: 5px;
border: 1px solid;
padding: 0px;
}
#caja1 p {
margin: 5px;
}
#caja2 {
text-align: center;
}
#caja2 p {
margin: 5px;
font-weight: bold;
font-size: 2rem;
}
.foto img {
margin: 5px;
border: 1px solid;
padding: 0px;
max-height: 200px;
max-width: 200px;
}