@charset "UTF-8";


body {
	font: 14px "Lucida Grande", Lucida, Verdana, sans-serif;
	margin: 0;
	padding: 0;
	background: #bebebe url(imatges/fons-degradat-bottom.png) repeat-x fixed center bottom;
}

/* @group links */

a:link {
	color: #4c4c4c;
	text-decoration: none;
	font-weight: bold;
}

a:visited {
	text-decoration: none;
	color: #4c4c4c;
	font-weight: bold;
}
a:hover {
	text-decoration: underline;
	color: #191919;	
	font-weight: bold;
}
a:active {
	text-decoration: none;
	color: #4c4c4c;
	font-weight: bold;
}

a > img {
	border: 0;
}

:focus {   /* elimina l'horrible contorn puntejat dels enllaços clicats. Genial per a l'acordió */
    outline: none; 
}


/* @end */


/* contenidor principal i centrador */

#contenidor_principal { 

}

.centrador {
	width: 900px;  /* abans 770px */
	margin: 0 auto;
}

.hidden {
	display: none;
}


/* @group capçalera */

#capcalera {
	background: url(imatges/fons-dalt-finestra-transp.png) no-repeat 13px 70px;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 145px; /* ajustar quan pugi la resta de pagina */
	clear: both;
}

#capcalera h1 {
	display: block;
	position: relative;
	width: 341px;
	height: 68px;
	margin: 10px 0 0 51px;
	background: url(imatges/jpo_transparent.png) no-repeat;
	color: #000;
	font: bold 26px/110% "Lucida Grande", Lucida, Verdana, sans-serif;
}
.cast #capcalera h1 {
	display: block;
	position: relative;
	width: 341px;
	height: 68px;
	margin: 10px 0 0 51px;
	background: url(imatges/jpo_transparent_cast.png) no-repeat;
	color: #000;
	font: bold 26px/110% "Lucida Grande", Lucida, Verdana, sans-serif;
}

#capcalera h1 span {
	display: block;
	height: 0;
	width: 0;
	overflow: hidden;	
}

/* @end */


/* @group idiomes */

#idiomes {
	margin: -9px 0 0 580px;
	width: 82px;
	height: 41px;
	padding: 0;
}

#idiomes li {	
	position: relative;
	display: block;
	width: 41px;
	height: 21px;
	margin: 0;
	padding: 20px 0 0;
	overflow: hidden;
	float: left;
}

#idiomes a span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: url(imatges/idiomescatcast_transparent.png) no-repeat;
}

#cat a:link span, #cat a:link span {
		background-position: -41px 0;	
}

#cast a:link span, #cast a:visited span {
		background-position: -123px 0;	
}

#cat a:hover span {
		background-position: -82px 0;	
}

#cast a:hover span {
		background-position: -205px 0;	
}

.cast #cat a:link span, .cast #cat a:link span {
		background-position: 0 0;	
}

.cast #cast a:link span, .cast #cast a:visited span {
		background-position: -164px 0;	
}

.cast #cat a:hover span {
		background-position: -82px 0;	
}

.cast #cast a:hover span {
		background-position: -205px 0;	
}


/* @end */

/* finestra principal. conté el requadre principal i el fons dels laterals */

#finestra_principal {
    background: url(imatges/fons-marges-finestra2-transparent.png) repeat-y 10px 4px;
	margin: -10px 0 0 0;
	padding: 0 0 7px 0;
	height: 100%;
	min-height: 300px; /* no va en IE6, pero que hi farem */
}

/* @group barra navegacio */

#barra_nav {
	margin: -49px 0px 0px 0px;
	padding: 0;
	width: 187px;
	float: left;
}

#barra_nav li {
	list-style: none;
	clear: both;
	display: block;
	position: relative;
/*	width: 187px; 
	height: 36px; */
	margin: 0;
	padding: 0 0 0 20px;
}

#barra_nav a {
	display: block;
	width: 187px;
	height: 36px;
}

#barra_nav a span {
	position: absolute;
	top: 0;
	left: 4px;
	height: 100%;
	width: 100%;
	background: url(imatges/opcions-nav-transp.png) no-repeat;
}
.cast #barra_nav a span {
	position: absolute;
	top: 0;
	left: 4px;
	height: 100%;
	width: 100%;
	background: url(imatges/opcions-nav-cast-transp.png) no-repeat;
}

#nav_inici a:link span, #nav_inici a:visited span {
	background-position: 0 0;	
}

#nav_qui a:link span, #nav_qui a:visited span {
	background-position: 0 -36px;	
}

#nav_que a:link span, #nav_que a:visited span {
	background-position: 0 -72px;
}

#nav_contacte a:link span, #nav_contacte a:visited span {
	background-position: 0 -108px;
}

#nav_privada a:link span, #nav_privada a:visited span {
	background-position: 0 -144px;
}

#nav_inici a:hover span {
	background-position: 0 -180px;	
}

#nav_qui a:hover span {
	background-position: 0 -216px;	
}

#nav_que a:hover span {
	background-position: 0 -252px;
}

#nav_contacte a:hover span {
	background-position: 0 -288px;
}

#nav_privada a:hover span {
	background-position: 0 -324px;
}

/* @end */


/* @group sub barra quesefer */

#barra_nav_sub_quesefer {
	margin: 0 0 0 -15px;
	padding: 0 0 6px;
	background: url(imatges/opcions-sub-quesefer-fons.png) no-repeat 17px 58px;
}

#barra_nav_sub_quesefer li {
	list-style: none;
	float: left;
	display: block;
	position: relative;
/*	width: 187px;
	height: 23px; */
	margin: 0;
	padding: 0 0 0 20px;
}

#barra_nav_sub_quesefer a {
	width: 187px;
	height: 23px;
}

#barra_nav_sub_quesefer a span {
	position: absolute;
	top: 0;
	left: 4px;
	height: 100%;
	width: 100%;
	background: url(imatges/opcions-sub-quesefer.png) no-repeat;
}
.cast #barra_nav_sub_quesefer a span {
	position: absolute;
	top: 0;
	left: 4px;
	height: 100%;
	width: 100%;
	background: url(imatges/opcions-sub-quesefer-cast.png) no-repeat;
}

#nav_serveis a:link span, #nav_serveis a:visited span {
	background-position: 0 0;	
}

#nav_mostres a:link span, #nav_mostres a:visited span {
	background-position: 0 -23px;	
}

#nav_cv a:link span, #nav_cv a:visited span {
	background-position: 0 -46px;	
}

#nav_serveis a:hover span {
	background-position: 0 -69px;	
}

#nav_mostres a:hover span {
	background-position: 0 -92px;	
}

#nav_cv a:hover span {
	background-position: 0 -115px;	
}

/* @end */

/* @group titulars */

.contingut h2 {
	position: relative;
/*	width: 341px;    */
	height: 33px;
	overflow: hidden;
	margin: 10px 0 3px;
	color: #000;
	font: bold 20px "Lucida Grande", Lucida, Verdana, sans-serif;
	padding: 0;
}

.contingut h3 {
	position: relative;
/*	width: 341px;    */
	height: 28px;
	overflow: hidden;
	margin: 30px 0 3px;
	color: #000;
	font: bold 18px "Lucida Grande", Lucida, Verdana, sans-serif;
	padding: 0;
}

.contingut h4 {
	margin: 0;
}

.contingut h2 span, .contingut h3 span {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

h2#qui span {
	background: url(imatges/titol-quisoc.png) no-repeat;
}

h2#que span {
	background: url(imatges/titol-quesefer.png) no-repeat;
}

h2#contacta span {
	background: url(imatges/titol-contacta.png) no-repeat;
}

h2#privada span {
	background: url(imatges/titol-zonaprivada.png) no-repeat;
}

h3#serveis span {
	background: url(imatges/titol-serveis.png) no-repeat;
}

h3#mostres span {
	background: url(imatges/titol-feines.png) no-repeat;
}

h3#curriculum span {
	background: url(imatges/titol-curriculum.png) no-repeat;
}


/* ara en castella... */

.cast h2#qui span {
	background: url(imatges/titol-quiensoy.png) no-repeat;
}

.cast h2#que span {
	background: url(imatges/titol-quesehacer.png) no-repeat;
}

.cast h3#serveis span {
	background: url(imatges/titol-servicios.png) no-repeat;
}

.cast h3#mostres span {
	background: url(imatges/titol-trabajos.png) no-repeat;
}


/* @group titulars quesefer */

#accordion h3 {
	display: block;
	width: 640px;
	height: 38px;
	margin-top: 0;
	margin-bottom: 0;
}

h3.d_grafic {
	background: url(imatges/titol-dgrafic.png) no-repeat 0 -44px;
	margin-left: -104px;
}
.cast h3.d_grafic {
	background: url(imatges/titol-dgrafico.png) no-repeat 0 -44px;
}
h3.d_grafic:link {
	background-position: 0 -44px;
}
h3.d_grafic:visited {
	background-position: 0 -44px;
}
h3.d_grafic:hover {
	background-position: 0 -86px;
}
h3.d_grafic:active {
	background-position: 0 -44px;
}

h3.d_web {
	background: url(imatges/titol-dweb.png) no-repeat 0 -44px;
	margin-left: -104px;
}
h3.d_web:link {
	background-position: 0 -44px;
}
h3.d_web:visited {
	background-position: 0 -44px;
}
h3.d_web:hover {
	background-position: 0 -86px;
}
h3.d_web:active {
	background-position: 0 -44px;
}


h3.fotografia {
	background: url(imatges/titol-fotografia.png) no-repeat 0 -44px;
	margin-left: -104px;
}
.cast h3.fotografia {
	background: url(imatges/titol-fotografiacast.png) no-repeat 0 -44px;
}
h3.fotografia:link {
	background-position: 0 -44px;
}
h3.fotografia:visited {
	background-position: 0 -44px;
}
h3.fotografia:hover {
	background-position: 0 -86px;
}
h3.fotografia:active {
	background-position: 0 -44px;
}


h3.audiovisual {
	background: url(imatges/titol-audiovisual.png) no-repeat 0 -44px;
	margin-left: -104px;
}
h3.audiovisual:link {
	background-position: 0 -44px;
}
h3.audiovisual:visited {
	background-position: 0 -44px;
}
h3.audiovisual:hover {
	background-position: 0 -86px;
}
h3.audiovisual:active {
	background-position: 0 -44px;
}


h3.formacio {
	background: url(imatges/titol-formacio.png) no-repeat 0 -44px;
	margin-left: -104px;
}
.cast h3.formacio {
	background: url(imatges/titol-formacion.png) no-repeat 0 -44px;
}
h3.formacio:link {
	background-position: 0 -44px;
}
h3.formacio:visited {
	background-position: 0 -44px;
}
h3.formacio:hover {
	background-position: 0 -86px;
}
h3.formacio:active {
	background-position: 0 -44px;
}


#accordion h3 span {  /* fa fora de la plana el text dels botons, sense eliminar-los per si calen per lectors per invidents o similars */
	position: absolute;
	left: -9999px;
}

/* @end */

/* @end */

/* @group contingut */

.contingut {
/*	width: 475px;     servia per evitar que el texte se surti de la finestra, millor marge a la dreta dels p */
	padding: 0;
	margin: 0 0 0 220px;
	position: relative;
	top: -46px;
/*	min-height: 300px; /* no va en IE6, pero que hi farem */
}

.contingut p {
	color: #656565;
	font: 12px "Lucida Grande", Lucida, Verdana, sans-serif;
	margin: 0 205px 7px 0; /* el marge dret evita que el text surti de la finestra, que ha de poder permetre que les fotos flotin fora */
}

.flotador_dret {
	float: right;
	margin: -10px 0 0;	
}

.retornar {
	width: 121px;
	height: 49px;
	margin: 0 0 0 391px;
	background: url(imatges/boto-tornar.png) no-repeat;
}

.mostra_feina {
	clear: both;
	margin-left: -220px;
	padding-left: 220px;
	padding-top: 5px;
	padding-bottom: 10px;
}

.mostra_feina:hover {
	background: url(imatges/fons-marges-hover.png) repeat-y 24px;
}

.foto_feina {
	float: right;
	width: 220px;
	height: 154px;
	padding-top: 9px;
	padding-left: 11px;
	background: url(imatges/marc_foto_petitaambboto_ombra.png) no-repeat;
	padding-right: 30px;
}

.foto_feina a {
	position: relative;
	width: 38px;
	height: 38px;
	z-index: 1;
	background: url(imatges/boto_mes_i_rollover.png) no-repeat 0 0;
	margin: -20px 0 0 38px;
}

.foto_feina a + a {
	display: none;
}

.foto_feina a:hover {
	background: url(imatges/boto_mes_i_rollover.png) no-repeat 0 -38px;
	text-decoration: none;
}

.foto_feina a span {
	visibility: hidden;
}

.foto_feina a {
	display: block;
}

.imatge_no_flotant {
	margin-right: 6px;
}

/* @end */


/* @group peus */

#peu {
/*	clear: both; */
	background: url(imatges/fons-peu-transparent.png) no-repeat 7px bottom;
	height: 84px;
	margin: 0;
}

#peu p {
	color: #4d4d4d;
	font: 12px "Lucida Grande", Lucida, Verdana, sans-serif;
	padding: 5px 0 0;
	margin: 0 220px 0 221px;
}

/* @end */