@import "reset.css";
body{margin:0; padding:0; background-color:#fff; font:normal 0.79em Arial ,Verdana,Sans-Serif; line-height:1.4em; color:#000}
	h1, h2, h1 a, h2 a {line-height:1em; color:#fff}
	p {line-height:1.5em; margin:5px 0 20px 0}
	a {color:#000; text-decoration:none}
	a:hover {color:#000; text-decoration:underline}
	a:active {outline:none}
	.r {text-align:right}	
	.versals {font-variant:small-caps}

#container {width:900px; margin:0 auto}

#header {height:130px; background:#0046b9 url(../_img/bg-header.png) no-repeat 0 0}
	#logo {float:left; position:absolute; margin:15px 0 0 30px; z-index:1000}
	#lang {}

	#menu {clear:both; float:right; margin:95px 24px 0 0}
	#menu ul {list-style:none}
	#menu li {display:inline; margin:0; padding:0; position:relative}
	#menu a {color:#fff; display:block; margin:0; padding:0; float:left; height:30px; line-height:30px; text-decoration:none; background-image:url(../_img/menu.gif); background-repeat:no-repeat; text-indent:-5000px}
	#menu ul li ul {display:none; position:absolute; top:30px; border-top:5px solid #fff; filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75; z-index:1000}
		#sub-productes {left:-440px}
		#sub-botigues {left:-290px}
		#sub-historia {left:-215px}
	#menu ul li ul li{display:list-item; padding-left:10px; background-color:#333; border-right:1px solid #fff; border-left:1px solid #fff; border-bottom:1px solid #fff; filter:alpha(opacity=100); -moz-opacity:1; opacity:1}
		#sub-productes li {width:120px}
		#sub-botigues li {width:150px}
		#sub-historia li {width:120px}
		#menu ul li ul li a{float:none; background-image:none; text-indent:0; color:#fff; height:25px; line-height:25px}
	#menu ul li ul li:hover {background-color:#000; filter:alpha(opacity=100); -moz-opacity:1; opacity:1}
	#menu ul li ul li a:hover {text-decoration:none}
	
		#menu .products {width:80px; background-position:-75px 0}
		#menu .products:hover {background-position:-75px -31px}
		#menu .products.current {background-position:-75px -63px}
		#menu .news {width:70px; background-position:-449px 0}
		#menu .news:hover {background-position:-449px -31px}
		#menu .news.current {background-position:-449px -63px}
		#menu .enterprise {width:74px; background-position:0 0}
		#menu .enterprise:hover {background-position:0 -31px}
		#menu .enterprise.current {background-position:0 -63px}
		#menu .shops {width:75px; background-position:-154px 0}
		#menu .shops:hover {background-position:-154px -31px}
		#menu .shops.current {background-position:-154px -63px}
		#menu .receipts {width:75px; background-position:-229px 0}
		#menu .receipts:hover {background-position:-229px -31px}
		#menu .receipts.current {background-position:-229px -63px}
		#menu .history {width:65px; background-position:-304px 0}
		#menu .history:hover {background-position:-304px -31px}
		#menu .history.current {background-position:-304px -63px}
		#menu .contact {width:80px; background-position:-370px 0}
		#menu .contact:hover {background-position:-370px -31px}
		#menu .contact.current {background-position:-370px -63px}	

#splash {height:105px; background-image:url(../_img/header_botiga2.jpg)}
	.botigues #splash.botiga-0 {background-image:url(../_img/header_botiga1.jpg)}
	.botigues #splash.botiga-1 {background-image:url(../_img/header_botiga2.jpg)}

#main {min-height:400px; display:block}
	.botigues #main, .historia #main {height:auto}
	#main.contactar h1 { font-size:45px; margin:40px 0 10px 0}
	.empresa #fotos {clear:both; padding:20px 0 40px 0}
	.empresa #fotos img.left {margin-right:20px}
	.productes-info #main {height:auto; padding:0 0 85px 25px}

	.productes-info #splash {background-image:url(../_img/header_botiga2.jpg)}
	.productes #bg-image {position:absolute; z-index:-100; height:400px; width:900px} 	/*ie & ff ok*/
	.productes #bg-image .loading {background:url(../_img/loading.gif) no-repeat 850px 25px}
	.productes-info h1 {font-size:45px; margin:25px 0 10px 0}
	.productes-info h2 {font-size:26px; margin:15px 0 10px 0; border-bottom:1px solid #666}
	.productes-info .foto-producte {width:425px; height:250px; float:left; text-align:left}
	.productes-info table {margin-bottom:30px; width:450px}
	.productes-info td {width:33%; color:#666}
	.productes-info p.specs {color:#666}
	
	#left {float:left; width:270px; padding:0 15px 15px 15px} 	/*only ie6 need overflow:visible; and only ie7 need position:absolute; */		
		.productes #left {width:260px; padding:75px 22px 15px 20px; position:absolute; overflow:visible}
		.productes #left div.text {height:165px}
		.botigues #left {width:420px; padding:10px 20px 0 10px}
		.receptes #left {width:450px; padding:40px 20px 40px 10px}
		.contactar #left {width:425px; padding:15px 20px 25px 0}
		.historia #left, .empresa #left, .news #left {width:520px; padding:40px 70px 25px 10px}
		.historia.mercat #left {width:470px; padding:40px 70px 25px 10px; background-color:#fff}
		.historia #left h1, .empresa #left h1, .receptes #left h1 {font-size:45px; margin-bottom:20px}
		.historia #left p.author {margin-top:-90px}
		.historia.mercat #left p.author {margin-top:-60px}

		#left p.link {margin-top:40px; border-top:1px solid #000; line-height:1.75em}
		#left p.link a {padding-left:20px; font-style:italic; text-decoration:none}
		#left p.link a:hover {text-decoration:underline}

		#left h1,h2 {line-height:1em}
		#left h3 {margin:0 0 5px 0}
		#left p {line-height:1.5em; margin:5px 0 20px 0}
		
		.news #left a { text-decoration:underline; color:#333}
		.news #left a:hover { text-decoration:none; color:#000}

		.news #left ul {margin:20px 0 20px 40px}
		.news #left ul li {line-height:1.5em; list-style:disc}

		.news #left ol {margin:20px 0 20px 40px}
		.news #left ol li {line-height:1.5em; list-style:decimal}
	
		.botigues #left h1 {font-size:35px; margin-top:25px}
		.productes #left h1 {font-size:28px; margin-bottom:5px}
		#left p.more-info { text-align:right}
		.productes #left a.more-info {float:right; display:block; width:115px; height:20px; margin:-40px 0 5px 0; text-indent:-5000px; background:url(../_img/botoinfo.png) no-repeat 0 0; z-index:1000}
		.productes #left a.more-info:hover {background-position:0 -20px}

		.llistat-botigues {margin:15px 0 0 0; height:135px; width:auto}
		.llistat-botigues li {margin:0 200px 0 10px; line-height:1.5em; height:25px; line-height:25px}
		.llistat-botigues li.active a {background-color:#555; text-decoration:none; color:#fff}
		.llistat-botigues a {display:block; padding:0 10px}
		.llistat-botigues a:hover {background-color:#eee; text-decoration:none; color:#000}
		
		#mapa {width:445px; height:275px; border:1px solid #222; margin-bottom:20px; background:url(../_img/loading.gif) no-repeat center center}
		#frmContactar label {display:block; width:120px; float:left; text-align:right; padding:7px 10px 0 0}
		#frmContactar input {width:240px; padding:2px 4px; margin:5px 0; border:1px solid #222}
		#frmContactar textarea {width:240px; padding:2px 4px; margin:5px 0; height:143px; border:1px solid #222; font:normal 1em Arial ,Verdana,Sans-Serif; overflow:auto}
		#frmContactar .btnSend {float:right; margin:15px 40px 0 0; background:url(../_img/enviar.png) no-repeat 0 0; border:none; width:100px; height:30px; text-indent:-5000px; 
		cursor:pointer; font-size: 0px; display:block; line-height: 0px}
		#frmContactar .btnSend:hover {background-position: 0 -30px}
		#frmContactar .btnSend:active {background-position: 0 -60px}

	#right {float:right; width:590px; padding:10px 0 10px 10px}
		.botigues #right {width:450px; height:380px; margin-top:30px; padding:5px 0 25px 0}
		.receptes #right {width:420px; height:380px; margin-top:40px; padding:5px 0 25px 0; text-align:right}
		.receptes #right strong {font-weight:normal; color:#666}
		.contactar #right {width:450px; padding:20px 0 25px 0}
		.historia #right, .empresa #right, .news #right {width:300px; height:auto; margin-top:10px; padding:40px 0 0 0}
		.news #right { padding-bottom:40px}
		.empresa #right img {margin-top:45px}
		.historia.mercat #right {width:350px; height:auto; margin-top:10px; padding:40px 0 0 0}

		.historia #right p {color:#666}

		#right h1 {line-height:1em; margin:5px 0 20px 0}
		#right p {line-height:1.5em; margin:5px 0 20px 0}		

		#tabs-botigues ul {margin:0; padding:0}
		#tabs-botigues li {display:inline}
		#tabs-botigues li a {float:right; text-align:center; display:block; width:100px; background-color:#eee; color:#777; height:30px; line-height:30px; border-top:3px solid #fff}
		#tabs-botigues li a:hover {background-color:#ddd; color:#000; text-decoration:none; border-top-color:#ddd}
		#tabs-botigues li a.active {background-color:#555; color:#fff; text-decoration:none; border-top-color:#555}

		.tabs-container {float:right; width:450px; height:320px; /*background-color:#ddd*/}
		#map {width:448px; height:258px; border:1px solid #555; background:url(../_img/loading.gif) no-repeat center center}
		div.photo {width:450px; height:260px; background-color:#555}
		div.photo img {border:1px solid #fff}
		.tabs-bottom {clear:both; padding-top:10px; /*background-color:#ccc*/}
		.tabs-bottom img {border:1px solid #fff; margin:2px 0 0 10px; cursor:pointer; float:right}
		.tabs-bottom img.active {filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50}
		.tabs-bottom img:hover {border:1px solid #555}
		
	/*grid portada*/
	#intro { float:left; height:283px; width:595px; padding-right:15px; background:url(../_img/point.gif) repeat-y right 0}
	#news { float:right; height:283px; width:280px; padding:0 5px; background-color:#f3f3f3}
		#news div { height:200px}
		#news div p { margin:7px 10px 13px 10px}
		#news div b { font-weight:normal; color:#555}
	.line { clear:both; border-bottom:1px solid #000; margin:0 0 5px 0; height:5px; background-color:#fff}
	#square-banner { float:left; height:185px; width:290px; padding-right:15px; background:url(../_img/point.gif) repeat-y right 0}
	#multiple-banners { float:right; width:595px}
		#multiple-banners .bAmple {width:595px; height:87px;}
		#multiple-banners .line { height:5px; margin-top:0; background-color:#fff}
		#multiple-banners .b {width:290px; height:87px; float:right}
		#multiple-banners .b.left {padding-right:15px; background:url(../_img/point.gif) repeat-y right 0}
	#news p { margin:-10px 0 10px 0; color:#333	}

	#slider ul, #slider li {list-style:none; margin:0; padding:0}
	#slider li {height:283px; overflow:hidden; width:595px}

	#prevbtn, #nextbtn, #slider1next, #slider1prev {display:block; height:77px; left:-30px; position:absolute; top:71px; width:30px; z-index:1000}
	#nextbtn, #slider1next {left:200px}
	#prevbtn a, #nextbtn a, #slider1next a, #slider1prev a {background:url(../images/btn_prev.gif) no-repeat 0 0; display:block; height:77px; position:relative; width:30px}
	#nextbtn a, #slider1next a {background:url(../images/btn_next.gif) no-repeat 0 0}
	
	ol#controls {position:absolute; top:145px; margin-left:475px; z-index:10}
	ol#controls li {float:left; height:24px; line-height:24px; list-style:none; margin:0 10px 0 0; padding:0}
	ol#controls li a {background:#fff; border:1px solid #555; color:#333; float:left; height:24px; line-height:24px; padding:0 10px; text-decoration:none}
	ol#controls li a:hover {background:#777; color:#ddd; border-color:#fff}
	ol#controls li.current a {background:#000; color:#fff}
	ol#controls li a:focus, #prevbtn a:focus, #nextbtn a:focus {outline:none}		

#banners {clear:both; margin:5px 0; padding:5px 0; border-top:1px solid #000; border-bottom:1px solid #000; height:87px}
	#banners img {float:left; margin:0; padding:0}
	#banners .separator {float:left; width:15px; height:90px; background:url(../_img/point.gif) repeat-y 0 0}

#footer {clear:both; margin:5px 0 20px 0}
	#footer table {width:100%; margin:0}
	#footer td {width:50%; padding:3px 10px; background-color:#000; color:#aaa}
	#footer td.specs {text-align:right}	
	#footer td a {text-decoration:none; color:#aaa}
	#footer td a:hover {text-decoration:underline; color:#fff}
	#footer #credits {margin-top:5px; color:#777; text-align:right; display:none}
	#footer #credits a {text-decoration:none; color:#333}
	#footer #credits a:hover {text-decoration:underline; color:#000}