/* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 26, 2014 */
@font-face {
    font-family: 'infotext_normalregular';
    src: url('../fonts/infotext-normal-webfont.eot');
    src: url('../fonts/infotext-normal-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/infotext-normal-webfont.woff') format('woff'),
         url('../fonts/infotext-normal-webfont.ttf') format('truetype'),
         url('../fonts/infotext-normal-webfont.svg#infotext_normalregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'univers';
    src: url('../fonts/UniversLTStd.eot');
    src: url('../fonts/UniversLTStd.eot?#iefix') format('embedded-opentype'),
         url('../fonts/UniversLTStd.woff') format('woff'),
         url('../fonts/UniversLTStd.ttf') format('truetype'),
         url('../fonts/UniversLTStd.svg#infotext_normalregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'futura_lt_btlight';
    src: url('../fonts/futura_light_bt-webfont.eot');
    src: url('../fonts/futura_light_bt-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/futura_light_bt-webfont.woff') format('woff'),
         url('../fonts/futura_light_bt-webfont.ttf') format('truetype'),
         url('../fonts/futura_light_bt-webfont.svg#futura_lt_btlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* CSS OBSERVATORI PAISATGE */

body {
background-color:#DADEDE;
color: #444;
background: #DADEDE url(../img/fons_body.jpg) top repeat-x;
}


/* blocs estructura */

#capsalera {
background:  url(../img/ombra_dalt.jpg) no-repeat center bottom;
padding-bottom: 0px;
}

#cos {
background: url(../img/ombra_cos.jpg) center repeat-y;
}

#peu {
padding-top: 10px;
background:url(../img/ombra_peu.jpg) top center no-repeat;
}


#banerportada {
/* background:#FFFFFF url(../img/baner_portada3.jpg) no-repeat center ; */
background-color:#333 ;
height:200px;
overflow:hidden;
}

/* el fitxer d'imatge el cridem des del include idm*/
#banerinterior {
background:#FFFFFF;
background-position:center;
background-repeat:no-repeat;
height:100px;
overflow:hidden;
}

#banerportada ul li, #banerinterior ul li { margin: 0; padding: 0}


#latria {
background: #F2E6DC url(../img/fons_tria.jpg) repeat-x top;
padding: 20px 0 15px 0;
border-top: 1px solid white;
border-bottom: 1px solid #E8D2C0;
}

.trescolumnes {
clear: left;
margin: 0em 0;
padding: 0;
}

.paginterior {
background: url(../img/fons_col_e.jpg) repeat-y 10px;
padding-bottom: 40px;
}

#destacatsbaix, #destacatsdalt {
text-align:center;
padding: 20px 0;
}

#destacatsbaix {
background:url(../img/linia_h_punts.png) top center no-repeat;
}

#destacatsbaix img, #destacatsdalt img{
margin: 0 30px }

.clear {
clear:both;
height:0px;
}


/*tipografia bàsica */

a {color: #8C5B30; text-decoration:none; }
a:hover {text-decoration:underline}

/*
a { border-bottom: 1px dotted #999 }
a:hover {border-bottom: 1px solid #8C5B30; text-decoration:none; color: 8C5B30 }
*/

a.linktot {
padding-left:12px;
background-image:url(../img/fletxa_avall.png);
background-position: 0 3px;
background-repeat:no-repeat;
color: #999999;
font-weight:normal;
font-size:80%
}

a.glossari {
padding-right:11px; background:url(../img/icona_glossari.png) no-repeat right top;
}
a.glossari:hover {cursor: help}

#capsalera a, #peu a, #menuprincipal a {
font-weight:normal;
}

#capsalera h1 {padding: 0; margin-bottom: 10px;}

#principal h2, #principal h3, #principal h4, #principal p, #principal dl, #principal ul,
.columnainterior h2, .columnainterior h3, .columnainterior h4, .columnainterior p, .columnainterior dl, .columnainterior ul {
padding-left: 20px;
padding-right: 20px;}

#contingutsinterior h2,
#contingutsinterior h3,
#contingutsinterior h4,
#contingutsinterior h5,
#contingutsinterior p,
#contingutsinterior dl,
#contingutsinterior ul
{
padding-left: 20px;
padding-right: 40px;}

#contingutsinterior table {
margin-left: 20px;
margin-right: 40px;}


dt {font-weight:bold; }

dd {margin-bottom: 1em; font-size:.9em; text-align:justify }

dl.llistasagnada dt { margin-bottom: .5em }
dl.llistasagnada dd { padding-left: 40px; }
dl.llistasagnada dt span { color: #999; padding-left: .25em}



/* cercador centredoc */
dl.llistatcentredoc dt { float: left; width: 110px; padding: 0; margin: 0; overflow: hidden }
dl.llistatcentredoc dt { margin: .5em 0 0 0; padding: 1em 0 0 0 }
dl.llistatcentredoc dd { margin: .5em 0 0 150px }
dl.llistatcentredoc dd.titol { clear: both; border-top: 1px solid #f0f0f0; font-weight: bold }
dl.llistatcentredoc dd.titol a { font-weight: bold }
dl.llistatcentredoc dt a { margin: 0; padding: 0 }
dl.llistatcentredoc dt img { margin: 0; padding: 0; width: 85px; border: 0 }


dl.llistanoticies dt,
dl.llistaactivitats dt,
dl.llistanotespremsa dt,
dl.llistatdirectori dt,
dl.llistalatria dt  {
	margin-top: .75em;
	margin-bottom: 0.25em;
	padding-top: .75em;
	border-top: 1px dotted #ccc;
	color: #333;
}


dl.llistanoticies dd,
dl.llistaactivitats dd,
dl.llistanotespremsa dd,
dl.llistatdirectori dd,
dl.llistalatria dd {padding-left: 20px; margin: 0;}

dl.llistatdirectori dd,
dl.llistanotespremsa dd,
dl.llistalatria dd {padding-left: 0}


dl.llistatdirectori dt {margin-bottom: 0;}
dl.llistadirectori {padding: 0; } /* temporal per quan estiguin ben llistades les dls.. */

dl.llistanoticies dd.data,
dl.llistaactivitats dd.data
 {color: #999999 }

dl.llistaactivitats dd.data a { font-weight:normal; padding-left: .5em }

dl.llistaactivitats dd.infos {color: #456B8C; border-left: }
dl.llistaactivitats dd.resum {margin-top: .5em;  }


dl.llistaactivitats dd.subtitol { font-style:italic; font-weight:bold }


dl.llistanotespremsa dd span.data,
dl.llistalatria dd span.data,
p span.data {color: #999999; padding-right: .5em; margin-right: .5em; border-right: 1px solid #ccc; }

ul span.data {color: #999999; padding-left: .5em; margin-left: .5em; border-left: 1px solid #ccc; }

span.midapdf {font-weight:normal; color: #999999  }

dl#glossari {
margin-top: 2em;
}

dl#glossari dt {
	padding-top: 0em;
	margin-top: .5em;
	margin-bottom: 0;
	color: #8C5B30;
	 }

dl#glossari dd {
padding: .5em 20px .5em 20px;
margin-top: 0.25em;
margin-bottom: 1.25em;
background:#F1F5F8 url(../img/triangle_faq.png) top left no-repeat;
color:#333333;
border-bottom: 1px solid #E3EBF2; }

dl#glossari dd span.font { color: #777777; }


#principal h2 {
font-size:120%;
color: #6F6A66; /* 8C8883 */
}

#contingutsinterior h2 {color: #ccc; font-weight:bold; margin-bottom: 0em; margin-top: 1em; }

#contingutsinterior p {text-align:justify; }

#principal h3 {
color: #456B8C;
font-size: 130%;
}

#principal h4, #principal h5  {
font-size: 112%;
margin-bottom: 1em;
}

.mapaweb h4 {
border-top: 1px dotted #ccc;
margin-top: 1em;
padding-top: 1em;
}

ul.llistaespaiada li {
margin-top: 1em;
margin-bottom: 1.5em;
text-align:justify;
}


#peu p {
color: #838585;
font-size: 90%;
margin: 0 0 2em 5px;
padding: 0;
}


.nota, .notacolor {
font-size:85%;
border-top: 1px dotted #ccc;
padding-top: 1em;
margin-top: 2em;
color: #777;
}

.alerta {font-weight: bold; color: #CC0000 }

.nou {background-color:#f6f6f6; border: 1px solid #f0f0f0; font-weight:bold; color: #FF6600; padding: 1px 5px; font-size:85%; letter-spacing:1px}

a.bototornar {display: block; width:130px; background:#fff url(../img/fons_menu_e/punter.png) no-repeat left -154px;; border-top: 1px dotted #ccc; padding: 3px 5px 3px 10px; font-size:85%; letter-spacing:1px; margin: 3em 20px;}
a.bototornar:hover {background-color:#fff; border-color: #999; text-decoration:none; color: #000}


.aclarimentcercador, .inscripciobutlleti, .notadocumentacio {
background-color:#E3EBF2;
margin: 0;
padding: .5em;
font-size: 90%;
margin: 0 120px 20px 20px;
}

p.inscripciobutlleti {
margin: 1em 40px 2em 20px;
border: 2px solid #F2E6DC;
background:#F1EAE2 url(../img/fons_subscripcions.png) no-repeat right bottom;
width:auto;
}

p.notadocumentacio {
margin: 1em 40px 2em 20px;
border: 2px solid #F2E6DC;
background:#F1EAE2 url(../img/fons_notadocumentacio.png) no-repeat right bottom;
width:auto;
padding: 1em .5em;
}

#logo {float: left; display:inline}
#logo img { padding-top: 0.3em }
.ariadna {
font-size:90%;
background: url(../img/linia_punts_ariadna.png) no-repeat 220px 37px;
padding: 10px 0;
}

.ariadna a { font-weight:normal}

.catpaisatgenews {font-size: 110%}


/*** formularis  */

form#cercador { text-align:right; float:right; margin-top: 30px; margin-bottom: 1em}
form#cercador input {
float: right;
border: 1px solid #ccc;
width:140px;
margin: 0 5px 0 0;
padding: 0;
height:19px}

form#cercador img {
float:right;
}


form {font-size:90%}
input, textarea { color: #000; background: #fff; border: 1px solid #ccc;  width:230px }

.formhemeroteca                {margin-right: 120px; margin-left: 20px; margin-bottom: 1em;}
.formhemeroteca *              {font:inherit}
.formhemeroteca div            {margin:0.5em 0}
.formhemeroteca label          {clear: both; display: block; width: 120px; margin-right: 10px; text-align:right; float: left; font-weight:bold}
.formhemeroteca fieldset       {background-color:#f6f6f6; padding:0.5em ; margin:0; color:#333; border:none}
.formhemeroteca legend         {font-weight:bold; padding:0; margin:0}
.formhemeroteca p              {margin-bottom:0.8em}
.formhemeroteca input.text     {background:#FFF0D0; border:2px inset #ccc; width:250px; background:#dde; padding:2px 3px 2px 5px; vertical-align:middle}
.formhemeroteca textarea       {margin-left:0; font-size:100%; vertical-align: text-top}
.formhemeroteca input.button,
#formCat input.button   	   {border:1px solid #333; color:#ccc; background:#444; vertical-align:bottom; padding:2px 10px; width:auto; }
.formhemeroteca input.button   {margin-left: 130px;}
#formCat input.button  		   {margin: 5px 0 0 0}

.formhemeroteca ol {list-style:none; margin: 0}
.formhemeroteca ol li {margin: 0.25em 0; padding: 0.25em; border-bottom: 2px solid white }
.formhemeroteca ol li.ultim {border-bottom: none }

.formhemeroteca input.radio    {vertical-align:baseline; width:auto; border: none; background-color:#f6f6f6}
.formhemeroteca label.enlinia { width:auto; clear: none; margin: 0 15px 0 0; }

/*menus */


#menuprincipal {
overflow:hidden;
background: #005A95 url(../img/fons_menu.jpg) repeat-x top;
border-bottom: 1px solid #CCDFEC;
text-align:right;
font-size:90%;
padding-top: 3px;
height:23px
}

#menuprincipal ul {
margin: 0 10px 0 0;
padding: 2px 0px 0 0 ;
}

#menuprincipal li {
display:inline;
list-style:none;
padding: 0;
margin: 0;
border-right:  1px solid #347FB1;
}

#menuprincipal li.ultim {border-right: none;}

#menuprincipal li a {
color:#FFFFFF;
text-decoration:none;
padding: 0 10px;

}
#menuprincipal li a:hover {
color: #FF9900;
background-color: none;
}

#menuprincipal a.actual {color: #FF9900}


ul#menuinterior {
padding: 0;
margin:0;
text-align:right;
background: url(../img/fons_menu_e/fons1.jpg) no-repeat top right;
border-top: 2px solid white;
width:100%;
}

ul#menuinterior li {
padding: 5px 50px 5px 20px;
list-style-type: none;
text-align:right;
border-bottom: 2px solid white;
}

ul#menuinterior li a {
display:block;
width:200px;
color: #4B4B4B;
font-weight:normal;
font-size:110%;
}

ul#menuinterior li a span {
font-weight:bold;
color:#CCCCCC;
margin-left: .25em;
}

ul#menuinterior li a:hover {
color: #111;
text-decoration:none;
background-color:#fff;
}

ul#menuinterior li a.actual {
color: #8C5B30;
text-decoration:none;
}

ul#menuinterior li ul {
padding: 0;
margin: 0;
background: url(../img/fons_menu_e/fons1_1.jpg) no-repeat top right;
border-top: 1px solid white;
background-color: #FFFF00;
width:200px;
}

ul#menuinterior li ul li {
padding: 5px 50px 0 0;
border-bottom: 1px solid white;
font-size: 90%;
background-color:#FF0000;
}

ul#menuinterior ul a {
display:block;
width:165px;
}


ul#menuidiomes {
margin: 10px 0 0px 0;
text-align:right;
}

ul#menuidiomes  li, ul#menupeu li{
display: inline;
list-style-type: none;
padding: 0;
margin:0;
}

ul#menuidiomes  li {
border-right: 1px solid #456B8C;
padding: 0 10px ;
}

ul#menuidiomes  li a {

text-decoration:none;
color: #456B8C;
}

ul#menuidiomes  li.ultim {
padding-right: 0 ;
border-right: none;
}


ul#menupeu {
margin: 0px 10px 3px 5px;
padding: 5px 0 0 0;
}

ul#menupeu  li a {
padding: 0 10px ;
text-decoration:none;
border-left: 1px solid #8C5B30;
}

ul#menupeu  li a.primer {
padding-left: 0 ;
border-left: none;
}


#menu_e {
margin-left: 10px;
}

#menu_e ul
{
font-size:100%;
line-height:125%;
text-align:right;
margin: 0;
padding: 0 ;
list-style-type: none;
background:  url(../img/fons_menu_e/fons1.jpg) repeat-y top right;
border-top: 1px solid #ccc;
}

#menu_e li {
margin: 0;
padding: 0px;
border-bottom: 1px solid #ccc;

 }

#menu_e a
{
display: block;
padding: 9px 12px;
margin-right: 40px;
width: auto;
color: #666;
font-weight:bold;
background:  url(../img/fons_menu_e/punter.png) no-repeat right 3px;

}

#menu_e a:hover
{
color: #000;
background-color: #FFFFFF;
text-decoration: none;
}

#menu_e ul ul {
background-color: #f6f6f6 ;
font-size:90%;
border-top: 0px dashed #e0e0e0;
}


#menu_e ul ul li {
margin: 0;
border: none;
padding: 0 40px 0 0;
border-top: 1px dotted #e0e0e0;

}


#menu_e ul ul a
{
display: block;
padding: 5px 10px 5px 20px;
width: auto;
color: #666;
font-weight:normal;
margin-right: 0px;
background-position: right -2px;
}

#menu_e ul ul a:hover {
background-color: white;
}

#menu_e ul li a.actual {
	color: #000000;
	background: #f0f0f0 url(../img/fons_menu_e/punter.png) no-repeat right -47px;
}

#menu_e ul li.pare a.actual {
	background: #f0f0f0 url(../img/fons_menu_e/punter.png) no-repeat right -98px;

}

#menu_e ul li.pare li a.actual {
  color: #000;
  background-image: none;
  background: #f0f0f0 url(../img/fons_menu_e/punter.png) no-repeat right -52px; /
}

/* 3r nivell */
#menu_e ul ul ul {
background-image: none}

#menu_e ul ul ul li {
padding: 0;
}




ul.menutab {background-color:#f6f6f6; margin: 20px 70px 10px 20px; padding: 0}
ul.menutab li {
display: inline;
list-style-type: none;
padding: 0;
margin: 0;
border-right:: 1px solid #ccc;
}
ul.menutab li a {padding: 0 20px; border-right: 1px solid #ccc;}
ul.menutab li a.actual {color: black}


/* PORTADA ****************************************************/



/* 3 columnes portada */

#actualitat, #agenda, #colaccessori { padding-top: 1em; }

#actualitat h2, #actualitat dl, #actualitat p {margin-left: 10px; }

#actualitat h2, #agenda h2, #colaccessori h2 {  margin-bottom: 1.5em; color: #333; font-size:1em; }

#colaccessori { float:right; }




/* La tria portada  */

#latria .titol {
width: 280px;
float: left;
text-align:right;
background:url(../img/lupa_tria2.png) 55px 0px no-repeat;
height:75px;
}

#latria .contingut {
float: left;
width:540px;
margin-left:20px
}

#latria p {
margin-bottom: .25em;
}

#latria p a {font-weight:normal; font-size:1.1em }

#latria .titol h2 {
letter-spacing:1px;
margin: 0;
letter-spacing: 1px;
font-weight:bold;
font-size:1.1em;
color: #555
}


#latria .titol p {
color: #999;
font-size:85%;
}

#latria .contingut a {font-weigt: bold; }

#latria p.entradeta   {
font-family:Georgia, "Times New Roman", Times, serif;
color: #666;
font-style:italic;
font-size:96%;
margin-bottom: 1em;

}

/*#latria2 .bloctria {
float: left;
width: 22%;
margin-left: 20px;
}
#latria2 .bloctria.titol {
width: 15%;
padding-bottom: 40px;
}*/

/* slideshow - DIV DINS EL QUAL HI HA EL DIV CONTINGUT DE LA TRIA */ 

#slideshow {
height: 100px; min-height: 100px
}


/* jquery scrollable  **********************************************************************************
	http://flowplayer.org/tools/demos/scrollable/plugins/index.html
	root element for the scrollable. when scrolling occurs this element stays still.
*/
/* CLASSE DEL DIV ON HI HA CADA TRIA. SI ES VOL RETOCAR L'ALÇADA S'HA DE FER AQUÍ I A L'SLIDESHOW */
.scrollable  {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 540px;
	height:100px;
	min-height:100px;

	/* custom decorations
	border:1px solid #ccc;
	background:url(/img/global/gradient/h300.png) repeat-x;
	*/
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:2000em;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	width:540px;
	height: 70px;
	min-height: 70px
}


/* single scrollable item */
.scrollable img {

}

/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}


/* http://static.flowplayer.org/tools/css/scrollable-navigator.css */

/* position and dimensions of the navigator */
.navi {
	margin-left:530px;
	width:200px;
	height:20px;
	min-height:20px
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background: url(../img/navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
.navi a:hover {
	background-position:0 -8px;
}

/* active state (current page state) */
.navi a.active {
	background-position:0 -16px;
}

/* FI DE LA TRIA */


p.entradetanoticia span.data {
	font-weight:normal;
	color: #919395;
	padding-right: .5em;
	margin-right: .5em;
	border-right: 1px solid #ccc;}

p.entradetanoticia {
	padding: 1em;
	margin: 0 40px 20px 20px;
	color: #444;
	background-color:#F1F5F8;
	color:#333333;
	border-bottom: 1px solid #E3EBF2;
}

/* Novetats observatori */

#novetatsobservatori {
padding:1em .5em 0 .5em;
border: 1px dotted #C8D7E5;
background: #E3EBF2 ;
margin: 0 20px 20px 10px;
}
#novetatsobservatori h2 {
font-size: 1.1em;
font-weight:bold;
letter-spacing:.05em;
margin: .5em 0;
color: #555;
}

#novetatsobservatori li {margin: 0; padding: .5em 0 .5em; list-style: none; border-top: 1px solid #fff; }

#novetatsobservatori li a {font-weight: normal; font-size:100%;  }


/*baner sota capslalera */
.banersotacapsalera {
background: #fff url(../img/linia_h_punts_569px.png) no-repeat bottom ;
float: left;
text-align:center;
padding: 1em 0;
margin-bottom: 1em;

}
.banersotacapsalera img {
margin-left:10px;
}



/* botonera baix */

#peu li {
display: inline;
list-style:none;
}

a.botobloc {
margin-top: 5px;
margin-bottom: 5px;
background-color:#FFFFFF;
background-image:url(../img/baners/boto1.jpg);
background-position:3px 3px;
background-repeat:no-repeat;
padding: 3px 8px 3px 115px ;
height: 100px;
overflow:hidden;
display: block;
color: #999;
line-height:110%;
font-size:85%;
border: 1px solid #fff; /* #C4C8C8 */
}

a.botobloc:hover {
background-color:#fff;
color: #555;
border: 1px solid #fff;
text-decoration:none;}

a.botobloc .titol {
color: #8C5B30;
font-weight:bold;
display:block;
margin: .2em 0;
font-size:120%;
line-height:120%
}
a.botobloc:hover .titol {
color: #333;
}

/* ------------------------------------------- PUBLICACIONS - COL·LECCIONS ----------------------------*/ 
  .publi {
 float: left;
 height: 275px;
 margin: 0 5px 10px 0;
 padding: 3px;
 width: 180px;
 }
 
 .doc {
	 width: 250px;
 }
 .publi img {
	border: #ccc 1px solid;
 }

 .ppubli {
	 margin-left: -20px; 
	 padding: 5px 0 5px 0;
	 font-size: 0.95em;
	 line-height: 1.2;
	 text-align: left;
	 font-weight: bold;
 }
 .isbn {
	 padding-top: 0;
	 margin-top: -20px;
	 font-size: 0.9em;
	 font-weight: 200;
}

/* PESTANYES */

.tabs { /* es el rectángulo contenedor */
margin: 0 0 0 20px;
position: relative;
min-height: 1400px;
}
.tab { /* cada una de las pestañas */
float: left;
}
.tab label { /* la parte superior con el título de la pestaña */
background-color: #F1F5F8;
border: 2px solid #E3EBF2;
color: #8C5B30;
font-size: 1.1em;
font-weight: bold;
cursor: pointer;
left: 0;
padding: 5px 12px 5px 12px;
margin-right: 5px;  
border-bottom: none;
position: relative;
}
/* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos */
.tab [type=radio] { display: none; }

/* el contenido de las pestañas */
.content {
background: white; 
border: 2px solid #E3EBF2; 
margin: 0px 0 0 0; 
padding: 12px 0 3px 0;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 23px;
}

/* controlamos la pestaña activa */
[type="radio"]:checked ~ label {
background-color: #FFF;
border: 2px solid #E3EBF2;
border-bottom: 2px solid #FFF;
color: #444;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content { z-index: 1; }
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
}



/*calaix sastre */

a.pdf {
padding-left:22px;
background:url(../img/icona_pdf.png) left top no-repeat;
}

a.audio {
padding-left:22px;
background:url(../img/icona_so.png) left top no-repeat;
}

a.video {
padding-left:22px;
background:url(../img/icona_v.png) left top no-repeat;
}

a.llibre {
padding-left:22px;
background:url(../img/icona_llibre.png) left top no-repeat;
}

a.web {
padding-left:22px;
background:url(../img/icona_web.png) left top no-repeat;
}

a.carto {
padding-left:22px;
background:url(../img/icona_carto.png) left top no-repeat;
}

a.carto_kml {
padding-left:22px;
background:url(../img/icon-kml.png) left top no-repeat;
}

a.carto_imtopo {
padding-left:22px;
background:url(../img/icona_instamaps.png) left top no-repeat;
}

a.carto_imorto {
padding-left:22px;
background:url(../img/icona_instamaps2.png) left top no-repeat;
}

a.fletxadreta {
padding-left:22px;
background:url(../img/fletxa_dreta.png) left top no-repeat;
}

.imatgedreta {
float: right;
margin: 5px 0 20px 20px;
}

.fotodreta350, .fotodreta200 {
width: 360px;
margin: 0px 40px 10px 25px;
float: right;
border: 1px solid #EDE5DE;
background-color:#F6F2EF;
}

.fotodreta350 { width: 360px; }
.fotodreta200 { width: 210px; }

.fotodreta350 img, .fotodreta200 img {
padding: 5px;
}

#principal .fotodreta350 p, #principal .fotodreta200 p {
padding: 0 5px 5px 5px;
margin: 0;
font-size:85%;
line-height:130%;
text-align:left;
color: #331F00;
}

.peufoto {font-size:80%; color:#999999; margin-top: .5em; }

.datacrono {	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #999999;}

/************************ INTERIORS ************************/

dl.llistatactivitats dt { clear:both; float:left; width: 110px; padding: 0; margin: 0; overflow: hidden}
dl.llistatactivitats dt.butlletins { width: 90px; height:140px; padding: 0; margin: 20px 20px 0 0; overflow: hidden}
dl.imatgegran dt 		{ clear:both; float:left; width: 220px; padding: 0; margin: 0; }
dl.llistatactivitats dt, dl.llistatactivitats dd.titol {margin: .5em 0 0 0; padding:1em 0 0 0;}
dl.llistatactivitats dd { width: 450px; float: left }
dl.imatgegran dd { width: 400px; float: left }

dl.llistatactivitats dd.titol { border-top: 1px solid #f0f0f0; font-weight:bold; }
dl.llistatactivitats dd.nomcat { text-transform: uppercase; color: #8E735B; margin: 0 0 0.5em 0 }

dl.llistatactivitats dd.titol a {font-weight: bold;}
dl.llistatactivitats dt a {margin: 0; padding: 0; }
dl.llistatactivitats dt img { margin: 0; padding: 0; }

dl.mosaic dt.butlletins { margin: 0 20px 0 0 }
dl.mosaic dt img { border: 1px solid #e0e0e0; margin-top: 3px }
dl.mosaic dd { width: 520px; float: left; padding: 0 }
dl.mosaic dd.titol { font: bold 0.95em Arial, Helvetica, Sans-serif; margin: 0 0 5px 0; border: none; padding: 0 }
dl.mosaic dd.data { font: 0.85em Arial, Helvetica, Sans-serif; margin: 0 0 5px 0; text-align: justify; text-transform: uppercase; color: #333 }
dl.mosaic dd.resum { font: 0.85em Arial, Helvetica, Sans-serif; margin: 0 0 20px 0; text-align: justify }

p.descripcioactivitat {padding-left: 420px; background-position:left top; background-repeat:no-repeat; border:1px solid red  }


dl.resultatscerca dd { padding-bottom: 0.25em; margin-bottom: 0.55em; border-bottom: 1px solid #f6f6f6 }
dl.resultatscerca dt { margin-top: 0.55em; font-weight:normal}


ul.resultatscerca li a, .mapaweb a {font-weight:normal}


/* requadres i taules */


#retalldiari {
border: 1px solid #e0e0e0;
background: #FBF9F5 url(../img/fons_retall_diari.png) no-repeat top right;
margin: 20px 40px 20px 20px;
padding-top: 30px ;
padding-left: 20px;
padding-bottom: 20px;
}

#retalldiari .entradetanoticia {background: none; border-bottom: 1px dotted #ccc; font-size:100%; font-style:italic; padding: 5px 0 10px 0px ; margin: 0 40px 10px 20px }
#retalldiari h4 {font-size:140%; margin-bottom: 0; line-height:140%}
#retalldiari p.data {color: #999999; margin-bottom: 5px;}
#retalldiari .fotodreta200 {background-color:#FFFFFF}


#fitxaCataleg { border: 1px solid #e0e0e0; background: #FBF9F5 url(../img/fons_retall_diari.png) no-repeat top right; margin: 20px 40px 20px 20px; padding: 30px 0 20px 25px; text-align: left }
#fitxaCataleg table { background: none; margin-left: 0 }
#fitxaCataleg table td { padding: 5px 0 5px 0; border-top: 1px dashed #CCC }
#fitxaCataleg table td.col1 { text-transform: uppercase; color: #444; font-size: 80%; width: 90px }
#fitxaCataleg h4 { font-size: 140%; margin: 0; padding: 0; line-height:120% }






.requadregris, .requadretaronja  {
border: 1px solid #e0e0e0;
margin: 20px 40px 20px 20px;
background-color: #f9f9f9;
margin-top: 25px;
}

.requadregris {
color: #444
}

.requadretaronja {
padding: 1em 0em 0em 1em;
}



ul.requadregris  {padding: 1.5em 0; }

.requadregris ul {padding-top: 0;}
.requadregris ol {padding-left: 1.5em; margin-right: 20px }
.requadregris ol li {padding: .5em 0; border-bottom: 1px dotted #ccc }

.requadregris p {margin: 0; }

.requadregris h6 {
color: #333;
background-color:#e0e0e0;
padding: 0.2em 2em 0.1em;
letter-spacing:0.1em;
font-size:100%;
}

.requadre p {margin-left: 20px; margin-right: 20px; }


td.gris, td.grisfosc { padding: 10px; border: 1px dotted #999999; text-align:center; }
td.gris { background-color: #F3F3F3}
td.grisfosc { background-color: #CCCCCC; }



table.quadres {
font-size:90%;
line-height:120%;
font-weight:bold;
color: #444;
}

table.quadres th {padding: 1em; }
table.quadres td { vertical-align:middle }

table.dades {
font-size:90%;
color: #444;
border: 1px solid #999;
margin-top: 2em;
background-color:#f9f9f9;
 }

table.dades th, table.dades td {padding: .5em; vertical-align:middle}
table.dades th {background-color: #f0f0f0; }
table.dades li { margin: 0;}
table.dades ul { margin: 0;}
table.dades a {font-weight:normal; }

/* Organigrama */

ul.organigrama li{ margin: 5px 0 0 0; padding: 5px 0 0 0; list-style:none; border-top: 1px solid #ccc;}
ul.organigrama ul { margin: 10px 20px; padding-left: 0px; border-left: 1px dotted #999 }
ul.organigrama ul li{ margin: 0 5px; list-style: square; padding:0; border-top: none }
ul.organigrama li.ultim {padding-bottom: 5px; border-bottom: 1px solid #ccc;}

/* fitxa publicació */

.colintesquerra {
float: left;
width: 180px;
margin-left: 0px;
border-right: 1px dotted #999;
}

.colintesquerra ul li {
margin: 10px;
font-size:90%;
line-height:130%}

.colintdreta {
margin-left: 185px;
}
.requadreintrollibre {
color: #444;
padding: 20px;
margin: 0 40px 20px 20px;
background-color: #f9f9f9;
font-size:90%
}
.indexcontinguts {
color: #444;
padding: 0px 10px 20px 0;
margin: 20px 40px 40px 20px;
background-color: #f9f9f9;
border-top: 2px solid #f0f0f0;
font-size:90%
}
.indexcontinguts h5 {margin-top: 20px; }


/* llistat butlletins */

ul.llistatbutlletins {
list-style:none;
margin: 0;
}
ul.llistatbutlletins li {
float: left;
text-align:center;
padding: 0;
margin: 0;
}

ul.llistatbutlletins a {
display: block;
width: 194px;
padding: 0.5em;
border: 1px solid blue;
margin: 2px;
padding: .25em .5em;
background-color:#F1F5F8;
color:#333333;
border: 1px solid #E3EBF2;
font-weight: normal;
}

ul.llistatbutlletins a:hover {
background-color:#E3EBF2;
text-decoration:none;
color: #000000;

}


/*------ AGENDA ----------------------------------------------*/

div#calendari	{
	visibility: hidden;
	background-color: #FFEAC7;
	position: absolute;
	z-index: 100;
	top: 193px;
	left: auto;
	margin-left: -300px;
	width: 300px;
	border: 1px solid #FFCB78;
	padding: 1em 1em 0 1em;
	font-size: 90% ;
}

.calacte {
	margin: 0 0 3px 0;
	padding: 0 0 0 10px;
	font-weight: bold;
	background-image: url(../img/bul_calendari.gif);
	background-repeat: no-repeat;
	background-position: 0px 5px;
}

.calactedata {
	margin: 0 0 10px 0;
	padding: 0 0 0 10px;
	color: #76541E;
}


#calendari dt {font-weight:bold; }
#calendari dd {
color: #666666;
margin-bottom: 0.5em;
padding-bottom: 0.5em;
border-bottom: 1px solid #fff;
 }


/*------ calendari --------*/

.taulacalendari {
background-color:#f6f6f6; /*#EEF1F5*/
border: 3px solid #f0f0f0;
font-size:0.8em;
font-family:Arial, Helvetica, sans-serif;
margin: 20px 0 20px 20px}

.taulacalendari td {
padding: 2px;
color:#333;
text-align: center;
border: 2px solid #f0f0f0;
}

.taulacalendari td a {font-weight:bold}

.capdesetmana {
background-color:#DFDADA;
}
.entresetmana {
background-color:#FFFFFF;
}
.diaambactivitat {
background-color:#FFCB78;
}
.diaambactivitat a {
font-weight:bold;
}
.calmes {
	font: 1.1em Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-align: center;
	background-color: #C5D7EE;
}

/*------ GUIES I DOCUMENTS (MENÚ) --------*/

ul.guies, ul.cartes
{
padding-right: 0px;
padding-left: 0px;
float: left;
padding-bottom: 0px;
margin: 15px 0px;
width: 100%;
padding-top: 0px;
list-style-type: none
}

ul.guies, ul.cartes
{ margin: 10px 0px}

ul.guies li, ul.cartes li
{
display: inline;
float: left;
width: 40%;
}

ul.guies a, ul.cartes a {
display: block;
border: 1px solid blue;
margin: 2px;
padding: .25em .5em;
background-color:#F1F5F8;
color:#333333;
border: 1px solid #E3EBF2;
font-weight: normal;
}

ul.cartes a {
padding: .10em .5em;}

ul.guies a:hover, ul.cartes a:hover {
background-color:#E3EBF2;
text-decoration:none;
color: #000000;
}

ul.cartes li {
width: 25%}

/* directori */
.directori h4 {float: left; clear:both; width: 100px; margin-left: 20px; text-align: right; padding-top: .55em; font-size: 100%; color: #666; font-weight:normal; border-top: 1px dotted #ccc; }
.directori dl  {margin-left: 160px; }

/*formularis*/
.camp {
	font: 0.9em Verdana, Arial, Helvetica, Sans-serif;
	padding: 3px;
	margin: 3px;
}

.form1 {
	font: bold 0.9em Arial, Helvetica, Sans-serif;
	margin: 5px 5px 5px 10px;
	width: 130px;
	text-align: right;
	color: #8A8880;
}

/* icones socials */

#boto_webs { float: right; height: 21px; margin: 30px 0 0 1em; padding: 0 0 0 1em; border-left: 1px solid #456B8C; }
#boto_webs a { font-family: 'futura_lt_btlight'; color: white; font-size: 0.8em; display: block; width: 135px; text-align: center; border: none; padding: 4px 7px 2px 7px; background-color:#305A8D; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;}
#icones_socials { float: right; height: 21px; margin: 30px 0 0 1em; padding: 0 0 0 1em; border-left: 1px solid #456B8C; }
#icones_socials img { width: 21px; height: 21px; border: none }
/*
#marc_boto_webs  {margin: 30px 0 0 1em; padding: 0 0 0 1em; border-left: 1px solid #456B8C; }
#boto_webs {
	font: 0.9em Arial, Helvetica, Sans-serif;
	background-color: #305A8D;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 20px;
    border-radius: 20px;
}

#boto_webs a { color: white; text-decoration: none }
*/



/* Galeria de fotos  */

.fotodreta350, .fotodreta200 {
width: 360px;
margin: 0px 40px 10px 25px;
float: right;
border: 1px solid #EDE5DE;
background-color:#F6F2EF;
}

ul.galeria {margin: -10px 0 0 0px; padding: 0}

ul.galeria li { list-style: none; float: left; margin:0  2px 2px 0px ; padding: 0; border: 0px solid #ccc}

ul.galeria li a {
display: block;
width: 54px;
height:54px;
margin:0;
background: no-repeat center;
border: 4px solid #F6F2EF;
overflow:hidden;
}

ul.galeria li a:hover {border-color: #333; }


/* botons socials peu */

#botons_addthis {margin: 40px 40px 0 20px; border-top: 1px dotted #ccc; padding: 10px 0px 10px 0px; font-size:85%; }


/* mapa de materials educatius */
/***********************************************************************************************************************/

ul#mapa_ctp {
	list-style: none;
	background: url(../img/ilustracions_articles/ctp/mapa_ctp.jpg) no-repeat 0 0;
	position: relative;
	width: 500px;
	height: 487px;
	margin: 0;
	padding: 0;
	margin-bottom: 20px;
}

ul#mapa_ctp li {
	/*border: 1px solid #000;*/
	position: absolute;
}

ul#mapa_ctp li a{
	display: block;
	height: 100%;
	text-decoration: none;
	/*text-indent: -9000px;*/
}


ul#mapa_ctp li#pai1 {
 width: 23px; height: 23px; top: 293px; left: 275px; }
ul#mapa_ctp li#pai2 {
  width: 23px; height: 23px; top: 228px; left: 210px; }
ul#mapa_ctp li#pai3 {
  width: 23px; height: 23px; top: 303px; left:248px; }
ul#mapa_ctp li#pai4 {
  width: 23px; height: 23px; top: 200px; left: 417px; }
ul#mapa_ctp li#pai5 {
  width: 23px; height: 23px; top: 140px; left: 325px; }
ul#mapa_ctp li#pai6 {
	width: 23px; height: 23px; top: 324px; left: 67px; }
ul#mapa_ctp li#pai7 {
  width: 23px; height: 23px; top: 349px; left: 115px; }
ul#mapa_ctp li#pai8 {
  width: 23px; height: 23px; top: 254px; left:258px; }
ul#mapa_ctp li#pai9 {
  width: 23px; height: 23px; top: 325px; left: 15px; }
ul#mapa_ctp li#pai10 {
  width: 23px; height: 23px; top: 230px; left: 32px; }
ul#mapa_ctp li#pai11 {
  width: 23px; height: 23px; top: 82px; left: 229px; }
ul#mapa_ctp li#pai12 {
 width: 23px; height: 23px; top: 15px; left: 67px; }

ul#mapa_ctp li a:hover {
	background: url(../img/ilustracions_articles/ctp/mapa_ctp_bn.jpg) no-repeat 0 0;
}

ul#mapa_ctp li#pai1 a:hover {
	background-position: -305px -293px;}
ul#mapa_ctp li#pai2 a:hover {
	background-position: -240px -228px;}
ul#mapa_ctp li#pai3 a:hover {
	background-position: -278px -303px;}
ul#mapa_ctp li#pai4 a:hover {
	background-position: -447px -200px;}
ul#mapa_ctp li#pai5 a:hover {
	background-position: -355px -140px;}
ul#mapa_ctp li#pai6 a:hover {
	background-position: -97px -324px;}
ul#mapa_ctp li#pai7 a:hover {
	background-position: -145px -349px;}
ul#mapa_ctp li#pai8 a:hover {
	background-position: -288px -254px;}
ul#mapa_ctp li#pai9 a:hover {
	background-position: -45px -325px;}
ul#mapa_ctp li#pai10 a:hover {
	background-position: -62px -230px;}
ul#mapa_ctp li#pai11 a:hover {
	background-position: -259px -82px;}
ul#mapa_ctp li#pai12 a:hover {
	background-position: -97px -15px;}

ul#mapa_ctp li a:hover span {
	display: block;
	padding: 5px;
	width: 100px;
	background: #000;
	position: relative;
	top: 100%;
	left: 100%;
	font: 11px Arial, Helvetica, sans-serif;
	opacity: .75;
	filter:alpha(opacity=75);
	color: #FFF;
}

ul#mapa_ctp li a span {
	display: none;
}

ul#mapa_ctp li a:hover span {
	display: block;
}



/* llista webs de l'observatori, fet amb OL perquè un estil posterior aplicat a UL causava problemes */
ol.webs { list-style: none; margin: 0 0 0 8px; padding: 0 }
ol.webs li { float: left; margin: 0 0 10px 22px; padding: 0; height: 153px; background: url(../img/webs_shw2.jpg) no-repeat bottom; text-align: left }
ol.webs li a { border: 2px solid #085A8D; width: 275px; height: 125px; display: block; background: url(../img/fotowebs_wikipedra.jpg) no-repeat 1px 1px; text-align: left }
ol.webs li a:hover { text-decoration: none; border-color: #8C5B30 }
ol.webs li div.text1 { font: 0.8em Arial, Helvetica, Sans-serif; text-transform: uppercase; margin: 8px 5px 1px 90px; text-align: left; padding: 0; width: auto }
ol.webs li a div.text1 { color: #444; text-decoration: none }
ol.webs li div.text2 { font: bold 1em Arial, Helvetica, Sans-serif; margin: 0 5px 4px 90px; text-align: left; padding: 0; width: auto }
ol.webs li a:hover div.text2 { text-decoration: underline }
ol.webs li div.text3 { font: 0.90em Arial, Helvetica, Sans-serif; margin: 0 5px 0 90px; text-align: left; padding: 0; width: auto }
ol.webs li a div.text3 { color: #333; text-decoration: none }


/*
ul.webs { list-style: none; margin: 0; padding: 0 }
ul.webs li { float: left; margin: 0 0 10px 10px; padding: 0; display: block; width: 309px; height: 163px; background: url(../img/webs_shw.jpg) no-repeat bottom; text-align: left }
ul.webs li a { border: 2px solid #085A8D; width: 301px; height: 135px; display: block; background: url(../img/fotowebs_wikipedra.jpg) no-repeat 1px 1px; text-align: left }
ul.webs li a:hover { text-decoration: none; border-color: #8C5B30 }
ul.webs li div.text1 { font: 0.85em Arial, Helvetica, Sans-serif; text-transform: uppercase; margin: 10px 5px 4px 114px; text-align: left; padding: 0; width: auto }
ul.webs li a div.text1 { color: #444; text-decoration: none }
ul.webs li div.text2 { font: bold 1.05em Arial, Helvetica, Sans-serif; margin: 0 5px 4px 114px; text-align: left; padding: 0; width: auto }
ul.webs li a:hover div.text2 { text-decoration: underline }
ul.webs li div.text3 { font: 0.90em Arial, Helvetica, Sans-serif; margin: 0 5px 0 114px; text-align: left; padding: 0; width: auto }
ul.webs li a div.text3 { color: #333; text-decoration: none }
*/


div.butlletiEdicions { clear: both; background: url(../img/bg_mosaic.jpg) no-repeat bottom; border: 2px solid #E3EBF2; margin: 3px 40px 0 20px }
div.butlletiEdicions ul { margin-top: 15px }
div.butlletiEdicions li { padding-bottom: 5px }

ul.butlletiAnys { list-style: none; margin: 0; padding: 0 }
ul.butlletiAnys li { float: left; margin: 0; padding-bottom: 15px }
ul.butlletiAnys li a { background: #F1F5F8; padding: 5px 12px 5px 12px; margin-right: 5px; border: 2px solid #E3EBF2; text-decoration: none }
ul.butlletiAnys li a:hover { background: #F1F5F8; padding: 5px 12px 5px 12px; border: 2px solid #456B8C; text-decoration: none }

/*ul.butlletiAnys li.seleccionat a { font-weight: bold; color: #000; background: #FFF; padding: 5px 12px 5px 12px; border: 2px solid #E3EBF2; border-bottom: 2px solid #FFF; text-decoration: none }*/
ul.butlletiAnys li.seleccionat a { font-weight: bold; color: #000; background: #FFF; padding: 5px 12px 5px 12px; border: 2px solid #E3EBF2; text-decoration: none }


/* modificació al menú butlletins */
.paddingb15 {padding-bottom: 15px}
.liniapunts {border-top: 2px dotted #E3EBF2; padding-top: 15px }

div.reset { clear: both; height: 0; line-height: 0; font-size: 0; margin: 0; padding: 0 }


table.subscripcions { clear: both; margin-left: 150px; width: 530px }
table.subscripcions td { padding: 0 }
table.subscripcions p { margin: 0 0 5px -15px; padding: 0 }

/* FORM SUBSCRIPCIONS */

.formSubscripcions                { clear: both; border: 2px solid #E0E0E0; margin-right: 40px; margin-left: 20px; margin-bottom: 1em;}
.formSubscripcions *              {font:inherit}
.formSubscripcions div            { margin: 0 0 5px 0}
.formSubscripcions label          {clear: both; display: block; width: 160px; margin-right: 10px; text-align:right; float: left; font-weight:bold}
.formSubscripcions fieldset       {background-color:#f6f6f6; padding:0.5em ; margin:0; color:#333; border:none}
.formSubscripcions legend         {font-weight:bold; padding:0; margin:0}
.formSubscripcions p              {margin-bottom:0.8em}
.formSubscripcions input.text     {background:#FFF0D0; border:2px inset #ccc; width:250px; background:#dde; padding:2px 3px 2px 5px; vertical-align:middle}
.formSubscripcions textarea       {margin-left:0; font-size:100%; vertical-align: text-top}
.formSubscripcions .boto   { border:1px solid #333; color:#ccc; background:#444; vertical-align:bottom; padding: 2px 10px 2px 10px; width: auto; margin-left: 170px; cursor: pointer }

.formSubscripcions ol {list-style:none; margin: 0}
.formSubscripcions ol li {margin: 0; padding: 8px 5px 8px 5px; border-bottom: 2px solid white }
.formSubscripcions li.botonera { background: #E0E0E0; border: none }
.formSubscripcions ol li.ultim {border-bottom: none }

.formSubscripcions input.radio    {vertical-align:bottom; width: auto; border: none; background-color:#f6f6f6; margin-right: 5px}


ul.menuSubscripcions { list-style: none; margin: 0; padding: 0; z-index: 32000 }
ul.menuSubscripcions li { margin: 0; padding: 0 }
ul.menuSubscripcions li a { float: left; display: block; padding: 4px 10px 3px 10px; border: 2px solid #E0E0E0; border-bottom: none; background: #FFF; margin-right: 5px }
ul.menuSubscripcions li a.actual { font-weight: bold; border: 2px solid #E0E0E0; border-bottom: 2px solid #F6F6F6; background: #F6F6F6; color: #000; margin: 0 5px -10px 0; }

<!-- Estilo barra CSS -->

#barracookies1 {text-transform: NONE;display: none;z-index: 99999;position:absolut;left:0px;right:0px;bottom:0px;width:100%;min-height:15px;padding-bottom:10px; background-color: rgba(0, 0, 0, 0.65);color:fff;line-height:20px;font-family:verdana;font-size:9px;text-align:center;box-sizing:border-box;} 
#barracookies a:nth-child(2) {padding:4px;background:#4682B4;border-radius:5px;text-decoration:none;} 
#barracookies a {color: #fff; padding:4px;background:#4682B4;border-radius:5px;text-decoration:none;}
#barracookies a:hover {color: #4987D2;text-decoration: underline;BACKGROUND:none;}


#barracookies {
    display:none;
    position:fixed;
    left:0px;
    right:0px;
    bottom:0px;
    padding-bottom:10px;
    width:100%;
    text-align:center;
    min-height:15px;
    background-color: rgba(0, 0, 0, 0.65);
    color:#fff;
    z-index:99999;
}
 
.inner {
    width:100%;
    position:absolute;
    padding-left:5px;
    font-family:verdana;
    font-size:9px;
    top:30%;
}
 
.inner a.ok {
    padding:4px;
    color:# FFF;
    text-decoration:none;
}
 
.inner a.info {
    padding-left:5px;
    text-decoration:none;
    color:#faff00;
}

.liniah4 {
	border-top: 2px solid #ddd;
	padding-top: 10px	
}

/* WEBS DE L'OBSERVATORI */

/* amagar botó radi */
input[id^="webs"]{
display: none;
}
/* Estil botó clicable */
input[id^="webs"] + label {
display: block;
width: 200px;
margin: 0 auto;
padding: 5px 20px;
background: #305A8D;
cursor: pointer;
}
/* Estilo botón cuando su INPUT está seleccionado */
input[id^="webs"]:checked + label {
color: #333;
background: #ccc;
}
/* Estilo caja SPOILER (inicialmente oculto) */
input[id^="webs"] ~ .c_webs {
width: 90%;
height: 0;
overflow: hidden;
opacity: 0;
margin: 10px auto 0;
}
/* Estilo caja SPOILER cuando su INPUT está seleccionado */
input[id^="webs"]:checked + label + .c_webs{
position: absolute;
top: 12px;
left: 400px;
height: auto;
opacity: 1;
}