/************** GENERAL ****************/
body{
	margin: 0 auto;
	padding: 0px;
	background-color: #111608;
	font-family: Verdana,Arial,sans-serif;
	font-size: 12px;
	color: #333;
	height:100%;
}

input, textarea{ /* si no es posa aixo la font del missatge de contacte es diferent */
	font-family: Verdana,Arial,sans-serif;
	font-size: 12px;
}

a{color:#F01400; text-decoration: none; font-weight:bold; 
border:0px; outline:none; padding-bottom:1px;}
a:hover{ border-bottom:dotted #000000 1px;}
	
img{border:0px;}

p{
	margin-top:10px;
	padding:0px;
}

ul.llista li{margin-bottom:10px;}
	
.centrat{ /* per si es vol centrar horizontalment algun element. es poden afegir parametres si els elements centrats han de tenir altres caracteristiques comunes */
		text-align:center;
	}	
	
/* ======  on va el nom de la seccio */
#titol_seccio{
	font-size:14px;
	font-weight:bold;
	padding:5px; /* el padding es util quan hi han icones (imatgetes de fons) a cada titol de seccio */
	margin-bottom: 9px;
	text-align:left;
	padding-left:0px;
	}


/*============= estructura del template =================*/

	

#embolcall{  /*tota la pagina. es centra al navegador per margin: 0 auto*/
	  
	  background:#D4C39B; /*color de fons a la columna on es el menu, si no posem color a embolcallPag*/
	  width: 957px;
	  margin:0 auto;
	  border-left:7px solid #574531;
  	  border-right:7px solid #574531;
	}
	
#embolcall2{  /*per afegir foto de fons per sobre del fons repetit verticalment a embolcall*/
	  /*background:  url(../../img/fons-amb-degradat.jpg) top no-repeat ;*/
	  }
	  
	  
#idiomes{ /* barra idiomes a dalt de tot */		
		min-height:16px;
		height:auto !important; /*alçada minima s'estira si l'usuari fa les fonts mes grans al navegador, i no es solapen continguts*/
		height:16px;
		padding:4px;
		padding-right:16px;
		text-align:right;
		color:#9F6930;
		padding-top:74px;
	}
	
	
#idiomes a{	
	color:#B7AE8D;
}	


#idiomes div{/* posar display:none; si no calen idiomes*/
		/*display:none;*/
	}
	
	  
#capsalera{ /* a dintre de la capçalera normalment hi ha  un altre div amb el logo que linka a index */
	width:957px;
	text-align:center;	
	height:292px;
	background:#574531;
	background:url(../../img/capselera.jpg) no-repeat #574531;	
}
	  
	#logo{
		padding-top:30px;
		text-align:center;
	}
	
	
#embolcallPag{/*els continguts entre la capçalera i el peu: menu i contingut */
	/*background:#666;	... si es vol, pot servir de color de fons de la columna mes curta (menu), contingut i peu. */
	
	}


/*================== MENU ===================*/

#barra_menu{/*contenidor del menu horizontal*/
	background: url(../../img/fondo_menu.jpg);	
	width:760px;
	display:table;
	border:7px solid #574531;
	border-bottom:0px solid #574531;
	border-right:0px solid #574531;
	text-align:right;
	float:right;
	margin-top:152px;
	height:39px;
	font-size:14px;	
	color:#D4C39B;	
			*height:38px;
			*margin-top:153px;
	}	
	
/* menu horizontal a sota de la capçalera*/ 


#barra_menu	 ul {	
		margin:0px;
		padding:0px;/* es bo */
		padding-top:12px;
		padding-bottom:9px;
		list-style-type: none;
		/*menu centrat. per alinear-lo a un costat: canviar el text-align:center per left (per defecte) o right */
		text-align:center;
		}
		
#barra_menu ul li{	
		display:inline;
		font-weight: bold;
		text-align:center;
		padding:0px;
		}
		
		
	
/*els estats dels "botons" del menu*/

#barra_menu ul li.itemMenuOn {
	color: #fff;
	padding:22px;
	padding-left:0px;
	padding-right:0px;
}

#barra_menu ul li a{		
	padding-left:5px;
	padding-right:5px;
	padding-top:12px;
	padding-bottom:10px;
		color:#D4C39B;
	}
	
#barra_menu ul li a:hover{
	background:url(../../img/fondo_menu_on.jpg);			
	color:#2D2115;		
	border-bottom:none;
}
	


.separador{
margin:0px;
padding:0px;

}





#columna_esquerra{/* columna lateral, normalment a l'esquerra i normalment te el menú*/
	width:197px;
	height:	590px;
	font-family: tahoma, Arial, sans-serif;
	float:left;	
	background:#574531;
		}
		




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

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


#columna_dreta{	/* normalment aqui va el contingut principal de la pagina a la dreta del menu*/
	width:760px; /*l'amplada total es aixo més el padding d'esquerra i dreta! */
	
	float:left;
	text-align:left;
	margin-bottom: 20px;
	background:#D4C39B url(../../img/fondo_emboll.jpg) repeat-x;
	}
	
.camisa_contingut{/* per contenir el contingut (valga la rebuznancia). aixo fa que no calgui especificar marges ni paddings al div columna*/
	margin: 20px;
	margin-bottom: 0px;	
	}
	
	
#sobre_peu{ /* extra div per fer les cantonades arrodonides entre el contingut i el peu. 
	 si no es necessita es pot amagar*/
	display:none; 
	background:transparent;
	height: 16px;
	float: right;
	width:990px;
	}
	
#peu_general{
	background: #574531;
	display:table;
	padding:4px;
	padding-left:0px;
	padding-right:0px;
	color:#B7AE8D;	
	width:960px;
	margin-bottom:20px;
	margin:0 auto;	
	padding-top:8px;
	}
	
		
	#logo_peu{
	float:left;
	margin:0px;
	padding:0px;
	padding-left:16px;	
	}
	
	#logo_peu a{
		font-weight:bold;
		color:#B7AE8D;	
	}
	
	#links_peu{
	float:right;
	margin:0px;
	padding:2px;
	padding-right:2px;
	margin-right:14px;
	}
	
	#links_peu a{
		font-weight:bold;
		color:#B7AE8D;	
	}
	
	#links_peu a:hover{
		color:#20160C;
	}

	

/*#######################################################################################################*/	
/************************************************ NOTICIES **************************************************/

	/*================== noticies llista ========================*/

#llista_noticies{
	clear:both;
	margin-top:20px;	
	width:100%;
	}
	

	
#noticia{
	display:block;
	}
	
#noticia_destacada{/*per si les noticies de portada (Box) han de ser diferents que les de list*/
	display:block;
	}	

.odd_item{/*per alternar color de noticies descomentar el color de fons */
		/*background:#fFfCeF; /* */
	}

#espaiador{/*per asegurar-nos de que no es solapen les noticies. se li pot donar alçada i/o marges verticals si no es fa servir la linia horizontal per separar noticies */
		clear:both;
	}	
	
#linia_horizontal{/*per fer linies divisories entre noticies*/
	width:100%;/* a vegades queda mes be si no ocupa tota l'amplada*/
	height:1px;
	border-bottom: 1px dashed gray;
	margin: auto; /* per centrar la linia en cas que l'amplada sigui menys de 100% */
	margin-top:5px;
	margin-bottom:10px;
	}
	
		
#imatgenoticia{
		width:150px; /*l'amplada de foto que s'especifiqui als tpls de news*/
		margin:0px;
		padding: 0px;
		float:left;
		text-align:center;	/*per centrar la imatge*/	
	}
	
#imatgenoticia img{
		
		}
	
#textnoticia {/*inclou titol data i resta de continguts de la noticia. tot excepte la imatge. */
		
		float:right;
		width:550px;	/* ha de ser l'amplada que ocupi tota la noticia menys la foto (i l'espai entre la foto i el texte que es vulgui) */	
		display:table;
	}
	
#textnoticia_ampla{ /*per les noticies sense foto*/
		
		width:100%; /*ha de ser la mateixa width que #noticia*/		
		display:table;
	}
	
#textnoticia p, #textnoticia_ampla p{
		text-align: justify;
	}
	
	
#noticia_titoldata{/*el bloc que engloba titol i data de la noticia*/
		/*background:#dFdCcF;*/
		margin-right:0px;
		margin-bottom:4px;
		position:relative;
	}
	
#titol_noticia{
		float:left;
		clear:right;
		font-size:12px;
		font-weight:bold;
		padding:0px;
		/*width:500px; /* si no es necessita la data de la noticia, la amplada del titol es pot omitir*/
		
	}	

#textnoticia_ampla #noticia_titoldata #titol_noticia{/*el titol de noticia sense foto es més ample. si no hi ha data, no cal posar width */
	/*width:640px;*/
	}

	
#titol_noticia a{
	padding:0px;
	/*color:#7A716A;*/
	}

#titol_noticia a:hover{
	/*color:#532504;*/
	}	
	
/* si la data no es mostra, s'han de fer els titols de noticia sense width, per a que ocupin tot l'espai disponible*/
#data_noticia{
		display:none;  /*es pot amagar la data si no es necessita*/
		float:right;
		text-align:right;
		vertical-align:text-bottom;
		width:80px; /*aquest amplada ha de ser suficient per a que hi capiga la data! */
		padding-right:2px;
	}
	
#noticia_sumari{/* sumari a 'list' i 'box' i descripcio a 'card' */
		width:100%;
	}
	
#noticia_sumari p{		
		/*padding:4px; /*per si es vol indentar el texte de sumari/descripcio*/
		}
	
#links_news{/*enllaç al peu de la noticia*/
	margin-top:20px;
		margin-left:4px;
		font: normal 12px Arial, Helvetica, sans-serif;
		}
		
#links_news	a{
	font-weight:normal;
}	
		
#llegir_mes{/*link per anar a la noticia individual, tot i que el titol tambe hi enllaça*/
		float:right;
		padding:4px;
		
	}
	
#llegir_mes a{
	font: bold 12px Arial, Helvetica, sans-serif;	
	}
	

/*noticia individual (card)*/
	
	#tornar{/*el link per tornar enrera*/
		float:right;
		text-align:right;
	}


/* paginacio superior, inferior i links "altres noticies" */
	#paginacio_nums{
		
		text-align:center;
		margin-bottom:20px;
	}
	
	.num_destacat{
		font-weight:bold;
		color:#FF9900;
	}
	
	
	
#paginacio_inferior{
		clear:both;
		margin-top:20px;
		margin-bottom:-20px;
		
		
		text-align:left;		
		margin-top:17px;
		
	}
	
#paginacio_inferior a{
		/*color:#171796;*/
		padding:5px;
		padding-left:10px;
		padding-top:0px;
		
	}
	
	
	
#anteriors{
		float:left;
		padding:10px;
	}
	
	
#seguents{
		float:right;
		text-align:right;		
		padding:10px;
		
	}
	
#altres_news{
	text-align:center;
	font-size:16px;
	margin-top:20px;
	}
	
/* ************************************ calendari ******************************************************* */

.today{
	border:1px solid;
}

.todayevent a{
	color:yellow;
}
	
/*#######################################################################################################*/	
/* ********************************** formulari contacte ************************************************ */


#dades_client{
	float:right;
	margin-bottom:20px;
	}
	
#dades_client img{
	margin-right:12px;
	}
	
#dades_client p{
	padding-top:0px;
	line-height:1.5em;
}

	
#contactar{
	float:right;
	margin-right:65px;
}



#contactar #camps_basics{
	float:right;
	margin-right:265px;
}



#contactar #base{ /*assumpte i missatge van aqui*/
	width:100%; /* per IE */
	margin-top:20px;
	margin-right:0px;
	clear:both;
	float:right;

	
}


#contactar div{
	vertical-align:middle;
	text-align:right;
	margin-bottom:7px; /*separacio vertical entre camps*/
}

#contactar .error{
	background-color:#FFFF66;
}

#contactar .estret div input{/* camp de texte normal*/
	width:220px;
	margin-left: 10px;
}

#contactar .ample div input, #contactar .ample div textarea{/* camp de texte ample*/
	width:470px;
	margin-left: 10px;
	margin-right:15px;
}

#contactar .ample .controls input, #contactar .mes_ample .controls input { /*amplada dels botons del formulari*/
	width:100px;
}

.fix_missatge{
	float:right;
	text-align:right;	
	height:5em;
}

textarea {
	float:right;
}

.controls{
	clear:both;
	float:right;
}

#errors{
	clear:both;
	margin:20px;
	color:black;
	opacity:.80; /*experiments amb transparencia*/
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	}	
	
#errors p{	
	padding:5px;
}

/* ************************************* ubicacio google maps ******************************************** */
#map{
	border:2px ridge black;
	height:400px;
	width:700px;
	margin-left:0px;
	float:left;
}

#map .bubble {
	width: 200px; 
	padding-right: 10px; 
	color:#333333; 
	font-size:12px;
	}

/* *************************************** galeria flash ******************************************* */

#flash_galeria{
	float:left;
	padding-top:17px;
		*padding-top:0px;
}


#categories_galeria{
	float:right;
	width:150px;
	background:url(../../img/fondo_gale.jpg) repeat-x;
}

#categories_galeria h4{
	padding-left:15px;
		*font-size:12px;

}


/** CATALEG **/

/*****************************************************   CATALEG ****************************************************/

/** Arbre de categories **/
#arbre{
		clear:both;
		margin-top:20px;
		background: #D9E9FA;	
		text-align:left;		
		margin-top:17px;
		margin-right:-15px;
		margin-bottom:10px;
		padding:0px;
		
	}

#arbre ul{
	padding-top:5px;
	padding-bottom:1px;
	padding-left:45px;
	font-size:12px;
	font-weight:bold;
	color:#171796;
}

#arbre ul li
{
display:inline;
line-height:2em;
padding-right:5px;
padding-left:5px;
}

#arbre ul li a{
		color:#171796;
}


/*molles de pa*/
#molles{
		background: #B9D5F5;		
		text-align:left;
		margin-top:2px;
		margin-right:-15px;
		margin-left:15px;
		margin-bottom:8px;
		padding:0px;
		padding-top:5px;	
		font-size:10px;
}

#molles a{	
	
	padding-top:2px;	
	padding-bottom:4px;
	color:#171796;
}

#molles a.root{
	padding-left:35px;
}


/* ================================= reproductor mp3 ================================================== */

#reproductor{
	float:left;
}

#texte_musica{
	float:right;
	width:400px;
}