/* NOTA: aquesta plantilla te el menu a l'esquerra i el contingut a la dreta. si es vol al reves, nomes cal intercanviar els continguts d'una columna a l'altra i canviar les amplades de les columnes. la suma de les amplades de les columnes dreta i esquerra ha de ser igual o inferior a l'amplada total de la pagina (embolcallPag). no posar mai margin o padding a les columnes. utilitzar les "camises". aixo facilita la feina i evita problemes de webs desquadrades en alguns navegadors, ja que tracten amplades i marges/paddings de forma diferent! */

/************** GENERAL ****************/
body{
	margin: 0 auto;
	padding: 0px;
	background-color: #CC741C;
	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:#8D321A; text-decoration: none; font-weight:bold; border:0px; outline:none;}
a:hover{ color:#CC741C;}
	
img{border:0px;}	

p{
	margin-top:10px;
	padding:0px;
}
	
h4{
	font-size:16px;
	font-weight:bold;	
}
h4 a:hover{
	font-size:16px;
	font-weight:bold;	
	margin-bottom:22px
}

	
	
.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:20px;
	font-weight:bold;
	padding:0px; /* el padding es util quan hi han icones (imatgetes de fons) a cada titol de seccio */
	padding-top:10px;
	margin-bottom: 9px;
	text-align:left;
	color:#993300
	}


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

	

#embolcall{  /*tota la pagina. es centra al navegador per margin: 0 auto*/
	  
	  /*background:#776763; /*color de fons a la columna on es el menu, si no posem color a embolcallPag*/
	  width: 920px;
	  margin:0 auto;
	  margin-top:20px;
	}
	
#embolcall2{  /*per afegir foto de fons per sobre del fons repetit verticalment a embolcall*/
	  /*background:  url(../../img/fons-amb-degradat.jpg) top no-repeat ;*/
	  }
	
	  
#capsalera{ /* a dintre de la capçalera normalment hi ha  un altre div amb el logo que linka a index */
	width:790px;
	text-align:center;	
	height:90px;	
	margin-left:134px;

	}
	  
	  
	#logo{		
		text-align:left;
		float:left;
		width:460px;
	}
	
	
#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. */
	
	}


#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:0px;
		padding-right:16px;
		text-align:right;
		color:#333333;
		width:300px;
		float:right;
		margin-top:65px;
		font-weight:bold;
	}
	
#idiomes a{
		color:#FFFFFF;	
}
	
#idiomes div{/* posar display:none; si no calen idiomes*/
		/*display:none;*/
	}



/***************  MENU   **************************/



#columna_esquerra{/* columna lateral, normalment a l'esquerra i normalment te el menú*/
	width:128px;	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	float:left;		
	color:#FFFFFF;		
	text-align:left;		
	height:auto !important;
	background: #E0AD78;
	margin-top:30px;	
	}
		
		
.barra_menu_up{
	height:17px;
	background:url(../../img/menu_up.jpg)	
}


.barra_menu_bottom{
	height:17px;
	background:url(../../img/menu_bottom.jpg)
}

		
		
.camisa_menu{/* per contenir el menu. aixo fa que no calgui especificar marges ni paddings al div columna*/
	margin: 0px;
	margin-bottom: 0;	/* per IE6  */
	margin-left:10px;
}
		
/* menu vertical a la columna lateral */
.camisa_menu ul{
	padding: 0px;
	margin: 0px;
	padding-top:0px;
	list-style: none;
}

.camisa_menu ul li{
	padding: 0px;
	margin: 0px;
	margin-bottom:4px;	
	font-weight: bold;

}

	/*els estats dels "botons" del menu*/
	
	.camisa_menu ul li a{
		padding: 0px;
		margin: 0px;
		display:block;
		padding:3px;
		color:#993300
	}
	
.camisa_menu ul li.itemMenuOn a{
	color: #fff;
}

.camisa_menu ul li a:hover{
	color: #fff;
}	

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


#columna_dreta{	/* normalment aqui va el contingut principal de la pagina a la dreta del menu*/
	width:790px; /*l'amplada total es aixo més el padding d'esquerra i dreta! */
	overflow:hidden; /*per IE 5.5 i 6 */
	float:left;
	text-align:left;
	height:auto !important;
	background:url(../../img/fondo_web.jpg) repeat-y;	
	}


.barra_up{
	height:20px;
	background:url(../../img/fondo_pag_up.jpg)
	}


.barra_bottom{
	height:20px;
	background:url(../../img/fondo_peu.jpg)
	}


#texte{
	min-height:520px;
	height:auto !important;
}

	
.camisa_contingut{/* per contenir el contingut (valga la rebuznancia). aixo fa que no calgui especificar marges ni paddings al div columna*/
	margin-top: 0px;
	margin-left:50px;
	margin-right:40px;
	margin-bottom: 0;	/* per IE6  */
	min-height:350px;
	height:auto !important;	
	}
	
	
#sobre_peu{ /* extra div per fer les cantonades arrodonides entre el contingut i el peu. 
	 si no es necessita es pot amagar*/
	display:none; 
	height: 20px;
	float: right;
	width:920px;	
	background:url(../../img/fondo_pag_bottom.jpg)
	}
	
#peu_general{
	height:20px;
	color:#FFFFFF;
	float: right;
	width:790px;
	margin-top:5px;
	}
	
	#logo_peu{
	float:left;
	margin:0px;
	padding:0px;
	padding-left:16px;
	}
	
	#links_peu{
	float:right;
	margin:0px;
	padding:2px;
	padding-right:16px;
	}
	
	#links_peu a{
		color:#333333;
	}
	
	#links_peu a:hover{
		color:#fff;
	}

	

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

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

#llista_noticies{
	clear:both;
	height:100%;
	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:10px;
	margin-bottom:10px;
	}
	
		
#imatgenoticia{
		width:120px; /*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:620px;	/* 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-left:4px;
		}
		
		
#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{
	/*color:black;*/
	
	}
	

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

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



#dades_client{
	float:right;
	margin-top:10px;	
	}
	
#dades_client img{
	margin-right:12px;
	}
	
#dades_client p{
	padding-top:0px;
	text-align:left
}

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



#contactar #camps_basics{
	float:left;
	margin-left:0px;
	margin-top:20px;
}



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


#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: 5px;
}

#contactar .ample div input, #contactar .ample div textarea{/* camp de texte ample*/
	width:465px;
	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: 310px;
	width:440px;
	margin-left:0px;
	float:right;
}

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

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

#flash_galeria{
	float:left;
}

#categories_galeria{
	float:right;
	width:150px;
}

#categories_galeria a:hover{
	float:right;
	width:150px;
	color:#000000;

}

/* *************************************** INICI  ***********************************************/

.fotos_left{
	border:0px solid #000000;
	float:left;
	margin-top:20px;
}

.fotos_left img{
	margin-bottom:50px;	
}

.texte_right{
	float:right;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	width:470px;
}

#tabla_tarifas{
	font-family:Verdana, Arial, Helvetica, sans-serif;
}