/* reglas para trabajar con CSS


1) primero se definen los estilos para ETIQUETAS html, por ejemplo: header, footer, div, a, p, etc.

2) despues se definen los estilos para IDENTIFICADORES id que son elementos unicos en el html, en el CSS se declara con el simbolo de # ejemplo: #nombre-id { estilos} y en el html se llaman mediante el atributo id ejemplo: <div id="julieta"> </div>

3)al final se definen los estilos para las CLASES (class) las clases son elementos que se pueden repetir n veces en el html, en el css se declaran con el sìmbolo . ejemplo: .nombre-clase {estilos} y en el html se llaman mediante el atributo class, ejemplo: <div class="borde-logo"> </div>

4) todos los estilos se ordenan conforme van apareciendo en la disposición del html, teniendo en cuenta la prioridad anterior, es deccir: primero etiquetas html, luego id y al final class. 

5) los atributos se declaran de la siguiente forma: {atributo1:atributo1; atributo2:atriuto2; ... atributoN:valorN}

6) todos los atributos se ordenan alfabeticamente

7) si tenemos estilos para las etiquetas el comodin *, o para las etiquetas html y/o body, estos estilos son los primeros en definirse.

8) en el body debemos declarar un tamaño de fuente global 

9) si tenemos estilos para recetear elementos html, estos irán antes de cualquier estilo. 
*/


@charset "utf-8";
/*css document*/
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
/* reseteo */
*{
    border: 0;
    padding: 0;
}

article, footer, header, nav, section {
    display: block;
}



/* estilos */

body{
    background-color: azure;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1em;
    }


/*#pixeles {
    background-color: black;
    width: 960px;
    margin: auto;
}*/

a {
    color: deeppink;
    font-style: italic;
    text-decoration: none;
    
    }

/*header*/


header {
    background-color: aliceblue;
    margin: auto;
    text-align: right;
    overflow: auto;
    padding: 1.5% 6% 3% 0;
    overfloat:auto;
    }

header img {
    float: left;
    width: 11%;
    border-radius: 5em;
    border: none;
    margin-left: 2%;
    }

h1 {
    float: left;
    margin: 7% 0 0 1%;
    color: darkturquoise;
    }
#p {
    text-align: left;
    font-size: 0.35em;
    color: dimgrey;
    font-weight: 100;
}



nav ul{
    list-style: none;
    margin top: 20%;
    float: right;
    margin-top: 6.8%;
    }

nav li{
    display: inline-block;
    padding: 0.1em;
    vertical-align: top;
   
    }

li a:hover{
    color: azure;
}

nav li:hover{
    display: inline-block;
    padding: 0.1em;
    vertical-align: top;
    background-color: rgba(95,117,118, 0.3);
    border-radius: 10%;
    
    
    }

nav a{
    display: block;
    font-size: 1,4em;
    padding: 0.5em;
    }

/*cuerpo*/


main{
    background-color: aliceblue;
	
    max-width: 100%;
    
    }

main img{
    max-width: 100%;
    }

/*main p {
    font-size: .75em;
    color: darkslategray;
    }*/

h2{
    text-align: left;
    font-size: 1em;
    padding: 1%;
}

main {
    /*background-color: cornsilk;*/
}

#centrado {
    width: 960px;
    margin: 0 auto;
    overflow: auto;
    padding-top: 1%;
    
}

section {
    /*background-color: cornsilk;*/
    max-width: 100%;
    box-sizing: border-box;
    padding: inherit;
    text-align: center;
    margin: auto 0;
    overfloat: auto;
}

article {
    max-width: 30%;
    display: inline-block;
    /*margin: 0 10% 10% 0;*/
    padding: 5% 10%;
    float: left;
}

p {
    font-size: 0.75em;
    text-align: left;
}

.italica {
    font-style: italic;
    font-size: 0.7em;
    font-family: "georgia", serif;
}

footer {
    text-align: center;
    font-size: 0.7em;
}


.especial{
    border: solid lightblue 0.1em;
    width: 17%;
    height: 310px;
    margin-left: 5%;
    margin-top: 2%;
    text-align: left
}

h3{
   font-size: 1.5em;
    text-align: center
}

h4{
    margin-bottom: -5%;
}






























/*
#contenedor {
    background-color: cornsilk;
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1%;
            
    }


.portfolio {
    background-color: floralwhite;
    display: inline-block;
   
    max-width: 19%;
    padding: 1em;
    margin: 5%;
    
    font-size: 0.7em;
    box-sizing: border-box;
    
    }

*/
/*#articulos {
    background-color: black;
    margin: auto;
}*/
/* còmo hhacer para que me ocupe todo el ancho de la pantalla??*/ 

/*#p2 {
    background-color: floralwhite;
    display: inline-block;
    margin: 10px;
    max-width: 10%;
    padding: 1em;
    text-align: left;
    font-size: 0.7em;
    }

#p3 {
    background-color: floralwhite;
    display: inline-block;
    margin: 10px;
    max-width: 10%;
    padding: 1em;
    text-align: left;
    font-size: 0.7em;
    }

#p4 {
    background-color: floralwhite;
    display: inline-block;
    margin: 10px;
    max-width: 10%;
    padding: 1em;
    text-align: left;
    font-size: 0.7em;
    }

#p5 {
    background-color: floralwhite;
    display: inline-block;
    margin: 10px;
    max-width: 10%;
    padding: 1em;
    text-align: left;
    font-size: 0.7em;
    }

#p6 {
    background-color: floralwhite;
    display: inline-block;
    margin: 10px;
    max-width: 10%;
    padding: 1em;
    text-align: left;
    font-size: 0.7em;
    }*/
/* còmo hacer para que me queden todos alineados en la parte de arriba??? */


/*footer {
	padding:2rem 2rem;
    text-align: center;
    font-size: 0.8em;
    /*por què se le pongo "font-size: 0.7" y "text-align: center" no me pone el texto centrado y me lo pone hacia la derecha??*/
    }*/



















/* body {
    display: block;
    margin: 0 auto;
    max-width: 90%;
    text-align: center;
    
} 

body {
    font-family: sans-serif;
    font-size: 12px;
}

a{
    color: deeppink;
    text-decoration: none;
}

a:hover { 
    color: lightgreen;
}

img {
    max-width: 15%
}

h1 {
    font-weight: 300;
    color: #8ADDF7;
}

header, nav {
    display: inline-block;
    vertical-align: top;
}

nav ul {
    list-style: none;
}

nav li { 
    display: block;
    padding: 0.1em;
    vertical-align: middle;
} 
*/