/* === IMPORTANTE ===================================================
  No modificar estos estilos, ya que son imprescindibles para
  que la página se vea correctamente.
  ================================================================== */

/*-- Básico ----------------------------------------------------------*/
ul,
ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1,
h2,
h3,
p,
form {
    margin: 0;
    padding: 0;
}

.clear {
    clear: both;
}

img {
    border: none;
}

/*-- Layout ----------------------------------------------------------*/
#contenedor {
    width: 90%;
    max-width: 900px;
    width: 900px;
    margin: 0 auto;
}

#cabecera,
#menu,
#lateral,
#contenido,
#contenido #principal,
#contenido #secundario,
#pie {
    border: 2px solid #777;
}

#cabecera {
    clear: both;
}

#menu {
    clear: both;
}

#lateral {
    float: left;
    width: 20%;
}

#contenido {
    float: right;
    width: 78%;
}

#contenido #principal {
    float: left;
    width: 70%;
}

#contenido #secundario {
    float: right;
    width: 20%;
}

#pie {
    clear: both;
}

/*-- Cabecera --------------------------------------------------------*/
#cabecera #logo {
    float: left;
}

#cabecera #buscador {
    float: right;
}

/*-- Menu ------------------------------------------------------------*/
#menu ul#menu_principal li {
    display: inline;
    float: left;
}

/*-- Sección Principal -----------------------------------------------*/
#contenido #principal .articulo img {
    width: 100px;
    float: left;
}

/*-- Pie de página ---------------------------------------------------*/
#pie .enlaces {
    float: left;
}

#pie .copyright {
    float: right;
}

/* === IMPORTANTE ===================================================
  A partir de aquí, se pueden añadir todos los estilos propios que
  sean necesarios.
  ================================================================== */

#cabecera {
    padding: 1em;
}

#menu {
    padding: 0.5em;
    margin-bottom: 0.5em;
}

#noticias,
#publicidad,
#principal,
#secundario {
    padding: 0.5em;
}

#pie {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-top: 1em;
}

.articulo {
    margin-bottom: 1em;
}

.articulo img {
    margin: 0.5em;
}

#publicidad {
    margin-top: 1em;
}