p/*
Totssom.cat - Fundació puntCAT
Can Antaviana, 2009

-basic
-layout
-vincles
-branding
-nav_main
-estils
-site_info
*/

/*---------------
Basic
---------------------------------------------*/
html {font-size: 100%;} /* WinIE text resize correction */
body {
	font-size: 1em;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	text-align: center;
	color: #333;
	background: #fafafa url(images/bg_body.jpg) repeat-x;
	padding: 0;
	margin: 0;
}
ul,ol,dl,fieldset {margin:0;padding:0;}
img,abbr,acronym,fieldset {border: none;}
ul {list-style: none;}
hr {display: none;}

/*Clearfix*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
	.clearfix {display:block;}
/* End hide from IE Mac */

/*acc*/
#acc {
	position : absolute;
	top : -9000px;
	left : -9000px;
	z-index : 1;
}
	#acc a:focus,
	#acc a:active {
		position : absolute;
		top : 9010px;
		left : 9010px;
		background : #fff;
		color : #333;
		padding : 5px;
		font-weight : bold;
		border : 1px solid #600;
		width : 10em;
		z-index : 1;
	}

/*---------------
Layout
---------------------------------------------*/
#container_main {
	width: 60em;
	max-width: 95%;
	min-width: 45em;
	margin: 0 auto;
	text-align: left;
}
	#container_sub {
		width: 100%;
		float: left;
		background: #fafafa url(images/bg_container_sub.jpg) repeat-x;
		padding-top: 1em;
	}
		#content_main {margin: 0 37px;}
	#site_info {
		clear: both;
		background: #15170b url(images/bg_site_info.jpg) 60% 0 repeat-x;
		padding: 290px 38px 0 49px;
	}

/*---------------
Vincles
---------------------------------------------*/
/*General*/
a:link {
	color: #c00;
	text-decoration: none;
	border-bottom: 1px solid #c66;
}
a:visited {
	color: #666;
	text-decoration: none;
	border-bottom: 1px solid #666;
}
a:focus {
	color: #fff;
	text-decoration: none;
	outline: 0;
	background-color: #c00;
}
a:hover {
	color: #fff;
	text-decoration: none;
	background: #c00;
	border-bottom: 1px solid #c00;
}
a:active {
	color: #fff;
	text-decoration: none;
	outline: 0;
	background-color: #c00;
}
/*Branding*/
h1 a:focus span,
h1 a:active span {outline: 1px dotted #000;}
/*idiomes*/
#branding ul a:link,
#branding ul a:visited {
	color: #c00;
	border-bottom: none;
}
#branding ul a:hover {
	background: none;
	text-decoration: underline;
}
#branding ul a:focus,
#branding ul a:active {
	outline: 1px dotted #000;
	background: none;
}
/*Vincles en imatges*/
a:link.img,
a:visited.img,
a:hover.img,
a:focus.img,
a:active.img {
	background: none;
	border: none;
}
a:focus.img,
a:active.img {
	outline: 1px dotted #000;
}
/*Vincles externs*/
a.external {
	background-image: url(images/icon_link_ext.gif);
	background-position: 100% 50%;
	background-repeat: no-repeat;
	padding-right: 14px;
}
a:visited.external {background-image: url(images/icon_link_ext3.gif);}
a:hover.external,
a:focus.external,
a:active.external {background-image: url(images/icon_link_ext2.gif);}

/*---------------
Branding
---------------------------------------------*/
#branding {
	background: #fff url(images/bg_branding.jpg) repeat-x;
	position: relative;
	padding: 24px 0 0 37px;
	height: 73px;
}
	/*logo*/
	h1 {
		padding: 0;
		margin: 0;
		width: 95px;
		height: 45px;
		position: relative;
		font-size: 1.4em;
		overflow: hidden;
	}
		h1 a {
			color: #000;
			text-decoration: none;
			font-weight: normal;
		}
		h1 span {
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url(images/logo_fundacio_puntcat.jpg) no-repeat;
			cursor: pointer;
		}
			h1 a:focus span,
			h1 a:active span {outline: 1px dotted #000;}
	#branding h2 {
		font-family: Futura, Helvetica, Arial, Verdana, sans-serif;
		margin: 0;
		font-weight: normal;
		color: #c00;
		position: relative;
		overflow: hidden;
		height: 45px;
		width: 331px;
		left: 95px;
		top: -45px;
	}
		#branding h2 span {
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url(images/titol_totssom.jpg) no-repeat;
		}
/*ul#*/
#branding ul {
	position: absolute;
	top: 0;
	right: 17px;
	padding-top: 5px;
}
	#branding ul li {display: inline;}
		#branding ul li a {
			display: block;
			float: left;
			font-size: .75em;
			padding: .5em 1em;
		}
		#branding ul li.current a:link,
		#branding ul li.current a:visited,
		#branding ul li.current a:hover {
			background: url(images/bg_ul_varis_totssom.jpg) no-repeat;
			color: #fff;
		}
		#branding ul li.current a:hover,
		#branding ul li.current a:focus,
		#branding ul li.current a:active {
			background-position: -98px 0;
			text-decoration: none;
		}
/*ul#idiomes*/
#branding ul#idiomes {
	right: 247px;
	background: url(images/icon_idiomes.gif) 0 12px no-repeat;
	padding-left: 15px;
}

/*---------------
nav_main
---------------------------------------------*/
#nav {
	background: #000 url(images/bg_nav_main.jpg) repeat-x;
	height: 2.75em;
	position: relative;
}
	ul#nav_main {
		position: absolute;
		bottom: 0;
		left: 37px;
	}
		ul#nav_main li {display: inline;}
			ul#nav_main li a {
				display: block;
				padding: .6em 1em .6em;
				float: left;
				font-size: .875em;
				color: #fc0;
				background: url(images/separador_bg_nav.jpg) 0 100% no-repeat;
				border: none;
			}
				ul#nav_main li a:hover {color: #fff;}
				ul#nav_main li a:focus,
				ul#nav_main li a:active {outline: 1px dotted #fff;}
				ul#nav_main li.current a {
					color: #000;
					background: #e9e9e9 url(images/bg_nav_main_current.gif) 50% 100% no-repeat;
					position: relative;
				}
					ul#nav_main li.current a:hover {color: #000;}
				ul#nav_main li.next a {background: none;}
				ul#nav_main li.current a span {
					display: block;
					position: absolute;
					width: 6px;
					height: 32px;
				}
					ul#nav_main li.current a span.l {
						background: url(images/bg_nav_main_tab_l.jpg) no-repeat;
						left: 0;
						top: 0;
					}
					ul#nav_main li.current a span.r {
						background: url(images/bg_nav_main_tab_r.jpg) no-repeat;
						right: 0;
						top: 0;
					}

/*---------------
Estils
---------------------------------------------*/
#content_main h3 {
	font-family: Futura, "Trebuchet MS", Helvetica, Arial, sans-serif;
	font-size: 1.125em;
	margin: 0 0 .5em;
	line-height: 1.2em;
	letter-spacing: -.03em;
	font-weight: normal;
	color: #000;
}
	#content_main h3 em {
		text-transform: uppercase;
		font-style: normal;
	}
	#content_main h3 span {color: #c00;}
	#content_main div.a h3 {
		text-transform: uppercase;
		border-bottom: 1px solid #999;
		padding-bottom: .2em;
	}
	#content_main div#web h3 {width: 90px;}
	#content_main div#interacciona h3 em,
	#content_main div#xarxa h3 span,
	#content_main div#blocs h3 span {display: block;}
/*caixes*/
/*caixa a*/
div.a li {
	width: 23.77%;
	float: left;
	margin: 0 1.64% 0 0;
	background: #eee url(images/bg_caixa_bl.gif) 0 100% no-repeat;
	position: relative;
}
	div.a li div {margin: 10px 15px;}
	div.a li span {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 5px;
		height: 5px;
		background: url(images/bg_caixa_br.gif);
	}
	div.a li p {
		font-size: .75em;
		margin: 0 0 1.125em;
		line-height: 1.5em;
	}
	#content_main div.a h4 {margin: 0;height: 1%;}
		#content_main div.a h4 a:link,
		#content_main div.a h4 a:visited,
		#content_main div.a h4 a:hover,
		#content_main div.a h4 a:focus,
		#content_main div.a h4 a:active {
			border: none;
			background: none;
		}
		#content_main div.a h4 a:focus,
		#content_main div.a h4 a:active {outline: 1px dotted #000;}
			#content_main div.a h4 img {width: 100%;}
	/*fotobloc*/
	div.a li#fotobloc div {overflow: hidden;}
		div.a li#fotobloc div a.img,
		div.a li#youtube div a.img,
		div.a li#rmesd div a.img {
			width: 100%;
			display: block;
			text-align: center;
			background: #000;
			line-height: 0;
			margin: 0 0 .5em;
		}
	div.a li#fotobloc p {margin: 0 0 .5em;}
	/*rmesd*/
	div.a li#rmesd div {overflow: hidden;}
/*		div.a li#rmesd div a.img {margin-left:-5px;}*/

	/*twitter*/
	div.a li#twitter p {
		border-bottom: 1px solid #ccc;
		font-size: .7em;
		font-weight:bold;
		padding:.4em 0;
		margin: .4em 0;
	}
		div.a li#twitter p span {
			display:block;
			position:relative;
			width: auto;
			background: none;
			height: auto;
			font-weight: normal;
			font-style:italic
		}

		div.a li#twitter p.last {
			border: none;
		}
	/*facebook*/
	div.a li#facebook div {overflow: hidden;}
	div.a li#facebook div li {
		width: 50px;
		background: none;
		margin: 0 3px 5px;
		font-family: "Lucida Grande", Tahoma, Verdana, Arial, Sans-serif;
		font-size: .6875em;
		text-align: center;
	}
		div.a li#facebook div li a.img{
			display: block;
			height: 75px;
			line-height: 75px;
			margin-bottom: 2px;
			overflow: hidden;
		}
			div.a li#facebook div li a.img:focus,
			div.a li#facebook div li a.img:active,
			div.a li#rmesd div a.img:focus,
			div.a li#rmesd div a.img:active {background: none;}
			div.a li#facebook div li a img,
			div.a li#rmesd div a.img {vertical-align: middle;}
			div.a li#facebook div li p {font-size: 1em;}
				div.a li#facebook div li a:link,
				div.a li#facebook div li a:visited {
					border: none;
					color: #3b5998;
				}
				div.a li#facebook div li a:hover {
					background: none;
					text-decoration: underline;
				}
				div.a li#facebook div li a:focus,
				div.a li#facebook div li a:active {
					color: #fff;
					background: #3b5998;
				}
	/*youtube*/
	div.a li#youtube {margin-right: 0;}
	div.a li#youtube div {overflow: hidden;}
		/*div.a li#youtube div p {font-weight: bold;}*/
			div.a li#youtube div a:link {
				color: #333;
				border-bottom-color: #333;
				font-weight: bold;
			}
			div.a li#youtube div a:hover,
			div.a li#youtube div a:focus,
			div.a li#youtube div a:active {
				color: #fff;
				border: none;
			}
	/*bloc amics.cat*/
	div.a li#amics {margin-right: 0;}
		div.a li#amics h5 {
			font-size: .9375em;
			margin: 0 0 .5em;
			line-height: 1.2em;
		}

/*caixes b*/
div#altres {margin: 0 0 10px;}
div.b {
	width: 24.15%;
	float: left;
	margin: 0 1.13% 0 0;
}
	div#web {margin-right: 0;}
	div.b h4,
	div#rebost h4,
	div#apren h4 {
		font-size: .8125em;
		margin: 0;
		padding-top:0;
	}
		div.b li a,
		div#rebost li a,
		div#apren li a {
			background: #e5e5e5 4px 50% no-repeat;
			display: block;
			color: #333;
			border: none;
			padding: 13px 5px 13px 42px;
			margin: 0 0 7px;
		}
			div.b li a:hover,
			div#rebost li a:hover,
			div#apren li a:hover,
			div.b li a:focus,
			div#rebost li a:focus,
			div#apren li a:focus,
			div.b li a:active,
			div#rebost li a:active,
			div#apren li a:active {
				background-color: #333;
				color: #fff;
			}
			div.b li.fotobloc a {background-image: url(images/ico_fotoloc.png);}
			div.b li.conquesta a {background-image: url(images/ico_conquesta.png);}
			div.b li.estalvi a {background-image: url(images/ico_estalvi.png);}
			div.b li.paucasals a {background-image: url(images/ico_paucasals.png);}
			div.b li.facebook a {background-image: url(images/ico_facebook.png);}
			div.b li.youtube a {background-image: url(images/ico_youtube.png);}
			div.b li.flickr a {background-image: url(images/ico_flickr.png);}
			div.b li.mapa a {background-image: url(images/ico_mapapuntcat.png);}
			div.b li.altres a {background-image: url(images/ico_altres.png);}
			div.b li.bloccat a {background-image: url(images/ico_bloccat.png);}
			div.b li.bloc a {background-image: url(images/ico_bloc.png);}
			div.b li.twitter a {background-image: url(images/ico_twitter.png);}
			div.b li.twitter_en a {background-image: url(images/ico_twitter_en.png);}
			div.b li.widget a {background-image: url(images/ico_widget.png);}
			div.b li.rss a {background-image: url(images/ico_rss.png);}
			div.b li.stjordi09 a {background-image: url(images/ico_stjordi09.png);}
			div.b li.stjordi10 a {background-image: url(images/ico_stjordi10.png);}
			div.b li.varis a {background-image: url(images/ico_varis.png);}
			div.b li.elteuvideo a {background-image: url(images/ico_elteuvideo.png);}
/*Apren*/
div#apren {
	background: #ffc745 url(images/bg_apren.jpg) no-repeat;
	width: 49.435%;
	/*height: 168px;*/
	height: 216px;
	margin: 0 0 0px;
	float: left;
	position: relative;
}
	
		div#apren li a {
			margin: 0 0 5px;
		}
	div#apren h3 {
		text-transform: uppercase;
		position: absolute;
		margin: 0;
		left: 18px;
		top: 14px;
	}
	div#apren span,
	a#botiga span {
		display: block;
		position: absolute;
		width: 10px;
		height: 168px;
		right: 0;
		top: 0;
		background: url(images/bg_apren_r.jpg) no-repeat;
	}
	div#apren ul {
		width: 62.79%;
		position: absolute;
		margin: 0;
		left: 34.5%;
		top: 14px;
	}
		div#apren li a {background-color: #ffdf88;}
			div#apren li#qfer a {background-image: url(images/ico_qfer.png);}
			div#apren li#glossari a {background-image: url(images/ico_glossari.png);}
			div#apren li#tresd a {background-image: url(images/ico_3d.png);}
			div#apren li#navegador a {background-image: url(images/ico_navegador.png);}

/*El Rebost*/
div#rebost {
	background: #c8a36f url(images/bg_rebost.jpg) no-repeat;
	width: 49.435%;
	height: 216px;
	margin: 0 0 90px;
	float: left;
	margin-right: 1.1286%;
	position: relative;
}
		div#rebost li a {
			margin: 0 0 6px;
		}
	div#rebost h3 {
		text-transform: uppercase;
		position: absolute;
		margin: 0;
		left: 18px;
		top: 14px;
	}
	div#rebost span,
	a#botiga span {
		display: block;
		position: absolute;
		width: 10px;
		height: 168px;
		right: 0;
		top: 0;
	}
	div#rebost ul {
		width: 62.79%;
		position: absolute;
		margin: 0;
		left: 34.5%;
		top: 44px;
	}
		div#rebost li a {background-color: #d9be9a;}
			div#rebost li.catendari a {background-image: url(images/ico_catendari.png);}
			div#rebost li.cataleg a {background-image: url(images/ico_cataleg.png);}
			div#rebost li.ninots a {background-image: url(images/ico_ninots.png);}

/*Botiga*/
a#botiga {
	display: block;
	float: left;
	width: 49.435%;
	overflow: hidden;
	position: relative;
}
	a#botiga span {background-image: url(images/bg_botiga_r.png);}
a#codiql {
	display: block;
	float: right;
	width: 49.435%;
	overflow: hidden;
	position: relative;
}


/*---------------
site_info
---------------------------------------------*/
#site_info div {
	float: left;
	margin-bottom: 1em;
}
	#site_info div.caixeta {
		float: none;
		margin-bottom: 0;
		border-bottom: none;
	}
		#site_info div p,
		#site_info div li {
	        font-size: .75em;
	        background: url(images/kland_llista.gif) 0 .25em no-repeat;
	        padding: 0 0 0 10px;
	        margin: 0;
		}
		#site_info div li {margin: 0 0 .5em;}
		#site_info h2 {
	        font-family: Helvetica, Arial, Verdana, sans-serif;
	        font-size: 1.125em;
	        font-weight: normal;
	        color: #999;
	        border-bottom: 1px solid #464642;
	        margin: 0 0 .5em;
	        padding-bottom: .5em;
		}
		#site_info div a:link {
	        color: #f9c800;
	        border-bottom: 1px solid #f9c800;
		}
		#site_info div a:hover,
		#site_info div a:focus,
		#site_info div a:active {
	        color: #15170b;
	        background: #f9c800;
		}
/*contacte*/
#site_info div#contacte {
	width: 34%;
	position: relative;
}
	#site_info div#contacte h2,
	#site_info div#contacte p {margin-right: 1em;}
	#site_info div#contacte p {
		background: url(images/icon_mail.jpg) 0 50% no-repeat;
		padding-left: 25px;
	}
	#site_info div#contacte p#escriu {
		background-image: url(images/icon_escriu-nos.jpg);
		padding: .2em 0 .2em 22px;
		position: absolute;
		right: .5em;
		top: .2em;
	}
		#site_info div#contacte a:link,
		#site_info div#contacte a:visited {
			color: #f9c800;
			border-bottom: 1px solid #f9c800;
		}
		#site_info div#contacte a:hover,
		#site_info div#contacte a:focus {color: #000;}
/*tots*/
#site_info div#tots {
	width: 38%;
	border: 1px dotted #666;
	border-width: 0 1px;
}
	#site_info div#tots h2,
	#site_info div#tots ul {
		margin-left: 1em;
		margin-right: 1em;
	}
/*registre*/
#site_info div#registre {width: 26%;}
	#site_info div#registre h2,
	#site_info div#registre ul {margin-left: 1em;}
p#copy {
	clear: left;
	text-align: center;
	font-size: .75em;
	background: #fff;
}
	p#copy a:visited {
		color: #c00;
		border-bottom: 1px solid #c66;
	}
	p#copy a:hover,
	p#copy a:focus,
	p#copy a:active {color: #fff;}


/* promocions */
#promo_submergeixte,
#promo_puntxpunt {
	float: left;
	border: none;
	width: 49.43%;
}
#promo_navega {
	float: left;
	border: none;
	width: 49.43%;
}
#codiqr {
	float: right;
	border: none;
	width: 49.43%;
}
#promo_bloc {
	float: right;
	border: none;
	width: 49.43%;
}
#promo_submergeixte, #promo_navega, #promo_bloc, #codiqr {
	font-size: .75em;
	color: #333;
	text-transform: uppercase;
	text-indent: 5px;
}
#promo_puntxpunt {
	font-size: .75em;
	color: #333;	
	text-indent: 5px;
}

#promo_submergeixte img,
#promo_navega img,
#codiqr img {width: 100%;}

#promo_puntxpunt img {margin-top:5px;}
#promo_bloc div {
	background: url(../comu/caixa_bloc.png) no-repeat top left;
	height: 92px;
	margin: 5px 4px;
	padding: 68px 15px 10px 15px;
	text-transform: none;
	text-indent: 0;
}
#promo_bloc div p {
	font-size: .71em; /*.70em;*/
	border-top: 1px solid #FF9A17;
	padding: 6px 0 0 0;
	margin: 2px 0;
	line-height: 1em;
}
#promo_bloc div p.ultim {
	padding: 2px 0;
	border: 0;
	margin-top: 0;
	font-size: 1.6em;
}
#promo_bloc div p.visita {
	font-size: 1.2em;
	font-weight: bold;
	background: url(../gif/boto_anar.png) no-repeat left center;
	padding: 11px 0 11px 23px;
}
#promo_bloc a, #promo_bloc a:hover, #promo_bloc a:visited {
	border: 0;
	color: #000;
	text-decoration: none;
	background: none;
	padding: 0;
}
#promo_bloc div p.ultim a{
	color: #cc0000;
}

#promo_bloc h4 {
	display: none;
}


div.flash{
	float: left;
	border: none;
	width: 49.43%;
	font-size: .75em;
	color: #333;
	text-transform: uppercase;
	text-indent: 5px;
	margin:0;padding:0;
}
div.flash p{margin:0;padding:0;}
div.flash p#player1{overflow:hidden;width:435px;height:160px;margin:6px 0 0 1px;padding:0;}
div.marc{float:left;position:absolute;z-index:2;margin:0;padding:0;width:435px;display:block;}
div.marc a{border:none;background:none;}