/* Start of CMSMS style sheet 'reset' */
/*
 http://meyerweb.com/eric/tools/css/reset/ 
 v1.0 | 20080212 
*/

/*
Reset de propiedades por defecto de los navegadores.
Esta hoja de estilos se aplicará a todas las plantillas.
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1em;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* End of 'reset' */

/* Start of CMSMS style sheet 'comun' */
/*************************/
/* COMÚN IZNAJAR                */
/************************/


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

/*********** BODY *************************************/
html{
 height:100%;
 background:#fff;
/*El color de fondo fuera de la página siempre poner en etiqueta <html> */
/*aquí sería bajo el pie */
}

body  {    
      /*
       -El texto de contenido es Georgia, tamaño 12px (0.75em) #000.
       -Background del body: #fff.
      */

     /*Texto*/
     font-family:Arial,sans-serif,Verdana,Trebuchet MS,Times New Roman;
     font-size:68.75%;    
    /*
      Se suele poner en %. Sabiendo que 100% son 16px, 11px son x. 11px=68.75% (12px=75%)
      Ese 75%, también podemos poner .75em
     */
     
     /*aunque firebug muestre el font-size: 100% del reset, ese 100% es respecto al valor
        dado aquí */ 
     color:#000;
     font-weight:normal;
     line-height: 1.3em;

     /*Bk, márgenes, ... */    
     /*Puesto en <html> background:??? */
     margin:0;
     text-align:left;
    }

/* hacks para que funcione correctamente el centrado de la web en IE5.5 */
@media tty {
i{content:"\";/*" "*/}} body{text-align:center;} /*";}
}/* */ 

/*********** ENLACES **************/
a {

    color:#402501;
    
    /*texto verde color:#0b5420;*/
    text-decoration:none;
    outline:none;
}

a:focus, a:hover {
 /*   color:#2c3e2a;  */

color:#b58c85;

/*hover: subrayado
    text-decoration:underline;
    outline:none;
*/
}

/*********** H1...H6 ***********/
h1, h2, h3, h4, h5, h6 {font-family:Verdana,Arial,sans-serif,Trebuchet MS,Times New Roman;
font-weight:normal;color:#390000;margin:0;clear:both;}

h1 {font-size:3em;line-height:1;}

h2 {font-size:2.5em;line-height:1em;text-decoration:underline;}

h3 {
  font-size:1.6em;font-weight:normal;font-style:italic;line-height:1.4em;margin-bottom:0.5em;
 /*  letter-spacing:2px; */
 }


h4 {font-size:1.3em;font-weight:normal;font-style:normal;line-height:1.1em;margin-bottom:0.5em;margin-top:1em;margin-left:0.4em;padding-bottom:4px; }

h5 {
font-size:1em;
font-weight:bold;
margin-bottom:0.5em;
margin-top:0.2em;
text-decoration:underline;
}
h6 {font-size:1em;font-weight:normal;margin-bottom:0.3em;margin-left:0px;}
     
/*********** ICONOS PDF DE ORDENANZAS, EDICTOS, ...************/
#columnacentroancha  a.pdf img,#columnacentro a.pdf img{
     margin:0;
     padding:0;
     border:none;
}

/********** ICONO DESCARGAR ADOBE PDF (en el pie) ************/
a#piePdf{
	display:block;
	margin:0 auto;
	background: transparent url('/uploads/images/enlaces/get_adobe_reader.png') no-repeat;
	text-indent:-1000em;
	width:158px;
	height:39px;
}

/*Color lineas separadoras, p.e. en obtener Acrobat Reader */
hr {
  width:95%;
  color:#b29f9e;
}


/****************************CONTENEDOR ****************************/
#contenedor{
   /*Diseñado a 935*/
   width:935px; 
   margin:0 auto; /*centrar página */
   overflow:hidden; 
   text-align:left;
}

/*********CABECERA-TOP, con Menú Contacto y Buscador **********************/
#cabecera {
    width:935px;
    height:107px;
    overflow:hidden;
}


/****** CABECERA-IZQUIERDA ********/
#cabeceraizquierda {
  float:left;
  overflow:hidden;
  width:415px;
  height:107px;
  background: transparent url('/uploads/iznajar/cabecera-izquierda.jpg') no-repeat left top;
}

/***** H1 -H2 *******/
#cabeceraizquierda h1 {
  float:left;
  width:242px;  
  height:67px;
  /*Desplazamos para que ocupe las letras -grafico- Iznájar*/  
  margin-left:108px;
  margin-top:22px;
}

/*HACEK IE6*/
*html #cabeceraizquierda h1 {
  margin-left:54px;
}

#cabeceraizquierda h1 a {
  display:block;
  width:242px;  
  height:67px;
  /*Texto no debe verse*/
  text-indent:-2000em;
}

#cabeceraizquierda h2 {
   float:left;  /*desaparezca del flujo */
   text-indent:-2000em;
}

/****** CABECERA-DERECHA ********/
#cabeceraderecha {
  float:left;
  overflow:hidden;
  width:520px;
  height:107px;
  background: transparent url('/uploads/iznajar/cabecera-derecha.jpg') no-repeat left top;
}

/**************   MENU CONTACTO **********************/
ul#menucontacto{
    float:right;
    overflow:hidden;
    height: 15px;
    list-style-type:none;
    text-align:left;

   /*Necesario para IE6 IE7, sino no sabe el width y no sale en línea el Menu contacto */
    width:258px;
}


ul#menucontacto li {
   background:transparent none repeat scroll 0 0;
   border-left:1px solid #000;
   float: left;
   padding-right:5px;
   padding-left:5px; 
   text-align: left;
  /*Letra idem body*/
   text-align:center;
   font-weight:bold;
   font-size:0.95em; 
   line-height:1.2em;
   color: #000;
}

ul#menucontacto li.rss{

  background: transparent url('/uploads/iznajar/rss.gif') no-repeat right 1px;
  text-align: left;
  width:38px; /*Para que quepa la imagen del rss y no se monte con las letras RSS */
}

ul#menucontacto  li.primero{
  border:none;
}

ul#menucontacto li a{
  border:none;
  /*Letra =body*/
   /*El size no se pone pues se duplica al hacer .85*.85  del <li> * <a> */
  color:#000;/*ponemos color para que no coja el del <a> general*/
}

ul#menucontacto li a:hover{
   text-decoration:underline;
}

ul#menucontacto li.activo{
   text-decoration:underline;
}

/****************MENU PRINCIPAL***********************************/
#contenidomenuprincipal {
    float:left;
    width:935px; 
    height:33px;
    overflow:hidden; /*cubrir sus hijos float */
    background:#fff url('/uploads/iznajar/mp-bk.gif') no-repeat left top;

}

ul#menuprincipal{
  float:left;
  padding:0;
  width:690px;
  height:28px;
  overflow:hidden;
}

ul#menuprincipal li{
  height:28px;
  padding:0;
  margin:0;
  float:left;
}

ul#menuprincipal li.ayuntamiento  { 
 width:158px;
 margin:0 116px 0 24px;
 }

/*Hack IE6*/
* html ul#menuprincipal li.ayuntamiento {
 margin:0 116px 0 12px;
}

ul#menuprincipal li.tramites { 
 width:119px;
 margin-right:128px;

 }


ul#menuprincipal li.turismo { 
  width:124px;
 }


#menuprincipal li a{
  text-indent:-2000em;
  display:block;
}

ul#menuprincipal li a{
  width:100%;
  height:100%;
}

ul#menuprincipal li.ayuntamiento a { 
 background: transparent url('/uploads/iznajar/mp-ayuntamiento.gif') no-repeat left top;
 }


ul#menuprincipal li.tramites a { 
 background: transparent url('/uploads/iznajar/mp-tramites.gif') no-repeat left top;
 }

ul#menuprincipal li.turismo a { 
 background: transparent url('/uploads/iznajar/mp-turismo.gif') no-repeat left top;
 }



 /* Hover: Muestro la segunda imagen, como cada imagen es de 30, la segunda será 
    -30. Recordemos que tenemos las tres en un sólo .jpg que es de  anchura * 90.
    En la primera, tenemos el <a> normal, la siguientes es -hover- y la última  -activo- */

ul#menuprincipal li a:hover { 
   background-position: left -28px;
}


/*Para todas si está activo muestro la 3ª imagen  (más baja) del .jpg */
ul#menuprincipal li.activo a { 
   background-position: bottom right;
}

/****** BUSCADOR **************************/
#contenidomenuprincipal form{
  float:right;
  margin-top:2px;
  margin-right:14px; /*como el menu contacto para alinearlo con él */
  width:152px;
  height:21px;
}

/*Hack IE6*/
*html #contenidomenuprincipal form{
  margin-right:7px;
}

/*Texto: Buscar */
#contenidomenuprincipal form label{
  /*Texto = Body*/
  font-size:1em;
  color:#fff; 
  width:auto;
  float:left;
  line-height:1em; /*no funciona margin-top, se hace con line-height */

  /*Márgenes */
  margin-left:5px;
  margin-right:5px;
  margin-top:8px;
}

/*Cuadro de búsqueda  (también sería la lupa, que después se sobreescribe más abajo*/
#contenidomenuprincipal  form input {
 background: transparent url('/uploads/iznajar/busca-cuadro.gif') no-repeat;
 float:left;
 width:68px;
 height:19px;
 font-family:Arial,Trebuchet MS,times New Roman,Verdana;
 font-size:0.9em;
 border:none;
 margin-top:3px;
}

/*Lupa para buscar */
#contenidomenuprincipal  form input.boton{
 background: transparent url('/uploads/iznajar/busca-lupa.gif') no-repeat;
 float:left;
 width:17px;
 height:19px;
 border:none;
 text-indent:-2000em;
 /*IE6 IE7 no funciona el text-indent se ve el texto*/
 font-size:0em;
 color:#6d1917; /* mismo color fondo buscador pues con el size se ve una raya '-'*/
 cursor:pointer;
 margin-left:7px;
 margin-top:3px;
}

#contenidomenuprincipal form input.boton:hover{
 background-position:bottom right;
}

/**************** MIGAS *****************************/
#migas{
   float:left;
   overflow:hidden;

   width:904px;
   height:20px;
   clear:both;
   margin-top:8px;
   margin-bottom:6px;
   margin-left:20px;
}

/*Hack IE6 */
*html #migas{
  margin-left:10px;
  margin-bottom:0px;
}

#migas #contenidomigas{
    heigth:20px;
    width:904px
    letter-spacing:1px;

    /*Texto: Lo cogerá el <span> de las migas*/
     font-family:Trebuchet MS,Arial,sans-serif,Verdana,Times New Roman;
    font-size:1em;
    line-height:1.5em;
    font-weight:normal;
    color:#000;
    text-align:left;
  
}

#migas a
{
    /*Texto */
     font-family:Trebuchet MS,Arial,sans-serif,Verdana,Times New Roman;
    font-size:1em;
    line-height:1.5em;
    font-weight:normal;
    color:#000;
    text-align:left;

}

#migas a:hover {
  text-decoration: underline;
}

#migas a.inicio{
  text-decoration:underline;
}

#migas span.lastitem{
  /*font-style:italic;*/
}

/*************************************************************************/
/*                                          C U E R P O                  */
/* Contiene la columnaizquierda (menusecundario) y la columnacentroancha */
/* con el contenido                                                      */
/*************************************************************************/
#cuerpo{
   float:left;
   overflow:hidden;
   width:935px; /*Como la cabecera */
  }

/************* MENU SECUNDARIO ************************/
#columnaizquierda{
    width:170px; 
  
    margin-left:0px;
    float:left;
    overflow:hidden;

    /*borde inferior*/
    padding-bottom:8px;
    background: transparent url(/uploads/iznajar/ms-down.gif) no-repeat left bottom;

   /*separamos el contenido*/
    margin-right:3em;
}

/*Cabecera del menú secundario, esta vez si hay una fuente ponible y no img */
#columnaizquierda h3 {
    /*Texto*/
    font-family:Trebuchet MS,Arial,sans-serif,Verdana,Times New Roman;
    font-size:1.4em;
    line-height:2em; /*Centramos el texto verticalmente */
    font-weight:bold;
    color:#691816;
    text-align:left;

    /*fondo del h3 es un degradado */
    width:155px; /*+15 padding=170*/
    height:28px; /*alto imagen*/

    /*Anulamos CSS <h3> generales */
    margin:0;
    padding:0;
    padding-left:15px; 

    /*borde inferior*/
    background: transparent url(/uploads/iznajar/ms-top.gif) no-repeat left bottom;

}

ul#menusecundario{

  float:left;
  overflow:hidden;
  /*sin background al no llevar sombra es un simple borde*/
  border-left:2px solid #85a98f;
  border-right:2px solid #85a98f;
  /*background: transparent url(/uploads/iznajar/ms-ul.gif) repeat-y left top;*/
  width:166px; /*+borde=170*/
  padding:0.8em 0 0 0;

}

ul#menusecundario li{ 
  width:166px;
  float:left;
  overflow:hidden;
  margin-bottom:8px;
  background: transparent url(/uploads/iznajar/li.gif) no-repeat 12px 6px;
}

/*El <a> se transforma en <span> cuando está activo. Tendrá todas sus propiedades */
ul#menusecundario li a,ul#menusecundario li span{
   float:left;

   /*Texto*/
   font-family:Trebuchet MS,Arial,sans-serif,Verdana,Times New Roman;
   font-size:1em;
   line-height:1.7em; /*Centramos el texto verticalmente */
   font-weight:normal;
   color:#000;
   text-align:left;

   width:135px; /* Total 166 al sumarle el padding */
   padding:0 6px 0 25px;

}

ul#menusecundario li a:hover{
  background: transparent url(/uploads/iznajar/ms-hover.gif) no-repeat left top;
}

/*El <a> se transforma en <span> cuando está activo. Tendrá todas sus propiedades */
ul#menusecundario li a.activo,ul#menusecundario li span.activo{
  font-style:italic;
}

/*Elementos 3º nivel: Ayto->Docs->Edictos y Bandos,... */
ul#menusecundario li li {

 /*Separamos elementos 3er nivel del padre (top) y de sus hermanos */
  margin-top:4px;
  margin-bottom:3px;

  /*El li.gif. Sólo lo tienen los del 2º nivel*/
  background: none;

/* Nota: Este <li> sigue ocupando los 166 del <li> padre en el que se encuentra pues 
   el padding se pone en el <a> y no en el <li> */
}

/*El <a> se transforma en <span> cuando está activo. Tendrá todas sus propiedades */
ul#menusecundario li  li a, ul#menusecundario li  li span{
   font-size:0.9em;
   line-height:1.25em;
   padding-left:30px;
   font-weight:normal;
   margin-top:0;
   width:133px; /*+30 son los 166 del <li> padre*/
   background :none;


}

ul#menusecundario li li a:hover {
  /*Idem hover 2º nivel */
  background: none;
  font-style:italic;
}

#cuerpo #columnaizquierda ul#menusecundario li li a.activo {
  /*Idem activo 2º nivel */
}

/******** COLUMNA CENTRO ANCHA ************************/
#columnacentroancha{
  float:left;
  overflow:hidden;
  width:710px;
}

/***********EL CONTENIDO ******************************/
#elcontenido{
  float:left;
  overflow:hidden;
  width:695px; /*+padd =710 */
  padding: 0 15px 0 0;
}

/**************      PIE     *****************************/
#pie{
    width:935px;
    height:54px;
    background: transparent url(/uploads/iznajar/pie-bk.gif) no-repeat left top;
    margin:20px 0 0 0;
    clear:both; 
    float:left;
}


#pie #contenidopie{
   width:925px; /*+pad=935*/
   height:54px; 
   padding-left:10px;
   color:#000;
   text-align:left;
   overflow:hidden;   
}

#pie p{
  margin:0;
  float:left;
  text-align:left;
  color:#fff; 
  margin-left:10px; 
 }

/*Hack IE6*/
* html #pie #datospie p{
  margin-left:5px;
}

/*hack IE6 dobla el margen de la primera img a la izqa y la siguiente después del texto */
*html #pie p#disenaeprinsa,*html p#validxhtml10 {
  margin-left:5px;
}

#pie #datospie{
  margin-left:0px;
  margin-right:0px; 
  margin-top:12px;
  width:490px;
  float:left;
}

#pie #datospie p{
 font-family:Arial,sans-serif,Verdana,Trebuchet MS,Times New Roman;
 font-size:.9em;
 line-height:1.2em;
 color: #fff;
 width:100%;
}

#pie a{
 color:#ffdd55;
}

/*******
 Para que funcione en IE 6-7 pues resulta que sus hijos los <a> si tienen el width pero como
sus padres -accesibilidad y validxthm10 no lo tenían puesto, IE6-7 los hacía más grandes
(como la ventana padre de estos).
**********************/
#pie p#accesibilidad,#pie p#validxhtml10{
 width:88px;
}

#pie  p#disenaeprinsa a,#pie  p#creadoconportal a,#pie p#accesibilidad a,
#pie p#validxhtml10 a,#pie p#juntaandalucia a{	
	height:31px;
        text-indent: -1000em;
	margin-top:10px;
	float: left;

}

#pie  p#disenaeprinsa a{
	background:transparent url('/uploads/iznajar/disenaeprinsa.gif') no-repeat top;       
	width:78px;	
        margin-right:0px;
}

#pie  p#disenaeprinsa a:hover{
	background-position:bottom;       
}

#pie  p#creadoconportal a{
	background:transparent url('/uploads/iznajar/creadoconportal.gif') no-repeat top;        
	width:62px;	   	
        margin-right:0px;
}

#pie  p#creadoconportal a:hover{
	background-position:bottom;
}

#pie p#juntaandalucia a{
	background:transparent url(uploads/iznajar/jandalucia.gif) no-repeat top;       
        float:left;
	width:48px;	       
        margin-right:0px;
}

#pie p#juntaandalucia a:hover{
	background-position:bottom;
}

#pie p#accesibilidad a{
	background:transparent url('/uploads/iznajar/accesibilidadAA.gif') no-repeat top;        
	width:88px;	
        float:right;
        margin-right:0px;
}
#pie p#accesibilidad a:hover{
	background-position:bottom;
}

#pie p#validxhtml10 a{
	background:transparent url('/uploads/iznajar/xhtml.gif') no-repeat top;    
	width:88px;		   
        float:right;
        margin-right:0px;
}

#pie p#validxhtml10 a:hover{
	background-position:bottom;
}

/****************  FORMULARIOS **************************/
form{
	width:95%;
	overflow:hidden;
	margin:0 auto;
}

form fieldset{
	padding:2%;
       
       /*borde del formulario */
	border:1px solid #85a98f; /*CAMBIAR*/
      
       /*color background*/
       background:#fff; /*CAMBIAR*/

}

form label{
	clear:both;
	display:block;
	width:20%;
	float:left;
	font-weight:normal;
}
form textarea{
	width:60%;
	overflow:hidden;
        font-size:1.6em
}


/*Check-box, cuadros de texto */
form input, form select, form textarea{

       /*borde campos a rellenar: textbox, text areas */
	/*border:1px solid #6b3528;*/ /*CAMBIAR*/

    /*al quitar el borde ya no aparece en IE6-7 en los checkbox */

}

form input, form select{
	font-size:1.1em;
}
form span{
	clear:both;
	display:block;
}
form p{
	clear:both;
	padding:0px;
	margin:3px 0px 8px 0px;
	height:100%;
	overflow:hidden;
}
p.botones{
	padding:2px 0px 2px 0px;
        
        /*fondo color donde se coloca p.e. en Contacto el botón Enviar */
	background:#6d1917;/* #2c3e2a;#1b5353 ;*//*#cfdecf;*/ /*CAMBIAR*/
        border:1px solid #000;
	
        text-align:center;

        /*Color texto botones */
	color:#fff; /*fff; EVALUAR */

}
p.botones input, p.botones a{
	width:auto;
	background:#fff !important;
	color:#000;
	text-align:center;
	cursor:pointer;
	font-size:1em;
}
p.botones a{
	padding:2px 0px 2px 0px;
}
.aviso{ 
 /*color aviso de campos que deben rellenarse en formulario */
 color:#5a0000;
}

.mensajeaviso{
 border:1px solid #007688;
 padding:2%;
 background:#e1d4b3;
 margin-bottom:10px; /*separamos los cuadros de texto al mostrar el mensaje*/

}

.mensajeaviso p{
  color:#5a0000;
}

/*****************   FORMULARIO SUSCRIPCION   *********************/
div.capasuscripcion dl.suscripcion dd {
  width: 85% !important;
  background:none;
  
}  
div.capasuscripcion dl.suscripcion dd label{
 width:80%;
}
div.capasuscripcion dl.suscripcion dt {
  margin-top: 0px;
  clear: left;
  width: 6% !important;
}

div.capasuscripcion dl.suscripcion dd {
  margin-left: 0px !important;
  margin-top: 4px;
  margin-bottom: 4px;
}
/*DEFINICIONES DE TABLA USADO EN SUSCRIPCIONES */
dl {
    clear:both;
    margin:0px 0px 0px 0px;
    /* 
    Cuadro que envuelve los checkbox. Los <dl> engloban los <dt>
    */
   background:transparent;
   border: 1px solid #85a98f; /*CAMBIAR*/

    overflow: hidden;
    padding: 5px 0;
    height:auto;
    width:95%;
    margin:0 auto;
    margin-bottom:5px;
}


dt {
    clear: both;
    width: 34%;
    float: left;
    margin-top: 4px;
    text-align: right;
    padding: 2px 5px; /*2px 5px*/
    min-height:1.5em;
}

dd {
	width: 50%;
	float: left;
	margin-top: 5px;
	background: #fff;
	padding: 2px 5px;
	min-height:1.5em;
}

/************************** MAPA WEB *************************/
div.div_mapa
{
 width:33%;
 float:left;
}

#elcontenido div.div_mapa ul.tablaContenido{
  margin-left:0px;
  margin-right:0px;
}


#elcontenido div.div_mapa ul.tablaContenido li {
  background : none;
  /*Eliminamos estilos posibles puesto en #elcontenido ul li */
  width:auto;
  margin-left:0px;
}


/*Elementos 1er nivel. Cabeceras del mapa */
#elcontenido div.div_mapa ul.tablaContenido li a {

  /*tamaño*/
  width:92%;
  display: block;
 
  /*Lleva la fuente del body */
  line-height:1.4em;  /*CAMBIAR para centrar el texto en el recuadro*/
  font-weight:bold;

  /*color fondo encabezados menú en el mapa-web */
  background-color:#724745; /*CAMBIAR COLOR*/

  /*borde de los encabezados */
  border:1px solid #000; /*CAMBIAR*/

  /*Controla la altura de los encabezados.*/
  padding:6px 10px 3px 5px;

  margin-bottom: 5px;
  /*color enlaces del mapa, es decir todo el texto. Normalmente el del h3 */
   font-size:1.3em;
   color:#fff; /*CAMBIAR/*

}

#elcontenido div.div_mapa ul.tablaContenido li ul {
  /*acercamos la barra de elemento hijo a su padre.*/
  margin-top:0px; 
}


#elcontenido div.div_mapa ul.tablaContenido li ul li a  {
   background:none;
   padding-left:0px;
   font-weight:normal;
   margin-bottom:0px;  
   padding:0px;
   width:90%;
   border:none;
   font-size:1em;
   color:#0b5420;

}

#elcontenido div.div_mapa ul.tablaContenido li ul li a:hover {
 /*cogemos el italic del general   color:#d93637; */
 text-decoration:underline;
}


/*Elementos 2º nivel. Inmediatamente bajo los principales que están en cabecera*/
#elcontenido div.div_mapa ul.tablaContenido li ul li {
  padding-top: 0px;
  padding-left:1em; /*Separamos li.gif del texto del enlace */
 /* background:transparent url(uploads/iznajar/li.gif) no-repeat scroll 0 3px;*/
}


/*Elementos 3er nivel*/
#elcontenido div.div_mapa ul.tablaContenido li ul li a ul li,
#elcontenido div.div_mapa ul.tablaContenido li ul li ul li { 
  border:0 solid white;
  padding-left:20px; 
  padding-top:0;
  background-image:none;
  }

#elcontenido div.div_mapa ul.tablaContenido li ul li a ul li,
#elcontenido div.div_mapa ul.tablaContenido li ul li ul li {
    background:transparent url(uploads/iznajar/borde-li-mapa.gif) no-repeat scroll 0 0;
    margin:0;
 
}

#elcontenido div.div_mapa ul.tablaContenido li ul li a ul li.last,
#elcontenido div.div_mapa ul.tablaContenido li ul li ul li.last {
  background:transparent url(uploads/iznajar/borde-li-mapa-last.gif) no-repeat scroll 0 0;
}


#elcontenido div.div_mapa ul.tablaContenido li ul li ul li a ul li,
#elcontenido div.div_mapa ul.tablaContenido li ul li ul li ul li{
  padding-top: 0px; 
}

/****COMUNES GALERIAS, ENLACES,NOTICIAS, CALENDARIO **********/

/*********** PARA GALERIAS DE IMÁGENES *************/

#elcontenido ul li.thumb{
 margin-left:0;
 padding-left:0;
}


  /***********
   COLUMNAIZQUIERDAINTERIOR: Contiene las distintas imgs, noticias, categorías,..... 
   ************/

/*****************************************/
#elcontenido #columnaizquierdainterior {
   float:left;
   margin-right:8px;  
   width:65.8% ;
  /* padding-left:5px;*/
   overflow:hidden;
  /*height:100%;->da problemas en Ie6 si ponemos height para simular min-height y se corta
    el contenido. Pasó al ver varias noticias. Quitarlo o poner auto
    Además si no se usa el min-height tampoco hace falta ponerlo*/
}
#elcontenido #columnaizquierdainterior ul{ 
  /*float:left;*/
  overflow:hidden;
  width:auto;
}

/*Elemento <li> al listar noticias por categorías o todas */
#columnaizquierdainterior ul li{
  background:none !important;
  padding-left:0;
}

/********* Anulamos css de img dentro plantilla [contenido.css] ***********/
#elcontenido #columnaizquierdainterior  img {

  border:none;
  padding:0;
  margin-left:none;

/*Imágenes en en <li> de los listados de noticias por categorias o todas las noticias */

}


/*
 IMAGENES EN EL DETALLE DE UNA NOTICIA ESTÁN DENTRO DE UN <P> 
 Al estar dentro de #columnaizquierdainterior hay un menú a la derecha, por tanto
    la imagen no debe llegar a él. Sin embargo su height da igual pues hacia abajo no
    hay límite.
*/
#elcontenido #columnaizquierdainterior p img {
  max-width:440px;
}
/*Hack IE6 */
* html #elcontenido #columnaizquierdainterior p img {
      width: expression(this.width > 440? "440px":this.width);
}

/**********
  [Más información] -> recuadro abajo donde te pone la {fecha de las noticia} en Noticias o {volver a
   galerías de imágenes} en Galerias
*********/

#columnaizquierdainterior .masinformacion {

     width:100%; /*95%;*/
     
    /*Colores borde y fondo: CAMBIAR*/
    /*
     Modelo caja
     -----------
     border:1px solid #8f341f;
     background: #d7d7d7; 
   */
    /*Modelo entre líneas sup-inf */
     border-top:1px solid #000;
     border-bottom:1px solid #000;

     clear:both;
    
     /*texto CAMBIAR (si se desea)*/
     font-size:0.9em;
     color:#000;
    
     margin: 1px 0 1em 0;
     padding-right:0.4em;
     /*text-align:right;*/

     /*Así controlamos la altura del <p> más información para que el texto quede dentro
        del recuadro dibujado con el propio <p>*/
     line-height:1.7em;
  
}

/*Texto <Volver a galería de imágenes -Álbumes */
#columnaizquierdainterior .masinformacion a {
  
  /*CAMBIAR */
  /*coger del general color:#007688; */

}

#columnaizquierdainterior .masinformacion a:focus,
#columnaizquierdainterior .masinformacion a:hover{
  /*CAMBIAR*/
  
  font-weight:bold;
  text-decoration:none;
}

/* << volver : dentro de noticias, agenda,... */
#volver a {
  /*cogemos del general color:#007688;*/
}
#volver a:hover {
  font-style:italic;
}


  /****************
           COLUMNADERECHAINTERIOR: contiene el menuterciario con  :
                                  categoria   >ver todas>
                                  -----------------------
                                  Categ1 ->elemento <span>
                                  Categ2 ..

    ******************/
#elcontenido  #columnaderechainterior ,#columnaderechainterior{

  /*Color de fondo: CAMBIAR */

  /*Cuadro relleno con borde */
/*   background:#c6cedb;*/ /*#d7d7d7; */
/*   border:1px dotted #8f341f;*/

   /*Adornamos con un borde sup y otr inf*/
  /* border-top:1px solid #8f341f;*/
  padding-bottom:3px; /*separamos el borde inferior*/
  border-bottom: 1px solid #8d7170;

   margin: 1em 0 1em 0em;
   float:right;
   width:28%;
   /*padding: 0 0 5px 2px; */

  /*sin borde dejamos la sombra baja*/
 /*  border:1px solid #989e73;* /*CAMBIAR color */

}

/*Hack IE6-7*/
*:first-child+html #elcontenido  #columnaderechainterior, *:first-child+html #elcontenido  #columnaderechainterior {
  padding-bottom:0;
}
* html #elcontenido  #columnaderechainterior ,  * html #elcontenido  #columnaderechainterior {
  padding-bottom:0;
}


/*
  Cabecera en menú derecha. 
   Contiene p.e. en galerias: Galeria   >ver todas<  .  Idem para resto
*/
#elcontenido #columnaderechainterior h3, #columnaderechainterior h3 {
  padding:1px 0 0 5px;
  margin:0;
  text-decoration:none;


 /*SIN COLOR FONDO, DEJAMOS SOMBRA ALTA */
  /*Color fondo cabecerita,..CAMBIAR , quitar ,.... */
  /*background:#f1ebef;*/ /*CAMBIAR*/
  background:none;
  padding-bottom:2px; /*bajamos la línea */
/*  border-left: 3px doubled #8f341f;*/
  border-right: 1px solid #8d7170;

 /*borde inferior en la cabecera del menu-dha. CAMBIAR */
  border-bottom:2px solid #b29f9e;

 /*Color Texto CAMBIAR */
 /*cogemos h3 general color:#000; */
  width:97%;
  height:1.3em;

/*se puso h3 por error TAW y este h3 lo ponemos como h5 pues la letra debe ser pequeña
  Son los [Categorias   >ver todas<] */
  font-size:1em;
  line-height:1.5em;/*TOCAR PARA ALTO H3 */
  font-weight:bold;
  font-style:normal;
  margin-bottom:0.5em;
  margin-top:0em;
  overflow:hidden;
}

/*El   >ver todas< */
#columnaderechainterior h3 a.vertodo { 
     float:right; 
     margin-right:5px;
     font-weight: normal;
     letter-spacing: 0px;
     font-size:1em; 
     line-height:1.85em;
     text-align: right;   
    /*separamos el vertodo del título principal*/
   /* border-left:1px solid #8f341f; barra-vertical entre categoria | ver todo*/
     /*CAMBIAR*/
   /*cogemos <a> general    color:#390000; */
  /*  text-decoration:underline; */
}

/*hack IE6-7 */
*:first-child+html #columnaderechainterior h3 a.vertodo{
  margin-top:-17px; /*TOCAR SI NO CUADRA EL VER-TODAS EN IE7*/

}
*html #columnaderechainterior h3 a.vertodo{
  margin-top:-15px;  /*TOCAR SI NO CUADRA EL VER-TODAS EN IE6*/
  line-height:1.5em;
}

/*Hover sobre ver-todo */
#columnaderechainterior h3 a.vertodo:focus, #columnaderechainterior h3 a.vertodo:hover{
   /*CAMBIAR*/
  font-style:italic;
  text-decoration:none;
 }

 /*Padding para los li*/
 #columnaderechainterior #menuterciario {
 float:left;
 overflow:hidden;
 width:100%;
 padding-left:0px;
 padding-bottom:3px;
 border-right:1px solid #8d7170;
}

 
#columnaderechainterior #menuterciario li{
  padding-left:5px; /*Sobreescribimos el del #elcontenido ul li */
  background:none; /*Eliminamos li.gif puesto en #elcontenido ul li */
  /*Tamaño fuente de las distintas categorías listadas como li */
 font-size:1em;

}

/*Categorías listadas en el menu derecha (categorias de noticias, eventos,..) */
#columnaderechainterior #menuterciario a {
  /*CAMBIAR*/
/*cogemos <a> general  color:#8f341f; */
  /*Tamaño fuente de las distintas categorías listadas como li */
  font-size:1em;
  line-height:1.8em

}

/*Hover sobre las categorías,.. */
#columnaderechainterior #menuterciario a:hover {
   /*CAMBIAR*/
   text-decoration:underline;
}
#columnaderechainterior #menuterciario a.activo {
   text-decoration:underline;
}

  /*********** 
    PAGINACIÓN. Se pagina (poner en pestaña opciones: Enlaces,Agenda y Noticias.
  ***********/
#elcontenido ul.paginacion{
        clear:both;
        /*CAMBIAR */
        /*background: #f1ebef;*/ /* CAMBIAR */
	width:100%;
	/*height:100%; problemas IE6 al poner height en contenido para simular min-height. Ponía
          la paginación a un height= height del contenido.Ad+ no hace falta en ningún caso.*/
	overflow:hidden;
	margin:10px auto;
	text-align:center;
	padding:1px 0px 1px 0px;
        border-top:1px solid #b29f9e;
        border-bottom:1px solid #b29f9e;

}

#elcontenido ul.paginacion li{
    background:none;
    display:inline;
    padding-left:18px !important;  /* Para todos los navegadores */
    padding-left:16px;             /*  Para IE 5.5 */
    padding-left/**/:/**/18px;  /*  Para IE 6 */ 
}

ul.paginacion li a{
/*cogemos <a> general   color:#007688; */
}

ul.paginacion li a:hover{
   font-weight:bold;
   text-decoration:none;
}

div#volver {	
	margin:0 auto;
	color:#000;
	font-size:0.9em; /*CAMBIAR */
	text-align:right;
	overflow:hidden;
        width:92%;
}

/*************    GALERIA DE IMAGENES  ************************/
/*preparado para <elcontenido> de 650px, columnaizquierdainterior 420px (donde van los álbums) */
/*Lo normal son 670px, 440px*/
#galeriainterior{
   width:100%;
   padding-top:5px;
}

/*Galeria interior ul */
#galeriainterior ul{
/*  padding-left:10px;*/
  padding:0px;
  overflow:hidden;
}

/* Lista que contiene las imágenes */
#galeriainterior ul li.thumb{

  background-image:none;

/* Las imágenes no pasarán de esta anchura en en li para que quepan por li las que queramos*/
   width:140px; /*137px;  */

/*Ojo: Si establecemos height da problemas en IE6, pone más altura. Habría que indicar
  otro  height para IE7 */
  /*height:145px;*/ /*145 Altura para como máximo 2 líneas de descripción de la img */

  /*Márgenes*/
 /*  margin:0 0.4em 0.4em 0; para 700px*/
  margin:0 0px 0.4em 0; /*la separación horizontal la marca el width del <li>*/

}


/*HACK IE6*/
/*
 No necesario
*html #galeriainterior ul li.thumb {
 margin:0 0em 0.2em 0;
}
*/

/* Texto bajo imágenes */
#galeriainterior ul p{
  width:128px; /*Cambiar para centrar el texto en el álbum*/
  margin-left:6px;

  /*texto centrado para imagen galería */
  text-align:center;
  font-size:0.9em; /*CAMBIAR */

}

/*<a> dentro de li*/
#galeriainterior .thumb a {
  display:block;
  /*colores por defecto que pone port@l  (gris) border-color:#EEEEEE #CCCCCC #CCCCCC #EEEEEE;*/
  border-color:#724745 #47100e #47100e #724745;
  background-color:transparent;
  /*Centramos el <a> dentro del li*/
  margin:0 auto;
  heigth:75px; /*por defecto .thum a tiene width=100px */
/* para que centre el texto  del enlace bajo la img de la galería */
  text-align:center;  
}


/* 
  {.thumb a} por defecto cogen borde y un ancho de 100px. 
*/

.thumb img{
  /*para que no se salga por abajo si es muy alta ni horizontalmente */
  max-width:100px;
  max-height:70px;
 /*Tendrán su hack en IE6 */

/* para que centre la imagen dentro del enlace */
  display:block;
  margin:none; /*eliminamos cualquier posible margen */
  margin:0 auto;

/*Anulamos estilos de la plantilla <contenido>-> img{} para que no se apliquen a Galerias */
  border:none;
  padding: 0;

}

/*hack IE6: no debe pasar la altura/anchura máxima permitida */
* html .thumb img{
    width: expression(this.width > 100 ? "100px":this.width);
    height: expression(this.height> 70? "70px":this.height);

}

/*
#.thumb img {
  margin-left:0;
}
*/

/*************** ENLACES *******************/
#enlacesinterior ul {
   clear:none;
   float:left;
   background:none;
}

#elcontenido #columnaizquierdainterior ul li.thumbenlace{
   margin-bottom:1em;
   padding-top:0.8em;
   padding-left: 0px;
   width:138px; 
   margin-right:5px;
   overflow:hidden;
   float:left;
   height: 90px;
   
   /*Para que no coja estilos de #elcontenido ul li en contenido.css */
  margin-left:0;
  background-image:none;
}


/*Sirve tanto para a.enlaceenlace como para a.imagenenlace */
#elcontenido #columnaizquierdainterior li.thumbenlace a{
  display:block;
  padding:0px !important;
  margin:0px !important;
  text-align:center;
  width:95%;
  font-weight:bold;
}
.thumbenlace a.imagenenlace{
/*  height: 126px; */
  width:138px; 
  overflow:hidden;
  margin-bottom:10px
}

.thumbenlace a.enlaceenlace{
  text-align:center;
  line-height:1.1em;
  color:#402501;
  font-size:0.9em;
}
.thumbenlace a.enlaceenlace:hover{
  color:#b58c85;
}

.thumbenlace a.imagenenlace img{
   max-height:60px;
   max-width:120px !important;  /* Para todos los navegadores */
   width:auto;  /* Para todos los navegadores */     
   text-align:center;
   border:1px solid #85a98f !important;
   margin-left:0;
}
/*Hack IE6 pues no reconoce el max-width */
*html .thumbenlace a.imagenenlace img{
      width: expression(this.width > 120? "120":this.width);
}
*html .thumbenlace a.imagenenlace img{
      height: expression(this.height > 60? "60":this.height);
}


/****************   NOTICIAS   **************************************/


/*****************
    Todo el cuerpo de noticias que puede crecer 
 *****************/

#listadonoticiasinterior {
       margin: 0px;
       border: none;
       width:100%;      
       height:auto; 
}

/*Cada noticia es un <li> */
#elcontenido ul.listadointerior li {
  clear:both;
  width:100%;
  border:none;
  background-image:none;

  /*Para que no queden estilos de contenido.css #elcontenido ul li */
 padding-left:0;
}


/***TÍTULO Y SU HOVER de NOTICIAS Y EVENTOS ***************/

#columnaizquierdainterior ul.listadointerior h4, #columnaizquierdainterior ul.listacalendario h4 {
 border-bottom:2px solid #724745;
}

/* Título de la noticia, es un <a> que lleva a él */
#columnaizquierdainterior ul.listadointerior a,#columnaizquierdainterior ul.listacalendario a{
 /* padding-left:14px; Sangría izqda. título noticia */
/*cogemos <a> general  color:#007688; */
  text-decoration:none;
  
  /*Color enlace noticia,evento,... Poner el del h3*/
  /*cogemos del a general color:#1e008e;  */ /*CAMBIAR*/
}

#columnaizquierdainterior ul.listadointerior a:hover,#columnaizquierdainterior ul.listacalendario a:hover{
  /*Color enlace noticia,evento,...Poner el del h3:over (o menusecund:hover)*/
 /*cogemos del a general color:#990000;*/ /*CAMBIAR */
 font-weight:bold;
}

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



/* imagen de la noticia */
#columnaizquierdainterior ul.listadointerior li img{
     float:left;
     border:1px solid #1e008e;
     max-width:28% !important;  /* Para todos los navegadores */
     width:auto;  /* Para todos los navegadores */     
     margin-left:.4em;
     margin-right:5px; /*para separar el resumen que está a su derecha */
     margin-bottom:10px; /*separa el más-información */
     padding:15px 7px;
}

/*Hack IE6 pues no reconoce el max-width */
*html #columnaizquierdainterior ul.listadointerior li img{
      width: expression(this.width > 105? "28%":this.width);
}

/*Div que contene el resumen de la noticia*/
ul.listadointerior li div{
  margin-bottom:1em;
  width:95%; /*igual que paginación*/
}

/*resumen de la noticia */
ul.listadointerior li div p{
  margin:0;
  padding-right:0.2em;
}

.centrado {
  text-align:center;
}

/*************  CALENDARIO    **************/

#elcontenido ul.listacalendario li{
 background-image:none;

/*Para que no quede el estilo de contenido.css #elcontenido ul li*/
 padding-left:0;
}

/*Div que contene el resumen del evento*/
ul.listacalendario li div{
  margin-bottom:1em;
  width:95%; /*igual que paginación*/
}

/*Las img. llevan la clase flotaizquierda */
.listacalendario .flotaizquierda{
     float:left;
     max-width:28% !important;  /* Para todos los navegadores */
     width:auto;  /* Para todos los navegadores */     
     margin-right:5px; /*para separar el resumen que está a su derecha */
     margin-bottom:10px; /*separa el más-información */
}

/*Título del enlace. Es un <a> que lleva a él. */
/*
  Definidos comúnmente con noticias
#columnaizquierdainterior ul.listacalendario a,#columnaizquierdainterior ul.listacalendario a:hover
*/

#tablaagenda table{
  width:98%; 
  margin-bottom:1.5em;
  margin-top:0px;
  /*Color borde separador calendario - Categorías ver todas. CAMBIAR*/
  border-bottom: 1px solid #8f341f;
 /*Fuente*/
  font-size:85%;

 /*No separe bordes en IE*/
 border-collapse:collapse;
}

#tablaagenda table tr{
  background:none;
}

/* cuadro que tiene: << Mes >> */
#tablaagenda .calendar-month  {
  font-size:1.1em;
}

/*Texto << (ir a mes anterior) */
#tablaagenda span.calendar-prev { 
     float:left;
     color:#00996a;
     width:16px;
     height:16px;
 }

/*Contiene:    Febrero 2010  ..... es decir el mes y año */
#tablaagenda span.texto { 
     float:left;
     color:#00996a;
     width:80%;
     height:16px;
     text-align:center;
}


/*Texto >> (ir a mes siguiente)*/
#tablaagenda span.calendar-next {
    float:right; 
    color:#00996a;
    width:16px;
    height:16px;
}



#tablaagenda table caption {
  /*CAMBIAR color tabla calendario <<mes Noviembre >> */
  background:#724745;
  text-align:center;
  /*border-top: 1px solid #646100;*//*border*/
}

#tablaagenda table caption *{
  color:white;
  margin:0 auto;
}

/*Texto: Lun Mar Mie Jue Sab Dom que es subcabecera */
#tablaagenda table th{
  padding:0;

 /*color de texto y fondo: CAMBIAR */
  color:#fff;
  background:#8d7170; /*CAMBIAR Color fondo del título: lun mar mie jue...*/

  text-align:center;
  font-weight:normal;
}


/*dias sin eventos: en negro*/
#tablaagenda table td{
  padding: 0 0 5px;
  text-align:center;
  border: none;
  color:#000; 
}

/*hoy*/
#tablaagenda table td.calendar-today{
  background-color:#e7d9d8;
}

/*días con eventos*/
#tablaagenda table td a{
  /*Dejamos del <a> general color:#1e008e; */
  color:#724745;
  line-height:1.8em;
} 

/*Over sobre días calendario con eventos <a> */
#tablaagenda table td a:hover{
   color:#d93637;
   text-decoration:underline;
}


#tablaagenda table .calendar .texto {
   padding-top:3px;
   width:128px;
}


/*********** FIN GALERIAS, ENLACES, NOTICIAS, CALENDARIO **************************/

/**********************TABLAS ************************/
table{
   margin-bottom:1.4em; 
   width:95%;
   margin:6px auto 7px; /*centramos la tabla*/
  /*Color de cada fila */
   background:#fafafa; /*#f6f6f6;*/ /*CAMBIAR*/

  /*color borde limites superior e inferior tabla 
   border-top:2px solid #47100e; /*CAMBIAR línea-separador*/
   border-bottom:2px solid #47100e;  /*CAMBIAR línea-separador*/
   border:1px solid #47100e;

  border-collapse:separate;
   border-spacing:0;
}

table.mitadancho{
      width:60%;
}

table thead tr *{
   color:#fff;       
}

table thead td, table thead th{    
   font-size:1.2em;

   /*color cabecera tabla background */
   background:#724745; /*CAMBIAR*/

  /*color borde inferior cabecera tabla que junto a los bordes sup-inf de la tabla la delimitan*/
   border-bottom:2px solid #47100e;  /*CAMBIAR línea-separador*/
  /*border-left:1px solid #cfdecf;*/ /*separador columnas */

  /*   text-align:center;	 que el usu alinee como quiera, pues al poner esto siempre 
        centra (lo cual puede confundirlo) y además puede que no quiera el centrado.
  */
}

/*SUBCABECERAS  <th> Dentro de tbody->tr->th, subcabecera dentro del body */
table tbody tr th {
  background:#8d7170 none repeat scroll 0 0; /*CAMBIAR color Sub-cabecera */
  border-bottom:2px solid #47100e; /*CAMBIAR,  he puesto mº color cabecera-tabla */
  font-size:0.9em;
  color:#fff; /*CAMBIAR color texto dentro del background */
  font-weight:bold;
  text-align:center;
}

table tbody tr td{
   border-bottom:2px solid #fff;
   border-left:2px solid #fff;
   padding-left:0.5em;
   padding-right:0.5em;
}

table, td, th {
vertical-align:middle;
}

/* SubCabeceras definidas dentro del body con <th> */
table th a.asc{   
   padding-right:15px;
}
table th a.desc{
   padding-right:15px;
}
table td.importe{
   text-align:right;
   white-space:nowrap;
   font-size:0.9em;
}
table td.descripcion{
   font-size:0.9em;
}
table td.fecha{
   font-size:0.9em;
}

table td.sinsalto{
   white-space:nowrap;
}

/*texto dentro de la tabla*/
#elcontenido table tbody p {
 /*Anulamos estilo #elcontenido p en Generales */
 margin-right:2px; 
 margin-left:0px;
}

/*Imágenes dentro tabla*/
table img{
   margin:0.2em;
   border:none;
   float:none;
}


/*** GUIA DE TRAMITES **/

/*************************************/
/*Solución problema telemático label-input */
.radio_tramites span{
    width:90%;
    display:block;	
    font-weight:bold;			   
}
				
.radio_tramites label{
   width:45%;
   margin-left:15px;	
   font-style:italic;			
}
				
.radio_tramites input{
   float:left;				
} 
/*************************************/


/*Sello de tiempo */
.sello a {
background:transparent url(http://www.dipucordoba.es/inc/eadmin/contratacion/img/sello.gif) no-repeat scroll right top;
float:none;
line-height:25px;
padding-right:25px;
padding-top:6px;
text-decoration:none;
}

/*
   Ya no lo uso lo he puiesto como en las tablas normales con <th> en vez de
    <td class="titulocategoria"
*/
/*Todo definido en tablas menos las categorías que se meten en trámites */
#columnacentroancha td.titulocategoria,#columnacentro td.titulocategoria {

  /*
     -color sub-encabezados de la tabla definidos como td.titulocategoria en Trámites
     -En otras tablas están definidas como <th>
  */
  background:#ebe5df none repeat scroll 0 0;

  border-bottom:1px solid #770606;
  font-size:1.1em;
  font-weight:bold;
}

/******************    GOOGLE MAP ***************************/
#map{
   margin:0 auto;
   width:481px;
   height:323px;
   clear:both;
   border:1px solid #8f341f;
   position:relative;
   margin-left: 2em auto;
   margin-bottom:1.2em;
}
#map img{
  border:none;
  margin-left:0;
  padding:0;
}

/* End of 'comun' */

/* Start of CMSMS style sheet 'portada' */
/****************************/
/* PORTADA IZNÁJAR                    */
/***************************/

/***** 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
*/


#contenidomenuprincipal {
 margin-bottom:8px;
}

/************/
body {
     /*Varía el fuente: Texto-> Trebuchet 10px*/
     font-family:Trebuchet MS,Arial,sans-serif,Verdana,Times New Roman;
     font-size:62.5%;    
}


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

/***********************************************************************/
/*                     SOBREESCRIBIMOS VARIACIONES SOBRE COMUN.CSS                              */


h4{
 border:none;
}
h3 {
    /*Trebuchet 14px bold */
    font-family:Trebuchet MS,Arial,sans-serif,Verdana,Times New Roman;
    font-size:1.4em;
    line-height:2em; /*Centramos el texto verticalmente */
    font-weight:bold;
    color:#691816;
    text-align:leftt;
    margin:0;
}
/***********************************************************************/


/*DISEÑO PORTADA */


/* CONTENEDOR ya definido en comun #contenedor{} */

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


/* h3 general para todos los escaparates en verde */
h3.h3verde {
  float:left;
  overflow:hidden;
  width:154px; /*+pad=170*/
  height:23px;
  padding-left:16px;
  background: transparent url(/uploads/iznajar/h3-verde.gif) no-repeat left top;
}



/**********  ENLACES-PORTADA **********/
#enlaces-portada {
   float:left;
   width:170px;
   overflow:hidden;
}

#enlaces-portada ul{
   float:left;
   width:166px; /*+pad=170*/
   overflow:hidden;
   /*Cuerpo hecho con bordes*/
  border-left:2px solid #85a98f;  border-right:2px solid #85a98f;

   /*Márgenes*/
   padding-top:6px;
  /*No, mejor centramos los <li>padding: 4px 0 0 10px;*/

}

#enlaces-portada ul li{
   /*float:left;*/
   margin:0 auto 4px; /*centramos*/
   overflow:hidden;
   width:154px; /*186 ancho img*/
   height:58px; /*58 alto imagen*/
 }

/*Hack IE6-7*/
*:first-child+html #enlaces-portada ul li  {
   margin:0 auto; 
}
* html #enlaces-portada ul li  {
   margin:0 auto; 
}

#enlaces-portada li img {

   /*Para que el texto puesto por la plantilla vaya a su derecha y no debajo de la imagen*/
  float:left;
  width:154px;
  height:58px;
  
  /*Quitamos margin heredados. */
  margin:0;
  padding:0;
}

#enlaces-portada li a{
   float:left;
   overflow:hidden;
  /*ancho/alto imagen*/
  width:154px;
  height:58px;
}

#enlaces-portada p.vertodo {
  float:left;
  overflow:hidden;
  width:170px; 
  height:15px; /*15=alto imagen cierre escaparate-derecho-down.gif */

  /*Img. inferior del div: coger bastantes pixels de sobra en alto para poder situar elem. en vertical*/ 
  background: transparent url('/uploads/iznajar/e-verde-down.gif') no-repeat left bottom;
}

#enlaces-portada p.vertodo a {
    float:right;
    margin:1px 12px 0 0; /*situamos el <a>*/
   /*Texto heredado del body, tamaño,*/
    line-height:1em;
    color:#47100e;   
}

#enlaces-portada p.vertodo a:hover {
  text-decoration:underline;
}

/**************************************************************/
/*                                 AGENDA                                                                */
/*        AQUÍ SALE UN CALENDARIO TIPO ALMANAQUE                   */
/**************************************************************/

#calendario-portada{
   width:204px;
   float:right;
   overflow:hidden;

  /*Cuerpo*/
/*  border-left:1px solid #691816;
  border-right:1px solid #691816;*/
/*  background: transparent url('/uploads/iznajar/e-i-d-cuerpo.gif') repeat-y left top;*/

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

#calendario-portada h3 {
   float:left;
   overflow:hidden;
   width:188px; /*+pad=204*/
   height:23px;
   padding-left:16px;
  /*Img cabecera: coger bastantes pixels de sobra en alto para poder situar elem. en vertical*/ 
  background: #e1d4b3 url('/uploads/iznajar/e-i-d-h3.gif') no-repeat;

}

/*Contiene la tabla calendario*/
#contenido-calendario {
 float:left;
 overflow:hidden;
 width:202px;
/*  background: transparent url('/uploads/iznajar/e-i-d-cuerpo.gif') repeat-y left top;*/
  border-left:1px solid #691816;  border-right:1px solid #691816;
 
}


/***/
/*  CALENDARIO: CSS con la Tabla que contiene un calendario con el mes actual  */
/***/

/*Tabla con el calendario: contiene todo: Mes actual, ir anterior, días, ...*/
#calendario-portada table{
 /*Los bordes están definidos por las celdas:  border:1px solid #93734f; */
  clear:both;  
  margin:0 auto;
  overflow:hidden;
  padding:0;
  width:90%;
  border-bottom:1px solid #691816;
}

/*Contiene:         <<           Mes            >>                           */
#calendario-portada .calendar-month {
  border:none;
  margin:0 auto;
  text-align:center;
  height:22px; /*ponemos más alto la cabecera */
}

/*Todos los elementos de la parte superior de la tabla: << Mes Año >> */
#calendario-portada .calendar-month * {
    color:#724745;
    font-size:1.1em;
    line-height:1.7em; /*centramos  << mes año >>    dentro del .calendar-month */
    font-weight:bold;    
}

/*Texto << (ir a mes anterior) */
#calendario-portada .calendar-month span.calendar-prev { 
     color:#00996a;
     width:16px;
     height:16px;
 }

/*Contiene:    Febrero 2010  ..... es decir el mes y año */
#calendario-portada .calendar-month span.texto { 
     color:#00996a;
     height:16px;
     text-align:center;
}


/*Texto >> (ir a mes siguiente)*/
#calendario-portada .calendar-month span.calendar-next {
    color:#00996a;
     width:16px;
     height:16px;
}

/*Las celdas de los días: Lun Mar Mie.... */
#calendario-portada table tbody th {
  background-color:#724745; /*CAMBIAR*/
 /* border:1px solid #6b3528; */ /*CAMBIAR*/
  color:#fff;
  font-size:1.2em;
  line-height:1.5em;
  text-align:center;
}

/*Las celdas de los 31 días del mes del calendario. Aquí son los días donde
  no hay eventos*/
#calendario-portada table tbody td {
    font-size:1.2em;
    padding:4px 0px 4px 2px;

    /*Color días del calendario*/
    color:#000; /*CAMBIAR*/

    /*Borde y fondo celdas */
   /* border:1px solid #6b3528;*/ /*CAMBIAR
    background:#fff;  /*CAMBIAR*/
    text-align:center;
}


/*Color día actual */
#calendario-portada table td.calendar-today, #calendario-portada table td.calendar-today a{
    background-color:#e7d9d8;
}

/*Días en calendario con eventos definidos */
#calendario-portada table tbody td a{
  font-weight:bold;
  color:#724745;
  background:none;
  display:block;
  width:100%;
  height:100%;
}

/*Over sobre días calendario con eventos <a> */
#calendario-portada table tbody td a:hover{
   color:#d93637;
   text-decoration:underline;
}

#calendario-portada p.vertodo {
  float:left;
  overflow:hidden;
  width:204px; 
  height:15px; /* +pad = 15=alto imagen cierre escaparate-derecho-down.gif */

  /*Img. inferior del div: coger bastantes pixels de sobra en alto para poder situar elem. en vertical*/ 
  background: transparent url('/uploads/iznajar/e-i-d-down.gif') no-repeat left bottom;
}

#calendario-portada p.vertodo a {
    float:right;
    margin:1px 12px 0 0; /*situamos el <a>*/
   /*Texto heredado del body, tamaño,*/
    line-height:1em;
    color:#47100e;   
}

#calendario-portada p.vertodo a:hover {
  text-decoration:underline;
}

/*** ENLACES DESTACADOS **********/
#enlaces-destacados {
   width:204px;
   float:right;
   overflow:hidden;

  /*imagen inferior*/
  padding-bottom:15px;
  background: transparent url('/uploads/iznajar/e-i-d-down.gif') no-repeat left bottom;

}

#enlaces-destacados h3 {
   width:188px; /*+pad=204*/
   height:23px;
   padding-left:16px;
  /*Img cabecera: coger bastantes pixels de sobra en alto para poder situar elem. en vertical*/ 
  background: #e1d4b3 url('/uploads/iznajar/e-i-d-h3.gif') no-repeat;


}

/*Hack IE6: evitar separación entre la img-top y la img-borde (hecha con border= */
*html  #enlaces-destacados h3 {
 line-height:1.6em;
}

#enlaces-destacados ul {
  /*Separamos la imagen que hace de h3 del ul y establecemos margen-izquierdo*/
   float:left;
   width:198px; /*tot=204*/
   padding:8px 0 0 4px;
  /*cuerpo hecho con borde*/
   border-left:1px solid #691816;  border-right:1px solid #691816;
   overflow:hidden;
}


#enlaces-destacados ul li {
   float:left;
   overflow:hidden;
   width:194px;
   height:26px; /*altura img bk es 19px, aquí damos un margen*/
  /*imagen <li> */
  background: transparent url('/uploads/iznajar/destacados-li-bk.gif') no-repeat left top;
 }

#enlaces-destacados ul li a {
 /*hereda el texto del body:*/
  color:#47100e;
  font-size:1.2em;
  line-height:1.5em;
  padding-left:14px;
}

#enlaces-destacados ul li a:hover {
 /*cogemos el italic del general*/
 text-decoration:underline;
}

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

/*sub-escaparate a la izquierda*/
#e-d-i {
 float:left;
 overflow:hidden;
 width:340px;

}

/*sub-escaparate a la derecha*/
#e-d-d {
 float:right;
 overflow:hidden;
 width:170px;

}



/* h3 general para todos los escaparates rojo grande */
h3.h3rojogrande {
  float:left;
  overflow:hidden;
  width:324px; /*+pad=340*/
  height:23px;
  padding-left:16px;
  background: transparent url(/uploads/iznajar/e-d-top.gif) no-repeat left top;
  margin:0;
}

/*Hack IE6: aunque está en la cabecera provocaba que al pie en la galería se duplicaba la img*/
*html h3.h3rojogrande {
 float:none;
}


/*** NOTICIAS PORTADA **********/
/*h3 lleva la img. de cabecera, la img. del cuerpo (de alto un pixel con sombra a la derecha va el el <ul> y en <ver-mas> va la img. del pie. Nota: las imgs. de cabecera y pie coger bastante altura para poder juegar a la hora de situar los elementos */

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

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


#noticias-portada ul{
  overflow:hidden;
  width:318 px; /*+20 padding +2 borde = 340*/
 /*Sin height, por si pone titulos de noticias largos, no se solapen */

  /*cuerpo hecho con borde*/
   border-left:1px solid #691816;  border-right:1px solid #691816;
  /*background: transparent url('/uploads/iznajar/e-i-cuerpo.gif') repeat-y left top;*/

  
  /*Separamos la imagen que hace de h3 del ul y establecemos margen-izquierdo*/
  margin:0;
  padding:5px 10px 0 10px;

}

#noticias-portada ul li{
   width:318px; /*318=padre*/
   overflow:hidden;
  /*Sin height, por si pone titulos de noticias largos, no se solapen */
   padding: 4px 0px 12px 0;
 }

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

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

/*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);
}


#noticias-portada h4{
   text-decoration:none;
   width:318px;
   margin:0em;
  /*separamos el h4 del resumen*/
   padding:0 0 5px 0px;
   text-align:left;
   /*letra establecida en comun.css*/
   font-size:1.2em; /*11px*/
   line-height:1em;
   color:#0b5420;
}

/*texto encabezado noticia dentro del h4*/
#noticias-portada li a{
     /*Texto: Establecido en h4, y en comun */
     color:#0b5420;
     text-decoration:none;
  
    /* Separamos de la izqa. */
    padding-left:0;
}

#noticias-portada li a:hover {
  /* color:#d93637;*/
   text-decoration:underline;
}

/*Texto resumen*/
#noticias-portada ul li div{
   /*Texto heredado del body, tamaño, color, etc...*/
   font-size:1em; /*10px y en portada-body se puso a 10px*/
   line-height:1.2em;
   color:#2b2928;
   /*No ponemos width-height para que flote alrededor de la imagen */
}

/*Fecha inicio de la noticia, análogo al formato habitual de los eventos */
#noticias-portada .masinformacion {
 /*texto=body y 10px.*/
  font-size:1em;
  text-align:right;
  color:#7d3735;

 /*márgenes y situación*/
  margin:0;
  padding:0;

 /*Abajo*/
 clear:both;
}


#noticias-portada p.vertodo {
  float:left;
  overflow:hidden;
  width:340px; 
  height:15px; /* +pad = 15=alto imagen cierre escaparate-derecho-down.gif */

  /*Img. inferior del div: coger bastantes pixels de sobra en alto para poder situar elem. en vertical*/ 
  background: transparent url('/uploads/iznajar/e-d-down.gif') no-repeat left bottom;
}

#noticias-portada p.vertodo a {
    float:right;
    margin:1px 12px 0 0; /*situamos el <a>*/
   /*Texto heredado del body, tamaño,*/
    line-height:1em;
    color:#47100e;   
}

#noticias-portada p.vertodo a:hover {
  text-decoration:underline;
}

/*****GALERIA PORTADA ************************************************/
#galeria-portada {
   width:340px;
   float:left;
   overflow:hidden;
}

#galeria {
  width:340px;
  float:left;
  overflow:hidden;
}

#galeria-portada ul{
  float:left;
  overflow:hidden;
  width:334px; /*+4padding+2 borde = 340*/
 /*Sin height, por si pone titulos de noticias largos, no se solapen */
 /* height:164px;*/ /*problemas con IE6 que si no lo ponemos el ul es estrecho con abarcando los li*/
 
  /*cuerpo hecho con borde*/
   border-left:1px solid #691816;  border-right:1px solid #691816;
  /* background: transparent url('/uploads/iznajar/e-i-cuerpo.gif') repeat-y left top;*/
  
  /*Separamos la imagen que hace de h3 del ul y establecemos margen-izquierdo*/
  margin:0;
  padding-top:15px;
  padding-left:4px;

}

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

    /*Mínima altura li */
    height:80px; /*Debe ser más alto q la imagen que irá dentro de él. La <img> es de 67 alto*/
  
  /*Jugar con este para la anchura de los li y que en la <img> se vea el borde. Además
   variaremos la altura de la <img>. Ad+ variando aquí tendremos 2-3 imgs por fila*/
   width:31%;  /*31% son 3 img. por fila, 44% son 2 por fila */
  
    /*margen entre los li . margin:0.2em*/
    margin:2px; 

   /* Eliminamos marcos del thumb y padding que dejan la imagen dentro del marco */
    background:none;
    border:none;
    padding:0px;

}

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

  /*Anulamos estilos que poner por defecto*/
  background-color:transparent;
  border:none;
  padding:0;
  margin:0;
}

/*Anulamos estilos generales de a:hover, sino en IE las <imgs> se mueven al pasar por ellas */
#galeria-portada li.thumb a:hover {
  font-style:normal; /*si ponemos italic, se mueven las <img> en IE */
}

/*La img siempre más estrecha y baja que el <li> */
#galeria-portada li.thumb img{
    border:1px solid #85a98f;
    max-width:95%; /*La img no debe llegar al 100% del li, sino no se verá su borde */
    /*Como <img> en portada son 104px, ese 95% debe equivaler a 104px*/
   /*Jugar con la altura de la imagen además de con el width de li.thumb */
    height: 67px; /*altura imagen*/
    margin:0 auto !important;
    float:none; 
}

/*Hacks IE6 IE7 para max-width, max-height */
* html #galeria-portada li.thumb img {
       /*mediremos en firefox para ver ese 95% cuantos pixels son y aquí ponemos algo menos
        pues el ancho del li siempre debe ser superior al img. Recordemos que son el 95% del tamaño
        del <li> siendo este el 44%.*/
      width: expression(this.width > 104? "104px":this.width);
     /*Como <img> en portada son 104px, ese 95% debe equivaler a 104px. No obstante al haber
        puesto los 368px del diseño como width de galería, valdrá poner los 104px del width de <img>
        puesto en diseño.*/
}

#galeria-portada span{
  float:left;
  overflow:hidden;
  width:340px; 
  height:15px; /* +pad = 15=alto imagen cierre escaparate-derecho-down.gif */

  /*Img. inferior del div: coger bastantes pixels de sobra en alto para poder situar elem. en vertical*/ 
  background: transparent url('/uploads/iznajar/e-d-down.gif') no-repeat left bottom;
}

#galeria-portada span.ver-mas a {
    float:right;
    margin:1px 12px 0 0; /*situamos el <a>*/
   /*Texto heredado del body, tamaño,*/
    line-height:1em;
    color:#47100e;   
}

#galeria-portada span.ver-mas a:hover {
  text-decoration:underline;
}

/************ ENLACES - TRAMITES ********************************/
#enlaces-tramites {
    float:left;
    width:170px;
   
    /*img al pie*/
    padding-bottom:15px;
    background: transparent url('/uploads/iznajar/e-verde-down.gif') no-repeat left bottom;

   /*separamos siguiente*/
   margin-bottom:20px;
}


#enlaces-tramites ul{
   float:left;
   overflow:hidden;
   width:160px; /*+pad+borde=170px. Necesario por IE6-7*/
   padding: 10px 0 0 6px;
   /*Cuerpo hecho con bordes*/
   border-left:2px solid #85a98f;  border-right:2px solid #85a98f;

}

#enlaces-tramites ul li{
   float:left;
   overflow:hidden;
   width:158px;

   /*separamos siguiente li*/
   margin-bottom:5px;
}


#enlaces-tramites li img {

   /*Para que el texto puesto por la plantilla vaya a su derecha y no debajo de la imagen*/
  float:left;
  width:31px;
  height:34px;
  
  /*Separamos el texto a su derecha. */
  margin-right:6px; 
}

#enlaces-tramites li a{
     float:left;
     
     /*Para que quepa en una línea */
     /*width:136px;height:37px;*/
     /*Texto=body */
     font-size:1.1em;
     font-weight:bold;
     line-height: 3em; /*centramos el texto respecto la imagen*/
     color:#09441a;
     text-align:left;
}

#enlaces-tramites li  a:hover {
  text-decoration:underline;
}

/************ ENLACES INFO UTIL ********************************/
#info-util {
    float:left;
    width:170px;
   
    /*img al pie*/
    padding-bottom:15px;
    background: transparent url('/uploads/iznajar/e-verde-down.gif') no-repeat left bottom;
}


#info-util ul{
   float:left;
   overflow:hidden;
   width:160px; /*+pad+borde=170px. Necesario por IE6-7*/
   padding: 10px 0 0 6px;
   /*Cuerpo hecho con bordes*/
   border-left:2px solid #85a98f;  border-right:2px solid #85a98f;

}

#info-util ul li{
   float:left;
   overflow:hidden;
   width:158px;

   /*separamos siguiente li*/
   margin-bottom:5px;

}


#info-util li img {

   /*Para que el texto puesto por la plantilla vaya a su derecha y no debajo de la imagen*/
  float:left;
  width:37px;
  height:38px;
  
  /*Separamos el texto a su derecha. */
  margin-right:4px; 
}

#info-util li a{
     float:left;
     
     /*Para que quepa en una línea */
     /*width:136px;height:37px;*/
     /*Texto=body */
     font-size:1.1em;
     font-weight:bold;
     line-height: 3.5em; /*centramos el texto respecto la imagen*/
     color:#09441a;
     text-align:left;
}

#info-util li  a:hover {
  text-decoration:underline;
}

/* End of 'portada' */

