/* 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: #00456F;
	font-family: Tahoma,Arial,sans-serif;
	font-size: 13px;
	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:#006600; text-decoration: underline; font-weight:bold; border:0px; outline:none;}
a:hover{ text-decoration: underline;}
	
img{border:0px; outline:none;}

p{
	margin-top:10px;
	padding:0px;
}
	
.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;
	}	
	
#titol_seccio{
	width:100%;
	display:block;
	background:#6FA9F2;
	color:#00385F;
	font-weight:bold;
	padding:6px;
	margin-bottom:16px;
}

#loginBar{
	background-color:#6FA9F2;
	color:#FFFFFF;
	text-align: right;
	font:11px Tahoma,arial,sans-serif;
	margin-bottom:10px;
	width:100%;
	padding-top: 3px;
	padding-bottom:3px;
}
#loginBar input.text{
	width:100px;
	border: 1px #6FA9F2 solid;
}
.desconectar{
	width:120px;
	height:23px;
	text-align:center;
	padding-top:3px;	
	text-decoration:none;
	color:#000;
	font-weight:bold;
	cursor:pointer;
	display: inline;
}

.usuaris{
	float:left;
	padding-top:3px;
	margin-left:25px;
}

.desconectar input{
	border:0px solid; 
	padding:0px; 
	background:none;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	cursor:pointer
}

.desconectar:hover{background:url(../../img/fondo_boto_on.jpg) no-repeat;}

.desconectar a{
	text-decoration:none;
	color:#000;
	font-weight:bold
}
.desconectar a:hover{color:#FFFFFF;}
/****************************
 * *** LOGIN BOX *************
 * ****************************/
div#error{	
	width: 100%;
	margin-top: 100px;
	font-family: verdana,arial,tahoma,lucida;
	font-size: 11px;
	color: #ff0000;
	font-weight: bold;						
	text-align: center;
}		
div#loginBox{
	border: 2px #00456F solid; 
	width: 400px; 
	height: 180px;
	margin: 0 auto;
	padding: 0px;
	margin-top: 40px;
}

div#loginBox .titleLoginBox{
	background:#00456F;
	color: #67B2D1;
	font-weight: bold;
	width: auto;
	padding: 5px;
	padding-left:10px;
}

div#loginBox .loginName{
	height: 200px !important;
	height: 200px;
	width: 90%;
	text-align: right;
	padding-right: 30px;
	padding-top: 50px;
	padding-bottom: 0px;
	margin: 0px; 
}
div#loginBox label{
	width: 150px;
	padding-left: 20px;
	padding-right: 10px;	
	font-family: verdana,arial,tahoma,lucida;
	font-size: 12px;
	color: #000000;
	font-weight: bold;				
}
div#loginBox input{
	border: 1px  #999999 solid;
	padding: 1px 3px 1px 3px; 
}
div#loginBox input.button{
	padding: 1px 3px 1px 3px; 				
	float:right; 
	background-color: #1A4C6F;
	margin-right: 10px;
	color: #67B2D1;				
}
div#loginBox input.button:hover{
	border: 1px #042D89 solid;
	padding: 1px 3px 1px 3px; 				
	float:right; 
	margin-right: 10px;
	color: #ffffff;
	background-color: #7590C7;
}




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

	

#embolcall{  /*tota la pagina. es centra al navegador per margin: 0 auto*/
	  
	  background:white; /*color de fons a la columna on es el menu, si no posem color a embolcallPag*/
	  width: 970px;
	  margin:0 auto;
	  height:100%;
	  margin-top: 20px;
	}
	


	  
#capsalera{ /* a dintre de la capçalera normalment hi ha  un altre div amb el logo que linka a index */

	width:970px;
	text-align:left;	
	height:236px;
	margin-top:0px;
	background: url(../../img/gasporc_fons_cap.jpg) no-repeat;
	position:relative;

}
	  
#logo{
	
	padding-top:20px;
	text-align:left;
	margin-left:20px;
	
}

	#slogan{
		position:absolute;
		top:202px;
		left:240px;
	}
	
	
#embolcallPag{/*els continguts entre la capçalera i el peu: menu i contingut */
	width:950px;
	margin-left:20px;
	background:#FFFFFF;
	background: #FFFFFF url(../../img/fons_body.jpg) repeat-y;
	}


/*================== continguts ===================*/


#columna_esquerra{/* columna lateral, normalment a l'esquerra i normalment te el menú*/
	width:170px;	
	font-family: tahoma, Arial, sans-serif;
	float:left;		
	color:#FFFFFF;		
	text-align:center;		
	height:auto !important;
	background:#00456F;
		}
		
.camisa_menu{/* per contenir el menu. aixo fa que no calgui especificar marges ni paddings al div columna*/
	margin: 17px;
	margin-top:50px;
	margin-bottom: 0;	/* per IE6  */
		}
		
/* menu vertical a la columna lateral */
.camisa_menu ul{
	padding: 0px;
	margin: 0px;
	list-style: none;
}

.camisa_menu ul li{
	margin-bottom:7px;	
	font-weight: bold;
	background:#1A4C6F;
	}

	/*els estats dels "botons" del menu*/
	
	.camisa_menu ul li.itemMenuOn{
		padding:9px;
	}
	
	
	.camisa_menu ul li a{
		display:block;
		text-decoration:none;
		padding:9px;
		color:#67B2D1;
	}
	

 .camisa_menu ul li a:hover{
	color: white;
	text-decoration:none;
} 	
	/* ------------------------ */	
	
	

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


#columna_dreta{	/* normalment aqui va el contingut principal de la pagina a la dreta del menu*/
	width:780px; /*l'amplada total es aixo més el padding d'esquerra i dreta! */
	float:left;
	text-align:left;
	min-height:380px;
	height:auto !important;
	background-color: #fff;
	}
	
.camisa_contingut{/* per contenir el contingut (valga la rebuznancia). aixo fa que no calgui especificar marges ni paddings al div columna*/
	margin: 30px;
	margin-left:50px;
	margin-top:50px;
	}
	
	#blocs_destacats{
		/* display:table; */
		margin-top:10px;
	}
	
	#bloc_esq{	
		position:relative;
		float:left;width:380px;
		background:#B8F775 url(../../img/bloc_esq_top.png) top no-repeat;
		padding:10px;
	}
	
	#bloc_esq .base{
		position:absolute;
		bottom:0px;
		left:0px;
		width:100%;height:10px;
		background:#B8F775 url(../../img/bloc_esq_bottom.png) top no-repeat;
	}
	
	#bloc_dreta{
		position:relative;
		float:left;width:260px;margin-left:20px;
		background:#B8F775 url(../../img/bloc_dreta_top.png) top no-repeat;
		padding:10px;
	}
	
	#bloc_dreta .base{
		position:absolute;
		bottom:0px;
		left:0px;
		width:100%;height:10px;
		background:#B8F775 url(../../img/bloc_dreta_bottom.png) top no-repeat;
	}
	
	#imatges_biogas{
		display:table;
		font-size:10px;
		margin-bottom:20px;
	}
	
	#imatges_biogas a{
		text-decoration:none;
	}

	
#peu_general{
	background-color: #6FA9F2;
	color:#FFFFFF;
	float:right;
	width:970px;
	font: 11px Tahoma, arial, sans-serif;	
	position:relative;
	margin-bottom:20px;
	}
	
	#logo_peu{
	float:left;
	margin:0px;
	padding:0px;
	margin-left:20px;
	background:#00456F;
	width:170px;
	height:100%;
	position:absolute;
	bottom:0px;
	}
	
	#logo_peu img{
	position:absolute;
	bottom:0px;
	}
	
	#links_peu{
	float:right;
	margin:0px;
	margin-top:12px;
	padding:0px;
	padding-right:16px;
	padding-bottom:12px;
	color:#000000;
	
	}
	
	#links_peu a{
		color:#0B3D59;
	}
	

/*#######################################################################################################*/	
/************************************************ 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*/
	width:380px;
	}	

.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 #006600;
	margin: auto; /* per centrar la linia en cas que l'amplada sigui menys de 100% */
	margin-bottom:10px;
	}
	
		
#imatgenoticia{
		width:140px; /*l'amplada de foto que s'especifiqui als tpls de news*/
		/*margin:0px;*/
		padding-top: 20 px;
		float:left;
		text-align:center;	/*per centrar la imatge*/	
	}
	
#noticia_destacada #imatgenoticia{
		width:100px; 
}
	
#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;
	}
	
#noticia_destacada #textnoticia{
	width:270px;
}
	
#textnoticia_ampla{ /*per les noticies sense foto*/
		
		width:100%; /*ha de ser la mateixa width que #noticia*/		
		display:table;
	}
	
#textnoticia p, #textnoticia_ampla p{
		
	}
	
	
#noticia_titoldata{/*el bloc que engloba titol i data de la noticia*/
		/*background:#dFdCcF;*/
		margin-right:0px;
		margin-bottom:4px;
		position:relative;
	}
	
#titol_noticia{
		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;
	text-decoration:none;
	}

#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-bottom:10px;
		}
		
		
#llegir_mes{/*link per anar a la noticia individual, tot i que el titol tambe hi enllaça*/
		float:right;
		padding:4px;
		display:none;
	}
	
#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{
		display:none;
		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{
		text-decoration:none;
		padding:5px;
		padding-left:10px;
		padding-top:0px;		
	}
	
	
#anteriors{
		float:left;
		padding:10px;
	}
	
	
#seguents{
		float:right;
		text-align:right;		
		padding:10px;
		
	}
	
#veure_altres{
	text-align:right;
	font-size:14px;
	margin:10px;
	}
	

	
/*#######################################################################################################*/	

/* ********************************** formulari contacte ************************************************ */



#dades_client{
	float:left;
	width:180px;
	margin-left:50px;
	text-align:center;
	}
	
	
#dades_client p{
	padding-top:0px;
	font-size:11px;
	color:#00385F;
	line-height:15px;


}

	
#contactar{
	width:55%;
	float:left;
	margin-right:0px;
	margin-top:1px;
}



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



#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-top:-3px;
	margin-left: 10px;
	border:1px solid #7F9DB9;
	
}

#contactar .ample div input, #contactar .ample div textarea{/* camp de texte ample*/
	width:360px;
	margin-left: 10px;
	border:1px solid #7F9DB9;
}

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

#contactar label{width:50px;}
#divFormErrorList{float: right; width:40%; padding: 10px; color: #ff0000;}
.fix_missatge{
	float:right;
	text-align:right;	
	height:5em;
}

textarea {
	float:right;
}

.controls{
	clear:both;
	float:right;
	margin-top:7px;
	font-size:11px;
	color:#00385F;
}

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

/* ************************************* ubicacio google maps ******************************************** */
#map{
	border:2px ridge black;
	height:368px;
	width:456px;
	margin-left:0px;
	float:left;
	margin-bottom:20px;
}

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




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



/* llistats cataleg*/	
	

#llista_productes{
	clear:both;
	margin-top:30px;
}

.banda_producte{width:244px;height:5px;
	
}

.card .banda_producte{width:752px;height:5px;}

.producte{	
	clear:both;	
	display:table;
	width:100%;
	margin-bottom:20px;
}

.llistat{
	clear:both;
	float:left;
	width:750px;
}



.ultima_columna{
	margin-right:0px;
}

.nova_linia{
	clear:both;
}



.cos_producte{
	height:212px;
	border:none;
}

.producte.llistat2columnes .stock_info{
	font:italic 10px Arial, sans-serif;
	padding:2px;
	text-align:left;
	padding-top:30px;
	clear:both;

}
	


.text_producte {		
		padding:6px;
	}

.text_producte p{font-size:10px;margin-bottom:0px;line-height:1.1em;}


.producte_sumari{
min-height:80px;


}

.imatge_categ{
	width:102px;
	padding: 6px;
	text-align:center;
}

.imatge_producte{
		width:102px;
		min-height:102px;
		margin:0px;
		padding:0px;
		padding-right:40px;
		padding-bottom:20px;		
		float:left;
		text-align:center;
	}

#presentacio_categories  .imatge_producte{
    padding-bottom:3px;
}

/*
.imatge_producte img{
    border-left:1px solid #9FC765;
    border-bottom:1px solid #9FC765;
    } 
	*/
.producte_descripcio{
	margin-top:20px;
	
}

.espaiador_producte{	
		width:100%;
		height:7px;
		clear:both;
}
	/* ################# card ##################### */
	
.producte.card{	padding-right:50px	}

.producte.card .cos_producte{
	width:700px;
	min-height:450px;
}
	

.producte.card .imatge_gran{
	float:left;
	width:244px;	
	margin:6px;	
	text-align:center;
	margin-right:20px;
	margin-bottom:10px;
}

.producte.card .imatge_gran img{
	width:244px;

}

.producte.card .producte_descripcio{

	width:100%;
	margin-right:36px;

}

.producte.card .producte_descripcio h3{
	margin-top:10px;
	margin-bottom:20px;
	color:#FF3300;
	font:bold 16px Verdana, sans-serif;
}

.producte.card .producte_descripcio .preu{
	text-align:right;
	font:bold 20px Verdana, sans-serif;
	color:#990000;
	margin-right:20px;
}

	.producte .thumbs_prod{
		clear:left;
		float:left;
		width:244px;
		margin:0px;
		padding:6px;
		padding-top:0px;
	}
	
	.producte .thumbs_prod div{
		border:1px solid #999999;
		text-align:center;
		float:left;
		width:56px;
		height:56px;
		margin-right:6px;
	}
	
	.producte .thumbs_prod a{	
		padding:0px;
		margin:0px;
	}
	
	.producte .thumbs_prod a img{	
		padding:0px;
		margin:0px;
	}

	
	
	.txt_iva{ font-size:9px}

	.preus_iva{font-size:10px; text-decoration:inherit}


#molles{
	font-size:10px;
	color:
}