/* Start of CMSMS style sheet 'portada' */
/****************************/
/* PORTADA FUENTE CARRETEROS   */
/***************************/

/***** Diseño dado por el .psd a 950px    ********/

/*
   Hemos incluido para la plantilla portada reset.css y comun.css, de ellos coge lo correspondiente
    y aquí modificaremos para portada
*/


/************
No machacamos el body de comun. Por tanto letra Arial 12px verde.
body {   }
************/

/***********************************************************************
        DISEÑO PANTALLA - ANCHURAS-ALTURAS DIV - BORDES-COLOR RELLENO
 ***********************************************************************/

/***********************************************************************/
/*                     SOBREESCRIBIMOS VARIACIOENES SOBRE COMUN.CSS                              */

h3{
 background:#fff;
 border:none; /*Eliminamos bordes de h3 (puestos en comun) pues el text-indent no lo elimina */
}

/* Nota:ponemos #contenedor delante pues sino toma el #contenidomenuprincipal de comun.css */
#contenedor #contenidomenuprincipal{
    height:22px; /*En comun.css es 28px para dar sitio al .activo */

}

#contenedor ul#menuprincipal{
    height:22px; /*En comun.css es 28px para dar sitio al .activo */
}

/*Común a todos los li*/
#contenedor ul#menuprincipal li{
    height:22px; /*En comun.css es 28px para dar sitio al .activo */
}

/***********************************************************************/


/*DISEÑO PORTADA */


/* CONTENEDOR ya definido en comun #contenedor{} */
#contenidoportada {
    clear:both;
    width:950px;    
    overflow:hidden;
    background:#fff
}

/****** ESCAPARATE IZQUIERDO **************************************************/
#escaparate-izquierdo {
 float:left;
 overflow:hidden;
 width:314px;

 /*Márgenes*/
 /*Separación escaparate central */
 margin-right:4px;
}


/****** ENLACES NFORMACIÓN MUNICIPAL,MUNICIPO.OFICINA VIRTUAL ***********/
/*Nota: Ocupan respectivamente la parte superior de EI,EC,ED */
#e-info-municipal, #e-municipio, #e-oficina-virtual {
   float:left;
   width:312px;  /*+2 border */
   height:108px; /*Fijo por si ponen enlaces de más de 1 línea que estén todos con la misma altura */
   overflow:hidden;
   background:#fff;

  /*Para acomodar abajo el <ver todo>, dejando un margen bajo él */
  padding-bottom:5px;

  /*Margen para siguiente apartado*/
  margin-bottom:25px;
  
  border:1px solid #00996a;
}

#e-info-municipal ul, #e-municipio ul, #e-oficina-virtual ul {
  /*Separamos la imagen que hace de h3 del ul y establecemos margen-izquierdo*/
   overflow:hidden;
   height:108px; /*Fijo por si ponen enlaces de más de 1 línea que estén todos con la misma altura */
   padding: 1em 0 1em 1em;
}

#e-info-municipal ul li, #e-municipio ul li, #e-oficina-virtual ul li {
   float:left;
   overflow:hidden;
   width:144px;
   height:30px; /*Fijo por si ponen enlaces de más de 1 línea que estén todos con la misma altura */

  /*Como estos apartados deben ser de altura fija, mejor ponerle la altura a los elementos con height
   que dejar el diseño que crezca -sin height-. Además así, no usamos margin-bottom para separar 
   los <li> y no hay problemas en IE6*/
 
 }

/*hack IE6 */
*html #e-info-municipal ul li, *html #e-municipio ul li, #e-oficina-virtual ul li {
   margin-bottom:0px;
}

#e-info-municipal ul li a, #e-municipio ul li a, #e-oficina-virtual ul li a {
 /*hereda el texto del body:*/
  color:#00996a;
  font-size:1em;
  line-height:1.3em;
}

#e-info-municipal ul li a:hover, #e-municipio ul li a:hover, #e-oficina-virtual ul li a:hover {
 background-color:#eff8f5;
 color:#003f28;
}

/*** NOTICIAS PORTADA **********/

#noticias-h3{

  /*Tamaño imagen h3*/
  width:292px;
  height:28px;

  /*Texto: Verdana 10px */
  text-indent:-2000em; /*Es una imagen */

  /*Sin márgenes*/
  margin:0;

 /*Background del h3*/
  background: transparent url('/uploads/fuente-carreteros/noticias-h3.gif') no-repeat left top;
}


#noticias-portada {
   width:314px;
   float:left;
   overflow:hidden;

  /*Color fondo*/
  background: #fff;

  /*Para separar el siguiente elemento de la columna. Se pone aquí, en el <div> contenedor*/
   margin-bottom:1em;

 /*Para acomodar abajo el <ver todo>, dejando un margen bajo él */
 padding-bottom:5px;

  /*Sombra-baja: 321x28*/
  background: transparent url('/uploads/fuente-carreteros/ei-sombra-baja.gif') no-repeat right bottom;

 margin-bottom:16px;

}

#noticias-portada ul{
   overflow:hidden;
 /*sin width limitado según nº caracteres en la plantilla */
  width:310px; 

 /*Sin height, por si pone titulos de noticias largos, no se solapen */
 /* height:200px;*/

  margin:0px
  margin-bottom:5px;

  /*Separamos la imagen que hace de h3 del ul y establecemos margen-izquierdo*/
  /*padding-top:1em;*/
  padding-left:5px
}

#noticias-portada ul li{
   width:295px;
   overflow:hidden;
  /*Sin height, por si pone titulos de noticias largos, no se solapen */
   margin-bottom:12px;
   margin-left:0.3em;
 }

#noticias-portada h4{
   text-decoration:none;
   width:292px;
   margin:0em;
   margin-bottom:0.1em;
   padding-left:0.1em;
   text-align:left;
   overflow:hidden;
}

/*Fecha noticia dentro del h4*/
#noticias-portada h4 span {
  font-size:0.95em;
  line-height:1.25em;
  float:right;
  width:85px; /* para que no se pegue el título de la noticia a la fecha */
  text-align:right;
}

/*texto encabezado noticia dentro del h4*/
#noticias-portada li a{
     /*Texto: En los <a> siempre hay que ponerlos */
/*
     font-family:Verdana,Trebuchet MS,Arial,times New Roman,sans-serif;
     Arial lo recoge del body.
*/
/*     float:left; */
     font-size:1em;
     font-weight:bold;
     font-style:normal;
     line-height: 1.2em;
     color:#00996a;
     text-decoration:none;
  
    /* Separamos de la izqa. */
    padding-left:0.2em;
}


/*El mismo que en los items del menu-secundario de css-comun */
/*  Idem al enlace general <a>*/
#noticias-portada li a:hover{
  color:#ff0000; 
}

#noticias-portada img{
  float:left;
  text-align:center; /*Centrar la img */
  max-width:71px;
  max-height:53px;
  border:1px solid #0f9f73;

  /*Separamos la imagen del <div> de texto resumen de la noticia. */
  margin-right:.8em; 
}

/*Hacks IE6 IE7 para max-width, max-height */
* html #noticias-portada img {
      width: expression(this.width > 71? "71px":this.width);
}
* html #noticias-portada img {
      height: expression(this.height> 53? "53px":this.height);
}

/*Texto resumen*/
#noticias-portada ul li div{
   /*Texto heredado del body, tamaño, color, etc...*/
   color:#00996a;
   /*No ponemos width-height para que flote alrededor de la imagen */
}

#noticias-portada .vertodo a{
    display:block;
   /*Texto heredado del body, tamaño,*/
   color:#00996a;
    width:95%; /*aquí si va el 96% */
    text-align:right;
}

#noticias-portada .vertodo a:hover {
  color:#ff0000; /*El mismo que en los items del menu-secundario de css-comun */
}

/******** EL TIEMPO **************************************/
#el-tiempo {
  float:left;
  width:314px;
  overflow:hidden;
  background:#fff;

  /*Sombra-baja*/
  padding-bottom:10px;
  background: transparent url('/uploads/fuente-carreteros/ei-sombra-baja.gif') no-repeat right bottom;

  /*Margen para siguiente apartado*/
  margin-bottom:9px;

}

#el-tiempo h3 {
  /*Tamaño imagen h3*/
  width:221px;
  height:28px;

  /*Texto: Verdana 10px */
  text-indent:-2000em; /*Es una imagen */

  /*Sin márgenes*/
  margin:0;
  padding:0;
 /*Background del h3*/
  background: transparent url('/uploads/fuente-carreteros/el-tiempo-h3.gif') no-repeat left top;
}
#situa-tiempo {
  margin: 0px 0 0 20px;
}



/****** ESCAPARATE CENTRAL**************************************************/
#escaparate-central{
 float:left;
 overflow:hidden;
 width:314px;

 /*Separación escaparate derecho*/
 margin-right:4px;
}


/*Enlaces MUNICIPO ya puesto al ser común en enlaces EI */


/***** ENLACE A DANZA DE LOS LOCOS ****************/
#enlace-danza-locos {
    float:left;
    width:312px;
    height:110px; /*135*/
    background: transparent url('/uploads/fuente-carreteros/danza-locos-s.jpg') no-repeat left top;
    border:1px solid #00996a;

   /*Para separar el siguiente elemento de la columna. Se pone aquí, en el <div> contenedor*/
   margin-bottom:12px;

}

#enlace-danza-locos a {
    float:left;
    width:312px;
    height:110px;
    text-indent:-5000em;
}


/***** ENLACE REVISTA 7 DE MARZO ****************/
#enlace-7-marzo {
    float:left;
    width:312px;
    height:110px;
    background: transparent url('/uploads/fuente-carreteros/7-marzo-s.jpg') no-repeat left top;
    border:1px solid #00996a;

   /*Para separar el siguiente elemento de la columna. Se pone aquí, en el <div> contenedor*/
   margin-bottom:12px;

}

#enlace-7-marzo a {
    float:left;
    width:312px;
    height:110px;
    text-indent:-5000em;
}

/***** ENLACE BIBLIOTECA PÚBLICA ****************/
#enlace-biblio {
    float:left;
    width:312px;
    height:110px;
    background: transparent url('/uploads/fuente-carreteros/biblio-publica-s.jpg') no-repeat left top;
    border:1px solid #00996a;

   /*Para separar el siguiente elemento de la columna. Se pone aquí, en el <div> contenedor*/
   margin-bottom:12px;

}

#enlace-biblio a {
    float:left;
    width:312px;
    height:135px;
    height:110px;
    text-indent:-5000em;
}


/***** ENLACE A BLAS INFANTE ****************/
#enlace-blas-infante {
    float:left;
    width:312px;
    height:110px;
    background: transparent url('/uploads/fuente-carreteros/ceip-blas-infante-s.jpg') no-repeat left top;
    border:1px solid #00996a;

   /*Para separar el siguiente elemento de la columna. Se pone aquí, en el <div> contenedor*/   
   margin-bottom:12px;
   

}

#enlace-blas-infante a {
    float:left;
    width:312px;
    height:135px;
    height:110px;
    text-indent:-5000em;
}

/***** ENLACE CITA MEDICA ****************/
#enlace-cita-medico {
    float:left;
    width:312px;
    height:110px;
    background: transparent url('/uploads/fuente-carreteros/cita-medico-s.jpg') no-repeat left top;
    border:1px solid #00996a;

   /*Para separar el siguiente elemento de la columna. Se pone aquí, en el <div> contenedor*/   
   margin-bottom:12px;

}

#enlace-cita-medico a {
    float:left;
    width:312px;
    height:110px;
    text-indent:-5000em;
}


/****** ESCAPARATE DERECHO**************************************************/
#escaparate-derecho{
 float:left;
 overflow:hidden;
 width:314px;
}


/***** INFORMACIÓN ÚTIL *******************/

#info-util {
   float:left;
   width:314px; 
   height:210px;
   overflow:hidden;
   background:#fff;

  /*Para acomodar abajo el <ver todo>, dejando un margen bajo él */
  padding-bottom:5px;

  /*Sombra-baja*/
  background: transparent url('/uploads/fuente-carreteros/ei-sombra-baja.gif') no-repeat right bottom;

  /*Margen para siguiente apartado*/
  margin-bottom:25px;
}

#info-util h3{
  /*Tamaño imagen h3*/
  width:292px;
  height:28px;

  /*Texto: Verdana 10px */
  text-indent:-2000em; /*Es una imagen */

  /*Sin márgenes*/
  margin:0;

 /*Background del h3*/
  background: transparent url('/uploads/fuente-carreteros/info-util-h3.gif') no-repeat left top;
}

#info-util ul{
  /*Separamos la imagen que hace de h3 del ul y establecemos margen-izquierdo*/
   height:162px;
   oveflow:hidden;
   padding-top:10px;
   padding-left:1em;
}

#info-util ul li{
   display:block;
   height: 21px;
 
  overflow:hidden;
   margin-bottom:6px;

  /*Metemos el li.gif*/
  padding-left:20px;
  background: transparent url(/uploads/fuente-carreteros/li.gif) no-repeat left 3px;

 }

#info-util ul li a {
 /*hereda el texto del body:*/
  color:#00996a;
  font-size:1.1em;
  line-height:1.3em;
}

#info-util ul li a:hover {
 background-color:#eff8f5;
 color:#003f28;
}

/**********  GALERIA-PORTADA **********/

#galeria-h3{

  /*Tamaño imagen h3*/
  width:302px;
  height:28px;

  /*Texto: Verdana 10px */
  text-indent:-2000em; /*Es una imagen */

  /*Sin márgenes*/
  margin:0;

 /*Background del h3*/
  background: transparent url('/uploads/fuente-carreteros/galeria-h3.gif') no-repeat left top;
}

#galeria-portada{
   width:314px;
   height:332px; /*fijo para que los COLABORADORES queden bajo el pliegue*/
   float:left;
   overflow:hidden;
   background:#fff;

  /*Para acomodar abajo el <ver todo>, dejando un margen bajo él */
  padding-bottom:5px;

  /*Sombra-baja: 321x28*/
  background: transparent url('/uploads/fuente-carreteros/ei-sombra-baja.gif') no-repeat right bottom;

 margin-bottom:20px;
}

#galeria {
  float:left;
  height:332px;
  overflow:hidden;

/*especificar width para IE6, sino no se ve la sombra-baja  puesta en el apartado anterior y es porque
  este hijo <galeria> no toma width */
  width:314px;  /*idem galeria-portada*/

}

#galeria-portada ul{
  /*Sin height*/
  padding-top:2em;
  height:287px;
  overflow:hidden;
  margin-left:25px;
}

/*******************************************
 Estilos generados automaticamente por PORTAL en [.thumb]
.thumb {
float:left;
line-height:normal;
list-style-type:none;
margin:0 0.5em 0.5em 0;          ANULAR LOS QUE NO SIRVAN
padding:0;
text-align:center;
text-decoration:none;
width:150px;
}
***********************************************/

#galeria-portada ul li.thumb {
    clear:none;
    float:left;
    overflow:hidden;
    min-height:69px;

  /*Anulamos algunos */
  width:104px;
  margin:0 36px 36px 0;
}

/***********/
/*Hack IE6   */
/**********/
* html #galeria-portada li.thumb {
  height:69px; /*min-height, es height en IE6 */
/*  margin-bottom:18px; problema doble margen */
}

#galeria-portada li.thumb a{
  display:block;
  font-size:0.8em;
  text-align:center;

  /*Anulamos estilos del [.thumb a]  generado automaticamente por portal (no nosotros) 
   que pone width=100, height=72, border 1px 2px 2px 1px, padding,margin*/
  border:none;
  width:104px;
  height:69px;
  padding:0;
}

#galeria-portada li  img{
    max-width:none;
    height:67px;
    /*Centrar imagen en el li */
    margin:0 auto; 
    float:none; 
    border:1px solid #059b6d;
}

#galeria-portada span{
  display:block;
  width:340px; /*Como la <div> principal */
}

#galeria-portada  span.ver-mas a
{
    display:block;
   /*Texto heredado del body, tamaño,*/
    color:#00996a;
    width:88%; /*aquí si va el 95% */
    padding-top:0.3em;
    text-align:right;
}

#galeria-portada span.ver-mas a:hover {
  color:#ff0000;
}


/* End of 'portada' */