/* === 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;
   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: 78%;
}

#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,
#menu,
#lateral,
#lateral #noticias,
#lateral #publicidad,
#contenido,
#contenido #principal,
#contenido #secundario,
#pie {
   padding: .5em;
   border: none;
}

#lateral {
   padding: 0;
}

#cabecera {
   padding: 1em;
}

#cabecera h1 {
   background: url(../../img/logo.gif) no-repeat -5px -10px;
   width: 180px;
}

#cabecera h1 span {
   visibility: hidden;
}

#menu {
   margin-bottom: .5em;
   border-bottom: 1px solid #004C99;
   background: url(../../img/fondo_menu.gif) repeat-x;
}

#contenido {
   width: 77%;
   padding: 0;
}

#contenido #principal {
   width: 73%;
}

#contenido #secundario {
   border: 1px solid #C60;
}

#contenido #secundario h2 {
   background: #DB905C;
   padding: .2em;
}

#pie {
   padding: .5em 0;
   margin-top: 1em;
   border-top: 1px solid #C5C5C5;
   border-bottom: 1px solid #C5C5C5;
   background: #F8F8F8;
}

#contenido #principal .articulo {
   margin-bottom: 1em;
}

#contenido #principal .articulo img {
   margin: .5em;
}

#lateral #noticias {
   border: 1px solid #C5C5C5;
   background: #F8F8F8;
}

#lateral #publicidad {
   margin-top: 1em;
   border: 1px dashed #C60;
   background: #FFF6CD;
}