@import "reset.css";
body { margin:0; font:80% "Lucida Sans", Helvetica, sans-serif; color:#333; background:#eee url(../_img/bg_body.jpg) repeat-x center -8px}
	h1 {margin:30px 0 10px 0; color:#333; font:normal 1.85em Verdana, Geneva, sans-serif}
	h2 {margin:25px 0 5px 0; color:#555; font:normal 1.65em Verdana, Geneva, sans-serif}
	p {margin:5px 18px 15px 0; padding:0; line-height:1.75em}
	ul {list-style:square; margin:10px 30px 15px 30px; padding:0}
	li {padding:5px 0 5px 0px; line-height:1.5em; background:url(../_img/ico_specs.gif) no-repeat 0 center}
	li a {color:#111; text-decoration:none}
	li a:hover {color:#ffd200; text-decoration:underline}

	input, .input {font:normal 100% Calibri, "Lucida Sans Unicode", Helvetica, sans-serif; border:1px solid #ddd; color:#000}
	textarea {font:normal 100% Calibri, "Lucida Sans Unicode", Helvetica, sans-serif; border:1px solid #ddd; overflow:auto; color:#000}
	
	a {text-decoration:underline; color:#333}
	a:hover {text-decoration:none; color:#555}

	.r { text-align:right}
	.c { text-align:center}

#wrapper {width:940px; padding:0 20px; margin:0 auto}

	#menu { margin-bottom:40px; height:100px; background:url(../_img/logo_header.png) no-repeat left top}
	
	#menu p { margin:2px 0 0 0; float:right; color:#aaa}
	#menu p a {color:#aaa; text-decoration:none}
	#menu p a:hover {color:#fc0; text-decoration:none}

	#menu ul {clear:both; margin:30px 0 0 0; float:right; list-style:none}
	#menu li {display:inline; position:relative; float:left; color:#ddd; margin:0}
	#menu li:hover {color:#333}
	#menu li a {font-size:22px; color:#ccc; display:block; float:left; background-image:url(../_img/menu.gif); background-repeat:no-repeat; cursor:pointer }
	#menu li a:hover {color:#fc0; text-decoration:none}
	#menu li br {clear:both}

	#menu li a span {display:block; height:25px; background-image:url(../_img/menu.gif); background-repeat:no-repeat; text-indent:-9999px}
	#menu li a.active {cursor:default}
	
		#menu .portada a {width:140px; background-position:0 -10px}
		#menu .portada span {background-position:0 -110px} 
		#menu .portada a.active {background-position:0 -60px}

		#menu .portfolio a {width:160px; background-position:-145px -10px}
		#menu .portfolio span {background-position:-145px -110px}
		#menu .portfolio a.active {background-position:-145px -60px}

		#menu .about a {width:130px; background-position:-305px -10px}
		#menu .about span {background-position:-305px -110px}
		#menu .about a.active {background-position:-305px -60px}

		#menu .contact a {width:135px; background-position:-439px -10px}
		#menu .contact span {background-position:-439px -110px} 
		#menu .contact a.active {background-position:-439px -60px}


	h1.intro { margin:20px 40px 30px 125px; line-height:1.5em; color:#777}
	h1.intro strong { color:#fc0}
	
	div.separator {clear:both; margin:0 14px 10px 0; padding:0; height:10px; background:url(../_img/bg_separador.gif) repeat-x 0 0}
	
	#portada #serveis { min-height:480px}
	
	#serveis {float:left; width:450px}
		#serveis ul { margin:25px 30px 35px 30px}
		#serveis li { padding:10px 0 5px 0 }

	#about .intro, #contact .intro {float:left; width:350px; padding-top:25px}
		#about .intro p, #contact .intro .p {margin-bottom:25px}

	#contact .intro {padding-top:50px}
	#contact .intro p.dades {padding-left:50px}
	#contact .intro p.dades a { text-decoration:none}
	#contact .intro p.dades a:hover { text-decoration:none; color:#fc0}
	#contact .intro strong { font-size:1.5em; font-weight:normal}

	#formulari form { margin:15px 0 0 35px}
	#formulari label {margin:10px 0 3px 0; display:block}
	#formulari input {width:344px; height:24px; border:1px solid #e0e0e0; padding:9px 5px 0px 5px}
	#formulari textarea {overflow:auto; width:344px; height:120px; border:1px solid #e0e0e0; padding:5px}
	#formulari input, #formulari textarea {font:normal 100% Arial, Helvetica, sans-serif }
	#formulari p {text-align:right; margin:15px 10px 0 0}
	#formulari .button {width:125px; height:34px; border:1px solid #fc0; background-color:#fc0; color:#555; padding:0; font-size:125%; margin:20px 135px 0 0}

	#formulari p.msg { margin:75px 150px 0 75px; text-align:center}
	#formulari p.msg.error {color:#f00}
	#formulari p.msg.error a {color:#f00}
		
	#tabs { float:right; width:525px; margin:25px 0}
		#tabs h3 {float:left}
		#tabs p { margin:0 0 25px 200px}
		div#personal p { margin-left:0}

		#tabs ul {text-align:left; border-bottom:0px solid #ddd; list-style-type:none; margin:15px 0 25px 0; height:30px; padding:0 10px 0 10px}
		#tabs li {display:inline; border-bottom:1px solid #ddd; padding:15px 0 10px 0; margin:0 -2px 0 -2px}
		#tabs li a {color:#aaa; margin-right:0; text-decoration:none; padding:0 25px 0 25px; font-size:1.5em}
		#tabs a:hover {color:#555}
		#tabs li.active {border:1px solid #ddd; border-bottom:none}
		#tabs li.active a {color:#fc0; text-decoration:none; cursor:default}
		
		#tabs div { display:none; height:500px}
		#tabs div.active { display:block}

	/*projectes destacats de la portada*/	
	#destacats { clear:both; float:right; margin-bottom:20px}
	#destacats img {margin:20px 15px 5px 10px; border:1px solid #ddd}

	.projecte { margin-bottom:75px}
	.specs { float:left; width:260px; margin-right:40px}
		.specs p { margin-top:25px}
	.imatges { float:right; width:640px}

	p.link { text-align:right; padding-right:35px; min-height:30px; line-height:30px; background:url(../_img/bg_link.png) no-repeat right 1px}
	p.link a{ text-decoration:none; font-size:16px; color:#aaa; font-size:1.5em}
	p.link a:hover { text-decoration:none; color:#fc0}

	/*images slider*/
	#slider1, #slider2, #slider3 {margin:0 15px 0 0}
	#slider1 ul, #slider1 li, #slider2 ul, #slider2 li, #slider3 ul, #slider3 li {margin:0; padding:0; list-style:none}
	#slider1 li, #slider2 li, #slider3 li {width:640px; height:360px; overflow:hidden} /* define width and height of list item (slide)entire slider area will adjust according to the parameters provided here*/ 
	p#controls1, p#controls2, p#controls3 {margin:0; position:relative}

	#prevBtn1, #nextBtn1, #prevBtn2, #nextBtn2, #prevBtn3, #nextBtn3 {display:block; margin:0; overflow:hidden; text-indent:-9999px; width:320px; height:360px; position:absolute; top:-360px;}
	#prevBtn1 a, #nextBtn1 a, #prevBtn2 a, #nextBtn2 a, #prevBtn3 a, #nextBtn3 a {display:block; width:320px; height:360px; background:url(../_img/btn_prev.png) no-repeat 9999px center}
	#nextBtn1, #nextBtn2, #nextBtn3 {left:320px}
	#nextBtn1 a, #nextBtn2 a, #nextBtn3 a {background:url(../_img/btn_next.png) no-repeat -9999px center}											
	#prevBtn1 a:hover, #prevBtn2 a:hover, #prevBtn3 a:hover {background-position:left center}
	#nextBtn1 a:hover, #nextBtn2 a:hover, #nextBtn3 a:hover {background-position:260px center}
	/* end slider */


	/*paginació projectes*/
	#pagination { color:#777; text-align:center; margin:40px 25px 0 25px; padding:25px 0; border-top:1px solid #c5c5c5; /*border-bottom:1px solid #c5c5c5*/}
	#pagination strong {padding:8px 17px; font-weight:normal; color:#333; background:url(../_img/bg_circle.png) no-repeat center center}
	#pagination a {color:#777; text-decoration:none; padding:18px 17px}
	#pagination a:hover {text-decoration:underline; color:#333}
	#pagination a.next {background:url(../_img/bg_link.png) no-repeat right center; padding-right:35px}
	#pagination a.prev {background:url(../_img/bg_link_prev.png) no-repeat left center; padding-left:35px}

	#pagination a.nPag {padding:8px 12px}
	#pagination a.nPag:hover {text-decoration:none; color:#fff; background:url(../_img/bg_circle_full.png) no-repeat center center}


#footer {clear:both; margin:25px 0 5px 0; padding-top:10px; border-top:1px solid #ccc}
#footer p { margin:0; padding:0; text-align:right; line-height:125%; color:#999}
#footer a {color:#999; text-decoration:none}
#footer a:hover {color:#111; text-decoration:underline}