/*
Fundació puntCAT - Navega en català
Can Antaviana, 2010	
*/

/*---------------
=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: #fff url(images/bg_body.jpg) repeat-x;
	padding: 0;
	margin: 0;
}
ul,ol,dl,fieldset,pre,code {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 */

/*---------------
=Layout
---------------------------------------------*/
#container_main {
	width: 964px;
	margin: 0 auto;
	text-align: left;
}

/*---------------
=Vincles
---------------------------------------------*/
a:link {color: #eccc4e;}
a:visited {color: #a4b270;}
a:focus,
a:active {outline: 1px dotted #000;}
a:hover {text-decoration: none;}

/*---------------
=Branding
---------------------------------------------*/
#branding {
	background: #fff url(images/bg_branding.jpg) repeat-x;
	position: relative;
	padding: 13px 0 0 29px;
	height: 116px;
}
	#logo {
		position: relative;
		z-index: 1;
	}
h1 {
	margin: 0;
	position: absolute;
	top: 0;
	left: 273px;
	z-index:0;
}
#branding ul {
	position: absolute;
	top: 0;
	right: 17px;
	padding-top: 5px;
	z-index: 10;
}
	#branding ul li {display: inline;}
		#branding ul li a {
			display: block;
			float: left;
			font-size: .75em;
			padding: .5em 1em;
			color: #000;
			text-decoration: none;
		}
		#branding ul li a:hover {text-decoration: underline;}
		#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;
		}

/*---------------
=content_main
---------------------------------------------*/
#content_main {
	background: #4ba6a9 url(images/bg_content_main.jpg) no-repeat;
	padding: 24px 28px;
	position: relative;
}
	#content_main h2 {margin: 0 0 1em;}
	#content_main p.avis {
		font-size: 1em;
		color: #000;
		margin-right: 270px;
	}
	/*header*/
	#content_main .header {
		background-image: url('images/bg_header.jpg');
		background-repeat: no-repeat;
		padding-top: 11px;
		position: relative;
	}
		.header h2 {
			background: 0 50% no-repeat;
			margin: 0;
			padding: 12px 0 12px 65px;
		}
		#win h2 {background-image: url('images/icon_win.gif');}
		#mac h2 {background-image: url('images/icon_mac.gif');}
		#linux h2 {background-image: url('images/icon_linux.gif');}
		
		.header #navegadors {
			list-style: none;
			margin: 0;
		}
			#navegadors li {display: inline;}
			#navegadors a {
				display: block;
				float: left;
				background: #c9dcde 10px 50% no-repeat;
				width: 102px;
				padding: 15px 10px 15px 50px;
				margin: 0 10px 0 0;
				color: #000;
				text-decoration: none;
			}
			#navegadors .last a {margin-right: 0;}
			#navegadors .ie {background-image: url('images/icon_ie.gif');}
			#navegadors .ff {background-image: url('images/icon_ff.gif');}
			#navegadors .ch {background-image: url('images/icon_chrome.gif');}
			#navegadors .op {background-image: url('images/icon_opera.gif');}
			#navegadors .sa {background-image: url('images/icon_safari.gif');}
			#navegadors a:hover {background-color: #fff;}
	
	.header #sos {
		margin: 0;
		list-style: none;
		position: absolute;
		right: 13px;
		top: 3px;
	}
		.header #sos li {
			margin: 0;
			display: inline;
		}
			.header #sos li a {
				display: block;
				float: left;
				width: 62px;
				height: 63px;
				overflow: hidden;
				margin: 0 0 0 10px;
				position: relative;
			}
				.header #sos li span {
					display: block;
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					background: url('images/icones_sos.jpg') no-repeat;
				}
				.header #sos li#windows span {background-position: 0 0;}
				.header #sos li#mac span {background-position: -62px 0;}
				.header #sos li#linux span {background-position: -124px 0;}
				
				.header #sos li#windows a:hover span {background-position: 0 -63px;}
				.header #sos li#mac a:hover span {background-position: -62px -63px;}
				.header #sos li#linux a:hover span {background-position: -124px -63px;}
	
	/*bloc*/
	.bloc {
		background-color: #4b8b90;
		padding: 24px 28px;
		margin-bottom: 33px;
		color: #fff;
		position: relative;
	}
		.bloc .txt {
			width: 575px;
			float: left;
		}
			#content_main h2 {
				font-size: 1.5625em;
				color: #000;
				margin: 0 0 1.5em;
				line-height: 1;
			}
			#content_main h3 {
				font-size: 1.0625em;
				color: #ffd852;
				margin: 0 0 1.5em;
			}
			#content_main p {
				font-size: .9375em;
				margin: 0 0 1.5em 0;
				line-height: 1.5em;
			}
			#content_main em {
				color: #000;
				font-style: normal;
				font-weight: bold;
			}
				#content_main ul,
				#content_main ol {
					font-size: .9375em;
					margin: 0 0 1.5em 40px;
					line-height: 1.5em;
				}
				#content_main ul {list-style-type: disc;}
					#content_main li {margin: 0 0 .5em;}
				/*alert*/
				#content_main .txt .alert {
					background: #dae8e9 url('images/alerta-desactualitzat.jpg') 18px 24px no-repeat;
					padding: 24px 24px 15px 135px;
					margin: 0 0 1.5em;
				}
					#content_main .txt .alert p {
						color: #333;
						margin-bottom: .5em;
					}
						#content_main .txt .alert p strong {color: #000;}
						#content_main .txt .alert p a {color: #4b8b90;}
		/*installer*/
		.installer {
			float: right;
			width: 263px;
			padding-bottom: 10px;
			position: relative;
			background: #edaf04 url('images/bg_installer.gif') repeat-y;
		}
			.installer h4 {
				background: url('images/bg_installer_top.gif') no-repeat;
				margin: 0;
				padding: 24px 16px 21px 106px;
				font-size: 1.5em;
				color: #000;
			}
			#content_main .installer p {
				margin: 10px 16px;
				font-size: .8125em;
				color: #000;
			}
				#content_main .installer p a {color: #900;}
				#content_main .installer p a:visited {color: #666;}
				#content_main .installer p small {
					color: #333;
					font-style: italic;
				}
			.installer span {
				display: block;
				position: absolute;
				left: 0;
				bottom: 0;
				width: 263px;
				height: 15px;
				background: url('images/bg_installer_bottom.gif') 0 100% no-repeat;
			}
/*per què*/
#pq .bloc  {
	padding-right: 270px;
}
#content_main div#pict {
	position: absolute;
	right: 55px;
	top: 37px;
	background-repeat: no-repeat;
}
	body#pq #content_main div#pict,
	body#com_navegar #content_main div#pict {
		background-image: url(images/monitor.gif);
		width: 226px;
		height: 358px;
	}
/*com navegar*/
#content_main #so {
	list-style: none;
	margin: 0;
}
	#so li {display: inline;}
		#so a {
			display: block;
			float: left;
			width: 280px;
			height: 291px;
			position: relative;
			padding-left: 20px;
		}
			#so span {
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: url('images/botons-so.png') no-repeat;
			}
			#so #win span {background-position: 0 0;}
			#so #mac span {background-position: -300px 0;}
			#so #linux span {background-position: -600px 0;}
			
			#so #win a:hover span {background-position: 0 -291px;}
			#so #mac a:hover span {background-position: -300px -291px;}
			#so #linux a:hover span {background-position: -600px -291px;}
			
.com #content_main h3 {
	background-color: #fff;
	background-position: 10px 50%;
	background-repeat: no-repeat;
	padding: 17px 10px 17px 50px;
	color: #000;
	font-size: 1em;
}
h3#ie {background-image: url('images/icon_ie.gif');}
h3#ff {background-image: url('images/icon_ff.gif');}
h3#ch {background-image: url('images/icon_chrome.gif');}
h3#sa {background-image: url('images/icon_safari.gif');}
h3#op {background-image: url('images/icon_opera.gif');}
/*altres*/
#content_main p.altres {
	position: absolute;
	top: 3em;
	right: 40px;
	margin: 0;
	font-size: .8125em;
}
	#content_main p.altres a {color: #4b8b90;}
#content_main .txt p.altres {
	position: static;
	padding: 6px 10px;
	background: #fff;
	text-align: right;
}
/*video	*/
div.video {
	color: #000;
	background: #fff;
	padding: 20px;
	text-align: center;
	margin: 0 0 1.5em;
}
	div.video img {border: 6px solid #b0b0b0;}
	
/*credits*/
#content_main #credits {
	margin-left: 0;
	list-style: none;
}
	#credits li {
		background: url('images/bg_credits.png') no-repeat;
		margin-bottom: 20px;
		min-height: 89px;
		padding: 20px 40px 20px 0;
	}
		#credits li div {
			float: left;
			width: 208px;
			text-align: center;
		}
		#credits li h3,
		#credits li p {
			margin-left: 228px;
			margin-bottom: 0;
		}
		#credits li h3 {
			font-size: 1.467em;
			margin-bottom: 5px;
		}
			#credits li h3 a:link {color: #4b8b90;}
		#credits li p {font-size: .867em;}
/*instal·lació ok*/
#ok.install #content_main {
	background: url('images/bg_install-ok.jpg') no-repeat;
	height: 487px;
}
	#ok.install #content_main p {
		position: absolute;
	}
	#ok.install #content_main p#globus_1 {
		width: 282px;
		height: 257px;
		margin: 0;
		left: 52px;
		top: 18px;
	}
	#ok.install #content_main p#globus_2 {
		width: 292px;
		height: 258px;
		margin: 0;
		right: 159px;
		top: 93px;
	}
		#ok.install #content_main p span {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#ok.install #content_main p#globus_1 span {
			background: url('images/globus_1.jpg');
		}
		#ok.install #content_main p#globus_2 span {
			background: url('images/globus_2.jpg');
		}
/*instal·lació ko*/
#ko.install #content_main {
	background: #67b6bd url('images/bg_install-ko.jpg') no-repeat;
	height: 260px;
	padding: 110px 50px 0 290px;
}
	#ko.install #content_main h2 {
		margin-bottom: .25em;
	}
	#ko.install #content_main p {
		font-size: 1.125em;
		margin-bottom: .5em;
	}
/*la mar de webs*/
#lamar a#giny {
	position: absolute;
	display: block;
	right: 30px;
	top: 14px;
}
#lamar .bloc {
	padding-right: 17px;
	padding-left: 17px;
}
#lamar .bloc p {margin-left: 10px;}
#lamar .bloc ul {margin: 0 0 1.5em;}
	#lamar .bloc ul li {display: inline;}
		#lamar .bloc ul li a {
			display: block;
			float: left;
			width: 207px;
			height: 45px;
			padding: 30px 10px 0 55px;
			margin: 0 9px 10px 10px;
			background: url(images/bg_llistat_mar.jpg) no-repeat;
			font-size: .933em;
			color: #036;
			text-decoration: none;
			line-height: 1em;
		}
			#lamar .bloc ul li a:hover {text-decoration: underline;}
			#lamar .bloc ul li a:visited {
				background-position: -272px 0;
				padding-left: 65px;
				width: 197px;
				color: #fff;
			}

/*---------------
=nav_main
---------------------------------------------*/
#nav_main {
	background: url(images/bg_nav_main.jpg);
	width: 964px;
	height: 100px;
}
	#nav_main li {display: inline;}
		#nav_main a {
			display: block;
			height: 79px;
			float: left;
			margin: 7px 8px 0 0;
			border: none;
			position: relative;
			color: #000;
		}
		#nav_main .current span {cursor: default;}
			#nav_main span {
				display: block;
				height: 100%;
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: url(images/bg_nav_main_botons.jpg) no-repeat;
				cursor: pointer; /*ie6*/
			}
				#nav_main #inici a {width: 65px; margin-left: 7px;}
				#nav_main #inici a span {background-position: -7px -7px;}
				#nav_main #inici a:hover span {background-position: -7px -107px;}
				#nav_main #perque a {width: 110px;}
				#nav_main #perque a span {background-position: -80px -7px;}
				#nav_main #perque a:hover span,
				#nav_main #perque.current span {background-position: -80px -107px;}
				#nav_main #com a {width: 248px;}
				#nav_main #com a span {background-position: -198px -7px;}
				#nav_main #com a:hover span,
				#nav_main #com.current span {background-position: -198px -107px;}
				#nav_main #mar a {width: 176px;}
				#nav_main #mar a span {background-position: -454px -7px;}
				#nav_main #mar a:hover span,
				#nav_main #mar.current span {background-position: -454px -107px;}
				#nav_main #widget a {width: 171px;}
				#nav_main #widget a span {background-position: -638px -7px;}
				#nav_main #widget a:hover span,
				#nav_main #widget.current span {background-position: -638px -107px;}
				
				#nav_main #juga a {
					height: auto;
					margin-left: 50px;
					margin-right: 0;
				}
				

/*---------------
=site_info
---------------------------------------------*/
#site_info {
	text-align: center;
	background: url(images/bg_site_info.jpg) repeat-y;
	padding: 1em 0;
}
	#site_info p {
		margin: 1em 0;
		font-size: .75em;
		color: #fff;
	}
	#site_info a:visited {color: #eccc4e;}

/*---------------
=portada
---------------------------------------------*/
#portada #branding {
	height: 103px;
	background-image: url(images/bg_branding_portada.jpg);
}
#portada #nav_main {
	background: url(images/bg_nav_main_portada.jpg);
	width: 964px;
	height: 100px;
}
	#portada #nav_main #perque a {margin-left: 9px;}
	#portada #nav_main #perque a span {background-position: -80px -7px;}
	#portada #nav_main #perque a:hover span,
	#portada #nav_main #perque.current span {background-position: -80px -107px;}
	#portada #nav_main #com a span {background-position: -198px -7px;}
	#portada #nav_main #com a:hover span,
	#portada #nav_main #com.current span {background-position: -198px -107px;}
	#portada #nav_main #mar a span {background-position: -454px -7px;}
	#portada #nav_main #mar a:hover span,
	#portada #nav_main #mar.current span {background-position: -454px -107px;}
	#portada #nav_main #widget a span {background-position: -638px -7px;}
	#portada #nav_main #widget a:hover span,
	#portada #nav_main #widget.current span {background-position: -638px -107px;}
	
#portada #content_main {
	background: url(images/bg_content_main_portada.jpg) no-repeat;
	height: 473px;
	text-align: center;
	position: relative;
	padding: 0;
}
	#portada #content_main h1 {
		margin: 0;
		position: absolute;
		top: -79px;
		left: 77px;
		z-index: 1;
	}
	#portada #content_main h2#enfonsat {
		margin: 0;
		position: absolute;
		top: 93px;
		left: 528px;
	}
	#portada #content_main h2#juga {
		margin: 0;
		position: absolute;
		top: 340px;
		right: 7px;
	}
	
/*---------------
=alerta
---------------------------------------------*/
#portada.alerta #content_main {background-image: url(images/bg_alerta.jpg);}
	#portada.alerta #content_main h1 {
		left: 260px;
		top: -69px;
	}
	#portada.alerta #content_main h2 {
		position: absolute;
		left: 231px;
		top: 50px;
		margin: 0;
	}
	#portada.alerta #txt {
		position: absolute;
		left: 31px;
		top: 307px;
		margin: 0;
	}
	#portada.alerta #vols {
		position: absolute;
		left: 671px;
		top: 297px;
		margin: 0;
	}
	#portada.alerta #juga {
		position: absolute;
		left: 830px;
		top: 484px;
		margin: 0;
	}
	
/*---------------
=giny
---------------------------------------------*/
#elginy #content_main #giny {
	right: 40px;
	top: 25px;
	display: block;
	position: absolute;
	z-index: 1;
}
#elginy #content_main p.intro {
	padding-right: 180px;
}
#elginy #content_main .bloc h3 {
	color: #000;
}
#elginy #content_main ol {
	list-style: none;
	margin-left: 0;
}
	#elginy #content_main ol li {margin-bottom: 1em;}
		#elginy #content_main .sub_bloc {
			background: #65a9b0;
			padding: 15px;
			margin-bottom: 1em;
		}
		#elginy #content_main ol li#personalitza .sub_bloc {
			background: #65a9b0 url('images/fletxes_conf.gif') 196px 4em no-repeat;
		}
			#elginy #content_main ol li h4 {
				margin: 0 0 .5em;
			}
			#elginy #content_main ol li li {
				background: #76bdc6;
				float: left;
				padding: 15px;
				width: 145px;
				margin-right: 23px;
			}
			#elginy #content_main ol li li#resultat {
				width: 396px;
				margin-right: 0;
				text-align: center;
			}
				#elginy #content_main ol li li#resultat p {text-align: left;}
			#elginy #content_main ol li li#colors img {vertical-align: middle;}
				#elginy #content_main ol li li legend,
				#elginy #content_main ol li li p {
					color: #333;
					font-size: 1em;
					margin-bottom: .5em;
				}
			#elginy #content_main ol li label {
				display: block;
				margin-bottom: .5em;
			}
#elginy #content_main .bloc code {
	color: #000;
	background: #ff9;
	margin: 0 0 1.125em;
	padding: 15px;
	display: block;
	font-family: monospace;
	font-size: 1em;
	border: 1px solid #4b8b90;
}