/********************************************************************** reset */

* {
    margin: 0;
    padding: 0;
}

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

/********************************************************************* basics */

body {
    font-family: Verdana;
    font-size: 20px;
    color: black;
    background: #ffe800;
}

#wrapper {
    width: 1200px;                           /* ESTA ES LA ANCHURA DE LA WEB */
    margin: 10px auto 10px auto;
    background: #ffe800;
}

.cel {
    width: 100%;
    display: inline-block; /* Para poder darle un width a un elemento inline, lo que me permite no tener que establecer el height a priori (se adapta al texto) */
}

p {
    text-align:justify;
    margin-bottom:30px;
    line-heigth:110%;
}

/********************************************************************* header */

header {
    width:100%;
    height: 300px;
    background-image: url("../images/thai_bkg_header.jpg");
 
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    border-top-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
}
h1 {
    text-shadow: grey 4px 4px 7px;
}

h1 a:link, a:visited h1 a:hover, a:active {
    font-size:180%;
    font-weight:bold;
    color: white;
    text-decoration:none;
}

h2 {
    font-weight:bold;
    font-size:115%;
}

/************************************************************************ nav */

nav {
    width:100%;
    display: inline-block;
}

nav .bar {
    height: 35px;
    padding-top:10px;
    float:left;
    color:white;
    text-shadow: black 2px 2px 3px;

    background: -moz-linear-gradient(top, #ddd , #aaa);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#ddd),  to(#aaa));
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

nav .menu {
    margin-right:35px;
}

nav .menu li {
    padding-left: 30px;
    display: block;
    float: right;
}

nav a:link, a:visited {
    text-decoration:none;
    color:white;
    font-size:100%;
    font-weight: normal;
    text-shadow: black 2px 2px 3px;
}


nav a:hover, a:active {
    text-decoration:none;
    color:black;
    font-size:100%;
    font-weight: normal;
    text-shadow: white 0px 0px 0px;
}





/******************************************************** cuerpo de la pagina */


#cuerpo {
    margin-left:40px;
    width:1120px;
}

h3 {
    margin: 20px 0 20px 0;
    width:100%;
    text-align:center;
    font-size:280%;
    color: #ffe800;
    text-shadow: black 4px 4px 7px;
}

h4 {
    margin: 60px 0 30px 0;
    font-size:130%;
    font-style: italic;
    width:100%;
    text-align:right;
    border-bottom: solid 1px black;
    display: inline-block;
}

/*  FOTO */

.marco_foto_con_sombra {
    background:white;
    width: 100%;
    -webkit-box-shadow:1px 1px 3px #777;
    -moz-box-shadow:1px 1px 3px #777;    
    display: inline-block;
}
.marco_foto { /*  Para usar con .foto (apariencia Polaroid) */
    background:white;
    width: 100%;
    display: inline-block;
}
.marco_foto a { /*  Para usar con .foto (apariencia Polaroid) */
    background:white;
    width: 100%;
    display: inline-block;
    -webkit-box-shadow:3px 3px 7px #777;
    -moz-box-shadow:3px 3px 7px #777;
}

.foto { /*  Para usar con .marco_foto  */
    background:white;
    width:90%;
    padding:5%;
}
.didascalia_foto { /*  Para usar con .marco_foto  */
    background:white;
    width: 100%;
    display: inline-block;
    margin-bottom:7px;
    text-align:center;
    font-size:80%;
}
.menu {
    -webkit-box-shadow:3px 3px 7px #777;
    -moz-box-shadow:3px 3px 7px #777;
}
.nomsie {
    width:990px;
    margin:0 auto 0 auto;
    text-align:center;
    font-family:arial;
    font-size:14px;
    color:blue;
}
.nomsie a:hover, a:active, a:link, a:visited {
    color:red;
}

/********************************************************************* footer */
footer {
    width:100%;
}

footer .bar {
    margin:50px 0 50px 0;
    height: 35px;
    padding-top:10px;
    color:white;
    text-shadow: black 2px 2px 3px;
    text-align:center;
    background: -moz-linear-gradient(top, #ddd , #aaa);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#ddd),  to(#aaa));
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

footer a:link, a:visited {
    color: white;
    text-decoration:none;
}

footer a:hover, a:active {
    color: black;
    text-shadow: white 0px 0px 0px;
}